4月3日作业-jquery的常用过滤方法

一、jquery的常用选择方式

    1.$('td').css('background-color','wheat')

    2.$('#title').css('background-color','wheat')

    3.$('.mark').addClass('bg-orange')

    4.$('tr:nth-child(3) ~ *').css('background-color','pink')

二、层级选择器

    1.后代：$('li a').addClass('green')

    2.子元素选择器：$('ul > *').addClasss('green')

    3.相邻吃兄弟选择器：$('li:nth-child(5) + li').addClass('green')

    4.直接选择第一个或则最后一个：$(li:first-child').css();$('li:last').css();

    5.直接命中元素：$('li:nth-child(8)').css()

    6.jquery中元素是从0开始

    7.清除所有元素上已经添加的内联样式style属性：$('*').removeAttr('style')

    8.清除所有元素上的class属性：$('*').removeClass()

    9.选择序号大于某值的元素：$('li:gt(2)').addClass('red')

    10.选择序号小于某值的元素：$('li:lt(7)')

    11.选择偶数结构，看上去是奇数：$('li:even').addClass('red')

    11.选择奇数结构：$('li:odd').addClass()

三、内容过滤器

    1.选择包含指定内容的元素：$('p:contains("春")').addClass()

    2.选择内容为空的元素：$(':empty').addClass()

    3.选择有某个标签的元素：$('p:has("img")').addClass()

    4.选择所有以p为父元素的节点：$('p:parent').addClass('red')

    5.取反过滤器：$(':not(:empty)').css('color','red')

四、表单过滤器

    1.css的选择方法：$('input').css()

    2.jquery的选择方法：$(':input').css，选择<input><textarea><button><select>

    3.css: input = jquery: input:input

    4.选择包含某个类型的元素：$('input[type="password"]').css()

    5.根据表单控件的特征元素来选择元素：$(':file')

    6.直接控制类型选择元素：$(':text').css

    7.只处理表单提交按钮：$('button:submit').css

五、常用的过滤方法（过滤函数）

    1.get()将jquery对象转为DOM对象：$('li').get(1).style.color = 'red'

    2.eq返回指定索引元素，返回的是jquery对象：$('li').eq(2).css('color','red')

    3.first(),last()，无参数：$('li').last().css()

    5.toArray()返回的是DOM数组：var li  = $('li').toArray(); for(var i=0;i<li.length;i++){ li[i].style.color = 'red'}

    6.find():返回所有的后代元素：$('ul').find('li').css()

    7.children()返回所有的直接子元素：$('ul').children('p').css

    8.each(function(){}):　　$('li').each(function(){ $(this).css('background-color','wheat')})

    9.元素遍历：$('*').removeAttr('sytle'); $('li').eq(2).next().css(); $('li').eq(2).netAll().css

    10.add(): $('li').add('p').css('color','red')

    11.slice():从集合中获取到一组连续的元素：$('li').slice(2,5).css()