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

 <!DOCTYPE html>

 <html lang="en">

 <head>

       <meta charset="UTF-8">

       <title>01-创建无序列表</title>

       <script type="text/javascript">

         window.onload=function(){

             var per=['关羽','张飞','赵云','吕布'];

             var ull=document.createElement('ul');

             for (var i=0; i<per.length; i++){

                   var lii = document.createElement('li');

                   var lii_t = document.createTextNode(per[i]);

                   lii.appendChild(lii_t);

                   ull.appendChild(lii);

             }

             document.body.appendChild(ull);

          }

       </script>

 </head>

 <body>

 </body>

 </html>

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

node.style.backgroundColor="gray";

node.style.backgroundColor="";

 <!DOCTYPE html>

 <html lang="en">

 <head>

       <meta charset="UTF-8">

       <title>01-创建无序列表</title>

       <script type="text/javascript">

         window.onload=function(){

             var per=['关羽','张飞','赵云','吕布'];

             var ull=document.createElement('ul');

             for (var i=0; i<per.length; i++){

                   var lii = document.createElement('li');

                   var lii_t = document.createTextNode(per[i]);

                   lii.appendChild(lii_t);

                   ull.appendChild(lii);

                   //给每个li设置鼠标“移入移出”事件

                   lii.addEventListener("mouseover",function(){

                        // this 代表当前的li元素节点对象

                        this.style.backgroundColor = "pink";

                   });

                   lii.addEventListener("mouseout",function(){

                         this.style.backgroundColor = "";

                   });

             }

             document.body.appendChild(ull);

          }

       </script>

 </head>

 <body>

 </body>

 </html>

JS高级学习历程-2的更多相关文章

  1. JS高级学习历程-6

    PHP菜鸟学习历程-6 [闭包案例] 1 闭包创建数组 <!DOCTYPE html> <html lang="en"> <head> < ...

  2. JS高级学习历程-1

    JS高级-34-昨天内容回顾     时间:2015-5-11 1.DOM获取元素节点 document.getElenmentById(id 属性值)                         ...

  3. JS高级学习历程-15

    昨天内容回顾 面向对象的私有成员.静态成员 私有成员:在构造函数里边定义局部变量,就是私有成员. 静态成员:在js里边,函数就是对象,可以通过给函数对象声明成员方式声明静态成员. 原型继承 关键字:p ...

  4. JS高级学习历程-14

    昨天内容回顾 1. 面向对象的私有成员.静态成员 私有成员:在构造函数里边定义局部变量,就是私有成员. 静态成员:在js里边,函数就是对象,可以通过给函数对象声明成员方式声明静态成员. 2. 原型继承 ...

  5. JS高级学习历程-11

    [继承] 在php,一个类去继承另一个类,本类实例化出来的对象,既可以调用本身类的成员,也可以调用父类的成员. 在javascript继承主要通过原型实现,构造函数继承一个对象,构造函数的实例会拥有被 ...

  6. JS高级学习历程-10

    [面向对象] 面向对象的三大特性:封装.继承.多态 封装:在“类”里边有关键字public.protected.private 对成员进行声明,这样每个成员的访问都会受到不同关键字的限制. 继承:在p ...

  7. JS高级学习历程-5

    [闭包] 定义:闭包就是一个函数 条件:一个函数去嵌套另外一个函数,里边的函数就是闭包 function  f1(){ function f2(){ } } 特点:闭包函数有权访问父级环境的变量信息.

  8. JS高级学习历程-3

    JS-作用域链及作用 [作用域链] 1 什么事作用域链 一个变量,在当前环境可以使用,当前环境的内部环境也可以使用,内部的深层环境...也可以使用,变量在不同环境都可以使用的现象想成了一个链条,称为“ ...

  9. JS高级学习历程-17

    [正则案例] 1 匹配手机号码

  10. JS高级学习历程-16

    [正则表达式] 1()小括号使用 作用:① 提高表达式优先级关系 ② 提取子字符串内容 模式单元,每个小括号都算作一个模式单元内容,按照内容的下标可以给小括号计数. var  reg = /([0-9 ...

随机推荐

  1. 学习c语言的第14天

    #include <stdio.h> #include <string.h> struct student { int age; char sex; char name[100 ...

  2. shell之起步

    初学者,先不要考虑好不好看,效率高不高!先要实现需求!需求是第一位! grep.sed.awk.三剑客! 学好shell,需要前提! 1.linux系统命令熟练 2.搞清楚正则,grep.sed.aw ...

  3. 一小时搞明白自定义注解(Annotation)

    原文链接:http://blog.csdn.net/u013045971/article/details/53433874 什么是注解 Annotation(注解)就是Java提供了一种元程序中的元素 ...

  4. Zabbix数据库清理历史数据

    Zabbix清理历史数据 Zabbix是个很好的监控软件,随着公司监控项目越来越多,数据越来越多,zabbix负载重,可能造成系统性能下降. Zabbix里面最大的表就是历史记录表,history,h ...

  5. MySQL记录_20160919

    1.首先先看下什么是MySQL. MySQL是一个关系型数据库管理系统,由瑞典MySQL AB 公司开发,目前属于 Oracle 旗下产品.MySQL 最流行的关系型数据库管理系统,其开放源码这一特点 ...

  6. 使用ubuntu自带的Remmina Remote Desktop Client远程登录服务器配置

    1.配置:点击new , 配置服务器ip地址.名称.密码 2.打开本机终端执行一下命令: echo xfce4-session>.session echo xfce4-session>.x ...

  7. hdu 3625 Examining the Rooms —— 第一类斯特林数

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=3625 学习斯特林数:https://blog.csdn.net/qq_33229466/article/d ...

  8. HL7 Event Type

    Table 0003 - Event type Value Description A01 ADT/ACK - Admit / visit notification A02 ADT/ACK - Tra ...

  9. win7 64位搭建Mantis 缺陷管理系统（2）

    建立Bug数据库 1. 右键Windows托盘的图标,选择“Local Web”,(或者在IE地址中输入“http://127.0.0.1/”)可看到如下页面: 2. 点击选择“mantis”,进入页 ...

  10. DataTable批量插入数据库

    最近在将excel中的文件导入到数据库中,用程序进行编写,由于数据量较大所以速度很慢,后来采用了SqlBulkCopy类,解决了速度的问题,我就insert语句,sqldataadapter.upda ...