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

最新推荐文章于 2021-08-18 23:26:25 发布
最新推荐文章于 2021-08-18 23:26:25 发布
阅读量880 收藏 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
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery学习笔记——jQuery选择器
vikeyyyy的博客
08-20 422
jQuery选择器之基本选择器 jQuery选择器——id选择器 $( "#id" ) id选择器也是基本的选择器，jQuery内部使用JavaScript函数document.getElementById()来处理ID的获取。原生语法的支持总是非常高效的，所以在操作DOM的获取上，如果能采用id的话尽然考虑用这个选择器。 id是唯一的，每个id值在一个页面中只...
JS学习笔记——jquery
lxy95512的博客
03-04 481
JavaScript库 JavaScript库:即library ,是一个封装好的特定的集合(方法和函数)。从封装一大堆函数的角度理解库 就是在这个库中,封装了很多预先定义好的函数在里面,比如动画animate、hide、 show ,比如获取元素等。 简单理解:就是一一个JS文件,里面对我们原生js代码进行了封装,存放到里面。这样我们可以快速高效的使用这些封装好的功能了。 比如jQuery ,就是为了快速方便的操作DOM ,里面基本都是函数(方法)。 jQuery的概念 jQuery是一一个快速、简
jQuery节点操作练习
全干工程师
03-15 1903
练习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 833
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 159
点击每个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...
js学习笔记——（15）jQuery选择器、样式操作、效果
01-20
本文将深入探讨jQuery的选择器、样式操作和效果，帮助你更好地理解和应用jQuery。 ### 1. jQuery选择器 jQuery提供了一套丰富的选择器，使得开发者可以更加方便地选取DOM元素。这些选择器主要分为以下几类： ####...
jQuery学习笔记——事件
最新发布
06-08
好的，关于 jQuery 的事件，我可以和你分享一些学习笔记。 1. 绑定事件 在 jQuery 中，我们可以通过以下方式来绑定事件： ``` $(selector).event(function(){ // 事件处理程序 }) ``` 其中，`selector` 表示要...
jqGrid 学习笔记整理——进阶篇(一 )
09-02
在实际应用中，你可能还需要配置其他的jqGrid特性，比如行选择、事件监听、自定义编辑器、数据过滤、列的隐藏和显示等。jqGrid还支持远程数据源，可以通过改变`datatype`为`"json"`或`"jsonp"`，配合`url`属性从...
java学习-22天
枫子的博客
05-05 172
JDBC中的driver接口，数据库厂商必须提供实现的接口，能从其中 对于 Oracle 数据库连接，采用如下形式：  jdbc:oracle:thin:@localhost:1521:sid 对于 SQLServer 数据库连接，采用如下形式： jdbc:microsoft:sqlserver//localhost:1433; DatabaseName=sid 对于 MYSQL 数据库
【PB】如何实现单击文本框时选中所有内容
03-09 7017
①创建单行编辑框的自定义单击事件 ue_clicked() ，Event ID 为 pbm_bnclicked ： this.selecttext( 1, len( this.text ) ) ②getfocus事件的代码为：This.Post Event ue_clicked()
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：一些小练习
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实现小需求练习-------对应选择器的练习
weixin_34268610的博客
08-02 133
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...
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=...
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"
Jquery学习笔记分享：优势应用及选择器详解
在这里，我们将分享一些 Jquery 学习笔记，希望能够帮助广大开发者更好地掌握和运用 JQuery。 在第一章中，我们首先了解了 JQuery 的概述。JQuery 的基本作用主要是简化 JavaScript 编程，提高开发效率，减少代码量...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值