jQuery-筛选

Posted 2021-12-01 yanghs

jQuery-筛选

1.过滤

在jQuery对象中元素对象数组中过滤出一部分元素

1).first()

2).last()

3.eq(index|-index)

4.filter(selector)

5.not(selector)

6.has(selector)

        var $lis = $(‘ul>li‘)
        //1.ul下li标签第一个
        $lis.first().css(‘background‘,‘red‘)//jQuery对象
        $lis[0].style.background = ‘red‘//dom元素

        //2.ul下li标签的最后一个
        $lis.last().css(‘background‘,‘red‘)

        //3.ul下li标签的第二个
        $lis.eq(1).css(‘background‘,‘red‘)

        //4.ul下li标签中title属性为hello的
        $lis.filter(‘[title=hello]‘).css(‘background‘,‘red‘)

        //5,ul下li标签中title属性不为hello的
        $lis.not(‘[title=hello]‘).css(‘background‘,‘red‘)

        //ul下li标签中title属性不为hello的且含有title属性
        $lis.filter(‘[title!=hello]‘).filter(‘[title]‘).css(‘background‘,‘red‘)

        //6.ul下li标签中有span子标签的
        $lis.has(‘span‘).css(‘background‘,‘red‘)

　　

2.查找

1).children():子标签中找

2).find():后代标签中找

3).parent():父标签

4).prevAll():前面所有的兄弟标签

5).nextAll():后面所有的兄弟标签

6).siblings():前后所有的兄弟标签

 $ul = $(‘ul‘)
        //1.ul标签的第二个span子标签
        $ul.children(‘span:eq(1)‘).css(‘background‘,‘red‘)
        //2.ul标签的第二个span后代标签
        $ul.find(‘span:eq(1)‘).css(‘background‘,‘red‘)
        //3.ul标签的父标签
        $ul.parent().css(‘background‘,‘red‘)
        //4.id为cc的li标签的前面的所有li标签
        var $li = $(‘#cc‘)
        $li.prevAll(‘li‘).css(‘background‘,‘red‘)
        //5.id为cc的li标签的所有兄弟li标签
        $li.siblings(‘li‘).css(‘background‘,‘red‘)