jQuery--选择器--汇总

来源：互联网发布：消防四知四会四个能力编辑：程序博客网时间：2024/05/29 05:52

1）基本选择器：

//语法                类型          返回值    $("#ID");      //id选择器     单个元素        $("标签");   //标签选择器     元素集合    $(".类型");  //类选择器      元素集合    $("*");        //全局选择器     集合元素

2）层次选择器：

//语法                类型          返回值后代选择器   $("#menu span");   //选取#span下所有的<span>元素               元素集合        //例如:$("menuspan"); 选取#menu下的所有元素<span>子选择器        $("parent>child");     //选取parent元素下的child子元素集合   元素集合     // 例如：$("menu>span"); 选取#menu下的子元素<span>相邻元素选择器 $("prev+next");        //选取紧邻prev元素之后的next元素      元素集合     // 例如:$("h2+dl"); 选取紧邻<h2>元素之后的同辈元素<dl>   不包括<h2>同辈元素选择器 $("prev~sibings");   //选取prev元素之后的所有siblings（同辈元素）  元素集合      //例如:$("h2~dl");  选取<h2>元素之后所有的同辈元素<dl>。  不包括<h2>

3）属性选择器

     //语法              描述                                     返回值    [attribute]     //选取包含指定属性的元素                       元素集合        $("[href]")选取含有  href  属性的元素                   [attribute==value]  //选取等于指定属性是某个特定值的元素     元素集合                $("[href=‘#’]")选取含有href属性值为 “#” 的元素    [attribute!=value]  //选取不等于指定属性是某个待定值的元素        元素集合            $("[href！=‘#’]")选取href属性值不为  “#”  的元素    [attribute^=value]  //选取指定属性是以某些特定值开始的元素        元素集合            $("[href^=‘en’]")选取href属性值以  "en"  开头的元素    [attribute$=value] //选取指定属性是以某些特定值结尾的元素        元素集合            $("[href$=‘jpg’]")选取href属性值以  "jpg"  开头的元素    [attribute*=value]  //选取指定属性值包含某些值的元素           元素集合            $("[href*=‘txt’]")选取href属性值中含有   "txt"  的元素

4）基本过滤选择器

    :first      选取  第一个    元素   $("li:first")选取所有<li>元素中第一个<li>元素    :last       选取  最后一个  元素    $("li:last")选取所有<li>元素中最后一个<li>元素    :not(selector)  选取去除所有与给定选择器匹配的元素   $("li:not(three)")选取class不是three的元素    :even       选取索引是  偶数  的所有元素（index从0开始） $("li:even")选取索引是 偶数 的所有<li>元素    :odd        选取索引是  奇数  的所有元素（index从0开始） $("li:even")选取索引是 奇数 的所有<li>元素    :eq(index)  选取索引 等于 index 的元素（index从0开始）    $("li:eq(1)")选取索引 等于 1 的<li>元素    :gt(index)  选取索引 大于 index 的元素（index从0开始）    $("li:gt(1)")选取索引 大于 1 的<li>元素                                       （注：大于1，不包括1）    :lt(index)  选取索引 小于 index 的元素（index从0开始）    $("li:lt(1)")选取索引 小于 1 的<li>元素                                        （注：小于1，不包括1）    :header     选取所有  标题  元素        $(":header")选取网页中所有标题元素    :focus      选取当前获取焦点的元素     $(":focus")选取当前获取焦点的元素    :animated   选取所有动画元素            $(":ainmated")选取当前所有动画的元素    //只有，  :first   :last  返回的是单个元素，其他过滤器，返回的都是集合元素

5）可见性过滤选择器

//语法              描述            返回值          例子:visible    选取所有可见的元素   集合元素        $(":visible")选取所有可见的元素:hidden     选取所有隐藏的元素   集合元素        $(":hidden")选取所有隐藏的元素

代码篇

层次选择器–代码

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>(老师) 层次选择器</title>    <script src="../../jQuery数据库/jquery-1.12.4.min.js"></script>    <script>        $(function(){            //后代选择器           $("body p").css("color","red");            //子选择器            $("body>p").css("color","blue");            //相邻选择器(.pp后面同辈元素)     不包括pp            $(".p1+ul").css("background-color","pink");            //pp后面的所有同辈元素      不包括pp            $(".p1~p").css("font-size","25px");        });    </script></head><body>    <p class="pp">这是第一个P标签</p>    <ul>        <li>这是第一个li标签</li>        <p>这是第一个li标签中的P标签</p>    </ul>    <p>这是第二个P标签</p>    <ul>        <li>这是第二个li标签</li>        <p>这是第二个li标签中的P标签</p>    </ul><p>这是最后一个P标签</p></body></html>

属性选择器 –代码

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>（老师）属性选择器</title>    <script src="../../jQuery数据库/jquery-1.12.4.min.js"></script>    <script>        $(function(){            //包含  id  属性的  div          // $("div[id]").css("background-color","blue");            //包含  class  属性 并且值 等于 one 的div         //  $("div[class=one]").css("background-color","pink");            //包含  class  属性 并且值 不等于 one 的div           // $("div[class!=one]").css("background-color","pink");            //包含  class  属性 并且值 以 on 开头的div           // $("div[class^=on]").css("background-color","gray");            //包含  class  属性 并且值 以  n  结尾的div           $("div[class$=n]").css("background-color","gray");            //包含  class  属性 并且值含有  o  的div            //$("div[title*=h]").css("background-color","gray");        });    </script>    <style type="text/css">        .one{            width: 300px;            height: 300px;            border: solid gray;            float: left;            margin-left:50px ;        }        .on{            width: 200px;            height: 200px;            border: solid red;        }    </style></head><body>    <div class="one" id="one">        第一个div        <div class="on">            第一个div里面的div        </div>    </div>    <div class="one" id="two">        第二个div        <div class="on" alt="yy">            第二个div里面的div        </div>    </div>    <div class="one" id="three">        第三个div        <div class="on" title="hr">            第三个div里面的div        </div>    </div></body></html>

过滤选择器–代码

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>过滤选择器</title></head><script src="../../jQuery数据库/jquery-3.2.1.min.js" type="text/javascript"></script><script type="text/javascript">$(document).ready(function(){    //标题   $(".contain :header ").css("background-color","blue");    //第一个标记    $(".contain li:first").css("color","gray");    //最后一个标记    $(".contain li:last").css("color","gray");    //选取 class 不是one的元素   // $(".contain li:not(.one)").css("font-size","20px");    //奇数   :odd    $(".contain li:odd").css("background-color","#cccccc");    //偶数   :even    $(".contain li:even").css("background-color","#f0fff0");    //给前两个li 设置字体颜色  lt(X)  X小于本身,      注意 下标从 0开始  选取索引index  小于2的<li>元素,但是不包括2    $(".contain li:lt(2)").css("color","blue");    //给大于两个 li 字体颜色 :gt(2)  index>2  X不包含本身  选取索引index  大于2的<li>元素,但是不包括2    $(".contain li:gt(2)").css("color","red");    //给等于 li 字体设置样式   :eq(X)  包含本身  选取索引index  等于2的<li>元素，包括本身    $(".contain li:eq(2)").css("font-family","宋体");});</script><style type="text/css">    ul{        padding: 0px;        padding-left: 5px;    }    *{        padding: 0px;        margin: 0px auto;    }    li{        list-style: none;        line-height: 40px;        border-bottom: 1px dotted #ccc;    }    .contain{        border: 1px solid blue;        height: 300px;        width: 300px;        font-size: 12px;    }</style><body><div class="contain">    <h2>祝福冬奥</h2>    <ul>        <li class="one">贝克汉姆：衷心希望北京能够申办成功</li>        <li>姚明：北京审冬奥是个非常棒的机会！加油</li>        <li>张虹：北京办冬奥，大家的热情定超乎想象</li>        <li>肖恩怀特：我爱北京，支持北京申办冬奥会</li>        <li>赵宏博：北京申办冬奥会再合适不过了！</li>        <li>你喜欢哪些冬季运动项目？（点击进入调查页）</li>    </ul></div></body></html>

可见性选择器

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <script src="../../jQuery数据库/jquery-3.2.1.min.js" type="text/javascript"></script>    <script>        $(document).ready(function(){            //鼠标单击 显示           $("#show").click(function(){               //选取所有隐藏的元素              $("p:hidden").show()           });            //鼠标点击  隐藏            $("#hide").click(function(){                //选取所有可见的元素                $("p:visible").hide();            })        });    </script>    <style type="text/css">        #txt-show{        display: none;        }    </style></head><body><p id="txt-hiden">点击隐藏</p><p id="txt-show">点击显示</p><input type="button" value="点击,显示"id="show"/><input type="button" value="点击,隐藏"id="hide"/></body></html>

阅读全文

0 0