码迷,mamicode.com
首页 > Web开发 > 详细

jQuery 十三中选择器总结

时间:2017-08-29 18:07:00      阅读:201      评论:0      收藏:0      [点我收藏+]

标签:table   overflow   总结   中间   匹配   元素   jquery   class选择器   script   

<body style="overflow: scroll;">
    <h1>我的测试</h1>
    <div id="111">
        <p class="first">第一个p标签</p>
        <p class="second">
            第二个p标签
            <span>span拼接</span>
        </p>
        <p class="three">第三个p标签</p>
        <p class="four">第四个p标签</p>
    </div>
    <div id="222">
        <div id="no1"><a href="">第一个div</a></div>
        <div id="no2">第二个div</div>
        <div id="no3">第三个div</div>
        <div id="no4">第四个div</div>
    </div>
    <div id="333">
        <table cellspacing="1" cellpadding="5">
            <tr>
                <td>11</td>
                <td>11</td>
            </tr>
            <tr>
                <td>22</td>
                <td>22</td>
            </tr>
            <tr>
                <td>33</td>
                <td>33</td>
            </tr>
            <tr>
                <td>44</td>
                <td>44</td>
            </tr>
        </table>
    </div>
</body>

js:

<script type="text/javascript">
/*
 jquery 14种标签选择器
 */
$(function(){
    //一: id选择器:为标签元素设置一个id,并用#id去空值元素
    //$(‘#no2‘).css(‘color‘,‘blue‘);
    //二: class选择器 
    //$(‘.four‘).css(‘color‘,‘blue‘);
    //三:标签选择器 : 多种标签可混合中间以“,”隔开
    //$(‘p,div‘).css(‘color‘,‘red‘);
    //四:任意组合选择:
    //$(‘p.first,div#no2‘).css(‘color‘,‘red‘);
    //$(‘.second,#no3‘).css(‘color‘,‘red‘);
    //五:指定父元素下所有子元素
    //$(‘#111 span‘).css(‘color‘,‘red‘);
    //六:prev + next : 匹配所有紧接在 prev 元素后的 next 元素:只能是两个紧接的元素可用。中间有隔开都无效。
    //$(‘h1+div‘).css(‘color‘,‘red‘);
    //七:prev ~ siblings : 匹配 prev 元素之后的所有 siblings 同辈元素
    //$(‘h1~div‘).css(‘color‘,‘red‘);
    //八:获取标签第一个元素
    //$("p:first").css(‘color‘,‘red‘);
    //九:last : 获取最后个元素
    //$("div:last").css(‘color‘,‘red‘);
    //十:even : 匹配所有索引值为偶数的元素,从 0 开始计数
    //$("tr:even").css(‘color‘,‘red‘);
    //十一:odd : 匹配所有索引值为奇数的元素,从 0 开始计数
    //$("tr:odd").css(‘color‘,‘blue‘);
    //十二:除去给定选择器的所有元素
    //$("p:not(.three)").css(‘color‘,‘red‘);
    //十三:gt(index) : 匹配所有大于\等于、小于给定索引值的元素
    /*
    $("p:gt(1)").css(‘color‘,‘red‘);
    $("p:eq(1)").css(‘color‘,‘green‘);
    $("p:lt(1)").css(‘color‘,‘blue‘);
    */
    //十四:匹配所有:*
    $("*").css(‘color‘,‘blue‘);
    
});
</script>

 

jQuery 十三中选择器总结

标签:table   overflow   总结   中间   匹配   元素   jquery   class选择器   script   

原文地址:http://www.cnblogs.com/ckxlovejava/p/7449296.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!