jquery选择器用法

jquery的基础选择器

选择器的用法其实跟咱们当时讲css的选择器用法类似，只是代码书写的不同

<ul>
    <li id="brother" class="item">路飞学诚1</li> <li >路飞学诚2</li> <li class="item">路飞学诚3</li> <li>路飞学诚4</li> <li class="item">路飞学诚5</li> <li>路飞学诚6</li> <li class="item">路飞学诚7</li> <a href="#">百度一下</a> </ul> <div id="duanzi"> <p>天王盖地虎</p> <p><h1>小鸡炖蘑菇</h1></p> <p>宝塔镇河妖</p> <p>蘑菇放辣椒</p> </div> 

        // 基本选择器
        // 1.id选择器
        $('#brother').css('color','black'); // 2.标签选择器 $('a').css('color','yellow') // 3.类选择器 $('.item').css('background','#FC4708') // 4.通配符选择器 // console.log($('*').html()) console.log($('a').val()) 

层级选择器

    // 后代选择器
        console.log($('div p')) $('div p').css('color','red') // 子代选择器 $('div >p').css('background','green') // 毗邻选择器 匹配 所有紧接在#brother元素后的下一个元素 $('#brother+ li').css('color','yellow') // 兄弟选择器 // 匹配所有#brother之后的所有兄弟姐妹元素 $('#brother~li').css('background','#996633') // :first 获取第一个元素 $('li:first').text('真的吗？') // :last 获取最后一个元素 $('li:last').html('真的吗？') //一个给定索引值的元素 console.log($('p:eq(3)').text()) 

基本过滤选择器

        <ul>
            <li>哈哈哈</li> <li>嘿嘿嘿</li> <li>天王盖地虎</li> <li>小鸡炖蘑菇</li> </ul> 

    //:first  获取第一个元素
        $('li:first').text('真的吗？') //:last 获取最后一个元素 $('li:last').html('我是最后一个元素？') //:odd 匹配所有索引值为奇数的元素，从0开始计数 $('li:odd').css('color','green'); //:even 匹配所有索引值为偶数的元素，从0开始计数 $('li:even').css('color','red') //:eq(index) 获取给定索引值的元素 从0开始计数 $('li:eq(1)').css('font-size','30px') //:gt(index)匹配所有大于给定索引值的元素 $('li:gt(1)').css('font-size','40px') //:lt(index) 匹配所有小于给定索引值的元素 $('li:lt(1)').css('font-size','40px') //一个给定索引值的元素 console.log($('p:eq(3)').text()) 

属性选择器

    <div id="box"> <h2 class="title">属性元素器</h2> <p class="p1">我是一个段落</p> <ul> <li id="li1">分手应该体面</li> <li class="what">分手应该体面</li> <li class="what">分手应该体面</li> <li class="heihei">分手应该体面</li> </ul> <form action="" method="post"> <input name="username" type='text' value="1" checked="checked"></input> <input name="username1111" type='text' value="1"></input> <input name="username2222" type='text' value="1"></input> <input name="username3333" type='text' value="1"></input> <button class="btn-default">按钮1</button> <button class="btn-info">按钮1</button> <button class="btn-success">按钮1</button> <button class="btn-danger">按钮1</button> </form> </div> 

    //属性选择器

        //标签名[属性名] 查找所有含有id属性的该标签名的元素
        $("li[id]").css('color','red') //[attr=value] 匹配给定的属性是某个特定值的元素 $('li[class=what]').css('font-size','30px') //[attr!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素 $('li[class!=what]').css('color','darkgreen') //匹配给定的属性是以某些值开始的元素 $('input[name^=username]').css('background','red') //匹配给定的属性是以某些值结尾的元素 $('input[name$=222]').css('background','yellow') //匹配给定的属性是以包含某些值的元素 $("button[class*='btn']").css('background','#0000FF') 

筛选选择器

        <div id="box"> <p class="p1"> <span>我是第一个span标签</span> <span>我是第二个span标签</span> <span>我是第三个span标签</span> </p> <button>按钮</button> </div> <ul> <li class="list">2</li> <li>3</li> <li>4</li> <li>5</li> </ul> 

    //获取第n个元素 数值从0开始
        $('span').eq(0).css('font-size','30px') //first()获取第一个元素 $('span').first().css('background','red') //last()获取最后一个元素 //.parent() 选择父亲元素 $('span').parent('.p1').css({width:'300px',height:'300px',background:'yellow'}) //.siblings()选择所有的兄弟元素 $('.list').siblings('li').css('color','red') //.find() //查找所有的后代元素 $('div').find('button').css('background','#313131') 

silbings

转载于:https://www.cnblogs.com/fmgao-technology/p/9252231.html