关于JavaScript原生的JS。工作接近一年,发现对于原生JS的基础内容总是不够掌握,特定抽出三个周的周末,结合本人的工作经验还有菜鸟教程及w3school的基础内容等整理了如下内容。对JS的常用知识进行概括!希望对大家能够有所帮助。
一、JavaScript 简介
1、JavaScript 是 Web 的编程语言,是前端开发必须掌握的三门语言之一,即:
- HTML 定义了网页的内容
- CSS 描述了网页的布局
- JavaScript 实现了网页的行为
2、JavaScript 是一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。现在 是互联网上最流行的脚本语言,这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
二、JavaScript 主要实现功能
1、JavaScript:直接写入 HTML 输出流:
2、JavaScript:对事件的反应:
<button type="button" onclick="alert('欢迎!')">点我!</button>
3、JavaScript:改变 HTML 内容:
x=document.getElementById("demo") //查找元素
x.innerHTML="Hello JavaScript"; //改变内容
4、JavaScript:改变 HTML 图像:
动态地改变 HTML <image> 的来源(src)
5、JavaScript:改变 HTML 样式
x=document.getElementById("demo") //找到元素
x.style.color="#ff0000"; //改变样式
6、JavaScript:验证输入
if isNaN(x) {alert("不是数字")}; //下面会介绍 isNaN 一种常用的数值函数
三、JavaScript中的变量和输入输出
一、JavaScript中的变量:
1、JS中变量声明的写法:
var num =10;// 使用var声明的变量,属于局部变量,只是当前作用域内有效;
num = 10; // 不用var声明,默认为全局变量,在整个JS文件中都有效;
var x=8,y,z=10;使用一行语句,同时声明多个变量。上式中,y属于已声明,但是未赋值状态,结果为undefined;
2、JS中变量的命名规范:
1、变量名的命名要求:
①变量名只能有字母、数字、下划线组成;
②开头不能是数字;
③变量名区分大小写,大写字母和小写字母为不同变量;纯大写字母,一般默认为常量;
2、变量名的命名规范:
①要符合小驼峰法则:
首字母小写,之后每个单词的首字母大写;
myNameIsJiangHao 骆驼命名法:
② 所有字母小写,中间用
_my_name_is_jiang_hao 匈牙利写法
③ manameisjianghao 能用 但是不规范
二、JavaScript中的数据类型:
1、JavaScript 字符串(String)类型
字符串是存储字符(比如 "Bill Gates")的变量。
字符串可以是引号中的任意文本。您可以使用单引号或双引号:
var carname="Volvo XC60";
var carname='Volvo XC60';
2、JavaScript 数字 (Number)类型
JavaScript 只有一种数字类型。数字可以带小数点,也可以不带:
var x1=34.00; //使用小数点来写
var x2=34; //不使用小数点来写
极大或极小的数字可以通过科学(指数)计数法来书写:
var y=123e5; // 12300000
var z=123e-5; // 0.00123
3、JavaScript 布尔 ( Boolean ) 类型
布尔(逻辑)只能有两个值:true 或 false。
var x=true;
var y=false;
4、JavaScript 数组 ( Array )
下面的代码创建名为 cars 的数组:
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";
或者 :
或者 :
数组下标是基于零的,所以第一个项目是 [0],第二个是 [1],以此类推。
5、JavaScript 对象 ( Object )
对象由花括号分隔。在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔:
上面例子中的对象 (person) 有三个属性:firstname、lastname 以及 id。
空格和折行无关紧要。声明可横跨多行:
firstname : "John",
lastname : "Doe",
id : 5566
};
对象属性有两种寻址方式:
name=person["lastname"];//Doe
Undefined 这个值表示变量不含有值。
可以通过将变量的值再一次设置为 null 来清空变量。
三、JavaScript 中的数值函数
1、isNaN():判断一个变量或常量,是否是NaN( not a num 非数值);
使用isNaN()判断时,会尝试使用Number()函数进行转换,如果最终结果能够转换数字,则不是NaN,结果为false;
2、number()函数: 将其他类型的数据,尝试转为数值型;
[字符串类型]
>>>字符串为纯数值字符串,会转为对应的数字;"111"→111
>>>字符串为空字符串,会转为0: " "-> 0
>>>字符串包含任何其它字符时,都不能转;"1a"->NaN
[Boolean类型]
true->1 false->0
[Null/Undefined]
Null->0 Undefined->NaN
[Object]
(后续讲解)
3、ParseInt():将字符串转为整数类型;
>>>纯数值字符串,能转。"12"->12;"12.9"->12(小数转化时,直接抹掉小数点,不进行四舍五入)
>>>空字符串,不能转。" "->NaN
>>>包含其它字符的字符串,会截取第一个非数值字符串前的数字部分;
"123a456"->123;"a123b456"->NaN
>>>ParseInt()只能转字符串,转其它类型,全是NaN.
[number函数与ParseInt函数的区别]
1、Number函数可以转各种数据的类型,ParseInt函数只能转字符串;
2、两者在转字符串时,结果不完全相同。(详见上面解释)
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、JavaScript 可以通过不同的方式来输出数据:
- 使用 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 x
>>> ===:严格等于;要求不但类型要相同,值也必须相同;类型不同结果直接为false,类型相同,再进行下一步判断;
== :等于。类型相同,同===一样,类型不同时,会先尝试用Number将两边转为数字,然后再进行判断。
但是,有个别特例: Null==false x ;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 中的条件语句
在 JavaScript 中,我们可使用以下条件语句:
- if 语句 - 只有当指定条件为 true 时,使用该语句来执行代码
- if...else 语句 - 当条件为 true 时执行代码,当条件为 false 时执行其他代码
- if...else if....else 语句- 使用该语句来选择多个代码块之一来执行
- switch 语句 - 使用该语句来选择多个代码块之一来执行
1、If 语句 只有当指定条件为 true 时,该语句才会执行代码。
if 的()中的判断条件,支持的情况:
①Boolean:true为真;false为假;
②String:空字符串为假
③Number:0为假;一切非零数字为真;
④null/Undefined/NaN:全为假;
⑤object:全为真;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>如果时间早于 20:00,会获得问候 "Good day"。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
var x="";
var time=new Date().getHours();
if (time<20){
x="Good day";
}
document.getElementById("demo").innerHTML=x;
}
</script>
</body>
</html>
2、使用 if....else 语句在条件为 true 时执行代码,在条件为 false 时执行其他代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>点击这个按钮,获得基于时间的问候。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
var x="";
var time=new Date().getHours();
if (time<20){
x="Good day";
}
else{
x="Good evening";
}
document.getElementById("demo").innerHTML=x;
}
</script>
</body>
</html>
3、使用 if....else if...else 语句来选择多个代码块之一来执行。
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var d = new Date();
var time = d.getHours();
if (time<10)
{
document.write("<b>早上好</b>");
}
else if (time>=10 && time<16)
{
document.write("<b>今天好</b>");
}
else
{
document.write("<b>晚上好!</b>");
}
</script>
<p>
这个例子演示了 if..else if...else 语句。
</p>
</body>
</html>
4、JavaScript switch 语句
switch 语句用于基于不同的条件来执行不同的动作。
工作原理:首先设置表达式 n(通常是一个变量)。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配,则与该 case 关联的代码块会被执行。请使用 break 来阻止代码自动地向下一个 case 运行。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>点击下面的按钮来显示今天是周几:</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
var x;
var d=new Date().getDay();
switch (d){
case 0:x="今天是星期日";
break;
case 1:x="今天是星期一";
break;
case 2:x="今天是星期二";
break;
case 3:x="今天是星期三";
break;
case 4:x="今天是星期四";
break;
case 5:x="今天是星期五";
break;
case 6:x="今天是星期六";
break;
default:x="未知错误";
break;
}
document.getElementById("demo").innerHTML=x;
}
</script>
</body>
</html>
七、JavaScript 中的循环结构
1、【while(){}循环结构的步骤】
1、声明循环变量
2、判断循环条件
3、执行循环体操作
4、更新循环变量
然后循环执行2-4,直到条件不成立时跳出循环。
while循环()中的表达式,运算结果可以是多种类型,但是最终都会转为真假,转换规则同if结构
(1)、boolean类型:true为真,false为假
(2)、string类型:所有非空字符串为真,空字符串为假
(3)、number类型:一切非零数字为真,零为假
(4)、null、undefined、NaN:全为假
(5)、object类型:全为真。
var num=1; //声明循环变量 while (num<=10){ //判断循环条件 document.write(num+"<br />");//执行循环体操作 num++; //更新循环变量 }
【 while循环与do-while循环的区别:】:
while循环是先判断再循环;
do-while循环是先执行再判断,即便是条件不成立,该循环也最少执行一次.
var num=10;
do{
document.write(num+"<br />");
num--;
}
while(num>=0);
2、【for(){}循环结构的步骤】
1、for循环有三个表达式:
① 声明循环变量;
② 判断循环条件;
③ 更新循环变量;
三个表达式之间用;分隔开,三个表达式可以省略,但是两个分号不能省略.
2、for循环的执行特点:先判断再执行,和while相同;
执行顺序:1、初始语句 2、执行条件是否符合? 3、循环体 4、增加增量 ;
3、for循环三个表达式均可以由多部分组成,第二部分多个判断条件用&& 、||连接,其他部分可以用,连接。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>点击按钮循环代码5次。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
var x="";
for (var i=0;i<5;i++){
x=x + "该数字为 " + i + "<br>";
}
document.getElementById("demo").innerHTML=x;
}
</script>
</body>
</html>
八、JacaScript 中的函数
一、JacaScript 函数:函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
二、函数的声明及调用:
1、函数的标准声明格式:
function 函数名(参数一,参数二,...){
//函数体代码
return 返回值;
}
函数的调用:
① 直接调用:函数名加(参数一的值,参数二的值,.......);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>本例调用的函数会执行一个计算,然后返回结果:</p>
<p id="demo"></p>
<script>
function myFunction(a,b){
return a*b;
}
document.getElementById("demo").innerHTML=myFunction(4,3);
</script>
</body>
</html>
② 事件调用:HTML标签中,使用事件名="函数名()"
<button onclick="saySth('hah ha','yellow')">点击按钮,打印内容</button>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>点击这个按钮,来调用带参数的函数。</p>
<button onclick="myFunction('Harry Potter','Wizard')">点击这里</button>
<script>
function myFunction(name,job){
alert("Welcome " + name + ", the " + job);
}
</script>
</body>
</html>
2、函数的注意事项:
① 函数必须要符合小驼峰法则!!!(首字母小写,之后每个人单词首字母大写)
② 函数名后面的()中,可以有参数,也可以没有参数。分别称为有参函数和无参函数;
③ 声明函数时的参数列表,称为型参列表,形式参数。(变量的名字)
function saySth(str,color){}
调用函数时的参数列表,称为实参列表,实际参数。(变量的赋值)
saySth("哈哈哈","red");
④ 函数的形参列表个数和实参列表个数没有实际关系。
函数参数的个数,取决于实参列表。
如果实参列表的个数<形参列表,则未赋值的形参,将为Undefined。
⑤ 函数可以有返回值,使用return返回结果;
调回函数时,可以使用一个变量接受函数的返回结果。如果函数没有返回值,则接受的结果为undefined;
function func(){
return = "hahaha";
}
var num = func();//num = "hahaha"
⑥ 函数变量的作用域:
在函数中,使用var声明的变量,为局部变量,只能在函数内部访问;
不使用var声明的变量,为全局变量,在函数外边也能访问;
函数的形象列表,默认为函数的局部变量,只能在函数内部使用;
⑦ 函数的声明与函数的调用,没有先后之分。即,可以在声明函数之前,调用函数。
func();//声明func之前调用也是可以的。
function func(){};
【匿名函数的声明和使用】:
1、声明一个匿名函数直接赋值给某一个事件;
window.onload = function(){} ;
2、使用匿名函数表达式;将匿名函数,赋值给一个变量。
声明:var func = function(){}
调用:func();
注意:使用匿名函数表达时,函数的调用语句,必须放在函数声明语句之后!!!(与普通函数的区别!!!)
3、自执行函数
① !function(){}();//可以使用多种运算符开头,单一版用!;
!function(形参列表){}(实参列表);
② (function(){}());//使用()将函数及函数后的括号包起来;
③ (function(){})();//使用()值包裹函数部分;
三种写法的特点:
① 第一种使用!开头,结构清晰,不容易混乱,推荐使用;
② 第二种写法能够表明匿名函数与调用的()为一个整体,官方推荐使用;
③ 第三种无法表明函数之后的()的整体性,不推荐使用;
九、JavaScript 中的 BOM
BOM:浏览器对象模型(Browser Object Model (BOM),浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话"。
由于现代浏览器已经(几乎)实现了 JavaScript 交互性方面的相同方法和属性,因此常被认为是 BOM 的方法和属性。
1、【location对象】:取到浏览器的URL地址信息。
使用location提供的方法跳转页面的方式:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>点击这个按钮,实现页面的跳转。</p>
<button onclick="assign()">assign</button>
<button onclick="replace()">replace</button>
<button onclick="reload()">repload</button>
<script>
//加载新的文档,加载之后,可以回退。
function assign(){
location.assign("http://www.baidu.com");
}
//使用新的文档替换当前文档。替换以后,不能回退。
function replace(){
location.replace("http://www.baidu.com");
}
function reload(){
/*从新加载当前文档。刷新页面
*reload():在本地刷新当前页面,相当于F5
*reload(true):强制刷新,从服务器端从新加载页面,相当于ctrl+F5
*/
location.reload();
}
</script>
</body>
</html>
2、【history浏览历史】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>点击这个按钮,实现页面的历史记录。</p>
<button onclick="back()">后退一步</button>
<button onclick="forward()">前进一步</button>
<button onclick="go()"></button>
<script>
function back(){
history.back();//后退按钮
}
function forward(){
history.forward();//前进按钮
}
function go(){
/* 跳转到浏览历史的任意页面
* 0表示当前页面-1表示后一个页面(back),1表示前一页(forward)
*/
history.go();//
}
</script>
</body>
</html>
3、【window对象】:在window对象中的所有方法和属性,均可以省略window关键字;window.alert();--> alert(); √
>>>window对象的常用方法:
1、alert():弹出一个警告提示框:
2、prompt():弹窗接受用户的输入:
3、confirm():弹出带有"确定""取消"按钮的对话框,点击按钮返回true/false
4、close():关闭当前浏览器窗口。在个别浏览器中,只能关闭在当前脚本新打开的页面(使用超链接、window.open()等方式打开的页面)
5、打开一个新窗口
参数一:新窗口的地址;
参数二:新窗口的名字,并没有什么作用;
参数三:新窗口的各种属性设置,"属性1=值1,属性2=值2,属性3=值3,属性4=值4";
6、setTimeout:设置延时执行,只会执行一次;
setInterval:设置定时器,每隔n毫秒执行一次;
接受两个参数:需要执行的function、毫秒数;
7、clearTimeout:清除延时器;
clearInterval:清除定时器;
* 使用方法:设置延时器或定时器时,可以使用变量接受定时器ID;
* var id = setInterval;
* 调用clearIntertval,将id传入,即可清除对应的定时器;
* clearIntertval(id);
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p>点击这个按钮,实现window对象方法。</p>
<button onclick="close()">window.close</button> <button onclick="lopen()">window.open</button> <button onclick="setTimeout1()">setTimeout 设置延时器</button> <button onclick="setInterval1()">setInterval 设置定时器</button> <button onclick="clearsetInterval1()">清除延时器</button>
<script> function close(){ window.close(); } function lopen(){ window.open("http://www.baidu.com","baidu","width=1000px,height=600px,left=100px,top=50px"); } var setTimeoutID = 0; function setTimeout1(){ //setTimeout(function(){console.log("延时器成功执行");},3000); setTimeoutID = setTimeout(lopen,3000); } function clearTimeout1(){ clearTimeout(setTimeoutID); }</script> </body> </html>
十、JavaScript中的——DOM
一、HTML DOM (文档对象模型):
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。
HTML DOM 模型被构造为对象的树:
HTML DOM 树:
![DOM HTML tree](http://www.runoob.com/images/pic_htmltree.gif)
通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML。
- JavaScript 能够改变页面中的所有 HTML 元素
- JavaScript 能够改变页面中的所有 HTML 属性
- JavaScript 能够改变页面中的所有 CSS 样式
- JavaScript 能够对页面中的所有事件做出反应
【DOM树节点】
DOM节点分为三大类: 元素节点、 属性节点、 文本节点;
文本节点、属性节点属于元素节点的子节点。操作时,均需要先取到元素节点,再操作子节点;
可以使用getElement系列方法,取到元素节点。
【查看元素节点】
getElementById:通过id取到唯一节点。如果ID重名,只能取到第一个。 例如: var x=document.getElementById("xxx");
getElementsByName(): 通过name属性 。 例如: var x=document.getElementsByClassName("xxx");
getElementsByTagName(): 通过标签名 。 例如: var y=document.getElementsByTagName("p");
二、JavaScript HTML DOM - 改变 HTML:
1、改变 HTML 输出流:
JavaScript 能够创建动态的 HTML 内容:
今天的日期是: Sun Oct 15 2017 22:53:40 GMT+0800 (中国标准时间)
在 JavaScript 中,document.write() 可用于直接向 HTML 输出流写内容。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> </title>
</head>
<body>
<script>
document.write(Date());
</script>
</body>
</html>
2、改变 HTML 内容
修改 HTML 内容的最简单的方法时使用 innerHTML 属性。
如需改变 HTML 元素的内容,请使用这个语法:
本例改变了 <p>元素的内容:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="新文本!";
</script>
<p>以上段落通过脚本修改文本。</p>
</body>
</html>
3、改变 HTML 属性
如需改变 HTML 元素的属性,请使用这个语法:
本例改变了 <img> 元素的 src 属性:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<img id="image" src="smiley.gif" width="160" height="120">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
<p>原图片为 smiley.gif,脚本将图片修改为 landscape.jpg</p>
</body>
</html>
三、JavaScript HTML DOM - 改变CSS
1、改变 HTML 样式
如需改变 HTML 元素的样式,请使用这个语法:
下面的例子会改变 <p> 元素的样式:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>
</body>
</html>
2、使用事件
HTML DOM 允许我们通过触发事件来执行代码。
比如以下事件:
- 元素被点击。
- 页面加载完成。
- 输入框被修改。
- ……
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1 id="id1">我的标题 1</h1>
<button type="button" onclick="document.getElementById('id1').style.color='red'">
点我!</button>
</body>
</html>
四、JavaScript HTML DOM 事件
HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。
我们可以在事件发生时执行 JavaScript,比如当用户在 HTML 元素上点击时。
如需在用户点击某个元素时执行代码,请向一个 HTML 事件属性添加 JavaScript 代码:
HTML 事件的例子:
- 当用户点击鼠标时
- 当网页已加载时
- 当图像已加载时
- 当鼠标移动到元素上时
- 当输入字段被改变时
- 当提交 HTML 表单时
- 当用户触发按键时
1、HTML 事件属性
如需向 HTML 元素分配 事件,您可以使用事件属性。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p>点击按钮执行 <em>displayDate()</em> 函数.</p> <button onclick="displayDate()">点这里</button> <script> function displayDate(){ document.getElementById("demo").innerHTML=Date(); } </script> <p id="demo"></p> </body> </html>
2、使用 HTML DOM 来分配事件
HTML DOM 允许您使用 JavaScript 来向 HTML 元素分配事件:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <head> </head> <body> <p>点击按钮执行 <em>displayDate()</em> 函数.</p> <button id="myBtn">点这里</button> <script> document.getElementById("myBtn").onclick=function(){displayDate()}; function displayDate(){ document.getElementById("demo").innerHTML=Date(); } </script> <p id="demo"></p> </body> </html>
3、onload 和 onunload 事件
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本,并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body onload="checkCookies()"> <script> function checkCookies(){ if (navigator.cookieEnabled==true){ alert("Cookies 可用") } else{ alert("Cookies 不可用") } } </script> <p>弹窗-提示浏览器 cookie 是否可用。</p> </body> </html>
4、onchange 事件
onchange 事件常结合对输入字段的验证来使用。
下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时,会调用 upperCase() 函数。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <head> <script> function myFunction(){ var x=document.getElementById("fname"); x.value=x.value.toUpperCase(); } </script> </head> <body> 输入你的名字: <input type="text" id="fname" onchange="myFunction()"> <p>当你离开输入框后,函数将被触发,将小写字母转为大写字母。</p> </body> </html>
五、JavaScript HTML DOM EventListener
一、addEventListener() 方法:在用户点击按钮时触发监听事件。
addEventListener() 方法用于向指定元素添加事件句柄。
addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。
你可以向一个元素添加多个事件句柄。
你可以向同个元素添加多个同类型的事件句柄,如:两个 "click" 事件。
你可以向任何 DOM 对象添加事件监听,不仅仅是 HTML 元素。如: window 对象。
addEventListener() 方法可以更简单的控制事件(冒泡与捕获)。
当你使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来,可读性更强, 在没有控制HTML标记时也可以添加事件监听。
你可以使用 removeEventListener() 方法来移除事件的监听。
二、语法
第一个参数是事件的类型 (如 "click" 或 "mousedown").
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
三、向原元素添加事件句柄
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p>该实例使用 addEventListener() 方法在按钮中添加点击事件。 </p> <button id="myBtn">点我</button> <script> document.getElementById("myBtn").addEventListener("click", function(){ alert("Hello World!"); }); </script> </body> </html>
四、向同一个元素中添加多个事件句柄
addEventListener() 方法允许向同个元素添加多个事件,且不会覆盖已存在的事件:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p>该实例使用 addEventListener() 方法向同个按钮中添加两个点击事件。</p> <button id="myBtn">点我</button> <script> var x = document.getElementById("myBtn"); x.addEventListener("click", myFunction); x.addEventListener("click", someOtherFunction); function myFunction() { alert ("Hello World!") } function someOtherFunction() { alert ("函数已执行!") } </script> </body> </html>
五、向 Window 对象添加事件句柄
addEventListener() 方法允许你在 HTML DOM 对象添加事件监听, HTML DOM 对象如: HTML 元素, HTML 文档, window 对象。或者其他支出的事件对象如: xmlHttpRequest 对象。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p>实例在 window 对象中使用 addEventListener() 方法。</p> <p>尝试重置浏览器的窗口触发 "resize" 事件句柄。</p> <p id="demo"></p> <script> window.addEventListener("resize", function(){ document.getElementById("demo").innerHTML = Math.random(); }); </script> </body> </html>
六、传递参数
当传递参数值时,使用"匿名函数"调用带参数的函数:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p>实例演示了在使用 addEventListener() 方法时如何传递参数。</p> <p>点击按钮执行计算。</p> <button id="myBtn">点我</button> <p id="demo"></p> <script> var p1 = 5; var p2 = 7; document.getElementById("myBtn").addEventListener("click", function() { myFunction(p1, p2); }); function myFunction(a, b) { var result = a * b; document.getElementById("demo").innerHTML = result; } </script> </body> </html>
七、事件捕获和事件冒泡:
1、事件冒泡
当某DOM元素触发一种事件时,会从当前节点开始,逐级往上触发其祖先节点的同类型事件,直到DOM根节点;
>>>什么情况下会产生事件冒泡?
①DOM0模型绑定事件,全部都是冒泡;
②IE8之前,使用attachEvent()绑定的事件,全部是冒泡;
③其他浏览器,使用addEventLinstener()添加事件,当第三个参数省略或者为false时,为事件冒泡;
2、事件捕获:当某DOM元素触发一种事件时,会从文档根节点开始,逐渐向下触发其祖先节点的同类型事件,直到 该节点自身;
>>>什么情况下会产生事件捕获?
①使用addEventLinstener()添加事件,当第三个参数为true时,为事件捕获;
3、addEventListener() 方法可以指定 "useCapture" 参数来设置传递类型:
默认值为 false, 即冒泡传递,当值为 true 时, 事件使用捕获传递。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div { background-color: coral; border: 1px solid; padding: 50px; } </style> </head> <body> <p>实例演示了在添加不同事件监听时,冒泡与捕获的不同。</p> <div id="myDiv"> <p id="myP">点击段落,我是冒泡。</p> </div><br> <div id="myDiv2"> <p id="myP2">点击段落,我是捕获。 </p> </div> <script> document.getElementById("myP").addEventListener("click", function() { alert("你点击了 P 元素!"); }, false); document.getElementById("myDiv").addEventListener("click", function() { alert(" 你点击了 DIV 元素 !"); }, false); document.getElementById("myP2").addEventListener("click", function() { alert("你点击了 P2 元素!"); }, true); document.getElementById("myDiv2").addEventListener("click", function() { alert("你点击了 DIV2 元素 !"); }, true); </script> </body> </html>
六、removeEventListener() 方法
removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> div { background-color: coral; border: 1px solid; padding: 50px; } </style> </head> <body> <p>实例演示了在添加不同事件监听时,冒泡与捕获的不同。</p> <div id="myDiv"> <p id="myP">点击段落,我是冒泡。</p> </div><br> <div id="myDiv2"> <p id="myP2">点击段落,我是捕获。 </p> </div> <script> document.getElementById("myP").addEventListener("click", function() { alert("你点击了 P 元素!"); }, false); document.getElementById("myDiv").addEventListener("click", function() { alert(" 你点击了 DIV 元素 !"); }, false); document.getElementById("myP2").addEventListener("click", function() { alert("你点击了 P2 元素!"); }, true); document.getElementById("myDiv2").addEventListener("click", function() { alert("你点击了 DIV2 元素 !"); }, true); </script> </body> </html>
七、JavaScript HTML DOM 元素(节点)
1、创建新的 HTML 元素
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="div1"> <p id="p1">这是一个段落。</p> <p id="p2">这是另一个段落。</p> </div> <script> var para=document.createElement("p"); var node=document.createTextNode("这是一个新段落。"); para.appendChild(node); var element=document.getElementById("div1"); element.appendChild(para); </script> </body> </html>
这段代码创建新的<p> 元素:
如需向 <p> 元素添加文本,您必须首先创建文本节点。这段代码创建了一个文本节点:
然后您必须向 <p> 元素追加这个文本节点:
最后您必须向一个已有的元素追加这个新元素。
这段代码找到一个已有的元素:
以下代码在已存在的元素后添加新元素:
2、删除已有的 HTML 元素
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="div1"> <p id="p1">这是一个段落。</p> <p id="p2">这是另一个段落。</p> </div> <script> var parent=document.getElementById("div1"); var child=document.getElementById("p1"); parent.removeChild(child); </script> </body> </html>
这个 HTML 文档含有拥有两个子节点(两个 <p> 元素)的 <div> 元素:
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
找到 id="div1" 的元素:
找到 id="p1" 的 <p> 元素:
从父元素中删除子元素:
十一、JavaScript中的数组-Array
数组是在内容空间中连续存储的一组有序数据的集合。 元素在数组中的顺序,成为下标。可以使用下标访问数组的每个元素。
1、创建一个数组
① 使用字面量声明:var arr = [];
在JS中同一数组可以存储各种数据类型。
例如:var arr = [1,"jianghao",true,{},null,func];
② 使用new关键字声明:var arr = new Array(参数);
>>>参数可以是:
a.参数省略表示创建一个空数组;
b.参数只放一个整数表示声明一个length为指定长度的数组,但是这个length可以随时可变可追加;
c.参数为逗号分隔的多个数值,表示数组的多个值。
new Array(1,2,3) == [1,2,3]
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script> var i; var mycars = new Array(); mycars[0] = "Jack"; mycars[1] = "Alice"; mycars[2] = "Tom"; for (i=0;i<mycars.length;i++){ document.write(mycars[i] + "<br />"); } </script> </body> </html>
二、数组中的常用方法
① join():将数组用指定分隔符链接为字符串。单参数为空时,默认逗号分隔。
② contact():【原数组不会被改变】 将数组,与两个或多个数组的值链接为新数组;
③ push():数组最后增加一个,unshift()数组开头增加一个。-返回新数组的长度
pop() 数组最后删除一个,shift() 数组开头删除一个。-返回被删除的值
④ reverse():【原数组被改变】,将数组反转,倒序输出;
⑤ slice():【原数组不会被改变】 截取数组中的某一部分,并返回截取的新数组;
⑥ sort():【原数组被改变】将数组进行排列
⑦ indexof(value,index):返回数组中第一个value值所在的下标,如果没有找到返回-1;
⑧ forEach():专门用于循环遍历数组。接收一个回调函数,回调函数接收两个参数,第一个参数为该数组的 每一项值,第二个参数为下标;
⑨ map():数组映射,使用方式与foreash()使用方式相同。不同的是,map可以有返回值,表示将原数组的每个值
....................简单介绍几个常用的,如有遗漏请见谅。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script> var arr = new Array(1,2,3,4); delete arr[1]; arr.pop(); arr.shift(); arr.unshift(); arr.unshift(); var str = arr.join("-"); var arr1 =arr.concat(["hah","heh","heihei"]); arr.reverse(); arr.sort(function(a,b){ if(a>b){ return 1; }else if(a<b){ return -1; }else{ return 0; } return a-b;//升序排列 }); var index = arr.indexOf(6,2); arr.forEach(function(item,index){ console.log(item); }); var arr1 = arr.map(function(item,index){ console.log(item); return item - 1 ; }); </script>
2、创建一个新方法
原型是JavaScript全局构造函数。它可以构建新Javascript对象的属性和方法。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p id="demo">单击按钮创建一个数组,调用 ucase()方法, 并显示结果。</p> <button onclick="myFunction()">点我</button> <script> Array.prototype.myUcase=function(){ for (i=0;i<this.length;i++){ this[i]=this[i].toUpperCase(); } } function myFunction(){ var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.myUcase(); var x=document.getElementById("demo"); x.innerHTML=fruits; } </script> </body> </html>
三、结束语
由于时间关系,内容可能不够完整,还有许多重点的干货没能及时整理,希望各位见谅,一定抽出时间补充完整。