11.14第十节课
来源:互联网 发布:java接口特点是什么 编辑:程序博客网 时间:2024/05/20 09:09
一、Text 节点
可以通过nodeValue属性或者data属性访问节点中包含的文本,这两个属性中包含的值相同。
对nodeValue 的修改也会通过data反应出来,反之亦然。
hello//获得文本节点
var text = document.getElementById(‘dd’).firstChild;
//获得nodeValue
console.log(text.nodeValue);
//设置nodeValue
text.nodeValue = ‘world’;
二、CSS操作
1、style属性
操作 CSS 样式最简单的方法,就是使用网页元素节点的 getAttribute 方法、setAttribute 方法和 removeAttribute 方法。直接读写或者删除网页元素的 style 属性。
var _p1 = document.getElementById(“_p1”);
_p1.setAttribute(“style”,”color:blue;”);
2、Style对象
每个网页元素对应一个 DOM 节点对象。这个对象的 style 属性可以直接操作,用来读写行内 CSS 样式。
_p1.style.fontSize = “50px”;
3、cssText属性
元素节点的 style 对象有个 cssText 属性,该属性可以读写或删除整个样式。
4、setProperty(),getPropertyValue(),removeProperty()
_p1.style.setProperty(“font-size”,”50px”);
需要注意的是:在使用 property 相关方法的时候,属性名使用的是和CSS样式中定义的一样的。而直接使用 style.xxxx 方式的时候,是需要将连词符号进行转化为驼峰命名方式的。
三、事件模型
事件是一种异步编程的实现方式。本质上程序各个组成部分之间的通信。DOM支持大量的事件。
1、 EventTarget接口
DOM的事件操作(监听和触发),都定义在EventTarget接口上。Element节点、document节点和window对象,都部署了这个接口。
该接口有三个重要的方法:
- addEventListener:绑定事件的监听函数
removeEventListener:移除事件的监听函数
dispatchEvent:触发事件
(1)addEventListener
该方法用于在当前节点或对象上,定义一个特定时间的监听函数
示例
// 语法:target.addEventListener(type,listenerFunc,false);
window.addEventListener(“load”, function(){
alert(“hello listener”);
});
document.getElementById(“btn2”).addEventListener(“click”,function(){
alert(“hello, button”);
});
type:事件的名称,大小写敏感
listenerFunc:监听函数,事件发生时,会调用这个函数
**(2)removeEventListener()
移除addEventListener方法添加的事件监听函数**
var btn2Click = function() {
alert(“hello, button”);
};
document.getElementById(“btn2”).addEventListener(“click”, btn2Click);
document.getElementById(“btn3”).addEventListener(“click”,function(){
document.getElementById(“btn2”).removeEventListener(“click”,btn2Click);
});
(3)dispatchEvent():一般不怎么使用
2、监听函数
监听函数是事件发生时,程序所要执行的函数。它是事件驱动编程模式的主要编程方式。
在DOM中提供三种方法为事件绑定监听函数。
(1)HTML标签的on-属性
HTML语言允许在元素标签的属性中,直接定义某些事件的监听代码。
(2)Element节点的事件属性
Element节点对象有事件属性,同样可以指定监听函数。
var btn4Func = function() { alert(“hello”); };
document.getElementById(“btn4”).onclick = btn4Func;
(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事件(节点上点击鼠标右键时触发或者按下上下文菜单键时触发)
事件冒泡和捕获
事件流包含三个阶段:事件捕获阶段,处于目标阶段和事件冒泡阶段。首先发生的是事件捕获,然后是实际的目标接收到事件,最后阶段是冒泡阶段。
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);
四、Number对象
Number对象是数值类型对应的包装对象(引用类型),可以作为构造函数使用,也可以作为工具函数使用。
- 作为构造函数,用于生成数值类型的对象
- 作为工具函数,可以把其他类型的数据转化为数值
var i = 10;
console.log(typeof i); // number
var ni = new Number(10);
console.log(typeof ni); // object
console.log(Number(true)); // 1
var inStr1 = “1 a”;
var inStr2 = “2 b”;
console.log(parseInt(inStr1) + parseInt(inStr2)); // 3
console.log(Number(inStr1) + Number(inStr2)); // NaN
console.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:负的无限。
console.log(Number.NaN); // NaN
console.log(Number.MAX_VALUE); // 1.7976931348623157e+308
console.log(Number.MIN_VALUE); // 5e-324
console.log(Number.MAX_SAFE_INTEGER); // 9007199254740991
console.log(Number.MIN_SAFE_INTEGER); // -9007199254740991
console.log(Number.POSITIVE_INFINITY); // Infinity
console.log(Number.NEGATIVE_INFINITY); // -Infinity
2、Number对象的方法
Number.toString():把数值类型转化为字符串
Number.toPrecision():将数值转化为指定位数的有效数字
var i = new Number(12.36);
console.log(i.toPrecision(2)); // 12
console.log(i.toPrecision(3)); // 12.4
console.log(i.toPrecision(4)); // 12.36
console.log(i.toPrecision(5)); // 12.360
toPrecision方法用于四舍五入时会出现问题,跟浮点数不能精确的存储有关系。
Number.toFixed():用于将一个数转化为指定位数的小数,返回这个小数对应的字符串
var i = new Number(12.36);
console.log(i.toFixed(1)); // 12.4
五、String 对象
String对象是JavaScript提供的原生数据类型的包装对象,用来生成字符串的包装对象。
String对象的方法也可以在基本的字符串值中访问到。
var s = “hello”;
var ss = new String(“hello”);
console.log(typeof ss); // object
console.log(String(true)); // true
console.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); // object
console.log(String(true)); // true
console.log(String(123)); // true
console.log(“s.length=” + s.length); // 5
console.log(s.charAt(0)); // h
console.log(s[0]); // h
console.log(s.concat(“,world!”)); // hello,world!
console.log(s); // hello
var s2 = “javascript”;
console.log(s2.slice(4,10)); // script
console.log(s2.slice(4)); // script
console.log(s2.indexOf(“a”)); // 1
console.log(s2.lastIndexOf(“a”)); // 3
console.log(s2.lastIndexOf(“y”)); // -1
var s3 = “aa.bb.cc.txt”;
console.log(s3.slice(s3.lastIndexOf(“.”)+1)); // txt
var s4 = ” aa.bb.cc.txt “;
console.log(s4.trim());
var s5 = “hello,world,world!”;
console.log(“substr():” + s5.substr(6,5)); // world
console.log(“toLowerCase():” + s5.toLowerCase()); // hello,world
console.log(“toUpperCase():” + s5.toUpperCase()); // HELLO,WORLD
console.log(“search():” + s5.search(“lll”)); // -1
console.log(“replace():” + s5.replace(“world”,”nantong”)); // hello,nantong,world
var s6 = “,aa,bb,cc,dd,”;
console.log(s6.split(“,”)); // [“”,”aa”,”bb”,”cc”,”dd”,”“]
六、Array对象
1、构造函数:参数可以定义数组的长度。
var arr = [“a”,”b”];
var arr2 = new Array(10);
console.log(arr2.length); // 10
2、Array.isArray()
判断一个值是否是一个数组,弥补了typeof运算符的不足。
console.log(typeof arr2); // object
console.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,b
console.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()); // 1
console.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,5
arr5.sort(function(a,b){
return a - b;
});
console.log(arr5); // 1,2,3,4,5,11,101
var 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
七、Date、Boolean、Math对象
1、Date对象
日期对象用于处理日期和时间。
(1)创建日期
Date 对象用于处理日期和时间。
可以通过 new 关键词来定义 Date 对象。以下代码定义了名为 myDate 的 Date 对象:
有四种方式初始化日期:
new Date() // 当前日期和时间
new Date(milliseconds) //返回从 1970 年 1 月 1 日至今的毫秒数
new Date(dateString)
new Date(year, month, day, hours, minutes, seconds, milliseconds)
上面的参数大多数都是可选的,在不指定的情况下,默认参数是0。
实例化一个日期的一些例子:
var today = new Date()
var d1 = new Date(“October 13, 1975 11:13:00”)
var d2 = new Date(79,5,24)
var d3 = new Date(79,5,24,11,33,0)
(2)设置日期
通过使用针对日期对象的方法,我们可以很容易地对日期进行操作。
在下面的例子中,我们为日期对象设置了一个特定的日期 (2010 年 1 月 14 日):
var myDate=new Date();
myDate.setFullYear(2010,0,14);
在下面的例子中,我们将日期对象设置为 5 天后的日期:
var myDate=new Date();
myDate.setDate(myDate.getDate()+5);
注意: 如果增加天数会改变月份或者年份,那么日期对象会自动完成这种转换。
2、Boolean对象
Boolean 对象用于转换一个不是 Boolean 类型的值转换为 Boolean 类型值 (true 或者false).
(1)创建 Boolean 对象
Boolean 对象代表两个值:”true” 或者 “false”
下面的代码定义了一个名为 myBoolean 的布尔对象:
var myBoolean=new Boolean();
3、Math对象
Math 对象用于执行数学任务。
Math 对象并不像 Date 和 String 那样是对象的类,因此没有构造函数 Math()。
var x = Math.PI; // 返回PI
var y = Math.sqrt(16); // 返回16的平方根
八、课后作业
1、table添加行的功能
代码:
姓名:<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="delline(this)" /> </td> </tr></table> <script type="text/javascript"> var addline=function(){ var name=document.getElementById('name').value; var email=document.getElementById('email').value; var age=document.getElementById('age').value; var html=document.getElementById('userTable'); var table="<td>"+name+"</td><td>"+email+"</td><td>"+age+"</td><td><input type='button' value='删除' onclick='delline(this)'/></td>"; var newtable=html.innerHTML+table; html.innerHTML=newtable; }
结果显示:
2、table删除行的功能
代码:
var delline=function(obj){ var trNode=obj.parentNode.parentNode; trNode.parentNode.removeChild(trNode); }
图片显示:
3、写一个方法:传入:”Welome to Beijing”输出为“Beijing to Welcome”。
代码:
function reverse(str){return str.split(' ').reverse().join(' ');}alert(reverse('welcome to beijing'));
结果显示:
- 11.14第十节课
- C#的第十节课
- 第十节 Unicode
- 第十节 蜂鸣器
- 第二章 第十节 总结
- 第三章 第十节 渲染
- 第十节 通用对话框
- php学习 第十节
- java笔记第十节
- 第十节, IO流
- 第十节初步探险
- 中央处理器-第十节多媒体CPU
- 第十节 linux进程操作
- java第十节-字符串String
- android第十节CheckBox
- 第十节 jquery插件汇总
- Java基础部分第十节
- 第十节--控件(三)ProgressBar
- CSS3 box-sizing 属性
- LeetCode 21.Merge Two Sorted Lists
- 【我的Java笔记】增强for循环 & ArrayList集合储存自定义对象并遍历的五种方法
- ubuntu 安装repo
- OpenCV自学笔记32. ubuntu 安装python3+opencv3的过程记录
- 11.14第十节课
- LeetCode 24.Swap Nodes in Pairs
- 欢迎使用CSDN-markdown编辑器
- Android Camera 系统架构源码分析(2)---->Camera的startPreview和setPreviewCallback
- eslint 规则
- 关于php命名空间的一些小细节
- 心得
- ubuntu 下面 Pycharm 遇到ReservedCodeCacheSize 等内存问题
- jquery防止按钮重复点击