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、微信运营的品牌整合营销服务，让客户通过网络品牌建立与网络传播提高业绩。