JavaScript 部分知识点

最新推荐文章于 2022-05-24 09:42:18 发布

m_syndra

最新推荐文章于 2022-05-24 09:42:18 发布

阅读量366

点赞数

文章标签： javascript 对象

本文链接：https://blog.csdn.net/m_syndra/article/details/78786370

版权

12.9

1.Math 对象补充：Math.max(x,y,z…) 返回指定的数中值最大的那个数

Math.min(x,y,z…) 返回指定的数中值最大的那个数

2.Date() 对象定义新的Date对象 var new=new Date();

Date中的D必须大写

方法：

getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。

getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。

getFullYear() 从 Date 对象以四位数字返回年份。

getHours() 返回 Date 对象的小时 (0 ~ 23)。

getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。

getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。

getMonth() 从 Date 对象返回月份 (0 ~ 11)。

getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。

getTime() 返回 1970 年 1 月 1 日至今的毫秒数。

getUTCDate() 根据世界时从 Date 对象返回月中的一天 (1 ~ 31)。

getUTCDay() 根据世界时从 Date 对象返回周中的一天 (0 ~ 6)。

getUTCFullYear() 根据世界时从 Date 对象返回四位数的年份。

getUTCHours() 根据世界时返回 Date 对象的小时 (0 ~ 23)。

getUTCMilliseconds() 根据世界时返回 Date 对象的毫秒(0 ~ 999)。

getUTCMinutes() 根据世界时返回 Date 对象的分钟 (0 ~ 59)。

getUTCMonth() 根据世界时从 Date 对象返回月份 (0 ~ 11)。

getUTCSeconds() 根据世界时返回 Date 对象的秒钟 (0 ~ 59)。

parse() 返回1970年1月1日午夜到指定日期（字符串）的毫秒数。

setDate() 设置 Date 对象中月的某一天 (1 ~ 31)。

setFullYear() 设置 Date 对象中的年份（四位数字）。

setHours() 设置 Date 对象中的小时 (0 ~ 23)。

setMilliseconds() 设置 Date 对象中的毫秒 (0 ~ 999)。

setMinutes() 设置 Date 对象中的分钟 (0 ~ 59)。

setMonth() 设置 Date 对象中月份 (0 ~ 11)。

setSeconds() 设置 Date 对象中的秒钟 (0 ~ 59)。

setTime() 以毫秒设置 Date 对象。

setUTCDate() 根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。

setUTCFullYear() 根据世界时设置 Date 对象中的年份（四位数字）。

setUTCHours() 根据世界时设置 Date 对象中的小时 (0 ~ 23)。

setUTCMilliseconds() 根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。

setUTCMinutes() 根据世界时设置 Date 对象中的分钟 (0 ~ 59)。

setUTCMonth() 根据世界时设置 Date 对象中的月份 (0 ~ 11)。

setUTCSeconds() 用于根据世界时 (UTC) 设置指定时间的秒字段。

toDateString() 把 Date 对象的日期部分转换为字符串。

toGMTString() 已废弃。请使用 toUTCString() 方法代替。

toISOString() 使用 ISO 标准返回字符串的日期格式。

toJSON() 以 JSON 数据格式返回日期字符串。

toLocaleDateString() 根据本地时间格式，把 Date 对象的日期部分转换为字符串。

toLocaleTimeString() 根据本地时间格式，把 Date 对象的时间部分转换为字符串。

toLocaleString() 据本地时间格式，把 Date 对象转换为字符串。

toString() 把 Date 对象转换为字符串。

toTimeString() 把 Date 对象的时间部分转换为字符串。

toUTCString() 根据世界时，把 Date 对象转换为字符串。

UTC() 根据世界时返回 1970 年 1 月 1 日到指定日期的毫秒数。

valueOf() 返回 Date 对象的原始值。

代码：

<!DOCTYPEhtml>

<html>

<headlang="en">

</head>

<body>

var x=new Date();/*语句中的Date中的D必须大写*/

console.log(x);

document.write("现在是："+ x.getFullYear()+"年"+ x.getMonth()+"月"+ x.getDate()+"日 "+"星期"+ x.getDay()+""+x.getHours()+":"+ x.getMinutes()+":"+x.getSeconds()+"<br>");/*这条语句表示可以按照自己的设计意愿进行时间获取*/

document.write(x.toLocaleDateString()+"<br>");/*只显示当地日期*/

document.write(x.toLocaleString()+"<br>");/*只显示当地日期时间*/

document.write(x.toLocaleTimeString()+"<br>");/*只显示当地时间*/

</script>

</body>

</html>

3.计时器

在javascritp中，有两个关于定时器的专用函数，分别为：

1.倒计定时器：timename=setTimeout("function();",delaytime);

2.循环定时器：timename=setInterval("function();",delaytime);

第一个参数“function()”是定时器触发时要执行的动作，可以是一个函数，也可以是几个函数，函数间用“；”隔开即可。比如要弹出两个警告窗口，便可将“function();”换成“alert('第一个警告窗口!');alert('第二个警告窗口!');”；而第二个参数“delaytime”则是间隔的时间，以毫秒为单位，即填写“5000”，就表示5秒钟。　

倒计时定时器是在指定时间到达后触发事件，而循环定时器就是在间隔时间到来时反复触发事件，两者的区别在于：前者只是作用一次，而后者则不停地作用。

代码：

<!DOCTYPEhtml>

<html>

<headlang="en">

</head>

<body>

<pclass="time"></p>

<buttonclass="start">开始</button>

<buttonclass="stop">停止</button>

function show() {

var t = newDate().toLocaleString();/*toLocaleString()表示显示当地的时间日期等不显示时区*/

document.getElementsByClassName("time")[0].innerText= t;

}

show();

timer=window.setInterval("show()",1000);

varstart=document.getElementsByClassName("start")[0];

start.οnclick= function () {

timer=window.setInterval("show()",1000);/*setInterval表示计时器功能，1000表示1000毫秒，1000毫秒=1秒*/

};

varstop=document.getElementsByClassName("stop")[0];

stop.οnclick=function(){

clearInterval(timer);/*清除计时器功能*/

}

</script>

</body>

</html>

<!DOCTYPEhtml>

<html>

<headlang="en">

</head>

<body>

<pclass="time"></p>

<buttonclass="stop">停止</button>

function show(){

var t=new Date().toLocaleString();

document.getElementsByClassName("time")[0].innerHTML=t;

}

timer=setTimeout("show()",1000);/*setTimeout表示暂停指定的毫秒后再进行*/

show();

document.getElementsByClassName("stop").οnclick=function(){

clearTimeout("timer");

}

</script>

</body>

</html>

4.string对象定义新的string对象 var new=new string();

string对象属性

constructor 对创建该对象的函数的引用

length 字符串的长度

prototype 允许向对象添加属性和方法();

string对象方法

charAt() 返回在指定位置的字符。

charCodeAt() 返回在指定的位置的字符的 Unicode 编码。

concat() 连接两个或更多字符串，并返回新的字符串。

fromCharCode() 将 Unicode 编码转为字符。

indexOf() 返回某个指定的字符串值在字符串中首次出现的位置。

lastIndexOf() 从后向前搜索字符串。

match() 查找找到一个或多个正则表达式的匹配。

replace() 在字符串中查找匹配的子串，并替换与正则表达式匹配的子串。

search() 查找与正则表达式相匹配的值。

slice() 提取字符串的片断，并在新的字符串中返回被提取的部分。

split() 把字符串分割为字符串数组。

substr() 从起始索引号提取字符串中指定数目的字符。

substring() 提取字符串中两个指定的索引号之间的字符。

toLowerCase() 把字符串转换为小写。

toUpperCase() 把字符串转换为大写。

trim() 去除字符串两边的空白

valueOf() 返回某个字符串对象的原始值。

代码：

<!DOCTYPEhtml>

<html>

<headlang="en">

<title>string对象</title>

</head>

<body>

var x="hello world!";

var y="welcome to ";

var z="XIAN";

document.write(x.length+"<br>")/*包含空格*/;

console.log(constructor);/*以函数形式输出*/

document.write(x.charAt(1)+"<br>");/*返回指定位置的字符*/

document.write(x.concat(y,z)+"<br>");/*连接两个或多个字符串*/

document.write(x.indexOf("o")+"<br>");/*返回某个指定的字符在在字符串中首次出现的位置（从0开始），如果没有找到则返回-1*/

document.write(x.lastIndexOf("o")+"<br>")/*从后面往前查找，索引值是从前往后排的*/;

document.write(x.slice(2,4)+"<br>");/*slice（）提取字符串某个位置，并以新的字符串返回；2表示提取的起始位，4表示提取的结束位（包头不包尾）*/

document.write(x.substr(2,4)+"<br>");/*substr（start,length）提取字符串；start表示起始的索引位置，length表示要提取的字符串的长度*/

document.write(x.substring(2,4)+"<br>");/*substring（）提取字符串；2表示起始的索引位置，4表示结束的索引位置（包头不包尾）*/

document.write(x.split("")+"<br>");/*split（separate，limit）把字符串分割成字符串数组，separate是通过什么来进行分割，默认之间用，隔开，limit是设置分割的成的数组个数，不写就是全部分割*/

document.write(x.charCodeAt(1)+"<br>");/*返回指定位置的ASCII码值*/

document.write(String.fromCharCode(65)+"<br>");/*将ASCII码（也是Unicode编码）转换成字符串*/

</script>

</body>

</html>

5.array（数组）对象定义新的array对象 var arr=new array();

var arr=new array(5);

表示定义了5个数组，但其实空的，只是占位置

Array 对象方法

concat() 连接两个或更多的数组，并返回结果。

every() 检测数组元素的每个元素是否都符合条件。

filter() 检测数组元素，并返回符合条件所有元素的数组。

indexOf() 搜索数组中的元素，并返回它所在的位置。

join() 把数组的所有元素放入一个字符串。

lastIndexOf() 返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。

map() 通过指定函数处理数组的每个元素，并返回处理后的数组。

pop() 删除数组的最后一个元素并返回删除的元素。

push() 向数组的末尾添加一个或更多元素，并返回新的长度。

reverse() 反转数组的元素顺序。

shift() 删除并返回数组的第一个元素。

slice() 选取数组的一部分，并返回一个新数组。

some() 检测数组元素中是否有元素符合指定条件。

sort() 对数组的元素进行排序。

splice() 从数组中添加或删除元素。

toString() 把数组转换为字符串，并返回结果。

unshift() 向数组的开头添加一个或更多元素，并返回新的长度。

valueOf() 返回数组对象的原始值。

代码：

<!DOCTYPE html>

<html>

<metacharset="UTF-8">

<title>数组对象方法</title>

</head>

<body>

varar=["123","345","456","678"];

vararr=["hello","world"];

document.write(ar.concat(arr)+"<br>");/*concat()表示连接两个或多个数组*/

document.write(ar.pop()+"<br>");/*pop()表示删除数组的最后一个元素并返回这个元素*/

document.write(ar.shift()+"<br>");/*shift()表示删除数组的第一个元素并返回这个元素*/

document.write(ar.push("890")+"<br>");/*push()表示向数组末尾添加一个或多个元素并返回数组的长度*/

ar.push("890");document.write(ar+"<br>");

document.write(ar.unshift("890")+"<br>");/*unshift()表示向数组开头添加一个或多个元素并返回数组的长度*/

ar.unshift("890");document.write(ar+"<br>");

document.write(ar.splice(2,2,"123","3243")+"<br>");/*splice()表示向数组里插入或删除、替换元素并返回这个元素（第一个2表示从第二位开始，第二个2表示删除的个数，如果第二个数为0则表示添加）*/

ar.splice(2,2,"123","3243");document.write(ar+"<br>");

</script>

</body>

</html>

12.10

1. getAttribute()方法通过元素节点的属性名称获取属性的值。

语法：

elementNode.getAttribute(name)

说明:

1.elementNode：使用getElementById()、getElementsByTagName()等方法，获取到的元素节点。

2. name：要想查询的元素节点的属性名字

2. setAttribute() 方法增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值。

语法：

elementNode.setAttribute(name,value)

说明：

1.name:要设置的属性名。

2.value:要设置的属性值。

注意：

1.把指定的属性设置为指定的值。如果不存在具有指定名称的属性，该方法将创建一个新属性。

2.类似于getAttribute()方法，setAttribute()方法只能通过元素节点对象调用的函数。

代码：

<!DOCTYPE html>

<html>

<metacharset="UTF-8">

<title>获取属性值、设置属性值</title>

</head>

<body>

<p align="center">Lorem ipsum dolor sit amet,consectetur adipisicing elit. A eos error eum illum officiis provident quosreiciendis rem. Adipisci cumque natus nihil porro possimus quibusdam,reiciendis! Cum ipsam officiis porro!</p>

var btn=document.getElementsByClassName("btn")[0];

btn.οnclick=function(){

document.getElementsByTagName("a")[0].getAttribute("href");/*getAttribute()获取属性值*/

};

varbtn1=document.getElementsByClassName("btn1")[0];

btn1.οnclick=function(){

document.getElementsByTagName("a")[0].setAttribute("href","http://www.baidu.com");/*setAttribute()设置属性值*/

}

</script>

</body>

</html>

3. 节点属性

在文档对象模型 (DOM) 中，每个节点都是一个对象。DOM节点有三个重要的属性：

1.nodeName : 节点的名称

2.nodeValue ：节点的值

3.nodeType ：节点的类型

一、nodeName 属性: 节点的名称，是只读的。

1. 元素节点的nodeName 与标签名相同

2. 属性节点的nodeName 是属性的名称

3. 文本节点的nodeName 永远是 #text

4. 文档节点的nodeName 永远是 #document

二、nodeValue 属性：节点的值

1. 元素节点的nodeValue 是 undefined 或 null

2. 文本节点的nodeValue 是文本自身

3. 属性节点的nodeValue 是属性的值

4. 访问子结点childNodes

访问选定元素节点下的所有子节点的列表，返回的值可以看作是一个数组，他具有length属性。

语法：

elementNode.childNodes

注意：

如果选定的节点没有子节点，则该属性返回不包含节点的 NodeList。

5访问子结点的第一和最后项

一、firstChild 属性返回‘childNodes’数组的第一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。

语法：

node.firstChild

说明：与elementNode.childNodes[0]是同样的效果。

二、 lastChild 属性返回‘childNodes’数组的最后一个子节点。如果选定的节点没有子节点，则该属性返回 NULL。

语法：

node.lastChild

说明：与elementNode.childNodes[elementNode.childNodes.length-1]是同样的效果。

代码：

<!DOCTYPE html>

<html>

<metacharset="UTF-8">

<title>访问子节点</title>

</head>

<body>

<p>

<span>hello1</span>

<span>hello2</span>

<span>hello3</span>

<span>hello4</span>

</p>

varnewp=document.getElementsByTagName("p")[0];

alert(newp.childNodes.length);/*访问子节点：childNodes （包含空节点）这条语句表示弹出子节点的数量（即长度）*/

alert(newp.children.length);/*访问子节点：children （不包含空节点）*/

alert(newp.childNodes[1].innerText);/*弹出索引值为1的子节点的值*/

alert(newp.firstChild.innerText);/*弹出第一个子节点的值*/

alert(newp.lastChild.innerText);/*弹出最后一个子节点的值*/

alert(newp.firstElementChild.innerText);/*弹出第一个子节点的值*/

alert.(newp.lastElementChild.innerText);/*弹出最后一个子节点的值*/

</script>

<!--访问子节点 1.childNodes（包含空节点）

2.children（不包含空节点）

访问子节点的第一个和最后一个 1.firstChild/lastChild（包含空节点）

2.firstElementChild/lastElementChild（不包含第一个空节点和最后一个空节点）-->

</body>

</html>

6. 访问父节点parentNode

获取指定节点的父节点

语法：

elementNode.parentNode

注意:父节点只能有一个。

访问有定位的父节点 .offsetParent

第一个有定位属性的父节点，如果没有则返回body

7. 访问兄弟节点

1.nextSibling 属性可返回某个节点之后紧跟的节点（处于同一树层级中）。

语法：

nodeObject.nextSibling

说明：如果无此节点，则该属性返回 null。

2.previousSibling 属性可返回某个节点之前紧跟的节点（处于同一树层级中）。

语法：

nodeObject.previousSibling

说明：如果无此节点，则该属性返回 null。

注意: 两个属性获取的是节点。InternetExplorer 会忽略节点间生成的空白文本节点（例如，换行符号），而其它浏览器不会忽略。

解决问题方法:

判断节点nodeType是否为1, 如是为元素节点，跳过。

代码：

<!DOCTYPE html>

<html>

<metacharset="UTF-8">

<title>访问父节点、兄弟节点</title>

</head>

<body>

<div>

<p>

<span>hello1</span>

<spanclass="1">hello2</span>

<span>hello3</span>

<span>hello4</span>

</p>

</div>

varnewp=document.getElementsByTagName("p")[0];

varnewspan=document.getElementsByClassName("1")[0];

alert(newp.parentNode.nodeName);/*parentNode 访问父节点*/

alert(newp.parentNode.parentNode.nodeName)/*.parentNode.parentNode 访问父节点的父节点*/;

alert(newp.offsetParent.nodeName);/*访问有定位的父节点，offsetParent表示访问第一个有定位（即position）的父节点，如果没有定位则返回body*/

alert(newspan.previousSibling.innerText);/*访问前一个兄弟节点*/

alert(newspan.nextSibling.innerText);/*访问后一个兄弟节点*/

alert(newspan.previousElementSibling.innerText);/*访问前一个兄弟节点*/

alert(newspan.nextElementSibling.innerText);/*访问后一个兄弟节点*/

</script>

<!--访问父节点：parentNode （注：Node没有s）

访问前一个和后一个兄弟节点：1.previousSibling/nextSibling （包含空节点）

2.previousElementSibling/nextElementSibling（不包含空节点）-->

</body>

</html>

8. 插入节点appendChild()

在指定节点的最后一个子节点列表之后添加一个新的子节点。

语法:

appendChild(newnode)

参数:

newnode：指定追加的节点。

插入节点insertBefore()

insertBefore()方法可在已有的子节点前插入一个新的子节点。

语法:

insertBefore(newnode,node);

参数:

newnode:要插入的新节点。

node: 指定此节点前插入节点。

9. 创建元素节点createElement

createElement()方法可创建元素节点。此方法可返回一个 Element 对象。

语法：

document.createElement(tagName)

参数:

tagName：字符串值，这个字符串用来指明创建元素的类型。

注意：要与appendChild() 或insertBefore()方法联合使用，将元素显示在页面中。

创建文本节点createTextNode

createTextNode()方法创建新的文本节点，返回新创建的 Text 节点。

语法：

document.createTextNode(data)

参数：

data : 字符串值，可规定此节点的文本。

代码：

<!DOCTYPE html>

<html>

<metacharset="UTF-8">

<title>创建与添加元素</title>

</head>

<body>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.Accusamus consequuntur cumque eveniet fuga illo ipsum quaerat quibusdam remsit. Aspernatur corporis cumque laboriosam minus molestias praesentium quamquod saepe velit!</p>

varh2=document.getElementsByTagName("h2")[0];

varbtn=document.getElementsByClassName("btn")[0];

btn.οnclick=function(){

varnewa=document.createElement("a");/*createElement()表示创建一个元素节点*/

newa.href="http://www.baidu.com";/*添加属性值*/

newa.innerText="百度";

h2.appendChild(newa);/*appendChild()表示添加子节点*/

}

</script>

</body>

</html>

<!DOCTYPE html>

<html>

<metacharset="UTF-8">

<title>创建与添加元素</title>

</head>

<body>

varbtn=document.getElementsByClassName("btn")[0];

varbtn1=document.getElementsByTagName("button")[0];

btn.οnclick=function(){

varnewa=document.createElement("a");/*createElement()表示创建一个新元素*/

newa.href="http://www.baidu.com";

newa.innerText="百度";

document.getElementsByTagName("h2")[0].insertBefore(newa,btn1);/*insertBefore()在其前面添加*/

}

</script>

</body>

</html>

10. 删除节点removeChild()

removeChild()方法从子节点列表中删除某个节点。如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。

语法:

nodeObject.removeChild(node)

参数:

node ：必需，指定需要删除的节点。

代码：

<!DOCTYPE html>

<html>

<metacharset="UTF-8">

</head>

<body>

<ul>

</ul>

varbtn=document.getElementsByTagName("button")[0];

btn.οnclick=function(){

varul=document.getElementsByTagName("ul")[0];

ul.removeChild(ul.firstElementChild);/*removeChild()表示删除节点*/

}

</script>

</body>

</html>

11. 替换元素节点replaceChild()

replaceChild实现子节点(对象)的替换。返回被替换对象的引用。

语法：

node.replaceChild(newnode,oldnew )

参数：

newnode: 必需，用于替换 oldnew 的对象。

oldnew: 必需，被 newnode 替换的对象。

代码：

<!DOCTYPE html>

<html>

<metacharset="UTF-8">

<title>替换元素节点</title>

</head>

<body>

<div>hello world</div>

varbtn=document.getElementsByTagName("button")[0];

vardiv=document.getElementsByTagName("div")[0];

btn.οnclick=function(){

varnewp=document.createElement("p");

newp.innerHTML="我是替换的p标签";

div.parentNode.replaceChild(newp,div);/*replaceChild(newp,div)，替换元素，newp表示要替换成的元素，div表示要被替换的元素*/

};/*div.parentNode.replaceChild(newp,div);表示在它的父元素下进行元素的替换*/

</script>

</body>

</html>

12.触发事件（补充）

onkeyup 某个键盘按键被松开时触发事件

onkeydown 某个键盘按键被按下时触发事件

13.事件冒泡、事件捕获

<!DOCTYPE html>

<html>

<metacharset="UTF-8">

<style>

div{

width: 300px;

height: 200px;

border: solid 1px#ccc;

}

div p{

width: 100px;

height: 60px;

background:#f2d7ab;

text-align:center;

padding-top: 40px;

}

</style>

</head>

<body>

<div>

</div>

document.getElementsByTagName("p")[0].οnclick=function(e){

alert("我是p标签");

e.stopPropagation();/*阻止事件冒泡*/

};

document.getElementsByTagName("div")[0].οnclick=function(){

alert("我是div");

};

document.getElementsByTagName("body")[0].οnclick=function(){

alert("我是body")

};

document.getElementsByTagName("a")[0].οnclick=function(e){

alert("我是百度");

e.preventDefault();/*阻止标签自身的默认事件*/

/*阻止a中的默认事件<ahref="javascript:void(0)"></a>*/

}

</script>

</body>

</html>

<!DOCTYPE html>

<html>

<style>

div{

width: 300px;

height: 200px;

border: solid 1px#ccc;

}

div p{

width: 100px;

height: 60px;

background:#f2d7ab;

text-align:center;

padding-top: 40px;

}

</style>

</head>

<body>

<div>

</div>

<div>

</div>

document.getElementsByTagName("p")[0].addEventListener("click",function(){

alert("我是p标签")

},true);/*true表示捕获事件，捕获事件是从外向里*/

document.getElementsByTagName("div")[0].addEventListener("click",function(){

alert("我是div标签")

},true);

document.getElementsByTagName("p")[1].addEventListener("click",function(){

alert("我是p标签")

},false);/*false表示冒泡事件，冒泡事件是从里向外*/

document.getElementsByTagName("div")[1].addEventListener("click",function(){

alert("我是div标签")

},false);

</script>

</body><!--触发事件的3种方法

1、直接在标签内写触发事件

2、在函数前面加触发事件

3、利用addEventListener写触发事件-->

</html>

m_syndra

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫