zoukankan      html  css  js  c++  java
  • jQuery选择器

    1、基本选择器

    1、是什么?

    • 有特定格式的字符串

    2、作用

    • 用来查找特定页面元素

    3、基本选择器

    • #id:id选择器
    • element:元素选择器
    • .class:属性选择器
    • *:任意标签
    • selector1,selector1,selectorN:取多个选择器的并集(组合选择器)
    • selector1selector2selectorN:取多个选择器的交集(相交选择器)
    <div id="div1" class="box">div1(class="box")</div>
    <div id="div2" class="box">div2(class="box")</div>
    <div id="div3">div3</div>
    <span class="box">span(class="box")</span>
    
    <br>
    <ul>
        <li>AAAAA</li>
        <li title="hello">BBBBB(title="hello")</li>
        <li class="box">CCCCC(class="box")</li>
        <li title="hello">DDDDD(title="hello")</li>
    </ul>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript">
        //  1、选择id为div1的元素
        $('#div1').css('background', 'red')
        // 2、选择所有的div元素
        $('div').css('background', 'green')
        // 3、选择所有class属性为box的元素
        $('.box').css('background', 'blue')
        // 4、选择所有的div和span元素
        $('div, span').css('background', 'yellow')
        // 5、选择所有的class属性为box的div元素
        $('div.box').css('background', 'grey')
    </script>
    

    2、层次选择器

    层次选择器:查找子元素,后代元素,兄弟元素的选择器
    1、ancestor descendant
    在给定的祖先元素下匹配所有的后带元素
    2、parent>child
    在给定的父元素下匹配所有的子元素
    3、prev+next
    匹配所有紧接在prev元素后的next元素
    4、prev~siblings
    匹配prev元素后的所有siblings元素

    <ul>
        <li>AAAAA</li>
        <li class="box">CCCCC</li>
        <li title="hello"><span>BBBBB</span></li>
        <li title="hello"><span class="box">DDDDD</span></li>
        <span>EEEEE</span>
    </ul>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript">
        // 1、选中ul下的所有span
        $('ul span').css('background', 'red')
        // 2、选中ul下所有的子元素span
        $('ul>span').css('background', 'blue')
        // 选中class为box的下一个li
        $('.box+li').css('background', 'green')
        // 4、选中ul下的class为bix元素后面的所有兄弟元素
        $('ul .box~*').css('background', 'yellow')
    </script>
    

    3、过滤选择器

    在原有选择器匹配的元素中进一步进行过滤的选择器

    • 基本
    • 内容
    • 可见性
    • 属性
    <div id="div1" class="box">class为box的div1</div>
    <div id="div2" class="box">class为box的div2</div>
    <div id="div3">div3</div>
    <span class="box">class为box的span</span>
    <br>
    <ul>
        <li>AAAAA</li>
        <li title="hello">BBBBB</li>
        <li class="box">CCCCC</li>
        <li title="hello">DDDDD</li>
        <li title="two">BBBBB</li>
        <li style="display: none;">我本来是隐藏的</li>
    </ul>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript">
        // 1、选择第一个div
        $('div:first').css('background', 'red');
        // 2、选择最后一个class为box的元素
        $('.box:last').css('background', 'green');
        // 3、选择所有class属性不为box的div
        $('div:not(.box)').css('background', 'blue');  //没有class属性也可以
        // 4、选择第二个和第三个li元素
        $('li:gt(0):lt(2)').css('background', 'orange');
        // 5、选择内容为BBBBB的li
        $('li:contains("BBBBB")').css('background', 'yellow');
        // 6、选择隐藏的li
        console.log($('li:hidden').length, $('li:hidden')[0]);
        // 7、选择有title属性的li元素;./
        $("li[title]").css('background', 'pink');
        // 8、选择所有属性title为hello的li元素
        $("li[title='hello']").css('background', 'grey');
    </script>
    

    表单选择器

    表单选择器
    1、表单
    2、表单对象属性

    <form>
        用户名:<input type="text"><br>
        密码:<input type="password"><br>
        爱好:
        <input type="checkbox" checked="checked">篮球
        <input type="checkbox" checked="checked">足球
        <input type="checkbox" checked="checked">羽毛球<br>
        性别:
        <input type="radio" name="sex" id="male">男
        <input type="radio" name="sex" id="female">女<br>
        邮箱:<input type="text" name="email" disabled="disabled"><br>
        所在地:
        <select>
            <option value="1">北京</option>
            <option value="2" selected="selected">天津</option>
            <option value="3">河北</option>
        </select><br>
        <input type="submit" value="提交">
    </form>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript">
    // 1、选择不可用文本的输入框
    $(':text:disabled').css('background', 'red');
    // 2、显示选择爱好的个数
    console.log($(':checkbox:checked').length);
    // 3、显示选择城市名称
    $(':submit').click(function () {
        var city = $('select>option:selected').html()
        alert(city)
    })
    </script>
    
  • 相关阅读:
    HDU 5059 Help him
    HDU 5058 So easy
    HDU 5056 Boring count
    HDU 5055 Bob and math problem
    HDU 5054 Alice and Bob
    HDU 5019 Revenge of GCD
    HDU 5018 Revenge of Fibonacci
    HDU 1556 Color the ball
    CodeForces 702D Road to Post Office
    CodeForces 702C Cellular Network
  • 原文地址:https://www.cnblogs.com/Lethons/p/9347028.html
Copyright © 2011-2022 走看看