<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
属性选择器</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<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>
<script type="text/javascript" src="jquery-1.3.1.js"></script>
</head>
<body>
<h1>XXXX</h1>
<h2>XXXXXXX</h2>
<h3>XXXXXXXXX</h3>
<input type="hidden" value="hidden1"/>
<input type="hidden" value="hidden2"/>
<input type="hidden" value="hidden3"/>
<input type="hidden" value="hidden4"/>
<div id="one" title="test">
div id为one test
</div>
<div id="one" title="texxx">
div id为one texxx
</div>
<div id="one" title="xxxest">
div id为one texxx
</div>
<div id="one" title="xxxesxxxxxt">
div id为one xxxesxxxxxt
</div>
<div id="two" title="ate">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
<div id="three" class="one" >
XXXXXXXXX
</div>
</body>
<script language="JavaScript">
//*****含有属性title 的div元素.
$('#b1').click(function(){
$('div[title]').css("background","pink");
});
//****属性title值等于test的div元素
$('#b2').click(function(){
$('div[title="test"]').css("background","pink");
});
//属性title值不等于test的div元素(没有属性title的也将被选中)
$('#b3').click(function(){
$('div[title!="test"]').css("background","pink");
});
//属性title值 以te开始 的div元素
$('#b4').click(function(){
$('div[title^="te"]').css("background","pink");
});
//属性title值 以est结束 的div元素
$('#b5').click(function(){
$('div[title$="est"]').css("background","pink");
});
//属性title值 含有es的div元素
$('#b6').click(function(){
$('div[title*="es"]').css("background","pink");
});
//选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素
//我们的过滤方式有两种：
//$('div:contains["abc"]')
$('#b7').click(function(){
//选区有属性的id的div元素，然后再结果中选区属性title值含有"es"的div元素
$('div[id][title*="es"]').css("background","pink");
});
</script>
</html>
网友评论