jQuery中的属性选择器

最新推荐文章于 2024-01-14 11:54:30 发布
最新推荐文章于 2024-01-14 11:54:30 发布
阅读量910 收藏 1
点赞数
分类专栏： 网页编程和设计 文章标签： jQuery中的属性选择器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42031653/article/details/99695523
版权

先看代码，后面详细解释：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.9.1.js" ></script>
		<script>
		$(function(){
			//选择type类型进行更改
			$("input[type=text]").css("background-color","aquamarine");
			
			//选择name属性以z开头的
			$("input[name^=z]").css("background-color","aquamarine");
			
			//选择name属性以e结尾
			$("input[name$=e]").css("background-color","aquamarine");
			
			//选择name属性中有p
			$("input[name*=p]").css("background-color","aquamarine");
			
			//选择复合器，同时符合多种条件多种
			$("input[type=text][name*=n]").css("background-color","aquamarine");
			
		})
		
		</script>
	</head>
	<body>
		<center>
		<h3>注册页面</h3>
		<hr />
		<form action="" method="get">
		<table border="1px">
			<tr height="35px">
				<td width="150px">用户名：</td>
				<td width="400px">
					<input type="text" name="zuname" id="uname" value="" alt="用户名" onblur="checkName()"/>
				    <span id="uname_span">*用户名必须是3-5位的汉字</span>
				</td>
			</tr>
			<tr height="35px">
				<td>密码：</td>
				<td>
					<input type="password" name="zpwd" id="pwd" value="" alt="密码" onblur="checkPwd()"/>
					<span id="pwd_span"></span>
					
				</td>
			</tr>
			<tr height="35px">
				<td>手机号：</td>
				<td>
					<input type="text" name="zphone" id="phone" value="" alt="手机号" />
					<span id="phone_span"></span>
				</td>
			</tr>
			<tr height="35px">
				<td>邮箱：</td>
				<td>
					<input type="text" name="email" id="email" value="" alt="邮箱" onblur="checkEmail()" />
				    <span id="email_span"></span>
				</td>
			</tr>
			<tr height="35px">
				<td>颜色：</td>
				<td>
					<input type="color" name="scolor" id=""  />
				</td>
			</tr>
			<tr height="35px">
				<td>爱好：</td>
				<td>
					<input type="checkbox" name="fav" id="" value="1" />唱歌
					<input type="checkbox" name="fav" id="" value="2" />睡觉
					<input type="checkbox" name="fav" id="" value="3"  />LOL<br />
					<input type="checkbox" name="fav" id="" value="4"  />旅游
					<input type="checkbox" name="fav" id="" value="5" />高尔夫
					<input type="checkbox" name="fav" id="" value="6" />篮球
					
				</td>
			</tr>
			<tr height="35px">
				<td>籍贯：</td>
				<td>
					<select name="adress" id="sel" onchange="checkAdress()">
						<option value="0">--请选择--</option>
						<option value="1">河南</option>
						<option value="2">湖南</option>
						<option value="3">海南</option>
						<option value="4">云南</option>
					</select>
					
					<span id="sel_span"></span>
				</td>
			</tr>
			
			<tr height="35px">
				<td>验证码</td>
				<td>
					<input type="number" name="" id="yzm" value="" onblur="checkYZM()"/>
					<span id="yzm_span"></span>
					<span id="yzm2_span"></span>
				</td>
			</tr>
			
			<tr height="35px">
				<td>个人介绍：</td>
				<td>
					<textarea name="intro" rows="8" cols="30"></textarea>
				</td>
			</tr>
			
			<tr height="35px">
				<td colspan="2" align="center">
					<input type="checkbox" name="" id="check" value="" onclick="checkAgree()">是否同一本公司协议
				</td>
			</tr>
			<tr height="35px">
				<td colspan="2" align="center">
					<input type="submit" id="sub" value="注册" disabled="true"/>
				</td>
			</tr>
		</table>
		</form>
		</center>
		
		
	</body>
</html>

 

选择type属性是text的标签：（类似于 $(":text")）

$("input[type=text]").css("background-color","aquamarine");

 

选择name属性以z开头的:(开头符号 ^)

$("input[name^=z]").css("background-color","aquamarine");

 

选择name属性以e结尾：（结尾符号 $）

$("input[name$=e]").css("background-color","aquamarine");

 

选择name属性中有p:(包含，含有 符号：*)

$("input[name*=p]").css("background-color","aquamarine");

 

选择复合器，同时符合多种条件多种:

$("input[type=text][name*=n]").css("background-color","aquamarine");

 

 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.9.1.js" ></script>
		<script>
		$(function(){
			
			//获取form表单的所有表单项
			var inp=$(":input").length;
			//alert(inp);
			
			//获取input标签中type属性是text
			$(":text").css("background-color","darkblue");
			//等同于：
			$("input[type=text]").css("background-color","darkblue");
			
			//获取input标签中checked属性
			var val=$("input:checked");
			//alert(val.val());
			
			//获取input标签中属性disabled
			var dd=$("input:disabled");
			alert(dd.val());
			
			
			//获取select中有selected属性。
			var val=$("select option:selected");
			//alert(val.val());
			
		})
		
		</script>
	</head> 	
	<body>
		<center>
		<h3>注册页面</h3>
		<hr />
		<form action="" method="get">
		<table border="1px">
			<tr height="35px">
				<td width="150px">用户名：</td>
				<td width="400px">
					<input type="text" name="zuname" id="uname" value="" alt="用户名" onblur="checkName()"/>
				    <span id="uname_span">*用户名必须是3-5位的汉字</span>
				</td>
			</tr>
			<tr height="35px">
				<td>密码：</td>
				<td>
					<input type="password" name="zpwd" id="pwd" value="" alt="密码" onblur="checkPwd()"/>
					<span id="pwd_span"></span>
					
				</td>
			</tr>
			<tr height="35px">
				<td>手机号：</td>
				<td>
					<input type="text" name="zphone" id="phone" value="" alt="手机号" />
					<span id="phone_span"></span>
				</td>
			</tr>
			<tr height="35px">
				<td>邮箱：</td>
				<td>
					<input type="text" name="email" id="email" value="" alt="邮箱" onblur="checkEmail()" />
				    <span id="email_span"></span>
				</td>
			</tr>
			<tr height="35px">
				<td>颜色：</td>
				<td>
					<input type="color" name="scolor" id=""  />
				</td>
			</tr>
			<tr height="35px">
				<td>爱好：</td>
				<td>
					<input type="checkbox" name="fav" id="" value="0"/>唱歌
					<input type="checkbox" name="fav" id="" value="1" checked="checked"/>睡觉
					<input type="checkbox" name="fav" id="" value="2"/>LOL
					<input type="checkbox" name="fav" id="" value="3"/>旅游
					<input type="checkbox" name="fav" id="" value="4"/>高尔夫
					<input type="checkbox" name="fav" id="" value="5"/>篮球
					
				</td>
			</tr>
			<tr height="35px">
				<td>籍贯：</td>
				<td>
					<select name="adress" id="sel" onchange="checkAdress()">
						<option value="0">--请选择--</option>
						<option >河南</option>
						<option >湖南</option>
						<option selected="selected">海南</option>
						<option >云南</option>
					</select>
					
					<span id="sel_span"></span>
				</td>
			</tr>
			
			<tr height="35px">
				<td>验证码</td>
				<td>
					<input type="number" name="" id="yzm" value="" onblur="checkYZM()"/>
					<span id="yzm_span"></span>
					<span id="yzm2_span"></span>
				</td>
			</tr>
			
			<tr height="35px">
				<td>个人介绍：</td>
				<td>
					<textarea name="intro" rows="8" cols="30"></textarea>
				</td>
			</tr>
			
			<tr height="35px">
				<td colspan="2" align="center">
					<input type="checkbox" name="" id="check" value="" onclick="checkAgree()">是否同一本公司协议
				</td>
			</tr>
			<tr height="35px">
				<td colspan="2" align="center">
					<input type="submit" id="sub" value="注册" disabled="true"/>
				</td>
			</tr>
		</table>
		</form>
		</center>
		
		
	</body>
</html>

 

 

获取form表单的所有表单项和   $("input")   进行区别开， $("input") 表示获取表单元素是input的。

$(":input")

 

获取input标签中type属性是text：

$(":text").css("background-color","darkblue");

 

获取input标签中checked属性：

$("input:checked");

 

获取input标签中属性disabled：

$("input:disabled");

 

获取select中有selected属性：

$("select option:selected");

 

有园人
关注
专栏目录
在js中如何使用jquery的属性选择器
weixin_57760860的博客
04-20 1587
个人理解： 可以更快捷的改变标签的属性 第一步先创建好需要用的标签： <input type="checkbox" name="newsletter" value="Hot Fuzz" /> <input type="checkbox" name="newsletter" value="Cold Fusion" /> <input type="checkbox" name="accept" value="Evil Plans" /> ...
JQuery（八） -- 表单属性选择器
PUYALEI的博客
05-14 75
【代码】JQuery（八） -- 表单属性选择器。
Java模拟Jquery选择器
12-25
使用org.htmlparser.Parser 模拟js 查找页面元素
js进阶 10-6 jquery中的属性选择器有哪些
weixin_34216107的博客
06-13 104
js进阶 10-6 jquery中的属性选择器有哪些 一、总结 一句话总结： 1、第一遍能学会么？ 一遍是肯定学不会的，要多学几遍，所以想着怎么加快速度，减少学习的遍数 2、属性选择器是干嘛的？ 选择属性的，什么是属性，就是那些属性啊，class，id，value。 3、属性选择是什么符号？ 中括号 4、jquery中的属性选择器有哪些？ 6种，有属性，有特定属性，没有特定属性...
jquery属性选择器
qq_28596151的博客
05-17 545
jquery属性选择器html的元素标签对应的都有自己的属性，属性选择器就是根据元素的属性来进行匹配元素的。1、[attribute]属性选择器    代表着只要元素标签含有某一个指定的属性，该元素就会被匹配的到。不管元素的属性是什么值。比如$("input[id]"):匹配含有属性id的input元素。2、[attribute=value]属性选择器    匹配含有指定属性并且属性值必须是指定的...
jQuery JavaScript Library v1.10.2源码
weixin_30436101的博客
08-28 976
/*! * jQuery JavaScript Library v1.10.2 * http://jquery.com/ * * Includes Sizzle.js * http://sizzlejs.com/ * * Copyright 2005, 2013 jQuery Foundation, Inc. and other contributors * R...
jQuery实用选择器
zbbyy2004510的博客
11-04 711
基本选择器： 标签选择器 :$("h1") 类选择器 :$(".class") id选择器 : $("#id") 全局选择器 : $("*") 并集选择器 : $("h1,.class,#id,span") 层次选择器: 后代选择器 :$("ul li") 子类选择器 :$(...
JQuery中属性过滤选择器用法实例分析
10-24
在使用属性选择器时，需要注意属性选择器是区分大小写的，且属性值中的引号应当匹配使用。此外，在实际的开发过程中，应当注意选择器的优先级和性能优化的问题。 通过实例分析，我们可以了解到JQuery属性过滤选择器...
jQuery中复合属性选择器用法实例
10-24
在复合属性选择器中，任意数量的属性选择器都可以使用，并且它们会按照从左到右的顺序进行计算，最终只匹配那些同时满足所有属性条件的元素。 举一个复合属性选择器的例子，假设我们想要选择class属性值为“houtai...
jQuery属性选择器用法示例
10-21
jQuery是一种快速、小巧、功能丰富的JavaScript库，它极大地简化了HTML文档遍历和操作、事件处理、动画和Ajax...通过本文的实例，相信读者已经对jQuery属性选择器有了较深入的了解，并可以在实际开发中有效地运用它们。
jQuery选择器（一）基本选择器、层次选择器及属性选择器的详细使用
最新发布
Jin_Xiang123的博客
01-14 3957
本篇文章主要介绍在jQuery中基本选择器、层次选择器及属性选择器的详细使用以及部分理论知识 在jQuery中，基本选择器是一组简单而直接的选择器，用于选择DOM元素。它们是最常用和最基础的选择器，可以根据元素的标签名、类名、id等属性来选择元素。基本选择器包括标签选择器、类选择器、ID选择器、并集选择器和全局选择器。名称语法构成描述示例标的id匹配元素。
JQuery中常用的 属性选择器
weixin_34318326的博客
02-28 916
jQuery中使用$()作为选择符极大提高工作效率以及方便快捷;一些常用属性的选择器由以下几种 1)　　$('#id')　　id选择器 2)　　$('.class')　　css选择器,class类名 3)　　$('element')　　标签选择器，例如p,h1,div 4)　　$('*')　　全选择器,可选择所有的html标签(影响范围较大甚用) 5)　　$('sele1,sele2')...
Java基础之《Ajax+JQuery（JavaEE开发进阶Ⅱ）》—JQuery选择器
csj50的专栏
08-17 383
1、jQuery选择器完全继承了CSS风格。利用jQuery选择器，可以非常便捷和快速地找出特定的DOM元素，然后为它们添加相应的行为，而无需担心浏览器是否支持这一选择器。4、jQuery选择器是学习jQuery的基础。可见，jQuery选择器的重要性。当然想一下子掌握所有选择器也是困难的，这个得靠实践和积累。获取网页中不存在的元素不会报错，容错机制。查找id为aa的元素：$("#aa")一、什么是jQuery选择器。二、jQuery选择器的优势。jQuery常用选择器详解。三、常用的基本选择器。.....
Javaweb基础-jQuery选择器
weixin_46899412的博客
02-06 350
jQuery选择器
java web-11.2Jquery选择器
weixin_39795049的博客
05-18 129
JQuery选择器筛 选择器：选具有相似特征的元素（标签） 1.基本语法学习： （1）事件绑定 （2）入口函数 //jquery的入口函数，（dom文档加载完成之后执行该函数中的代码） $(function () { }) 代码示例与结果 window.onload和$(function)区别： window.onload：只能定义一次，如果定义多次，后边的会将前面的覆盖掉 $(function)：可以定义多次 （3）样式控制 2.分类： （1）基本选择器 ①标签选择器 语法：$("html标
jQuery选择器
JAVA52Lin的博客
12-18 256
jQuery选择器类似于css选择器，可以选取网页中的元素。 1、jQuery中的选择器有很多，主要可以通过以下选取： 通过CSS选择器选取元素： 基本选择器 层次选择器 属性选择器 通过过滤选择器选取元素： 基本过滤选择器 可见性过滤选择器 2、基本选择器：标签，类，ID，并集，全局选择器。 名称 语法构成 描述 ...
Java Jquery：（二）jQuery的选择器-8500字匠心出品
地球村
06-09 323
jQuery的选择器1.对象之间的转换and基本选择器2.并集、后代、父子选择器、后面N个兄弟元素3.列表特殊选择器4. input属性选择器5.表单选择器 1.对象之间的转换and基本选择器 对象之间的转换 DOM对象：直接使用JavaScript获取的节点对象 className innerHTML value jQuery对象：使用jQuery选择器获取的节点对象，它能够使用jQuery中的方法 addClass() html() val() DOM对象和jQuery对象分别拥有一套独立的方法，不能
js对象属性 通过点(.) 和 方括号([]) 的不同之处
weixin_34237596的博客
08-28 87
关于这个问题，是我在做vue项目时的一个需求，让我对JS的.和[]的区别产生了兴趣。 我需要点击一个自定义的icon唤醒element UI的时间日期选择器的picker（也就是那个选择器），于是在vue中，给每个不同的时间选择器组件定义自己的ref。并写了一个函数来操作它们。 在Vue的模板中，我们可以在模板中的任何元素中添加ref属...
CSS属性选择器的四种格式
weixin_30821731的博客
11-19 210
属性选择器（Attribute Selectors），或许你不应该对属性选择器感到生疏，从本质上说，id跟类选择器其实就是属性选择器，只不过是选择了id或者类的值（value）而已。　　属性选择器的格式是元素后跟中括号，中括号内带属性，或者属性表达式（不知道描述是否正确，自创的词），比如h1[title], h1[title="Logo"]等，你可以从我下面的论述中看到4种具体形式。 注意 属性...
jQuery属性过滤选择器详解
"这篇讲义主要介绍了jQuery中的属性过滤选择器，这是jQuery选择器的一种，用于根据元素的特定属性进行筛选。" 在jQuery中，属性过滤选择器是一种强大的工具，它允许开发者根据元素的属性（attribute）及其值来精确...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值