04- jQuery 选择器大全教程收藏备用

约定不等于承诺〃 2022-12-08 12:49 217阅读 0赞

# jQuery 基本选择器&层次选择器 #

作者：曾庆林

### jQuery选择器的优势 ###

*  写法简单
 *  支持CSS1至CSS3选择器
 *  完善的处理机制

### CSS选择器回顾 ###

<table> 
 <thead> 
  <tr> 
   <th>选择器</th> 
   <th>语法</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>ID选择器</td> 
   <td>#ID{CSS规则}</td> 
  </tr> 
  <tr> 
   <td>类选择器</td> 
   <td>.className{CSS规则}</td> 
  </tr> 
  <tr> 
   <td>分组选择器</td> 
   <td>E1,E2,E3{CSS规则}</td> 
  </tr> 
  <tr> 
   <td>包含选择器</td> 
   <td>E F{CSS规则}</td> 
  </tr> 
  <tr> 
   <td>通配符选择器</td> 
   <td>*{CSS规则}</td> 
  </tr> 
 </tbody> 
</table>

### jQuery选择器的分类 ###

1.  基本选择器
2.  层次选择器
3.  过滤选择器
    
     *  基本过滤选择器
     *  内容过滤选择器
     *  可见性过滤选择器
     *  属性过滤选择器
     *  子元素过滤选择器
     *  表单对象属性过滤选择器
4.  表单选择器

### jQuery基本选择器 ###

<table> 
 <thead> 
  <tr> 
   <th>选择器 1</th> 
   <th>描述</th> 
   <th>返回</th> 
   <th>示例</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>#id</td> 
   <td>根据指定的id匹配元素</td> 
   <td>单个元素</td> 
   <td>$(“#hel”)选择id=hel的元素</td> 
  </tr> 
  <tr> 
   <td>.class</td> 
   <td>根据类匹配元素</td> 
   <td>集合元素</td> 
   <td>$(“.hel”)选择class=hel的元素</td> 
  </tr> 
  <tr> 
   <td>Element</td> 
   <td>根据元素名匹配元素</td> 
   <td>集合元素</td> 
   <td>$(“div”)选择所有的div元素</td> 
  </tr> 
  <tr> 
   <td>*</td> 
   <td>匹配所有元素</td> 
   <td>集合元素</td> 
   <td>$(“*”)选择所有元素</td> 
  </tr> 
  <tr> 
   <td>E1,E2,E3</td> 
   <td>分组匹配元素</td> 
   <td>集合元素</td> 
   <td>$(“div,span,.hotclass”)选择所有div，span,和class为hotcalss的元素</td> 
  </tr> 
 </tbody> 
</table>

### 层次选中器 ###

<table> 
 <thead> 
  <tr> 
   <th>选择器</th> 
   <th>描述</th> 
   <th>返回值</th> 
   <th>示例</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>$(“E1 E2”)</td> 
   <td>选择E1下所有E2</td> 
   <td>集合元素</td> 
   <td>$“div span”)选择div下所有span</td> 
  </tr> 
  <tr> 
   <td>$(“E1&gt; E2”)</td> 
   <td>选择E1下的子E2,不包含E2下满足的元素</td> 
   <td>集合元素</td> 
   <td>$("div &gt; span”)选择div下的span元素，不包含span下的span元素</td> 
  </tr> 
  <tr> 
   <td>$(“E1+ E2”)</td> 
   <td>选择E1后紧相邻的E2</td> 
   <td>集合元素</td> 
   <td>$(".one + div")选择class=one的下一个div元素</td> 
  </tr> 
  <tr> 
   <td>$(“E1~ E2”)</td> 
   <td>选择E1之后的所有E2</td> 
   <td>集合元素</td> 
   <td>$("#one ~ div")选择id为one后的所有div元素</td> 
  </tr> 
 </tbody> 
</table>

补充说明：  
 ( " E 1 + E 2 " ) 可 以 用 ("E1 + E2")可以用 ("E1\+E2")可以用(E1).next(E2)代替  
 ( " E 1   E 2 " ) 可 以 用 ("E1 ~ E2")可以用 ("E1 E2")可以用(E1).nextAll(E2)代替

# jQuery 过滤选择器 #

过滤选择器主要是通过特定的过滤规则来筛选出需要的DOM元素，过滤规则与CSS中的伪类选择器语法相同，即过滤选择器都是以冒号`:`开头。

### 过滤选择器分类： ###

*  基本过滤选择器
 *  内容过滤选择器
 *  可见性过滤选择器
 *  属性过滤选择器
 *  子元素过滤选择器
 *  表单对象属性过滤选择器

### 基本过滤选择器 ###

<table> 
 <thead> 
  <tr> 
   <th>选择器</th> 
   <th>描述</th> 
   <th>返回</th> 
   <th>示例</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>:first</td> 
   <td>选择第1个元素</td> 
   <td>单个元素</td> 
   <td>$(“div:first”)选择第1个div元素</td> 
  </tr> 
  <tr> 
   <td>:last</td> 
   <td>选择最后1个元素</td> 
   <td>单个元素</td> 
   <td>$(“div:last”)选择最后1个div元素</td> 
  </tr> 
  <tr> 
   <td>:not(E1)</td> 
   <td>去除所有E1选择器匹配的元素</td> 
   <td>集合元素</td> 
   <td>$(“input:not(.my)”)选择class不是.my的所有input元素</td> 
  </tr> 
  <tr> 
   <td>:even</td> 
   <td>选择索引是偶数的所有元素，索引从0开始</td> 
   <td>集合元素</td> 
   <td>$(“tr:even”)选择表格中所有偶数的行</td> 
  </tr> 
  <tr> 
   <td><code>:odd</code></td> 
   <td>选择索引是奇数的所有元素，索引从0开始</td> 
   <td>集合元素</td> 
   <td>$(“tr:odd”)选择表格中所有奇数的行</td> 
  </tr> 
  <tr> 
   <td>:eq(index)</td> 
   <td>选择索引值是index的元素，index从0开始</td> 
   <td>单个元素</td> 
   <td>$(“tr:eq(1)”)选择表格行索引等于1的行</td> 
  </tr> 
  <tr> 
   <td>:gt(index)</td> 
   <td>选择索引值大于index的元素,index从0开始</td> 
   <td>集合元素</td> 
   <td>$(“tr:gt(1) ”)选择表格行索引大于1的行</td> 
  </tr> 
  <tr> 
   <td>:lt(index)</td> 
   <td>选择索引值小于index的元素,index从0开始</td> 
   <td>集合元素</td> 
   <td>$(“tr:lt(1)”)选择表格行索引小于1的行</td> 
  </tr> 
  <tr> 
   <td>:header</td> 
   <td>所取所有的标题元素,h1~h6</td> 
   <td>集合元素</td> 
   <td>$(“:header”)选择网页中所有的<h1>,</h1><h2>…</h2><h6></h6></td> 
  </tr> 
  <tr> 
   <td>:animated</td> 
   <td>选择当前正在执行动画的所有元素</td> 
   <td>集合元素</td> 
   <td>$(“div:animated”)选择正在执行动画的div元素</td> 
  </tr> 
 </tbody> 
</table>

### 内容过滤选择器 ###

<table> 
 <thead> 
  <tr> 
   <th>选择器</th> 
   <th>描述</th> 
   <th>返回值</th> 
   <th>示例</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>:contains(text)</td> 
   <td>选择含有text文本内容的元素</td> 
   <td>集合元素</td> 
   <td>$(“div:contains(‘我’)”)选择内容里包含我的所有div</td> 
  </tr> 
  <tr> 
   <td>:empty</td> 
   <td>选择不包含子元素或文本的空元素</td> 
   <td>集合元素</td> 
   <td>$(“div:empty”)选择不包含子元素（含文本）的所有div元素</td> 
  </tr> 
  <tr> 
   <td>:has(E1)</td> 
   <td>选择包含有(E1选择器匹配的元素)的所有元素</td> 
   <td>集合元素</td> 
   <td>$(“div:has§”)选择含有p元素的所有div元素</td> 
  </tr> 
  <tr> 
   <td>:parent</td> 
   <td>选择含有子元素或文本的元素</td> 
   <td>集合元素</td> 
   <td>$(“div:parent”)选择拥有子元素（包含文本）的所有div元素</td> 
  </tr> 
 </tbody> 
</table>

### 可见性过滤选择器 ###

<table> 
 <thead> 
  <tr> 
   <th>选择器</th> 
   <th>描述</th> 
   <th>返回值</th> 
   <th>示例</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>:hidden</td> 
   <td>选择所有不可见元素</td> 
   <td>集合元素</td> 
   <td>$(“:hidden”)选择所有不可见元素，包括：, 
    <div>
      和 
     <div>
       等，如果只选择元素，则可以使用 $(“input:hidden”) 
     </div> 
    </div></td> 
  </tr> 
  <tr> 
   <td>:visible</td> 
   <td>选择所有可见元素</td> 
   <td>集合元素</td> 
   <td>$(“div:visible”)选取所有可见的div元素</td> 
  </tr> 
 </tbody> 
</table>

### 案例-tab切换 可见过滤 ###

思路

单击第几个，显示第几个，以前显示的隐藏

html结构

css 部分

* { 
    	margin: 0;
    		padding: 0;
    }
    			
    body { 
    	padding: 50px;
    }
    
    ul { 
    	list-style: none;
    }
    
    .tabs .tab-title { 
    	height: 35px;
    	line-height: 35px;
    	border: 1px solid #aaa;
    	padding-left: 15px;
    	padding-right: 15px;
    	float: left;
    	margin-right: 15px;
    	position: relative;
    	z-index: 10;
    }
    
    .tabs .active{ border-bottom-color:#fff; color: #F80;}
    .tabs .tab-content { 
    	clear: both;
    	border: 1px solid #aaa;
    	padding: 25px;
    	width: 450px;
    	height: 300px;
    	display: none;
    	position: relative;
    	top: -1px;
    	z-index: 0;
    }
    #tab2 .tab-content{ width: 800px;}

js写法

//[1] 单击第几个，显示第几个，以前显示的隐藏
    $(function(){ 
    	$(".tab-title").click(function(){ 
    		//以前显示的现在隐藏
    		$(".tab-content:visible").hide();
    		// 求出是第几个
    		var num=$(".tab-title").index($(this));
    		$(".tab-content:eq("+num+")").show();
    		//之前有.active li 去掉active
    		//当前li 添加actvie
    		$(".active").removeClass("active");
    		$(this).addClass("active");
    	
    	})
    })

完整的示例

<!doctype html>
    <html lang="en">
    
    	<head>
    		<meta charset="UTF-8" />
    		<title>jquery选择器</title>
    		<style> * { margin: 0; padding: 0; } body { padding: 50px; } ul { list-style: none; } .tabs .tab-title { height: 35px; line-height: 35px; border: 1px solid #aaa; padding-left: 15px; padding-right: 15px; float: left; margin-right: 15px; position: relative; z-index: 10; } .tabs .active{ border-bottom-color:#fff; color: #F80;} .tabs .tab-content { clear: both; border: 1px solid #aaa; padding: 25px; width: 450px; height: 300px; display: none; position: relative; top: -1px; z-index: 0; } #tab2 .tab-content{ width: 800px;} </style>
    	</head>
    
    	<body>
    		<div id="tab1" class="tabs">
    			<ul>
    				<li class="tab-title active">li1</li>
    				<li class="tab-title">li2</li>
    				<li class="tab-title">li3</li>
    			</ul>
    			<div class="tab-content" style="display: block;">内容1</div>
    			<div class="tab-content" >内容2</div>
    			<div class="tab-content">内容3</div>
    		</div>
    	<script src="js/jquery-1.4.2.min.js"></script>
    	<script> //[1] 单击第几个，显示第几个，以前显示的隐藏 $(function(){ $(".tab-title").click(function(){ //以前显示的现在隐藏 $(".tab-content:visible").hide(); // 求出是第几个 var num=$(".tab-title").index($(this)); $(".tab-content:eq("+num+")").show(); //之前有.active li 去掉active //当前li 添加actvie $(".active").removeClass("active"); $(this).addClass("active"); }) }) </script>
    	
    
    	</body>
    
    </html>

# jquery过滤选择器-属性 #

属性过滤选择器

<table> 
 <thead> 
  <tr> 
   <th>选择器</th> 
   <th>描述</th> 
   <th>返回</th> 
   <th>示例</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>[attribute]</td> 
   <td>选择拥有此属性的元素</td> 
   <td>集合元素</td> 
   <td>$(“div[id]”)选择拥有id属性的div元素</td> 
  </tr> 
  <tr> 
   <td>[attribute=value]</td> 
   <td>选择属性值为value的元素</td> 
   <td>集合元素</td> 
   <td>$(“div[id=test]”)选择id属性值为test的div元素</td> 
  </tr> 
  <tr> 
   <td>[attribute!=value]</td> 
   <td>选择属性值不为value的元素</td> 
   <td>集合元素</td> 
   <td>$(“div[id!=test]”)选择id属性值不为test的div元素,没有id属性的div也会被选择</td> 
  </tr> 
  <tr> 
   <td>[attribute^=value]</td> 
   <td>选择属性值以value开始的元素</td> 
   <td>集合元素</td> 
   <td>$(“div[id^=test]”)选择id属性值以test开始的所有div元素</td> 
  </tr> 
  <tr> 
   <td>[attribute$=value]</td> 
   <td>选择属性以value值结束的元素</td> 
   <td>集合元素</td> 
   <td><span><span><span> ( “ d i v [ i d (“div[id </span><span><span><span style="height: 1em; vertical-align: -0.25em;"></span><span>(</span><span>“</span><span>d</span><span>i</span><span style="margin-right: 0.03588em;">v</span><span>[</span><span>i</span><span>d</span></span></span></span></span>=test]”)选择id属性值以test结束的所有div元素</td> 
  </tr> 
  <tr> 
   <td>[attribute*=value]</td> 
   <td>选择属性中含有value的元素</td> 
   <td>集合元素</td> 
   <td>$(“div[id*=test]”)选择id属性值中含有test的所有div元素</td> 
  </tr> 
  <tr> 
   <td>[A1][A2]…A[N]</td> 
   <td>用属性选</td> 
   <td>择器合并成一个复合属性选择器。满足多个条件。</td> 
   <td>集合元素</td> 
  </tr> 
 </tbody> 
</table>

### 案例根据不同的 a链接添加不同的图标背景 ###

html

<h3>jquery 属性过虑资料下载</h3>
    <ul>
        <li><a href="./课件" target="_blank" > 课件</a></li>
        <li><a href="精通JavaScript.pdf" target="_blank"> 参考书</a></li>
        <li><a href="课件/第二章jQuery选择器.pptx" target="_blank">第二章jQuery选择器</a></li>
        <li><a href="filter.txt" target="_blank" >选择器总结</a></li>
        <li><a href="filter.html" target="_blank" >案例1</a></li>
        <li><a href="taotest2.html" target="_blank">案例2</a></li>
    </ul>

$(function(){ 
    	$("a[href$=html]").addClass("html");
    	$("a[href$=txt]").addClass("txt");
    	$("a[href^=./]").addClass("fl");
    	
    })

css

ul,li,a{  
        margin:0; padding:0; 
        list-style:none;
        text-decoration:none;
        color:#444;}
        a:visited{ color:#444;
    }
    
    a:hover{  color:#000;}
    
    li{  
    height:30px;
    line-height:30px;
    border-bottom:1px dashed #444;
    width:200px;
    }
    
    li a{ 
    display:block; 
    height:30px;
    line-height:30px;
    padding-left:25px;
    background-image:url(pkg_comm_z527307bd.png); background-repeat:no-repeat;
    }
    .pdf{  background-position:0 -2px;}
    .fl{  background-position:0 -255px;}
    .pptx{  background-position:0 -440px;}
    .txt{  background-position:0 -160px;}
    .html{ background-position:0 -347px;}

# 过滤选择器-子元素过滤 #

作者：曾庆林

<table> 
 <thead> 
  <tr> 
   <th>选择器</th> 
   <th>描述</th> 
   <th>返回</th> 
   <th>示例</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>:nth-child(index/even/odd/equation)</td> 
   <td>选取每个父元素下的第index个子元素或奇偶元素.(index从1开始）</td> 
   <td>集合元素</td> 
   <td>:eq(index)只匹配一个元素,而:nth-child(index)将为每一个父元素匹配子元素,并且:nth-child(index)的index从1开始,而:eq(index)的index从0开始.</td> 
  </tr> 
  <tr> 
   <td>:first-child</td> 
   <td>选择每个父元素的第1个子元素</td> 
   <td>集合元</td> 
   <td>:first只选择单个元素,而:first-child将为每个父元素匹配第1个子元素如<code>:$(“ul li:first-child”)</code>选择每个ul下的第一个 
    <ul> 
     <li></li> 
    </ul></td> 
  </tr> 
  <tr> 
   <td>:last-child</td> 
   <td>选取每个父元素的最后1个子元素</td> 
   <td>集合元素</td> 
   <td><code>$(“ul li:last-child”)</code>选择每个ul下的最后一个 
    <ul> 
     <li></li> 
    </ul></td> 
  </tr> 
  <tr> 
   <td><code>:only-child</code></td> 
   <td>如果某个元素是它父元素中惟一的子元素,那么将会被匹配.如果父元素中含有其他元素,则不会被匹配</td> 
   <td>集合元素</td> 
   <td><code>$(“ul li:only-child”)</code>在 
    <ul> 
     <li> 中选取是惟一子元素的 </li> 
     <li></li> 
    </ul></td> 
  </tr> 
 </tbody> 
</table>

#### :nth-child()选择器详细功能描述: ####

:nth-child(even)    能选择每个父元素下的索引值是偶数的元素
    :nth-child(odd)     选择出每个父元素下的索引值是奇数的元素
    :nth-child(2)       选取每个父元素下的索引值等于2的元素
    :nth-child(3n)      能选出每个父元素下的索引值是3的倍数的元素,n从0开始
    :nth-child(3n+1)    能选取每个父元素下的索引值是3n+1的元素.n从0开始

### 表单对象属性过滤选择器 ###

<table> 
 <thead> 
  <tr> 
   <th>选择器</th> 
   <th>描述</th> 
   <th>返回</th> 
   <th>示例</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>:enabled</td> 
   <td>选择所有可用元素</td> 
   <td>集合元素</td> 
   <td>$(“#form1 :enabled”)选取id为form1的表单内的所有可用元素</td> 
  </tr> 
  <tr> 
   <td>:disabled</td> 
   <td>选择所有不可用元素</td> 
   <td>集合元素</td> 
   <td>$(“#form1 :disabled”)选取id为form1的表单内所有不可用元素</td> 
  </tr> 
  <tr> 
   <td>:checked</td> 
   <td>选择忾有被选中的元素(单选框,复选框)</td> 
   <td>集合元素</td> 
   <td><code>$("input:checked")</code>选择所有被选中的&lt;input元素&gt;</td> 
  </tr> 
  <tr> 
   <td><code>:selected</code></td> 
   <td>选择所有被选中的选项元素(下拉列表)</td> 
   <td>集合元素</td> 
   <td><code>$("select :selected")</code>选取所有被选中的选项元素</td> 
  </tr> 
 </tbody> 
</table>

# jquery 表单选择器 #

### 表单选择器 ###

<table> 
 <thead> 
  <tr> 
   <th>选择器</th> 
   <th>描述</th> 
   <th>返回</th> 
   <th>示例</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>:input</td> 
   <td>匹配所有 元素 集合元素</td> 
   <td>$(“:input”) 同描述</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>:text</td> 
   <td>选择所有单行文本框</td> 
   <td>集合元素</td> 
   <td>$(“:text”)匹配所有单行文本框</td> 
  </tr> 
  <tr> 
   <td>:password</td> 
   <td>选择所有密码框</td> 
   <td>集合元素</td> 
   <td>$(“:password”)</td> 
  </tr> 
  <tr> 
   <td>:radio</td> 
   <td>选择所有单选框</td> 
   <td>集合元素</td> 
   <td>$(“:radio”)</td> 
  </tr> 
  <tr> 
   <td>:checkbox</td> 
   <td>选择所有复选框</td> 
   <td>集合元素</td> 
   <td>$(“:checkbox”)</td> 
  </tr> 
  <tr> 
   <td><code>:submit</code></td> 
   <td>匹配所有提交按钮</td> 
   <td>集合元素</td> 
   <td>$(“:submit”)</td> 
  </tr> 
  <tr> 
   <td>:image</td> 
   <td>匹配所有图像按钮</td> 
   <td>集合元素</td> 
   <td>$(“:image”)</td> 
  </tr> 
  <tr> 
   <td>:reset</td> 
   <td>匹配所有重置按钮</td> 
   <td>集合元素</td> 
   <td>$(“:reset”)</td> 
  </tr> 
  <tr> 
   <td>:button</td> 
   <td>匹配所有按钮</td> 
   <td>集合元素</td> 
   <td>$(“:button”)</td> 
  </tr> 
  <tr> 
   <td>:file</td> 
   <td>匹配所有文件域</td> 
   <td>集合元素</td> 
   <td>$(“:file”)</td> 
  </tr> 
  <tr> 
   <td>:hidden</td> 
   <td>匹配所有不可见元素</td> 
   <td>集合元素</td> 
   <td>$(“:hidden”)</td> 
  </tr> 
 </tbody> 
</table>

### 选择器中的一些注意事项 ###

选择器中包含空格

选择器中的空格是不容忽视的，多一个空格或少一个空格会得到截然不同的结果.

如:
    	$(“div:input”)
    和
    	$(“div :input”)

### jQuery中的方法初探 ###

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>功能描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>show()</td> 
   <td>显示隐藏的匹配元素，可带整数参数表示时间，单位是毫秒</td> 
  </tr> 
  <tr> 
   <td>hide()</td> 
   <td>隐藏显示的匹配元素，可带整数参数表示时间，单位是毫秒</td> 
  </tr> 
  <tr> 
   <td>css(name,value)</td> 
   <td>给匹配的元素设置css样式</td> 
  </tr> 
  <tr> 
   <td>text(string)</td> 
   <td>获取或设置匹配元素的文本内容,不包含html标签</td> 
  </tr> 
  <tr> 
   <td>filter(expr)</td> 
   <td>筛选出与指定表达式匹配的元素集合，其中expr可以是多个选择器的组合。</td> 
  </tr> 
  <tr> 
   <td>addClass(class)</td> 
   <td>为匹配的元素增加一个 类样式</td> 
  </tr> 
  <tr> 
   <td>removeClass(class)</td> 
   <td>为匹配的元素移除一个类样式</td> 
  </tr> 
  <tr> 
   <td>html()</td> 
   <td>获取或设置匹配元素的内容，包含html标签</td> 
  </tr> 
  <tr> 
   <td>siblings()</td> 
   <td>$(“.abc”).siblings()匹配得到class=abc的其它兄弟元素</td> 
  </tr> 
 </tbody> 
</table>

![IT入门 感谢关注][IT_]

IT入门 感谢关注

练习地址： [www.520mg.com/it][www.520mg.com_it]

[IT_]: /images/20221123/24eabbc15e4b4d2f9d2ee473e525e9f6.png
[www.520mg.com_it]: http://www.520mg.com/it