如需要跟多资料请点击下方图片⬇（扫码加好友→备注66）
Jquery选择器
和使用js操作Dom一样，获取文档中的节点对象是很频繁的一个操作，在jQuery中提供了简便的方式供我们查找|定位元素，称为jQuery选择器，选择器可以说是最考验一个人 jQuery 功力的地方，通俗的讲, Selector 选择器就是"一个表示特殊语意的字符串"。 只要把选择器字符串传入上面的方法中就能够选择不同的Dom 对象并且以 jQuery 包装集的形式返回。
jQuery 选择器按照功能主要分为"选择"和"过滤"。 并且是配合使用的，具体分类如下。基础选择器掌握即可 ,其他用到再查阅。
基础选择器
| 选择器 | 名称 | 举例 |
|---|
| id选择器 | #id | $("#testDiv")选择id为testDiv的元素 |
| 元素名称选择器 | element | $("div")选择所有div元素 |
| 类选择器 | .class | $(".blue")选择所有class=blue的元素 |
| 选择所有元素 | * | $("*")选择页面所有元素 |
| 组合选择器 | selector1,selector2,selectorN | $("#testDiv,span,.blue")同时选中多个选择器匹配的元素 |
<style type='text/css'> .blue{ background: blue; }</style><body> <div id='mydiv1'>id选择器1<span>span中的内容</span></div> <div id='mydiv2' class='blue'>元素选择器</div> <span class='blue'>样式选择器</span></body><script src='js/jquery-3.4.1.js' type='text/javascript' charset='utf-8'></script><script type='text/javascript'> // id选择器 console.log('======id===='); var idSelecter = $('#mydiv1'); console.log(idSelecter.html()); console.log(idSelecter.text()); // 元素选择器 console.log('======name===='); var nameSe = $('div'); // 有多个div元素 nameSe.each(function(){ // this是dom对象，$(this)是jquery对象 console.log($(this).text()); }); // 类选择器，class console.log('======class===='); var classSe = $('.blue'); // 有多个class=blue的元素 classSe.each(function(){ console.log($(this).text()); }); // 通用选择器：* console.log('======所有元素===='); var all = $('*'); console.log(all.length); // 组合选择器 console.log('======组合===='); var unionSe = $('span, .blue,div'); unionSe.each(function(){ console.log($(this).text()); });</script>
层次选择器
| 选择器 | 名称 | 举例 |
|---|
| 后代选择器 | ancestor descendant | $("#parent div")选择id为parent的元素的所有div元素 |
| 子代选择器 | parent > child | $("#parent>div")选择id为parent的直接div子元素 |
| 相邻选择器 | prev + next | $(".blue + img")选择css类为blue的下一个img元素 |
| 同辈选择器 | prev ~ sibling | $(".blue ~ img")选择css类为blue的之后的img元素 |
<!DOCTYPE html><html> <head> <meta charset='utf-8'> <title>层次选择器</title> <script src='js/jquery-3.4.1.js' type='text/javascript'></script> <style type='text/css'> .testColor{ background: green; } .gray{ background: gray; } </style> </head> <body> <div id='parent'>层次择器 <div id='child' class='testColor'>父选择器 <div class='gray'>子选择器</div> <img src='http://www.baidu.com/img/bd_logo1.png' width='270' height='129' /> <img src='http://www.baidu.com/img/bd_logo1.png' width='270' height='129' /> </div> <div> 选择器2<div>选择器2中的div</div> </div> </div> </body> <script type='text/javascript'> console.log('=========后代选择器-选择所有后代====='); var ancestorS = $('#parent div'); ancestorS.each(function(){ console.log($(this).text()); }); console.log('=========子代选择器-选择儿子辈====='); var child = $('#parent>div'); child.each(function(){ console.log($(this).text()); }); console.log('=========相邻选择器====='); var pre_next = $('.gray + img'); console.log(pre_next.length); console.log('=========同辈选择器,其后，（弟弟）====='); var pre_siblings = $('.gray ~ img'); console.log(pre_siblings.length); </script></html>
表单选择器
| Forms | 名称 | 举例 |
|---|
| 表单选择器 | :input | 查找所有的input元素：$(":input")；<br />注意：会匹配所有的input、textarea、select和button元素。 |
| 文本框选择器 | :text | 查找所有文本框：$(":text") |
| 密码框选择器 | :password | 查找所有密码框：$(":password") |
| 单选按钮选择器 | :radio | 查找所有单选按钮：$(":radio") |
| 复选框选择器 | :checkbox | 查找所有复选框：$(":checkbox") |
| 提交按钮选择器 | :submit | 查找所有提交按钮：$(":submit") |
| 图像域选择器 | :image | 查找所有图像域：$(":image") |
| 重置按钮选择器 | :reset | 查找所有重置按钮：$(":reset") |
| 按钮选择器 | :button | 查找所有按钮：$(":button") |
| 文件域选择器 | :file | 查找所有文件域：$(":file") |
<!DOCTYPE html><html> <head> <meta charset='utf-8'> <title>表单验证</title> <script src='js/jquery-3.4.1.js' type='text/javascript'></script> </head> <body> <form id='myform' name='myform' method='post'> <input type='hidden' name='uno' value='9999' disabled='disabled'/> 姓名:<input type='text' id='uname' name='uname' /><br /> 密码:<input type='password' id='upwd' name='upwd' value='123456' /><br /> 年龄:<input type='radio' name='uage' value='0' checked='checked'/>小屁孩 <input type='radio' name='uage' value='1'/>你懂得 <br /> 爱好:<input type='checkbox' name='ufav' value='篮球'/>篮球 <input type='checkbox' name='ufav' value='爬床'/>爬床 <input type='checkbox' name='ufav' value='代码'/>代码<br /> 来自:<select id='ufrom' name='ufrom'> <option value='-1' selected='selected'>请选择</option> <option value='0'>北京</option> <option value='1'>上海</option> </select><br /> 简介:<textarea rows='10' cols='30' name='uintro'></textarea><br /> 头像:<input type='file' /><br /> <input type='image' src='http://www.baidu.com/img/bd_logo1.png' width='20' height='20'/> <button type='submit' onclick='return checkForm();'>提交</button> <button type='reset' >重置</button> </form> </body></html><script type='text/javascript'> function checkForm(){ // 获取 所有的表单元素 $(':input').each(function(){ // console.log($(this)[0]); console.log($(this)[0].tagName); }) console.log('------+++++++++++++++++++++--------') // 获取 text console.log('text-->' + $(':text').length); // 1 // 获取 password console.log('password-->' + $(':password').length); // 1 // 获取radio console.log('radio-->' + $(':radio').length); // 2 // 获取checkbox console.log('checkbox-->' + $(':checkbox').length); // 3 // 获取file console.log('file-->' + $(':file').length); // 1 // 获取按钮 console.log('button-->' + $(':button').length); // 2 // 获取submit按钮 console.log('submit-->' + $(':submit').length); // 1 // 获取image按钮 console.log('image-->' + $(':image').length); // 1 // 获取reset按钮 console.log('reset-->' + $(':reset').length); // 1 return false; }</script>
原文地址：https://blog.51cto.com/14816480/2508107
