JQuery学习笔记（三）——选择器2

最新推荐文章于 2021-08-18 23:26:25 发布
最新推荐文章于 2021-08-18 23:26:25 发布
阅读量882 收藏 1
点赞数 1
分类专栏： 前端 文章标签： 过滤选择器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011499992/article/details/52081145
版权

4.属性过滤

1)[attribute] 选取拥有此属性的元素
2)[attribute=value] 选取指定属性的值为value的元素
3)[attribute!=value] 选取指定属性的值不等于value的元素和没有该属性的元素
4)[attribute^=value] 选取指定属性的值以value开始的元素
5)[attribute$=value] 选取指定属性的值以value结束的元素

6)[attribute*=value]选取指定属性的值含有value的元素

7)[selector1][selector2]复合属性选择器

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<link rel="stylesheet" type="text/css" href="css/style.css">
		<style type="text/css">
			div, span, p {
			    width: 140px;
			    height: 140px;
			    margin: 5px;
			    background: #aaa;
			    border: #000 1px solid;
			    float: left;
			    font-size: 17px;
			    font-family: Verdana;
			}
			
			div.mini {
			    width: 55px;
			    height: 55px;
			    background-color: #aaa;
			    font-size: 12px;
			}
			
			div.hide {
			    display: none;
			}			
		</style>
		<script type="text/javascript" src="jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(function(){
				$("#btn1").click(function(){
					$("div[title]").css("background","#FF00AA");
				});
				$("#btn2").click(function(){
					$("div[title='test']").css("background","#FF00AA");
				});
				$("#btn3").click(function(){
					$("div[title!='test']").css("background","#FF00AA");
				});
				$("#btn4").click(function(){
					$("div[title^='te']").css("background","#FF00AA");
				});
				$("#btn5").click(function(){
					$("div[title]$='est'").css("background","#FF00AA");
				});
				$("#btn6").click(function(){
					$("div[title*='es']").css("background","#FF00AA");
				});
				$("#btn7").click(function(){
					$("div[id][title*='es']").css("background","#FF00AA");
				});
				$("#btn8").click(function(){
					$("div[title][title!='test']").css("background","#FF00AA");
				});
			})
		</script>
	</head>
	<body>		
		<input type="button" value="选取含有 属性title 的div元素." id="btn1"/>
		<input type="button" value="选取 属性title值等于'test'的div元素." id="btn2"/>
		<input type="button" value="选取 属性title值不等于'test'的div元素(没有属性title的也将被选中)." id="btn3"/>
		<input type="button" value="选取 属性title值 以'te'开始 的div元素." id="btn4"/>
		
		<input type="button" value="选取 属性title值 以'est'结束 的div元素." id="btn5"/>
		<input type="button" value="选取 属性title值 含有'es'的div元素." id="btn6"/>
		<input type="button" value="组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有'es'的 div 元素." id="btn7"/>
		<input type="button" value="选取 含有 title 属性值, 且title 属性值不等于 test 的 div 元素." id="btn8"/>
		
		<br><br>
		<div class="one" id="one">
			id 为 one,class 为 one 的div
			<div class="mini">class为mini</div>
		</div>
		<div class="one" id="two" title="test">
			id为two,class为one,title为test的div
			<div class="mini" title="other">class为mini,title为other</div>
			<div class="mini" title="test">class为mini,title为test</div>
		</div>
		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini"></div>
		</div>
		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini" title="tesst">class为mini,title为tesst</div>
		</div>
		<div style="display:none;" class="none">style的display为"none"的div</div>
		<div class="hide">class为"hide"的div</div>
		<div>
			包含input的type为"hidden"的div<input type="hidden" value="123456789" size="8">
		</div>
		<div id="mover">正在执行动画的div元素.</div>
	</body>
</html>
5.子元素过滤
1):nth-child(index/even/odd/equation)
选取每个父元素下的index个元素获取奇偶元素(index从1起)
*:nth-child(3n) 选取3的倍数
2):first-child 选取每个父元素的第一个子元素
3):last-child 选取每个父元素的最后一个字元素
4):only-child 如果某个元素是它父元素中唯一的子元素，那么将被匹配 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<link rel="stylesheet" type="text/css" href="css/style.css">
				<style type="text/css">
			div, span, p {
			    width: 140px;
			    height: 140px;
			    margin: 5px;
			    background: #aaa;
			    border: #000 1px solid;
			    float: left;
			    font-size: 17px;
			    font-family: Verdana;
			}
			
			div.mini {
			    width: 55px;
			    height: 55px;
			    background-color: #aaa;
			    font-size: 12px;
			}
			
			div.hide {
			    display: none;
			}			
		</style>
		<script type="text/javascript" src="jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$("#btn1").click(function(){
					$("div.one :nth-child(2)").css("background","#F22222");
				});
				$("#btn2").click(function(){
					$("div.one :first-child").css("background","#F22222");
				});
				$("#btn3").click(function(){
					$("div.one :last-child").css("background","#F22222");
				});
				$("#btn4").click(function(){
					$("div.one :only-child").css("background","#F22222");
				});
			});
		</script>
	</head>
	<body>		
		<input type="button" value="选取每个class为one的div父元素下的第2个子元素." id="btn1"/>
		<input type="button" value="选取每个class为one的div父元素下的第一个子元素." id="btn2"/>
		<input type="button" value="选取每个class为one的div父元素下的最后一个子元素." id="btn3"/>
		<input type="button" value="如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素." id="btn4"/>
		
		<br><br>
		<div class="one" id="one">
			id 为 one,class 为 one 的div
			<div class="mini">class为mini</div>
		</div>
		<div class="one" id="two" title="test">
			id为two,class为one,title为test的div
			<div class="mini" title="other">class为mini,title为other</div>
			<div class="mini" title="test">class为mini,title为test</div>
		</div>
		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini"></div>
		</div>
		<div class="one">
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini">class为mini</div>
			<div class="mini" title="tesst">class为mini,title为tesst</div>
		</div>
		<div style="display:none;" class="none">style的display为"none"的div</div>
		<div class="hide">class为"hide"的div</div>
		<div>
			包含input的type为"hidden"的div<input type="hidden" value="123456789" size="8">
		</div>
		<div id="mover">正在执行动画的div元素.</div>
	</body>
</html>

6.表单对象属性过滤选择器
1):enabled 选取所有可用元素
2):disabled 选取所有不可用元素
3):checked 选取所有被选中的元素(单选框，复选框)
4):selected 选取所有被选中选项元素(下拉列表) 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<script type="text/javascript" src="jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(function(){
				$("#btn1").click(function(){
					$(":text:enabled").val("可用赋值");
				});
				$("#btn2").click(function(){
					$(":text:disabled").val("不可用赋值");
				});
				$("#btn3").click(function(){
					alert($(":checkbox[name='newsletter']:checked").length);
				});
				$("#btn4").click(function(){
					$(":checkbox[name='newsletter']:checked").each(function(){
						alert(this.value);
					});
				});
				$("#btn5").click(function(){
					$("select :selected").each(function(){
						alert(this.value);
					});
				});
			})
		</script>
		
	</head>
	<body>
		<h3>表单对象属性过滤选择器</h3>
		 <button id="btn1">对表单内 可用input 赋值操作.</button>
  		 <button id="btn2">对表单内 不可用input 赋值操作.</button><br /><br />
		 <button id="btn3">获取多选框选中的个数.</button>
		 <button id="btn4">获取多选框选中的内容.</button><br /><br />
         <button id="btn5">获取下拉框选中的内容.</button><br /><br />
		 
		<form id="form1" action="#">			
			可用元素: <input name="add" value="可用文本框1"/><br>
			不可用元素: <input name="email" disabled="true" value="不可用文本框"/><br>
			可用元素: <input name="che" value="可用文本框2"/><br>
			不可用元素: <input name="name" disabled="true" value="不可用文本框"/><br>
			<br>
			
			多选框: <br>
			<input type="checkbox" name="newsletter" checked="checked" value="test1" />test1
			<input type="checkbox" name="newsletter" value="test2" />test2
			<input type="checkbox" name="newsletter" value="test3" />test3
			<input type="checkbox" name="newsletter" checked="checked" value="test4" />test4
			<input type="checkbox" name="newsletter" value="test5" />test5
			
			<br><br>
			下拉列表1: <br>
			<select name="test" multiple="multiple" style="height: 100px">
				<option>浙江</option>
				<option selected="selected">辽宁</option>
				<option>北京</option>
				<option selected="selected">天津</option>
				<option>广州</option>
				<option>湖北</option>
			</select>
			
			<br><br>
			下拉列表2: <br>
			<select name="test2">
				<option>浙江</option>
				<option>辽宁</option>
				<option selected="selected">北京</option>
				<option>天津</option>
				<option>广州</option>
				<option>湖北</option>
			</select>
			
			<textarea rows="" cols=""></textarea>
		</form>		
	</body>
</html>

选择器练习

1. 点击所有的 p 节点, 能够弹出其对应的文本内容

2. 使第一个 table 隔行变色

3.点击 button, 弹出 checkbox 被选中的个数

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<script type="text/javascript" src="scripts/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(function(){
				//1. 点击所有的 p 节点, 能够弹出其对应的文本内容
				$("p").click(function(){
						// 隐式迭代
					alert(this.firstChild.nodeValue);
					//alert($(this).text());
				});
				//2. 使第一个 table 隔行变色
				$("table:first tr:even").css("background","#FF22BB");
				
				//3. 点击 button, 弹出 checkbox 被选中的个数
				
				$("button").click(function(){
					//alert($(":checked[name='test']").length);
					alert($(":checkbox:checked").length);
				});
			});
		</script>
	</head>
	<body>
		<p>段落1</p>
		<p>段落2</p>
		<p>段落3</p>
		
		<table>
			<tr>
				<td>第一行</td><td>第一行</td>
			</tr>
			<tr>
				<td>第一行</td><td>第一行</td>
			</tr>
			<tr>
				<td>第一行</td><td>第一行</td>
			</tr>
			<tr>
				<td>第一行</td><td>第一行</td>
			</tr>
			<tr>
				<td>第一行</td><td>第一行</td>
			</tr>
			<tr>
				<td>第一行</td><td>第一行</td>
			</tr>
		</table>
		<br>
		<hr>
		<br>
		<table>
			<tr>
				<td>第一行</td><td>第一行</td>
			</tr>
			<tr>
				<td>第一行</td><td>第一行</td>
			</tr>
			<tr>
				<td>第一行</td><td>第一行</td>
			</tr>
			<tr>
				<td>第一行</td><td>第一行</td>
			</tr>
			<tr>
				<td>第一行</td><td>第一行</td>
			</tr>
			<tr>
				<td>第一行</td><td>第一行</td>
			</tr>
		</table>
		
		<input type="checkbox" name="test" />
		<input type="checkbox" name="test" />
		<input type="checkbox" name="test" />
		<input type="checkbox" name="test" />
		<input type="checkbox" name="test" />
		<input type="checkbox" name="test" />
		<button>您选中的个数</button>
	</body>
</html>

x_k
关注
专栏目录
js学习笔记——（15）jQuery选择器、样式操作、效果
01-20
本文将深入探讨jQuery的选择器、样式操作和效果，帮助你更好地理解和应用jQuery。 ### 1. jQuery选择器 jQuery提供了一套丰富的选择器，使得开发者可以更加方便地选取DOM元素。这些选择器主要分为以下几类： ####...
jQuery节点操作练习
全干工程师
03-15 1906
练习1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <titl
点击p标签内容弹出下一个对应元素
mqf15565844264的博客
10-27 512
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>马超之勇不亚于吕布的博客</title> <script src="../jquery/jquery.js"></script> </head> &lt...
jQuery知识梳理总结
flameking的博客
08-18 835
jQuery 1、jQuery 介绍 什么是 jQuery ? jQuery，顾名思义，也就是 JavaScript 和查询（Query），它就是辅助 JavaScript 开发的 js 类库。 jQuery 核心思想: write less,do more(写得更少,做得更多,而且更快)，所以它实现了很多浏览器的兼容问题。 jQuery 流行程度: 现在已经成为最流行的 JavaScript 库，在世界前 10000 个访问最多的网站中，有超过 55%在使用jQuery。 jQuery 好处:jQu
点击每个li节点，都弹出其文本值及修改
weixin_30740295的博客
12-13 160
点击每个li节点，都弹出其文本值 1，获取所有的li节点 var liNodes=document.GetElementsByTagName("li"); 2，使用for循环进行遍历，得到每一个li节点 for(var i=0;i<liNodes.length;i++){ alert(i); } 3，为每一个li节点添加onclick响应函数 liNodes[i].oncli...
jqGrid 学习笔记整理——进阶篇(一 )
09-02
在实际应用中，你可能还需要配置其他的jqGrid特性，比如行选择、事件监听、自定义编辑器、数据过滤、列的隐藏和显示等。jqGrid还支持远程数据源，可以通过改变`datatype`为`"json"`或`"jsonp"`，配合`url`属性从...
struts2学习笔记黑马程序员
12-27
### Struts2学习笔记之文件上传与Ajax开发 #### Struts2文件上传 **文件上传简介** 文件上传是Web应用中常见的功能之一，Struts2框架内置了对文件上传的支持，使得开发者能够轻松地实现这一功能。为了确保文件...
jquery 学习笔记源码 1第一个jquery
04-03
《jQuery学习笔记源码——初识与实践》 在当今的Web开发领域，jQuery是一个不可或缺的JavaScript库，它极大地简化了DOM操作、事件处理、动画效果以及Ajax交互等任务。本篇文章将基于“jQuery学习笔记源码 1第一个...
jQuery学习基础知识小结
01-19
jQuery学习笔记： jQuery学习 1、基本语法： $(selector).action() $:定义jQuery selector:选择符，查询和查找HTML元素 action():对元素执行的操作 实例： $(this).hide()——隐藏当前元素 $(“p”),hide()——-隐藏...
使用jquery实现小需求练习-------对应选择器的练习
weixin_34268610的博客
08-02 134
1.需求 　　点击所有的 p 节点, 能够弹出其对应的文本内容 　　使第一个 table 隔行变色 　　点击 button, 弹出 checkbox 被选中的个数   2.程序 1 &lt;!DOCTYPE html&gt; 2 &lt;html&gt; 3 &lt;head&gt; 4 &lt;meta charset="UTF-8"&gt; 5 &lt;title&gt;Inser...
JavaScript修改和获取p标签里面内容
热门推荐
u010746364的博客
11-30 8万+
function textModify() { var obj = document.getElementById("p"); alert(obj.innerHTML); obj.innerHTML= "google coding"; } function textModify2() { var obj = document.getElementById("p2"
java学习-22天
枫子的博客
05-05 172
JDBC中的driver接口，数据库厂商必须提供实现的接口，能从其中 对于 Oracle 数据库连接，采用如下形式：  jdbc:oracle:thin:@localhost:1521:sid 对于 SQLServer 数据库连接，采用如下形式： jdbc:microsoft:sqlserver//localhost:1433; DatabaseName=sid 对于 MYSQL 数据库
jQuery：一些小练习
dgk96672的博客
01-25 147
练习1：点击所有的 p 节点，能够弹出对应的文本内容。 1 <script type="text/javascript" src="jquery-1.7.2.js"></script> 2 <script type="text/javascript"> 3 $(function()...
JQuery小练习
Vivian_shuang的博客
07-22 438
DOCTYPE html> html> head> meta charset="UTF-8"> title>title> style type="text/css"> #div0{ width: 100px; height: 100px; border: 5px solid palegreen; } #div1{ width: 100px; height:
JQuery学习笔记-表单选择器
weixin_34184561的博客
10-17 67
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值