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. 关于NIO编程

    NIO概述 什么是NIO? Java NIO(New IO)是一个可以替代标准Java IO API的IO API(从Java 1.4开始),Java NIO提供了与标准IO不同的IO工作方式. Ja ...

  2. adaptiveThreshold自适应二值化源码分析

    自适应二值化介绍: 二值化算法是用输入像素的值I与一个值C来比较,根据比较结果确定输出值. 自适应二值化的每一个像素的比较值C都不同,比较值C由这个像素为中心的一个块范围计算在减去差值delta得到. ...

  3. SGU 495 Kids and Prizes：期望dp / 概率dp / 推公式

    题目链接:http://acm.sgu.ru/problem.php?contest=0&problem=495 题意: 有n个礼物盒,m个人. 最开始每个礼物盒中都有一个礼物. m个人依次随 ...

  4. AIM Tech Round 4 (Div. 2)

    A题 分析:暴力 #include "iostream" #include "cstdio" #include "cstring" #inc ...

  5. T(n) = 25T(n/5)+n^2的时间复杂度

    对于T(n) = a*T(n/b)+c*n^k;T(1) = c 这样的递归关系,有这样的结论: if (a > b^k)   T(n) = O(n^(logb(a)));logb(a)b为底a ...

  6. Mysql 5.7.18忘记密码

    5.7.18密码修改发生了变化,旧版的方法不再奏效. 1. ps -ef | grep mysqld,kill掉启动的mysql服务: 2. 创建/etc/my.cnf,添加: [mysqld] sk ...

  7. Ubuntu环境下对拍

    何为对拍 假设我在考场上写了一个能过样例的算法.然后它也能过大样例但是我觉得有些担心某些细节会出错,或者是它连大样例都过不了但是大样例过大无法肉眼差错,这个时候我们就需要对拍了. 所谓对拍,就是对着拍 ...

  8. bzoj 4753 [Jsoi2016]最佳团体——0/1分数规划

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4753 0/1分数规划裸题. #include<iostream> #includ ...

  9. Zigbee协议栈--Z-Stack的使用

    使用方法简介:一般情况下用户只需要额外添加三个文件就可以完成一个项目.一个是主文件,存放具体的任务事件处理函数:一个是这个主文件的头文件:另外一个是以Osal开头的操作系统接口文件,是专门存放任务处理 ...

  10. NSCLIENT++可以采集的指标

    Documentation   Information   Commands/Modules   CheckDisk   CheckFileSize   CheckDriveSize   CheckF ...