本文主要向大家介绍了机器学习入门之w3School jquery学习 选择器，通过具体的内容向大家展现，希望对大家学习机器学习入门有所帮助。

选择器

在jQuery中，我们一般通过一个字符串来标识匹配的元素，例如：

$("#uid"); // 选取id属性为"uid"的单个元素

$("p"); // 选取所有的p元素

$(".test"); // 选择所有带有CSS类名"test"的元素

$("[name=books]"); // 选择所有name属性为"books"的元素

是否感觉这和CSS选择器非常相似？是的，jQuery获取元素就是通过类似于CSS选择器的字符串来匹配对应的元素，我们一般将其称作jQuery选择器(selector)。几乎所有的CSS选择器都可以当做jQuery选择器来使用，只要CSS选择器对哪些元素生效，对应的jQuery选择器就可以选取到哪些元素。

和CSS选择器一样，jQuery选择器也支持多个选择器任意组合使用。

// 多个选择器以空格或指定符号隔开，将匹配与前者具有指定关系的最后一个选择器所表示的元素

$("#uid span"); // 选择id为"uid"的元素的所有后代span元素

$("p > span"); // 选择p元素的所有子代span元素

$("div + p"); // 选择div元素后面紧邻的同辈p元素

$("div p span"); // 选择div元素的所有后代p元素的后代span元素

// 多个选择器之间没有空格，将匹配同时满足这些选择器条件的元素

$("p#uid"); // 选择id属性为"uid"的p元素

$("div.foo"); // 选择所有带有CSS类名"foo"的div元素

$(".foo.bar"); // 选择所有同时带有CSS类名"foo"和"bar"的元素

$("input[name=books][id]"); // 选择所有name属性为"books"并且具备id属性的元素

此外，为了更加便于使用，jQuery还定制了特有的选择器：

// jQuery特有的选择器，当然也可以和其他选择器任意组合使用

$(":checkbox"); // 选取所有的checkbox元素

$(":text"); // 选取所有type为text的input元素

$(":password"); // 选取所有type为password的input元素

$(":checked"); // 选取所有选中的radio、checkbox、option元素

$(":selected"); // 选取所有选中的option元素

$(":input"); // 选取所有的表单控件元素(所有input、textarea、select、button元素)

元素筛选

有些时候，我们已经获得了一个匹配指定DOM元素的jQuery对象。不过我们需要根据jQuery对象来筛选指定的元素。例如：只选取集合中符合某些条件的元素，删除集合中符合某些条件的元素，查找当前匹配元素的子元素、父元素、同辈元素、上一个元素、下一个元素等与之具有特定关系的元素。

jQuery为我们提供了一系列的文档筛选方法，方便我们快速地选取我们所需的元素。

// 以下方法都返回一个新的jQuery对象，他们包含筛选到的元素

$("ul li").eq(1); // 选取ul li中匹配的索引顺序为1的元素(也就是第2个li元素)

$("ul li").first(); // 选取ul li中匹配的第一个元素

$("ul li").last(); // 选取ul li中匹配的最后一个元素

$("ul li").slice(1, 4); // 选取第2 ~ 4个元素

$("ul li").filter(":even"); // 选取ul li中所有奇数顺序的元素

$("div").find("p"); // 选取所有div元素的所有后代p元素

$("div").children(); // 选取所有div元素的所有子代元素

$("div").children("p"); // 选取所有div元素的所有子代p元素

$("span").parent(); // 选取所有span元素的父元素

$("span").parent(".foo.bar"); // 选取所有span元素的带有CSS类名"foo"和"bar"的父元素

$("#uid").prev(); // 选取id为uid的元素之前紧邻的同辈元素

$("#uid").next(); // 选取id为uid的元素之后紧邻的同辈元素

选择器一览表

以下选择器的棕色部分，表示该部分需要根据实际需要进行设置。这些部分可能是一个选择器、序号、索引或者其他符合要求的表达式(表格中s1s2sN中的蓝色s2也是如此，这里标注为蓝色，以便于与两侧的s1和sN进行区分)。

选择器 起始版本    实例  选取

基本选择器——根据多个选择器的组合筛选元素

s1,s2,sN    1.0 $("p,div,#abc") 所有的p元素、div元素和id="abc"的元素

s1s2sN  1.0 $(":radio[name=uid]:checked")   所有被选中的name="uid"的radio元素

ancestor escendant  1.0 $("p span") <p>标签内的所有<span>元素

parent > child  1.0 $("p > span")   所有作为<p>标签的直接子元素的<span>元素

prev + next 1.0 $("label + input")  所有紧跟在<label>元素后面的那个同辈<input>元素

prev ~ sibings  1.0 $("tr#L2 ~ tr") 在id="L2"的<tr>元素之后的所有同辈<tr>元素

基本选择器——根据id、class类名、标签名等筛选元素

1.0 $("*")  所有元素

 id 1.0 $("#abc")   id="abc"的元素

.className  1.0 $(".post")  所有包含类名"post"的元素

tagName 1.0 $("p")  所有<p>元素

伪类选择器——根据元素在匹配到的所有元素中的特定次序筛选元素

:first  1.0

$("p:first")    第一个<p>标签

:last   1.0 $("p:last") 最后一个<p>标签

:even   1.0 $("tr:even")    所有偶数<tr>标签

:odd    1.0 $("tr:odd") 所有奇数<tr>标签

:eq(index)  1.0

$("li:eq(3)")   第4个li标签(index从0开始算起)

:gt(index)  1.0 $("li:gt(2)")   所有index大于2的li标签(第4、5、6……个li标签)

:lt(index)  1.0 $("li:lt(2)")   所有index小于2的li标签(第1、2个li标签)

伪类选择器——根据元素在父元素的子元素中的特定次序筛选元素

:first-child    1.1.4   $("span:first-child")   所有作为父元素的第一个子元素的<span>元素

:last-child 1.1.4   $("span:last-child")    所有作为父元素的最后一个子元素的<span>元素

:only-child 1.1.4   $("span:only-child")    所有作为父元素的唯一子元素的<span>元素

:nth-child(n)   1.1.4   $("li:nth-child(2)")    所有作为父元素的第2个子元素的<li>标签(n从1开始算起)

:nth-last-child(n)  1.9 $("li:nth-last-child(2)")   所有作为父元素的倒数第2个子元素的<li>标签

:first-of-type  1.9 $("p:first-of-type")    所有作为父元素的第一个<p>类型的子元素

:last-of-type   1.9 $("p:last-of-type") 所有作为父元素的最后一个<p>类型的子元素

:only-of-type   1.9 $("p:only-of-type") 所有作为父元素的唯一一个<p>类型的子元素

:nth-of-type(n) 1.9 $("li:nth-of-type(2)")  所有作为父元素的第2个<li>类型的子元素(n从1开始算起)

:nth-last-of-type(n)    1.9 $("li:nth-last-child(2)")   所有作为父元素的倒数第2个<li>类型的子元素

伪类选择器——根据包含、排除、可见、动画或其他关系筛选元素

:has(selector)  1.1.4   $("ul:has(li.abc)") 所有包含类名为"abc"的<li>标签的<ul>元素

:not(selector)  1.0 $("input:not(:text)")   所有不是文本框的<input>元素

:contains(text) 1.1.4   $(":contains(abc)") 所有包含文本"abc"的元素

:parent 1.0 $(":parent")    所有包含子元素或文本内容(哪怕是空格或换行)的元素

:empty  1.0 $(":empty") 所有没有子元素和文本内容(哪怕是空格或换行)的元素

:visible    1.0 $(":visible")   所有可见的元素

:hidden 1.0 $(":hidden")    所有不可见的元素(包括type="hidden"的<input>元素)

:header 1.2 $(":header")    所有标题标签：h1 ~ h6

:animated   1.2 $(":animated")  所有正在执行动画效果的元素

:focus  1.6 $(":focus") 当前获得焦点的元素

:root   1.9 $(":root")  当前文档的根元素(<html>元素)

:target 1.9 $(":target")    id属性等于当前页面URI中的hash码值的元素

:lang(language) 1.9 $(":lang(en)")  所有lang属性以"en"为前缀的元素

属性相关选择器

[attribute] 1.0 $("[href]") 所有带有href属性的元素

[attribute=value]   1.0 $("[name=uid]") 所有name="uid"的元素

[attribute!=value]  1.0 $("[name!=uid]")    所有name属性的值不等于"uid"的元素

[attribute^=value]  1.0 $("[name^=uid]")    所有name属性的值以"uid"开头的元素

[attribute$=value]  1.0 $("[src$='.gif']")  所有src属性以".gif"结尾的元素

[attribute=value]   1.0 $("[name=uid]") name属性的值等于"uid"，或以"uid-"开头的所有元素

[attribute~=value]  1.0 $("[name~='uid']")  name属性的值包含给定的单词"uid"的所有元素("uid"与其他词以空格分隔)

[attribute=value]  1.0 $("[name=uid]")    所有name属性的值包含"uid"的元素

伪类选择器——表单相关

:input  1.0 $(":input") 所有input、select、textarea和button标签

:text   1.0 $(":text")  所有type="text"的<input>元素

:password   1.0 $(":password")  所有type="password"的<input>元素

:radio  1.0 $(":radio") 所有type="radio"的<input>元素

:checkbox   1.0 $(":checkbox")  所有type="checkbox"的<input>元素

:submit 1.0 $(":submit")    所有type="submit"的<input>和<button>元素

:reset  1.0 $(":reset") 所有type="reset"的<input>元素和<button>元素

:button 1.0 $(":button")    所有<button>标签(不区分type)和type="button"的<input>元素

:image  1.0 $(":image") 所有type="image"的<input>元素

:file   1.0 $(":file")  所有type="file"的<input>元素

伪类选择器——表单状态相关(表单控件是指input、select、textarea、button、option元素)

:enabled    1.0 $(":enabled")   所有可用(没有disabled属性)的表单控件元素

:disabled   1.0 $(":disabled")  所有禁用(带有disabled属性)的表单控件元素

:selected   1.0 $(":selected")  所有被选中的<option>元素

:checked    1.0 $(":checked")   所有被选中的radio、checkbox和<option>元素

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标人工智能机器学习频道！