jquery css 選擇器演示代碼
更新時(shí)間:2010年05月26日 20:20:52 作者:
這篇文章對(duì)于剛開始學(xué)習(xí)jquery的css 選擇器的朋友是個(gè)不錯(cuò)的參考,大家可以看實(shí)例演示即可。
效果如圖所示:

核心代碼:
<script type="text/javascript">
$('#one').css("background","#fff");
$('div').css("background","#fff");
$('body div').css("background","#bbffaa");//改變body內(nèi)所有div的屬性
$('div > span').css("background","#bbffaa").css("color","red").css("font-size","12px");//改變所有div下的span元素的屬性
$('#two >.mini').css("background","red");//id為two的div內(nèi)的所有class為mini的元素的屬性
$('#two').siblings("div").css("color","green");//選取#two同輩的div元素,無(wú)論前后位置
$('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");//索引號(hào)為偶數(shù)的div
$('div:odd').css("font-size","12px");//索引號(hào)為奇數(shù)的div
$('div:contains(other)').css("font-size","10px");//設(shè)置含有文本other的div元素
$('div:has(.mini)').css("color","#bbffaa");//設(shè)置含有class為mini元素的<div>元素的背景色
$('div:parent').css("color","#ffcccc");//改變含有子元素(包括文本)的div元素的屬性
$('div:hidden').show(3000);//獲取隱藏的div
$('div:visible')//獲取可見(jiàn)的div
$("div[title=test]").css("background","black");//設(shè)置title為test的div
$("div[.mini][title=test]").css("color","red");//設(shè)置class為mini title為test的div
</script>
完全演示代碼:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

核心代碼:
復(fù)制代碼 代碼如下:
<script type="text/javascript">
$('#one').css("background","#fff");
$('div').css("background","#fff");
$('body div').css("background","#bbffaa");//改變body內(nèi)所有div的屬性
$('div > span').css("background","#bbffaa").css("color","red").css("font-size","12px");//改變所有div下的span元素的屬性
$('#two >.mini').css("background","red");//id為two的div內(nèi)的所有class為mini的元素的屬性
$('#two').siblings("div").css("color","green");//選取#two同輩的div元素,無(wú)論前后位置
$('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");//索引號(hào)為偶數(shù)的div
$('div:odd').css("font-size","12px");//索引號(hào)為奇數(shù)的div
$('div:contains(other)').css("font-size","10px");//設(shè)置含有文本other的div元素
$('div:has(.mini)').css("color","#bbffaa");//設(shè)置含有class為mini元素的<div>元素的背景色
$('div:parent').css("color","#ffcccc");//改變含有子元素(包括文本)的div元素的屬性
$('div:hidden').show(3000);//獲取隱藏的div
$('div:visible')//獲取可見(jiàn)的div
$("div[title=test]").css("background","black");//設(shè)置title為test的div
$("div[.mini][title=test]").css("color","red");//設(shè)置class為mini title為test的div
</script>
完全演示代碼:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
相關(guān)文章
jQuery使用cookie與json簡(jiǎn)單實(shí)現(xiàn)購(gòu)物車功能
這篇文章主要介紹了jQuery使用cookie與json簡(jiǎn)單實(shí)現(xiàn)購(gòu)物車功能的方法,介紹了jQuery實(shí)現(xiàn)購(gòu)物車的步驟與關(guān)鍵代碼,需要的朋友可以參考下2016-04-04jQuery實(shí)現(xiàn)鼠標(biāo)滾輪動(dòng)態(tài)改變樣式或效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)滾輪動(dòng)態(tài)改變樣式或效果,需要的朋友可以參考下2015-01-01jquery選擇符快速提取web表單數(shù)據(jù)示例
遇到要重復(fù)多次同樣的事時(shí),就想找一種省時(shí)省力的方法,下面就為大家介紹下利用jquery選擇符快速提取web表單數(shù)據(jù)2014-03-03jQuery zTree插件快速實(shí)現(xiàn)目錄樹
這篇文章主要為大家詳細(xì)介紹了jQuery zTree插件快速實(shí)現(xiàn)目錄樹,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-08-08如何從jQuery的ajax請(qǐng)求中刪除X-Requested-With
X-Requested-With常用于判斷是不是ajax請(qǐng)求,ajax請(qǐng)求中刪除X-Requested-With的方法如下,感興趣的朋友可以參考下2013-12-12jQuery實(shí)現(xiàn)鼠標(biāo)選中文字后彈出提示窗口效果【附demo源碼】
這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)選中文字后彈出提示窗口效果,涉及jQuery事件響應(yīng)及頁(yè)面元素動(dòng)態(tài)操作相關(guān)技巧,非常簡(jiǎn)便實(shí)用,需要的朋友可以參考下2016-09-09