jquery选择器都有哪些

Posted 2023-04-17

jQuery 选择器简介

jQuery 选择器允许对 HTML 元素组或单个元素进行操作。

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头：$()。

1 .基本选择器

$("#test")             　　　　   选择id值为test的元素，id值是唯一的所以返回单个元素。

$("div")               　　　　   选择所有的div标签元素，返回div元素数组

$(".myclass")          　　　　   选择使用myclass类的css的所有元素

$("*")                 　　　　   选取所有元素。

$("#test,div,.myclass")  　　    选取多个元素。

2.层次选择器

$("div span") 　　　　　　　　　　  选取<div>里的所有<span>元素

$("div >span")   　　　　　　　　  选取<div>元素下元素名是<span>的子元素

$("#one +div")   　　　　　　　　  选取id为one的元素的下一个<div>同辈元素    　　　　等同于$("#one").next("div")

$("#one~div")    　　　　　　　　  选取id为one的元素的元素后面的所有<div>同辈元素    等同于$("#one").nextAll("div")

$("#one").siblings("div") 　　   获取id为one的元素的所有<div>同辈元素（不管前后）

$("#one").prev("div") 　　 　　 　获取id为one的元素的前面紧邻的同辈<div>元素

 

所以 获取元素范围大小顺序依次为：

$("#one").siblings("div")>$("#one~div")>$("#one +div") 

或是

$("#one").siblings("div")>$("#one").nextAll("div")>$("#one").next("div")

3.基本过滤选择器

$("div:first")               　　选取所有<div>元素中第1个<div>元素

$("div:last")                   选取所有<div>元素中最后一个<div>元素

$("input:not(.myClass)")        选取class不是myClass的<input>元素

$("input:even")                 选取索引是偶数的<input>元素(索引从0开始)

$("input:odd")                  选取索引是基数的<input>元素(索引从0开始)

$("input:eq(2)")                选取索引等于2的<input>元素

$("input:gt(4)")                选取索引大于4的<input>元素

$("input:lt(4)")                选取索引小于4的<input>元素

$(":header")                    过滤掉所有标题元素，例如：h1、h2、h3等

$("div:animated")               选取正在执行动画的<div>元素 

$(":focus")                     选取当前获取焦点的元素

4.内容过滤选择器

$("div:contains('Name')")       选取所有<div>中含有'Name'文本的元素

$("div:empty")                  选取不包含子元素（包括文本元素）的<div>空元素

$("div:has(p)")                 选取所有含有<p>元素的<div>元素

$("div:parent")                 选取拥有子元素的（包括文本元素）<div>元素

5.可见性过滤选择器

$("div:hidden")                 选取所有不可见的<div>元素

$("div:visible")                选取所有可见的<div>元素

   

6.属性过滤选择器

$("div[id]")              　　　　选取所有拥有属性id的元素

$("input[name='test']")     　　 选取所有的name属性等于'test'的<input>元素

$("input[name!='test']")  　　　　选取所有的name属性不等于'test'的<input>元素

$("input[name^='news']")        选取所有的name属性以'news'开头的<input>元素

$("input[name$='news']")        选取所有的name属性以'news'结尾的<input>元素

$("input[name*='news']")        选取所有的name属性包含'news'的<input>元素

$("div[title|='en']")           选取属性title等于'en'或以'en'为前缀(该字符串后跟一个连字符'-')的<div>元素

$("div[title~='en']")           选取属性title用空格分隔的值中包含字符en的<div>元素

$("div[id][title$='test']")     选取拥有属性id,并且属性title以'test'结束的<div>元素

7.子元素过滤选择器

$("div .one:nth-child(2)")       选取class为'one'的<div>父元素下的第2个子元素

$("div span:first-child")        选取每个<div>中的第1个<span>元素

$("div span:last-child")         选取每个<div>中的最后一个<span>元素

$("div button:only-child")       在<div>中选取是唯一子元素的<button>元素

8.表单对象属性过滤选择器

$("#form1 :enabled")             选取id为'form1'的表单内所有可用元素

$("#form2 :disabled")            选取id为'form2'的表单内所有不可用元素

$("input :checked")              选取所有被选中的<input>元素 　　

$("select option:selected")      选取所有的select 的子元素中被选中的元素

9.表单选择器

$(":input")                      选取所有<input>,<textarea>,<select> 和 <button>元素

$(":text")                    　　选取所有的单行文本框

$(":password")                   选取所有的密码框

$(":radio")                      选取所有单的选框

$(":checkbox")                   选取所有的多选框

$(":submit")                     选取所有的提交按钮

$(":image")                      选取所有的图像按钮

$(":reset")                      选取所有的重置按钮

$(":button")                     选取所有的按钮

$(":file")                       选取所有的上传域

$(":hidden")                     选取所有不可见元素

参考技术A $("#myELement")
选择id值等于myElement的元素，id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素
$("div")
选择所有的div标签元素，返回div元素数组
$(".myClass")
选择使用myClass类的css的所有元素
$("*")
选择文档中的所有的元素，可以运用多种的选择方式进行联合选择：例如$("#myELement,div,.myclass")
层叠选择器：
$("form
input")
选择所有的form元素中的input元素
$("#main
>
*")
选择id值为main的所有的子元素
$("label
+
input")
选择所有的label元素的下一个input元素节点，经测试选择器返回的是label标签后面直接跟一个input标签的所有input标签元素
$("#prev
~
div")
同胞选择器，该选择器返回的为id为prev的标签元素的所有的属于同一个父元素的div标签
基本过滤选择器：
$("tr:first")
选择所有tr元素的第一个
$("tr:last")
选择所有tr元素的最后一个
$("input:not(:checked)
+
span")
过滤掉：checked的选择器的所有的input元素
$("tr:even")
选择所有的tr元素的第0，2，4...
...个元素（注意：因为所选择的多个元素时为数组，所以序号是从0开始）
$("tr:odd")
选择所有的tr元素的第1，3，5...
...个元素
$("td:eq(2)")
选择所有的td元素中序号为2的那个td元素
$("td:gt(4)")
选择td元素中序号大于4的所有td元素
$("td:ll(4)")
选择td元素中序号小于4的所有的td元素
$(":header")
$("div:animated")
内容过滤选择器：
$("div:contains('John')")
选择所有div中含有John文本的元素
$("td:empty")
选择所有的为空（也不包括文本节点）的td元素的数组
$("div:has(p)")
选择所有含有p标签的div元素
$("td:parent")
选择所有的以td为父节点的元素数组
可视化过滤选择器：
$("div:hidden")
选择所有的被hidden的div元素
$("div:visible")
选择所有的可视化的div元素
属性过滤选择器：
$("div[id]")
选择所有含有id属性的div元素
$("input[name='newsletter']")
选择所有的name属性等于'newsletter'的input元素
$("input[name!='newsletter']")
选择所有的name属性不等于'newsletter'的input元素
$("input[name^='news']")
选择所有的name属性以'news'开头的input元素
$("input[name$='news']")
选择所有的name属性以'news'结尾的input元素
$("input[name*='man']")
选择所有的name属性包含'news'的input元素
$("input[id][name$='man']")
可以使用多个属性进行联合选择，该选择器是得到所有的含有id属性并且那么属性以man结尾的元素
子元素过滤选择器：
$("ul
li:nth-child(2)"),$("ul
li:nth-child(odd)"),$("ul
li:nth-child(3n
+
1)")
$("div
span:first-child")
返回所有的div元素的第一个子节点的数组
$("div
span:last-child")
返回所有的div元素的最后一个节点的数组
$("div
button:only-child")
返回所有的div中只有唯一一个子节点的所有子节点的数组
表单元素选择器：
$(":input")
选择所有的表单输入元素，包括input,
textarea,
select
和
button
$(":text")
选择所有的text
input元素
$(":password")
选择所有的password
input元素
$(":radio")
选择所有的radio
input元素
$(":checkbox")
选择所有的checkbox
input元素
$(":submit")
选择所有的submit
input元素
$(":image")
选择所有的image
input元素
$(":reset")
选择所有的reset
input元素
$(":button")
选择所有的button
input元素
$(":file")
选择所有的file
input元素
$(":hidden")
选择所有类型为hidden的input元素或表单的隐藏域
表单元素过滤选择器：
$(":enabled")
选择所有的可操作的表单元素
$(":disabled")
选择所有的不可操作的表单元素
$(":checked")
选择所有的被checked的表单元素
$("select
option:selected")
选择所有的select
的子元素中被selected的元素
选取一个
name
为”S_03_22″的input
text框的上一个td的text值
$(”input[@
name
=S_03_22]“).parent().prev().text()
名字以”S_”开始，并且不是以”_R”结尾的
$(”input[@
name
^='S_']“).not(”[@
name
$='_R']“)
一个名为
radio_01的radio所选的值
$(”input[@
name
=radio_01][@checked]“).val();
$("A
B")
查找A元素下面的所有子节点，包括非直接子节点
$("A>B")
查找A元素下面的直接子节点
$("A+B")
查找A元素后面的兄弟节点，包括非直接子节点
$("A~B")
查找A元素后面的兄弟节点，不包括非直接子节点

Jquery选择器

Jquery选择器允许开发者对HTML元素组或单个元素进行操作，主要分为以下三类

所有的选择器都以美元符号$()开头

　　一、元素选择器

　　　　Jquery元素选择器基于元素名选择元素。如选择页面中所有<p>元素:$("p")

　　　　实例：用户点击按钮后，所有p元素隐藏

　　　　

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<!DOCTYPE html> <html>     <head>         <meta charset="utf-8">         <title>菜鸟教程(runoob.com)</title>         <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>         <script>             $(document).ready(function(){                   $("button").click(function(){                       $("p").hide();                   });             });         </script>     </head>       <body>         <h2>这是一个标题</h2>         <p>这是一个段落。</p>         <p>这是另一个段落。</p>         <button>点我</button>     </body> </html>

　　　　<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> 这行代码使用百度的cdn地址来引用代码

　　　　$(document).ready(function(){}) 表示在文档完全加载完成时执行jquery代码

　　　　页面效果如下：

　　　　

　　　　当点击"点我"按钮时，所有的P元素都会被隐藏掉

　　　　

 

　　二、#id选择器

　　　　元素的id是唯一的，可以通过id找到页面中特定的元素

　　　　

1 2 3 4 5 6 7

<body>     <h2>这是一个标题</h2>     <p>这是一个段落。</p>     <p>这是另一个段落。</p>     <p id="test">id选择器</p>     <button>点我</button> </body>

　　在body中新增一个id="test"的p标签，然后再修改jquery代码

　　

1 2 3 4 5 6 7

<script>     $(document).ready(function(){         $("button").click(function(){             $("#test").hide();         });     }); </script>

　　此时如果点击按钮，则只有id="test"的p标签会被隐藏掉

　　

 

　　三、.class选择器

　　　　类选择器针对一些具有同一类名的元素，在body中增加2个类名相同的不同标签元素

　　　　

1 2 3 4 5 6 7 8 9

<body>     <h2>这是一个标题</h2>     <p>这是一个段落。</p>     <p>这是另一个段落。</p>     <p id="test">id选择器</p>     <span class="classname">类名选择器1</span>     <p class="classname">类名选择器2</p>     <button>点我</button> </body>

　　更改jquery代码

1 2 3 4 5 6 7

<script>     $(document).ready(function(){         $("button").click(function(){             $(".classname").hide();         });     }); </script>

　　点击按钮则类名为classname的元素会被隐藏