JQ 属性选择器

最新推荐文章于 2023-03-21 17:02:08 发布
最新推荐文章于 2023-03-21 17:02:08 发布
阅读量129 收藏 1
点赞数
分类专栏： 阅-JQ3 文章标签： javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_17658/article/details/82650248
版权 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script src="js/assist.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script type="text/javascript">
$(document).ready(function(){
	//选取含有 属性title 的div元素.
	$('#btn1').click(function(){
		$('div[title]').css("background","#bbffaa");
	})
	//选取 属性title值等于 test 的div元素.
	$('#btn2').click(function(){
		$('div[title=test]').css("background","#bbffaa");
	})
	//选取 属性title值不等于 test 的div元素.
	$('#btn3').click(function(){
		$('div[title!=test]').css("background","#bbffaa");
	})
	//选取 属性title值 以 te 开始 的div元素.
	$('#btn4').click(function(){
		$('div[title^=te]').css("background","#bbffaa");
	})
	//选取 属性title值 以 est 结束 的div元素.
	$('#btn5').click(function(){
		$("div[title$=est]").css("background","#bbffaa");
	})
	//选取 属性title值 含有 es  的div元素.
	$('#btn6').click(function(){
		$("div[title*=es]").css("background","#bbffaa");
	})
	//组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有 es 的元素.
	$('#btn7').click(function(){
		$("div[id][title*=es]").css("background","#bbffaa");
	})
});
</script>
</head>
<body>
<button id="reset">手动重置页面元素</button>
<input type="checkbox" id="isreset" checked="checked"/>
<label for="isreset">点击下列按钮时先自动重置页面</label>
<h3> 属性选择器.</h3>
<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”的元素." id="btn7"/>
<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" size="8"/>
</div>
<span id="mover">正在执行动画的span元素.</span>
</body>
</html>

 

效果图：

 

 

 

 

 

 

 

iteye_17658
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JQuery 属性选择器 [id^=btn]
houyanhua1的专栏
12-18 1612
$('input');  //所有input元素 $('input[id]'); //input元素中，设置了id属性的所有元素。 $('input[id=btn1]'); //input元素中，id=btn1的元素。 $('input[id*=btn]'); //input元素中，id包含btn的所有元素。 $('input[id^=btn]'); //input元素中，id以btn开头
jQuery JavaScript Library v1.10.2源码
weixin_30436101的博客
08-28 953
/*! * 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属性选择器
c__dreamer的博客
07-23 251
上次总结了一下jQuery中的基础选择器，这次总结一下属性选择器    Attribute Contains Prefix Selector [name|='value'] 描述：选择指定属性值给定字符串或以该字符串为前缀（该字符串后跟着连字符“-”）的元素 语法：jQuery("[attribute |= "value"]")或者$("[attribute |= "value"]") 注...
jq时间选择器jq时间选择器jq时间选择器
最新发布
03-08
"jq时间选择器"是指利用jQuery实现的一个功能，允许用户在网页上方便地选取日期或时间。这个功能在网页表单、日程安排、预订系统等场景中非常常见。 jQuery时间选择器通常基于插件实现，例如jQuery UI中的...
jQuery 属性选择器element[herf*='value']使用示例
10-26
在本示例中，我们将详细探讨`element[attribute*='value']`这一属性选择器，以及与之相关的其他几个选择器。 首先，`element[attribute*='value']`是jQuery中的一种属性选择器，它用于选取具有指定属性，并且该属性...
jquery属性过滤选择器使用示例
10-27
本示例通过一个具体的例子展示了如何利用属性过滤选择器来对具有特定属性的元素执行样式和动画效果。 在给定的代码中，我们首先引入了 jQuery 库（`<script src="jquery-1.9.1.js" type="text/javascript"></script...
JQ 表单对象属性过滤选择器
08-13
选择器分为基本选择器、层次选择器、属性选择器、类选择器和ID选择器等多种类型。在表单对象中，我们经常需要根据特定属性来筛选元素，这时属性过滤选择器就显得尤为重要。 二、属性过滤选择器 属性过滤选择器是...
jQuery——属性选择器
Yeoman92的博客
12-29 4414
属性选择器在HTML文档中，元素的开始标记中通常包含有多个属性(attribute)<input id="txtUsername" type="text" value="qiyisoft" name="email" style="display:block" />在jQuery中，除了直接使用id和class属性作为选择器之外，还可以根据各种属性（如title等）对由选择器查询到的元素进行过滤。属性
Jquery 选择器
03-17
NULL 博文链接：https://xace.iteye.com/blog/547578
jQuery之属性选择器
python全栈
01-24 4079
属性选择器 [attribute]匹配包含给定属性的元素 $("a").addClass("myClass"); $("a[href]").addClass("myClass"); [attribute1][attribute2]复合属性选择器，需要同时满足多个属性 $("a[href][title]").addClass("myClass"); [attribute=value]匹配给定的属性是某个特定值的元素 $("a[href='film-2.html']").addClass("myClas
JQuery中属性选择器
you4580的专栏
03-21 1845
语法： $("A[属性名='值']") 包含指定属性等于指定值的选择器。语法：$("A[属性名='值'][]...")包含多个属性条件的选择器。语法： $("A[属性名]")包含指定属性的选择器。
JQuery属性选择器
jason123345的博客
12-29 656
今天我们学习一下JQuery属性选择器，方便我们调用不同类型的属性。  一、属性选择器 代码： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;script src="sc
jQuery属性选择器（附有代码以及运行截图）
GodGump的博客
02-28 443
jQuery 使用 XPath 表达式来选择带有给定属性的元素。 XPath使用路径表达式来选取 XML 文档中的节点或节点集。节点是通过沿着路径 (path) 或者步 (steps) 来选取的。 说上面是为了理解下面几个常见的属性选择器 注意一下代码中：attribute表示一个属性名，value表示一个属性值 $(" [attribute] = 'value' ") 选择指定属性值等于给定字符串或改字符串为前缀（该字符串后跟一个连字符“-”）的元素。 $("[attribute*='value']")
Web前端（四）jQuery (6) jQ属性选择器
PizAn的博客
11-18 304
Date ： 2018/11/18 属性选择器，还是没图，这次放长泽雅美 源代码： 1、div[id] 选择有id属性的div 2、div[id='two'] 选择有id属性的值为two的div &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF
jq 属性选择器及子元素过滤选择器
...
08-29 3501
属性选择器 $(“[name]”)   获得全部有name属性的元素节点 $(“[name=email]”)   获得有name属性并且值等于email的元素节点 $(“[name!=email]”) 获得属性name不等于emai的元素节点 子元素过滤选择器 注：注意和简单过滤选择器（:first,:last,:eq()
jq选择器
qq_42408149的博客
09-21 830
jq选择器 == CSS的选择器 jq高级选择器=层次、属性、过滤（相当于CSS中的结构伪类） jq的层次选择器 jq高级选择器之属性选择器(比CSS的属性选择器多了一个不等于) jq高级选择器之过滤选择器【jq选择器的重点】 过滤选择器与CSS的结构伪类的异同： 相同点：都是以冒号打头； 不同点：jq的过滤选择器名称可能有变更，同时，也扩展更多的选择器。 ...
jq name 选择器
08-18
jq name选择器是指使用name属性来选择元素的jQuery选择器。在jQuery中，可以使用以下语法来选择拥有特定name属性的元素： $("[name='nameValue']") 其中，nameValue是要选择的元素的name属性的值。使用这种选择器...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值