--- theme: juejin --- ## 选择器用法 | 选择器 | 实例 | 选取 | |:---------------------------------------------------------------------------------------------------|:---------------------------|:-------------------------------------------| | [*](https://www.w3school.com.cn/jquery/selector_all.asp) | $("*") | 所有元素 | | [#_id_](https://www.w3school.com.cn/jquery/selector_id.asp) | $("#lastname") | id="lastname" 的元素 | | [._class_](https://www.w3school.com.cn/jquery/selector_class.asp) | $(".intro") | 所有 class="intro" 的元素 | | [_element_](https://www.w3school.com.cn/jquery/selector_element.asp) | $("p") | 所有 `

` 元素 | | [:last](https://www.w3school.com.cn/jquery/selector_last.asp) | $("p:last") | 最后一个 `

-

` | | [:animated](https://www.w3school.com.cn/jquery/selector_animated.asp) | | 所有动画元素 | | | | | | [:contains(_text_)](https://www.w3school.com.cn/jquery/selector_contains.asp) | $(":contains('W3School')") | 包含指定字符串的所有元素 | | [:empty](https://www.w3school.com.cn/jquery/selector_empty.asp) | $(":empty") | 无子（元素）节点的所有元素 | | :hidden | $("p:hidden") | 所有隐藏的 `
` 元素 | | [:visible](https://www.w3school.com.cn/jquery/selector_visible.asp) | $("table:visible") | 所有可见的表格 | | | | | | s1,s2,s3 | $("th,td,.intro") | 所有带有匹配选择的元素 | | | | | | [[_attribute_]](https://www.w3school.com.cn/jquery/selector_attribute.asp) | $("[href]") | 所有带有 href 属性的元素 | | [[_attribute_=_value_]](https://www.w3school.com.cn/jquery/selector_attribute_equal_value.asp) | $("[href='#']") | 所有 href 属性的值等于 "#" 的元素 | | [[_attribute_!=_value_]](https://www.w3school.com.cn/jquery/selector_attribute_notequal_value.asp) | $("[href!='#']") | 所有 href 属性的值不等于 "#" 的元素 | | [[_attribute_$=_value_]](https://www.w3school.com.cn/jquery/selector_attribute_end_value.asp) | $("[href$='.jpg']") | 所有 href 属性的值包含以 ".jpg" 结尾的元素 | | | | | | [:input](https://www.w3school.com.cn/jquery/selector_input.asp) | $(":input") | 所有 `` 元素 | | [:text](https://www.w3school.com.cn/jquery/selector_input_text.asp) | $(":text") | 所有 type="text" 的 `` 元素 | | [:password](https://www.w3school.com.cn/jquery/selector_input_password.asp) | $(":password") | 所有 type="password" 的 `` 元素 | | [:radio](https://www.w3school.com.cn/jquery/selector_input_radio.asp) | $(":radio") | 所有 type="radio" 的 `` 元素 | | [:checkbox](https://www.w3school.com.cn/jquery/selector_input_checkbox.asp) | $(":checkbox") | 所有 type="checkbox" 的 `` 元素 | | [:submit](https://www.w3school.com.cn/jquery/selector_input_submit.asp) | $(":submit") | 所有 type="submit" 的 `` 元素 | | [:reset](https://www.w3school.com.cn/jquery/selector_input_reset.asp) | $(":reset") | 所有 type="reset" 的 `` 元素 | | [:button](https://www.w3school.com.cn/jquery/selector_input_button.asp) | $(":button") | 所有 type="button" 的 `` 元素 | | [:image](https://www.w3school.com.cn/jquery/selector_input_image.asp) | $(":image") | 所有 type="image" 的 `` 元素 | | [:file](https://www.w3school.com.cn/jquery/selector_input_file.asp) | $(":file") | 所有 type="file" 的 `` 元素 | | | | | | [:enabled](https://www.w3school.com.cn/jquery/selector_input_enabled.asp) | $(":enabled") | 所有激活的 input 元素 | | [:disabled](https://www.w3school.com.cn/jquery/selector_input_disabled.asp) | $(":disabled") | 所有禁用的 input 元素 | | [:selected](https://www.w3school.com.cn/jquery/selector_input_selected.asp) | $(":selected") | 所有被选取的 input 元素 | | [:checked](https://www.w3school.com.cn/jquery/selector_input_checked.asp) | $(":checked") | 所有被选中的 input 元素 | ### $("#id属性") id选择器选择某个id的元素，具有唯一性 ```js $(function () { $("#btn").click(function () { }); }); ``` ### $(".类名") 类选择器选择某个或者是多个元素 ```js $(".cls").css("backgroundColor", "yellow"); $(".cls").css("border", "1px solid red"); //设置某个元素的css样式属性值 .css("属性","值") ``` ### $("标签名字") 标签选择器多个元素或者是某个元素 ```js //页面加载的事件 $(function () { //根据id选择器获取按钮,添加点击事件 $("#btn").click(function () { //根据标签选择器获取p标签 $("p").text("我们都是p标签"); }); }); .text()方法相当于DOM中的.innerText属性对象.text() -> 获取该元素的文本内容对象.text("值") -> 设置该元素的文本内容 ``` ⚠️注意: 本身代码没有循环操作，jQuery中内部帮助我们循环操作的 -> 隐式迭代 ### $(标签名.类样式的名字) 交集选择器（标签+类选择器） ```js $(function () { $("#btn").click(function () { $("p.cls").css("backgroundColor", "green"); }); }); ``` ### $(选择器,选择器..) 并集选择器（多条件选择器） ```js $(function () { $("#btn").click(function () { $("#dv,p,.cls").css("backgroundColor", "orange"); }); }); ``` ### 层次选择器（后代选择器） ```js $("A B") 后代选择器 //选择A元素内部的所有B元素 $("A > B") 子选择器 //选择A元素内部的所有B子元素 $("#A~B") 后面的全部元素 //获取的是A这个父级元素后面的所有的兄弟元素（B） $("#A+B") 下一个元素 //获取的是div后面直接的兄弟元素 $("#btn").click(function () { // 获取的是div这个父级元素中所有span标签(直接的子元素,孙子元素) $("#div span").css("backgroundColor","red"); // 获取的是div这个父级元素中直接的子元素 $("#div>span").css("backgroundColor","red"); // 获取的是div这个父级元素后面的所有的兄弟元素---span $("#div~span").css("backgroundColor","red"); // 获取的是div后面直接的兄弟元素 $("#div+span").css("backgroundColor","red"); }); ``` ### 属性选择器 ```js $("A[属性名]") 属性名称选择器 //包含指定属性的选择器 $("A[属性名='值']") 属性值选择器 //包含指定属性等于指定值的选择器 $("A[属性名='值'][]...") 复合属性选择器 //包含多个属性条件的选择器 ``` ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/086eef519573458fa94c2ef9670a7489~tplv-k3u1fbpfcp-watermark.image) ### 过滤选择器（筛选器） ```js $("选择器:first") 首元素选择器 //多元素集合的第一个元素 $("选择器:last") 尾元素选择器 //多元素集合的最后一个元素 $("选择器:odd") 奇数选择器 $("选择器:even") 偶数选择器 $("选择器:lt(索引)") 小于索引选择器 //获取小于这个索引的元素 $("选择器:gt(索引)") 大于索引选择器 //获取大于这个索引的元素 $("选择器:header") 标题选择器 //获得标题（h1~h6）元素，固定写法 $("选择器:eq(index)") 等于索引选择器 //$('div').eq(5); //选择第6个div元素 $("选择器:not(selector)") 非元素选择器 //$('div').not('.myClass'); //选择不等于myClass的div元素 ``` ```js 表单过滤选择器 :enabled 获得可用元素 :disabled 获得不可用元素 :checked 获得单选/复选框选中的元素 :selected 获得下拉框选中的元素 ``` ```js .index() 索引选择器 //元素的索引 // 操作当前元素集，删除不匹配的元素，得到一个新的集合 .filter() $('li').filter('.a').css('background-color', 'red') // 检索该条件在每个元素的后代中是否存在，将符合条件的的元素构成新的结果集 .has() $('li').has('span').css('background-color', 'red') // 当前选中元素的上下文中找到符合条件的后代，返回的是子元素 .find() $('li').find('span').css('background-color', 'red'); ``` ⚠️注意: filter()方法与has()方法中的参数，都是过滤条件。不同的是filter()方法，条件作用于自身；has()方法条件是作用于它的后代元素中 ### 有元素获取其他元素的方法 ```js 当前元素.next() -> 下一个兄弟元素当前元素.nextAll() -> 后面所有的兄弟元素当前元素.prev() -> 前一个兄弟元素当前元素.prevAll() -> 前面所有的兄弟元素当前元素.siblings() -> 所有的兄弟元素(没有自己) 当前元素.parent() -> 父级元素当前元素.children() -> 当前元素中所有的子元素(直接的子元素) 当前元素.find("选择器") -> 从当前元素中找某个或者是某些元素当前元素.has("选择器") -> 从当前元素中检索后代是否存在匹配的元素当前元素.filter("选择器") -> 操作当前元素集，删除不匹配的元素，得到一个新的集合 ``` ## 使用JQ选择器的案例 ### 奇红偶黄 ```js

1

2

3

4

``` ### 链式编程 ```js

1

2

3

4

``` ### 验证用户输入验证为中文名字则文本框的背景为绿色,否则为红色 ```js ```