二、jq強大的選擇器

一、基礎選擇器

$裏面填寫的就是css選擇器的選擇方法

$('#list1').css('background','green')//通過id選取
$('.red').css('background','red')//通過class選取
$('li').css('background','grey')//通過元素名選取
$('li,p').css('font-size','20px')//選取li和p

二、層級選擇器

$('div a').css('color', 'green'); //div下子元素中的全部a標籤
$('div>a').css('color', 'red'); //選中div的子元素a
$('div a.link + a').css('color', 'purple'); //選中a標籤後面的一個a元素
$('div a.link ~ a').css('color', 'blue'); //選中a標籤後面所有的同級a元素

三、屬性選擇器

$('#ulColor li[class]').css('background', 'pink'); // li中含有class的標籤
$('#ulColor li[title=blue]').css('background', 'grey'); //li中title的值爲blue的標籤
$('#ulColor li[title!=blue]').css('background', 'yellowgreen'); //同級中除了title=blued的其它所有元素
$('#ulColor li[title|=css]').css('background', 'darkgreen'); //前綴是用-隔開的
$('#ulColor li[id^=color]').css('background', 'hotpink'); //以屬性值爲開始（不需要-隔開）
$('#ulColor li[id$=color]').css('background', 'purple'); //以屬性值爲結尾（不需要-隔開）
$('#ulColor li[lang*=cn]').css('background', 'olive'); //屬性中包含cn字符串
$('#ulColor li[lang~=cn]').css('background', 'skyblue'); //屬性中包含cn單詞，用空格隔開
$('#ulColor li[class=cl][name=kaivon]').css('background', 'teal'); //屬性中包含cn單詞，用空格隔開

四、基礎過濾選擇器，冒號前面就是選中的，冒號後面就是排除的條件

$('#olColor li:eq(1)').css('border', '5px solid pink'); //下標爲1的標籤
$('#olColor li:gt(1)').css('border', '5px solid grey'); //大於下標爲1的標籤
$('#olColor li:lt(3)').css('border', '5px solid yellowgreen'); //小於下標爲3的標籤
$('#olColor li:not(#olColor li:eq(2))').css('border', '5px solid darkgreen'); //除了選中的那個標籤，其他的全部選中
$('#olColor li:even').css('border', '5px solid hotpink'); //偶數
$('#olColor li:odd').css('border', '5px solid purple'); //奇數
$('#olColor li:first').css('border', '5px solid olive'); //第一個
$('#olColor li:last').css('border', '5px solid skyblue'); //最後一個
$('#olColor li:lang(en)').css('border', '5px solid teal'); //lang屬性
$('#olColor li:target(tar)').css('border', '5px solid yellow'); //tatget屬性
$(':root').css('border', '2px solid blue'); //根節點
$(':header').css('border', '5px solid darkgreen'); //所有的h標籤

五、子元素過濾器

$('#paragraph p:first-child').css('color', 'pink'); //第一個子元素必需是p標籤
$('#paragraph span:first-of-type').css('color', 'yellowgreen'); //選擇到第1個span標籤
$('#paragraph span:last-child').css('color', 'darkgreen');
$('#paragraph p:last-of-type').css('color', 'hotpink');
$('#paragraph p:nth-child(2)').css('color', 'blue'); //選擇到第2個子元素，並且這個子元素必需是p標籤
$('#paragraph span:nth-of-type(2)').css('color', 'olive');//選擇到第二個span標籤
$('#only p:only-child').css('color', 'skyblue'); //選擇到只有一個子元素的標籤
$('#only-two span:only-of-type').css('font-size', '30px'); //選擇到只有一個span子元素的標籤

六、內容過濾選擇器

$('#content:contains(kaivon)').css('color', 'blue');//選擇內容爲kaivon的標籤
$('div:empty').css({
	width: '100px',
	height: '100px',
	background: 'green'
});//選中所有沒有內容的div標籤
$('#has:has(p)').css('border', '1px solid #000');//判斷是否含有p標籤
$('#title:parent').css('border', '1px solid #f00');

七、表單過濾選擇器

$(':button').css('border', '2px solid #f0f'); //選擇到所有的按鈕
$('#sex input:checkbox').wrap('<span></span>').parent().css('border', '2px solid purpLe');//讓所有的選中的標籤我們加一個span標籤，然後給父級加上css屬性 
$(':checked').wrap('<span></span>').parent().css('border', '2px solid blue');