jQuery选择器全解

最新推荐文章于 2024-07-25 10:45:42 发布
最新推荐文章于 2024-07-25 10:45:42 发布
阅读量1.4k 收藏 1
点赞数
分类专栏： Jquery 文章标签： jquery input div css html function

jQuery选择器全解


通俗的讲, Selector选择器就是"一个表示特殊语意的字符串". 只要把选择器字符串传入上面的方法中就能够选择不同的Dom对象并且以jQuery包装集的形式返回.

但是如何将jQuery选择器分类让我犯难. 因为书上的分类和jQuery官方的分类截然不同. 最后我决定以实用为主, 暂时不去了解CSS3选择器标准, 而按照jQuery官方的分类进行讲解.

jQuery的选择器支持CSS3选择器标准. 下面是W3C最新的CSS3选择器标准:

http://www.w3.org/TR/css3-selectors/

标准中的选择器都可以在jQuery中使用.

jQuery选择器按照功能主要分为"选择"和"过滤". 并且是配合使用的. 可以同时使用组合成一个选择器字符串. 主要的区别是"过滤"作用的选择器是指定条件从前面匹配的内容中筛选, "过滤"选择器也可以单独使用, 表示从全部"*"中筛选. 比如:

$(":[title]")

等同于:

$("*:[title]")

而"选择"功能的选择器则不会有默认的范围, 因为作用是"选择"而不是"过滤".

下面的选择器分类中, 带有"过滤器"的分类表示是"过滤"选择器, 否则就是"选择"功能的选择器.

jQuery选择器分为如下几类:

[说明]
1.点击"名称"会跳转到此方法的jQuery官方说明文档.
2.可以在下节中的jQuery选择器实验室测试各种选择器

1. 基础选择器 Basics

名称

说明

举例

#id

根据元素Id选择

$("divId") 选择ID为divId的元素

element

根据元素的名称选择,

$("a") 选择所有<a>元素

.class

根据元素的css类选择

$(".bgRed") 选择所用CSS类为bgRed的元素

*

选择所有元素

$("*")选择页面所有元素

selector1,
selector2,
selectorN

可以将几个选择器用","分隔开然后再拼成一个选择器字符串.会同时选中这几个选择器匹配的内容.

$("#divId, a, .bgRed")

 

[学习建议]: 大家暂时记住基础选择器即可, 可以直接跳到下一节"jQuery选择器实验室"进行动手练习, 以后再回来慢慢学习全部的选择器, 或者用到的时候再回来查询.

2.层次选择器 Hierarchy

名称

说明

举例

ancestor descendant

使用"form input"的形式选中form中的所有input元素.即ancestor(祖先)为from, descendant(子孙)为input.

$(".bgRed div") 选择CSS类为bgRed的元素中的所有<div>元素.

parent > child

选择parent的直接子节点child. child必须包含在parent中并且父类是parent元素.

$(".myList>li") 选择CSS类为myList元素中的直接子节点<li>对象.

prev + next

prev和next是两个同级别的元素. 选中在prev元素后面的next元素.

$("#hibiscus+img")选在id为hibiscus元素后面的img对象.

prev ~ siblings

选择prev后面的根据siblings过滤的元素
注:siblings是过滤器

$("#someDiv~[title]")选择id为someDiv的对象后面所有带有title属性的元素

 

3.基本过滤器 Basic Filters

名称

说明

举例

:first

匹配找到的第一个元素

查找表格的第一行:$("tr:first")

:last

匹配找到的最后一个元素

查找表格的最后一行:$("tr:last")

:not(selector)

去除所有与给定选择器匹配的元素

查找所有未选中的 input 元素: $("input:not(:checked)")

:even

匹配所有索引值为偶数的元素，从 0 开始计数

查找表格的1、3、5...行:$("tr:even")

:odd

匹配所有索引值为奇数的元素，从 0 开始计数

查找表格的2、4、6行:$("tr:odd")

:eq(index)

匹配一个给定索引值的元素
注:index从 0 开始计数

查找第二行:$("tr:eq(1)")

:gt(index)

匹配所有大于给定索引值的元素
注:index从 0 开始计数

查找第二第三行，即索引值是1和2，也就是比0大:$("tr:gt(0)")

:lt(index)

选择结果集中索引小于 N 的 elements
注:index从 0 开始计数

查找第一第二行，即索引值是0和1，也就是比2小:$("tr:lt(2)")

:header

选择所有h1,h2,h3一类的header标签.

给页面内所有标题加上背景色: $(":header").css("background", "#EEE");

:animated

匹配所有正在执行动画效果的元素

只有对不在执行动画效果的元素执行一个动画特效: $("#run").click(function(){
$("div:not(:animated)").animate({ left: "+=20" }, 1000);
});

 

 

4. 内容过滤器 Content Filters

名称

说明

举例

:contains(text)

匹配包含给定文本的元素

查找所有包含 "John" 的 div 元素:$("div:contains('John')")

:empty

匹配所有不包含子元素或者文本的空元素

查找所有不包含子元素或者文本的空元素:$("td:empty")

:has(selector)

匹配含有选择器所匹配的元素的元素

给所有包含 p 元素的 div 元素添加一个 text 类: $("div:has(p)").addClass("test");

:parent

匹配含有子元素或者文本的元素

查找所有含有子元素或者文本的 td 元素:$("td:parent")

 

5.可见性过滤器 Visibility Filters

名称

说明

举例

:hidden

 

匹配所有的不可见元素

注:在1.3.2版本中, hidden匹配自身或者父类在文档中不占用空间的元素.如果使用CSS visibility属性让其不显示但是占位,则不输入hidden.

 

查找所有不可见的 tr 元素:$("tr:hidden")

:visible

匹配所有的可见元素

查找所有可见的 tr 元素:$("tr:visible")

6.属性过滤器 Attribute Filters

名称

说明

举例

[attribute]

匹配包含给定属性的元素

查找所有含有 id 属性的 div 元素:
$("div[id]")

[attribute=value]

匹配给定的属性是某个特定值的元素

查找所有 name 属性是 newsletter 的 input 元素:
$("input[name='newsletter']").attr("checked", true);

[attribute!=value]

匹配给定的属性是不包含某个特定值的元素

查找所有 name 属性不是 newsletter 的 input 元素:
$("input[name!='newsletter']").attr("checked", true);

[attribute^=value]

匹配给定的属性是以某些值开始的元素

$("input[name^='news']")

[attribute$=value]

匹配给定的属性是以某些值结尾的元素

查找所有 name 以 'letter' 结尾的 input 元素:
$("input[name$='letter']")

[attribute*=value]

匹配给定的属性是以包含某些值的元素

 

查找所有 name 包含 'man' 的 input 元素:
$("input[name*='man']")

 

[attributeFilter1][attributeFilter2][attributeFilterN]

复合属性选择器，需要同时满足多个条件时使用。

找到所有含有 id 属性，并且它的 name 属性是以 man 结尾的:
$("input[id][name$='man']")

7.子元素过滤器 Child Filters

名称

说明

举例

:nth-child(index/even/odd/equation)

匹配其父元素下的第N个子或奇偶元素

':eq(index)' 只匹配一个元素，而这个将为每一个父元素匹配子元素。:nth-child从1开始的，而:eq()是从0算起的！

可以使用:
nth-child(even)
:nth-child(odd)
:nth-child(3n)
:nth-child(2)
:nth-child(3n+1)
:nth-child(3n+2)

 

在每个 ul 查找第 2 个li:
$("ul li:nth-child(2)")

:first-child

匹配第一个子元素

':first' 只匹配一个元素，而此选择符将为每个父元素匹配一个子元素

 

在每个 ul 中查找第一个 li:
$("ul li:first-child")

:last-child

匹配最后一个子元素

':last'只匹配一个元素，而此选择符将为每个父元素匹配一个子元素

 

在每个 ul 中查找最后一个 li:
$("ul li:last-child")

:only-child

如果某个元素是父元素中唯一的子元素，那将会被匹配

如果父元素中含有其他元素，那将不会被匹配。

 

在 ul 中查找是唯一子元素的 li:
$("ul li:only-child")

8.表单选择器 Forms


名称

说明

解释

:input

匹配所有 input, textarea, select 和 button 元素

查找所有的input元素:
$(":input")

:text

匹配所有的文本框

查找所有文本框:
$(":text")

:password

匹配所有密码框

查找所有密码框:
$(":password")

:radio

匹配所有单选按钮

查找所有单选按钮

:checkbox

匹配所有复选框

查找所有复选框:
$(":checkbox")

:submit

匹配所有提交按钮

查找所有提交按钮:
$(":submit")

:image

匹配所有图像域

 

匹配所有图像域:
$(":image")

:reset

匹配所有重置按钮

查找所有重置按钮:
$(":reset")

:button

匹配所有按钮

查找所有按钮:
$(":button")

:file

匹配所有文件域

查找所有文件域:
$(":file")

9.表单过滤器 Form Filters

名称

说明

解释

:enabled

匹配所有可用元素

 

查找所有可用的input元素:
$("input:enabled")

:disabled

匹配所有不可用元素

查找所有不可用的input元素:
$("input:disabled")

:checked

匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)

查找所有选中的复选框元素:
$("input:checked")

:selected

匹配所有选中的option元素

查找所有选中的选项元素:
$("select option:selected")

 

实例展现：

 

 

关键字: jquery元素包装集

JQuery选择器（$( )）可以用来选择，创建DOM元素。一般来说，过去我们使用JS去控制页面的DOM，比如下面这段JS：

Javascript代码
  1. <script type="text/javascript">    
  2. function test()   
  3. {   
  4.   var frm = document.form1;   
  5.   var tb = document.getElementById("tb1");    //获取表格对象   
  6.   var trs = tb.getElementsByTagName("tr");        //获取所有的<tr>   
  7.   //等等   
  8. }   
  9. </script>  
<script type="text/javascript"> 
function test()
{
  var frm = document.form1;
  var tb = document.getElementById("tb1");    //获取表格对象
  var trs = tb.getElementsByTagName("tr");        //获取所有的<tr>
  //等等
}
</script>


使用WINDOW.document对象的getElementById或getElementsByTagName去获取页面里的DOM元素，而现在，我们可以使用$( )，让一切变的简洁与简单。

$( )使用类似CSS的语法格式，比如：

$("li")  选中页面中所有包含li元素的DOM。等同的，$("a")。选中所有连接。

或者我们可以根据DOM的ID来进行选择，比如：

$("#someDiv")，我们责选中了以下DIV：

Html代码
  1. <div id="someDiv">我是DIV，ID叫someDiv <tt>someDiv</tt></div>  
<div id="someDiv">我是DIV，ID叫someDiv <tt>someDiv</tt></div>


我们还可以使用更强大的选择器，比如：

$(".someDiv")或$("DomName.className")如：$("ul.myList")我们可以选中拥有CSS类someDiv的元素。


比如我们还可以对以下HTML代码：

Html代码
  1. <div id="someDiv">我是DIV，ID叫someDiv <tt>someDiv</tt></div>  
<div id="someDiv">我是DIV，ID叫someDiv <tt>someDiv</tt></div>


这样选择：$("#someDiv tt")，我们就可以取得 <tt>someDiv</tt> 这个DOM元素。

还可以获取Form表单，如有下HTML：

Html代码
  1. <form action="" method="put" onsubmit="return false;">  
  2.   <div>  
  3.     <label>Text:</label> <input type="text" id="aTextField" name="someTextField"/>  
  4.   </div>  
  5.   
  6.   <button type="submit" id="submitButton">Submit</button>  
  7. </form>  
<form action="" method="put" οnsubmit="return false;">
  <div>
    <label>Text:</label> <input type="text" id="aTextField" name="someTextField"/>
  </div>

  <button type="submit" id="submitButton">Submit</button>
</form>


用选择器：$("form #aTextField") 获取 <input type="text" id="aTextField" name="someTextField"/> 。

JQuery选择器非常强大，包括子选择器，容器选择器，特性选择器，而且JQuery选择器本身附带了许多不同的方法，我们可以查询JQuery文档。

JQuery的子选择器，一般来说，有如下HTML：

Html代码
  1. <ul class="myList">  
  2.   <li><a href="http://jquery.com">jQuery supports</a>  
  3.     <ul>  
  4.       <li><a href="css1">CSS1</a></li>  
  5.       <li><a href="css2">CSS2</a></li>  
  6.       <li><a href="css3">CSS3</a></li>  
  7.       <li>Basic XPath</li>  
  8.     </ul>  
  9.   </li>  
  10.   <li>jQuery also supports   
  11.     <ul>  
  12.       <li>Custom selectors</li>  
  13.       <li>Form selectors</li>  
  14.     </ul>  
  15.   </li>  
  16. </ul>  
<ul class="myList">
  <li><a href="http://jquery.com">jQuery supports</a>
    <ul>
      <li><a href="css1">CSS1</a></li>
      <li><a href="css2">CSS2</a></li>
      <li><a href="css3">CSS3</a></li>
      <li>Basic XPath</li>
    </ul>
  </li>
  <li>jQuery also supports
    <ul>
      <li>Custom selectors</li>
      <li>Form selectors</li>
    </ul>
  </li>
</ul>


如果我们要选择 <li><a href="css1">CSS1</a></li> 这个DOM元素，怎么办？我们这样使用JQuery选择器：$(".myList li ul li a")，发现我们会选中所有ul下的li。这个时候我们可以使用子选择器来选定第一个li。如： $(".myList > li > a")，这里使用了符号">"。

而特性选择器：如$(form[method])会选择所有form中含有method的form。

选择器还可以按位置来选择，比如：$("form div label:first")，它可以帮我们选择第一个label。$("form div label:odd")选中为奇数的label。或者偶数$("form div label:even")的label。最后一个label，$(form div label:last)。

包括我们还可以使用$(input[type=radio]:checked)，来选中radio被选中的元素。$(input[type=checkbox]:checked)来选中已经被选中的checkbox。

$(#languages tbody tr td:eq(2))这个选择器会选择第3个td。从0开始：

eq(n)，选择第n个DOM元素；gt(n)，选择除n以外的所有元素；lt(n)，选择除n以外之前的所有DOM元素。

包括可以让JQUERY创建一个新页面：
Html代码
  1. <html>    
  2.   <head>    
  3.     <title></title>    
  4.     <script type="text/javascript" src="scripts/jquery-1.2.1.js"></script>    
  5.        
  6.        
  7.     <script type="text/javascript">    
  8.      $(function(){   
  9.       //add one div   
  10.       $("<div class='foo'>I have foo!</div><div>I don 't</div>").appendTo("#someParentDiv");   
  11.       //add two div   
  12.       $("<div>Hi,I'm 2....OK?</div>").appendTo("#hello");   
  13.      });   
  14.   
  15.      $(function(){   
  16.         $("#j").html("DOM元素DIV的总和为："+$("div").size());   
  17.      });   
  18.        
  19.        
  20.     </script>    
  21.        
  22.        
  23.   </head>    
  24.     
  25.   <body>    
  26.     <div id="j">Div 1</div>    
  27.     <div id="someParentDiv">Div 2</div>    
  28.     <div id="hello">Div 3</div>  
  29.     <div id="gg">hi...gogo!</div>  
  30.        
  31.   </body>    
  32. </html>   
<html> 
  <head> 
    <title></title> 
    <script type="text/javascript" src="scripts/jquery-1.2.1.js"></script> 
	
	
    <script type="text/javascript"> 
     $(function(){
	  //add one div
	  $("<div class='foo'>I have foo!</div><div>I don 't</div>").appendTo("#someParentDiv");
	  //add two div
	  $("<div>Hi,I'm 2....OK?</div>").appendTo("#hello");
	 });

	 $(function(){
		$("#j").html("DOM元素DIV的总和为："+$("div").size());
	 });
	
	
    </script> 
	
	
  </head> 
 
  <body> 
    <div id="j">Div 1</div> 
    <div id="someParentDiv">Div 2</div> 
    <div id="hello">Div 3</div>
    <div id="gg">hi...gogo!</div>
	
  </body> 
</html>


一般来说，我们选择到了DOM元素的目的是为了取得列如TEXT这些元素的值，在JQUERY中我们可以这样获得：

Jquery代码
  1. /*获得TEXT.AREATEXT的值*/   
  2.     
  3. var textval = $("#text_id").attr("value");//或者   
  4.     
  5. var textval = $("#text_id").val();   
  6.     
  7. /*获取单选按钮的值*/   
  8.     
  9. var valradio = $("input[@type=radio][@checked]").val();   
  10.     
  11. /*获取复选框的值*/   
  12.     
  13. var checkboxval = $("#checkbox_id").attr("value")；   
  14.     
  15. /*获取下拉列表中所有的值*/   
  16.     
  17. var selectval = $('#select_id').val();  

如：

Html代码
  1. <html>    
  2.   <head>    
  3.     <title></title>    
  4.     <script type="text/javascript" src="scripts/jquery-1.2.1.js"></script>    
  5.        
  6.        
  7.     <script type="text/javascript">    
  8.   
  9.     function x(){   
  10.     var x=$("#aTextField").attr("value");   
  11.      alert(x);   
  12.     }   
  13.        
  14.     </script>    
  15. </head>    
  16.     
  17.   <body>    
  18.     <div id="j">Div 1</div>    
  19.     <input type="text" id="aTextField" onclick="x()"/>  
  20.   </body>    
  21. </html>   
jiangfeng861016
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery题目
strangeboys的博客
09-19 376
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="JQuery/jquery-3.4.1.min.js"> </script> <script&...
jQuery选择器思维导图
12-28
通过思维导图对知识进行梳理，以便记忆
jQuery中的选择器
James_shu的博客
08-14 411
jQuery中的选择器分成3类，分别是基本选择器、层次选择器和过滤选择器。一:基本选择器: 1.选择id为one的元素:$("#one") 2.选择class为nimi的所有的元素:$(".nimi") 3.选择标签名是div的所有元素:$("div") 4.选择所有的元素:$("*") 5.组合选择器,比如选择所有的span元素和id为two的元素: $("span,#two") 二:层次选择器:
jquery选择器详解
dianboliao0344的博客
01-20 222
jQuery 的选择器借鉴了大量 CSS1 ~ CSS3 标准的特点，并且整理成一个强大的对象选择工具集。但要注意的是如果你的对象名里包含 “#;&,.+*~’:”!^$[]()=>|/” 这些元字符时，你必须用 “\\” 进行转义。例如你要选择文档里包含 “name=”names[]“” 的 input 元素时，在编写过滤规则时你必须先对 “[]” 进行转义，所以我们应该...
jQuery-强大的jQuery选择器 (详解)[转]
ywj_316的博客
01-21 126
1. 基础选择器 Basics 名称 说明 举例 #id 根据元素Id选择 $("divId") 选择ID为divId的元素 element 根据元素的名称选择, $("a") 选择所有&lt;a&gt;元素...
jQuery选择器全面总结
10-26
此外，jQuery还提供了其他复杂的选择器，如属性选择器、内容选择器等，它们可以根据元素的属性值、文本内容或后代元素来选取元素。例如，`jQuery("[title]")`会选择所有有`title`属性的元素，而`jQuery(":contains('...
详解jQuery选择器
10-20
本文主要对jQuery选择器进行一一举例介绍，有助于学习、理解和记忆。具有很好的参考价值，下面就跟着小编一起来看下吧
jQuery 选择器详解
10-24
主要介绍了jQuery 选择器详解,图文并茂，十分不错，需要的朋友可以参考下
jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
houzhyan-博客
06-04 4581
原文地址:http://www.jb51.net/article/76917.htm 1.选择器 (1)通配符： 1 2 3 4 5 6 7 8 9 10 11 12 13 $("input[id^='code']");//id属性以code开始的所有input标签 $("input[id$='code']");//id
Java Jquery：（二）jQuery的选择器-8500字匠心出品
地球村
06-09 313
jQuery的选择器1.对象之间的转换and基本选择器2.并集、后代、父子选择器、后面N个兄弟元素3.列表特殊选择器4. input属性选择器5.表单选择器 1.对象之间的转换and基本选择器 对象之间的转换 DOM对象：直接使用JavaScript获取的节点对象 className innerHTML value jQuery对象：使用jQuery选择器获取的节点对象，它能够使用jQuery中的方法 addClass() html() val() DOM对象和jQuery对象分别拥有一套独立的方法，不能
jQuery选择器（一）
浮生若梦
02-29 98
通俗的讲, 选择器就是"一个表示特殊语意的字符串". 只要把选择器字符串传入方法中就能够选择不同的Dom对象并且以jQuery包装集的形式返回. jQuery选择器分类 1. 基础选择器 Basics 名称 说明 举例 #id 根据元素Id选择 $("divId") 选择ID为divId的元素 ...
jquery 选择器
mojianpo 莫建坡
06-29 102
Dom转jQuery包装集 如果要使用jQuery提供的函数, 就要首先构造jQuery包装集. 我们可以使用本文即将介绍的jQuery选择器直接构造jQuery包装集,比如: $("#testDiv");上面语句构造的包装集只含有一个id是testDiv的元素. 或者我们已经获取了一个Dom元素,比如:var div = document.getElementById("testD...
jquery选择器---基础选择器
weixin_43675671的博客
03-28 151
基础选择器：#id（ID选择器） ，用法：$("#id")；参数id为字符串，表示标签的id属性值。返回值为匹配id元素的对象。 element（类型选择器），用法:$(“element”)；参数element为字符串，表示标签的名称。返回值为匹配标签jquery的对 象。 ...
jQuery ajax() 方法
系统运维
08-04 185
jQuery Ajax 操作函数 jQuery 库拥有完整的 Ajax 兼容套件，其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据。 函数 描述 jQuery.ajax() 执行异步 HTTP (Ajax) 请求。 .ajaxComplete() 当 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。 .ajaxError() 当 Ajax 请求...
jQuery 选择器语法
weixin_33836874的博客
07-09 142
转自 http://www.pyzy.net/log_content.asp?LogId=223 jQuery选择器分为如下几类（点击“名称”会跳转到此方法的jQuery官方说明文档）： 1. 基础选择器 Basics 名称 说明 举例 #id 根据元素Id选择 $("divId") 选择ID为divId的元素 el...
flex：1
最新发布
m0_47999208的博客
07-25 379
2.flex-shrink,在flex布局中经常会遇到页面宽度不够而导致的文字换行问题，由于flex布局默认flex-shrink为1,就是默认可以缩小然后会导致换行，需要设置flex-shrink:0,默认不缩小就可以了。上面是120px高，给下面的外盒子高度设置为calc(100% - 120px);答：给外部盒子添加display：flex,内部盒子设置为flex-grow：1。现在有一个上下盒子，上面是固定值，下面是随页面高度变换的，如何让下面盒子的子盒子高度适应外部的高度呢？
CSS 自适应图片根据 div 大小进行均匀填充
gz_qiulinyong的博客
07-24 939
在Web开发中，经常需要图片根据其容器的大小进行自适应填充，使得图片在任何设备和屏幕尺寸下都能保持良好的显示效果。本文将介绍如何使用CSS中的object-fit属性来实现这一需求。使用object-fit属性可以非常方便地实现图片在容器中的自适应填充，保持图片的宽高比并使其均匀填充容器。这个方法适用于各种情况，例如响应式设计和多设备支持。
jQuery选择器详解与应用
"jQuery选择器全解：包括动态创建DOM元素、封装DOM对象以及文档就绪的简写方式。此内容详细介绍了jQuery选择器的使用，特别是jQuery支持的不仅是CSS选择器，还包括自定义选择器。jQuery选择器分为‘选择’和‘过滤’...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值