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. ZOJ - 3430 Detect the Virus —— AC自动机、解码

    题目链接:https://vjudge.net/problem/ZOJ-3430 Detect the Virus Time Limit: 2 Seconds      Memory Limit: 6 ...

  2. Spring Boot2.0之Admin-UI分布式微服务监控中心

    前面https://www.cnblogs.com/toov5/p/9823353.html  说的很不好用哈哈 还需要json格式化 我们可以用Admin-UI 比较爽歪歪 原理: 将所有服务的监控 ...

  3. python_opencv库的学习

    一.以灰度图的形式加载彩色图像. https://docs.opencv.org/3.0-beta/doc/py_tutorials/py_gui/py_image_display/py_image_ ...

  4. L84

    Hospital Noise May Disrupt Patient Improvement Many who need restorative rest the most might not be ...

  5. 【Lintcode】088.Lowest Common Ancestor

    题目: Given the root and two nodes in a Binary Tree. Find the lowest common ancestor(LCA) of the two n ...

  6. shell ss命令

    ss命令用来显示处于活动状态的套接字信息.ss命令可以用来获取socket统计信息,它可以显示和netstat类似的内容.但ss的优势在于它能够显示更多更详细的有关TCP和连接状态的信息,而且比net ...

  7. POJ1287(最小生成树入门题)

    Networking Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 7753   Accepted: 4247 Descri ...

  8. GridSplitter用法

    1.GridSplitter的ShowsPreview设置为True时拖动报null错误 解决方法在Grid外面包装一个装饰器:AdornerDecorator,至于为什么这么做,暂时还不知道 2.当 ...

  9. Windows下搭建Subversion&nbsp;服务器

    一.准备工作 1.获取 Subversion 服务器程序 到官方网站(http://subversion.tigris.org/)下载最新的服务器安装程序.目前最新的是1.5版本,具体下载地址在:ht ...

  10. QListWidget笔记

    1.头文件:#include <QListWidget> 2.继承自:QListView 3.基本代码: #include "mainwindow.h" #includ ...