jQuery选择器

126 阅读1分钟

基本过滤选择器:

选取第一个元素 :first

$('li:first').css('background','red')

 选取最后一个元素 :last

$('li:last').css('background','red')

排除指定元素之外的所有元素 :not(selector)

$('li:not(".feiji")').css('background','red') 

选取索引是偶数的所有元素(index从0开始) :even 0也是偶数

 $('li:even').css('background','red')

选取索引是奇数的所有元素(index从0开始) :odd 

 $('li:odd').css('background','red')

选取索引等于index的元素(index从0开始):eq(index)

$('li:eq(3)').css('background','red')

选取索引大于index的元素(index从0开始):gt(index)

$('li:gt(2)').css('background','red')

选取索引小于index的元素(index从0开始)

$('li:lt(4)').css('background','red')

选取所有标题元素,如h1~h6 :header

 $(':header').css('background','red')

选取当前获取焦点的元素 :focus 

$('input').click(function(){

 $('input:focus').css('background','red')

})

可见性过滤选择器:

写一个按钮 使用可见性过滤器 实现 点击 让div 点一下显示

再点隐藏

 $('button').click(function(){

            console.log('隐藏的h1的个数:', $('h1:hidden').length );

            if(  $('h1:hidden').length ){

                $('h1:hidden').show('slow')

            }else{

                $('h1:visible').hide('slow')

            }

        })

选取所有可见的元素 :visible 

console.log( $('div:visible') );

选取所有隐藏的元素 :hidden

 console.log( $('div:hidden') );

特殊符号的转义:

 \\ 来转义 让jq 把id#a当成字符串

console.log( $('#id\\#a') );

 \\ 来转义 让jq 把id\\[2\\]当成字符串

console.log( $('#id\\[2\\]') );

实现开关颜色变化练习:

let count = 1;

        $('button').click(function(){

            console.log(count);

            console.log( $('div').css('background-color') );

            if(count==1){

                $('div').css('background-color','red')

                $('div').show(1000);

                count++

                return;

            }

            if(count==2){

                $('div').css('background-color','yellow')

                count++

                return            }

            if(count==3){

                $('div').hide(1000);

                count=1

            }

        })