• 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>
    
  • 相关阅读:
    901Air724UG模块(4G全网通GPRS开发)Air724UG(4G)使用SPI控制CH395Q(以太网模块)实现TCP/IP通信
    02STM32+MN316(NBIOT)基本控制篇(自建MQTT服务器)硬件使用说明
    Docker 清理none镜像 Prune命令
    Leetcode 252. 会议室 253. 会议室II 贪心算法扫描线技巧
    Leetcode 77. 组合(中等)回溯算法
    Leetcode 787. K 站中转内最便宜的航班(中等) 动态规划
    Leetcode 174. 地下城游戏(困难) 动态规划
    Linux arm环境下pip3安装av失败
    Leetcode 134. 加油站(中等) 贪心算法
    Leetcode 698. 划分为k个相等的子集(中等) 回溯算法=集合划分
  • 原文地址:https://www.cnblogs.com/Lethons/p/9347028.html
Copyright © 2020-2023  润新知