jquery css 選取器示範代碼

來源:互聯網
上載者:User

效果:

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

完全示範代碼: xmlns="http://www.w3.org/1999/xhtml">


id為one class為one

class為miniclass 為mini,title為otherclass為mini,title為testclass for mini,title for test

the span under divstyle for display none's div

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.