JQuery元素快速查找与操作

　　

首先,我们来看看jquery中如何查找到想要的结点。

　　

<强>第一步:sizzle选择器
　　

　　

基于元素的id、类、类型,属性,属性值等“查找”(或选择)HTML元素,简单的说是基于css选择器,除此之外还有一些特定的选择器。

　　

<强>第二步:查询祖先
　　

　　父()

　　

返回被选元素的直接父元素,该方法只会向上一级对DOM树进行遍历

　　

父母() 　　

可以使用可选参数来过滤对父元素的搜索
　　返回被选元素的所有祖先元素,它一路向上直到文档的根元素

　　

parentsUntil () 　　

返回介于两个给定元素之间的所有祖先元素,下面是例子:

　　 　　 　　$(文档)时函数(){//会返回跨开始到div为止的祖先元素 　　 　　$(“跨度”).parentsUntil (" div "); 　　 　　}); 　　 　　

<强>第三步:查询子孙
　　

　　

儿童()
　　

　　

可以使用可选参数来过滤对子元素的搜索
　　

　　

返回被选元素的所有直接子元素,该方法只会向下一级对DOM树进行遍历

　　

find ()
　　

　　

可以使用可选参数来过滤对元素的搜索
　　

　　

返回被选元素的后代元素,一路向下直到最后一个后代

　　

<强>第四步:查询同胞
　　

　　

兄弟姐妹() 　　

返回被选元素的所有同胞元素

　　

next () 　　

返回被选元素的下一个同胞元素

　　

nextAll () 　　

返回被选元素的之后的全部同胞元素

　　

nextUntil () 　　

返回介于两个给定参数之间的所有跟随的同胞元素

　　 　　 　　$(文档)时函数(){//返回介于& lt; h3>与& lt; h7>元素之间的所有同胞元素 　　 　　$ (h3) .nextUntil (h7); 　　 　　}); 　　 　　

上一页(),prevAll()和prevUntil ()

　　

上一页(),prevAll()以及prevUntil()方法的工作方式与上面的方法类似,只不过方向相反而已:它们返回的是前面的同胞元素(在DOM树中沿着同胞之前元素遍历,而不是之后元素遍历)。

　　

<强>第五步:查询时添加过滤
　　

　　

第() 　　

返回选择的元素中的首个元素

　　去年()

　　

返回选择的元素中的最后一个元素

　　

eq () 　　

返回被选元素中带有指定索引号的元素,这个很容易理解,举例就是:美元(元素[标记])和element.eq(国旗)结果一样

　　

过滤器() 　　

对查询结果进行过滤,和下面不()类似,作用相反

　　

不() 　　

返回不匹配标准的所有元素

　　 　　 　　$(文档)时函数(){//返回不带有类名“目标”的所有p元素 　　 　　$ (“p”)自身之外(“.target”); 　　 　　}); 　　 　　

元素找到以后,接着我们需要根据需求来对查找到的结点进行操作。

　　

<强>第六步:文本(),html(),瓦尔()以及attr()
　　

　　

text ()、html(),瓦尔()以及attr(),拥有回调函数。回调函数有两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串

　　

1.文本()——设置或返回所选元素的文本内容

　　

2. HTML()——设置或返回所选元素的内容(包括HTML标记)

　　

3.瓦尔()——设置或返回表单字段的值

　　

4. attr()——设置或返回属性值

　　 　　 　　$ (" # btn1 ") .click(函数(){ 　　 　　$ (" # test1)。text(函数(我origText) { 　　 　　返回“旧文本:“+ origText +“新文本:指数:”+ i; 　　 　　})； 　　 　　}); 　　 　　

<强>第七步:添加元素
　　

　　

append()——在被选元素的内部结尾插入内容

　　

预谋()——在被选元素的内部开头插入内容

　　

后()——在被选元素之后插入内容

　　

之前()——在被选元素之前插入内容

　　

<强>第八步:删除元素
　　

　　

remove()可接受一个参数,允许你对被删元素进行过滤、空()不可以

　　

删除()——删除被选元素(及其子元素)

　　

空()——从被选元素中删除子元素

　　 　　//等同于$ (“p.target”) .remove (); 　　$ (p) .remove (“.target”); 　　 　　

<强>第九步:替换元素
　　

　　

replaceAll()和replaceWith()功能类似,但是目标和源相反

JQuery元素快速查找与操作