jQuery 选择器的使用方法

编程语言 2019-01-23 18:05:18 阅读次数: 0

jQuery 选择器的特点

  • jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合，因此 jQuery 选择器允许对 HTML 的单个或多个元素进行操作。
  • jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素，并且所有选择器都以美元符号开头：$()。
  • jQuery 中除了基于已经存在的 CSS 选择器，它还有一些自定义的选择器。

jQuery 基本选择器

选择器 描述
$("*") 选择全部
$(this) 选择当前
$("#id") ID选择器
$("div") 元素选择器，基于元素名选取元素
$(".classname") $("p.classname") 类选择器，通过指定的 class 查找元素
$(".classname,.classname1,#id1") 组合选择器

$("p").hide()：选择标签为<p>的元素，并隐藏。

<script>
	$(document).ready(function(){
		$("button").click(function(){
			$("p").hide(); /* 隐藏 p 标签*/
		});
	});
</script>

$("*").hide()：隐藏 HTML 页面所有元素。

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("*").hide(); /* 隐藏所有元素*/
  });
});
</script>

$(this).hide()：隐藏当前的元素。

<html>
	<head>
	<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
	<script>
	$(document).ready(function(){
	  $("button").click(function(){
	    $(this).hide();
	  });
	});
	</script>
	</head>
<body>
	<p>这是一个段落。</p>
	<p>这是另外一个段落。</p>
	<button>btn</button>  <!--点击消失-->
</body>
</html>

$(".head_firstpage").animate({height:"100px"}) 一个简易的下拉列表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
		<style>
			/**{border: 1px sliid black;margin: 0;}*/
			.head,.head_open{
				position: fixed;
				top: 0;
				background: lavender;
			}
			.head_open{
				top: 30px;
			}
			.head img,.head_open img{width: 200px;height: 100px;}
			.head ul{
				height: 20px;
				padding: 5px 0;
				font-size: small;
				text-align: center;
			}
			.head ul:hover{background: whitesmoke;}
			.head_firstpage li{display: none;width: 100%;padding: 5px 0;text-align: center;} 
			.head_special li{display: none;width: 100%;padding: 5px 0;text-align: center;} 
			.head_new li{display: none;width: 100%;padding: 5px 0;text-align: center;} 
			.head ul li:hover{background: red;}
			.head ul li a{text-decoration: none;color: black;font-size: 10px;}
		</style>
	</head>
	<body>
		<div class="head">
			<img src="img/ratate_img (3).png"/>
			<ul class="head_firstpage">首页：渐变打开，渐变关闭
				<li><a href="#">门户</a></li>
				<li><a href="#">论坛</a></li>
				<li><a href="#">内网</a></li>
			</ul>
			<ul class="head_special">特色商品：瞬间打开，瞬间关闭
				<li><a href="#">论坛活动</a></li>
				<li><a href="#">节日礼物</a></li>
				<li><a href="#">积分兑换</a></li>
			</ul>
			<ul class="head_new">最新上架：瞬间打开，渐变关闭
				<li><a href="#">总部出品</a></li>
				<li><a href="#">联合出品</a></li>
			</ul>
		</div>
	</body>
	<script>
		$(document).ready(function(){
			/* 点击展开 首页列表*/
			$(".head_firstpage").click(function(){ 
				$(".head_firstpage").animate({height:"100px"})
				/* 在此处使用 jQuery css() 方法更改背景色，
				 * 此时，在 style 中设置的 :hover 已经失效
					$(".head_firstpage").css("background","lightgray")*/
				$(".head_firstpage li").css("display","block")
			})
			$(".head_firstpage").mouseleave(function(){
				$(".head_firstpage").animate({height:"20px"},"slow")
				/* css 的 :hover 效果无法从 jQuery 方法中获取，
				 * 因此，如果在jQuery中改变了背景色，将会使其在 css 中设置的 :hover 失效
				 	$(".head_firstpage").css("background","red")
				 	$(".head ul:hover").css("background","whitesmoke")*/
				$(".head_firstpage li").css("display","none")
			})
			/* 点击展开 特色商品 列表*/
			$(".head_special").click(function(){
				$(".head_special").animate({height:"100%"},"slow")
				$(".head_special li").css("display","block")
			})
			$(".head_special").mouseleave(function(){
				$(".head_special").animate({height:"100%"})
				$(".head_special li").css("display","none")
			})
			/* 点击展开 最新上架 列表*/
			$(".head_new").click(function(){
				/* animate() 效果方法，当变化的属性是 100% 时，表现为瞬间的效果*/
				$(".head_new").animate({height:"100%"})
				$(".head_new li").css("display","block")
			})
			$(".head_new").mouseleave(function(){
				/* animate() 效果方法，当变化的属性是具体的长度，而不是百分号时，表现为渐变的效果*/
				$(".head_new").animate({height:"20px"})
				$(".head_new li").css("display","none")
			})
		})
	</script>
</html>

初始页面
点击下拉列表

$("p.intro").hide()：隐藏class为 intro 的 <p> 元素。

<script>
	$(document).ready(function(){
	  $("button").click(function(){
	    $("p.intro").hide();
	  });
	});
</script>
<body>
	<h2 class="intro">这是一个标题</h2>
	<p class="intro">这是一个段落</p> <!--点击按钮隐藏-->
	<p>这是另一个段落</p>
	<button>点我</button>
</body>

$("#stop").click(function(){div.clearQueue();});动画的手动播放与暂停

<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8"> 
	<title>queue(),dequeue(),clearQueue()</title>
	<script src="js/jquery-3.3.1.js"></script>
	<script> 
	$(document).ready(function(){
		var div = $(".div");  
		$("#start").click(function(){
			
			div.animate({height:60},"slow");
			div.animate({width:60},"slow");
			div.queue("utf",function () {
				div.animate({width:200},"slow");  
			});
			div.queue("utf2",function () {
				div.animate({width:80},"slow");  
				div.css("background","red");
			});
			div.dequeue("utf");
			div.dequeue("utf2");
			div.animate({height:20},"slow");
			div.animate({width:20},"slow");
			
			$( ".box" ).queue( "steps", function( next ) {
			        console.log( "Will never log because we clear the queue" );
			        $(this).animate({height:40},"slow");
			        next();
			   } ).clearQueue( "steps" ).dequeue( "steps" )
			});
			$("#stop").click(function(){
				div.clearQueue();
			});
		});
		
	</script> 
	</head>
	<body>
	<p>queue() 方法允许你创建一个队列功能区执行被选中的元素。 </p>
	<p>dequeue() 方法顺序执行它们。 </p>
	<p><button id="start">开始动画</button><button id="stop">停止动画</button></p>
	<div class="div" style="background:blue;height:20px;width:20px;"></div>
	<hr />
	<div class="box" style="background:blue;height:20px;width:20px;"></div>
	</body>
</html>

jQuery 过滤选择器

下标索引值从 0 开始，第一个元素是偶数 (0)，第二个元素是奇数 (1)，以此类推。

选择器 描述
$("li:first") 第一个li
$("li:last") ` 最后一个li
$("li:even") 挑选下标为偶数的li
$("li:odd") 挑选下标为奇数的li
$("li:eq(4)") 下标等于 4 的li(第五个 li 元素)
$("li:gt(2)") 下标大于 2 的li
$("li:lt(2)") 下标小于 2 的li
$("li:not(#runoob)") 挑选除 id=“runoob” 以外的所有li
$("li:has(.runoob)") 挑选包含 class=“runoob” 所有li
$("p:first-child") 在body内的元素中查找，选择子元素顺序是第一个的，且元素类型是 <p>的 元素
$("p:first-of-type") 某个父元素的，指定是 <p> 元素列的第一个 <p> 元素
$("div:contains('sex')") 包含 sex 文本的 <div> 元素
$("td:empty") 不包含子元素或者内容为空的 <td> 元素
$("td:parent") 选取所有带有子元素或包含文本的 <td> 元素
可见性
$("input:hidden") 选中被隐藏的<input>元素，或type为hidden的input元素
$("input:visible") 选中可见的<input>元素
状态过滤
$("input:enabled") 匹配可用的 input
$("input:disabled") 匹配不可用的 input
$("input:checked") 匹配选中的 input
$("option:selected") 匹配选中的 option
属性过滤
$("div[id]") 所有含有 id 属性的 div 元素
$("div[id='num']") 选择 id 属性为 num 的 div 元素
$("div[id!='num']") 选择 id 属性不是 num 的 div 元素
$("div[id^='head']") 选择 id 属性以 head 开头的 div 元素
$("div[id$='ctx']") 选择 id 以 ctx 结尾的 div 元素
$("div[id*='apt']") 选择 id 值包含 apt 的 div 元素
$("input[id][name$='man']") 含有 id 属性且 name 值以 man结尾的元素

$("p:first-child") 选取属于某个的父元素中的第一个子元素，且具体元素是 <p> 标签的元素

<html>
	<head>
	<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
	</script>
	<script>
	$(document).ready(function(){
	  $("p:first-child").css("background-color","yellow");
	});
	</script>
	</head>
	<body>
		<!--父元素是 body，第 1 个子元素，标签为 p ，当选-->
		<p>The first paragraph in body.</p> 
		<div style="border:1px solid;">
		  <!--父元素是div，第 1 个子元素，标签为 p ，单选-->
			<p>The first paragraph in div.</p> 
		  <!--父元素是div，第 2 个，也是最后一个子元素，不选-->
			<p>The last paragraph in div.</p> 
		</div><br>
		<div style="border:1px solid;">
			<span>This is a span element.</span>
		  <!--父元素是div，第 2 个子元素，不选-->
			<p>The first paragraph in another div.</p> 
		  <!--父元素是div，第 3 个，最后一个子元素，不选-->
			<p>The last paragraph in another div.</p> 
		</div>
		<!--父元素是 body，最后一个子元素， 不选-->
		<p>The last paragraph in body.</p> 
	</body>
</html>

p:first-child

$("p:first-of-type") 某个父元素的，指定是 <p> 元素列的第一个 <p> 元素

<script>
$(document).ready(function(){
/* 将上面的 first-child 改成 first-of-type*/
  $("p:first-of-type").css("background-color","yellow");
});
</script>

p:first-of-type

$("p:first").hide()：隐藏第一个 <p> 元素。

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

$("td:parent") 选取所有带有子元素或包含文本的 <td> 元素

<html>
	<head>
	<meta charset="utf-8"> 
	<script src="js/jquery-3.3.1.js"></script>
	<script>
		$(document).ready(function(){
			$("td:parent").css("background-color","yellow");
		});
	</script>
	</head>
	<body>
	<table border="1">
	  <tr> <th>序号</th>		<th>站点名</th>		<th>网址</th>	
	  </tr>
	  <tr> <td>1</td>		<td>Google</td>		<td></td>		
	  </tr>
	  <tr> <td>2</td> 		<td>Runoob</td> 	<td>runoob.com</td>
	  </tr>
	  <tr> <td>3</td> 		<td>Taobao</td> 	<td>taobao.com</td>
	  </tr>
	  <tr> <td>4</td> 		<td></td> 			<td>baidu.com</td>
	  </tr>
	  <tr> <td>5</td> 		<td>Sina</td> 		<td>sina.com.cn</td>
	  </tr>
	  <tr> <td>6</td> 		<td>Facebook</td> 	<td></td>
	  </tr>
	  <tr> <td>7</td> 		<td>twitter</td> 	<td>twitter.com</td>
	  </tr>
</html>

选取带有子元素或内容的 td 元素

jQuery 层级选择器

选择器 描述
$("#id>.classname ") 子元素选择器
$("#id .classname ") 后代元素选择器
$("div+p") 选择紧邻 div 元素的，且就是 div 元素下一个的，标签为 <p> 的元素
$("#id ~ .classname ") 兄弟元素选择器

子元素选择器 $("div ul li ul")与后代元素选择器 $("div>ul>li>ul") 的区别

  • $("div>ul") 只选择 div 下一级里面的 ul 元素
  • $("div ul") 选择 div 内所包含的所有 ul 元素
  • $("div>ul") 比 $("div ul") 限定更严格，必须后面的元素只比前面的低一个级别

$("div+p") 选择紧邻 div 元素的 p 元素，非子元素

<html>
	<head> <meta charset="utf-8" />
	<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
	</script>
	<script>
		$(document).ready(function(){
		  $("div+p").css("background-color","yellow");
		});
	</script>
</head>
<body>
	<h2>$("div+p") 会选取什么元素?</h2>
	<div style="border:1px solid black;padding:10px;">这个是 div 元素</div>
	<p>这个 p 元素是 div 的下一个元素</p>
	<p>这是另外一个 p 元素</p>
	<div style="border:1px solid black;padding:10px;">
		<p>这是在 div 中的 p 元素</p>
	</div>
	<h2>这是 在 div 元素后的标题</h2>
	<p>这是一个 p 元素(这个 p 元素不会被选取，因为以上的 h2 元素是 div 的下一个元素)。</p>
</body>
</html>

$("div+p")

$("div~p") 选取与 <div> 元素同级的所有 <p> 元素

<html>
	<head> <meta charset="utf-8" />
	<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
	</script>
	<script>
		$(document).ready(function(){
		  $("div~p").css("background-color","yellow");
		});
	</script>
	</head>
	<body>
		<h2>$("div~p") 会选取什么?</h2>
		<p>这是一个 p 元素 (不会被选取)。</p>
		<div style="border:1px solid black;padding:10px;">这是一个 div 元素</div>
		<p>这是一个 p 元素</p>
		<p>这是另外一个 p 元素</p>
		<div style="border:1px solid black;padding:10px;">
			<p>这个 p 元素在 div 内(不会被选取).</p>
		</div>
		<h2>这是一个标题</h2>
		<p>这是一个 p 元素</p>
	</body>
</html>

$("div~p") 兄弟选择器

jQuery 表单选择器

选择器 描述
$(":input") 所有 input 元素
$(":text") 所有带有 type=“text” 的 input 元素
$(":password") 所有带有 type=“password” 的 input 元素
$(":radio") 所有带有 type=“radio” 的 input 元素
$(":checkbox") 所有带有 type=“checkbox” 的 input 元素
$(":submit") 所有带有 type=“submit” 的 input 元素
$(":reset") 所有带有 type=“reset” 的 input 元素
$(":button") 所有带有 type=“button” 的 input 元素
$(":image") 所有带有 type=“image” 的 input 元素
$(":file") 所有带有 type=“file” 的 input 元素
$(":enabled") 所有启用的元素
$(":disabled") 所有禁用的元素
$(":selected") 所有选定的下拉列表元素
$(":checked") 所有选中的复选框选项

$(":enable") 选择所有可以使用的表单元素，如果不能设置此属性，则无效，例如 p 标签无效


<html>
	<head> <meta charset="utf-8" />
	<script src="js/jquery-3.3.1.js">
	</script>
	<script>
		$(document).ready(function(){
			  $(":enabled").css("background-color","red");
		});
	</script>
	</head>
	<body>
	<form action="">
		用户名: <input type="text" name="user"><br>
		ID:<input type="text" name="id" disabled="disabled">
		年龄:
		<select disabled="disabled">
			<option>20-30</option>
			<option>30-50</option>
			<option>50+</option>
		</select>
		<input type="submit">
	</form>
	<p>红色是可以使用的部分，白色是禁用的部分</p>
</body>
</html>

对表单元素有效，对 p 标签无效

$(":button") 和 $("button") 的区别

$(":button") 为 jQuery 中表单选择器，旨在选择所有的按钮，所以会找到 、 元素；而 $(“button”) 则为基本选择器，旨在选择为 <button> 的标签。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>jQuery 的隐藏功能</title>
		<!--导入 jQuery-->
		<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
	</head>
	<body>
		<h1 id="h1">标题</h1>
		<p class="p1">第一行内容</p>
		<p class="p2">第二行内容</p>
		<p class="p3">第三行内容</p>
		<button id="press">press</button>
		<input type="button" id="btn" value="btn"></input>
	</body>
	<script>
		$(document).ready(function(){
			$("#press").click(function(){
				$(":button").hide();
			});
			$("#btn").click(function(){
				$("button").hide()
			})
		})
	</script>
</html>

$(":button").hide()

$("button").hide()

Reference

利用 :target 选择器突出显示活动的 HTML 锚
后代选择器和子元素选择器的区别
jQuery 选择器(:has(selector))详解
jQuery 选择器测试
jQuery 选择器教材

猜你喜欢

转载自blog.csdn.net/qq_43662261/article/details/86563594
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
周排行
购置笔记本常识
从源码看Spring Security之采坑笔记（Spring Boot篇）
大数据学习——高可用配置案例
如何避免选择不专业的建站公司?
Euclid's Game HDU - 1525（博弈）
面试笔记（六）---Js实现eventHandler
Windows 实例搭建的 FTP 在外网无法连接和访问
设计模式 : 桥接模式
USB 设备驱动开发之几个重要结构体分析
14-p14_sqrt求平方根
每日归档
更多
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022