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. [转]aliyun阿里云Maven仓库地址——加速你的maven构建

    原文链接:http://www.cnblogs.com/geektown/p/5705405.html maven仓库用过的人都知道,国内有多么的悲催.还好有比较好用的镜像可以使用,尽快记录下来.速度 ...

  2. 算法（Algorithms）第4版 练习 1.3.20

    方法实现: //1.3.20 /** * delete the kth element in a linked list, if it exists. * * @param k the kth ele ...

  3. laravel基础课程---15、分页及验证码（lavarel分页效果如何实现）

    laravel基础课程---15.分页及验证码(lavarel分页效果如何实现) 一.总结 一句话总结: 数据库的paginate方法:$data=\DB::table("user" ...

  4. 使用jedisPool管理jedis，使用jedis操作redis

    ps:jedis是redis在java中的客户端操作工具 package com.test; 2 3 import java.util.HashMap; 4 import java.util.Iter ...

  5. tensorflow 线性回归 iris

    线性拟合

  6. Web 攻击之 XSS 攻击及防御策略

    XSS 攻击 介绍 XSS 攻击,从最初 netscap 推出 javascript 时,就已经察觉到了危险. 我们常常需要面临跨域的解决方案,其实同源策略是保护我们的网站.糟糕的跨域会带来危险,虽然 ...

  7. ACM学习历程—HDU 5289 Assignment(线段树 || RMQ || 单调队列)

    Problem Description Tom owns a company and he is the boss. There are n staffs which are numbered fro ...

  8. 描述怎样通过flask+redis+sqlalchemy等工具，开发restful api

    flask开发restful api系列(8)-再谈项目结构 摘要: 进一步介绍flask的项目结构,使整个项目结构一目了然.阅读全文 posted @ 2016-06-06 13:54 月儿弯弯02 ...

  9. BZOJ2028：[SHOI2009]会场预约（平衡树版）

    浅谈\(splay\):https://www.cnblogs.com/AKMer/p/9979592.html 浅谈\(fhq\)_\(treap\):https://www.cnblogs.com ...

  10. ubuntu_deb安装命令

    dpkg命令常用格式如下: sudo dpkg -I iptux.deb#查看iptux.deb软件包的详细信息,包括软件名称.版本以及大小等(其中-I等价于--info) sudo dpkg -c ...