web前端工程师----JavaScript语言

最新推荐文章于 2024-05-11 08:43:40 发布

playfreely

最新推荐文章于 2024-05-11 08:43:40 发布

阅读量4k

点赞数 7

本文链接：https://blog.csdn.net/playfreely/article/details/77446878

版权

JS基础

一、JavaScript入门篇

第1章请做好准备

1-1 为什么学习JavaScript

一、你知道，为什么JavaScript非常值得我们学习吗？

1.所有主流浏览器都支持JavaScript

2.目前，全世界大部分网页都使用JavaScript

3.它可以让网页呈现各种动态效果

二、易学性

1-2 新朋友你在哪里（如何插入JS）

JavaScript代码写在<script></script>之间

...

</script>

1-3 我也可以独立（引用JS外部文件）

我们可以把HTML文件和JS代码分开，并单独创建一个JavaScript文件（简称JS文件），其文件后缀通常为.js，然后将JS代码直接写在JS文件中

注意：在JS文件中，不需要<script>标签，直接编写JavaScript代码就可以了

JS文件不能直接运行，需嵌入到HTML文件中执行，我们需要在HTML中添加如下代码，就可以将JS文件嵌入到HTML文件中<script src="script.js"></script>

1-4 找到你的位置（JS在页面中的位置）

javascript作为一种脚本语言可以放在html页面中任何位置，一般放在网页的head或者body部分，但是浏览器解析html时是按先后顺序的，前面的script就先被执行

1-5 JavaScript----认识语句和符号

每一句JavaScript代码格式：语句;

虽然分号";'也可以不写，但我们需要养成编程的好习惯，记得在语句末尾写上分号

1-6 JavaScript----注释很重要

单行注释，在注释内容前加符号"//”。

多行注释以“/*“开始””,以“*/”结束。

1-7 JavaScript----什么是变量

1.定义变量使用关键字var，语法如下：

var 变量名

2.变量名可以任意取名，但要遵循命名规则：

a.变量必须使用字母、下划线（_）或者美元符（$）开始

b.然后使用任意多个英文字母、数字、下划线（_）或者美元符（$）组成

c.不能使用JavaScript关键词与JavaScript保留字

3.变量要先声明再赋值

4.变量可以重复赋值

注意：a.在JS中区分大小写

b.变量虽然也可以不声明，直接使用，但不规范，需要先声明，后使用

1-8 JavaScript判断语句（if...else）

1-9 JavaScript----什么是函数

1.如何定义一个函数呢？基本语法如下：

function 函数名（）

{

函数代码;

}

2.函数调用

第2章请和我互动（常用互动方法）

2-1 JavaScript----输出内容(document.write)

1.document.write()可用于直接向HTML输出流写内容。简单的说就是直接在网页中输出内容

第一种：输出内容用""括起，直接输出”“内的内容

第二种：通过变量，输出内容

第三种：输出多项内容，内容之间用+号连接

第四种：输出HTML标签，并起作用，标签使用“”括起来

<br>换行符 &nbsp空格

2-2 JavaScript----警告（alert消息对话框）

1.语法：alert（字符串或变量）

2.注：a.alert弹出消息对话框（包含一个确定按钮）

b.在点击对话框“确定”按钮前，不能进行任何其它操作

c.消息对话框通常可以用于调试程序

d.alert输出内容，可以是字符串或变量，与doucument.write相似

2-3 JavaScript----确认（confirm 消息对话框）

1.语法：confirm(str);

参数说明：str：在消息对话框中要显示的文本

返回值：Boolean值

2.注：消息对话框是排它的，即用户在点击对话框按钮前，不能进行任何其它操作

2-4 JavaScript----提问（prompt消息对话框）

1.语法：prompt（str1,str2）;

2.参数说明:str1:要显示在消息对话框中的文本，不可修改

str2:文本框中的内容，可以修改、

3.返回值：a.点击确定按钮，文本框中的内容将作为函数返回至

b.点击取消按钮，将返回null

2-5 JavaScript----打开新窗口（window.open）

1.作用：open()方法可以查找一个已经存在或者新建的浏览器窗口

2.语法;window.open（[URL],[窗口名称],[参数字符串]）

3.参数说明:a.URL:可选参数，在窗口中要显示网页的网址或路径。如果省略这个参数，或者它的值是空字符串，那么窗口就不显示任何文档

b.窗口名称：可选参数，被打开窗口的名称

(a)该名称由字母、数字、下划线字符组成

(b)“_top”、”_blank“,"_self"具有特殊意义的名称

_blank:在新窗口显示目标网页

_self:在当前窗口显示目标网页

_top:框架网页中在上部窗口中显示目标网页

(c)相同name的窗口只能创建一个，要想创建多个窗口则name不能相同

(d)name不能包含有空格

c.参数字符串：可选参数，设置窗口参数，各参数用逗号隔开

参数表
参数	值	说明
top	Number	窗口顶部离开屏幕顶部的像素数
left	Number	窗口左端离开屏幕左端的像素数
width	Number	窗帘的宽度
height	Number	窗口的高度
menubar	yes,no	窗口有没有菜单
toolbar	yes,no	窗口有没有工作条
scrollbars	yes,no	窗口有没有滚动条
status	yes,no	窗口有没有状态栏

4.注：运行结果考虑浏览器兼容问题

2-6 JavaScript----关闭窗口（window.close）

1.用法：window.close(); //关闭本窗口

<窗口对象>.close(); //关闭指定的窗口

第3章你也有控制权（DOM操作）

3-1 认识DOM

1.文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM将HTML文档呈现为带有元素、属性和文本的树结构（节点树）

将HTML代码分解为DOM节点层次图

<!DOCTYPE HTML>

<html>

<head>

</head>

<body>

<h2><a href="http://www.imooc.com">javaScript DOM</a></h2>

<p>对HTML元素进行操作，可添加、改变或移除css样式等</p>

<ul>

<li>JavaScript</li>

</ul>

</body>

</html>

2.HTML文档可以说由节点构成的集合，三种常见的DOM节点

a.元素节点:上图中<html>、<body>、<p>等都是元素节点，即标签

b.文本节点:向用户展示的内容，如<li>......</li>中的JavaScript、DOM、CSS等文本

c.属性节点：元素属性，如<a>标签的链接属性href=“http://www.imooc.com”

<a href="http://www.imooc.com">javaScript DOM</a>

3-2 通过ID获取元素

1.语法：document.getElementById("id")

2.结果：null或[object HTMLParagraghElement]

3.注：获取的元素是一个对象，如想对元素进行操作，我们要通过它的属性或方法

3-3 innerHTML属性

1.作用：innerHTML属性用于获取或替换HTML元素的内容

2.语法：Object.innerHTML

3.注意：a.Object是获取的元素对象，如通过document.getElementById("ID")获取的元素

b.注意书写，innerHTML区分大小写

3-4 改变HTML样式

1.语法：Object.style.property=new style;

2.注意：基本属性表(property)

该表只是一小部分css样式属性，其他样式也可以通过该方法设置和修改

3-5 显示和隐藏（display属性）

网页中经常会看到显示和隐藏的效果，可通过display属性来设置

1.语法;Object.style.diaplay=value

2.value取值

3-6 控制类名（className属性）

1.语法：object.className=classname

2.作用：a.获取元素的class属性

b.为网页内的某个元素指定一个css样式来更改该元素的外观

二、JavaScript进阶篇

第1章系好安全带，准备启航

1-1 让你认识JS

javaScript能做什么？

a.增强页面动态效果(如：下拉菜单，图片轮播，信息滚动等)

b.实现页面与用户之间的实时、动态交互（如：用户注册、登录验证等）

1.注意：JS是区分大小写的，如：classname与className是不一样的。同时注意方法、属性、变量等的大小写吆

JS中的字符、符号等一定要在英文状态下输入吆

第2章你要懂的规则（JS基础语法）

2-1 什么是变量

什么是变量？从字面上看，变量是可变的量；从编程角度讲，变量是用于存储某种、某些数值的存储器

2-2 给变量取个名字（变量命名）

1.变量名字可以任意取，只不过取名字要遵循一些规则

a.必须以字母、下划线或美元符号开头，后面可以跟字母、下划线、美元符号和数字

b.变量名区分大小写，如:A和a是两个不同变量

c.不允许使用JavaScript关键字和保留字做变量名

2-3 确定你的存在(变量声明)

1.语法:var 变量名;

2.作用：声明变量，并为"变量"准备位置（即内存）

var可以一次声明多个变量，变量之间用","逗号隔开

3.注意：变量也可以不声明，直接使用，但为了规范，需要先声明，后使用

2-4 多样化的我（变量赋值）

1.语法：a.var 变量名=数值/字符串/布尔值;

b.var 变量名;

变量名=数值/字符串/布尔值;

2-5 表达出你的想法（表达式）

表达式与数学中的定义相似，表达式是指具有一定的值，用操作符把常数和变量连接起来的代数式。一个表达式可以包含常数或变量

例：num（变量）=（赋值）num+1（表达式）

a.串表达式：值为字符串，"I"+"love"+"you" "super"+mychar

b.数值表达式：值为数值，num+5*3 2+2.5

c.布尔表达式：编写布尔值true或false的表达式 2>3 num==5 num<60

2-6 我还有其他用途（+号操作符）

1.操作符：是用于在javascript中指定一定动作的符号

a.算数操作符(+,-,*,/等)

b.比较操作符(<,>,>=,<=等)

c.逻辑操作符(&&,||,！)

2."+"操作符

不只代表加法，还可以连接两个字符串

2-7 自加一，自减一(++和--)

2-8 较量较量（比较操作符）

两个操作数通过比较操作符进行比较，得到值为真（true）和假（false）

2-9 我与你同在（逻辑与操作符）&&

2-10 我或你都可以（逻辑或操作符）||

2-11 是非颠倒（逻辑非操作符）！

2-12 保持先后顺序（操作符优先级）

操作符之间的优先级（高到低）

算术操作符->比较操作符->逻辑操作符->“=”赋值符号

如果同级的运算是按从左到右次序进行，多层括号由里向外

第3章一起组团（数组）

3-1 一起组团（什么是数组）

数组是一个值的集合，每个值都有一个索引号，从0开始，每个索引都有一个相应的值，根据需要添加更多数值

3-2 组团，并给团取个名（如何创建数组）

1.创建数组语法

var myarray=new Array();

var myarray=new Araay(8);

2.注意：创建的新数组是空数组，没有值，如输出，则显示undefined

虽然创建数组shi，指定了长度，但实际上数组都是变长的，也就是说即使指定了长度为8，仍然可以将元素储存在规定长度以外

3-3 谁是团里成员（数组赋值）

我们可以用简单的方法创建上面的数组和赋值：

第一种方法：var myarray=new Array(66,80,90,77,59);//创建数组同时赋值

第二种方法：var myarray=[66,80,90,77,59];//直接输入一个数组（称“字面量”数组）

注：数组存储的数据可以是任何类型（数字、字符、布尔值等）

3-4 团里添加新成员（向数组增加一个新元素）

只需使用下一个未用的索引，任何时刻可以不断向数组增加新元素

3-5 呼叫团里成员（使用数组元素）

要得到一个数组元素的值，只需引用数组变量并提供一个索引

3-6 了解成员数量（数组属性length）

Javascript数组的length属性是可变的

var arr=[98,76,54,56,76]

arr.length=10;

arr[5]=34;

alert(arr.length);//显示数组的长度16

3-7 二维数组

一维数组，我们看成一组盒子，每个盒子只能放一个内容 myarr[]

二维数组，我们看成一组盒子，不过每个盒子里还可以放多个盒子 myarr[][]。二维数组的两个维度的索引值也是从0开始，两个维度的最后一个索引值为长度-1

1.二维数组的定义方法一

var myarr=new Array;//先声明一维

for(var i=0;i<2;i++){ //一维长度为2

myarr[i]=new Array(); //再声明二维

for(var j=0;j<3;j++) //二维长度为3

myarr[i][j]=i+j;//赋值，每个数组元素的值为i+j

}

2.二维数组的定义方法二

var Myarr=[[0,1,2],[1,2,3]]

3.赋值

myarr[0][1]=5;

myarr[0][1]，0表示表的行，1表示表的列

第4章跟着我的节奏走(流程控制语句)

4-1 做判断（if语句）

1.语法:if(条件)

{条件成立时执行代码}

注意：if小写，大写字母(IF)会出错

4-2 二选一(if...else语句)

1.语法：if(条件)

{条件成立时执行的代码}

if(条件)

{条件不成立时执行的代码}

4-3 多重判断(if...else嵌套语句)

1.语法：if(条件1)

{条件1成立时执行的代码}

else if(条件2)

{条件2成立时执行的代码}

......

else if(条件n)

{条件n成立时执行的代码}

else {条件1,2至n不成立时执行的代码}

4-4 多种选择（switch语句）

1.语法：

switch（表达式）

{case值1：执行代码块1 break;

case值2：执行代码块2 break;

......

case值n：执行代码块n break;

default:与case值1，case值2......case值n不同时执行的代码}

2.说明：switch必须赋初始值，值与每个case值匹配。满足执行该case后的所有语句，并用break语句来阻止运行下一个case。如所有case值都不匹配，执行default后的语句

4-5 重复重复（for循环）

1.for语句结构

for(初始化变量;循环条件;循环迭代)

{

循环语句

}

4-6 反反复复（while循环）

1.whiley语句结构

while(判断条件)

{

循环语句

}

4-7 来来回回（do...while循环）

1.do...while语句结构

{

循环语句

}

while(判断条件)

4-8 退出循环break

4-9 继续循环continue

1.语法作用：仅仅跳过本次循环，而整个循环体继续执行

第5章小程序，大作用（函数）

5-1 什么是函数

1.作用：可以写一次代码，然后反复地重用这个代码

5-2 定义函数

function 函数名()

{

函数体;

}

5-3 函数调用（直接写函数名）

第一种情况：在<script>标签内调用

第二种情况：在HTML文件中调用，如通过点击按钮后调用定义好的函数

5-4 有参数的函数

1.function 函数名(参数1,参数2)

{

函数代码

}

5-5 返回值的函数

第6章事件响应，让网页响应

6-1 什么是事件

JavaScript创建动态页面。事件是可以被JavaScript侦测到的行为。网页中的每个元素都可以产生某些可以触发JavaScript函数或程序的事件。

主要事件表

6-2 鼠标单击事件(onclick)

6-3 鼠标经过事件(onmouseover)

6-4 鼠标移开事件(onmouseout)

6-5 光标聚焦事件(onfocus)

6-6 失焦事件(onblur)

6-7 内容选中事件(onselect)

6-8 文本框内容改变事件(onchange)

6-9 加载事件(onload)

加载页面时，触发onload事件，事件写在<body>标签内

6-10 卸载事件(onunload)

注意：不同浏览器对onunload事件支持不同

第7章 JavaScript内置对象

7-1 什么是对象

1.JavaScript中的所有事物都是对象，如字符串、数值、数组、函数等，每个对象带有属性和方法。

2.使用对象前先定义

3.访问对象属性的语法:objectName.propertyName

4.访问对象的方法:object.methodName()

7-2 Date日期对象

日期对象可以储存任意一个日期，并且可以精确到毫秒数(1/1000秒）

1.定义一个时间对象:var Udate=new Date();

注意：使用关键字new，Date（）的首字母必须大写。使Udate成为日期对象，并且已有初始值：当前时间(当前电脑系统时间）

2.如果要定义初始值，可以用以下方法：var d=new Date(2012,10,1);

var d=new Date('Oct 1，2012);

3.访问方法语法："<日期对象>.<方法>"

7-3 返回/设置年份方法

1.不同浏览器，mydate，setFullYear(81）结果不同，年份被设定为0081或81两种情况

2.结果格式依次为：星期，月，日，年，时，分，秒，时区(火狐浏览器）

Thu Mar 06 2014 10:57:47 GMT+0800 2014

不同浏览器，时间格式有差异

7-4 返回星期方法

1.getDay()返回星期，返回的是0-6的数字，0表示星期天

7-5 返回/设置时间方法

1.get/setTime（）返回/设置时间，单位毫秒数，计算从1970年1月1日零时到日期对象所指的日期的毫秒数

7-6 String字符串对象

1.定义字符串的方法就是直接赋值

2.访问字符串对象的属性length

3.访问字符串对象的方法：使用String对象的toUpperCase()方法来将字符串小写字母转换为大写

7-7 返回指定位置的字符

1.语法：stringObject.charAt(index)

2.参数说明：index必需。表示字符串中某个位置的数字，即字符在字符串中的下标

3.注意：a.字符串中第一个字符的下标是0。最后一个字符的下标为字符串长度减一(string.length-1)

b.如果参数index不在0与string.length-1之间，该方法将返回一个空字符串

7-8 返回指定的字符串首次出现的位置

1.语法：stringobject.indexOf(substring,startpos)

2.参数说明：

3.注意：a.区分大小写

b.如果要检索的字符串值没有出现，则该方法返回-1

7-9 字符串分割split()

1.语法：stringObject.split(separator,limit)

2.参数说明:

3.注意：如果把空字符串("")用作separator，那么stringObject中的每个字符之间都会被分割

7-10 提取字符串substring()

1.语法：stringObject.substring(startPos，stopPos)

2.参数说明：

3.注意：a.返回的内容是从start开始（包含start位置的字符）到stop-1处的所有字符，其长度为stop减start

b.如果参数start与stop相等，那么该方法返回的就是一个空串（即长度为0的字符串）

c.如果start比stop大，那么该方法在提取子串之前会先交换这两个参数

7-11 提取指定数目的字符substr()

1.语法：stringObject.substr（startPos，length）

2.参数说明：

3.注意：如果参数startPos是负数，从字符串的尾部开始算起的位置。也就是说，-1指字符串中最后一个字符，-2指倒数第二个字符，以此类推

如果startPos为负数且绝对值大于字符串长度，startPos为0

7-12 Math对象

1.Math对象，提供对数据的数学计算

2.Math对象属性

3.Math对象方法

4.注意：Math对象是一个固定的对象，无需创建它，直接把Math作为对象使用就可以调用其所有属性和方法。这是它与Date,String对象的区别

7-13 向上取整ceil()

1.语法：Math.ceil(x)

2.参数说明：

7-14 向下取整floor()

1.语法：Math.floor()

2.参数说明：

7-15 四舍五入round()

1.语法：Math.round(x)

2.参数说明：

3.注意：a.如果x与两侧整数同等接近，则结果接近+00方向的数字值（如-5.5将舍入为-5，-5.52将舍入为-6）

b.对于0.5，该方法将进行上舍入（5.5将舍入为6）

7-16 随机数random()

1.语法：Math.random()

2.语义：返回一个大于或等于0但小于1的符号为正的数字值

7-17 Array数组对象

7-18 数组连接concat()

concat()方法用于连接两个或多个数组。此方法返回一个新数组，不改变原来的数组

1.语法：arrayobject.concat(array1,array2,...,arrayn)

array可以是数组名或列举的数组元素

7-19 指定分隔符连接数组元素join()

1.语法：arrayObject.join(分隔符)

2.参数说明：

7-20 颠倒数组元素顺序reverse()

1.注意：该方法会改变原来的数组，而不会创建新的数组

7-21 选定元素slice()

1.语法：array.Object.slice(start,end)

2.参数说明:

3.注意：返回一个新的数组，包含从start到end(不包括该元素)的arrayObject中的元素

该方法并不会修改数组，而不是返回一个子数组

String.slice与Array.slice()相似

7-22 数组排序sort()

1.语法:arrayObject.sort(方法函数)

2.参数说明:

3.注意：a.如果不指定<方法函数>，则按unicode码顺序排列

b.如果指定<方法函数>，则按<方法函数>所指定的排列方法排序

第8章浏览器对象

8-1 window对象

window对象是BOM的核心，window对象指当前的浏览器窗口

1.window对象方法：

8-2 JavaScript计时器

在JavaScript中，我们可以在设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行

1.计时器类型:一次性计时器:仅在指定的延迟时间之后触发一次

间隔性触发计时器:每隔一定的时间间隔就触发一次

2.计时器方法:

8-3 计时器setInterval（）

1.语法：setInterval(代码，交互时间);

2.参数说明：a.代码：要调用的函数或要执行的代码串

b.交互时间：周期性地执行或调用表达式之间的时间间隔，以毫秒计（1=1000ms）

3.返回值：一个可以传递给clearInterval（）从而取消对代码的周期性执行的值

8-4 取消计时器clearInterval()

1.语法：clearInterval（id_of_setInterval）

2.参数说明：id_of_setInterval：由setInterval（）返回的ID值

8-5 计时器setTimeout()

1.语义：在载入后延迟指定时间后，去执行一次表达式，仅执行一次

2.语法：setTimeout(代码，延迟时间)

3.参数说明：a.要调用的函数或要执行的代码串

b.延长时间：在执行代码前需等待的时间，以毫秒为单位（1s=1000ms）

8-6 取消计时器clearTimeout()

1.语法：clearTimeout(id_of_setTimeout)

2.参数说明：id_of_setTimeout：由setTimeout()返回的ID值。该值标识要取消的延迟执行代码块

8-7 History对象

History对象记录了用户曾经浏览过的页面(URL)，并可以实现浏览器前进与后退相似导航的功能

注意：从窗口被打开的那一刻开始记录，每个浏览器窗口、每个标签页乃至每个框架，都有自己的history对象与特定的windows对象关联

1.语法：window.history.[属性|方法]

window可以省略

2.History对象属性

3.History对象方法

8-8 返回前一个浏览的页面

1.window.history.back(0相当于window.history.go(-1)，等同于点击浏览器的倒退按钮

8-9 返回下一个浏览的页面

1.window.history.go(-1)相当于window.history,forward()

8-10 返回浏览历史中的其他页面

1.语法：window.history.go(number)

2.参数：

8-11 Location对象

Location对象用于获取或设置窗体的URL，并且可以用于解析URL

2.location对象属性图示

2.location对象属性

3.location对象方法

8-12 Navigator对象

Navigator对象包含有关浏览器的信息，通常用于检测浏览器于操作系统的版本

1.对象属性：

8-13 userAgent

返回用户代理头的字符串表示（就是包括浏览器版本信息等的字符串）

1.语法: navigator.userAgent

几种浏览的useragent，像360的兼容模式用的是IE，极速模式用的是chrome的内核

8-14 screen对象

screen对象用于获取用户的屏幕信息

1.语法：window.screen.属性

2.对象属性

8-15 屏幕分辨率的高和宽

window.screen对象在编写时可以不使用window这个前缀

8-16 屏幕可用高和宽度

1.screen.availWidth属性返回访问者的屏幕的宽度，以像素计，减去界面特性，比如任务栏

2.screen.availHeight属性返回访问者的屏幕的高度，以像素计，减去界面特性，比如任务栏

注意：不同系统的任务栏默认高度不一样，即任务栏的位置可在屏幕上下左右任何位置，所以有可能可用宽度和高度不一样

第9章 DOM对象，控制HTML元素

9-1 认识DOM

文档对象模型DOM（Document Object model）定义访问和处理HTML文档的标准方法。DOM将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。

来看看下面的代码：

将HTML代码分解为DOM节点层次图：

HTML文档可以说由节点构成的集合，DOM节点有：

a.元素节点：上图中<html>、<body>、<p>等都是元素节点，即标签

b.文本节点：向用户展示的内容，如<li>...</li>中的Javascript、DOM、css等文本

c,属性节点：元素属性，如<a>标签的链接属性href="http://www.imooc.com"

节点属性：

遍历节点树：

以上图ul为例，它的父级节点body,它的子节点3个li，它的兄弟节点h2、p

DOM操作：

注意：前面两个是document方法

9-2 getElementsByName()方法

返回带有指定名称的节点对象的集合

1.语法：document.getElementsByName(name)

与getElementById()方法不同的是，通过元素的name属性查询元素，而不是通过id属性

2.注意：a.因为文档中的name属性可能不唯一，所有getelementsByName()方法可以返回的是元素的数组，而不是一个元素

b.和数组类似也有length属性，可以和访问数组一样的方法来访问，从0开始

9-3 getElementsByTagName（）方法

返回带有指定标签名的节点对象的集合，返回元素的顺序是它们在文档中的顺序

1.语法：document.getElementsByTagName(Tagname)

2.说明：a.Tagname是标签的名称，如p、a、img等标签名

b.和数组类似也有length属性，可以和访问数组一样的方法来访问，所以从0开始

9-4 区分getElementByID，getElementsByName，getElementsByTagName

9-5 getAttribute()方法

通过元素节点的属性名称获取属性的值

1.语法：elementNode.getAttribute（name）

2.说明：a.elementNode:使用getElementById()、getElementbByTagName()等方法，获取到的元素节点

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

9-6 setAttribute()方法

setAttribute（）方法增加一个指定名称和值的新属性，或者把一个现有的属性设定为指定的值

1.语法：elementNode.setAttribute(name,value)

2.说明:a.name要设置的属性名

b.value要设置的属性值

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

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

9-7 节点属性

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

a.nodeName：节点的名称

b.nodeValue：节点的值

c.nodeType：节点的类型

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

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

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

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

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

二、nodeValue属性：节点的值

a.元素节点的nodeValue是undeifined或null

b.文本节点的nodeValue文本本身

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

三、nodeType属性：节点的类型，是只读的。以下常用的几种节点类型：

元素类型节点类型

元素 1

属性 2

文本 3

注释 8

文档 9

9-8 访问子节点childNodes

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

1.语法：elementNode.childNodes

2.注意：如果选定的节点没有子节点，则该属性返回不包含节点的Nodelist

9-9 访问子节点的第一和最后项

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

1.语法：node.firstChild

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

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

1.语法:node.lastChild

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

3.注意:上一节中，我们知道IntenetExplorer会忽略节点之间生成的空白文本节点，而其它浏览器不会。我们可以通过检测节点类型，过滤子节点。（以后章节讲解）

9-10 访问父节点parentNode

1.语法：elementNode.parentNode

注意：父节点只有一个

2.访问祖节点：elementNode.parentNode.parentNode

注意：浏览器兼容问题，chrome，firefox等浏览器标签之间的空白也算是一个文本节点

9-11 访问兄弟节点

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

2.语法：nodeObject.nextSibling

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

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

4.语法：nodeObject.previousSibling

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

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

解决问题方法：判断节点nodeType是否为1，如是为元素节点跳过

9-12 插入节点appendChild()

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

1.语法：appendChild(newnode)

9-13 插入节点insertBefore()

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

1.语法：insertBefore(newnode,node);

2.参数：newnode:要插入的新节点

node：指定此节点前插入节点

9-14 删除节点removeChild()

1.语法：nodeObject.removeChild(node)

2.参数：node必需，指定需要删除的节点

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

注意:把删除的子节点赋值给x，这个子节点不在DOM树中，但是还存在内存中，可通过x操作

如果要完全删除对象，给x赋null值

9-15 替换元素节点replaceChild()

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

1.语法:node.replaceChild(newnode,oldnew)

2.参数：newnode：必需，用于替换oldnew的对象

oldnew：必需，被newnode替换的对象

9-16 创建元素节点createElement

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

1.语法:document.createElement(tagName)

参数:tagName字符串值，这个字符串用来指明创建元素的类型

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

9-17 创建文本节点createTextNode

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

1.语法：document.createTextNode(data)

2.参数：data字符串值，可规定此节点的文本

9-18 浏览器窗口可视区域大小

获得浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）的方法：

一、对于IE9+、Chrome、Firefox、Opera以及Safari

window.innerHeight-浏览器窗口的内部高度

window.innerWidth-浏览器窗口的内部宽度

二、对于Internet Explorer8、7、6、5

document.documentElement.clientHeight表示HTML文档所在窗口的当前高度

document.documentElement.clientWidth表示HTML文档所在窗口的当前宽度

或者

Document对象的body属性对应HTML文档的<body>标签

document.body.clientHeight

document.body.clientWidth

在不同浏览器都实用的JavaScript方案

var w = document.documentElement.clientWidth||document.body.clientWidth

var h = document.documentElement.clientHeight||document.body.clientHeight

9-19 网页尺寸scrollHeight

scrollHeight和scrollWidth获取网页内容宽度和高度

一、针对IE、Opera

scrollHeight是网页内容实际高度，可以小于clientHeight

二、针对NS、FF

scrollHeight是网页内容高度，不过最小值是clientHeight，也就是说网页内容实际高度小于clientHeight时，scrollHeight返回clientHeight

三、浏览器兼容性

var w=document.document.Element.scrollWidth||document.body.scrollWidth;

var h=document.document.Element.scrollHeight||document.body.scrollHeight;

注意：区分大小写

scrollHeight和scrollWidth还可获取Dom元素中内容实际占用的高度和宽度

9-20 网页尺寸offsetHeight

offsetHeight和offsetWidth，获取网页内容高度和宽度（包括滚动条等边线，会随窗口的显示大小改变）

一、值

offsetHeight=clientHeight+滚动条+边框

二、浏览器兼容性

var w=document.documentElement.offsetWidth||document.body.offsetWidth;

var h=document.documentElement.offsetHeight||document.body.offsetHeight;

9-21 网页卷去的距离与偏移量

scrollLeft：设置或获取位于给定对象左边界与窗口中目前可见内容的最左端之间的距离，即左边灰色的内容

scrollTop：设置或获取位于对象最顶端与窗口中可见内容的最顶端之间的距离，即上边灰色的内容

offsetLeft：获取指定对象相对于版面或由offsetParent属性指定的父坐标的计算左侧位置

offsetTop：获取指定对象相对于版面或由offsetParent属性指定的父坐标的计算顶端位置

注意:a.区分大小写

b.offsetParent：布局中设置position属性（relative、absolute、fixed）的父容器，从最近的父节点开始，一层层向上找，直到HTML的body

事件处理

一、DOM事件探密

第1章事件流

1-1 [DOM]事件冒泡

1.事件是文档1浏览器窗口中发生的，特定的交互瞬间

2. 事件流

事件流----描述的是从页面中接受事件的顺序

ie----时间冒泡流

netscrape----事件捕获流

事件冒泡：即事件最开始由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播至最不具体的那个节点（文档）

1-2 [DOM]事件捕获

1.事件捕获：不太具体的节点应该更早接收到事件，而最具体的节点最后接收到事件

第2章事件处理程序

2-1 HTML事件处理程序

HTML事件的缺点：HTML和JS代码紧密地耦合在一起

JS代码和HTML都需要进行修改

2-2 DOM 0级事件处理程序

1.HTML事件处理程序

2.DOM 0级事件处理程序

较传统的方式：把一个函数赋值给一个事件的处理程序属性，用得比较多的方法

简单跨浏览器的优势

2-3 DOM 2级事件处理程序

DOM 2级事件定义了两个方法：用于处理指定和删除事件处理程序的操作

addEventListener()和remove EventListener()

接收三个参数：要处理的事件名、作为事件处理程序的函数和布尔值

0级、2级特点：为同一个对象添加多个事件、事件处理程序、按顺序执行

2-4 IE事件处理程序及跨浏览器解决

1.IE事件处理程序

atachEvent()添加事件

detachEvent()删除事件

接收相同的两个参数：事件处理程序的名称和事件处理程序的函数

不使用第三个参数的原因：IE8 以及更早的浏览器版本只支持事件冒泡

2.跨浏览器的事件处理程序

第3章事件对象

3-1 DOM中的事件对象

什么是事件对象？在触发DOM上的事件时都会产生一个对象

1.DOM中的事件对象

a.type属性用于获取事件类型

b.target属性用于获取事件目标

c.stopPropagation()方法用于阻止事件冒泡

d.prevent Default()方法：阻止事件的默认行为

bubbles属性 cansalable属性

3-2 IE中的事件对象

a.type属性用于获取事件类型

b.srcElement属性用于获取事件的目标

c.cancelBubble属性用于阻止事件冒泡

设置为true表示阻止冒泡设置为false表示不阻止冒泡

d.returnValue属性用于阻止事件的默认行为

设置为false表示阻止事件的默认行为

第4章事件类型

4-1[DOM事件]QQ面板拖曳效果（上）

不同的事件类型

鼠标事件 onmousedown：在用户按下任何鼠标按钮时触发

onmousemove：当鼠标指针在元素内部移动时重复地触发

键盘事件

在标题区域按下-->在页面中移动-->释放鼠标时停止移动

鼠标事件都是在浏览器窗口中的特定位置上发生的。这个位置信息保存在事件的clientX和clientY属性中。所有浏览器都支持这两个属性，它们的值表示事件发生时鼠标指针在视口中的水平和垂直坐标，不包括页面滚动的距离

4-2 [DOM事件]QQ面板拖曳效果（下）

mouseup当用户释放鼠标按钮时触发

4-3 [DOM事件]QQ面板状态切换效果

4-4[DOM事件]抽奖系统（上）

键盘事件

keyDown 当用户按下键盘上的任意键时触发，而且如果按住不放的话，会重复触发此事件

beyPress 当用户按下键盘上的字符键时触发，而且如果按住不放的话，会重复触发此事件

keyUp 当用户释放键盘上的键时触发

EVENT对象的keycoden属性用于得到键盘对应键的键码值

JS动画

一、JS动画效果

第1章课程介绍

1-1 JS动画效果课程介绍

运动框架实现思路

1、速度（改变值left、right、width、height、opacity）

2.缓冲运动

3.多物体运动

4.任意值变化

5.链式运动

6.同时运动

第2章简单动画

2-1 JS速度动画

2-2 JS透明度动画

第3章缓冲动画

3-1 JS缓冲动画

第4章多物体动画

4-1 JS多物体动画

4-2 获取样式

4-3 任意属性值

第5章链式动画

5-1 JS链式动画

第6章同时运动

6-1 同时运动

第7章动画案例

一、倒计时效果

第1章简单时间显示

1-1 效果简介

var myDate=new Date()定义对象的关键词

Date()返回当前的日期和时间

getDate()查看Date对象并返回日期（1—31）

getDay()返回星期几（0—6）

getHours()返回小时数（0—23）

getMinutes()返回分钟数（0—59）

getMonth()返回月份值（从0开始，+1）

getSeconds()返回秒数

getTime()返回毫秒数

getYear()返回年份获得年最好用

getFullyear()方法来操作（完整格式如2014）

1-2 时间效果实现

第2章倒计时时差

2-1 倒计时时差

第3章限时抢

3-1 限时抢

二、信息滚动效果制作

第1章 marquee标签实现信息滚动

1-1 marquee标签实现信息滚动

<marquee>知识点

1.behavior滚动的方式

alternative表示在两端之间来回滚动

scroll表示由一端滚到另一端，会重复

slide表示由一端滚动到另一端，不会重复

2.direction滚动的方向down、up、left、right

3.loop滚动的次数（当loop=-1表示一直滚动下去，默认为-1）
4.scrollamount设定活动字幕的滚动速度

5.scrolldelay设定活动字幕滚动两次之间的延迟时间

第2章文字信息无缝滚动

2-1 无缝滚动原理

2-2 无缝滚动制作

2-3 鼠标悬停事件添加

第3章间歇性无缝滚动

3-1 间歇性滚动原理

3-2 单次滚动制作

3-3 间歇性循环滚动制作

1.setTimeout(表达式，延迟时间)

在执行时，是在载入后延迟指定时间后，去执行一次表达式，仅执行一次

2.setInterval(表达式，交互时间)

在执行时，它从载入后，每隔指定的时间就执行一次表达式

setInterval()方法可按照制定的周期（以毫秒计）来调用函数或计算表达式。setInterval()方法会不停地调用函数，直到clearInterval()被调用或窗口被关闭。由setInterval返回的ID值可用作clearInterval()方法的参数

三、商城分类导航效果

第1章课程介绍及案例分析

1-1 课程介绍

门户网站特点：导航在上方平铺展示

商城类网站特点：竖向列表横向收缩

1-2 商城分类导航分析

第2章商城分类导航实现（css版）

2-1 分类导航一级菜单制作（css版）

小技巧：qq截图：抽取颜色，测量宽度

2-3 鼠标浮动效果

2-5 悬浮层制作

纯css实现京东导航效果

<dl>

<dd>用来计算的仪器......</dd>

<dt>定义列表中的项目</dt>

<dd>描述列表中的项目</dd>

</dl>

第3章商城分类导航实现（JS版）

3-1 JS实现特效

第4章细节优化及扩展

4-1 细节优化及扩展（一）

子级分类区域浮动位置微调

怎样做出苏宁、亚马逊那样的菜单

playfreely

关注

7
点赞
踩
35

收藏

觉得还不错? 一键收藏
5
评论
web前端工程师----JavaScript语言

JS基础一、JavaScript入门篇第1章请做好准备1-1 为什么学习JavaScript一、你知道，为什么JavaScript非常值得我们学习吗？1.所有主流浏览器都支持JavaScript2.目前，全世界大部分网页都使用JavaScript3.它可以让网页呈现各种动态效果二、易学性1-2 新朋友你在哪里（如何插入JS）JavaScript...
复制链接

扫一扫