11.14课堂笔记以及作业

来源：互联网发布：淘宝店铺首页全屏代码编辑：程序博客网时间：2024/06/05 23:07

11.14课堂笔记、作业以及学习心得

11.14课堂笔记

1 、DOM模型

1、Text节点和CSS操作

（1）Text节点
可以通过nodeValue属性或者data属性访问节点中包含的文本，这两个属性中包含的值相同。
对nodeValue 的修改也会通过data反应出来，反之亦然。

<div id="dd">hello</div>//获得文本节点var text = document.getElementById('dd').firstChild;//获得nodeValueconsole.log(text.nodeValue);//设置nodeValuetext.nodeValue = 'world';

（2）CSS操作
1、style属性
操作 CSS 样式最简单的方法，就是使用网页元素节点的 getAttribute 方法、setAttribute 方法和 removeAttribute 方法。直接读写或者删除网页元素的 style 属性。

var dd = document.getElementById("dd");dd.setAttribute("style","color:blue;");

2、style对象
每个网页元素对应一个 DOM 节点对象。这个对象的 style 属性可以直接操作，用来读写行内 CSS 样式。

dd.style.fontSize = "50px";

3、cssText属性
元素节点的 style 对象有个 cssText 属性，该属性可以读写或删除整个样式。

4、setProperty()，getPropertyValue()，removeProperty()

dd.style.setProperty("font-size","50px");dd.style.getPropertyValue("font-size");

需要注意的是：在使用 property 相关方法的时候，属性名使用的是和CSS样式中定义的一样的。而直接使用 style.xxxx 方式的时候，是需要将连词符号进行转化为驼峰命名方式的。

2、事件模型

事件是一种异步编程的实现方式。本质上程序各个组成部分之间的通信。DOM支持大量的事件。

1、EventTarget接口

DOM的事件操作（监听和触发），都定义在EventTarget接口上。Element节点、document节点和window对象，都部署了这个接口。
该接口有三个重要的方法：

addEventListener：绑定事件的监听函数
removeEventListener：移除事件的监听函数
dispatchEvent：触发事件

（1）addEventListener

该方法用于在当前节点或对象上，定义一个特定时间的监听函数。
语法：

target.addEventListener(type,listenerFunc,false);//type：事件的名称，大小写敏感（比如：load、click等）//listenerFunc：监听函数，事件发生时，会调用这个函数//false：是什么阶段调用。false表示在冒泡阶段，true表示在捕获阶段发生（可不写，默认在冒泡阶段）

（2）removeEventListener()
移除addEventListener方法添加的事件监听函数。

var abc = function() {   alert("hello, button");};document.getElementById("dd").addEventListener("click", abc);document.getElementById("cc").addEventListener("click",function(){  document.getElementById("dd").removeEventListener("click",abc);});

2、监听函数
监听函数是事件发生时，程序所要执行的函数。它是事件驱动编程模式的主要编程方式。
在DOM中提供三种方法为事件绑定监听函数。

（1）HTML标签的on-属性
HTML语言允许在元素标签的属性中，直接定义某些事件的监听代码。

<body onload="alert('hello');alert('world');"></body>

（2）Element节点的事件属性
Element节点对象有事件属性，同样可以指定监听函数。

var abc = function() {   alert("hello");};document.getElementById("dd").onclick = abc;

（3）addEventListener方法

3、事件的种类
鼠标事件是指与鼠标操作相关的事件
click事件、dblclick事件
mouseup事件（释放按下鼠标时触发）、mousedown事件（按下鼠标键时触发）、mousemove事件（鼠标在某个节点内部移动时触发）
mouseover事件、mouseenter事件都是鼠标进入一个节点时触发，区别是mouseenter只执行一次，而mouseover会在子节点上触发多次。

document.getElementById("ul1").addEventListener("mouseenter", function(event){   event.target.style.color = "red";});

mouseout事件、mouseleave事件都是鼠标离开节点时触发，mouseout事件会冒泡，mouseleave事件不会。
contextmenu事件（节点上点击鼠标右键时触发或者按下上下文菜单键时触发）

2、事件冒泡和捕获
事件流包含三个阶段：事件捕获阶段，处于目标阶段和事件冒泡阶段。首先发生的是事件捕获，然后是实际的目标接收到事件，最后阶段是冒泡阶段。
这里写图片描述

<div id="myDiv"></div>var div=document.getElementById("myDiv");      console.log(div);      div.onclick=function(event){       alert("div");    };document.body.addEventListener("click",function(event){    alert("event bubble");},false);       document.body.addEventListener("click",function(event){      alert("event catch");},true);

2、标准库

2.1 Number对象

Number对象是数值类型对应的包装对象(引用类型)，可以作为构造函数使用，也可以作为工具函数使用。

作为构造函数，用于生成数值类型的对象
作为工具函数，可以把其他类型的数据转化为数值

var i = 10;console.log(typeof i); // numbervar ni = new Number(10);console.log(typeof ni); // objectconsole.log(Number(true)); // 1var inStr1 = "1 a";var inStr2 = "2 b";console.log(parseInt(inStr1) + parseInt(inStr2)); // 3console.log(Number(inStr1) + Number(inStr2)); // NaNconsole.log(Number("12"));

**1、Number对象的属性
**
Number.NaN：表示非数值。
Number.MAX_VALUE：表示最大的正数。
Number.MIN_VALUE：表示最小的正数。
Number.MAX_SAFE_INTEGER：表示能够精确表示的最大整数。
Number.MIN_SAFE_INTEGER ：表示能够精确表示的最小整数。
Number.POSITIVE_INFINITY：正的无限。
Number.MEGATIVE_INFINITY：负的无限。

2、Number对象的方法
Number.toString()：把数值类型转化为字符串。
Number.toPrecision()：将数值转化为指定位数的有效数字。

var i = new Number(12.36);console.log(i.toPrecision(2)); // 12console.log(i.toPrecision(3)); // 12.4console.log(i.toPrecision(4)); // 12.36console.log(i.toPrecision(5)); // 12.360

toPrecision方法用于四舍五入时会出现问题，跟浮点数不能精确的存储有关系。

Number.toFixed()：用于将一个数转化为指定位数的小数，返回这个小数对应的字符串

var i = new Number(12.36);console.log(i.toFixed(1)); // 12.4

2.2 String对象

String对象是JavaScript提供的原生数据类型的包装对象，用来生成字符串的包装对象。

String对象的方法也可以在基本的字符串值中访问到。

var s = "hello";var ss = new String("hello");console.log(typeof ss); // objectconsole.log(String(true)); // trueconsole.log(String(123)); // 123

1、String对象的属性和方法
length属性：返回字符串的长度
charAt()方法：返回指定位置的字符，参数从0开始编号
concat()方法：用于连接两个字符串，返回一个新的字符串，不改变原字符串
slice()方法：用于从原字符串中取出子字符串，并返回，不改变原字符串
substring()方法：用于从原字符串取出子字符串，并返回，不改变原字符串。与slice作用相同，但有些奇怪的规则，不建议使用 substring，优先使用 slice。
indexOf()和lastIndexOf()：确定一个字符串在另一个字符串中的位置，返回一个整数，表示匹配开始的位置。如果返回-1表示没有匹配到。indexOf是从头部开始匹配，lastIndexOf是从尾部开始匹配。
trim()：去除字符串两端的空格，返回一个新的字符串，不改变原字符串
substr()：方法用于从原字符串中取出子字符串并返回，不改变原字符串，接受两个参数，第一个参数是子字符串开始位置，第二个参数是子字符串的长度。
toLowerCase()、toUpperCase()：将字符串全部改为小写或者大写，返回一个新的字符串，不改变原来字符串。
search()：返回匹配的第一位置，没有找到返回-1
replace()：该方法用于替换匹配的字符串，一般情况下只匹配第一个匹配到的元素
split()：按照给定字符分割字符串，并返回一个由分割字符串分割出来的子字符串数组。
match()：对字符串进行正则匹配，返回匹配结果。

var s = "hello";var ss = new String("hello");console.log(typeof ss); // objectconsole.log(String(true)); // trueconsole.log(String(123)); // trueconsole.log("s.length=" + s.length); // 5console.log(s.charAt(0)); // hconsole.log(s[0]); // hconsole.log(s.concat(",world!")); // hello,world!console.log(s); // hellovar s2 = "javascript";console.log(s2.slice(4,10)); // scriptconsole.log(s2.slice(4)); // scriptconsole.log(s2.indexOf("a")); // 1console.log(s2.lastIndexOf("a")); // 3console.log(s2.lastIndexOf("y")); // -1var s3 = "aa.bb.cc.txt";console.log(s3.slice(s3.lastIndexOf(".")+1)); // txtvar s4 = "   aa.bb.cc.txt   ";console.log(s4.trim());var s5 = "hello,world,world!";console.log("substr():" + s5.substr(6,5)); // worldconsole.log("toLowerCase():" + s5.toLowerCase()); // hello,worldconsole.log("toUpperCase():" + s5.toUpperCase()); //   HELLO,WORLDconsole.log("search():" + s5.search("lll")); // -1console.log("replace():" + s5.replace("world","nantong")); // hello,nantong,worldvar s6 = ",aa,bb,cc,dd,";console.log(s6.split(",")); // ["","aa","bb","cc","dd",""]

2.3 Array对象

1.构造函数：参数可以定义数组的长度。

var arr = ["a","b"];var arr2 = new Array(10);console.log(arr2.length); // 10

2.Array.isArray()
判断一个值是否是一个数组，弥补了typeof运算符的不足。

console.log(typeof arr2); // objectconsole.log(Array.isArray(arr2)); // true

3.Array实例的方法
push()：用于在数组的末端添加一个元素，并返回添加元素后的数组长度。该方法会改变原来的数组。

var arr = ["a","b"];arr.push("c");console.log(arr); // ['a','b','c']

pop()：删除数组的最后一个元素，并返回该元素。该方法也会改变原来的数组

arr.pop();console.log(arr);//['a','b']

join()：以参数作为分隔符，将所有数组元素组成一个字符串进行返回，如果不提供参数，默认以逗号分隔。

console.log(arr.join()); // a,bconsole.log(arr.join("|")); // a|b

concat()：多个数组的合并。将新数组的成员添加到原数组的尾部，然后返回一个新数组。原数组不变。
如果希望把一个数组进行“浅”复制，可以使用该方法。

console.log(arr.concat(['c','d','e'])); // ['a','b','c','d','e']console.log(arr); // ['a','b']

shift()：删除数组的第一个元素，并返回该元素。该方法会改变原来的数组。

var arr4 = [1,2,3,4,5];console.log(arr4.shift()); // 1console.log(arr4); // [2,3,4,5]

unshift()：用于在数组的第一个位置添加元素，并返回新数组的数组长度。该方法会改变原来的数组。

arr4.unshift(1);console.log(arr4) // [1,2,3,4,5]

reverse()：颠倒数组中元素的顺序，返回改变后的数组，会改变原来的数组。

arr4.reverse();console.log(arr4) // [5,4,3,2,1]

slice()：提取原数组的一部分，返回一个新的数组，原数组不变。
第一个参数是起始位置，第二个参数是终止位置，如果第二个参数不填写，则一直返回到原数组的最后一个成员。

console.log(arr4.slice(2,4)); // [3,2]console.log(arr4.slice(4)); // [1]console.log(arr4);// [5,4,3,2,1]

splice()：删除原数组的一部分成员，并可以在删除的位置添加新的成员，返回值是被删除的元素，该方法会改变原数组。
第一个参数是删除的起始位置，第二个参数是被删除的元素个数。如果后面还有参数，表示这些就是要被插入数组的新元素。

arr4.splice(2,1,'a','b');console.log(arr4); // [5,4,'a','b',2,1]

sort()：对数组进行排序，默认是按照字典顺序进行排序。排序后原数组将改变。
可以接收一个比较函数作为参数，
如果第一个参数应该位于第二个参数之前，返回负数。
两个参数相等，返回0.
第一个参数应该位于第二个之后，返回正数。

var arr5 = [5,3,4,1,2,101,11];arr5.sort();console.log(arr5); // 1,101,11,2,3,4,5arr5.sort(function(a,b){   return a - b;});console.log(arr5); // 1,2,3,4,5,11,101var arr6 = [   {      name:"Tom",      age:22   },{        name:"Jack",        age:18   },{        name:"Helen",        age:29   }];arr6.sort(function(obj1,obj2){   return obj1.age - obj2.age;});console.log(arr6); // Jack/Tom/Helen

filter()：方法的参数是一个函数，所有成员依次执行该函数，返回结果为true的成员组成一个新的数组返回，该方法不会改变原来的数组。

var arr7 = [3,4,5,6,7,8,9];var arr8 = arr7.filter(function(ele){   return ele % 2 == 0 ? true : false;});console.log(arr8); // 4,6,8

11.14作业

1、完成table.html中删除行、添加行的功能。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title></head><body>姓名：<input type="text" id="name" />联系方式：<input type="text" id="email" />年龄：<input type="text" id="age" /><input type="button" value="添加用户" onclick="addLine()"/><br /><br /><hr /><br /><table id="userTable" align="center" border=1 cellspacing=0 cellpadding=5 width="50%">    <tr>        <th>姓名</th>        <th>联系方式</th>        <th>年龄</th>        <th>操作</th>    </tr>    <tr>        <td>习近平</td>        <td>fda@fd.com</td>        <td>15</td>        <td>            <input type="button" value="删除" onclick="removeLine(this)" />        </td>    </tr></table>    <script type="text/javascript">        function addLine(){            var name=document.getElementById("name").value;            var email=document.getElementById("email").value;            var age=document.getElementById("age").value;            var tableLine=document.getElementById("userTable");            //console.log(ta);            //console.log(ta.innerHTML);            var newLine="<tr><td>"+name+"</td><td>"+email+"</td><td>"+age+"</td><td><input type='button' value='删除' onclick='removeLine(this)' /></td></tr></table>";            var abc=tableLine.innerHTML+newLine;            tableLine.innerHTML=abc;        }        function removeLine(obj){            var reLine=obj.parentNode.parentNode;            //console.log(reLine);            //reLine.innerHTML="";            //也可以进行删除操作            reLine.parentNode.removeChild(reLine);        }    </script>   </body></html>

2、写一个方法：传入:”Welome to Beijing”输出为“Beijing to Welcome”。

    <div>        原始数据：<input type="text" id="oldName" value=""/><br>        更新数据：<input type="text" id="newName" value=""/><br>        <input type="button" value="更新" onclick="correct()" />    </div>    <script type="text/javascript">        function correct(){            var name=document.getElementById("oldName").value;            var arr=name.split(" ");            //console.log(arr);            var newArr=arr.reverse();            var newString=newArr.join(" ");            //console.log(newString);            document.getElementById("newName").value=newString;        }    </script>

11.14学习心得

通过今天的学习，我认识到了很多关于DOM模型中的Text节点和CSS操作的内容，以及事件模型，通过设置style属性或者对象来改变元素的属性，完成对网页的优化。同时，也补充了很多关于标准库的内容，学习了Number对象，String对象，Array对象，及其对应的属性和方法。

阅读全文

0 0