JS高级学习历程-2

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>

相关阅读:
网络编程
反射函数与元类
面向对象进阶
对象的封装与接口
对象继承
面向对象
包，logging模块与haslib模块
闭包函数及装饰器
函数对象、函数的嵌套、名称空间及作用域
函数简介及函数参数介绍

原文地址：https://www.cnblogs.com/daipianpian/p/4499385.html