1.在jQuery庫中，$ 就是jQuery的一個簡寫形式
2.基本選擇器
$('.lis').css('background','red').css('font-size','40px');
$('.lis').css({'background':'red','font-size':'60px'});
$('p,div,li.lis').css('background','green');
3.層次選擇器
$('p,div,li.lis').css('background','green');
$('div span').css('background','red');
$('div>span').css('background','green');
$('div p+p').css('background','yellow');
$('div p~p').css('background','yellow');
$('p:first').css('background','blue');
$('li:last').css('background','blue');
4.基本過濾選擇器
$('p:first').css('background','blue');
$('li:last').css('background','blue');
$('ul li:not(.lis)').css('background','green');
下標(biāo)從0開始
$('ul li:even').css('background','yellow'); 偶數(shù)
$('ul li:odd').css('background','yellow'); 奇數(shù)
$('ul li:eq(1)').css('background','orange');
$('ul li:gt(3)').css('background','yellow'); >3
$('ul li:lt(3)').css('background','yellow'); <3
5.內(nèi)容過濾選擇器
$('div span:contains(這是span2)').css('font-size','50px');
$('div>span:contains(這是span2)').css('font-size','50px');
$('div:empty').css('background','pink');
$('div:has(p)').css('background','black');
$('div:parent').css('background','red');
6.屬性過濾選擇器
$('ul li[class]').css('background','red');
$('ul li[class=lis]').css('background','red');
$('ul li[class!=lis]').css('background','green');
$('ul li[class^=l]').css('background','green');
$('ul li[class$=1]').css('background','green');
$('input[type=submit]').css('background','orange');
$('input[type*=s]').css('background','orange');
$('div[id][class=box][width]').css('background','black');
7.子元素過濾選擇器
下標(biāo)從1開始
$('.box p:nth-child(1)').css('background','green');
$('.box p:eq(0)').css('background','green');
$('p:first').css('background','green');
$('div:first-child').css('background','yellow');
$('div:last-child').css('background','yellow');
$('div span:only-child').css('background','pink');
遠近互聯(lián)前端小華整理發(fā)布，希望能對學(xué)習(xí)技術(shù)的你有所幫助
遠近互聯(lián)專業(yè)提供網(wǎng)站建設(shè)、APP開發(fā)、網(wǎng)站優(yōu)化、外貿(mào)網(wǎng)站SEO、微信運營的品牌整合營銷服務(wù)，讓客戶通過網(wǎng)絡(luò)品牌建立與網(wǎng)絡(luò)傳播提高業(yè)績。
