JQuery元素快速查找与操作

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

第一步：sizzle选择器

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

第二步：查询祖先

parent()

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

parents()

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

parentsUntil()

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

$(document).ready(function(){  //会返回span开始到div为止的祖先元素    $("span").parentsUntil("div");  });

第三步：查询子孙

children()

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

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

find()

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

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

第四步：查询同胞

siblings()

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

next()

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

nextAll()

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

nextUntil()

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

$(document).ready(function(){  //返回介于 <h2>与<h6>元素之间的所有同胞元素    $("h2").nextUntil("h6");  });

prev()、prevAll() 和 prevUntil()

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

第五步：查询时添加过滤

first()

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

last()

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

eq()

返回被选元素中带有指定索引号的元素，这个很容易理解，举例就是：$(element[flag])和element.eq(flag)结果一样

filter()

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

not()

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

$(document).ready(function(){  //返回不带有类名"target"的所有p元素    $("p").not(".target");  });

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

第六步：text()、html()、val()以及attr()

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