JS高级学习历程-2

最新推荐文章于 2025-12-15 15:15:21 发布

转载最新推荐文章于 2025-12-15 15:15:21 发布 · 124 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/daipianpian/p/4499385.html

文章标签：

#javascript #ViewUI

1、dom操作，利用dom创建无序列表。并追加到body里边，里面要求至少有四个项目。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4       <meta charset="UTF-8">
 5       <title>01-创建无序列表</title>
 6       <script type="text/javascript">
 7         window.onload=function(){
 8             var per=['关羽','张飞','赵云','吕布'];
 9             var ull=document.createElement('ul');
10 
11             for (var i=0; i<per.length; i++){
12                   var lii = document.createElement('li');
13                   var lii_t = document.createTextNode(per[i]);
14 
15                   lii.appendChild(lii_t);
16                   ull.appendChild(lii);
17 
18                 
19             }
20             document.body.appendChild(ull);
21          }
22       </script>
23 </head>
24 <body>
25       
26 </body>
27 </html>

2.给每个无序列表设置事件（dom2级），鼠标移入、移除，让鼠标当前行高亮显示

node.style.backgroundColor="gray";

node.style.backgroundColor="";

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4       <meta charset="UTF-8">
 5       <title>01-创建无序列表</title>
 6       <script type="text/javascript">
 7         window.onload=function(){
 8             var per=['关羽','张飞','赵云','吕布'];
 9             var ull=document.createElement('ul');
10 
11             for (var i=0; i<per.length; i++){
12                   var lii = document.createElement('li');
13                   var lii_t = document.createTextNode(per[i]);
14 
15                   lii.appendChild(lii_t);
16                   ull.appendChild(lii);
17 
18                   //给每个li设置鼠标“移入移出”事件
19                   lii.addEventListener("mouseover",function(){
20                        // this 代表当前的li元素节点对象
21                        this.style.backgroundColor = "pink";
22                   });
23                   lii.addEventListener("mouseout",function(){
24                         this.style.backgroundColor = "";
25                   });
26                 
27             }
28             document.body.appendChild(ull);
29          }
30       </script>
31 </head>
32 <body>
33       
34 </body>
35 </html>