DOM4

最新推荐文章于 2024-04-15 23:27:06 发布

zxfly6

最新推荐文章于 2024-04-15 23:27:06 发布

阅读量206

点赞数

分类专栏： JAVA学习笔记

本文链接：https://blog.csdn.net/zxfly6/article/details/79632663

版权

JAVA学习笔记专栏收录该内容

14 篇文章 0 订阅

订阅专栏

事件模型

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

1. EventTarget接口

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

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

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

// 语法：target.addEventListener(type,listenerFunc,false);

window.addEventListener("load", function(){
   alert("hello listener");
});

document.getElementById("btn2").addEventListener("click",function(){
   alert("hello, button");
});

type：事件的名称，大小写敏感
listenerFunc：监听函数，事件发生时，会调用这个函数

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);
});

dispatchEvent()：一般不怎么使用

2.监听函数

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

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

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

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

var btn4Func = function() {
   alert("hello");
};

document.getElementById("btn4").onclick = btn4Func;

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事件（节点上点击鼠标右键时触发或者按下上下文菜单键时触发）

事件冒泡和捕获

事件流包含三个阶段：事件捕获阶段，处于目标阶段和事件冒泡阶段。首先发生的是事件捕获，然后是实际的目标接收到事件，最后阶段是冒泡阶段。

<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);

Number对象

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

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

但是Number()函数在将其他类型转化成数值类型时，有一些奇怪的规则，所以我们时常用parseInt()代替。

Number()和parseInt()区别

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 对象

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。substring()
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]

JSON对象

JSON 格式（Javascript Object Notation），是一种用于数据交换的文本格式。
简单的说，每个 JSON 对象就是一个值。要么是简单类型的值，要么是复合类型的值。
JSON 对值的类型和格式是有严格要求的。

1.复合类型的值只能是数组或对象，不能是函数、日期对象、正则表达式等。
2.简单类型的值包括：字符串、数值、布尔值和null（不能使用NaN/undefined）。
3.字符串必须使用双引号表示，不能使用单引号，或者没有双引号。
4.对象的键必须放在双引号里。
5.数组或对象的最后一个成员后面不能加逗号。

// 不合法的JSON对象
var obj = {name:"",age:20}; // 对象键放在双引号中
{"name":"zhangsan","age":undefined} // 不能出现undefined
{"name":"zhangsan","age":function() {
   alert("");
}} // 不能出现函数

// 合法的JSON对象
{"name":"zhangsan"}
["name","age"]
[{},{}]

1.JSON对象和JSON字符串的转换。

在数据传输中，JSON是以字符串形式传递的，而JS操作的是JSON对象。

JSON.stringify方法是用于将一个值转为字符串。该字符串符合 JSON 格式要求，并且可以通过JSON.parse方法还原。
JSON.parse方法将 JSON 字符串转化为对象。

		var jsonStr = '{"name":"Lisa","password":"123"}';
		var jsonObj = {"name":"Lisa","password":"123"};
		// lg(jsonStr);
		// lg(jsonObj);
		//String转化为JSON对象
		var jsonObject = JSON.parse(jsonStr);
		// lg(jsonObject);
		//将对象转回字符串
		var jsonstr = JSON.stringify(jsonObject);
		lg(jsonStr);

2.JSON的美化输出

JSON.stringify的第三个参数，可以指定缩紧的空格数。

 		var format = JSON.stringify(jsonObject,undefined,2);
		lg(format);

zxfly6

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM4

事件模型事件是一种异步编程的实现方式。本质上程序各个组成部分之间的通信。DOM支持大量的事件。1. EventTarget接口DOM的事件操作（监听和触发），都定义在EventTarget接口上。Element节点、document节点和window对象，都部署了这个接口。该接口有三个重要的方法：addEventListener：绑定事件的监听函数removeEventListener：移除事件的...
复制链接

扫一扫

专栏目录