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');
下標從0開始
$('ul li:even').css('background','yellow'); 偶數
$('ul li:odd').css('background','yellow'); 奇數
$('ul li:eq(1)').css('background','orange');
$('ul li:gt(3)').css('background','yellow'); >3
$('ul li:lt(3)').css('background','yellow'); <3
5.內容過濾選擇器
$('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.子元素過濾選擇器
下標從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');
遠近互聯前端小華整理發布，希望能對學習技術的你有所幫助
遠近互聯專業提供網站建設、APP開發、網站優化、外貿網站SEO、微信運營的品牌整合營銷服務，讓客戶通過網絡品牌建立與網絡傳播提高業績。
