http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jquery css 選擇器演示代碼</title>
<style>
div,span,p{
width:140px;
height:140px;
margin:5px;
background:#aaa;
border:#000 1px solid;
float:left;
font-size:17px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
div .mini{
width:55px;
height:55px;
background-color:#aaa;
font-size:12px;
}
</style>
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div class="one" id="one">
id爲one class爲one
<div class="mini">class爲mini</div>
</div>
<div class="one" id="two">
<div class="mini" title="other">class 爲mini,title爲other</div>
<div class="mini" title="test">class爲mini,title爲test</div>
</div>
<div class="one">
<div class="mini" title="test">class for mini,title for test</div>
<span style="width:55px; height:55px;">the span under div</span>
</div>
<div style="display:none" class="one">style for display none's div</div>
<script type="text/javascript">
$('#one').css("background","#fff");
$('div').css("background","#fff");
$('body div').css("background","#bbffaa");//改變body內所有div的屬性
$('div > span').css("background","#bbffaa").css("color","red").css("font-size","12px");//改變所有div下的span元素的屬性
$('#two >.mini').css("background","red");//id爲two的div內的所有class爲mini的元素的屬性
$('#two').siblings("div").css("color","green");//選取#two同輩的div元素,無論前後位置
$('div:first').css("background","red");
$('div:gt(1)').css("background","#fff");//索引值大於1的所有div元素
$('div:lt(1)').css("background","yellow");
$('div:not(.one)').css("color","#cccccc");//改變class不爲one的div元素
$('div:even').css("font-size","15px");//索引號爲偶數的div
$('div:odd').css("font-size","12px");//索引號爲奇數的div
$('div:contains(other)').css("font-size","10px");//設置含有文本other的div元素
$('div:has(.mini)').css("color","#bbffaa");//設置含有class爲mini元素的<div>元素的背景色
$('div:parent').css("color","#ffcccc");//改變含有子元素（包括文本）的div元素的屬性
$('div:hidden').show(3000);//獲取隱藏的div
$('div:visible')//獲取可見的div
$("div[title=test]").css("background","black");//設置title爲test的div
$("div[.mini][title=test]").css("color","red");//設置class爲mini title爲test的div
</script>
</body>
</html>
jquery css 選擇器
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章