使用jQuery获取元素
- jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
- jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。
- jQuery 中所有选择器都以美元符号开头：$()。
- jQuery为了方便使用者刻意和CSS选择器使用相同的语法，几乎支持所有类型的CSS3选择器，当然也有一些其特定的选择器
jQuery 元素选择器
jQuery 使用 CSS 选择器来选取 HTML 元素。
$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。
jQuery 属性选择器
jQuery 使用 XPath(XPath 是一门在 XML 文档中查找信息的语言,XPath 用于在 XML 文档中通过元素和属性进行导航。) 表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
jQuery CSS 选择器
jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
$("p").css("background-color","red");
选择器
基本，组合/层次选择器.png
基本过滤选择器.png
内容，可视化，属性过滤选择器.png
子元素，表单元素选择器.png
可以看出来基本上和css选择器差不多，就感觉是在复习css选择器一样，简直不要太爽.
部分 api 的用法
除了使用选择器jQuery还提供了一些方法帮助我们查找当前元素相关元素
.eq(index), .get([index])
对于一个特定结果集，我们想获取到指定index的jQuery对象，可以使用eq方法
$('div').eq(3); 获取结果集中的第四个jQuery对象
我们可以通过类数组下标的获取方式或者get方法获取指定index的DOM对象，也就是我们说的jQuery对象转DOM对象
$('div')[2];
$('div').eq(2);
get()不写参数把所有对象转为DOM对象返回
兄弟元素获取
.next([selector]), .prev([selector])
next取得匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。如果提供一个选择器，那么只有紧跟着的兄弟元素满足选择器时，才会返回此元素。prev正好相反，获取元素之前的同辈元素
$("h2").next(); 返回 <h2> 的下一个同胞元素
.nextAll([selector]), .prevAll([selector])
nextAll获得每个匹配元素集合中每个元素所有后面的同辈元素，选择性筛选的选择器，prevAll与之相反，获取元素前面的同辈元素
$("h2").nextAll(); 返回 <h2> 的所有跟随的同胞元素
.siblings([selectors])
获得匹配元素集合中每个元素的兄弟元素,可以提供一个可选的选择器
$("h2").siblings(); 返回 <h2> 的所有同胞元素
也可以使用可选参数来过滤对同胞元素的搜索。
$("h2").siblings("p"); 返回属于 <h2> 的同胞元素的所有 <p> 元素
nextUntil() , prevUntil() 方法
nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。prevAll与之相反，获取元素前面的同胞元素
$("h2").nextUntil("h6"); 返回 <h2> 的所有跟随的同胞元素
父子元素获取
children() 方法
返回被选元素的所有直接子元素，选择器选择性筛选
该方法只会向下一级对 DOM 树进行遍历。
$("div").children(); 返回每个 <div> 元素的所有直接子元素
也可以使用可选参数来过滤对子元素的搜索。
$("div").children("p.1"); 返回类名为 "1" 的所有 <p> 元素，并且它们是 <div> 的直接子元素
find() 方法
返回被选元素的后代元素，一路向下直到最后一个后代。
$("div").find("span"); 返回属于 <div> 后代的所有 <span> 元素
$("div").find("*"); 返回 <div> 的所有后代
parent() 方法
$("span").parent(); 返回每个 <span> 元素的的直接父元素
返回被选元素的直接父元素。
parents() 方法
返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。
$("span").parents(); 返回所有 <span> 元素的所有祖先
也可以使用可选参数来过滤对祖先元素的搜索。
$("span").parents("ul"); 返回所有 <span> 元素的所有祖先，并且它是 <ul> 元素
parentsUntil() 方法
返回介于两个给定元素之间的所有祖先元素。
$("span").parentsUntil("div"); 返回介于 <span> 与 <div> 元素之间的所有祖先元素
筛选当前结果集
first() 方法
返回被选元素的首个元素。
$("div p").first(); 选取首个 <div> 元素内部的第一个 <p> 元素
last() 方法
返回被选元素的最后一个元素.
$("div p").last(); 选择最后一个 <div> 元素中的最后一个 <p> 元素
filter() 方法
允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。参数可以是一个选择器或者一个函数
$("p").filter(".url"); 返回带有类名 "url" 的所有 <p> 元素
$('li').filter(function(index) {
return index % 3 == 2;
}) 返回下标除以3余数为2的所有li元素
not() 方法
返回不匹配标准的所有元素。
$("p").not(".url"); 返回不带有类名 "url" 的所有 <p> 元素
has() 方法
返回拥有匹配指定选择器的一个或多个元素在其内的所有元素,如需选取拥有多个元素在其内的元素，请使用逗号分隔。
$("p").has("span"); 返回拥有一个 <span> 元素在其内的所有 <p> 元素
is() 方法
用于查看选择的元素是否匹配选择器。
if ($("p").parent().is("div")) {
alert("p 的父元素是 div");
} 如果 <p> 的父元素是 <div> 元素，弹出提示信息
总结
以上就是关于jQuery选择器及部分 api 的用法，并给出具体实例，希望对有需要的人所有帮助。
