jQuery初学者入门文档Word下载.docx
《jQuery初学者入门文档Word下载.docx》由会员分享，可在线阅读，更多相关《jQuery初学者入门文档Word下载.docx（22页珍藏版）》请在冰豆网上搜索。
）表示取id为"
（<
span
id="
/span>
）的元素.
我将从以下几个内容来讲解jQuery的使用:
1:
核心部分
2:
DOM操作
3:
css操作
4:
javascript处理
5:
动态效果
6:
event事件
7:
ajax支持
8:
插件程序
一：
核心部分
$（expr）
说明：
该函数可以通过css选择器，Xpath或html代码来匹配目标元素，所有的jQuery操作都以此为基础
参数：
expr：
字符串，一个查询表达式或一段html字符串
例子：
未执行jQuery前：
one<
div>
<
two<
/div>
three<
a
href="
#"
id="
test"
onClick="
jq（）"
jQuery<
/a>
jQuery代码及功能：
function
jq（）{
alert（$（"
div
）.html（））;
}
运行：
当点击id为test的元素时，弹出对话框文字为two，即div标签下p元素的内容
jq（）{
Hello<
）.appendTo（"
body"
当点击id为test的元素时，向body中添加“<
”
$（elem）
限制jQuery作用于一个特定的dom元素，这个函数也接受xml文档和windows对象
elem：
通过jQuery对象压缩的DOM元素
alert（$（document）.find（"
$（document.body）.background（"
black"
当点击id为test的元素时，背景色变成黑色
$（elems）
限制jQuery作用于一组特定的DOM元素
一组通过jQuery对象压缩的DOM元素
form
form1"
input
text"
name="
textfield"
submit"
Submit"
value="
提交"
/form>
$（form1.elements
）.hide（）;
当点击id为test的元素时，隐藏form1表单中的所有元素。
$（fn）
$（document）.ready（）的一个速记方式，当文档全部载入时执行函数。
可以有多个$（fn）当文档载入时，同时执行所有函数！
fn（Function）:
当文档载入时执行的函数！
$（
function（）{
}）
当文档载入时背景变成黑色，相当于onLoad。
$（obj）
复制一个jQuery对象，
obj（jQuery）:
要复制的jQuery对象
var
f
=
div"
alert（$（f）.find（"
）.html（））
当点击id为test的元素时，弹出对话框文字为two，即div标签下p元素的内容。
each（fn）
将函数作用于所有匹配的对象上
需要执行的函数
img
src="
1.jpg"
/>
img"
）.each（function（）{
this.src
2.jpg"
;
当点击id为test的元素时，img标签的src都变成了2.jpg。
eq（pos）
减少匹配对象到一个单独得dom元素
pos（Number）:
期望限制的索引，从0开始
This
is
just
test.<
So
this<
）.eq
（1）.html（））
当点击id为test的元素时，alert对话框显示：
Soisthis，即第二个<
标签的内容
get（）get（num）
获取匹配元素，get（num）返回匹配元素中的某一个元素
get（Number）:
）.get
（1）.innerHTML）;
注意get和eq的区别，eq返回的是jQuery对象，get返回的是所匹配的dom对象，所有取$（"
）.eq
（1）对象的内容用jQuery方法html（），而取$（"
）.get
（1）的内容用innerHTML
index（obj）
返回对象索引
obj（Object）:
要查找的对象
test1"
test2"
）.index（document.getElementById（'
test1'
）））;
test2'
当点击id为test的元素时，两次弹出alert对话框分别显示0，1
size（）
Length
当前匹配对象的数量，两者等价
test1.jpg"
test2.jpg"
）.length）;
当点击id为test的元素时，弹出alert对话框显示2，表示找到两个匹配对象
二：
DOM操作
属性
我们以<
imgid="
scr="
5.jpg"
为例，在原始的javascript里面可以用varo=document.getElementById（'
a'
）取的id为a的节点对象，在用o.src来取得或修改该节点的scr属性，在jQuery里$（"
#a"
）将得到jQuery对象[<
]，然后可以用jQuery提供的很多方法来进行操作，如$（"
）.scr（）将得到5.jpg,$（"
）.scr（"
）将该对象src属性改为1,jpg。
下面我们来讲jQuery提供的众多jQuery方法，方便大家快速对DOM对象进行操作
herf（）
herf（val）
对jQuery对象属性herf的操作。
未执行jQuery前
1.htm"
#test"
）.href（））;
）.href（"
2.html"
先弹出对话框显示id为test的连接url，在将其url改为2.html，当弹出对话框后会看到转向到2.html
同理，jQuery还提供类似的其他方法，大家可以分别试验一下：
herf（val）
html（）
html（val）
id（）
id（val）
name（）
name（val）
rel（）
rel（val）
src（）
src（val）
title（）
title（val）
val（）
val（val）
操作
after（html）
在匹配元素后插入一段html
$（"
）.after（"
b>
/b>
执行后相当于：
after（elem）
after（elems）
将指定对象elem或对象组elems插入到在匹配元素后
p
after<
jQuery代码及功能
）.after（$（"
））;
执行后相当于
append（html）在匹配元素内部，且末尾插入指定html
）.append（"
同理还有append（elem）
append（elems）before（html）before（elem）before（elems）请执行参照append和after的方来测试、理解！
appendTo（expr）
与append（elem）相反
）.
appendTo
（$（"
clone（）复制一个jQuery对象
）.clone（）.appendTo（$（"
复制$（"
）然后插入到<
a>
后,执行后相当于
empty（）删除匹配对象的所有子节点
span>
span<
）.empty（）;
insertAfter（expr）
insertBefore（expr）
按照官方的解释和我的几个简单测试insertAfter（expr）相当于before（elem）,insertBefore（expr）相当于after（elem）
prepend（html）
prepend（elem）
prepend（elems）
在匹配元素的内部且开始出插入
通过下面例子区分append（elem）
appendTo（expr）
prepend（elem）
p<
div<
执行$（"
）.append（$（"
））后相当于
P
执行$（"
）.appendTo（$（"
））
后相当于
div
）.prepend（$（"
））
后相当于
remove（）
删除匹配对象
注意区分empty（），empty（）移出匹配对象的子节点，remove（），移出匹配对象
wrap（htm）将匹配对象包含在给出的html代码内
Test
Paragraph.<
）.wrap（"
class='
wrap'
wrap（elem）将匹配对象包含在给出的对象内
content"
）.wrap（
document.getElementById（'
content'
）
遍历、组合
add（expr）
在原对象的基础上在附加符合指定表达式的jquery对象
Again<
f=$（"
）.add（"
span"
for（var
i=0;
i
$（f）.size（）;
i++）{
alert（$（f）.eq（i）.html（））;
执行$（"
）得到匹配<
的对象，有两个，add（"
）是在（"
）的基础上加上匹配<
span>
的对象，所有一共有3个，从上面的函数运行结果可以看到$（"
）是3个对象的集合，分别是[<
Hello<
]，[<
HelloAgain<
]。
add（el）
在匹配对象的基础上在附加指定的dom元素。
）.add（document.getElementById（"
add（els）
在匹配对象的基础上在附加指定的一组对象，els是一个数组。
）.add（[document.getElementById（"
）,
document.getElementById（"
b"
）]）
注意els是一个数组，这里的[]不能漏掉。
ancestors（）
一依次以匹配结点的父节点的内容为对象,根节点除外（有点不好理解，看看下面例子就明白了）
u>
/u>
f=
u"
）.ancestors（）;
第一个对象是以<
的父节点的内容为对象，[<
]
的父节点的父节点（div）的内容为对象，[<
一般一个文档还有<
body>
和<
html>
，依次类推下去。
ancestors（expr）
在ancestors（）的基础上之取符合表达式的对象
如上各例子讲varf改为varf=$（"
）.ancestors（“div”）,则只返回一个对象：
[<
children（）
返回匹配对象的子介点
ch"
#ch"
）.children（）.html（））;
）.children（）得到对象[<
].所以.html（）的结果是”two”
children（expr）
返回匹配对象的子介点中符合表达式的节点
sp"
）.children（“#sp”）.html（））;
）.children（）得到对象[<
spanid="
].
）.children（“#sp”）过滤得到[<
parent（）
parent（expr）取匹配对象父节点的。
参照children帮助理解
升级会员 