<!DOCTYPE?html>
<html>
<head>
????<meta?http-equiv="Content-type"?content="text/html;?charset=utf-8"?/>
????<title></title>
????<link?rel="stylesheet"?href="imooc.css"?type="text/css">
????<script?src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
????<h2>屬性篩選選擇器</h2>
????<h3>[att=val]、[att]、[att|=val]、[att~=val]</h3>
????<div?class="left"?testattr="true"?>
????????<div?class="div"?testattr="true"?name='p1'>
????????????<a>[att=val]</a>
????????</div>
????????<div?class="div"?testattr="true"?p2>
????????????<a>[att]</a>
????????</div>
????????<div?class="div"?testattr="true"?name="-">
????????????<a>[att|=val]</a>
????????</div>
????????<div?class="div"?testattr="true"?name="a?b">
????????????<a>[att~=val]</a>
????????</div>
????</div>
????<script?type="text/javascript">
?????????//查找所有div中，屬性name=p1的div元素
??????????$('div[name=p1]').css("border",?"3px?groove?red");?
????</script>
????<script?type="text/javascript">
????????//查找所有div中，有屬性p2的div元素
????????$('div[p2]').css("border",?"3px?groove?blue");?
????</script>
????<script?type="text/javascript">
????????//查找所有div中，有屬性name中的值只包含一個(gè)連字符“-”的div元素
????????$('div[name|="-"]').css("border",?"3px?groove?#00FF00");?
????</script>
????<script?type="text/javascript">
????????//查找所有div中，有屬性name中的值包含一個(gè)連字符“空”和“a”的div元素
????????$('div[name~="a"]').css("border",?"3px?groove?#668B8B");?
????</script>
????<h3>[att^=val]、[att*=val]、[att$=val]、[att!=val]</h3>
????<div?class="left"?testattr="true"?>
????????<div?class="div"?testattr="true"??name='imooc-aaorn'>
????????????<a>[att^=val]</a>
????????</div>
????????<div?class="div"?testattr="true"??name='aaorn-imooc'>
????????????<a>[att$=val]</a>
????????</div>
????????<div?class="div"?testattr="true"??name="attr-test-selector">
????????????<a>[att*=val]</a>
????????</div>
????????<div?class="div"?name="a?b">
????????????<a>[att!=val]</a>
????????</div>
????</div>
????<script?type="text/javascript">
?????????//查找所有div中，屬性name的值是用imooc開(kāi)頭的
????????$('div[name^=imooc]').css("border",?"3px?groove?red");?
????</script>
????<script?type="text/javascript">
?????????//查找所有div中，屬性name的值是用imooc結(jié)尾的
?????????$('div[name$=imooc]').css("border",?"3px?groove?blue");?
????</script>
????<script?type="text/javascript">
????????//查找所有div中，有屬性name中的值包含一個(gè)test字符串的div元素
????????$('div[name*="test"]').css("border",?"3px?groove?#00FF00");?
????</script>
????<script?type="text/javascript">
????????//查找所有div中，有屬性testattr中的值沒(méi)有包含"true"的div
????????$('div[testattr!="true"]').css("border",?"3px?groove?#668B8B");?
????</script>
</body>
</html>
1 回答
已采納
HalfAnHour
TA貢獻(xiàn)52條經(jīng)驗(yàn) 獲得超73個(gè)贊
testattr是你為div自定義的一個(gè)屬性，起到標(biāo)識(shí)的作用，而attr是jquery的方法，不是同一個(gè)東西。
-
曬漁網(wǎng)謝謝，那testattr是div的什么屬性，還是說(shuō)可以自己定義屬性--就是隨便取個(gè)名字tt然后再給值？
- 1 回答
- 0 關(guān)注
- 1769 瀏覽
添加回答
舉報(bào)
0/150
提交
取消