JavaScript核心概念与应用
本文深入解析JavaScript的基础语法，包括变量、数据类型、数组、对象、函数等关键概念，同时介绍DOM与BOM操作，事件处理及常见算法，是前端开发者必备的指南。
JavaScript是一种轻量级的语言，是一种动态类型、弱类型、基于原型的语言。
JavaScript实现的功能
写入HTML并输出
document.write("<p>我是一个P段落</p>");
对事件作出反应
<button type="button" onclick="alert('Hello')">点我</button>
改变HTML的内容
a = document.getElementById("js"); //查找id为js的元素 a.innerHTML="Hello JavaScript"; //改变内容
改变HTML图像
<body>
<input id="js" type="text">
<script>
function myFunction()
{
var a = document.getElementById("js").value;
if(a == "" || isNaN(a))
{
alert("输入有误，请输入一个数字"); //空和不是数字，弹出警告
}
}
</script>
<button onclick="myFunction()">点击这里</button>
</body>
改变HTML样式
a = document.getElementById("js") //找到元素 a.style.color="#ff0000"; //改变样式颜色为红色
JavaScript中的变量
- 变量声明
var num = 1； var声明的变量为局部变量，只在当前作用域内有效
num = 1； 不用var声明的是全局变量，整个js文件中都有效
var a = 1,b,c = 3； b声明了但是未赋值所以结果是undefined
- 变量名的命名要求
只能是数字，字母，下划线
不能以数字开头
变量名区分大小写，大小写为不同的变量，纯大写字母一般默认为常量
- 变量名的命名规范
驼峰：首字母小写，后面的每个首字母大写 myNameIs
下斜杠：所有字母小写，中间用下横杠“_”隔开 _my_name_is
JavaScript中的数据类型
- JavaScript字符串类型：String
字符串是存储字符的变量，例如：var a = “Hello World”；
引号里可以写字符串的任意文本，可以使用双引号也可使用单引号
- JavaScript数字类型：Number
数字类型可以带小数点，也可以不带
var a1 = 10；
var a2 = 10.00
极大极小的数字可以使用科学计数法来书写
var x = 123e5 // 12300000
var y = 123-e5 // 0.00123
- JavaScript布尔类型：Boolean
布尔类型只能有两个值。true或false
var a = true；
var b = false；
- JavaScript数组：Array
创建名为names的数组：
var names = new Array( );
names[0] = "Tom";
names[1] = "Jack";
names[2] = "Jerry";
也可以写成：
var names = new Array("Tom","Jack","Jerry");
还可以写成：
var names = ["Tom","Jack","Jerry"];
- JavaScript对象：Object
对象由花括号分隔，对象的属性以名值对的形式定义属性有逗号分隔
var person = {firstname:"Tom",lastname:"Jack",age:18}；
此对象(person)有三个属性：firstname，lastname，age
空格和跨行不影响结果：
var person = { firstname:"Tom", lastname:"Jack", age:18 };
对象属性有两种寻址方式
name = person.lastname; // Jack name = person.[“lastname”]; // Jack
- JavaScript Undefined和null
Undefined：变量未赋值
null：可以将变量的值设为null来清空变量可以
JavaScript中的数值函数
1.isNaN( ) 函数：检查其参数是不是非数字值
如果 x 是特殊的非数字值 NaN（或者能被转换为这样的值），返回的值就是 true。如果 x 是其他值,则返回 false。
2.number( )函数：将其他类型尝试转换为数值型
字符串类型：
字符串为纯数值，会转为对应的数值 “111”→111
字符串为空字符串会转为0 “ ”→0
字符串包含任何字符时都不能转 “1a”→NaN
布尔类型：
true→1 false→0
Null / Undefined：
Null→0 Undefined→NaN
Object：
（后面讲）
3.ParseInt：将字符串转为整型
纯数值字符串，可以转。 "12"→12; "12.9"→12(小数转化时直接抹掉，不进行四舍五入)
空字符串，不能转。 " "→NaN
包含其它字符的字符串，会截取第一个非数值字符串前的数字部分(a前面的部分) "123a456"→123; "a123b456"→NaN
ParseInt( )只能将字符串转为整型，转其它类型，全是NaN
- Number函数可以转各种数据的类型，ParseInt函数只能转字符串；
- 两者在转字符串时，结果不完全相同。
4.ParseFloat：将字符串转为数值型；
转换规则与ParseInt相同，但是如果有小数，则保留小数；如果没有小数，则依然是整数；"12.5"→12.5; "12"→12
5.typeof：检测变量的数据类型
字符串→String 数值→Number 未定义→Undefined 对象/NULL→object 函数→function true/false→Boolean
JavaScript中的输入输出语句
输入语句：
1.prompt() 弹窗输入
点击确定按钮，变量将被赋值为输入的内容；点击取消按钮，变量将被赋值为null
var name = promopt("请输入您的姓名"," ");
2.comfirm()
弹出一个确认消息对话框，有确定和取消两个按钮，点击确定返回true，点击取消返回false
输出语句：
window.alert() 弹出警告框
document.write() 方法将内容写到 HTML 文档中
innerHTML 写入到 HTML 元素
console.log() 打印到浏览器的控制台
JavaScript中的运算符
1、算术运算(单目运算符)
+ 加、- 减、* 乘、 / 除、 % 取余、++ 自增 、-- 自减
+号：有两种作用，连接字符串和进行加法运算。当+两边连接数字时，进行加法运算；当+两边有任意一边为字符串时，起连接字符串作用，结果为字符串
除+外，其余符号运算时，会先尝试将左右两边的变量用Number函数转为数字；
/：结果保留小数；
++:自增运算符，将变量在自身基础上+1；
--:自减运算符，将变量在自身基础上-1；
【a++和++a的异同点】
- 相同点：无论a++还是++a，运算完成后，a的值均会+1；
- 不同点： a++，先用a的值去运算，再把a+1；
++a，先把a+1，再用a+1以后的值去运算。
eg：var a=3，b，c；
b=a++ +2；//先用a运算，b=3+2 再把a+1，a=4；
c=++a +2；//先把a+1，a=5再用a+1以后的值去运算，c=5+2；
2、赋值运算
= += -= *= /= %=
+=：a+=b；相当于a=a+b；但是前者的运算效率要比后者快，所以推荐使用+=的写法；
3、关系运算
==、 !=、>、<、>=、<=
关系运算符运算之后的结果只能是Boolean类型；
判断一个数字是否处于一个区间，必须用&&链接；
- a<10 && a>0; 正确
- 10>a>0 错误
===：严格等于；要求不但类型要相同，值也必须相同；类型不同结果直接为false，类型相同，再进行下一步判断；
==：等于。类型相同，同===一样，类型不同时，会先尝试用Number将两边转为数字，然后再进行判断。但是，有个别特例：
- Null==false；错误
- Null==Undefined 正确
!=：不等、!== 不全等
4、条件运算符(多目运算) a>b ? true:false
有两个重要符号 ？ 和 ：
当？前面部分，运算结果为true时，执行：前面的代码；
当？前面部分，运算结果为false时，执行：后面的代码；
冒号两边可以为数值，则整个式子可用于赋值。 var a = 1 < 2 ? 1 : 2
冒号两边可以为代码块，将直接执行代码。 1 < 2 ? alert(1) : alert(2);
多目运算符可以多层嵌套。var a = 1 < 2 ? alert(1) : ( 1 > 0 ? 4 : 5)
5、 位运算符、 逻辑运算符
位运算符：
逻辑运算符：
&& 与 || 或 ! 非
&& 两边都成立，结果为true
|| 两边有任意一个成立，结果为true
6、运算符的优先级
（）小括号最高
！ ++ --
* / %
+ -
< > >= <=
== !=
&& //与或同时存在时，&&比|| 高
||
= += -= *= /= 最低的是各种赋值
JavaScript中的条件语句
- if 语句 只有当条件为 true 时，执行代码
- if...else 语句 条件为 true 时执行if下的代码，条件为 false 时执行else下的代码
- if...else if....else 语句 选择多个代码块之一执行
- switch 语句 选择多个代码块之一执行
1.if语句
if ( ) {
}
( ) 中的判断条件，支持的情况：
Boolean：true为真；false为假；
String：所有非空字符串为真，空字符串为假
Number：一切非零数字为真，0为假
null/Undefined/NaN:全为假；
object：全为真；
2.if...else语句
if ( ) {
}else{
}
3.多重if...else
if ( ) {
}else if( ){
}
......
else{
}
4.switch语句(特定类型，等值判断)
switch(变量) {
case 值1:
语句块;
break;
......
default:
语句块;
break;
}
5.条件运算符
语法：
条件表达式 ? 结果1 : 结果2
int max = a > b ? a : b ;
JavaScript中的循环结构
循环的本质：在某种条件下，重复的做某件事情
1.while循环
while (循环的条件) {
重复做的事情
}
特点：先判断，后执行
( ) 中的表达式，运算结果可以是多种类型，但是最终都会转为真假，转换规则同if结构
- boolean类型：true为真，false为假
- string类型：所有非空字符串为真，空字符串为假
- number类型：一切非零数字为真，零为假
- null、undefined、NaN：全为假
- object类型：全为真。
2.do-while循环
do {
重复做的事情
}while(循环的条件);
特点：先执行，后判断
while和do-while的区别：
while：如果条件开始就不满足，循环一次也不执行。
do-while：如果条件开始就不满足，循环至少执行一次。
3.for循环
for(表达式1;表达式2;表达式3) {
操作
}
for(初始状态A;循环的条件B;循环变量的改变C) {
操作D
}
执行顺序：A, BDC, BDC......B
特点：先判断，后执行、适合于循环次数确定的循环
三个表达式均可以由多部分组成，循环的条件B有多个可以用&& 、||连接，其他部分可以用，连接。
注意：三个表达式都可以省略，分号不可以省略
4.流程控制语句
- break：能用于switch语句和循环语句
循环：结束整个循环，跳到循环后面的语句去执行
- continue：只能用于循环语句
结束本次循环，继续下一次循环(跳过本次循环剩下的语句，继续执行下次循环)
对于for循环：跳到表达式3继续执行
对于while，do-while循环：跳到条件继续循环(注意死循环)
JavaScript中的函数
JacaScript 函数：函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
1、函数的标准声明格式：
function 函数名（参数一，参数二，...）{
// 函数体
return 返回值；
}
函数的调用：
- 直接调用：函数名(参数一的值，参数二的值,.......);
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 9 <p>本例调用的函数会执行一个计算，然后返回结果：</p> 10 <p id="demo"></p> 11 <script> 12 function myFunction(a,b){ 13 return a+b; 14 } 15 document.getElementById("demo").innerHTML=myFunction(5,2); 16 </script> 17 18 </body> 19 </html>
- 事件调用：HTML标签中，使用事件名="函数名( )"
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 9 <p>点击这个按钮，来调用带参数的函数。</p> 10 <button onclick="myFunction('Jack Sparrow','Captain')">点击这里</button> 11 <script> 12 function myFunction(name,job){ 13 alert("Welcome " + name + ", the " + job); 14 } 15 </script> 16 17 </body> 18 </html>
2.函数注意事项
- 必须要符合小驼峰法则
- 函数名后面的()中，可以有参数称为有参函数，也可以没有参数称为无参函数。
- 声明函数时的参数列表，称为型参列表，形式参数。（变量的名字）
function myList(str,name){ }
- 调用函数时的参数列表，称为实参列表，实际参数。（变量的赋值）
myList("你好","blue");
- 函数的形参个数和实参个数没有实际关系。
函数参数的个数，取决于实参个数。 如果实参列表的个数<形参列表的个数。则未赋值的形参为Undefined。
- 函数可以有返回值，使用return返回结果；
调回函数时，可以使用一个变量接收函数的返回结果。如果函数没有返回值，则接受的结果为undefined
- 函数变量的作用域：
在函数中，使用var声明的变量，为局部变量，只能在函数内部访问；
不使用var声明的变量，为全局变量，在函数外也能访问；
函数的形参列表，默认为函数的局部变量，只能在函数内部使用；
- 函数的声明与函数的调用，没有先后之分。即可以在声明函数之前调用函数。
func( )；// 声明func之前调用也是可以的。
function func( ){ }；
3.匿名函数的声明和使用
- 声明一个匿名函数直接赋值给某一个事件；
window.onload = function( ){ } ；
- 使用匿名函数表达式；将匿名函数，赋值给一个变量。
声明：var func = function(){}
调用：func()；
注意：使用匿名函数表达时，函数的调用语句，必须放在函数声明语句之后（与普通函数的区别）
- 自执行函数
a.!function( ){ }( );//可以使用多种运算符开头
!function(形参列表){ }(实参列表)
b.(function( ){ }( )); // 使用( )将函数及函数后的括号包起来
c.(function( ){ })( ); // 使用( )值包裹函数部分
三种写法的特点：
第一种使用!开头，结构清晰，不容易混乱，推荐使用
第二种写法能够表明匿名函数与调用的( )为一个整体，官方推荐使用
第三种无法表明函数之后的()的整体性，不推荐使用
JavaScript中的BOM（浏览器对象模型）
1.location对象：获取浏览器的URL地址信息
location对象的方法：
assign() 方法可加载一个新的文档
reload() 方法用于重新加载当前文档(如果文档已改变，reload() 会再次下载该文档。如果文档未改变，则该方法将从缓存中加载文档)
replace() 方法可用一个新文档取代当前文档(当使用该方法时，新的 URL 将覆盖 History 对象中的当前记录)
2.history对象
back( ) 加载 history 列表中的上一个 URL
forward( ) 加载 history 列表中的下一个 URL
go( ) 加载 history 列表中的某个具体页面(0表示当前页面，-1表示后一个页面(back)，1表示前一页(forward))
3.window对象
window对象中的所有方法和属性，均可以省略window关键字；window.alert( ); => alert();
- alert()：弹出一个警告框
- prompt()：用户输入框（单击提示框的取消按钮，则返回 null。单击确认按钮，则返回输入的文本）
- confirm():弹出带有"确定""取消"按钮的对话框，点击按钮返回true/false
- close():关闭当前浏览器窗口。在个别浏览器中，只能关闭在当前脚本新打开的页面(使用超链接、window.open()等方式打开的页面)
- setTimeout：设置延时执行，只会执行一次；
clearTimeout：清除延时器
接受两个参数：需要执行的function函数、毫秒数；
可以使用变量接受延时器id； var id = setTimeout；
调用clearTimeout，将id传入即可清除对应的延时器: clearTimeout(id);
- setInterval：设置定时器，每隔n毫秒执行一次；
clearInterval：清除定时器
接受两个参数：需要执行的function函数、毫秒数；
可以使用变量接受定时器id； var id = setInterval；
调用clearInterval，将id传入即可清除对应的定时器: clearInterval(id);
JavaScript中的DOM（文档对象模型）
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）
通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
- JavaScript 能够改变页面中的所有 HTML 元素
- JavaScript 能够改变页面中的所有 HTML 属性
- JavaScript 能够改变页面中的所有 CSS 样式
- JavaScript 能够对页面中的所有事件做出反应
DOM树节点：
DOM节点分为三大类： 元素节点、 属性节点、 文本节点；
文本节点、属性节点属于元素节点的子节点。操作时，均需要先取到元素节点，再操作子节点；
可以使用getElement系列方法，取到元素节点。
getElementById：通过id取到唯一节点。如果id重名，只能取到第一个。 例如：var x=document.getElementById("xxx");
getElementsByName()： 通过name属性 。 例如：var y=document.getElementsByClassName("xxx");
getElementsByTagName()： 通过标签名 。 例如：var z=document.getElementsByTagName("p");
1.DOM - 改变HTML
- 改变 HTML 输出流
document.write() 可直接向 HTML 输出流内容
- 改变 HTML 内容
修改 HTML 内容的最简单的方法是使用 innerHTML 属性。 document.getElementById(id).innerHTML=新的 HTML
- 改变 HTML 属性
document.getElementById(id).attribute=新属性值
2.DOM - 改变CSS
- 改变 HTML 样式
document.getElementById(id).style.property=新样式
- 使用事件
HTML DOM 允许我们通过触发事件来执行代码。 比如以下事件：
- 元素被点击。
- 页面加载完成。
- 输入框被修改。
3.DOM 事件
- HTML 事件属性
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 9 <p>点击按钮执行 <em>displayDate()</em> 函数.</p> 10 <button onclick="displayDate()">点这里</button> 11 <script> 12 function displayDate(){ 13 document.getElementById("demo").innerHTML=Date(); 14 } 15 </script> 16 <p id="demo"></p> 17 18 </body> 19 </html>
- 使用 HTML DOM 来分配事件
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <head> 8 </head> 9 <body> 10 11 <p>点击按钮执行 <em>displayDate()</em> 函数.</p> 12 <button id="myBtn">点这里</button> 13 <script> 14 document.getElementById("myBtn").onclick=function(){displayDate()}; 15 function displayDate(){ 16 document.getElementById("demo").innerHTML=Date(); 17 } 18 </script> 19 <p id="demo"></p> 20 21 </body> 22 </html>
- onload 和 onunload 事件
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body onload="checkCookies()"> 8 9 <script> 10 function checkCookies(){ 11 if (navigator.cookieEnabled==true){ 12 alert("Cookies 可用") 13 } 14 else{ 15 alert("Cookies 不可用") 16 } 17 } 18 </script> 19 <p>弹窗-提示浏览器 cookie 是否可用。</p> 20 21 </body> 22 </html>
- onchange 事件
onchange 事件在改变输入的内容时执行
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <head> 8 <script> 9 function myFunction(){ 10 var x=document.getElementById("fname"); 11 x.value=x.value.toUpperCase(); 12 } 13 </script> 14 </head> 15 <body> 16 17 输入你的名字: <input type="text" id="fname" onchange="myFunction()"> 18 <p>当你离开输入框后，函数将被触发，将小写字母转为大写字母。</p> 19 20 </body> 21 </html>
当改变输入字段的内容时，会调用 upperCase() 函数将小写字母转为大写字母。
4.DOM EventListener
addEventListener() 方法：在用户点击按钮时触发监听事件
addEventListener() 方法用于向指定元素添加事件句柄。添加的事件句柄不会覆盖已存在的事件句柄。
你可以向一个元素添加多个事件句柄。
你可以向同个元素添加多个同类型的事件句柄，如：两个 "click" 事件。
你可以向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。如： window 对象。
当你使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来，可读性更强， 在没有控制HTML标记时也可以添加事件监听。
你可以使用 removeEventListener() 方法来移除事件的监听。
第一个参数是事件的类型 (如 "click" 或 "mousedown").
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
- addEventListener添加点击事件：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 9 <p>该实例使用 addEventListener() 方法在按钮中添加点击事件。 </p> 10 <button id="myBtn">点我</button> 11 <script> 12 document.getElementById("myBtn").addEventListener("click", function(){ 13 alert("Hello World!"); 14 }); 15 </script> 16 17 </body> 18 </html>
- 向同一个元素中添加多个事件句柄：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 9 <p>该实例使用 addEventListener() 方法向同个按钮中添加两个点击事件。</p> 10 <button id="myBtn">点我</button> 11 <script> 12 var x = document.getElementById("myBtn"); 13 x.addEventListener("click", myFunction); 14 x.addEventListener("click", someOtherFunction); 15 function myFunction() { 16 alert ("Hello World!") 17 } 18 function someOtherFunction() { 19 alert ("函数已执行!") 20 } 21 </script> 22 23 </body> 24 </html>
- 向 Window 对象添加事件句柄：
addEventListener() 方法允许在 HTML DOM 对象添加事件监听，HTML DOM 对象：HTML元素, HTML文档, window对象。或者其他支出的事件对象如:xmlHttpRequest对象
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 9 <p>实例在 window 对象中使用 addEventListener() 方法。</p> 10 <p>放大或缩小浏览器的窗口触发 "resize" 事件句柄。</p> 11 <p id="demo"></p> 12 <script> 13 window.addEventListener("resize", function(){ 14 document.getElementById("demo").innerHTML = Math.random(); 15 }); 16 </script> 17 18 </body> 19 </html>
- 传递参数：
当传递参数值时，使用"匿名函数"调用带参数的函数
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 9 <p>实例演示了在使用 addEventListener() 方法时如何传递参数。</p> 10 <p>点击按钮执行计算(5 * 6 的值)</p> 11 <button id="myBtn">点我</button> 12 <p id="demo"></p> 13 <script> 14 var p1 = 5; 15 var p2 = 6; 16 document.getElementById("myBtn").addEventListener("click", function() { 17 myFunction(p1, p2); 18 }); 19 function myFunction(a, b) { 20 var result = a * b; 21 document.getElementById("demo").innerHTML = result; 22 } 23 </script> 24 25 </body> 26 </html>
- 事件捕获和事件冒泡
a.事件冒泡
当某DOM元素触发一种事件时，会从当前节点开始，逐级往上触发其祖先节点的同类型事件，直到DOM根节点
产生事件冒泡的几种情况：
DOM0模型绑定事件，全部都是冒泡；
IE8之前，使用attachEvent()绑定的事件，全部是冒泡；
其他浏览器，使用addEventLinstener()添加事件，当第三个参数省略或者为false时，为事件冒泡；
b.事件捕获
当某DOM元素触发一种事件时，会从文档根节点开始，逐渐向下触发其祖先节点的同类型事件，直到该节点自身
产生事件捕获的几种情况：
使用addEventLinstener()添加事件，当第三个参数为true时，为事件捕获
c.addEventListener() 方法可以指定 "useCapture" 参数来设置传递类型
默认值为 false, 即事件冒泡，当值为 true 时, 事件使用事件捕获。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 div { 8 background-color: coral; 9 border: 1px solid; 10 padding: 50px; 11 } 12 </style> 13 </head> 14 <body> 15 16 <p>实例演示了在添加不同事件监听时，冒泡与捕获的不同。</p> 17 <div id="myDiv"> 18 <p id="myP">点击段落，我是冒泡。</p> 19 </div><br> 20 <div id="myDiv2"> 21 <p id="myP2">点击段落，我是捕获。 </p> 22 </div> 23 <script> 24 document.getElementById("myP").addEventListener("click", function() { 25 alert("你点击了 P 元素!"); 26 }, false); 27 document.getElementById("myDiv").addEventListener("click", function() { 28 alert(" 你点击了 DIV 元素 !"); 29 }, false); 30 document.getElementById("myP2").addEventListener("click", function() { 31 alert("你点击了 P2 元素!"); 32 }, true); 33 document.getElementById("myDiv2").addEventListener("click", function() { 34 alert("你点击了 DIV2 元素 !"); 35 }, true); 36 </script> 37 38 </body> 39 </html>
- removeEventListener() 方法
removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄
- JavaScript HTML DOM 元素(节点)
a.创建新的 HTML 元素
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 9 <div id="div1"> 10 <p id="p1">这是一个段落。</p> 11 <p id="p2">这是另一个段落。</p> 12 </div> 13 <script> 14 var para=document.createElement("p"); 15 var node=document.createTextNode("这是一个新段落。"); 16 para.appendChild(node); 17 18 var element=document.getElementById("div1"); 19 element.appendChild(para); 20 </script> 21 22 </body> 23 </html>
如需向 <p> 元素添加文本，您必须首先创建文本节点。这段代码创建了一个文本节点：
然后您必须向 <p> 元素追加这个文本节点：
最后您必须向一个已有的元素追加这个新元素。
以下代码在已存在的元素后添加新元素：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 </head> 7 <body> 8 9 <div id="div1"> 10 <p id="p1">这是一个段落。</p> 11 <p id="p2">这是另一个段落。</p> 12 </div> 13 <script> 14 var parent=document.getElementById("div1"); 15 var child=document.getElementById("p1"); 16 parent.removeChild(child); 17 </script> 18 19 </body> 20 </html>
这个 HTML 文档含有两个子节点（两个 <p> 元素）的 <div> 元素：
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
找到 id="div1" 的元素：var parent=document.getElementById("div1");
找到 id="p1" 的 <p> 元素：var child=document.getElementById("p1");
从父元素中删除子元素：parent.removeChild(child);
JavaScript中的数组-Array
创建一个数组- 使用字面量声明：var arr = [10,11,12,13];
- 使用new关键字声明：var arr = new Array(10,11,12,13);
参数可以是：
a.参数省略表示创建一个空数组；
b.参数只放一个整数表示声明一个length为指定长度的数组，但是这个length随时可变可追加；
c.参数为逗号分隔的多个数值，表示数组的多个值。
- var arr = new Array(3);
arr[0] = 10;
arr[1] = 11;
arr[2] = 12;
- var arr = new Array();
arr[10] = 40;
数组中常用的方法
- join( )：
- contact( )：
将数组2拼接到数组1后面,如图
- push( )：在数组最后增加添加，unshift( )在数组开头添加一个。返回新数组的长度
- pop( ) ：把数组最后一个元素删除，shift() 在数组开头删除一个。返回被删除的值
- reverse( )：【原数组改变】,将数组反转，倒序输出；
- slice( )：【原数组不改变】 截取数组中的某一部分，并返回截取的新数组；
- sort( )：【原数组改变】
- indexof(value,index)：返回数组中第一个value值所在的下标，如果未找到则返回-1；区分大小写
给两个值，则从第二个值开始向后找，返回找到的下标，找不到返回-1
若第二个值给的是负数则默认从头开始找，如图
结果：1
结果：6 （2,3,4,5,6的结果都是6）
结果：11 (7,8,9,10,11的结果都是11)
- forEach( )：专门用于循环遍历数组。接收一个回调函数，回调函数接收两个参数，第一个参数为该数组的每一项值，第二个参数为下标；
- map( )：数组映射，使用方式与forEash( )使用方式相同。不同的是，map可以有返回值，返回新数组的每个值，原数组不会改变
扫一扫
1694
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
