jQuery选择器总结

最新推荐文章于 2024-11-02 19:19:35 发布
前端老码农
最新推荐文章于 2024-11-02 19:19:35 发布
阅读量100
点赞数
分类专栏：前端文章标签： javascript
原文链接：https://www.mk2048.com/blog/blog.php?id=hh1bi0ij2jaa&title=jQuery%E9%80%89%E6%8B%A9%E5%99%A8%E6%80%BB%E7%BB%93
版权
前端专栏收录该内容
2065 篇文章 12 订阅
订阅专栏
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery选择器</title>
    <link href="./public/css/bootstrap.min.css" rel="stylesheet">
    <script src="./jquery-1.8.3.min.js "></script>
    <!--[if lt IE 9]>
    <script src="./public/js/html5shiv.min.js"></script>
    <script src="./public/js/respond.min.js"></script>
    <![endif]-->
    <style>
        img {width: 200px;}
        p {display: inline-block;font-size: 15px;margin-left: 300px;}
    </style>
    <script>
    $(function() {
        //基本选择器
            // 通配符---->匹配页面所有的元素
            $('*').css('border','4px solid #cea');
            // ID选择器---->匹配指定ID名称的图片
            $('#first').css('border','4px solid #f00');
            //class选择器---->匹配指定class名的图片
            $('.hello').css('border','4px solid #f00');
            // 标签选择器---->匹配指定标签的图片
            $('p').css('border','4px solid #000');
            //组合选择器---->匹配tr下所有的th
            $('tr,th').css('border','4px solid #0ff');

        // 层级选择器
            // 匹配class row下的所有a标签
            $('.row a').css('border','4px solid #0ff');
            //匹配a下的所有子元素img
            $('.row a>img').css('border','4px solid #f0f');
            // 匹配img下b元素后紧挨着的下一个b元素
            $('img b').css('border','4px solid #ff0');
            // 匹配img下紧邻span的所有同辈元素
            $('img~span').css('border','4px solid #f90');

        // 过滤选择器
            // 匹配list下td元素列表中第一个td元素
            $('#list td:first').css('border','5px solid #f00');
            // 匹配list下td元素列表中最后一个td元素
            $('#list td:last').css('border','5px solid #f0f');
            // 匹配list下td元素列表中指定下标的td元素,即第二个
            $('#list td:eq(1)').css('border','5px solid #ff0');
            // 匹配list下td元素列表中所有下标小于2的td
             $('#list td:lt(2)').css('background','#cae');
             // 匹配list下td元素列表中所有下标大于2的td
             $('#list td:gt(2)').css('background','#cea');
             // 匹配list2下td元素列表中所有下标为偶数的td
             $('#list2 td:even').css('border','5px solid #f70');
             // 匹配list2下td元素列表中所有下标为奇数的td
             $('#list2 td:odd').css('border','5px solid #cae');
             // 匹配页面所有的h标签
             $(':header').css('border','5px solid #f90');
             // 排除list3下指定选择器选择的td元素
             $('#list3:not(td)').css('background','#ff0');

        // 内容选择器
            //匹配p元素标签列表下文本内容有相思的p元素
            $('p:contains("相思")').css('background','#f00');
            //匹配lists下li元素标签列表下class为item的元素的元素
             $("#lists li:has('.item')").css('border','5px solid #f80');
            // 匹配lists下含有子元素 或 文本的元素的li元素
            $("#lists li:parent").css('background','#ff0');
            // 匹配lists下不含有子元素 或 文本的元素的li元素
            $("#lists li:empty").css('background','#f00');

        // 属性选择器
            // 匹配整个页面含有alt属性的元素
             $("[alt]").css('opacity','0.5');
             // 匹配整个页面width属性值为200的元素
            $("[width=200]").css('box-shadow','10px 10px 20px #ccc');
             // 匹配整个页面img的width属性值不为200的img元素
            $("img[width!=200]").css('box-shadow','10px 10px 20px #cae');
            // 匹配整个页面img的title属性以p开头的img元素
            $("img[title^='p']").css('border','2px solid #2D3');
            // 匹配整个页面img的title以1结尾的img元素
            $("img[title$='1']").css('border','20px solid #246da2');
            // 匹配整个页面img的title包含i的img元素
            $("img[title*='i']").css('border','15px solid blue');
            // 匹配整个页面img的width为300,title以p开头并包含i且alt为t3的img元素
            $("img[width=300][title*=i][alt=t3][title^=p]").css('border','13px solid #f00');

        // 子选择器
            //匹配lists下所有ul下li元素的第2个li
            $("#lists li:nth-child(2)").css('background','blue');
            //匹配lists下所有ul下li元素的第1个li,
            $("#lists li:first-child").css('background','pink');
             //匹配lists下所有ul下li元素的最后一个li,
            $("#lists li:last-child").css('background','grey');
            //匹配lists下所有ul下li元素只有唯一个子元素的li
            $("#lists li:only-child").css('background','#cae');

        // 表单选择器
            //匹配页面所有的表单元素
            console.table($(":input"));
            //匹配所有的单行文本框
            console.log($(":text"));
            // 匹配所有密码框
            console.log($(":password"));
            // 匹配所有单选按钮
            console.table($(":radio"))
            // 匹配所有复选框
            console.table($(":checkbox"))
            // 匹配所有提交按钮
            console.log($(":submit"));
            //匹配所有图像域
            console.log($(":image"));
            // 匹配所有重置按钮
            console.log($(":reset"));
            // 匹配所有按钮
            console.log($(":button"));
            // 匹配所有文件域
            console.log($(":file"));

        //表单对象选择器
            // 匹配所有可用元素
            console.log($("input:enabled"));
            // 匹配所有不可用元素
            console.log($("input:disabled"));
            // 匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)
            console.log($("input:checked"));
            //匹配所有选中的option元素
            console.log($("select option:selected"));




    })
    </script>
</head>

<body>
    <h1>你好，jQuery！</h1>
    <hr>
    <form>
    <input type="button" value="Input Button"/>
    <input type="checkbox" checked="checked" />

    <input type="file" />
    <input type="hidden" />
    <input type="image" />

    <input type="password" />
    <input type="radio" checked="checked" />
    <input type="reset" />

    <input type="submit" disabled="disabled" />
    <input type="text" />
    <select>
        <option selected="selected">Option</option>
        <option >Option</option>
    </select>

    <textarea></textarea>
    <button>Button</button>

</form>
    <hr>
    <div class="row">
        <div id="first" class="col-xs-6 col-md-2 ">
            <a href="#" class="thumbnail">
                <img src="./imgs/1.jpg" width="200" alt="t2" title="c1">
                <span class="text-info">我是一段长长长长长长长长长长长的文字</span>
            </a>
        </div>
        <div class="col-xs-6 col-md-2">
            <a href="#" class="thumbnail">
                <img src="./imgs/1.jpg"  width="300" alt="t3" title="pic3">
                <span class="text-info">我是一段长长长长长长长长长长长的文字</span>
            </a>
        </div>
        <div class="col-xs-6 col-md-2">
            <a href="#" class="thumbnail">
                <img src="./imgs/1.jpg" alt="t4" title="ic1">
                <i class="text-info">我是一段长长长长长长长长长长长的文字</i>
            </a>
        </div>
        <div class="col-xs-6 col-md-2">
            <a href="#" class="thumbnail">
                <img src="./imgs/1.jpg" title="ic5">
                <span class="text-info">我是一段长长长长长长长长长长长的文字</span>
            </a>
        </div>
        <div class="col-xs-6 col-md-2">
            <a href="#" class="thumbnail">
                <img src="./imgs/1.jpg" alt="t6" title="ic6">
                <b class="text-info">我是一段长长长长长长长长长长长的文字</b>
            </a>
        </div>
        <div class="col-xs-6 col-md-2">
            <a href="#" class="thumbnail">
                <img src="./imgs/1.jpg"  title="i7">
                <b class="text-info">我是一段长长长长长长长长长长长的文字</b>
            </a>
        </div>
        <div class="col-xs-6 col-md-2">
            <a href="#" class="thumbnail">
                <img src="./imgs/1.jpg" alt="t8" title="i8">
                <b class="text-info">我是一段长长长长长长长长长长长的文字</b>
            </a>
        </div>
        <div class="col-xs-6 col-md-2">
            <a href="#" class="thumbnail">
                <img src="./imgs/1.jpg"  title="pc9">
                <span class="text-info">我是一段长长长长长长长长长长长的文字</span>
            </a>
        </div>
        <div class="col-xs-6 col-md-2 hello">
            <a href="#" class="thumbnail">
                <img src="./imgs/1.jpg" alt="t10" title="pic10">
                <em class="text-info">我是一段长长长长长长长长长长长的文字</em>
            </a>
        </div>
        <div class="col-xs-6 col-md-2 ">
            <a href="#" class="thumbnail">
                <img src="./imgs/1.jpg" alt="t11" title="pic11">
                <span class="text-info">我是一段长长长长长长长长长长长的文字</span>
            </a>
        </div>
        <div class="col-xs-6 col-md-2 hello">
            <a href="#" class="thumbnail">
                <img src="./imgs/1.jpg"  title="ic12">
                <b class="text-info">我是一段长长长长长长长长长长长的文字</b>
            </a>
        </div>
        <div class="col-xs-6 col-md-2">
            <a href="#" class="thumbnail">
                <img src="./imgs/1.jpg" alt="t13" title="ic13">
                <b class="text-info">我是一段长长长长长长长长长长长的文字</b>
            </a>
        </div>
    </div>
    <hr>
    <br><br><br>
    <p class="text-primary">入骨相思知不知</p>
    <p class="text-success">月落乌啼霜满天</p>
    <p class="text-info">江枫渔火对愁眠</p>
    <p class="text-success">姑苏城外寒山寺</p>
    <p class="text-danger">夜半钟声到客船</p>
    <p class="text-muted">玲珑骰子安红豆</p>
    <hr>
    <ul id="lists">
        <li>12312312</li>
        <li></li>
        <li>
            1231231231
            <ul>
                <li>1231231231</li>
                <li>1231231233</li>
                <li>1231231231</li>
                <p>2312312</p>
                <li class="item">1231231231</li>
                <li>213231231231</li>
                <li>123123123123</li>
            </ul>
        </li>
        <li>123123123123</li>
        <li class="item">1231231231</li>
        <li>123123123123</li>
        <ul>
            <li>孤独</li>
        </ul>
    </ul>
    <br><br><br>
    <hr>
    <table class="table table-bordered text-center">
        <tr class="active">
            <th class="love">愿你三冬暖</th>
            <th>愿你三冬暖</th>
            <th>愿你三冬暖</th>
            <th>愿你三冬暖</th>
        </tr>
        <tr class="success" id="list">
            <td>愿你春不寒</td>
            <td>愿你春不寒</td>
            <td>愿你春不寒</td>
            <td>愿你春不寒</td>
        </tr>
        <tr class="warning" id="list2">
            <td class="love">愿你秋不凉</td>
            <td>愿你秋不凉</td>
            <td>愿<h5>你秋</h5>不凉</td>
            <td>愿你秋不凉</td>
        </tr>
        <tr id="list3">
            <th class="love">愿你三冬暖</th>
            <th>愿你三冬暖</th>
            <th>愿你三冬暖</th>
            <th>愿你三冬暖</th>
        </tr>
        <tr class="danger">
            <td>愿你夏无眠</td>
            <td>愿你夏无眠</td>
            <td>愿你夏无眠</td>
            <td>愿你夏无眠</td>
        </tr>
        <tr class="info">
            <td>如春日之风</td>
            <td>如春日之风</td>
            <td>如春日之风</td>
            <td>如春日之风</td>
        </tr>
        <tr class="active">
            <td>如夏日炎炎</td>
            <td>如夏日炎炎</td>
            <td>如夏日炎炎</td>
            <td>如夏日炎炎</td>
        </tr>
        <tr class="success">
            <td class="love">如秋日果香</td>
            <td>如秋日果香</td>
            <td>如秋日果香</td>
            <td>如秋日果香</td>
        </tr>
        <tr c class="warning">
            <td>如冬日暖阳</td>
            <td>如冬日暖阳</td>
            <td>如冬日暖阳</td>
            <td>如冬日暖阳</td>
        </tr>
        <tr class="danger ">
            <td>如世间所有</td>
            <td>如世间所有</td>
            <td>如世间所有</td>
            <td>如世间所有</td>
        </tr>
        <tr class="info ">
            <td>所有的一半</td>
            <td class="love">所有的一半</td>
            <td>所有的一半</td>
            <td>所有的一半</td>
        </tr>
        <tr class="active ">
            <td>所以才离首</td>
            <td>所以才离首</td>
            <td>所以才离首</td>
            <td>所以才离首</td>
        </tr>
    </table>
    <script src="./public/js/jquery.min.js "></script>
    <script src="./public/js/bootstrap.min.js "></script>
</body>

</html>