过滤元素

1. filter()：过滤元素
2. hasClass()：检查有没有指定的类
3. is()：检查有没有指定的选择器

在元素集合中查找

1. find()：在子元素中查找
2. children()：匹配子元素集合
3. next()：查找下一个元素
4. nextAll()：后面所有元素
5. prev()：前面的元素
6. prevAll()：前面所有元素
7. siblings()：所有同辈元素
8. parent()：元素的父节点
9. parents()：元素的父节点的集合

<script type=”text/javascript”>

$(document).ready(function(e) {

$(“:button”).click(function(e) {

//$(‘form’).find(‘:text’).css(‘background-color’,’#930′); //在子元素中查找

/*

$(‘form>fieldset’).children(‘input’).each(function(index, element) { //获取子元素

console.log($(this));

});

*/

//$(‘#firstname’).next().next().css(‘background-color’,’#930′);

//$(‘#firstname’).nextAll().css(‘background-color’,’#930′);

//$(‘#city’).prev().prev().css(‘background-color’,’#930′);

//$(‘#city’).prevAll().css(‘background-color’,’#930′);

//$(‘#lastname’).siblings().css(‘background-color’,’#930′);

//$(‘#lastname’).parent().css(‘background-color’,’#930′);

$(‘#lastname’).parents(‘body’).css(‘background-color’,’#930′);

});

});

</script>

<p>锄禾日当午</p>

<form>

<fieldset>

<legend>在元素中查找</legend>

姓：<input type=”text” id=”firstname” value=”张” /><br />

名：<input type=”text” id=”lastname” value=”三峰” /><br />

城市：<input type=”text” id=”city” value=”上海” /><br>

<input type=”button” value=”点击” id=”btn” />

</fieldset>

</form>

链式操作

把多个操作用“.”连成一行，用来简化操作。

原理：每个方法执行完毕后，将当前对象返回出来。

例题

DOM操作

在元素的内部添加内容

1. 在内部的后面添加内容
   1. A. append(B)：将B添加到A里面的后面
   2. A. appendTo(B)：将A添加到B里面的后面

1. 在内部的前面添加内容
   1. A.prepend(B)：在A的内部的前面添加B的内容
   2. A.prependTo(B)：将A添加到B的内部的前面

在元素的外部添加内容

1. 在元素外部的后面
   1. A.after(B)：将B插入到A外部的后面
   2. A.insertAfter(B)：将A插入到B的外部的后面

1. 在元素外部的前面
   1. A.before(B)：将B插入到A的外部的前面
   2. A.insert Before(B)：将A插入到B的外部的前面

例题（年月日）

效果：选择年和月，自动显示对应的天数

<script type=”text/javascript”>

//添加option标签

function insertOption(end,target){

for(var i=1;i<=end;i++){

$(‘<option>’).html(i).attr(‘value’,i).appendTo($(‘#’+target));

}

}

//添加年

function addYear(){

var yy=<?php echo date(‘Y’)?>;

for(var i=yy;i>=yy-100;i–){

$(‘<option>’).html(i).attr(‘value’,i).appendTo($(‘#year’));

}

}

//添加月

function addMonth(){

insertOption(12,’month’)

}

//添加日

function addDay(){

$(‘#day’).html(”);

var yy=$(‘#year’).val();

var mm=$(‘#month’).val();

if(mm==1||mm==3||mm==5||mm==7||mm==8||mm==10||mm==12){

insertOption(31,’day’);

}else if(mm==2){

if(yy%4==0 && yy%100!=0 || yy%400==0){

insertOption(29,’day’)

}else{

insertOption(28,’day’);

}

}

else

insertOption(30,’day’);

}

$(document).ready(function(e) {

addYear();

addMonth();

addDay();

$(‘#year,#month’).change(function(e) {

addDay();

});

});

</script>

<form id=”form1″ name=”form1″ method=”post” action=””>

<select name=”year” id=”year”></select>年

<select name=”month” id=”month”></select>月

<select name=”day” id=”day”></select>日

</form>

运行结果

例题（模拟126邮箱注册效果）

Sprits技术

将页面用到的许多小图拼到一个大图上，通过CSS来显示不同的区域。可以有效的减少往返次数。

<style type=”text/css”>

/*按钮的样式*/

.btn{

width:119px;

height:37px;

background-image:url(images/glb_v2.png);

background-repeat:no-repeat;

background-position:-146px -362px;

cursor:pointer;

}

/*鼠标移动到按钮上*/

.btn:hover{

background-position:-289px -362px;

}

</style>

用户名：<input type=”text” /><br />

<input type=”button” value=”返回” class=”btn” />

<input type=”button” value=”提交” class=”btn” />

运行结果

模仿126邮箱注册

<style type=”text/css”>

*{

margin:0px;

padding:0px;

font-size:14px;

font-family:’微软雅黑’;

}

dt,dd{

float:left;

}

.txt{

width:300px;

height:17px;

border:#7B7B7B solid 1xp;

}

.bg>span,.span{

width:14px;

height:14px;

display:inline-block;

background:url(images/glb_v2.png) no-repeat -36px -288px;

}

.bg{

color:#C00;

display:none;

}

</style>

<script type=”text/javascript” src=”js/jquery-1.8.3.min.js”></script>

<script type=”text/javascript”>

$(document).ready(function(e) {

//设置样式

$(‘#pwd’).blur(function(e) {

var pwd=$(this).val();

if(!(pwd.length>=6 && pwd.length<=16)){

//方法一：

/*

$(‘dd>div:first’).hide(); //隐藏

$(‘dd>div:last’).show(); //显示

*/

//方法二

var span=$(‘<span>’).addClass(‘span’);

$(‘dd>div:first’).html(‘密码长度是6~16个字符’).prepend(span)

}

});

});

</script>

</head>

<body>

<form>

<dl>

<dt>密码：</dt>

<dd>

<input type=”password” id=”pwd” class=”txt” />

<div>6~16个字符，区分大小写</div>

<!–<div class=”bg”><span></span>密码长度是6~16个字符</div> –>

</dd>

</dl>

</form>

替换DOM元素

1. replaceAll(选择器)
2. replaceWith(内容)

例题

<style type=”text/css”>

.light{

color:#F00;

}

</style>

<script type=”text/javascript” src=”js/jquery-1.8.3.min.js”></script>

<script type=”text/javascript”>

$(document).ready(function(e) {

$(‘#key’).blur(function(e) {

if($(this).val()==”)

return;

//清空样式

$(‘.light’).each(function(index, element) {

$(this).replaceWith($(this).text()); //通过自己的文本替换自己节点

});

//添加样式

var reg=new RegExp($(this).val(),’g’); //实例化正则表达式而

var str=$(‘#content’).html().replace(reg,'<span class=”light”>’+$(this).val()+'</span>’); //内容替换

$(‘#content’).html(str);

});

});

</script>

</head>

<body>

<input type=”text” id=”key” />

<div id=”content”>

<h3>月饼机_月饼机价格月饼机老品牌值得信赖</h3>

杭州旭众新型小型月饼机厂家 出面出馅更加稳定,小型月饼机厂家 一机多用,价格实惠!老品牌小型月饼机厂家 值得信赖.更有服务到家,全国联保.购机无忧!小型月饼机厂家

</div>

运行结果

删除DOM元素

1. empty()：清空节点中的内容
2. remove()：删除节点

克隆DOM元素

1. clone()：只复制对象节点
2. clone(true)：复制对象节点及对应的事件

获取对象的长度和对象的索引

获取长度的方法

1. length
2. size()

获取元素的索引

index()：索引号从0开始

DOM对象和jQuery对象互换

如果要用jQuery的方法就必须要转成jQuery对象

如果要用JS方法必须转成DOM对象

实现转换：

1. 将DOM对象转成JQuery对象：通过$()或jQuery()
2. 将JQuery对象转成DOM对象：通过get()或数组的方式

缓存数据

1. data(name)：获取缓存数据
2. data(name,value)：缓存数据

几个常用的方法

1、$.merge()

2、$.trim()

1. 能够解释dom对象和jQuery对象的区别
2. 能够将dom对象和jQuery对象相互转换
3. 能够将内容插入到元素内部或外部
4. 能够清空元素内容或删除元素本身
5. 能够使用replaceWith()替换元素
6. 能够复制指定元素
7. 能够把内容从外面包裹上新元素
8. 能够使用元素查找或匹配的多个方法
9. 能够使用bind()方法绑定事件
10. 能够熟练使用jQuery的常规事件绑定语法
11. 能够使用事件切换方法hover(),toggle()
12. 能够使用jQuery的基本特效方法 show(),hide(),toggle()
13. 能够使用jQuery的滑动特效方法 slideDown(),slideUp(),slideToggle()
14. 能够使用jQuery的淡入淡出特效方法
15. 能够理解jQuery中插件的作用
16. 能够制作自定义插件
17. 能够使用jQuery实现ajax的get请求
18. 能够使用jQuery实现ajax的post请求

目录

一、回顾与加强

1、JavaScript错误类型及特点

1、编译类型的错误

编译错误就是语法错误。

2、执行错误

语法上没有错误，结合上下午出现的错误，比如调用了一个不存在的变量或函数等。

2、事件

1、事件驱动式

事件驱动式由：用户的行为+JavaScript引擎捕获用户的行为+调用处理函数。实际上就是一个事件的组成。

2、事件处理函数的绑定与执行

①、行内绑定

在HTML标签内指定事件并写处理程序。

②、行内绑定—动态绑定

如果事件的处理程序又大段的js代码，那么直接写到行内，肯定是不合理的，解决的办法是将大段的js代码封装成函数，然后触发事件的时候，调用这个函数。

③、动态绑定

通过获取元素（标签、节点）的dom对象，然后给dom对象绑定事件的方式来实现事件的绑定。

3、在事件处理程序中，this分别表示什么

①、行内绑定

②、行内绑定—动态执行

③、动态绑定

二、闭包

1、概念

闭包，指的是词法表示包括不被计算的变量的函数，也就是说，函数可以使用函数之外定义的变量。

2、特点（作用）

1、和作用域的特定一致

可以在函数内部使用函数外部的变量。

2、使用闭包，内存不会释放

3、案例

1、点击页面中的三个li标签，能够正常输出li的下标

上面案例的另一种写法：

2、页面刷新后，每隔1秒分别输出1/2/3/4/5

三、DOM

1、什么是DOM

DOM全称是Document Object Model（文档对象模型），它是JS将HTML按文档结构和内容层次抽象出的模型，使得JS有了访问HTML的能力，能够实现对HTML中内容的操作。DOM存在广泛，PHP以及其他语言也有各自的DOM模型。

DOM模型呈现树状结构，因此也叫“树模型”，树中的内容（标签、属性、文本）称为“节点”，包含有元素节点（标签）、属性节点、文本节点。每个节点，都是一个dom节点对象。

2、节点与DOM模型

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

整个文档是一个文档节点，用document对象表示

每个 HTML 元素是元素节点，比如html、head、body、a、h1

HTML 元素内的文本是文本节点

每个 HTML 属性是属性节点，比如href

注释是注释节点

3、节点之间的关系

4、元素节点查询操作

1、基于文档（document）查询

document.getElementById(元素id); //得到一个dom对象

document.getElementsByTagName(标签名); //得到的是一个数组，数组的每个单元是一个dom对象

前面这两种方法推荐使用，因为兼容性好。

document.getElementsByClassName(类名); //IE8+支持，就是从IE9支持 得到的是一个数组，数组的每个单元是一个dom对象

document.getElementsByName(元素的name属性); //得到的是一个数组

//h5中提供的方法

document.querySelector(css选择器); //IE7+支持 得到的是一个dom对象

document.querySelectorAll(css选择器); //IE7+支持 得到的是一个数组

测试的html：

js代码及效果：

2、相互关系查询

①、根据父节点查找子节点

②、根据子节点查父节点

③、查询兄弟节点

3、遗留DOM

早期DOM访问形式，在一些特定元素的获取上比较方便。被保留下来使用，W3C标准化之后 称为“0级DOM”。

document.body 访问body节点

document.forms 访问所有的表单 返回集合

document.formName[index].name 访问表单项

document.anchors 访问所有的锚点 返回集合

document.links 访问所有的链接 返回集合

document.images 访问所有的图片 返回集合

document.all 访问所有的元素

5、元素节点增删改操作

1、增加元素节点/创建节点

方法一：父节点.appendChild(子节点)

方法二：父节点.insertBefore(新节点, 参照的节点);

2、修改节点

方法：父节点.replaceChild(新节点, 待替换的节点);

3、删除节点

方法：父节点.removeChild(子节点);

6、属性节点操作

1、获取元素的属性

elementNode.attributes 获取元素的所有属性

elementNode.getAttribute() 读取一个属性值

elementNode.属性名 获取元素的属性

2、添加/修改元素的属性

elementNode.setAttribute() 设置（修改/添加）一个属性值

elementNode.属性名 = 值 设置元素的属性

3、删除元素的属性

elementNode.removeAttribute() 删除一个属性

4、判断元素是否有哪个属性

elementNode.hasAttribute() 检测是否有某个属性，有返回true，没有返回false

5、案例—全选，反选，取消

代码见19全选反选取消.html

7、操作css样式

1、设置css样式：

语法： node.style.css样式 = 值

不带中横线的css：node.style.样式 = 值。比如有color，border，width

带中横线的，样式要去掉中横线，后面的首字母大写，backgroundColor、fontSize、lineHeight

2、获取css样式

使用node.style.样式的方式只能获取行内样式和js已经设置过的样式。

在IE8及更低版本浏览器中支持node.currentStyle.样式

高版本浏览器支持getComputedStyle(node).样式

兼容的性的写法：

8、DOM属性

DOM有四个属性，分别是：

innerHTML

获取/设置元素里的html内容

nodeName

nodeName 是只读的

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

属性节点的 nodeName 与属性名相同

文本节点的 nodeName 始终是 #text

文档节点的 nodeName 始终是 #document

nodeValue

元素节点的 nodeValue 是 undefined 或 null

文本节点的 nodeValue 是文本本身

属性节点的 nodeValue 是属性值

nodeType

表示节点的类型

元素 1

属性 2

文本 3

注释 8

文档 9

案例：完成兼容性的查找子节点的方法，及查找上一个兄弟的方法，及查找下一个兄弟的方法

获取子元素的兼容性写法：

获取上一个兄弟的兼容性写法：

获取下一个兄弟的兼容性写法：

9、获取元素的位置

offsetLeft 元素在网页中水平坐标值 ele.offsetLeft

offsetTop 元素在网页中垂直坐标值 ele.offsetTop

offsetWidth 元素在页面中占据的宽度 ele.offsetWidth

offsetHeight 元素在页面中占据的高度 ele. offsetHeight

HTML+css：

js及输出结果：

scrollLeft 滚动条在容器中水平滚动的距离 ele.scrollLeft

scrollTop 滚动条在容器中垂直滚动的距离 ele.scrollTop

测试的时候，先将页面设置的大一点，能看到滚动条：

当滚动条滚动的时候，输出滚动的距离：

回顾

1. 函数预加载：在页面编译的时候就将函数编译到内存中，就可以先调用，再定义。
2. 通过arguments关键字可以实现传递的参数个数不一样
3. 事件：以on开头的都是事件
4. 事件后面肯定有事件处理程序，事件处理程序一般都是函数
5. 函数调用
   1. 方法一：<标签 事件=’函数()’>
   2. 方法二：对象.事件=函数
6. 匿名函数：没有名字的函数
7. 匿名函数自调用 (匿名函数)();
8. return
   1. 作用一：终止函数的执行
   2. 作用二：从函数内部将值返回到调用处
9. 变量的作用域
   1. 全局变量：供整个页面使用
   2. 局部变量：在函数内部使用变量，注意在函数内部通过var声明的变量是局部变量，不通过var声明的是全局变量。
10. Js嵌入到页面的方法
    1. 方法一：直接写在事件处理程序中 <p onclick=’alert(‘锄禾日当午’)’>
    2. 方法二：通过<script>开头，</script>结束嵌套在页面的内部
    3. 方法三：写在页面的外部，通过<script>标记引入到页面内部
11. 特殊含义的字符
    1. \r：回车
    2. \n：换行
    3. \t：制表位
12. 转义字符：\ 将具有特殊含义的字符转成普通字符
13. 对象：由属性（变量）和方法（函数）组成的组合。
    1. 对象.属性
    2. 对象.方法()

对象的分类

1. HTML：就是HTML元素
2. 脚本对象
3. 浏览器对象

脚本对象

Array（数组）

数组也属于对象

常用的一些方法与属性

<script type=”text/javascript”>

var stu=new Array(‘tom’,’berry’,’ketty’);

document.write(‘排序后:’+stu.sort()+'<br>’); //排序

document.write(‘翻转后:’+stu.reverse()+'<br>’); //反转

document.write(‘连接后：’+stu.join(‘>>>’)+'<br>’) //将数组元素连接起来

document.write(‘数组长度：’+stu.length+'<br>’); //数组的长度

stu.unshift(‘李白’);//在数组的前面插入

document.write(‘unshift：’+stu+'<br>’);

stu.shift(); //将数组的第一个元素删除

document.write(‘shift：’+stu+'<br>’);

stu.push(‘杜甫’); //将元素插入到数组的后面

document.write(‘push：’+stu+'<br>’);

stu.pop(); //删除数组的最后一个元素

document.write(stu);

</script>

String（字符串）

字符串的声明

方法一：把字符串当成基本类型直接赋值

方法二：把字符串当成对象来声明

字符串是基本类型，在字符串运行的时候会在内存中生成一个临时对象，通过临时对象调用属性和方法

1. 截取子字符串 语法： 字符串.substr(开始位置,[截取长度])

1. 截取子字符串 语法：字符串.substring(起始位置，结束位置)

例题

1. indexOf()：返回 String 对象内第一次出现子字符串的字符位置
2. lastIndexOf（）：返回字符串最后出现的位置

1. toLowerCase()：转成小写
2. toUpperCase()：转成大写

1. 字符串长度

多学一招：字符串可以当成字符数组来使用

Math（数学）

例题：产生一个1~100的随机整数

Date（日期）

Date()对象的方法有很多，我们可以把它分为3组

第一组：setXXX：设置时间

第二组：getXXX：获取时间

第三组：toXXX：转化时间格式

例题：获取当前时间

例题：转换时间格式

例题：上月的1号是星期几？

浏览器对象

浏览器的分层结构

window（窗口）

在浏览器对象中最顶层的对象。

脚下留心：由于window是最顶层对象，所以window可以省略。

document（文档）【重点】

1. window.document.write(‘’)；将字符串输出到浏览器上
2. document.bgColor=’#cccccc’; //背景色
3. document.fgColor=’#FF0000′; //前景色
4. 获取网页标签对象（重点）

例题：标签属性进行取值赋值

<input type=”text” id=”txt”>

<script type=”text/javascript”>

window.onload=function(){

var oTxt=document.getElementById(‘txt’);

oTxt.onblur=function(){

//alert(oTxt.value);

//alert(oTxt.type); //text

oTxt.type=’button’; //给属性赋值

oTxt.value=’确定’; //给属性赋值

}

}

</script>

结果：当文本框失去焦点的时候变成按钮

history（历史）

back ( ) 方法相当于后退按钮

forward ( ) 方法相当于前进按钮

go (1)代表前进1页，等价于forward( )方法；

go(-1) 代表后退1页，等价于back( )方法；

第一页

当前是第一页

<a href=”11-history2.html”>跳转到第二页</a>

第二页

<script type=”text/javascript”>

function myforward(){

//history.forward(); //前进一级 等价于

history.go(1);

}

</script>

当前是第二页

<a href=”11-history3.html”>跳转到第三页</a>

<input type=”button” value=”前进一级” onclick=’myforward()’>

第三页

<script type=”text/javascript”>

function myback(){

//history.back(); //返回上一级，等价于下一句

history.go(-1);

}

</script>

这是第三页<br>

<input type=”button” value=”返回一级” onclick=’myback()’><br>

<input type=”button” value=”返回两级” onclick=’history.go(-2)’>

location（地址）

location对象主要用来做页面的跳转

属性：href——设置或检索完整的 URL 字符串

方法：

assign(“url”)：跳转到指定页面

reload()：重新加载当前页面

replace(“url”) ：通过加载 URL 指定的文档来替换当前文档

例题：

<script type=”text/javascript”>

function jump1(){

//通过更改location的属性来跳转

alert(location.href); //当前的url地址

location.href=’4-生成1~100的随机整数.html’;

}

function jump2(){

//通过方法来跳转

location.assign(‘4-生成1~100的随机整数.html’);

}

function jump3(){

//将其他页面加载到当前窗口上来，reload()是用来做刷新的

//location.reload(‘4-生成1~100的随机整数.html’);

location.reload(); //刷新本页面

}

function jump4(){

//跳转完毕后不能点击”后退”按钮

location.replace(‘4-生成1~100的随机整数.html’);

}

</script>

<input type=”button” value=”href属性跳转” onclick=’jump1()’> <br>

<input type=”button” value=”assign()跳转” onclick=’jump2()’> <br>

<input type=”button” value=”reload()【刷新】” onclick=’jump3()’> <br>

<input type=”button” value=”replace()” onclick=’jump4()’>

screen（屏幕）【了解】

包含有关客户端显示屏幕的信息

注意：没有应用于 screen 对象的公开标准，不过所有浏览器都支持该对象。

width：返回显示器屏幕的宽度。

height：返回显示屏幕的高度。

availWidth：返回显示屏幕的宽度 (除 Windows 任务栏之外)。

availHeight：返回显示屏幕的高度 (除 Windows 任务栏之外)。

例题

<script type=”text/javascript”>

document.write(‘屏幕宽度：’+screen.width+'<br>’);

document.write(‘屏幕高度：’+screen.height+'<br>’);

document.write(‘屏幕宽度(不包含任务栏)：’+screen.availWidth+'<br>’);

document.write(‘屏幕高度(不包含任务栏)：’+screen.availHeight+'<br>’);

</script>

脚下留心：screen对象的属性都是只读属性

navigator（导航）【了解】

navigator 对象包含有关浏览器的信息。

注意：没有应用于 navigator 对象的公开标准，不过所有浏览器都支持该对象。

appCodeName：返回浏览器的代码名。

在所有以 Netscape 代码为基础的浏览器中，它的值是 “Mozilla”。为了兼容起见，在 Microsoft 的浏览器中，它的值也是 “Mozilla”。

appName：返回浏览器的名称。

appVersion：返回浏览器的平台和版本信息。

对象操作语句

this语句

this表示当前对象

with语句

with用来执行一组方法和属性，所有的属性和方法都属于with后面的对象

<script type=”text/javascript”>

with(document){

write(‘锄禾日当午<br>’);

write(‘汗滴禾下土<hr>’);

bgColor=’#cccccc’;

fgColor=’#FF0000′;

}

with(Math){

document.write(PI+'<br>’);

document.write(abs(-10)+'<br>’);

}

</script>

eval语句

用来执行字符串表达式

DOM和BOM

DOM：document object model 文档对象模型

BOM：brower object model 浏览器对象模型

DOM由HTMDOM，XMLDOM，CSSDOM组成

CSSDOM的语法结构：对象.style.样式属性

oDiv.style.width

oDiv.style.height

例题

表单验证

难点：

1. 验证表单的函数在表单提交的时候调用，表单提交的事件是onsubmit
2. Onsubmit事件后面如果return fasle就终止提交，return true就提交

代码

<script type=”text/javascript”>

function check(){

//验证用户名

var oUser=document.getElementById(‘username’); //获取用户名的文本框对象

if(oUser.value==”){

alert(‘用户名不能为空’);

oUser.focus(); //获取焦点

return false;

}

//验证密码

var oPwd=document.getElementById(‘pwd’); //获取密码对象

if(oPwd.value==”){

alert(‘密码不能为空’);

oPwd.focus();

return false

}else{

if(oPwd.value.length!=6 || isNaN(oPwd.value)){

alert(‘密码必须是6位的数字’);

oPwd.select(); //选中文本框的内容

return false;

}

}

return true;

}

</script>

<form action=”” method=’post’ onsubmit=’return check()’>

<table>

<tr>

<td>用户名：</td>

<td><input type=”text” id=”username”></td>

</tr>

<tr>

<td>密码：</td>

<td><input type=”password” id=”pwd”></td>

</tr>

<tr>

<td colspan=’2′ align=’center’>

<input type=”submit” value=”提交”>

</td>

</tr>

</table>

</form>

设置时钟周期

设置定时器

作业

1. 打印100以内的6的倍数，一行放7个
2. 求一元二次方程的根
3. 倒计时