jQuery分解.docx
《jQuery分解.docx》由会员分享，可在线阅读，更多相关《jQuery分解.docx（11页珍藏版）》请在冰豆网上搜索。
jQuery分解
第1章jQuery入门
1、jQuery基本代码：
$（document）.ready（function（）{
}）
或
$（）.ready（function（）{
}）
或
$（function（）{
}）
2、表格对象的奇偶行：
$（“tr:
even”）:
表格的偶数行2,4,6,8,10......
$（“tr:
odd”）:
表格的奇数行1,3,5,7,9......
3、获取DOM对象的方法：
a）document.getElementById（“id”）
b）document.getElementsByName（“name”）
c）document.getElementsByTagName（“TagName”）
4、jQuery对象：
通过ID获取对象的代码：
$（“#id”）
等价于DOM对象的代码：
Document.getElementById（id）
5、jQuery对象和DOM对象的相互转化
a）jQuery对象转换为DOM对象：
[index]或.get（index）
如：
varcr=$jq[0]或varcr=$jq.get（0）
b）DOM对象转换为jQuery对象
如：
var$jq=$（cr）
注意：
jQuery对象不能使用DOM对象的方法
DOM对象不能使用jQuery对象的方法
6、CSS样式：
a）按选择器划分
i.类选择器：
样式名称以小圆点.开头
ii.标签选择器：
以标签名命名
iii.ID选择器：
样式名称以#开头
b）按书写位置划分
i.行内样式：
写在每个标签中的style属性里
ii.内嵌样式：
写在head标签中的style标签里
iii.外部样式：
外部css文件
7、addClass方法：
动态给jQuery对象添加一个类样式
8、removeClass方法：
动态移除jQuery对象上的某个类样式
课后练习：
第一章
1、注册页面中单击注册按钮时，如果没有勾选同意协议的复选框，则弹出请同意会员协议条款的提示框，否则跳转到注册成功页面
2、实现双色行效果，且当鼠标滑入某个单元格时实现高亮显示。
第2章jQuery选择器
1、什么是jQuery选择器：
一串具有特殊含义的字符串。
把DOM对象包装为jQuery对象。
2、选择器的特性
a）简化代码编写
b）隐式迭代
c）无需判断对象是否存在：
不产生异常
3、基本选择器：
根据id选择元素：
$（"#id"）
根据标签名选择元素：
$（"标签名"）
根据class选择元素：
$（".class"）
选择所有的元素：
$（"*"）
根据多种选择器选择元素：
$（"selector1,selector2..."）
1、选择ID为one的元素：
$（"#one"）
2、选择class为mini的所有元素：
$（".mini"）
3、选择元素名为div的所有元素：
$（"div"）
4、选择所有元素：
$（"*"）
5、选择所有的span元素和id为two的元素：
$（"span,#two"）
4、层次选择器：
选择所有的子孙后代：
$（"选择器1选择器2"）
选择所有的儿子：
$（"选择器1>选择器2"）
选择下一个兄弟元素：
$（"选择器1+选择器2"）
选择后面所有的兄弟元素：
$（"选择器1~选择器2"）
1、选择body内的所有的div：
$（"bodydiv"）
选择div内的所有class为mini的元素：
$（"div.mini"）
2、在body内，选择子元素是div的：
$（"body>div"）
选择div内的id为three的子元素：
$（"div>#three"）
3、选择class为one的下一个div元素：
$（".one+div"）
选择id为two的下一个class为mini的元素：
$（"#two+.mini"）
4、选择id为two的后面所有的div元素：
$（"#two~div"）
选择id为one的后面所有的class为mini的元素：
$（"#one~.mini"）
5、过滤器：
1、选择第一个元素：
:
first
2、选择最后一个元素：
:
last
3、选择去掉指定的选择器的元素：
:
not（选择器）
4、选择索引值为偶数的元素：
:
even
5、选择索引值为奇数的元素：
:
odd
6、选择等于某个索引值的元素：
:
eq（index）
7、选择大于某个索引值的元素：
:
gt（index）
8、选择小于某个索引值的元素：
:
lt（index）
9、选择所有的header元素：
:
header
10、选择所有正在执行动画的元素：
:
animated
6、内容过滤器：
1、匹配包含某个文本的元素：
:
contains（text）
2、匹配不含有子元素或文本的元素：
:
empty
3、匹配含有指定的选择器的元素：
:
has（选择器）
4、匹配含有子元素或文本的元素：
:
parent
7、可见性过滤器：
1、匹配所有可见的元素：
:
visible
2、匹配所有不可见的元素：
:
hidden
8、表单选择器：
1、选择所有的表单元素（input、textarea、select、button）
:
input
2、选择所有的文本框：
:
text
3、选择所有的密码框：
:
password
4、选择所有的单选按钮：
:
radio
5、选择所有的复选框：
:
checkbox
6、选择所有的提交按钮：
:
submit
7、选择所有的重置按钮：
:
reset
8、选择所有的普通按钮：
:
button
9、选择所有的文件域：
:
file
10、选择所有的隐藏域：
:
hidden
11、选择所有的图像域：
:
image
![]()
img
12、选择所有的多行文本框：
textarea
13、选择所有的下拉列表框：
select
9、表单过滤器
匹配所有的可用元素：
:
enabled
匹配所有的不可用元素：
:
disabled
匹配所有被选中的元素：
:
checked
匹配所有选中的选项：
:
selected
10、如果属性值中含有'.'、'#'、'（'、']'等特殊字符，必须使用转义符进行转义
如：
$（"my#name"）必须写成$（"my\\#name"）
11、选择器中空格的含义：
$（".myClass:
hidden"）表示选择class为myClass的元素当中的隐藏子元素
$（".myClass:
hidden"）表示选择隐藏的class为myClass的元素
课后练习：
1）给页面的每一个p标签编写click事件，单击任意一个p标签时
弹出该p标签中的文本内容
2）获取所有被选中的复选框的文本
3）鼠标移进一个层时，另一个层显示；移出则另一个层隐藏
4）当焦点进入文本框时，文本框中的文本内容自动消失；
失去焦点时，如果文本框中的值没有改变，则自动还原成初始值
第3章DOM操作和事件处理
1、创建元素：
a）vara=$（“所创建元素的静态代码”）
b）js：
vara=document.createElement（标签名）
2、插入元素
a）在前面的元素中插入后面的元素：
i.append（）：
元素内部追加另一个元素
ii.prepend（）：
元素内部前置另一个元素
iii.after（）：
元素后面插入另一个元素
iv.before（）：
元素前面插入另一个元素
b）在后面的元素中插入前面的元素：
i.appendTo（）：
元素内部追加另一个元素
ii.prependTo（）：
元素内部前置另一个元素
iii.insertAfter（）：
元素后面插入另一个元素
iv.insertBefore（）：
元素前面插入另一个元素
3、复制元素
a）clone（）
b）clone（true）：
复制元素的同时复制该元素的事件
4、删除元素
a）remove（）
5、设置属性
a）获取属性：
attr（属性名）
b）修改属性：
attr（属性名,属性值）
c）移除属性：
removeAttr（属性名）
6、设置样式
a）添加样式：
addClass（类样式名）
b）移除样式：
removeClass（类样式名）
7、window.onload和$（document）.ready（）的区别
a）window.onload不能多次使用，$（document）.ready（）可以出现多次
b）$（document）.ready（fn）可以简写；$（）.ready（fn）;$（fn）
---fn代表函数
8、常用事件：
a）click（）：
单击事件
b）change（）：
下拉列表框选项发生改变事件
c）mouseover（）：
鼠标移入事件
d）mouseout（）：
鼠标移开事件
e）focus（）：
获取焦点事件
f）blur（）：
失去焦点事件
g）each（）：
循环所有元素
9、其他常用函数：
a）siblings（）：
当前对象的其他兄弟姐妹
b）next（）：
当前对象的下一个兄弟
c）show（）：
显示
d）hide（）：
隐藏
e）index（）：
获取索引值
10、其他函数
a）bind（type,fn）：
绑定事件
b）one（type,fn）：
一次性绑定
c）unbind（type,fn）：
撤销绑定
d）trigger（event）：
在页面加载的时候执行该事件
e）event：
事件
f）target：
触发者
g）type：
事件类型
h）this：
事件对象
i）data：
传入参数
j）Result：
返回值
k）pagex/y：
水平/垂直坐标
第4章动画和插件
1、动画函数
a）Show（speed,[callBack]）
b）Hide
c）Fadein
d）Fadeout
e）Slideup
f）Slidedown
g）Animate（params,speed,[callback]）
h）Speed的取值为：
slow，normal，fast，时间值（单位：
毫秒）
2、表单验证
a）$（“#表单ID”）.validate（）----设置需要验证的元素为对应的类样式
b）$（“#表单ID”）.validate（{
rules：
{//验证规则
元素1name:
{
验证条件1:
true,
验证条件2:
true,
……
},
元素2name:
{
验证条件1:
true,
验证条件2:
true,
……
}
},
Messages:
{//自定义验证提示文本
元素1name:
{
验证条件1:
提示信息,
验证条件2:
提示信息,
……
},
元素2name:
{
验证条件1:
提示信息,
验证条件2:
提示信息,
……
}
},
errorElement:
’元素名’,
Success:
function（）{
//验证通过后的提示信息和样式
}
}）
第5章Ajax应用
1、JavaScript对象
a）创建对象
Java:
类名对象名=new类名（）;
VarobjectA=newObject（）;
VarobjectB=Object（）;//省略new关键字
b）创建对象属性并赋值
对象名.属性名=值;
objectA.name=’张三’;
objectB.name=’’
objectB.address=’’
objectA.school=objectB
c）访问属性
对象名.属性名
Alert（objectA.school）
d）嵌套属性：
对象名.属性名=对象名
e）用索引方式访问
2、Json对象
a）创建JSON对象：
使用{}创建一个对象
b）创建对象属性并赋值：
使用属性名:
值创建属性并赋值
c）访问属性：
对象名.属性名
d）创建json对象集合：
var对象名=[json对象1,json对象2……]
e）创建并调用json对象方法：
方法名:
function（）{}
对象名.方法名（）
3、Ajax
a）概念：
AsynchronousJavaScriptandXML，不是一门新的语言，而是多种技术的组合。
包括：
i.使用XHTML和CSS标准化呈现
ii.使用DOM实现动态显示和交互
iii.使用XML和XSLT进行数据交换与处理
iv.使用XMLHttpRequest进行异步数据读取
v.最后用JavaScript绑定和处理所有数据
4、XMLHttpRequest对象
a）XMLHttpRequest对象常用属性和事件
i.readyState
1.初始化状态:
0
2.Open（）方法已调用：
1
3.Send（）方法已调用：
2
4.所有响应头部都已经接收到。
响应体开始接收但未完成：
3
5.HTTP响应已经完全接收：
4
ii.responseText属性：
客户端接收到的HTTP响应的文本内容
iii.XMLHttpRequest对象常用方法
（1）open（）：
初始化HTTP请求参数
（2）send（）：
发送HTTP请求
5、jQuery中的Ajax
a）get（）方法：
$.get（url,[data],[callback],[type]）
b）Post（）方法:
$.get（url,[data],[callback],[type]）
c）load（）方法：
$（）.load（url,[data],[callback]）
d）getJSON（）方法:
$.getJSON（url,[data],[callback]）
e）ajax（）方法:
$.ajax（options）
注意：
方法中的参数data表示请求的数据，也就是页面传给服务器的数据，而回调函数中的data表示响应的数据，也就是服务器返回给页面的数据。
升级会员 