jQuery使用手册之二 DOM操作

属性
我们以<img id="a" scr="5.jpg"/>为例，在原始的javascript里面可以用var o=document.getElementById（"a"）取的id为a的节点对象，在用o.src来取得或修改该节点的scr属性，在jQuery里$（"#a"）将得到jQuery对象[ <img id="a" scr="5.jpg"/> ]，然后可以用jQuery提供的很多方法来进行操作，如$（"#a"）.scr（）将得到5.jpg,$（"#a"）.scr（"1.jpg"）将该对象src属性改为1,jpg。下面我们来讲jQuery提供的众多jQuery方法，方便大家快速对DOM对象进行操作
herf（） herf（val）
说明：对jQuery对象属性herf的操作。
例子：
未执行jQuery前 <a href="1.htm" id="test" onClick="jq（）">jQuery</a>jQuery代码及功能： function jq（）{
 alert（$（"#test"）.href（））;
 $（"#test"）.href（"2.html"）;
}运行：先弹出对话框显示id为test的连接url，在将其url改为2.html，当弹出对话框后会看到转向到2.html
同理，jQuery还提供类似的其他方法，大家可以分别试验一下：
herf（） 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 <a href="#" id="test" onClick="jq（）">jQuery</a>jQuery代码及功能： function jq（）{
 $（"#test"）.after（"Hello"）;
}执行后相当于： <a href="#" id="test" onClick="jq（）">jQuery</a>Hello
after（elem） after（elems）将指定对象elem或对象组elems插入到在匹配元素后

after<a href="#" onClick="jq（）">jQuery</a>jQuery代码及功能 function jq（）{
$（"a"）.after（$（"#test"））;
}执行后相当于

<a href="#" onClick="jq（）">jQuery</a>after
append（html）在匹配元素内部，且末尾插入指定html <a href="#" id="test" onClick="jq（）">jQuery</a>jQuery代码及功能： function jq（）{
$（"#test"）.append（"Hello"）;
}执行后相当于 <a href="#" onClick="jq（）">jQueryHello</a>同理还有append（elem） append（elems） before（html） before（elem） before（elems）请执行参照append和after的方来测试、理解！

appendTo（expr）与append（elem）相反

after<a href="#" onClick="jq（）">jQuery</a>jQuery代码及功能 function jq（）{
 $（"a"）. appendTo （$（"#test"））;
}执行后相当于 after<a href="#" onClick="jq（）">jQuery</a> 
clone（）复制一个jQuery对象 after<a href="#" onClick="jq（）">jQuery</a>jQuery代码及功能： function jq（）{
 $（"#test"）.clone（）.appendTo（$（"a"））;
}复制$（"#test"）然后插入到<a>后,执行后相当于 after<a href="#" onClick="jq（）">jQuery</a>after
empty（）删除匹配对象的所有子节点

span

after

</div>

<a href="#" onClick="jq（）">jQuery</a>jQuery代码及功能： function jq（）{
 $（"#test"）.empty（）;
}执行后相当于 <div id="test"></div><a href="#" onClick="jq（）">jQuery</a>
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>div</div>执行$（"#a"）.append（$（"div"）） 后相当于 

 <div>div</div>
执行$（"#a"）.appendTo（$（"div"）） 后相当于 <div>
 div
 p
</div>执行$（"#a"）.prepend （$（"div"）） 后相当于 
 <div>div</div>


remove（）删除匹配对象
注意区分empty（），empty（）移出匹配对象的子节点，remove（），移出匹配对象

wrap（htm）将匹配对象包含在给出的html代码内 Test Paragraph. <a href="#" onClick="jq（）">jQuery</a>jQuery代码及功能： function jq（）{
 $（"p"）.wrap（"<div class="wrap"></div>"）;
}执行后相当于 <div class="wrap">Test Paragraph.</div>
wrap（elem）将匹配对象包含在给出的对象内 Test Paragraph.<div id="content"></div>
<a href="#" onClick="jq（）">jQuery</a>jQuery代码及功能： function jq（）{
 $（"p"）.wrap（ document.getElementById（"content"））;
}执行后相当于 <div id="content">Test Paragraph.</div>
遍历、组合
add（expr）在原对象的基础上在附加符合指定表达式的jquery对象 HelloHello Again
<a href="#" onClick="jq（）">jQuery</a>jQuery代码及功能： function jq（）{
 var f=$（"p"）.add（"span"）;
 for（var i=0;i < $（f）.size（）;i++）{
 alert（$（f）.eq（i）.html（））;}
}执行$（"p"）得到匹配的对象，有两个，add（"span"）是在（"p"）的基础上加上匹配的对象，所有一共有3个，从上面的函数运行结果可以看到$（"p"）.add（"span"）是3个对象的集合，分别是[Hello]，[Hello Again]，[Hello Again]。

add（el）在匹配对象的基础上在附加指定的dom元素。
 $（"p"）.add（document.getElementById（"a"））;

add（els）在匹配对象的基础上在附加指定的一组对象，els是一个数组。

HelloHello AgainjQuery代码及功能： function jq（）{
 var f=$（"p"）.add（[document.getElementById（"a"）, document.getElementById（"b"）]）
 for（var i=0;i < $（f）.size（）;i++）{
 alert（$（f）.eq（i）.html（））;}
}注意els是一个数组，这里的[ ]不能漏掉。

ancestors （）一依次以匹配结点的父节点的内容为对象,根节点除外（有点不好理解，看看下面例子就明白了） <div>
 one
 
 two
 
</div>jQuery代码及功能： function jq（）{
 var f= $（"u"）.ancestors（）;
 for（var i=0;i < $（f）.size（）;i++）{
 alert（$（f）.eq（i）.html（））;}
}第一个对象是以的父节点的内容为对象，[ two ]
第一个对象是以的父节点的父节点（div）的内容为对象，[onetwo ]
一般一个文档还有<body>和<html>，依次类推下去。

ancestors （expr）在ancestors（）的基础上之取符合表达式的对象
如上各例子讲var f改为var f= $（"u"）.ancestors（“div”）,则只返回一个对象：
[ onetwo ]

children（）返回匹配对象的子介点 one
<div id="ch">
 two
</div>jQuery代码及功能： function jq（）{
 alert（$（"#ch"）.children（）.html（））;
}$（"#ch"）.children（）得到对象[ two ].所以.html（）的结果是”two”

children（expr）返回匹配对象的子介点中符合表达式的节点 <div id="ch">
 two
 three
</div>jQuery代码及功能 function jq（）{
 alert（$（"#ch"）.children（“#sp”）.html（））;
}$（"#ch"）.children（）得到对象[twothree ].
$（"#ch"）.children（“#sp”）过滤得到[three ]

parent （） parent （expr）取匹配对象父节点的。参照children帮助理解

contains（str）返回匹配对象中包含字符串str的对象

This is just a test.So is thisjQuery代码及功能： function jq（）{
 alert（$（"p"）.contains（"test"）.html（））;
}$（"p"）得到两个对象，而包含字符串”test”只有一个。所有$（"p"）.contains（"test"）返回 [ This is just a test. ]

end（）结束操作,返回到匹配元素清单上操作前的状态.

filter（expr） filter（exprs） 过滤现实匹配符合表达式的对象 exprs为数组，注意添加“[ ]” HelloHello AgainAnd AgainjQuery代码及功能： function jq（）{
 alert（$（"p"）.filter（".selected"）.html（））
}$（"p"）得到三个对象，$（"p"）.contains（"test"）只返回class为selected的对象。

find（expr）在匹配的对象中继续查找符合表达式的对象 HelloHello AgainAnd AgainQuery代码及功能： function jq（）{
 alert（$（"p"）.find（"#a"）.html（））
}在$（"p"）对象中查找id为a的对象。

is（expr）判断对象是否符合表达式,返回boolen值 HelloHello AgainAnd AgainQuery代码及功能： function jq（）{
 alert（$（"#a"）.is（"p"））;
}在$（"#a "）是否符合jquery表达式。
大家可以用$（"#a"）.is（"div"）; （"#a"）.is（"#a"）多来测试一下

next（） next（expr）返回匹配对象剩余的兄弟节点 HelloHello AgainAnd AgainjQuery代码及功能 function jq（）{
 alert（$（"p"）.next（）.html（））;
 alert（$（"p"）.next（".selected"）.html（））;
}$（"p"）.next（）返回 [ Hello Again , And Again ]两个对象
$（"p"）.next（".selected）只返回 [And Again ]一个对象

prev （） prev （expr）参照next理解

not（el） not（expr）从jQuery对象中移出匹配的对象，el为dom元素，expr为jQuery表达式。 onetwo
<a href="#" onclick="js（）">jQuery</a>jQuery代码及功能： function js（）{
 alert（$（"p"）.not（document.getElementById（"a"））.html（））;
 alert（$（"p"）.not（“#a”）.html（））;
}$（"p"）由两个对象，排除后的对象为[one ]

siblings （） siblings （expr） jquery匹配对象中其它兄弟级别的对象 one
<div>
 two
</div>
<a href="#" onclick="js（）">jQuery</a>jQuery代码及功能： function js（）{
 alert（$（"div"）.siblings（）.eq（1）.html（））;
}$（"div"）.siblings（）的结果实返回两个对象[one，<a href="#" onclick="js（）">jQuery</a> ]
alert（$（"div"）.siblings（“a”）返回一个对象[<a href="#" onclick="js（）">jQuery</a> ]

其他
addClass（class） 为匹配对象添加一个class样式
removeClass （class） 将第一个匹配对象的某个class样式移出

attr （name） 获取第一个匹配对象的属性 <img src="test.jpg"/><a href="#" onclick="js（）">jQuery</a> jQuery代码及功能： function js（）{
 alert（$（"img"）.attr（"src"））;
}返回test.jpg

attr （prop） 为第一个匹配对象的设置属性，prop为hash对象，用于为某对象批量添加众多属性 <img/><a href="#" onclick="js（）">jQuery</a>jQuery代码及功能： function js（）{
 $（"img"）.attr（{ src: "test.jpg", alt: "Test Image" }）;
}运行结果相当于<img src="test.jpg" alt="Test Image"/>

attr （key,value） 为第一个匹配对象的设置属性，key为属性名，value为属性值 <img/><a href="#" onclick="js（）">jQuery</a>jQuery代码及功能 function js（）{
 $（"img"）.attr（“src”,”test.jpg”）;
}运行结果相当于<img src="test.jpg"/>

removeAttr （name） 将第一个匹配对象的某个属性移出 <img alt="test"/><a href="#" onclick="js（）">jQuery</a>jQuery代码及功能： function js（）{
 $（"img"）. removeAttr（"alt"）;
}运行结果相当于<img />

toggleClass （class） 将当前对象添加一个样式，不是当前对象则移出此样式，返回的是处理后的对象 HelloHello Again<a href="#" onclick="js（）">jQuery</a>$（"p"）的结果是返回对象 [Hello,Hello Again ]
$（"p"）.toggleClass（"selected"）的结果是实返回对象 [ Hello, Hello Again ]