|
马上注册,结交更多好友,享用更多功能^_^
您需要 登录 才可以下载或查看,没有账号?立即注册
x
本帖最后由 不二如是 于 2021-8-11 09:08 编辑
在前面我们对HTML、CSS有了初步了解。
现在看一下JS!
- 完成第一次JS交互
我们改良下传送门,来“解”开JS的面纱!
之前我们单击传送门,就会被传到小天才养殖场
现在,就不跳转了,直接按钮变成“穿越成功”
完成一次简单的状态交互过程~
就像0004咱们第一次使用CSS一样。
总需要赋予按钮一个“名字”或者“标签”来让JS找到这个按钮。
很简单,修改html文件中的<a>标签,为其添加名为“first_Js”的id属性:
- <a href="http://bbs.fishc.com/forum-337-1.html" id="first_Js">传送门</a>
复制代码
正确创建名字后,就可以创建JS标签来写后续的代码了。
但是JS部分放在哪里呢?
可以放在<head>,也可以放在<body>!
但建议放在<body>,这样避免JS代码提前被解析,提高加载速度。
在body添加代码:
- <body>
- <div id="container">
- <h1>我爱鱼C</h1>
- <p>WWW.FihsC.com - 让编程改变世界</p>
- <a href="http://bbs.fishc.com/forum-337-1.html" id="first_Js">传送门</a>
- </div>
- <script type="text/javascript">
- var first_Js = document.getElementById("first_Js");
- </script>>
- </body>
复制代码
需要使用var关键字,来定义一个变量对应“传送门”按钮,便于后续对按钮的设置。
通过使用document对象的getElementBy方法,来获取id名所对应的元素。
如果你不确定,是否对应成功,可以使用:
来进行测试,成功的话,会弹出这个提示框:
现在就可以,修改first_Js的onclick(单击事件)了。
有二件事,需要注意:
一,可通过preventDefault方法,来阻止URL跳转网页。
二,innerHTML属性来修改,单击“传送门”后字体变为“穿越成功”
代码如下:
- first_Js.onclick = function(e)
- {
- e.preventDefault();
- first_Js.innerHTML = "穿越成功";
- }
复制代码
演示效果:
- 面向对象
没错,聪明如你,一定猜到了,一定可以像0008CSS样式文件一样,独立封装JS
还是在目录下,创建XXX.js,然后通过xxx.html调用即可!
first_Js.js文件,代码:
在html中添加外部链接,14行:
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>欢迎来到HTML世界</title>
- <link href="0009CSS.css" rel="stylesheet">
- </head>
- <body>
- <div id="container">
- <h1>我爱鱼C</h1>
- <p>WWW.FihsC.com - 让编程改变世界</p>
- <a href="http://bbs.fishc.com/forum-337-1.html" id="first_Js">传送门</a>
- </div>
- <script src="first_Js.js"></script>
- </body>
- </html>
复制代码
为了响应号召,JavaScript - 庖丁解牛已开启大幕,欢迎订阅
这位鱼油,如果喜欢本帖子,请订阅 专辑-->( 传送门)( 不喜欢更要订阅 )
官方 Web 课程:
|
评分
-
查看全部评分
|