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

来源：互联网发布：hitv广西广电网络电视编辑：程序博客网时间：2024/05/17 19:17

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

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