NO IMAGE

HTML模組如下:

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="jquery1.12.3.js"></script>
<script type="text/javascript" src="stromae.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="one" id="one">
id為one,class為one的div
<div class="mini">class為mini</div>
</div>
<div class="one" id="two" title="test">
id為two,class為one,title為test的div
<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">class為mini</div>
<div class="mini">class為mini</div>
<div class="mini">class為mini</div>
<div class="mini"></div>
</div>
<div>
<div class="mini">class為mini</div>
<div class="mini">class為mini</div>
<div class="mini">class為mini</div>
<div class="mini" title="tesst">class為mini,title為tesst</div>
</div>
<div style="display:none;" class="none">
style的display為“none”的div
</div>
<div class="hide">class為hide的div</div>
<div>
<input type="hidden" size="8" />包含input的type為"hidden"的div
</div>
<button id="mover">正在執行動畫的span元素</button>
<div id='box'></div>
<h1>基本過濾選擇器</h1>
</body>
</html>

CSS模組如下:

/*全域性樣式設定*/  
        body,h4,ul,li{  
            margin:0px;  
            padding:0px;  
            }  
/*具體設定*/
        div,span,p {
            width: 180px;
            height: 150px;
            margin: 5px;
            background: #aaa;
            border: #000 1px solid;
            float: left;
            font-size: 18px;
            font-family: verdana;
            word-break: break-all;
        }
        div.mini {
            overflow: auto;
            width: 55px;
            height: 55px;
            background-color: #AAAAAA;
            font-size: 12px;
        }
        div.hide {
            display: none;
        }
#box {
    background: #98bf21;
    height: 100px;
    width: 100px;
    margin: 6px;
}

jQuer選擇器:

$(function()
//基本選擇器:通過元素id、class和標籤名來等來查詢DOM元素。
$('#one').css('background','red');	//改變id為one 的元素的背景色
$('.mini').css('background','blue');	//改變class為mini 的所有元素的背景色
$('div').css('background','green');	//改變元素名是<div>的所有元素的背景色
$('*').css('background','yellowgreen');	//改變所欲元素的背景色
$('span,#two').css('background',"red");	//改變所有<span>元素和id為two的元素的背景色
//層次選擇器:通過DOM元素之間的層次關係來獲取特定元素
$('body div').css('background','cornflowerblue');	//改變<body>內所有<div>的背景色
$('body >div').css('background','darkgoldenrod');	//改變<body>內子元素<div>的背景色
$('.one  div').css('background','cadetblue');   //改變class為one的下一個<div>同輩元素的背景色
$('#two ~div').css('background','darkgreen');	//改變id為two的元素後面的所有<div>同輩元素的背景色
<strong>//過濾選擇器——基本過濾選擇器:通過特定的過濾規則來篩選所需的DOM元素,其語法規則與CSS中的偽類選擇器語法相同。</strong>
$('div:first').css('background',"#0000A2");	//改變第一個<div>元素的背景色
$('div:last').css('background','#316BA5');	//改變最後一個<div>元素的背景色
$('div:not(.one)').css('background','#468847');	//改變class不為one的<div>元素的背景色
$('div:even').css('background','#990000');	//改變索引值為偶數的<div>元素的背景色
$('div:odd').css('background','brown');		//改變索引值為奇數的<div>元素的背景色
$('div:eq(4)').css('background','goldenrod');	//改變索引值為4的<div>元素的背景色
$('div:gt(4)').css('background','chartreuse');	//改變索引值大於4的<div>元素的背景色
$('div:lt(4)').css('background','darkgreen');	//改變索引值小於4的<div>元素的背景色
$(':header').css('background','yellowgreen');	//改變所有的標題元素,例如<h1>,<h2>,<h3>....這些元素的背景色
$(':animated').css('color','red');		//改變當前正在執行動畫的元素的背景色
$(':focus').css('color','darkred');		//改變當前獲取焦點的元素的背景色
//內容過濾選擇器:過濾規則主要體現在它所包含的子元素或文字內容上。
$("div:contains('di')").css({'color':'red','background':'blue'});       //改變含有文字“di”的<div>元素的背景色和文字顏色
$('div:empty').css('background','darkgoldenrod');			//改變不包含子元素(包括文字元素)的<div>空元素的背景色
$('div:has(".mini")').css('background',"#000099");			//改變class為mini元素的<div>元素的背景色
$('div:parent').css('background','green');
//可見性過濾選擇器:根據元素的可見和不可見狀態來選擇相應的元素
$('div:visible').css({'background':'red','color':'blue'}); 	//改變所有可見的<div>元素的背景色
$('div:hidden').show(5000);					//顯示隱藏的<div>元素(show(5000)是顯示元素,5000是指元素從隱藏到顯示完成的時間,單位是毫秒)
//屬性過濾選擇器:通過元素的屬性來獲取相應的元素
$('div[title]').css('background','darkgreen');			//改變還有title屬性的<div>元素的背景色
$('div[title=test]').css('background','royalblue');		        //改變title值等於"test"的<div>元素的背景色
$('div[title!=test]').css('background','red');			//改變title值不等於'test'的<div>元素的背景色
$('div[title^="en"]').css('background','burlywood');	        //改變title值以'en'開始的<div>元素的背景色
$('div[title$="en"]').css('background','red');			//改變title值以'en'結束的<div>元素的背景色
$('div[class*=one]').css('background','greenyellow');		//改變class值為'one'的<div>元素的背景色
$('div[title|="en"]').css('background','red');			//改變class值為'en'或以'en'為字首的<div>元素的背景色(字首是指類似於mi-ni這樣的屬性)
$('div[title~=en]').css('background','red');			//改變屬性class用空格分隔的值中包含'en'的<div>元素的背景色(類似於mi ni這樣的屬性)
$('div[id][title^=t]').css('background','goldenrod');		//改變含有屬性id且title值以t開頭的<div>元素的背景色
//子元素過濾選擇器:根據元素之間的父輩與子輩的關係來獲取相應的元素
$('div.one :nth-child(1)').css('background','darkgoldenrod');	//改變每個class為one的<div>父元素下的第2個子元素的背景色			
$('div.one :first-child').css('background','royalblue');	//改變每個class為one的<div>父元素下的第1個子元素的背景色
$('div.one :last-child').css('background','darkgoldenrod');	//改變每個class為one的<div>父元素下的最後1個子元素的背景色
$('div.one :only-child').css('background','mediumvioletred');	//如果class為one的<div>父元素下只有一個子元素,那麼則改變這個子元素的背景色
});