jQuery的语法

73 阅读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

可见性过滤选择器

hide()

show()

排他

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <script src="./jquery-1.12.4.js"></script>
    <script>
        $('li').click(function (){
            $('li').css('background','');
            $(this).css('background','red');
        })    
        // console.log( $('ul').css('color') );
        // let a = window.getComputedStyle(document.getElementsByTagName('ul')[0],null).color;
        // console.log(a);
        
        // 原生js实现排他
        // let lis = document.getElementsByTagName('li')
        // for(let i=0;i<lis.length;i++){
        //     lis[i].onclick = function(){
        //         for(let j=0;j<lis.length;j++){
        //             lis[j].style.background = ''
        //         }
        //         console.log(i);
        //         lis[i].style.background = 'red'
        //     }
        // }
    </script>
</body>