【知了堂学习笔记】_jQuery基础知识之选择器（一）

于 2017-12-08 17:50:57 发布
阅读量471 收藏
点赞数
分类专栏： jquery 文章标签： jquery 选择器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/TANGLHUI/article/details/78754203
版权

请关注“知了堂学习社区”，地址：http://www.zhiliaotang.com/portal.php

1.jQuery是什么

  • jQuery是一个JavaScriptku
  • JQuery极大简化了JavaScript操作
  • 兼容不同浏览器下的JavaScript语法问题

2.选择器

  • 基本选择器
    • ID选择器：$(“#ID”)，为了找到<div id="d01"></div>
    • 类选择器：$(“.name”),为了找到<div class="d01"></div>
    • 标签选择器$(“div”)，为了找到<div ></div>
    • 群组选择器:$(“div,#ID,.name”)，帮你找到多个元素
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script src="../jquery-2.1.0.js"></script>

    <body>
        <div id="d01"></div>
        <div></div>
        <div class="d02"></div>
    </body>
</html>
<script>
    $(function(){
        //id选择器
        $("#d01").html("<button>按钮01</button>");//HTML函数和innerHTML类似

        //类选择器
        $(".d02").html("<button>按钮02</button>");

        //标签选择器
        $("div").html("<button>按钮03</button>");

        //群组选择器
        $("#d01,.d02").html("<button>按钮04</button>");

        //标签选择器 群组选择器  id选择器与类选择器
    })
</script>
  • 层次选择器
    • 选择直接子元素$(“div>#d01”)
    • 选择所有后代子元素$(“div#d01”)
    • 选择直接兄弟元素$(“div+#d01”)
    • 选择所有兄弟元素$(“div~#d01”)
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../jquery-2.1.0.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>
    </body>
</html>
<script>

    $(function(){
        //直接后代
        $("div >.d01").css("background","#353535");
        //所有后代子元素
//      $("div .d01").css("background","antiquewhite");

//      //直接兄弟元素
        $("#p01 + p").css("background","brown");
//      //所有的兄弟元素
//      $("#p01~p").css("background","darkcyan");
    })
</script>
  • 过滤选择器
    • $(“div:first”)选取所有<div>元素中第一个<div>元素
    • $(“div:last”)选取所有的<div>元素中最后一个<div>元素
    • $(“div:not(.one)”)选取class不是one的<div>元素
    • $(“div:even”)选取索引是偶数的<div>元素
    • $(“div:odd”)选取索引是奇数的<div>元素
    • $(“div:eq(1)”)选取索引为1的<div>元素
    • $(“div:gt(3)”)选取索引大于3的<div>元素
    • $(“div:lt(3)”)选取索引小于3的<div>元素
    • $(“.header”)先去网页中所有的<h1><h2><h3>...
    • $(“div:animated”)选取正在执行动画的<div>元素
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../jquery-2.1.0.js"></script>
    </head>
    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
            border: 1px solid black;
            margin: 10px;
        }
    </style>
    <body>
        <p>
            <button id="btn01">$("div:first")</button>
            <button id="btn02">$("div:not(.one)")</button>
            <button id="btn03">$("div:even")</button>
            <button id="btn04">$("div:eq(1)")</button>
            <button id="btn05">$("div:animated")</button>  
        </p>
        `   <div></div>
            <div class="one"></div>
            <div style="display: none;" class="two"></div>
    </body>
</html>
<script>
    $(function(){
        $(".two").show(2000);//显示div

        $("#btn01").click(function(){
            //过滤选择中查找所有div中 的第一恶div
            $("div:first").css("background","#008000");
        });
        $("#btn02").click(function(){
            //不包含one的class
            $("div:not(.one)").css("background","#353535");
        });
        $("#btn03").click(function(){
            //索引是偶数的div
            $("div:even").css("background","antiquewhite");
        });
        $("#btn04").click(function(){
            //索引是1的div
            $("div:eq(1)").css("background","#999999");

        });
        $("#btn05").click(function(){
            //索引是正在执行动画的div
            $("div:animated").css("background","yellowgreen");

        });
    });

</script>

  • 内容过滤器

    • $(“div:contains(‘你好’)”):选出含有文本你好的
      <div>元素
    • $(“div:empty”):选取不包含子元素（包括文本元素）的
      <div>空元素
    • $(“div:has(p)”):选取含有

      元素的

      <div>元素

    • $(“div:parent”)：选取拥有子元素（包括文本元素）的
      <div> 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../jquery-2.1.0.js"></script>
    </head>
    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
            border: 1px solid black;
            margin: 10px;
        }
    </style>
    <body>

            <p>
            <button id="btn01">$("div:contains('hello world')")</button>
            <button id="btn02">$("div:empty")</button>
            <button id="btn03">$("div:has(p)")</button>
            <button id="btn04">$("div:parent")</button>

        </p>
        `   <div></div>
            <div >hello world .hello jqery,hello java</div>
            <div ><p></p></div>

    </body>
</html>
<script>
    $(function(){
        $("#btn01").click(function(){
            //查找div中指定的包含文本内容
            $("div:contains('hello world')").css("background","#008000");
        });
        $("#btn02").click(function(){
            //查找不包含子元素的div
            $("div:empty").css("background","#353535");
        });
        $("#btn03").click(function(){
            //含有p标签
            $("div:has(p)").css("background","antiquewhite");
        });
        $("#btn04").click(function(){
            //是否含有子元素
            $("div:parent").css("background","#CCCCCC");
        });
    });
</script>
  • 属性过滤选择器
    • $(“div[id]”)查找含有地属性的<div>
    • $(“div[id=other]”)查找含有id属性，且id属性值为other的<div>
    • $(“div[id!=other]”)查找含有id属性，且id属性值不是other的<div>
    • $(“div[id^=other]”)查含有id属性，且id属性值为other开头的<div>
    • $(“div[id][title]”)查找含有id属性和title属性的<div>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../jquery-2.1.0.js"></script>
    </head>
    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
            border: 1px solid black;
            margin: 10px;
        }
    </style>
    <body>
        <p>
            <button id="btn01">$("div[id]")</button>
            <button id="btn02">$("div[id=one]")</button>
            <button id="btn03">$("div[id!=one]")</button>
            <button id="btn04">$("div[id][title]")</button>

        </p>
    `   <div id="one"></div>
        <div id="two"></div>
        <div id="three" title="three"></div>

    </body>
</html>
<script>
    $(function(){
        $("#btn01").click(function(){
            //含有id属性的div
            $("div[id]").css("background","#008000");
        });
        $("#btn02").click(function(){
            //含有地属性是one的div
            $("div[id=one]").css("background","#353535");
        });
        $("#btn03").click(function(){
            //含有id属性值不是one的div
            $("div[id!=one]").css("background","antiquewhite");
        });
        $("#btn04").click(function(){
            //含id属性也还有title属性的div
            $("div[id][title]").css("background","#CCCCCC");
        });
    });
</script>
  • 可见过滤器选择器
    • $(“div:visible”)查找可见的<div>
    • $(“div:hidden”)查找隐藏的<div>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>

    <script src="../jquery-2.1.0.js"></script>
    </head>
    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
            border: 1px solid black;
            margin: 10px;
        }
    </style>
    <body>
        <p>
            <button id="btn01">$("div:visible")</button>
            <button id="btn02">$("div:hidden")</button>


        </p>
    `   <div id="one"></div>
        <div style="display: none;"></div>


    </body>
</html>
<script>
    $(function(){
        $("#btn01").click(function(){
            //查找可见的div
            $("div:visible").css("background","#000000");
        });
        $("#btn02").click(function(){
            //查找不可见的div
            $("div:hidden").css("background","#008000").show(2000);
        });
    });
</script>
  • 表单选择器
    • $(“:input”)
      • $(“:text”)
      • $(“:checkbox”)
      • $(“:password”)
      • $(“:radio”)
      • $(“:submit”)
      • $(“:button”)
      • $(“:file”)
      • $(“:reset”)
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../jquery-2.1.0.js"></script>
    </head>
    <body>
        <p>
            <button id="btn01">$(":text")</button>
            <button id="btn02">$(":checkbox")</button>
            <button id="btn03">$(":radio")</button>
            <button id="btn04">$(":select")</button>

        </p>
        <form id="f01">
            <input type="text" />
            <p>
                <input type="checkbox" />java
                <input type="checkbox" />Jquery
            </p>
            <p>
                <input type="radio" name="r1" />java
                <input type="radio" name="r1" />jQuery
            </p>
            <select>
                <option>java</option>
                <option>jQuery</option>
            </select>
        </form>
    </body>
</html>
<script>
$(function(){
    $("#btn01").click(function(){
        $("#f01 :text").css("background","#008000");
    });
    $("#btn02").click(function(){
        $(":checkbox").attr("checked",true);//attr函数时设置元素的属性
    });
    $("#btn03").click(function(){
        //jQuery如何遍历选择到的元素节点
        //下面的radio有两个，需要进行遍历$.each(),$("选择器").each()
        //遍历过程中才能找到被选中的单选按钮
        $(":radio").each(function(i){
            console.log(i+"===="+this.checked);
        });
    });
    $("#btn04").click(function(){
        console.log($(":select"));
    });
})
</script>
  • 状态选择器
    • $(“:checked”)
    • $(“:selected”)
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="../jquery-2.1.0.js"></script>
    </head>
    <body>
        <p>
            <button id="btn01">$(":text")</button>
            <button id="btn02">$(":checkbox")</button>
            <button id="btn03">$(":radio")</button>
            <button id="btn04">$(":select")</button>
            <button id="btn05">$(":checked")</button>
            <button id="btn06">$(":selected")</button>
        </p>
        <form id="f01">
            <input type="text" />
            <p>
                <input type="checkbox" />java
                <input type="checkbox" />Jquery
            </p>
            <p>
                <input type="radio" name="r1" />java
                <input type="radio" name="r1" />jQuery
            </p>
            <select>
                <option>java</option>
                <option>jQuery</option>
            </select>
        </form>
    </body>
</html>
<script>
    $(function(){
        $("#btn01").click(function(){
        $("#f01 :text").css("background","#008000");
        });
        $("#btn02").click(function(){
            $(":checkbox").attr("checked",true);//attr函数时设置元素的属性
        });
        $("#btn03").click(function(){
            //jQuery如何遍历选择到的元素节点
            //下面的radio有两个，需要进行遍历$.each(),$("选择器").each()
            //遍历过程中才能找到被选中的单选按钮
            $(":radio").each(function(i){
                console.log(i+"===="+this.checked);
            });
        });
        $("#btn04").click(function(){
            console.log($(":select"));
        });
        $("#btn05").click(function(){
            console.log($(":checked"));
            $(":checked").attr("checked",false);
        });
        $("#btn06").click(function(){
            window.alert($(":selected").text());//jQuery提供了text（） 获取文本内容的值
        });
    })
</script>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值