黑马day16 jqueryamp;属性过滤选择器
生活随笔
收集整理的這篇文章主要介紹了
黑马day16 jqueryamp;属性过滤选择器
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
屬性過濾選擇器的過濾規則是通過元素的屬性來獲取對應的元素
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>
轉載于:https://www.cnblogs.com/zsychanpin/p/6756949.html
總結
以上是生活随笔為你收集整理的黑马day16 jqueryamp;属性过滤选择器的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： BZOJ 3884 上帝与集合的正确用法
- 下一篇： (转)linux dumpe2fs命令