[知了堂学习笔记]_JQuery选择器

最新推荐文章于 2018-02-01 15:33:31 发布

「已注销」

最新推荐文章于 2018-02-01 15:33:31 发布

阅读量320

点赞数

分类专栏：基础学习文章标签： jquery

本文链接：https://blog.csdn.net/J_YTL/article/details/78757540

版权

基础学习专栏收录该内容

31 篇文章 0 订阅

订阅专栏

1.基本选择器
a.ID选择器 $(“#ID”)，—><div id="ID"></div>
b.类选择器 $(“.name”)，—><div class="name"></div>
c.标签选择器$(“div”),—><div></div>
d.群组选择器$(“div,#ID,.name”),找更多元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-3.2.1.min.js"></script>

</head>
<body>

   <div id="d01"></div>
   <div></div>
   <div class="d02"></div>

   <script>
       $(function(){
           //ID选择器
           $("#d01").html("<button>按钮01</button>")
           //类选择器
           $(".d02").html("<button>按钮02</button>")
           //标签选择器
           $("div").html("<button>按钮03</button>")
           //群组选择器
           $("#d01,.d02").html("<button>按钮04</button>")
       })
   </script>

</body>
</html>

2.层次选择器
a.直接选择子元素，—>$("div>#d01")
b.选择所有后代子元素,—>$("div #d01")
c.选择直接兄弟元素,—>$("div+#d01")紧挨着下一个兄弟元素
d.选择所有兄弟元素,—>$("div~#d01")向下找它所有兄弟元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-3.2.1.min.js"></script>
</head>
<body>

   <div>
       <input type="text" class="d01">
   </div>
   <div>
       <p>
           <input type="text" class="d01">
       </p>
       <p id="p01">
           <input type="text" class="d01">
       </p>
       <p>
           <input type="text" class="d01">
       </p>
       <p>
           <input type="text" class="d01">
       </p>
   </div>

   <script>
       $(function(){
           //层次选择器，找直接子元素
     /*      $("div>.d01").css("background","#99B4D1")*/
           //层次选择器，找所有的后代子元素
     /*      $("div .d01").css("background","#999999")*/
           //层次选择器，找直接兄弟元素
       /*    $("#p01+p").css("background","#999999")*/
           //层次选择器，找到所以兄弟元素
           $("#p01~p").css("background","#999999")
       })
   </script>

</body>
</html>

3.过滤选择器

这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-3.2.1.min.js"></script>
    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
            border: 1px solid black;
            margin: 10px;
        }
    </style>
</head>
<body>

    <p>
        <button id="b01">$("div:first")</button>
        <button id="b02">$("div:not(.one)")</button>
        <button id="b03">$("div:even")</button>
        <button id="b04">$("div:eq(1)")</button>
        <button id="b05">$("div:animated")</button>
    </p>
    <div></div>
    <div class="one"></div>
    <div style="display: none;" class="two"></div>

    <script>
        $(function(){
            $(".two").show(2000)//显示div
            $("#b01").click(function(){
                $("div:first").css("background","#999999")
            })
            $("#b02").click(function(){
                $("div:not(.one)").css("background","#999999")
            })
            $("#b03").click(function(){
                $("div:even").css("background","#999999")
            })
            $("#b04").click(function(){
                $("div:eq(1)").css("background","#999999")
            })
            $("#b05").click(function(){
                $("div:animated").css("background","#999999")
            })
        })
    </script>

</body>
</html>

4.内容过滤器
这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-3.2.1.min.js"></script>
    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
            border: 1px solid black;
            margin: 10px;
        }
    </style>
</head>
<body>

<p>
    <button id="b01">$("div:contains")</button>
    <button id="b02">$("div:empty")</button>
    <button id="b03">$("div:has")</button>
    <button id="b04">$("div:parent")</button>
</p>
<div></div>
<div>sdffgk,fgdhgr</div>
<div><p></p></div>

<script>
    $(function(){
        $("#b01").click(function(){
            $("div:contains('sdf')").css("background","#999999");
        })
        $("#b02").click(function(){
            $("div:empty").css("background","#999999")
        })
        $("#b03").click(function(){
            $("div:has(p)").css("background","#999999")
        })
        $("#b04").click(function(){
            $("div:parent").css("background","#999999")
        })
    })
</script>

</body>
</html>

5.表单选择器

这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-3.2.1.min.js"></script>
</head>
<body>

<p>
    <button id="b01">$(":text")</button>
    <button id="b02">$(":checkbox")</button>
    <button id="b03">$(":radio")</button>
    <button id="b04">$(":select")</button>
</p>

<form id="f01">
    <input type="text">
    <p>
        <input type="checkbox">JQuery
        <input type="checkbox">Java
    </p>
    <p>
        <input type="radio" name="r1">JQuery
        <input type="radio" name="r1">Java
    </p>
    <select>
        <option>JQuery</option>
        <option>Java</option>
    </select>
</form>

<script>

    $(function(){
        $("#b01").click(function(){
            $(":text").css("background","#999999")
        })
        $("#b02").click(function(){
            $(":checkbox").attr("checked",true)
        })
        $("#b03").click(function(){
            $(":radio").each(function(i){
                console.log(i+"==="+this.checked)
            })
        })
    })

</script>

</body>
</html>

「已注销」

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[知了堂学习笔记]_JQuery选择器

请关注“知了堂学习社区”，地址：http://www.zhiliaotang.com/portal.php1.基本选择器 a.ID选择器 $(“#ID”)，—><div id="ID"></div> b.类选择器 $(“.name”)，—><div class="name"></div> c.标签选择器$(“div”),—><div></div> d.群组选择器$(“
复制链接

扫一扫