关闭

黑马day16 jquery&属性过滤选择器

标签: jquery
724人阅读 评论(0) 收藏 举报
分类:

属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素

1[attribute]
用法: $(”div[id]“) ;  返回值  集合元素

      说明:匹配包含给定属性的元素.例子中是选取了所有带”id”属性的div标签.

2[attribute=value]
用法: $(”input[name='newsletter']“).attr(”checked”, true);    返回值  集合元素

      说明:匹配给定的属性是某个特定值的元素.例子中选取了所有name属性是newsletter的input元素.

3[attribute!=value]
用法: $(”input[name!='newsletter']“).attr(”checked”, true);    返回值  集合元素

      说明:匹配所有不含有指定的属性,或者属性不等于特定值的元素.此选择器等价于:not([attr=value]),要匹配含有特定属性但不等于特定值的元素,请使用[attr]:not([attr=value]).之前看到的:not派上了用场.

4[attribute^=value]
用法: $(”input[name^=‘news’]“)  返回值  集合元素

      说明:匹配给定的属性是以某些值开始的元素.,我们又见到了这几个类似于正则匹配的符号.现在想忘都忘不掉了吧?!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ddd</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
	<style type="text/css">
		 	div,span{
			    width: 140px;
			    height: 140px;
			    margin: 20px;
			    background: #9999CC;
			    border: #000 1px solid;
				float:left;
			    font-size: 17px;
			    font-family:Roman;
			}
			
			div.mini{
			    width: 30px;
			    height: 30px;
			    background: #CC66FF;
			    border: #000 1px solid;
			    font-size: 12px;
			    font-family:Roman;
			}
			
			div.visible{
				display:none;
			}
	 </style>
	 <!--引入jquery的js库-->
	</head>
	 
	<body>
				
		 <input type="button" value="保存"  class="mini" name="ok"  class="mini" />
		 <input type="button" value=" 含有属性title 的div元素"  id="b1"/>
		 <input type="button" value=" 属性title值等于test的div元素"  id="b2"/>
		 <input type="button" value=" 属性title值不等于test的div元素(没有属性title的也将被选中)"  id="b3"/>
		 <input type="button" value=" 属性title值 以te开始 的div元素."  id="b4"/>
		 <input type="button" value=" 属性title值 以est结束 的div元素.."  id="b5"/>
		 <input type="button" value="属性title值 含有es的div元素."  id="b6"/>
		 <input type="button" value="选取有属性id的div元素,然后在结果中选取属性title值含有“es”的 div 元素"  id="b7"/>
		 
		 <!--文本隐藏域-->
         <input type="hidden" value="hidden_1">
		 <input type="hidden" value="hidden_2">
		 <input type="hidden" value="hidden_3">
		 <input type="hidden" value="hidden_4">
		 
		 <h1>天气冷了</h1>
		 <h2>天气又冷了</h2>
		 
	     <div id="one">
	    	 id为one   div
		     
		 </div>
		
		 <div id="two" class="mini"  title="test">
	    	   id为two   class是 mini  div  title="test"
		       <div  class="mini" >class是 mini</div>
		</div>
		
		 <div class="visible" >
		 	    class是 one 
		       <div  class="mini" >class是 mini</div>
			   <div  class="mini" >class是 mini</div>
		 </div>
		 <div class="one" title="test02">
		 	  class是 one    title="test02"
		       <div  class="mini01" >class是 mini01</div>
			   <div  class="mini" >class是 mini</div>
		</div>
		
		
		<div class="visible" >
		 	  这是隐藏的
		</div>
		
		<div class="one">
			
			
		</div>
		<br>
		<div id="mover" >
		 	  动画
		</div>
		<br>
		
		<input type="text" value="zhang" id="username" name="username">
	</body>
<script language="JavaScript">
//<input type="button" value=" 含有属性title 的div元素"  id="b1"/>
	$("#b1").click(function(){
		$("div[title]").css("background","red");
	});
//<input type="button" value=" 属性title值等于test的div元素"  id="b2"/>
	$("#b2").click(function(){
		$("div[title='test']").css("background","red");
	});
//<input type="button" value=" 属性title值不等于test的div元素(没有属性title的也将被选中)"  id="b3"/>
	$("#b3").click(function(){
		$("div[title!='test']").css("background","red");
	});
//<input type="button" value=" 属性title值 以te开始 的div元素."  id="b4"/>
	$("#b4").click(function(){
		$("div[title^='te']").css("background","red");
	});
//<input type="button" value=" 属性title值 以est结束 的div元素.."  id="b5"/>
	$("#b5").click(function(){
		$("div[title$='est']").css("background","red");
	});
//<input type="button" value="属性title值 含有es的div元素."  id="b6"/>
	$("#b6").click(function(){
		$("div[title*='es']").css("background","red");
	});
//<input type="button" value="选取有属性id的div元素,然后在结果中选取属性title值含有“es”的 div 元素"  id="b7"/>
	$("#b7").click(function(){
		$("div[id][title*='es']").css("background","red");
	});
</script>
   
</html>




0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

Jquery选择器分类(基本选择器,层次选择器,过滤选择器,表单选择器)

基本选择器 说明:通过元素id、class和标签名等来查找DOM元素 1.id选择器:$("#test");//选取id为test的元素 2.类选择器:$(".test");//选取所有class为...
  • allan492975230
  • allan492975230
  • 2013-08-01 15:50
  • 1129

jQuery过滤选择器详解

基本过滤选择器选取第一个元素(:first) //选择第一个div元素. $('#btn1').click(function(){ $('div:first...
  • csujiangyu
  • csujiangyu
  • 2015-08-19 10:19
  • 5610

Jquery过滤性选择器

这里以 为例 1.第一个为li的子元素,最后一个为li的子元素    $("li:first")   $("li:last")  2.第n个子元素(从0开始索引) ...
  • u013045370
  • u013045370
  • 2016-05-08 12:20
  • 1054

黑马day16 子jquery&子元素过滤选择器

此选择器主要对所选择的表单元素进行过滤 1、:enabled 用法: $(”input:enabled”)    返回值  集合元素      说明:匹配所有可用元素.意思是查找所有input...
  • u014010769
  • u014010769
  • 2015-07-10 18:59
  • 692

黑马day16 jquery&内容过滤选择器&可见度选择器

内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上 1、:contains(text) 用法: $(”div:contains(’John’)”)    返回值  集合元素    ...
  • u014010769
  • u014010769
  • 2015-07-10 16:59
  • 621

黑马day16 jquery基本选择器

基本选择器是 jQuery中最常用的选择器,也是最简单的选择器,它通过元素id,class 和标签名来查找DOM元素(在网页中 id只能使用一次,class 允许重复使用). 1、#id    ...
  • u014010769
  • u014010769
  • 2015-07-10 15:28
  • 521

黑马day16 jquery&层次选择器

如果想通过DOM元素之间的层次关系来获取特定元素,例如后代元素,子元素,相邻元素,兄弟元素等,则需要使用层次选择器. 1 、ancestor descendant       用法: $(”f...
  • u014010769
  • u014010769
  • 2015-07-10 15:52
  • 556

jquery属性过滤选择器

06-属性选择器.html 手动重置页面元素 点击下列按钮时先自动重置页面 属性选择器. $('#btn1').click($('div[t...
  • worn_xiao
  • worn_xiao
  • 2017-04-13 23:10
  • 110

jQuery之属性过滤选择器

在HTML文档中,元素的开始标记中通常包含有多个属性(attribute), 在jQuery中,除了直接使用id和class属性作为选择器之外,还可以根据各种属性(如title等)对由选择器 查询到...
  • xincai
  • xincai
  • 2013-08-14 18:32
  • 432

jQuery表单对象属性过滤选择器

表单对象属性过滤选择器 body{ font-family: "Microsoft YaHei" } .cGreen{...
  • jeo_chow
  • jeo_chow
  • 2016-08-14 20:19
  • 168
    个人资料
    • 访问:199883次
    • 积分:4363
    • 等级:
    • 排名:第8002名
    • 原创:242篇
    • 转载:4篇
    • 译文:0篇
    • 评论:38条
    友情链接