jquery css 選擇器演示代碼

DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jquery css 選擇器演示代碼

jquery css 選擇器演示代碼

編輯：JQuery特效代碼

效果如圖所示:

核心代碼:
代碼如下:
<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>

完全演示代碼:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "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>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

上一頁:JQuery 動態擴展對象之另類視角
下一頁:jQuery select操作控制方法小結

JQuery特效代碼

比較不錯的JS/JQuery顯示或隱藏文本的方法: 推薦使用： . 代碼如下: $(#id).show(); $(#id).hide(); 不推薦使用
分享2個jQuery插件--jquery.fileupload與artdialog: 這些是我們項目中必不可少的東西，所以今天推薦兩個一個叫做artdialog是個iframe的jque
jQuery.holdReady()使用方法: . 代碼如下: holdReady: function( hold ) { if ( hold )

jQuery基礎知識 JQuery入門技巧 JQuery特效代碼 JQuery常見問題

DIV CSS 佈局教程網

相關文章