javascript（转）

最新推荐文章于 2023-03-04 15:12:02 发布

马马超

最新推荐文章于 2023-03-04 15:12:02 发布

阅读量243

点赞数

分类专栏：页面文章标签： JS

页面专栏收录该内容

8 篇文章 2 订阅

订阅专栏

javascript

一、概述

1、介绍

1）关于script

javascript是嵌入HTML中在浏览器中的脚本语言，具有与java和c语言类似的语法。

2）特点

javascript可以使用任何文本编辑工具编写，由浏览器内置的javascript引擎执行代码。

适宜：

客户端数据计算
客户端表单合法性验证
浏览器事件的触发
网页特殊显示效果制作
服务器的异步数据提交

2、使用

1）事件定义式

直接在html标签的事件属性中嵌入javascript代码。

<input type="button" onclick="alert('Hello')"/>

2）标签嵌入式

在html文件中嵌入<script>标签，在标签中放置javascript代码。

<script>
    alert("Hello");
</script>

3）文件调用式

将javascript代码写入一个单独的js文件，然后在html页面进行引用。
hello.js

alert("Hello");

<script type="text/javascript" src="hello.js"></script>

二、语法

1、数据类型

1）基本类型

String：字符串
Number：数字
Boolean：布尔

Array：数组

var a=new Array();
a[0]="a";
a[1]="b";
或
var a=new Array("a","b");
或
var a=["a","b"];

2）特殊类型

undefined：使用var声明变量，但是未初始化。
null：表示一个空对象的指针。
NaN：指示某个数不是数字，即非数值（Not a Number），表示本来要返回数值的操作数为返回数值的情况，这样就不会抛出错误了。

Number("a");//NaN
document.write(0/0);//NaN
document.write(1/0);//Infinity
document.write(1/0*0);//NaN

3）object

用户自己定义对象，成为一种类型，后面关于js对象部分再进行详解。

2、运算符

1）算数运算符

一元运算符

+、-、*、/、%

二元运算符

++、--
+=、-=、*=、/=、%=

三元运算符

布尔表达式?值1:值2

计算布尔表达式的值，如果为true，整个表达式的值为值1；如果为false，整个表达式的值为值2。

2）关系运算符

>、<、==、>=、<=、!=

3）逻辑运算符

&&、||、!

4）位运算符

（1）位运算

&、|、~、^

（2）位移

<<、>>、>>>（无符号右移）

5）对象运算符

in：判断左侧运算数是否为右侧运算数的成员
instanceof：判断对象实例是否属于某个类或构造函数
new：根据构造函数创建一个新的对象，并初始化该对象
delete：删除指定对象的属性，数组元素或变量

3、变量

1）命名

变量是存储信息的容器，我们可以把变量看作是一个盒子，用变量名来区分。

遵循一般命名规则：第一位使用字母、下划线、或美元符()，后面可以使用字母、数字、下划线、或美元符()，不能使用JavaScript关键词或保留字。（区分大小写）。

2）声明

使用var关键字进行变量声明。

var a;

3）类型

根据javascript的数据类型进行赋值，来确定类型。

4）作用域

类型	位置	访问权限
全局变量	在函数体外定义的变量	任何地方都可以访问
局部变量	在函数内部定义的变量	只能在当前函数中访问

4、类型转换

1）隐式转换

javascript属于松散类型的程序语言，变量在声明的时候不需要指定数据类型，而在赋值时会自动确定类型。有些不同类型数据在计算过程中会自动进行转换：

Number+String->String
Number+Boolean->Boolean值转换为数值0或1
String+Boolean->Boolean值转换为字符串true后false
Boolean+Boolean->Boolean值转换为数值0或1

2）转换函数

toString()：所有类型都可以转换为string类型。
parseInt()：强制转换为整数。
parseFloat()：强制转换为浮点数。
typeof()：查询当前数据的类型。

typeof('a'+3)

isNaN()：判断当前数据是否为NaN（非数值）。

isNaN(10);//false
isNaN("10");//false
isNaN("a10");//true
isNaN("");//false
isNaN(parseInt(""));//true

5、流程

1）选择

if(){

}else{

}

switch

switch(){
    case v1:
        ...
        break;
    case v2:
        ...
        break;
    default:
        ...
}

2）循环

for(){

}

for-in：遍历对象属性。

for(... in ...){

}

while

while(){

}

do-while

do{

}while()

3）跳转

return：退出函数。
break：退出循环或switch。
continue：退出当前循环，判断是否进行下一次循环。
js标签：通过使用js标签可以控制break和continue跳出的位置。

var num=0;
outer:
for(var i=0;i<10;i++){
    for(var j=0;j<10;j++){
        if(i==5&&j==5){
            break outer;
        }
        num++;
    }
}

没有使用js标签时，num值应该为95，但是使用标签后num值为55。

4）异常

throw：主动抛出异常。
try-catch-finally：对相应的代码进行异常捕获和后期处理。

function fun() {
    try {
        throw "throw";
    } catch (err) {
        alert("err:" + err+"\nerr.message:"+err.message);
    } finally {
        alert("finally");
    }
}

6、函数

1）定义

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

（1）静态函数

function fun(){

}

（2）匿名函数

var fun=function(){

}

（3）动态函数

var fun=new Function("","");

第一个参数是形参，第二个参数是函数体。

2）调用

（1）js

直接在js代码中调用。

fun();

（2）href

在a标签的href属性中调用。

<a href="javascript:fun()">函数</a>

（3）事件

在标签的事件属性中调用。

<button id="button" onclick="fun()">函数</button>

三、对象

1、自定义对象

1）创建

（1）直接创建

person=new Object();
person.name="wenxue";
person.age="22";

或

person={name:"wenxue",age:22};

（2）构造器创建

function person(name,age){
    this.name=name;
    this.age=age;
}

var father=new person("wenxue",22);

2）属性

对对象属性的存取，有两种方式：
- .的方式

person.name

[]的方式

person["name"]

第一种方式是直接存取属性值，第二种方式会进行表达式运行，理论上第一种的执行效率高于第二种。

3）方法

为对象添加方法，在构造器内部定义。

function person(name,age){
    this.name=name;
    this.age=age;

    function changeName(name){
        this.name=name;
    }
}

4）遍历

使用for-in语句遍历对象的属性。

var txt="";
for(x in person){
    txt+=person[x];
}

2、String

1）查找

（1）字符

charAt()：返回指定索引位置的字符。

"name".charAt(1);//a

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

"name".charCodeAt(1);//97

fromCharCode()：返回指定Unicode值的字符串。

String.fromCharCode(110,97,109,101);//name

（2）位置

indexOf()：返回指定子串在字符串中的位置，从前往后查找，不存在则为-1。

"name".indexOf("a");//1

lastIndexOf()：返回指定子串在字符串中的位置，从后往前找，不存在则为-1。

"namename".lastIndexOf("a");//5

（3）匹配

search()：查找指定子串在字符串中的位置，或查找与正则表达式匹配的子字符串的位置。

"name".search("a");//1

replace()：用一个新串替换字符串中指定子串，或退还字符串中与正则表达式匹配的子串。

"name".replace("a",'A');//nAme

split()：把一个字符串分割成字符串数组。

"name".split("a");//n,me

match()：检测字符串中是否包含子串（是，则返回子串；否则，返回null），或找到一个或多个正则表达式的匹配（返回匹配的子串）。

2）操作

（1）拼接

concat()：连接两个或多个字符串。

"name".concat("age");//nameage

+：更简洁。

"name"+"age";//nameage

（2）截取

slice()：提取字符串指定索引start（包括）与end（不包括）之间的字符。接收负参数。

"name".slice(1,2);//a

substring()：提取字符串指定索引start（包括）与end（不包括）之间的字符。不接受负参数。
substr()：提取字符串指定索引start开始的指定数目的字符。

"name".substr(1,2);//am

（3）空格处理

trim()：取出前置和后置空格。

" name age ".trim();//name age//

trimLeft()：清除前置空格。
trimRight()：清除后置空格。

（4）比较

localeCompare()：使用字符Unicode编码比较字符串，大于返回1；等于返回0；小于返回-1。

"name".localeCompare("age");//1
"name".localeCompare("name");//0
"name".localeCompare("opq");//-1

3）编码

（1）常规字符串

字符串常规编码与解码：

escape()：编码。

escape("name文");//name%u6587

unescape()：解码。

unescape("name%u6587");//name文

（2）URI字符串

对URI字符串进行编码和解码：

encodeURI()：URI编码。

encodeURI("http://www.baidu.com?name=文");//http://www.baidu.com?name=%E6%96%87

decodeURI()：URI解码。

decodeURI("http://www.baidu.com?name=%E6%96%87");//http://www.baidu.com?name=文

（3）URL组件

支队URI的组成部分进行个别编码，而不用对整个URI进行编码。

encodeURIComponent()：URI组件编码。
decodeURIComponent()：URI组件解码。

4）转换

toUpperCase()：把字符串转为大写
toLocaleUpperCase()：把字符串转为大写，只有少数几种语言有特别，它通常与toUpperCase()一样。
toLowerCase()：把字符串转为小写。
toLocaleLowerCase()：把字符串转为小写。

3、Array

1）基本操作

（1）创建

空数组

var a=new Array();

指定长度数组

var a=new Array(size);

指定元素数组

var a=new Array(1,2,3);

单维数组

var a=[1,2,3];

多维数组

var a=new Array([1,2,3],[4,5,6],[7,8,9]);

（2）存取

单维数组

a[1];//2

多维数组：先外层，后内层。

a[2][1];//8

2）属性

length：获取数组长度。
prototype：应用数组对象的构造函数。
construction：通过添加属性和方法扩展数组定义。

3）基本操作

（1）添加

直接通过对数组指定索引元素进行赋值即可。

a[3]=4;

（2）删除

delete a[3];

（3）遍历

for(var i in a){

}

4）ECMAScript3方法

（1）添加

push()：在数组末尾添加一个或多个元素，并返回新的长度。
unshift()：在数组头部添加一个或多个元素，并返回新的长度。
concat()：连接两个或更多数组，并返回结果。

（2）删除

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

（3）子数组

splice()：删除元素，并向数组添加新的元素。
slice()：从某个已有的数组中返回选定的元素。

（4）排序

reverse()：颠倒数组中的元素顺序。
sort()：对数组的元素进行排序。

（5）转换

toString()：把数组转换为字符串，并返回结果。
toLocaleString()：把数组转换为本地字符串，并返回结果。
join()：把数组的所有元素放入一个字符串，元素通过指定的分隔符进行分隔。

5）ECMAScript5方法

（1）位置

indexOf()：查找元素的索引，从数组的起始位置开始查找。
lastIndexOf()：查找元素的索引，从数组的结束位置开始查找。

（2）迭代

every(): 对数组中的每一项运行给定的函数，如果该函数对每一项都返回true，则结果返回true。

var every=a.every(function(item){

});

filter(): 对数组中的每一项运行给定函数，返回该函数会返回true的项组成的数组。

var filter=a.filter(function(item){

});

forEach(): 对数组中的每一项运行给定函数，这个方法没有返回值。

a.forEach(function(item){

});

map(): 对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。

var map=a.map(function(item){

});

some(): 对数组中的每一项运行给定函数，如果该函数任意一项返回true，则返回true。

var some=a.some(function(item){

});

（3）缩小

a、reduce()：接收一个函数作为累加器（accumulator），数组中的每个值（从左到右）开始缩减，最终为一个值。reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素。从数组起始位开始遍历。

arr.reduce(callback,[initialValue]);

callback：执行数组中每个值的函数，包含四个参数。
- previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））。
- currentValue （数组中当前被处理的元素）
- index （当前元素在数组中的索引）
- array （调用 reduce 的数组）
initialValue （作为第一次调用 callback 的第一个参数。）

b、reduceRight()：从数组末尾开始遍历。

4、Math

1）常数

Math.E：常数e。
Math.PI：圆周率。
Math.SQRT2：返回2的平方根。
Math.SQRT1_2：返回2的平方根的倒数。
Math.LN2：返回2的自然对数。
Math.LN10：返回10的自然对数。
Math.LOG2E：以2为底的e的对数。
Math.LOG10E：以10为底的e的对数。

2）比较

（1）取整

Math.floor()：对数进行向下取整。
Math.ceil()：对数进行向上取整。
Math.round()：对数进行四舍五入。

Math.floor(2.8);//2
Math.ceil(2.3);//3
Math.round(2.5);//3

（2）最大最小值

Math.max()：得到最大值。
Math.min()：得到最小值。

（3）绝对值

Math.abs()：返回数的绝对值。

3）计算

（1）随机数

Math.random()：返回0-1之间的随机数。

（2）平方根

Math.sqrt()：返回数的平方根。

（3）对数

Math.log()：返回数的自然对数，底数为e。

Math.log(m)/Math.log(n);//以n为底m的对数

（4）幂方

Math.pow(x,y)：返回x的y次幂。
Math.exp(x)；返回e的x次幂。

（5）三角函数

Math.sin()：返回角的正弦。
Math.cos()：返回角的余弦。
Math.tan()：返回角的正切。
Math.asin()：返回角的反正弦。
Math.acos()：返回角的反余弦。
Math.atan()：返回角的反正切。
Math.atan2(y,x)：返回从x轴到点(x,y)之间的角度。

5、Date

Date()：返回当日的日期和时间，可以直接使用，其它都要使用Date的对象实例进行调用。

document.write(Date());

1）获取日期

getFullYear()：得到年份。
getMonth()：得到月份。
getDate()：得到当日是在一月中的某天（1-31）。
getDay()：得到当日是在一周中的某天（0-6）。

2）获取时间

getTime()：返回1970年1月1日至今的毫秒数。
getHours()：返回当前的小时（0-23）。
getMinutes()：返回当前的分钟（0-59）。
getSecond()：返回当前的秒数（0-59）。
getMillseconds()：返回当前的毫秒数（0-999）。

3）转换字符串

toString()：把Date对象转为字符串。
toTimeString()：把Date对象的时间部分转为字符串。
toDateString()：把Date对象的日期部分转为字符串。
toLocaleString()：根据本地格式，把Date对象转为字符串。
toLocaleTimeString()：根据本地格式，把Date对象的时间部分转为字符串。
toLocaleDateString()：根据本地格式，把Date对象的日期部分转为字符串。

6、RegExp

1）定义

RegExp对象用于规定在文本中检索的内容。

var reg=new RegExp(表达式,[模式修饰符]);//构造形式

或

var reg=/表达式/模式修饰符;//简写方式

2）表达式

（1）单个字符与数字

表达式	说明
.	匹配出换行符以外的所有字符
[a-z0-9]	匹配方括号中的任意字符
[^a-z0-9]	匹配不在方括号中的任意字符
\d	匹配数字
\D	匹配非数字
\w	匹配字母
\W	匹配非字母

（2）空白字符

表达式	说明
\0	匹配null字符
\b	匹配空格字符
\f	匹配进制符
\n	匹配换行符
\r	匹配回车符
\s	匹配空白字符、空格、制表符或换行符
\S	匹配非空白字符
\t	匹配制表符

（3）定位符

表达式	说明
^	行首匹配
$	行尾匹配
\A	只匹配字符串的开始处
\b	匹配单词边界，词在[]内无效
\B	匹配非单词边界
\G	匹配当前搜索的开始位置
\z	只匹配字符串结束处
\Z	匹配字符串结尾处或行尾

（4）限定符

表达式	说明
x?	匹配0个或1个x
x*	匹配0个或任意个x
x+	匹配至少1个x
x{m,n}	匹配最少m个，最多n个x

（5）分组

表达式	说明
(?:x)	匹配x但不记录匹配结果
x(?=y)	当x后接y时匹配x
x(?!y)	当x后不是y时匹配x

（6）引用

表达式	说明
`\1...\9 $1...$9`	返回九个在模式匹配期间找到的、最近保存的字符

（7）或模式

表达式	说明
`x	y

3）模式修饰符

g：全局模式，应用于所有字符。
i：区分大小写模式。
m：多行匹配模式。

4）属性

属性	含义
global	检测是否设置g标记
ignoreCase	检测是否设置i标记
multiline	检测是否设置m标记
lastIndex	返回被查找字符中下一次成功匹配的开始位置
source	返回正则表达式的字符串表示

5）方法

（1）实例方法

exec()：在字符串中执行匹配检索，返回结果数组。
test()：在字符串中测试模式匹配，返回true或false。

（2）字符串方法

match()：找到一个后多个正则表达式的匹配。
replace()：替换与正则表达式匹配的子串。
search()：检索与正则表达式相匹配的值。
split()：把字符串分割为字符串数组。

四、BOM

BOM（Browser Object Model）：浏览器对象模型，使javascript有能力与浏览器对话。
这里写图片描述

1、window

所有浏览器都支持，它表示浏览器窗口，所有JavaScript全局对象、函数以及变量均自动成为window对象的成员。全局变量是window对象的属性，全局函数是window对象的方法，甚至HTML DOM的document也是window对象的属性之一。对于window对象的属性和方法，都可以直接访问，无需加上window对象的标识符。

1）属性

（1）状态栏

defaultStatus：设置或返回窗口状态栏中的默认文本。
status：临时改变浏览器状态栏的显示。

（2）窗口位置

对于IE：

screenLeft：声明窗口左上角的x坐标。
screenTop：声明窗口左上角的y坐标。
document.documentElement或document.body的clientWidth和clientHeight属性：定义窗口的文档显示区的宽度和高度。

对于!IE：

screenX：声明窗口左上角的x坐标。
screenY：声明窗口左上角的y坐标。
innerWidth：返回窗口的文档显示区的宽度。
innerHeight：返回窗口的文档显示区的高度。
outerWidth：返回窗口的外部宽度。
outerHeight：返回窗口的外部高度。

（3）其它属性

opener：可返回对创建该窗口的window对象的引用。
closed：返回窗口是否关闭的布尔值。
name：设置或返回窗口的名称。
self：可返回对窗口自身的引用。

2）窗口

（1）open()

open()：打开一个窗口，并在窗口中装载指定URL地址的网页。

window.open(URL,name,features,replace);

参数	描述
URL	一个可选的字符串，声明了要在新窗口中显示的文档的 URL。如果省略了这个参数，或者它的值是空字符串，那么新窗口就不会显示任何文档。
name	一个可选的字符串，该字符串是一个由逗号分隔的特征列表，其中包括数字、字母和下划线，该字符声明了新窗口的名称。这个名称可以用作标记`<a>` 和 `<form>` 的属性 target 的值。如果该参数指定了一个已经存在的窗口，那么 open() 方法就不再创建一个新窗口，而只是返回对指定窗口的引用。在这种情况下，features 将被忽略。
features	一个可选的字符串，声明了新窗口要显示的标准浏览器的特征。如果省略该参数，新窗口将具有所有标准特征。在窗口特征这个表格中，我们对该字符串的格式进行了详细的说明。
replace	一个可选的布尔值。规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。支持下面的值：true - URL 替换浏览历史中的当前条目。false - URL 在浏览历史中创建新的条目。

为了使代码清楚，所以不直接使用open()，而使用window.open()。

窗口特征（Window Features）

特征	含义
`channelmode=yes	no
`directories=yes	no
`fullscreen=yes	no
`height=pixels`	窗口文档显示区的高度。以像素计。
`left=pixels`	窗口的 x 坐标。以像素计。
`location=yes	no
`menubar=yes	no
`resizable=yes	no
`scrollbars=yes	no
`status=yes	no
`titlebar=yes	no
`toolbar=yes	no
`top=pixels`	窗口的 y 坐标。
`width=pixels`	窗口的文档显示区的宽度。以像素计。

（2）close()

close()：用于关闭一个浏览器窗口，只能关闭由js代码打开的窗口，使用开启窗口返回的变量来调用关闭方法。

window.close();

（3）控制

moveBy()：相对窗口当前坐标把它移动指定像素。
moveTo()：把窗口移到指定坐标。
resizeBy()：相对窗口当前大小来调整窗口大小。
resizeTo()：把窗口的大小调到指定宽度和高度。
scrollBy()：相对当前位置滚动文档位置。
scrollTo()：把内容滚动到指定坐标。
blur()：把键盘焦点从顶层窗口移开。
focus()：把键盘焦点给与一个窗口。

3）对话框

（1）alert()

alert()：显示一个带有指定消息和确定按钮的对话框。

alert(message);

message：对话框中的纯文本，而非HTML文本。

（2）confirm()

confirm()：显示一个带有指定消息和确定及取消按钮的对话框。

confirm(message);

message：对话框中的纯文本，而非HTML文本。
如果用户点击确定按钮返回true，否则返回false。

（3）prompt()

prompt()：显示可提示用户进行输入的对话框。

prompt(text,defaultText);

text：可选，要在对话框中显示的纯文本。
defaultText：可选，输入框中的默认文本。

4）定时器

（1）执行一次

setTimeout()：用于控制在指定毫秒数后调用函数或计算表达式一次。

var t=setTimeout(code,millisec);

clearTimeout()：用于取消setTimeout()设置的定时器。

clearTimeout(t);

使用：

var timer=setTimeout(function(){
    //code
},100);
clearTimeout(timer);

var timer=setTimeout(fun,100);
clearTimeout(timer);
function fun(){
    //code
}

（3）循环执行

setInterval()：按指定周期循环执行函数或计算表达式。
clearInterval()：取消setInterval()设置的定时器。

var t=setInterval(code,millisec);
clearInterval(t);

使用：

var timer=setInterval(function(){
    //code
},100);
clearInterval(timer);

var timer=setInterval(fun,100);
clearInterval(timer);
function fun(){
    //code
}

2、screen

screen对象包含有关用户屏幕的信息，编写时一般可以不使用window这个前缀，属性：

availWidth：显示屏幕的可用宽度。
availHeight：显示屏幕的可用高度。
width：返回屏幕的像素宽度。
height：返回屏幕的像素高度。
colorDepth：返回屏幕颜色的位数。

3、location

location对象用于获取当前页面的地址（URL），并把浏览器重定向到新的页面。可不使用window前缀。

1）属性

host：设置或返回主机名和当前URL的端口号。
hostname：设置或返回当前URL的主机名。
href：设置或返回完整的URL。
pathname：设置或返回当前URL的路径部分。
port：设置或返回当前URL的端口号。
protocol：设置或返回当前URL的协议。
search：设置或返回从问好开始的URL。
hash：设置或返回从#开始的URL。

2）方法

assign()：加载新的文档。
reload()：重新加载当前页面。
replace()：用新的文档替换当前文档。

4、history

history对象包含浏览器的历史，可不使用window前缀，方法：

back()：与浏览器点击后退按钮相同，加载历史列表中的前一个URL。
forward()：与在浏览器中点击按钮向前相同，加载历史列表中的下一个URL。
go()：返回某个具体页面。

5、navigator

Navigator对象包含有关浏览器的信息。属性有：

appCodeName：返回浏览器的代码名。
appName：返回浏览器的名称。
appVersion：返回浏览器的平台和版本信息。
cookieEnabled：返回指明浏览器中是否启用cookie的布尔值。
platform：返回运行浏览器的操作系统平台。
userAgent：返回由客户机发送服务器的user-agent头部的值。

五、DOM

文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。
将HTML分解为DOM节点层次图：
这里写图片描述

1、document

document：每个载入浏览器的HTML文档都会成为document对象，document对象可以从脚本中对HTML页面中的所有元素进行访问。

1）属性

属性	描述
cookie	设置或返回与当前文档有关的cookie。
domain	返回当前文档的域名。
referrer	返回载入当前文档的URL。
title	返回当前文档的标题。
URL	返回当前文档的URL。

2）方法

方法	描述
open()	打开一个新的文档，并擦除旧文档内容。
colse()	关闭文档输出流。
write()	向当前文档追加写入文本。
writeln()	与write()相同，会追加换行。

3）集合

2、获取节点

通过document对象得到需要使用的那个节点对象，能够直接得到的便通过查找方法得到，不能直接得到的先进行查找方法得到父元素对象，然后使用选择器进行选择。

1）查找

通过document对象获取节点对象，有以下三种方式：

通过id

document.getElementById();

通过name

document.getElementByName();

通过tag

document.getElementByTagName();

2）选择

子节点

属性	功能
firstChild	获取元素的首个子节点。
lastChild	获取元素的最后一个子节点。
childNodes	获取元素子节点列表。

- 兄弟节点

属性	功能
previousSibling	获取已知节点的前一个节点。
nextSibling	获取已知节点的后一个节点。

- 父节点

属性	功能
parentNode	获取已知节点的父节点。

3、节点操作

1）创建节点

创建元素节点

document.createElement(元素标签);

创建属性节点

document.createAttribute(元素属性);

创建文本节点

document.createTextNode(文本内容);

2）插入节点

方法	功能
appendChild()	向节点的子节点列表末尾添加新的子节点。
insertBefore()	向已知节点的指定子节点之前插入节点。

3）替换节点

replaceChild()：用一个新的节点替换节点的某个子节点。

var myList=document.getElementById("myList");
myList.replaceChild(newnode,oldnode);

4）复制节点

cloneNode()：创建指定节点的副本。

mylist.cloneNode(true);

参数：

true：复制当前节点及其子节点。
false：仅复制当前节点。

5）删除节点

removeChild()：从已知节点中移除指定子节点。

myList.removeChild(myList.childNodes[0]);

4、节点属性

1）元素属性

将HTML标签元素和元素属性样式都对象化，元素成为节点对象，元素属性成为节点对象的属性，通过对节点属性操作可以应用到元素属性。

style：控制元素的style属性来。

node.style.color

基本属性表（property）：
这里写图片描述

className：控制元素class属性，可以用来添加或移除样式类。

myList.className="listClass";

href：控制元素的href属性。

等等。。。

2）元素内容

通过节点属性可以操作元素的内容，有两种：

innerText：设置或获取对象起始和结束标签内的文本。
innerHTML：设置或获取位于对象起始和结束标签内的HTML。

3）属性操作

通过节点的方法来操作元素的属性。

获取属性

node.getAttribute("href");

设置属性

node.setAttribute("href","");

删除属性

node.removeAttribute("class");

六、事件

事件：指页面元素状态改变，用户在操作鼠标或键盘时出发的动作。

1、事件类型

1）一般事件

事件	描述
onclick	鼠标点击时触发此事件
ondblclick	鼠标双击时触发此事件
onmousedown	按下鼠标时触发此事件
onmouseup	鼠标按下后松开鼠标时触发此事件
onmouseover	当鼠标移动到某对象范围的上方时触发此事件
onmousemove	鼠标移动时触发此事件
onmouseout	当鼠标离开某对象范围时触发此事件
onkeypress	当键盘上的某个键被按下并且释放时触发此事件.
onkeydown	当键盘上某个按键被按下时触发此事件
onkeyup	当键盘上某个按键被按放开时触发此事件

2）页面相关事件

事件	描述
onabort	图片在下载时被用户中断
onbeforeunload	当前页面的内容将要被改变时触发此事件
onerror	出现错误时触发此事件
onload	页面内容完成时触发此事件
onmove	浏览器的窗口被移动时触发此事件
onresize	当浏览器的窗口大小被改变时触发此事件
onscroll	浏览器的滚动条位置发生变化时触发此事件
onstop	浏览器的停止按钮被按下时触发此事件或者正在下载的文件被中断
onunload	当前页面将被改变时触发此事件

3）表单相关事件

事件	描述
onblur	当前元素失去焦点时触发此事件
onchange	当前元素失去焦点并且元素的内容发生改变而触发此事件
onfocus	当某个元素获得焦点时触发此事件
onreset	当表单中RESET的属性被激发时触发此事件
onsubmit	N2 一个表单被递交时触发此事件

4）滚动字幕事件

事件	描述
onbounce	在Marquee内的内容移动至Marquee显示范围之外时触发此事件
onfinish	当Marquee元素完成需要显示的内容后触发此事件
onstart	当Marquee元素开始显示内容时触发此事件

5）编辑事件

事件	描述
onbeforecopy	当页面当前的被选择内容将要复制到浏览者系统的剪贴板前触发此事件
onbeforecut	当页面中的一部分或者全部的内容将被移离当前页面[剪贴]并移动到浏览者的系统剪贴板时触发此事件
onbeforeeditfocus	当前元素将要进入编辑状态
onbeforepaste	内容将要从浏览者的系统剪贴板传送[粘贴]到页面中时触发此事件
onbeforeupdate	当浏览者粘贴系统剪贴板中的内容时通知目标对象
oncontextmenu	当浏览者按下鼠标右键出现菜单时或者通过键盘的按键触发页面菜单时触发的事件
oncopy	当页面当前的被选择内容被复制后触发此事件
oncut	当页面当前的被选择内容被剪切时触发此事件
ondrag	当某个对象被拖动时触发此事件 [活动事件]
ondragdrop	一个外部对象被鼠标拖进当前窗口或者帧
ondragend	当鼠标拖动结束时触发此事件，即鼠标的按钮被释放了
ondragenter	当对象被鼠标拖动的对象进入其容器范围内时触发此事件
ondragleave	当对象被鼠标拖动的对象离开其容器范围内时触发此事件
ondragover	当某被拖动的对象在另一对象容器范围内拖动时触发此事件
ondragstart	当某对象将被拖动时触发此事件
ondrop	在一个拖动过程中，释放鼠标键时触发此事件
onlosecapture	当元素失去鼠标移动所形成的选择焦点时触发此事件
onpaste	当内容被粘贴时触发此事件
onselect	当文本内容被选择时的事件
onselectstart	当文本内容选择将开始发生时触发的事件

6）数据绑定事件

事件	描述
onafterupdate	当数据完成由数据源到对象的传送时触发此事件
oncellchange	当数据来源发生变化时
ondataavailable	当数据接收完成时触发事件
ondatasetchanged	数据在数据源发生变化时触发的事件
ondatasetcomplete	当来子数据源的全部有效数据读取完毕时触发此事件
onerrorupdate	当使用onBeforeUpdate事件触发取消了数据传送时，代替onAfterUpdate事件
onrowenter	当前数据源的数据发生变化并且有新的有效数据时触发的事件
onrowexit	当前数据源的数据将要发生变化时触发的事件
onrowsdelete	当前数据记录将被删除时触发此事件
onrowsinserted	当前数据源将要插入新数据记录时触发此事件

7）外部事件

事件	描述
onafterprint	当文档被打印后触发此事件
onbeforeprint	当文档即将打印时触发此事件
onfilterchange	当某个对象的滤镜效果发生变化时触发的事件
onhelp	当浏览者按下F1或者浏览器的帮助选择时触发此事件
onpropertychange	当对象的属性之一发生变化时触发此事件
onreadystatechange	当对象的初始化属性值发生变化时触发此事件

2、事件绑定

1）元素属性

在HTML元素中添加事件属性，如：

<button id="button" onclick="alert('test')">按钮</button>

2）节点属性

在js中为节点事件属性设置处理函数，如：

document.getElementById('button').onclick=fun;

function fun(){
    alert("test");
}

或

document.getElementById('button').onclick=function(){
    alert("test");
}

使用节点属性反射光hi对节点进行事件绑定，如果放在<head>中的<script>的标签中，必须在DOM加载完成才能绑定，需要放在onload函数中，即：

window.onload=function(){
    document.getElementById('button').onclick=function(){
        alert("test");
    }
}

3）节点方法

使用节点的事件监听方法对节点进行监听，可以在节点发生事件时，调用相关函数进行处理。

document.getElementById('button').addEventListener("click",fun);

此种方式如果放在<head>中的<script>的标签中，必须在DOM加载完成后绑定，需要放在onload函数中。已经有之前的两种方式供我们使用，为什么还需要此种方式？因为前两种方式绑定一个事件多个方法时，只会执行一个方法。第一种方式会执行第一个方法，第二种方式后面的方法会覆盖前面的，只会执行最后一个方法。而此种方式为同一个事件绑定多个方法时，都会执行，且由前到后依次执行。

4）取消绑定

可以对事件绑定，当然也可以取消绑定，有以下两种方式：

<button id="button" onclick="return false;">按钮</button>

document.getElementById("button").onclick=function(){
    return false;
}

3、event

任何事件触发后都会产生一个event对象，event对象记录会记录事件发生时的鼠标位置、键盘按键状态和触发对象等信息。

1）获取event

HTML事件属性中，直接使用。

<button id="button" onclick="alert(event.clientX)">按钮</button>

js代码中，通过传入的参数调用event。

<button id="button" onclick="fun(event)">按钮</button>

function fun(event){
    alert(event.clientX);
}

2）event属性

（1）鼠标键盘属性

属性	描述
altKey	返回当事件被触发时，”ALT” 是否被按下。
button	返回当事件被触发时，哪个鼠标按钮被点击。
clientX	返回当事件被触发时，鼠标指针的水平坐标。
clientY	返回当事件被触发时，鼠标指针的垂直坐标。
ctrlKey	返回当事件被触发时，”CTRL” 键是否被按下。
metaKey	返回当事件被触发时，”meta” 键是否被按下。
relatedTarget	返回与事件的目标节点相关的节点。
screenX	返回当某个事件被触发时，鼠标指针的水平坐标。
screenY	返回当某个事件被触发时，鼠标指针的垂直坐标。
shiftKey	返回当事件被触发时，”SHIFT” 键是否被按下。

（2）标准event属性

属性	描述
bubbles	返回布尔值，指示事件是否是起泡事件类型。
cancelable	返回布尔值，指示事件是否可拥可取消的默认动作。
currentTarget	返回其事件监听器触发该事件的元素。
eventPhase	返回事件传播的当前阶段。
target	返回触发此事件的元素（事件的目标节点）。
timeStamp	返回事件生成的日期和时间。
type	返回当前 Event 对象表示的事件的名称。

3）事件处理机制

节点：document->form->input
事件处理顺序：input->form->document

马马超

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript（转）

javascript一、概述1、介绍1）关于scriptjavascript是嵌入HTML中在浏览器中的脚本语言，具有与java和c语言类似的语法。2）特点javascript可以使用任何文本编辑工具编写，由浏览器内置的javascript引擎执行代码。适宜：客户端数据计算客户端表单合法性验证浏览器事件的触发网页特殊显示效果制作服务器的异步数据提交2、使用1）事件定义式直接在html标签的事件属性...
复制链接

扫一扫

专栏目录