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. PYTHON 爬虫笔记九:利用Ajax+正则表达式+BeautifulSoup爬取今日头条街拍图集（实战项目二）

    利用Ajax+正则表达式+BeautifulSoup爬取今日头条街拍图集 目标站点分析 今日头条这类的网站制作,从数据形式,CSS样式都是通过数据接口的样式来决定的,所以它的抓取方法和其他网页的抓取方 ...

  2. 反向ssh

    参考 https://www.thegeekstuff.com/2013/11/reverse-ssh-tunnel/ https://www.howtoforge.com/reverse-ssh-t ...

  3. css设置文件编码

    在外部css文件的顶部,写入下面代码: @charset "UTF-8";

  4. Unity 官方自带的例子笔记 - Space Shooter

    首先 买过一本叫 Unity3D开发的书,开篇第一个例子就是大家经常碰见的打飞机的例子,写完后我觉得不好玩.后来买了一本 Unity 官方例子说明的书,第一个例子也是打飞机,但是写完后发现蛮酷的,首先 ...

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

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

  6. 详解使用python crontab设置linux定时任务

    熟悉linux的朋友应该知道在linux中可以使用crontab设置定时任务.可以通过命令crontab -e编写任务.当然也可以直接写配置文件设置任务. 但是有时候希望通过脚本自动设置,比如我们应用 ...

  7. 《TCP/IP详解卷一：协议》数据链路层（一）

    版权声明:本文为博主原创文章,转载请标注转载链接,谢谢.   目录(?)[+]   引言         在TCP/IP协议族中,链路层主要有三个目的: 为IP模块发送和接收IP数据报. 为ARP模块 ...

  8. iOS端IM开发从入门到填坑

      让App聊起来 IM开发从入门到填坑Demo IM的实现方式 拿来主义,使用第三方IM服务 IM的第三方服务商国内有很多,底层协议基本上都是基于TCP的,类似有网易云信.环信.融云.极光IM.Le ...

  9. Primer回顾 数组和指针

    数组和指针类似于vector和迭代器. 区别在于:数组的长度是固定的.数组一经创建,就不允许添加新的元素.指针则可以像迭代器一样用于遍历和检查数组中的元素. 设计良好的程序只有在强调速度时才在类实现的 ...

  10. 泛型(Generic)

    当集合中存储的对象类型不同时,那么会导致程序在运行的时候的转型异常 import java.util.ArrayList; import java.util.Iterator; public clas ...