《零基础学JavaScript(全彩版)》学习笔记

二〇一九年二月九日星期六0时9分

前期：

刚刚学完《零基础学HTML5+CSS3(全彩版)》，准备开始学习JavaScript。对Web前端好做一个全面深入的了解，为Python编程的提高打下一个坚实的基础。

本书除了项目实战，共计17章390页，不光本身的视频，光腾讯课堂的JS视频就有35课时以上。计划用时4天到7天的时间学完。

还是先把书过一遍吧，看书比较好掌握进度，然后再看书补补漏。

第1篇   基础知识

第1章 JavaScript简介

1、JavaScript的起源、特点、应用

2、WebStorm的下载与安装

3、JavaScript在HTML中的使用：页面直接嵌入JS代码；链接外部JS文件；作为标记的属性值使用。

4、JS的基本语法：执行顺序；大小写敏感；JS会忽略空格、换行和制表符，但换行有断句的作用；每行结尾的分号可有可无；//单行注释，/*……*/多行注释

5、document.write():JavaScript语句，表示可以直接在页面中输出括号中的内容。

6、alert():JS语句，弹出一个对话框，显示括号内的内容。

7、alert(new Date().toLocaleString());显示当前的日期和时间

第2章 JavaScript语言基础

数据类型：数值型：（十进制,十六进制,八进制,浮点型数据,特殊值Infinity,特殊值NaN）；

字符串型；布尔型；特殊数据类型（未定义值，空值(null)）

常量和变量：常量；变量（命名、声明、赋值、类型）

运算符：算术运算符、字符串运算符、比较运算符、赋值运算符、逻辑运算符、条件运算符、其他运算符、运算符优先级。

表达式：

数据类型的转换规则：

1、 特殊值：Infinity正无穷大；-Infinity负无穷大。

2、 特殊值NaN：非数字。比如0/0.

3、 逗号运算符用于将多个表达式排在一起，而整个表达式的值为最后一个表达式的值。

4、 typeof运算符：返回操作数的数据类型。

5、 new运算符：创建一个新的内置对象实例。

6、 变量声明：var

第3章 JavaScript基本语句

条件判断语句：if语句；switch语句

循环语句：while语句；do…while语句；for语句

跳转语句：continue语句；break语句

异常处理语句：try…catch…finall语句；Error对象；throw语句抛出异常

第4章 函数

函数的定义和调用：函数的定义；函数的调用(简单调用、事件响应调用、链接调用)

函数的参数：

函数的返回值：

嵌套函数：嵌套定义；嵌套调用

递归函数：

变量的作用域：全局变量和局部变量；变量的优先级

内置函数：数值处理函数；字符串处理函数

定义匿名函数：在表达式中定义函数；使用Function()构造函数

1、 定义函数： function 函数名（[参数列表]）{语句 [return 返回值]}

2、 函数的调用：通过链接调用<a href="javascript:test();">单击链接</a>

3、 形参、实参

4、 函数的返回值：return 表达式;

5、 嵌套函数；递归函数：自己调用自己。递归两步：找规律，找出口！

6、 内置函数：数值处理处理函数：parseInt(string,n)字符串转整数；parseFloat()字符串转浮点数；

isNaN(num)判断值是否为NaN;isFinite(num)检验参数是否有限；

7、 字符串处理函数：eval(string)计算字符串表达式的值：eval("x=5;y=6;document.write(x*y)");

8、定义匿名函数：在表达式中定义函数和使用Function()构造函数定义函数。

var 变量名 = function(参数1，参数2，…){函数体}；  不需要指定函数名，直接赋给变量即可。

构造函数可动态地创建函数：

var 变量名 = new Function("参数1"，“参数2”……"函数体")；参数和函数体都必须是字符串。

例如：var sum = new Function("x","y","alert(x+y);");     sum(10,20);

二〇一九年二月九日星期六2时14分40秒

渡一教育视频补遗：

JavaScript运行三部曲：（js特点：单线程+解释性语言）

第一步：语法分析：先扫描一遍

第二步：预编译：函数声明整体提升；变量的声明提升（变量赋值没提升）

第三步：解释执行

预编译前奏：

1、 imply global:暗示全局变量：即任何变量，如果变量未经声明就赋值，此变量就为全局对象所有。

2、 一切声明的全局变量全是window的属性。

2/9/2019 12:42:41 PM

预编译四部曲：

1、 创建AO对象  --Activation Object 活跃对象-作用域-执行期上下文

全局的为GO对象—Global O bject window对象

2、 找形参和变量声明，将变量和形参名作为AO属性名。值为undefined

3、 将实参值和形参统一

4、 在函数体里面找函数声明，值赋予函数体

预编译发生在函数执行的前一刻。

！！ 双非

敲代码的指法：……

[[scope]]作用域链

立即执行函数：此类函数没有声明，在一次执行过后即释放。适合做初始化工作。

只有表达式才能被执行符号执行，()是执行符，先执行外面的()。表达式里面的函数在外面就失去了意义，于是：

(function test(){console.log('a');}())就变成了立即执行函数：(function(){console.log('a');}())

闭包：当内部函数被保存到外部时，将会生成闭包。闭包会导致原有作用域链不释放，造成内存泄露。

闭包的作用：实现公有变量，函数累加器；可以做缓存（存储结构）eater；可以实现封装，属性私有化，Person()；模块化开发，防止污染全局变量。

闭包的防范：闭包会导致多个执行函数共用一个公有变量，如果不是特殊需要，应尽量防止这种情况发生。

函数只有在执行的时候才会关注函数体内的变量，当形成闭包的时候，在外部执行函数时访问的永远是内部函数最后形成的变量值！！！函数在定义的时候不用看函数体内是什么东西！！！除非函数立即执行！！！

二〇一九年二月九日星期六20时2分

第5章 对象

对象简介：什么是对象；对象的属性和方法；JS对象的种类

自定义对象创建：直接创建自定义对象；通过自定义构造函数创建对象；通过Object对象创建自定义对象。

对象访问语句：for…in 语句;with语句

常用内部对象：Math对象；Date对象

1、 对象的属性：包含在对象内部的变量。用来描述对象特性的一组数据。对象状态。

2、 对象的方法：包含在对象内部的函数。用来实现某个功能。对象行为。

3、 对象的种类：自定义对象；预定义对象：内置对象和浏览器对象。

4、 直接创建自定义对象：var 对象名 = {属性名1:属性值1,属性名2:属性值2,属性名3:属性值3,……}

5、 自定义构造函数创建对象：调用构造函数要用new运算符；参数通常用于初始化新对象，this关键字。

例如：构造函数：function Student(name,sex,age){this.name=name;this.sex=sex;this.age=age;}

创建一个新对象：var student1 = Student("张三"，"男"，25);

定义方法：在构造函数里：this.showName=ShowName; 在构造函数外定义：function showName(){…}

或者在构造函数里直接定义：this.showName=function(){alert(this.name);};

6、prototype属性是所有函数都具有的属性，用于向对象添加属性和方法：object.prototype.name=value

如：Student.prototype.show=function(){alert("姓名:"+this.name+"\n性别:"+this.sex);}

var student1=new Student("张三","男");

student1.show();

7、通过内置对象创建自定义对象：obj=new Object([value]) 如：var student=new Object();

8、专门应用于对象的语句：for…in;用于遍历对象的每一个属性，每次将属性名作为字符串存在变量中。for(var example in object){……}

with(对象名称){语句}：大括号中的属性引用就不在需要对象名加点的形式了。

9、常用内部对象：内部动态对象必须用new创建实例才能引用；内部静态对象可以直接引用。

10、静态对象Math：数学常量和数学函数。PI圆周率、abs(x)绝对值、exp(x)乘方、max(n1,n2…)最大值、

min()、pow(x,y)x的y次方、random()随机数、round(x)四舍五入取整、sqrt(x)平方根

11、日期对象：dateObj = new Date()

dateObj = new Date(dateVal)

dateObj = new Date(year,month,date[,hour[,minutes[,seconds[,ms]]]])

getFullYear()/getMonth()+1/getDate()/getDay() 获取当前年月日星期 toString()日期转字符串

第6章 数组

数组：数组概念；数组元素

定义数组：定义空数组；指定数组长度；指定数组元素；直接定义数组

操作数组元素：数组元素的输入和输出；数组元素的添加；数组元素的删除

数组元素的属性：length属性；prototype属性

数组的方法：数组的添加和删除；设置数组的排列顺序；获取某段数组元素；数组转换成字符串

1、 JS是一种弱类型语言，数组中的每个元素的类型可以不同，甚至数组可以包含数组。

2、 定义空数组： arrayObject = new Array() 然后再给数组赋值arr[0]="零基础学JavaScript";

3、 定义数组时可以定义数组的个数：arrayObject = new Array(size)

4、 定义数组时直接赋值：arrayObject = new Array(element1,element2,element3,…)

5、 直接定义数组：不使用构造函数，直接把数组元素放在一个中括号中：

arrayObject =[element1,element2,element3,…]

6、 数组元素的删除：delete arr[1]; 删除的只是元素的值，变为undefined，元素的个数并未减少。

7、 数组的属性：arr.length 数组的长度（元素个数）；自定义属性：Array.prototype.name=value

8、 数组的添加和删除：

concat()方法：将其他数组连接到当前数组的尾部，产生一个新数组，原数组的元素和长度不变

arrayObject.concat(arrayX,arrayX,……,arrayX)

push()方法：向数组末尾添加一个或多个元素，返回添加后的数组的长度。

unshift()方法：向数组的开头添加一个或多个元素，数组新长度。

pop()方法：删除数组最后一个元素，返回删除元素的值！

shift()方法：删除数组中第一个元素的值，并返回删除元素的值。

splice()方法：删除数组中指定位置的元素，还可以向指定位置添加元素。

arrayObject.splice(start,length,element1,element2,…)

9、设置数组的排列顺序：reverse()颠倒数组中元素的顺序；sort()数组排序；

10、获取某段数组元素：arrayObject.slice(start,end)

11、数组转换成字符串：

arrayObject.toString() 返回的元素之间用逗号分隔

arrayObject.toLocalString()转换成本地字符串

arrayObject.join(separator)将数组中所有元素放入一个字符串中

二〇一九年二月十日星期日0时3分

第7章 String对象

String对象的创建

String对象的属性：length属性；constructor属性；prototype属性

String对象的方法：查找字符串；截取字符串；大小写转换；连接和拆分；格式化字符串

1、String对象是动态对象，使用构造函数可以显式创建字符串对象：

var newstr = new String(StringText)

任何一个字符串常量都可以看做是一个String对象，可直接用.调用其属性和方法，不同的是typeof返回值不同，一个是string类型，一个是object类型。

2、字符串的长度stringObject.length; 判断当前对象类型：newStr.constructor==String

自定义属性或方法：String.prototype.name=value

3、String对象的方法：

查找字符串：charAt()返回指定位置的字符；indexOf()返回子字符串在字符串中首次出现的位置。

lastIndexOf()返回子字符串在字符串中最后出现的位置

截取字符串：slice()提取字符串的片段；substr()从指定位置开始提取指定长度的字符串。

substring()提取两个指定索引之间的字符（不含索引元素）。

大小写转换：toLowerCase()转成小写，toUpperCase()转成大写。

连接和拆分：连接两个或多个字符串：stringObject.concat(stringX,stringX,…)

把一个字符串分割成字符串数组：stringObject(separator,limit)

5、 格式化字符串：anchor()创建html锚;big()small()fontsize()字体大小和指定字号;

bold()italics()粗斜体;link()strike()blink()fixed()fontcolor()sub()sup()

二〇一九年二月十日星期日0时57分

第2篇 核心技术

第8章 JavaScript事件处理

本章概览：JavaScript是一种基于对象的语言。最基本的特征就是事件驱动（event-driven）。

通常将鼠标或热键的动作称为事件(event);将由鼠标或热键引发的一连串动作,称为事件驱动(event-driven);而将对事件进行处理的程序或函数，则称为事件处理程序(Event Handler)。

事件与事件处理概述：什么是事件；JS常用事件；事件的调用；事件对象

表单相关事件：获得焦点与失去焦点的事件；失去焦点内容改变事件；表单提交与重置事件

鼠标和键盘事件：鼠标单击事件；鼠标按下和松开事件；鼠标移入和移出事件；鼠标移动事件；键盘事件

页面事件：加载与卸载事件；页面大小事件

1、JavaScript常用事件：

a.窗口事件,只在body和frameset元素中才有效

onload      页面或图片加载完成时

onunload     用户离开页面时

b.表单元素事件,在表单元素中才有效

onchange     框内容改变时

onsubmit     点击提交按钮时

onreset     重新点击鼠标按键时

onselect     文本被选择时

onblur      元素失去焦点时

onfocus     当元素获取焦点时

c.键盘事件

onkeydown    按下键盘按键时

onkeypress    按下或按住键盘按键时

onkeyup     放开键盘按键时

d.鼠标事件

onclick     鼠标点击一个对象时

ondblclick    鼠标双击一个对象时

onmousedown 鼠标被按下时

onmousemove 鼠标被移动时

onmouseout    鼠标离开元素时

onmouseover 鼠标经过元素时

onmouseup    释放鼠标按键时

e.其他事件

onresize     当窗口或框架被重新定义尺寸时

onabort     图片下载被打断时

onerror     当加载文档或图片时发生错误时

2、事件调用：在HTML中调用：<input name="save" type="button" value="保存" onclick="alert('');">

在JS中调用：首先要获得对象的引用：b_save=document.getElementById("save");

然后绑定单击事件：b_save.onclick=function(){……}

3、表单获得焦点和失去焦点事件：<input type="text" onFocus="txtfocus()" onBlur="txtblur()">

4、表单失去焦点内容改变事件：一般用于下拉菜单中。 <select name="menu1" onChange="Fcolor()">

var e=windows.event; //获取事件对象   var obj=e.srcElement; //获取发生事件的元素

有了这个元素，就可以就对这个元素的属性进行操作了！

6、 表单提交和重置事件：<form name="formname" onsubmit="return Funname" onreset="return Funname"></form>

eval("obj."+"text"+i).value==""  eval()计算某个字符串并执行其中的js代码

7、 鼠标单击事件onclick;鼠标按下和松开事件onmousedown,onmouseup;鼠标移入和移出事件onmouseover,onmouseout;鼠标移动事件onmousemove

8、 键盘事件：onkeypress,onkeydown,onkeyup

document.onkeydown = function(e) {

if (13 == e.k&& e.ctrlKey) //Ctrl+Enter键，还有：altKey、shiftKey

{   saveComment();    }}

又例如：

<script type="text/javascript">

function Refurbish(){//定义Refurbish()函数

if (window.event.keyCode==65){//如果按下了键盘上的A键

location.reload();//对页面进行刷新

}}

document.onkeydown=Refurbish;//当按下键盘上的按键时调用函数

</script>

<img src="1.jpg" width="805" height="554">

9、键盘码keycode：

k8 = BackSpace BackSpace 
k9 = Tab Tab 
k12 = Clear 
k13 = Enter 
k16 = Shift_L 
k17 = Control_L 
k18 = Alt_L 
k19 = Pause 
k20 = Caps_Lock 
k27 = Escape Escape 
k32 = space space 
k33 = Prior 
k34 = Next 
k35 = End 
k36 = Home 
k37 = Left 
k38 = Up 
k39 = Right 
k40 = Down 
k41 = Select 
k42 = Print 
k43 = Execute 
k45 = Insert 
k46 = Delete 
k47 = Help 
k48 = 0 equal braceright 
k49 = 1 exclam onesuperior 
k50 = 2 quotedbl twosuperior 
k51 = 3 section threesuperior 
k52 = 4 dollar 
k53 = 5 percent 
k54 = 6 ampersand 
k55 = 7 slash braceleft 
k56 = 8 parenleft bracketleft 
k57 = 9 parenright bracketright 
k65 = a A 
k66 = b B 
k67 = c C 
k68 = d D 
k69 = e E EuroSign 
k70 = f F 
k71 = g G 
k72 = h H 
k73 = i I 
k74 = j J 
k75 = k K 
k76 = l L 
k77 = m M mu 
k78 = n N 
k79 = o O 
k80 = p P 
k81 = q Q at 
k82 = r R 
k83 = s S 
k84 = t T 
k85 = u U 
k86 = v V 
k87 = w W 
k88 = x X 
k89 = y Y 
k90 = z Z 
k96 = KP_0 KP_0 
k97 = KP_1 KP_1 
k98 = KP_2 KP_2 
k99 = KP_3 KP_3 
k100 = KP_4 KP_4 
k101 = KP_5 KP_5 
k102 = KP_6 KP_6 
k103 = KP_7 KP_7 
k104 = KP_8 KP_8 
k105 = KP_9 KP_9 
k106 = KP_Multiply KP_Multiply 
k107 = KP_Add KP_Add 
k108 = KP_Separator KP_Separator 
k109 = KP_Subtract KP_Subtract 
k110 = KP_Decimal KP_Decimal 
k111 = KP_Divide KP_Divide 
k112 = F1 
k113 = F2 
k114 = F3 
k115 = F4 
k116 = F5 
k117 = F6 
k118 = F7 
k119 = F8 
k120 = F9 
k121 = F10 
k122 = F11 
k123 = F12 
k124 = F13 
k125 = F14 
k126 = F15 
k127 = F16 
k128 = F17 
k129 = F18 
k130 = F19 
k131 = F20 
k132 = F21 
k133 = F22 
k134 = F23 
k135 = F24 
k136 = Num_Lock 
k137 = Scroll_Lock 
k187 = acute grave 
k188 = comma semicolon 
k189 = minus underscore 
k190 = period colon 
k192 = numbersign apostrophe 
k210 = plusminus hyphen macron 
k211 = 
k212 = copyright registered 
k213 = guillemotleft
guillemotright 
k214 = masculine ordfeminine 
k215 = ae AE 
k216 = cent yen 
k217 = questiondown exclamdown 
k218 = onequarter onehalf
threequarters 
k220 = less greater bar 
k221 = plus asterisk asciitilde 
k227 = multiply division 
k228 = acircumflex Acircumflex 
k229 = ecircumflex Ecircumflex 
k230 = icircumflex Icircumflex 
k231 = ocircumflex Ocircumflex 
k232 = ucircumflex Ucircumflex 
k233 = ntilde Ntilde 
k234 = yacute Yacute 
k235 = oslash Ooblique 
k236 = aring Aring 
k237 = ccedilla Ccedilla 
k238 = thorn THORN 
k239 = eth ETH 
k240 = diaeresis cedilla currency 
k241 = agrave Agrave atilde Atilde 
k242 = egrave Egrave 
k243 = igrave Igrave 
k244 = ograve Ograve otilde Otilde 
k245 = ugrave Ugrave 
k246 = adiaeresis Adiaeresis 
k247 = ediaeresis Ediaeresis 
k248 = idiaeresis Idiaeresis 
k249 = odiaeresis Odiaeresis 
k250 = udiaeresis Udiaeresis 
k251 = ssharp question backslash 
k252 = asciicircum degree 
k253 = 3 sterling 
k254 = Mode_switch

10、页面事件：加载事件,网页加载完成后触发的事件onload;卸载事件，刷新、关闭、跳转时发生onunload。页面大小事件：onresize

2/10/2019 4:09:42 AM

二〇一九年二月十日星期日12时11分25秒

第9章
文档对象

文档对象概述：文档对象介绍；文档对象的常用属性；文档对象的常用方法

文档对象的应用：链接文字颜色的设置；文档背景色和前景色的设置；获取并设置URL；在文档中输出数据；动态添加一个HTML标记；获取文本框并修改其内容

1、 JavaScript会为每个HTML文档自动创建一个Document对象，通过Document对象可以操作HTML内容

2、

浏览器对象模型（Browser Object Model，BOM）：window对象是核心,其他对象都是window属性。

BOM中定义了6种重要的对象：

1.window对象表示浏览器中打开的窗口；

2.document对象表示浏览器中加载页面的文档当对象；

3.location对象包含了浏览器当前的URL信息；

4.navigator对象包含了浏览器本身的信息；

5.screen对象包含了客户端屏幕及渲染能力的信息；

6.history对象包含了浏览器访问网页的历史信息；

window对象的主要属性：

window对象的主要方法：

window对象的主要功能

window对象对应着Web浏览器的窗口，使用它可以直接对浏览器窗口进行操作。window对象提供主要功能可以分为以下5类：

（1）调正窗口大小和位置；

（2）打开新窗口；

（3）显示系统提示框；

（4）在状态栏上显示信息；

（5）实现实时操作；

3、 文档对象的常用属性：

应用实例：

创建窗口对象：

4、 文档对象的常用方法：

对象属性

document.title //设置文档标题等价于HTML的title标签

document.bgColor 
//设置页面背景色

document.fgColor 
//设置前景色(文本颜色)

document.linkColor //未点击过的链接颜色

document.alinkColor 
//激活链接(焦点在此链接上)的颜色

document.vlinkColor 
//已点击过的链接颜色

document.URL  //设置URL属性从而在同一窗口打开另一网页

document.fileCreatedDate   //文件建立日期，只读属性

document.fileModifiedDate   //文件修改日期，只读属性

document.fileSize 　　　     //文件大小，只读属性

document.cookie　　　　     //设置和读出cookie

document.charset 　　　　 //设置字符集 简体中文:gb2312

常用对象方法

document.close()

document.open()

document.writeIn()

document.write()
　　　　       //动态向页面写入内容

document.createElement(Tag)　　 //创建一个html标签对象

document.getElementById(ID)
　  //获得指定ID值的对象

document.getElementsByName(Name)
 //获得指定Name值的对象

document.getElementsByClassName(“className”)  //获得指定class值的对象(数组)

document.getElementsByTagName(“TagName”)
//获得指定Tag对象

document.body.appendChild(oTag)

例如：动态添加文本框：

<script type="text/javascript">

function addInput(){

var
txt=document.createElement("input");//动态添加一个input文本框

//var t=document.getElementById("text")
获取一个元素，通过t达到对这个元素的操作

txt.type="text";//为添加的文本框type属性赋值

txt.name="txt";//为添加的文本框name属性赋值

txt.value="动态添加的文本框";//为添加的文本框value属性赋值

document.form1.appendChild(txt);//把文本框作为子节点追加到表单中
}

</script>

5、 跳转页面：document.URL="new.html"

第10章
表单对象

文档(Document)对象的forms属性可以返回一个数组，数组中的每个元素都是一个form对象。form对象又称表单对象，通过该对象可以实现输入文字、选择选项和提交数据等功能。

表单元素：文本框（属性方法应用）；按钮（属性方法应用）；单选框和复选框（属性方法应用）；下拉菜单（属性方法Option应用）

访问表单和表单元素：JS访问表单；JS访问表单元素

表单对象的属性、方法与事件

1、JS访问表单的三种方法：数组编号访问document.form[0];表单名称访问document.myform;

定位访问document.getElementById("form1")

2、Js访问表单元素：数组编号访问document.form1.element[0];元素名称访问document.form1.text1;

ID定位访问:document.getElementById("elementID")

3、表单对象的属性：name/action/method/enconding/id/length/target/element

表单对象的方法：reset()/submit()   表单对象的事件：reset/submit

4、文本框的属性：id/name/type/value/rows/cols/disabled

文本框的方法：blur()/focus()/click()/select()

onclick="return checkinput()"  如果函数返回真则跳转，否则不跳转。

5、按钮三种按钮：普通按钮通常调用函数；提交按钮用来提交表单；重置按钮用来重置表单。

按钮的属性：id/name/type/value/disabled 按钮的方法blur()/focus()/click()

<form name="form1"
method="post" onSubmit="return
Mycheck()">…</form>

6、单选框和复选框的属性：id/name/type/value/length/checked/disabled 方法：blur()/focus()/click()

7、下拉菜单：<select><option>。<select>用于声明下拉菜单，<option>用于创建下拉菜单选项。

下拉菜单select的属性:id/name/type/value/multiple多选/length个数/option数组/selectedIndex/disabled

下拉菜单select方法：blur()/focus()/click()/remove(i)

8、创建下拉菜单选项的构造函数：new Option(text,value,defaultSelected,selected)

例如,表单myform,下拉菜单meselect,为其添加一个下拉菜单选项：

document.myform.myselect.options[0] = new
Option("text","value");

Option属性：defaultSelected是否默认；index数组option[]下标；selected是否选中；

text选项中的文字；value选项中的值。

第11章
图像对象

图像对象概述：图像对象介绍；图像对象的属性；图像对象的事件

图像对象的应用：图片的随机显示；图片置顶；图片翻转效果

1、JS中的三种引用图片的方式：按编号：document.images[0];按名称：document.images[imageName];

ID定位访问：document.getElementById("imageID")

2、图像对象的属性：border/height/width/name/src/alt显示的文字/hspace/vspace文字与图片的距离

lowsrc低分辨率图片/complete完全加载判断

3、图像对象的事件：image对象没有方法，除了常用的事件，还有abort/error等事件。

abort放弃加载；load成功加载；error加载出错；click/dblclick/mouseover/mouseout/……

setTimeout("changebg()",1000) //每隔1秒（1000毫秒）执行一次

图片置顶：document.documentElement.scrollTop; document.documentElement.scrollLeft;
document.documentElement.clientWidth三个关键属性。setInterval('permute()',1)每隔1毫秒。

4、图片翻转效果：CSS滤镜技术。Filter:滤镜名称(参数)；可在各个标记的style属性中设置滤镜。

alpha 设置透明度

blendTrans 设置淡入淡出效果

blur 建立模糊效果

chroma 把指定的颜色设置为透明

dropShadow 设置投射阴影

flipH 水平翻转

flipV 垂直翻转

glow 为对象的外边界增加光效

gray 设置灰度显示

invert 翻转色调亮度，建立底片效果

Light 在一个对象上进行灯光投影

Mask 为一个对象建立透明膜

RevealTrans 设置滤镜的转换效果

shadow 建立立体式阴影效果

wave 波形效果

xray X光效果，只显示对象的轮廓

例如：function
Hturn(){

image11.style.filter
= image11.style.filter =="flipH"?"":"flipH";//设置水平翻转

}

第12章
文档对象模型(DOM)

DOM概述

DOM对象节点属性

节点的操作：创建节点；插入节点；复制节点；删除节点；替换节点

获取文档中的指定元素；通过元素的name属性获取元素

与DHTML相对应的DOM:innerHTML和innerText属性；outerHTML和outerText属性

1、在文档对象模型中，每个对象都可称为一个节点（Node）:根节点/父节点/子节点/兄弟节点/后代/叶子节点

元素节点、文本节点、属性节点

2、DOM对象节点属性：在对节点进行查询时，首先使用getElementById()方法来访问指定的id节点，然后应用nodeName属性、nodeType属性和nodeValue属性来获取该节点的名称、类型和值。另外，通过使用parentNode,firstChild,lastChild,previousSibling和nextSibling等属性，可以遍历文档树！

需要对文档现有信息进行检索的时候下面DOM方法最有用：

getElementById

getElementByTagName

getAttribute

firstChild.nodeValue     元素的第一个节点的内容

在需要把信息添加到文档中去时，以下DOM最有用：

createElement                 创建元素节点

createTextNode（需要的内容）  创建文本节点

appendChild                   添加到元素节点

insertBofore

insertAfter                   需要自己编写

setAttribute

元素在节点中的位置信息：

parentNode 当前节点的父节点

nextSibling   当前节点的后一个兄弟节点

previousSibling  当前节点的前一个兄弟节点

childNodes 子节点列表

firstChild 当前节点的第一个子节点

lastChild  当前节点的最后一个子节点

元素信息：

nodeName 节点的名称

nodeValue 节点的值，一般都是文件文本

nodeType 节点的类型

attributes 元素的属性列表

style     每个元素都有一个style属性
他们也都是一个对象

3、 节点的操作：创建添加节点

<script
type="text/javascript">

function completePoem(){  //定义completePoem()函数

var div = document.createElement('div');//创建div元素

div.className = 'poem';                 //为div元素添加CSS类名

var last = myform.last.value;           //从myform中的input(last)中获取古诗最后一句

txt=document.createTextNode(last);      //创建文本节点

div.appendChild(txt);                   //将文本节点添加到创建的div元素中

document.getElementById('poemDiv').appendChild(div);//将创建的div元素添加到id为poemDiv的div元素中

}

</script>

4、 节点操作：插入节点  insertBefore(new,ref)  将新的子节点添加到指定的子节点的前面（可以先写这一行语句，然后，围绕着这一行的参数再写别的语句，就比较容易理顺其逻辑关系了）

node.parentNode.insertBefore(newNode,node)   插入定位得巧妙！

5、 复制节点：obj.cloneNode(deep)

6、 删除节点：obj.removeChild(oldChild)

7、 替换节点：obj.replaceChild(new,old)

8、 获取文档中指定的元素

通过元素的id属性获取元素document.getElementById('userId');

通过元素的name属性获取元素：document.getElementName('likeRadio');返回的是一个数组

9、 通过DHTML对象模型直接获得网页对象，通过innerHTML,innerText,outerHTML,outerText可以很方便地读取、修改HTML元素内容。

innerHTML可以用于为指定的HTML文本替换元素的内容。比如：

document.geyElementById("clock").innerHTML="2017-<b>12</b>-24";

innerText即使指定的HTML文本也会原样输出。

innerHTML,innerText还可以获取元素的内容。

outerHTML,outerText替换的是整个目标节点，也就是这两个属性还对元素的本身进行修改。

第13章
Window窗口对象

窗口事件：通用窗口事件；扩展窗口事件

控制窗口：移动窗口；窗口滚动；改变窗口大小；访问窗口历史；设置超时

Window对象概述：属性、方法、使用

对话框：警告对话框；确认对话窗；提示对话框

打开与关闭窗口：打开窗口；关闭窗口

1、Window对象的属性

document/frames/location/name/status/defaultStatus/top/parent/opener/closed/self/screen/navigator

2、Window对象的方法

alert()/confirm()/prompt()/open()/close()/focus()/blur().scrollTo(x,y)/scrollBy(offsetx,offsety)/setTimeout(timer)/setInterval(interval)/moveTo(x,y)/moveBy(offsetx,offsety)/resizeTo(x,y)/resizeBy(offset,offsety)/print()/navigate(URL)

3、Window对象的使用

Window是不需要new运算符来创建对象的。self代表当前窗口，parent代表父级窗口

4、对话框：警告窗口alert();确认窗口confirm();提示窗口prompt（str1，str2）

5、打开与关闭窗口：windowVar=window.open(url,windowname[,location])

关闭窗口：window.close();或close();或this.close();

6、 控制窗口：移动窗口：window.moveTo(x,y)将窗口移动到指定位置。window.resizeTo(x,y)将窗口改成指定大小。screen屏幕对象，反应了当前屏幕设置：属性：width/height/colorDeph……

窗口滚动：scroll(x,y)指定窗口的当前位置。scrollTo(x,y)与scroll（x,y）相同，都是绝对位置。scrollBy(x,y)相对位置滚动。resizeBy(x,y)当前窗口改成指定大小（x,y）。

7、访问窗口历史：[window.]history.property|method([parameters])

属性：length历史列表的长度，用于判断列表中的入口数目；current当前文档的URL

next
历史列表的下一个URL；previous 历史列表的前一个URL

方法：back()退回前一页；forward()重新进入下一页；go（）进入指定的网页

8、设置超时：timerID=setTimout(要执行的代码，毫秒为单位的时间); 中止：clearTimeout(timerId)

9、窗口事件：window.通用事件名=要执行的JS代码

onfocus/onblur/onload/onunload/onresize/onerror

扩展窗口事件：onafterprint窗口被打印后；onbeforeprint敞口被打印或预览前；

onbeforeunload窗口未被载入前；ondragdrop文档被拖到窗口使；onhelp当帮助键F1按下时；

onresizeend调整大小结束时；onresizestart调整大小开始时；onscroll滚动条滚动时。

2/10/2019 10:20:00 PM  （22:20:10）

二〇一九年二月十一日星期一0时6分

第3篇
高级应用

第14章 Ajax技术

Ajax概述：Ajax应用案例；开发模式；优点

Ajax的技术组成：XMLHttpRequest对象；XML语言；JavaScript脚本语言；DOM；CSS

XMLHttpRequest对象：对象的初始化；常用属性；常用方法

1、 Ajax是Asynchronous JavaScript And XML缩写，异步JavaScript和XML技术，客户端异步请求，不需要刷新页面的情况下与服务器进行通信。增强的JavaScript，更新部分页面内容而不重载整个页面。

2、 Ajax开发模式：用户的行为将变成对Ajax引擎的一次JavaScript调用。而不是每次操作都触发一次HTTP请求。

3、 Ajax的优点：通过引入中间媒介（Ajax引擎）：①把一部分服务器负担的工作转移到了客户端。②不需要重载整个页面的情况下通过DOM及时将更新的内容显示在页面上。③可调用XML等外部数据，是页面显示和数据分离。④不需要下载插件和小程序。⑤没有平台限制。

缺点就是：⑥大量的JavaScript代码，不易维护。⑦可视化设计上比较困难。⑧打破“页”的概念。⑨给搜索引擎带来困难。

4、 Ajax的技术组成：Ajax是XMLHttpRequest对象和JavaScript、XML语言、DOM、CSS等多种技术的组合。但，只有XMLHttpRequest对象是新技术。XMLHttpRequest对象是一个具有应用程序接口的JavaScript对象，能够使用超文本传输协议（HTTP）连接服务器。微软、1999年、IE5.0

5、 XML语言，Extensible Markup Language,可扩展的标记语言。描述结构化数据格式。

6、 JavaScript脚本语言，Ajax就是利用它将DOM,XHTML(HTML),XML,CSS等技术综合了起来，并控制它们的行为。JS不是Java语言的精简版，只能在某个解释器或“宿主”上运行，如ASP,PHP,JSP,浏览器或windows脚本宿主。

7、 DOM文档对象模型的缩写，它为XML文档的解析定义了一组接口。解析器读入整个文档，然后构建一个驻留内存的树结构。最后通过DOM可以遍历树以获取来自不同位置的数据！

8、 CSS层叠样式表的缩写。

9、 XMLHttpRequest是Ajax中最核心的技术。Ajax可以像桌面应用程序一样只同服务器进行数据层面的交换，不用每次都刷新页面，也不用每次都将数据处理工作交给服务器来做。

XMLHttpRequest对象的初始化：

IE浏览器会把XMLHttpRequest实例化为一个ActiveX对象：

var http_request =new
ActiveXObject("Msxml2.XMLHTTP");

或： var
http_request =new ActiveXObject("Microsoft.XMLHTTP");

非IE浏览器会实例化为一个本地JavaScript对象（如：Firefox,Opera,Mozilla,Safari）

var http_request = new XMLHttpRequest();

10、XMLHttpRequest属性：

指定状态改变时所触发的事件处理器属性：http_request.onreadystatechange=getResult();

获取请求状态属性：readyState 5个值：0未初始化，1正在加载，2已加载，3交互中，4完成

获取服务器字符串响应属性：var h=http_request.responseText;

获取服务器的XML响应的属性：var xmldoc = http_request.responseXML;

返回服务器的HTTP状态码的属性：http_request.status
100继续发送请求；200请求已成功；202请求已接受，但尚未成功；400错误的请求；404文件未找到；408请求超时；500内部服务器错误；501服务器不支持当前请求所需要的某个功能。

11、XMLHttpRequest对象的常用方法：

创建新请求的方法：open("method","URL"[,asyncFlag[,"userName"[,"password"]]])

向服务器发送请求的方法：send(content)

设置请求的HTTP头的方法：setRequestHeader("header","value")

停止或放弃当前异步请求的方法：abort()

返回HTTP头信息的方法：getResponseHeader("headerLabel")或getAllResponseHeaders()

2/11/2019 2:06:02 AM

二〇一九年二月十一日星期一上午10时35分

第15章
jQuery基础

jQuery概述

jQuery下载与配置

jQuery选择器：工厂函数；基本选择器；层级选择器；过滤选择器；属性选择器；表单选择器

1、 jQuery是一套简洁、快速、灵活的JavaScript脚本库。

2、 下载与配置：把下载下来的库放入项目指定的文件夹JS中，然后在所有脚本文件<script>之前引用。

<script
type="text/javascript" scr="JS/jquery-3.3.1.min.js"></script>

3、 jQuery的工厂函数：$() 例如：$("div")  $("#username")
 $(".btn_grey")

4、 基本选择器：ID选择器、元素选择器、类名选择器、多种匹配条件选择器和通配符选择器。

一、ID选择器：$("#id");
id在页面中是唯一的，如果有两个相同的，JS可能会报错！

例如：$(document).ready(function(){                 //在页面加载完成后执行代码。

$("input[type='button']").click(function(){      //为按钮绑定单击事件

var
inputValue = $("#testInput").val();    //获取文本框的值

alert(inputValue);    //输出文本框的值

});  });

text():获取或者改变指定元素的文本

html():获取或改变指定元素的html元素以及文本

val():获取或者改变指定元素的value值（一般是表单元素）

以上3个都是jquery类库中的语法,基本没啥区别，都是获得当前对象的value值（一般是表单元素）

只是，this.value是js的原生语法；$(this).val()是jquery的语法，需要引入jquery库文件

二、元素选择器：$("element"); 多数情况下，元素选择器匹配的是一组数据。

例如：$(document).ready(function(){       //在页面加载完成后执行代码。

$("input[type='button']").click(function(){     //为按钮绑定单击事件

$("div").eq(0).html("<img
src='images/strawberry1.jpg'/>这里长出了一片草莓");  //获取第一个div元素

$("div").get(1).innerHTML="<img
src='images/fish1.jpg'/>这里的鱼没有了";    //获取第二个div元素

});  });

索引器eq()返回的还是一个JQ对象，所以，必须要用JQ方法HTML()来载入新元素

索引器get()返回的是一个JS对象（DOM对象），所以，必须要用DOM对象的方法innerHTML=""

三、类名选择器：$(".class"); 一个元素可以有多个CSS类，一个CSS类也可以匹配多个元素。

例如：$(document).ready(function()
{       //在页面加载完成后，由于没有绑定时间，立即执行代码。

var myClass = $(".myClass");                //选取DOM元素

myClass.css("background-color","#C50210");  //为选取的DOM元素设置背景颜色

myClass.css("color","#FFF");                //为选取的DOM元素设置文字颜色

});

四、复合选择器：$("selector1,selector2,selectN");
将多个选择器组合在一起，逗号分隔，"或"匹配。

返回一个jQuery包装集，利用索引器获取集合中的对象。

例如：$(document).ready(function() {

$("input[type=button]").click(function(){
//绑定按钮的单击事件

$("div,#span").addClass("change");    //添加CSS中定义的类：.change{}

});
});

JQ方法：addClass()向被选定的元素添加一个或多个类（空格分隔），但不会移除已存在的类。

五、通配符选择器：$("*");

5、层级选择器

(1)ancestor
descendant祖孙选择器：$("ancestor descendant"); 比如$("ul li");

(2)parent>child父子选择器：$("parent>child");直接子元素，比如$("form>input");

(3)prev+next兄弟选择器：$("prev+next");紧跟prev后面的next元素，比如$("div+img");

(4)prev~siblings兄弟族选择器：$("prev~siblings");prev后所有siblings元素,如$("div~ul");

6、过滤选择器

(1)简单过滤器，以：号开头匹配找到的第一个元素。

$("tr:first")    //匹配表格的第一行

$("tr:last")    //匹配表格的最后一行

$("tr:even")   //匹配索引值为偶数的行

$("tr:odd")    //匹配索引值为奇数的行

$("tr:eq(1)")   //匹配第二个div元素

$("tr:gt(0)")   //匹配第二个及以上的div元素

$("tr:lt(2)")    //匹配第二个及以下的div元素

$(":header")   //匹配全部的标题元素

$("input:not(:checked)")//匹配没被选中的元素

$(":animated ")  //匹配所有正在执行的动画

(2)内容过滤器：通过DOM元素包含的文本内容筛选。

过滤器       说明  示例

:contains(text)    匹配包含给定文本的元素       $("li:contains('DOM')")    //匹配含有“DOM”文本内容的li元素

:empty       匹配所有不包含子元素或者文本的空元素 $("td:empty")   //匹配不包含子元素或者文本的单元格(空元素)

:has(selector)     匹配含有选择器所匹配元素的元素         $("td:has(p)")    //匹配表格的单元格中含有<p>标记的单元格

:parent      匹配含有子元素或者文本的元素 $("td:
parent")    //匹配不为空的单元格，即在该单元格中还包括子元素或者文本

(3)可见性过滤器：$("input:visible").val() 获取显示的input的值；

$("input:hidden:eq(1)").val()获取第二个隐藏的input的值。

(4)表单对象的属性过滤器：

过滤器   说明 示例

:checked 匹配所有选中的被选中元素    $("input:checked")    //匹配checked属性为checked的input元素

:disabled匹配所有不可用元素    $("input:disabled")   //匹配disabled属性为disabled的input元素

:enabled 匹配所有可用的元素    $("input:enabled
")   //匹配enabled属性为enabled的input元素

:selected匹配所有选中的option元素    $("select
option:selected")   //匹配select元素中被选中的option

(5)子元素选择器

$('li:first-child').css('background',
'#ccc'); //每个父元素第一个li 元素

$('li:last-child').css('background',
'#ccc'); //每个父元素最后一个li 元素

$('li:only-child').css('background',
'#ccc'); //每个父元素只有一个li 元素

$('li:nth-child(odd)').css('background',
'#ccc'); //每个父元素奇数li 元素

$('li:nth-child(even)').css('background',
'#ccc'); //每个父元素偶数li 元素

$('li:nth-child(2)').css('background',
'#ccc'); //每个父元素第三个li 元素

7、 属性选择器：通过元素的属性作为过滤条件进行筛选对象。

$("div[name]");  $("div[name='test']");  $("div[name!='test']");

$("div[name*='test']")含有'test'    $("div[name^='test']")以'test'开头

$("div[name$='test']")以'test'结尾  $("div[id][name^='test']")复合属性

8、表单选择器：匹配经常在表单中出现，但不一定在表单中的元素。

$(":input");$("form :input");$(":button");$(":checkbox");$(":file");$(":hidden");

$(":image");$(":password");$(":radio");$(":reset");$(":submit");$(":text")

二〇一九年二月十一日星期一17时35分     (2/11/2019 5:34:47 PM)

第16章
jQuery控制页面和事件处理程序

jQuery控制页面：

对元素内容和值进行操作：对元素内容操作；对元素值操作

对DOM节点进行操作：创建节点、插入节点、删除复制替换节点

对元素属性进行操作

对元素的CSS样式进行操作：通过修改CSS类实现；通过修改CSS属性实现

jQuery的事件处理：

页面加载响应事件

jQuery中的事件

事件绑定：为元素绑定事件；移除绑定；绑定一次性事件处理

模拟用户操作：模拟用户的操作触发事件；模仿悬停事件

1、 元素的值通常都是元素的value属性值。

2、 元素的内容分文本内容和HTML内容：

对文本内容操作：获取：alert($("div").text());设置：$("div").text("设置包括HTML内容的新文本")

对HTML内容的操作：alert($("div").html());获取div中第一个元素的HTML内容

重新设置div元素的HTML内容：

$("div").html("<span
style='color:#FF0000'>我是通过html()方法设置的HTML内容"</span>);

3、对元素值操作：获取元素的值val();设置所有匹配的元素的值val(val);设置多项值val(arrVal)；

4、对DOM节点进行操作：查建插复删

(1)创建节点：创建新元素、将新元素插入到文档中（父元素中）。

方法一：var $p=$("<p></p>");  //把p标签赋值给$p

$p.html("<span style='color:#ff0000'>方法一添加的内容</span>");

$("body").append($p);

方法二：var $txtP=$("<p><span style='color:#ff0000'>方法二添加的内容</span></p>");

$("body").append($txtP);

方法三：$("body").append("<p><span style='color:#ff0000'>方法三添加的内容</span></p>");

(2)插入节点：在元素内部插入节点：append()在匹配的元素内部追加内容，appendTo()将匹配的元素追加到另一个元素的后面。prepend()prependTo()是追加到前面。

在元素外部插入：$("#B").after("<p>A</p>");//向id为B的元素的后面添加一个段落。

$("<p>test</p>").insertAfter("#B");//将要添加的段落插入到id为B元素的后面。

$("#B").before("<p>A</p>");//向id为B的元素前添加一个段落。

$("#B").insertBefore("#A");//将要id为B元素添加到id为A的元素前面。

(3)删除、复制和替换节点

$("#div1").empty();
//删除div1中的所有子节点。不删div1。

$("#div2").remove();  //删除id为div2的元素，包括div2本身。

复制节点：$(function(){

$("input").bind("click",function(){  //为按钮绑定单击事件

$(this).clone().insertAfter(this);  //复制自己但不复制事件处理

});

});

替换节点：replaceAll(selector)使用匹配的元素替换掉所有selector匹配的元素。

replaceWith(content)将所有匹配的元素替换成指定的HTML或DOM元素。

例如：$("#div1").replaceWith("<div>replaceWith()方法的替换结果</div>");

$("<div>replaceAll()方法的替换结果</div>").replaceAll("#div2");

5、 对元素属性的操作

获取属性：attr(name),如$("img").attr('src');

设置属性：attr(key,value) 如$("img").attr("title","草莓正在生长");

设置多个属性，键值对存储：如：$('div').attr({name:'hahaha',class:'happy'});

移除属性：$("#box").removeAttr('name class');

6、 对元素的CSS样式的操作

通过修改CSS类：$("div").addClass("blue
line");为全部div元素添加blue和line两个CSS类

$("div").removeClass("line");删除全部div元素中名称为line的CSS类

$("div").toggleClass("yellow");
当div元素中存在名为yellow类时则删除此类，否则添加

toggleClass(class,switch):当switch为true时添加类，为false时删除类

通过修改CSS属性：$("div").css("color");获取第一个匹配的div元素的color属性值。

$("img").css("border","1px
soild #000000"); 为全部img元素设置边框样式

$("tr").css({     以键值对的形式设置多个属性。

"background-color":"#0A65F3",

"font-size":"14px",

"color":"#FFFFFF"

});

7、jQuery的事件处理 “事件是脚本语言的灵魂”

页面加载文档就绪的时候：$(document).ready(function(){代码段});

可简写:$().ready(function(){代码段});

还可进一步简写：$(function(){代码段});   不提倡，因为不具可读性！

jQuery中的事件：

blur(
) 元素失去焦点

change(
) 用户改变域的内容 input, textarea,
select

click(
) 鼠标点击某个对象 几乎所有元素

dblclick(
) 鼠标双击某个对象 几乎所有元素

error(
) 当加载文档或图像时发生某个错误

focus(
) 元素获得焦点

keydown(
) 某个键盘的键被按下 几乎所有元素

keypress(
) 某个键盘的键被按下或按住 几乎所有元素

keyup(
) 某个键盘的键被松开 几乎所有元素

load(
fn ) 某个页面或图像被完成加载 window, img

mousedown(
fn ) 某个鼠标按键被按下 几乎所有元素

mousemove(
fn ) 鼠标被移动 几乎所有元素

mouseout(
fn ) 鼠标从某元素移开 几乎所有元素

mouseover(
fn ) 鼠标被移到某元素之上 几乎所有元素

mouseup(
fn ) 某个鼠标按键被松开 几乎所有元素

resize(
fn ) 窗口或框架被调整尺寸

scroll(
fn ) 滚动文档的可视部分时 window

select(
) 文本被选定 document, input, textarea

submit(
) 提交按钮被点击 form

unload(
fn ) 用户退出页面 window