jQuery中常见的选择器与过滤器
  在 Javascript 分类下   暂无评论

jQuery中常见的选择器与过滤器

  在 Javascript 分类下   暂无评论

选择器

基本选择器

<body>
    <div id="test1">id test1</div>
    <div class="test2">class test2</div>
    <div class="test2">class test2</div>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
</body>
<script type="text/javascript">
    //id 选择器
    $('#test1').css('background','gray');
    //标签选择器
    $('p').css('background','blue');
    //类选择器
    $('.test2').css('background','green');
    //*
    $('*').css('background','pink');
</script>

层次选择器

<body>
    <p>
        <input type="text">
        <span>1</span>
        <span>2</span>
    </p>
    <p>
        <input type="text">
        <span>3</span>
        <span>4</span>
    </p>
    <p>
        <input type="text">
        <span>5</span>
        <span>6</span>
    </p>
    <div><span>7</span></div>
</body>
<script type="text/javascript">
    //div下的span
    $('div span').css('background','blue')
    //紧挨着的下一个元素,每一个元素之后的1个next元素被选中
    //$('input + span').css('background','gray');
    //紧挨着的所有同辈元素,每一个元素之后的所有同辈元素
    $('input ~ span').css('background','gray');
</script>

属性选择器

<body>
    <p>Email:<input type="text" name="email" /></p>
    <p>密码:<input type="text" name="password" /></p>
    <p>重复密码:<input type="text" name="repassword" /></p>
    <p>学号:<input type="text" name="stunum" /></p>
    <p>学分:<input type="text" name="stuscore" /></p>
    <p>秘密:<input type="password" ></p>
</body>
<script type="text/javascript">
    //type选择
    $('input[type=password]').css('background','gray');
    //name 选择
    $('input[name=email]').css('background','green');
    //name不等于email
    $('input[name!=email]').css('background','red');
    //正则选择
    $('input[name$=password]').css('background','orange');//都用password结尾的
    $('input[name^=stu]').css('background','blue');//开头是stu
    $('input[name*=pass]').css('background','orange');//含有pass
</script>

自定义属性选择器

<p>Email:<input type="text" aa='s' name="email" /></p>
$('input[aa=s]').css('background','green');

过滤器

基础过滤器

<body>
    <ul>
        <li>导航1</li>
        <li>导航2</li>
        <li>导航3</li>
        <li>导航4</li>
        <li>导航5</li>
        <li>导航6</li>
    </ul>
</body>
<script type="text/javascript">
    //第一个
    $('li:first').css('background','gray');
    //最后一个
    $('li:last').css('background','gray');
    //奇数
    $('li:odd').css('background','green');
    //偶数
    $('li:even').css('background','orange');
    //具体第几个 从0开始
    $('li:eq(3)').css('background','purple');
</script>

内容过滤器

<style media="screen">
    p {
        height: 20px;
        border: 1px solid blue;
    }
</style>
<body>
    <table border="1">
        <tr>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
        </tr>
        <tr>
            <td>马云</td>
            <td>男</td>
            <td>26</td>
        </tr>
        <tr>
            <td>奶茶妹</td>
            <td>女</td>
            <td>23</td>
        </tr>
        <tr>
            <td>强东</td>
            <td>男</td>
            <td>24</td>
        </tr>
        <tr>
            <td>金星</td>
            <td></td>
            <td><span>22</span></td>
        </tr>
    </table>
    <p><br /></p>
    <p>a</p>
    <p></p>
</body>
<script type="text/javascript">
    //找td中含有‘女’字的
    $('td:contains(女)').css('background','red');
    //找td为空的
    $('td:empty').css('background','yellow');
    //找出不为空的P标签(P标签下没有内容的)-->找到当爹的标签p
    $('p:parent').css('background','orange');
    //找出td下,含有span标签的-->标签下有标签的
    $('td:has(span)').css('background','blue');
</script>

表单类型过滤器

<body>
    <p><input type="text" /></p>
    <p><input type="password" /></p>
    <p><input type="checkbox" /></p>
    <p><input type="radio" /></p>
</body>
<script type="text/javascript">
    //旧版
    $('input[type=text]').css('background','red');
    //表单类型选择
    $('input:password').css('background','gray');
</script>

可见性过滤器

:hidden

匹配所有不可见元素,如果使用css的visibility属性让元素不显示但是占位,则不属于hidden了
查找display:none的tr元素,$("tr:hidden")

:visible

匹配所有可见元素
查找所有display不为none的元素,$("tr:visible")

<body>
    <input type="button" value="一起分享" onclick="share();" />
    <div style="display:none">我是隐藏内容</div>
    <div>我是显示内容</div>
</body>
<script type="text/javascript">
    function share(){
        //div:hidden找到隐藏的部分
        $('div:hidden').css('display','block')
    }
</script> 

子元素过滤器

<body>
    <div>
        <p>a</p>
        <p>b</p>
    </div>
    <div>
        <p>c</p>
        <p>d</p>
    </div>
    <ul>
        <li><a href="">导航</a></li>
        <li><span>s</span><a href="">导航</a></li>
    </ul>
</body>
<script type="text/javascript">
    //同一层次下,最后一个P标签
    $('p:last-of-type').css('background','gray');
    //匹配li下的独生a标签
    $('li a:only-child').css('background','blue');
</script>
评论已关闭