| 
 | 
 
马上注册,结交更多好友,享用更多功能^_^
您需要 登录 才可以下载或查看,没有账号?立即注册  
 
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 课程: 
 
 |   
 
评分
- 
查看全部评分
 
 
 
 
 
 |