[知了堂学习笔记]_jQuery入门和jQuery的选择器

最新推荐文章于 2018-11-04 19:10:08 发布

YX_车车

最新推荐文章于 2018-11-04 19:10:08 发布

阅读量229

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/yxuan9826/article/details/78757663

版权

请关注“知了堂学习社区”，地址：http://www.zhiliaotang.com/portal.php
1.jQuery是什么
jQuery是一个JavaScript库。
jQuery极大简化了JavaScript操作。
兼容不同浏览器下的语法问题。
2.第一个jQuery实例
body部分:

<body>
<div></div>
<div></div>
</body>

css样式：

<style type="text/css">
    div{
        width: 300px;
        height: 300px;
        border: 1px solid red;
    }
</style>

jquery部分:

<script type="text/javascript" src="jQuery/jquery-1.9.1.min.js"></script>
<script>
        $(function(){
            $("div").hide(2000);
        });
</script>

3.jQuery的选择器
选择器目的：如何通过jQuery找到网页中元素
选择器大体语法和css样式选择器语法类似。如：ID选择器，类选择器，标签选择器，层次选择器
3.1基本选择器
3.1.1 ID选择器：$(“#ID”),找到<div id=”d01></div>
3.1.2 类选择器：$(“.name”)，找到<div class=”d01></div>
3.1.3 标签选择器：$(“div”)，找到<div></div>
3.1.4 群组选择器：$(“div,#ID，.name”)，找到多个元素
下面我们来看一些demo来深刻了解一下这些基本的选择器：
body部分：

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

jquery部分：

<script type="text/javascript" src="jQuery/jquery-1.9.1.min.js"></script>
    <script>
    $(function(){
        $("#d01").html("<button>按钮01</button>");

        $(".d02").html("<button>按钮02</button>");

        $("div").html("<button>按钮03</button>");

        $("#d01,.d02").html("<button>按钮04</button>");
    });
</script>

3.2层次选择器
3.2.1选择直接子元素：$(“div>#d01”)
3.2.2选择所有后代子元素：$(“div#d01”)
3.2.3 选择直接兄弟元素：$(“div+#d01”)，直接兄弟元素：紧挨着下一个兄弟元素
3.2.4 选择所有兄弟元素：$(“div~#d01”)，所有兄弟元素：向下找它的所有兄弟元素
下面还是用一个demo来更直观的了解这个层次选择器：
body部分：

<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>

jquery部分：

   <script type="text/javascript" src="jQuery/jquery-1.9.1.min.js"></script>
    <script>
        $(function(){
            //找直接子元素
            $("div>.d01").css("background","#99B4D1");
            //找所有的后代子元素
            $("div .d01").css("background","#99B4D1");
            //找直接兄弟元素
            $("#p01+p").css("background","#C65151");
            //找所有的兄弟元素
            $("#p01 ~p").css("background","#C65151");
                });
    </script>

3.3 过滤选择器
$(“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>元素
下面我们来看看过滤选择器的demo：
body部分：

<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>

css样式：

    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
            border: 1px solid black;
            margin: 10px;
        }
    </style>

jquery样式：

    <script type="text/javascript" src="jQuery/jquery-1.9.1.min.js"></script>
    <script>
        $(function(){
           $(".two").show(2000);//显示div
            $("#btn01").click(function(){
                //过滤选择中查找所有div的第一个div
                $("div:first").css("background","#C65151");
            });
            $("#btn02").click(function(){
                //过滤选择中查找不包含类名是one的div
                $("div:not(.one)").css("background","#C65151");
            });

            $("#btn03").click(function(){
                //过滤选择，查找索引是偶数的div
                $("div:even").css("background","#C65151");
            });
            $("#btn04").click(function(){
                //过滤选择，查找索引是1的div
                $("div:eq(1)").css("background","#C65151");
            });
            $("#btn05").click(function(){
                //过滤选择，查找正在执行动画的div
                $("div:animated").css("background","#C65151");
            });
        });
    </script>

3.4 内容过滤器
$(“div:contains(‘你好’)”):选出含有文本“你好”的<div>元素
$(“div:empty”):选取不包含子元素（包括文本元素）的<div>空元素
$(“div:has(p)”):选取含有<p>元素的<div>元素
$(“div:parent”):选取拥有子元素（包括文本元素）的<div>
同上面一样我们进入一段demo：
body部分：

<body>
<p>
    <button id="btn01"> $("div:contains("hello JavaScript")")</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 JavaScript,hello world,hello java</div>
<div><p></p></div>
</body>

css样式：

    </script>
    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
            border: 1px solid black;
            margin: 10px;
        }
    </style>

jquery样式：

    <script type="text/javascript" src="jQuery/jquery-1.9.1.min.js"></script>
    <script>
        $(function(){
            $("#btn01").click(function(){
                //查找div中是否包含指定的内容
                $("div:contains('hello JavaScript')").css("background","#99B4D1");
            });
            $("#btn02").click(function(){
                //查找不包含子元素的div
                $("div:empty").css("background","#99B4D1");
            });
            $("#btn03").click(function(){
                //查找含有p标签的div
                $("div:has(p)").css("background","#99B4D1");
            });
            $("#btn04").click(function(){
                //查找div是否含有子元素
                $("div:parent").css("background","#99B4D1");
            });
        });
    </script>

3.5属性过滤选择器
$(“div[id]”)：查找含有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$=other]”)：查找含有id属性，且id属性值以other结尾的div
$(“div[id][title]”)：查找含有id属性和title属性的div
属性过滤选择器demo
body部分：

<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>

css样式：

    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
            border: 1px solid black;
            margin: 10px;
        }
    </style>

jquery样式：

  <script type="text/javascript" src="jQuery/jquery-1.9.1.min.js"></script>
  <script>
    $(function(){
        $("#btn01").click(function(){
            //含有id属性的div
            $("div[id]").css("background","#99B4D1");
        });
        $("#btn02").click(function(){
            //含有id属性是one的div
            $("div[id=one]").css("background","#99B4D1");
        });
        $("#btn03").click(function(){
            //含有id属性不为one的div
            $("div[id!=one]").css("background","#99B4D1");
        });
        $("#btn04").click(function(){
            //含有id属性也含有title的div
            $("div[id][title]").css("background","#99B4D1");
        })
    })
</script>

3.5 可见过过滤选择器
$(“div:visible”)：查找可见div
$(“div:hidden”)：查找隐藏的div
可见过过滤选择器demo：
body部分：

<body>
<p>
    <button id="btn01">$("div:visible")</button>
    <button id="btn02">$("div:hidden")</button>
</p>
<div></div>
<div style="display: none;"></div>
</body>

css样式：

    <style type="text/css">
        div{
            width: 100px;
            height: 100px;
            border: 1px solid black;
            margin: 10px;
        }
    </style>

jquery样式：

    <script type="text/javascript" src="jQuery/jquery-1.9.1.min.js"></script>
    <script>
    $(function(){
        $("#btn01").click(function(){
            $("div:visible").css("background","#99B4D1");
        });
        $("#btn02").click(function(){
            $("div:hidden").css("background","#99B4D1").show();
        });
    });
</script>

3.6 表单选择器

$(“:input”)
$(“:text”)
$(“:password”)
$(“:checkbox”)
$(“:radio”)
$(“:submit”)
$(“:button”)
$(“:file”)
$(“:reset”)

表单选择器demo：
body部分：

<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">
        <input type="checkbox">
    </p>
    <input type="radio" name="r1">java
    <input type="radio" name="r1">jquery
    <select>
        <option>java</option>
        <option>jquery</option>
    </select>
</form>
</body>

jquery样式：

<script type="text/javascript" src="jQuery/jquery-1.9.1.min.js"></script>
<script>
    $(function(){
        $("#btn01").click(function(){
            $("#f01 :text").css("background","#99B4D1");
        });
        $("#btn02").click(function(){
            $(":checkbox").attr("checked",true);//attr函数是设置元素的属性
        });
        $("#btn03").click(function(){
            $(":radio").each(function(i){
                //因为下面的radio有两个，所以需要进行遍历$.each，$("选择器").each()
                //在遍历的过程中去找到被选中的单选按钮
                console.log(i + "======"+this.checked);
            });
        });
    });
</script>

3.7 状态选择器

$(“:checked”)
$(“:selected”)

状态选择器demo：

body部分：

<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">
        <input type="checkbox">
    </p>
    <input type="radio" name="r1">java
    <input type="radio" name="r1">jquery
    <select>
        <option>java</option>
        <option>jquery</option>
    </select>
</form>
</body>

jquery样式：

<script type="text/javascript" src="jQuery/jquery-1.9.1.min.js"></script>
<script>
    $(function(){
        $("#btn01").click(function(){
            $("#f01 :text").css("background","#99B4D1");
        });
        $("#btn02").click(function(){
            $(":checkbox").attr("checked",true);//attr函数是设置元素的属性
        });
        $("#btn03").click(function(){
            $(":radio").each(function(i){
                //因为下面的radio有两个，所以需要进行遍历$.each，$("选择器").each()
                //在遍历的过程中去找到被选中的单选按钮
                console.log(i + "======"+this.checked);
            });
        });
        $("#btn05").click(function(){
            console.log($(":checked"));//输出一个被选中的元素
            $(":checked").attr("checked",false);//让被选中的复选框取消被选中的状态
        });
        $("#btn06").click(function(){
            window.alert($(":selected").text());//jq提供了text()，可以获取文本内容的值
        })
    });
</script>

YX_车车

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[知了堂学习笔记]_jQuery入门和jQuery的选择器

请关注“知了堂学习社区”，地址：http://www.zhiliaotang.com/portal.php 1.jQuery是什么 jQuery是一个JavaScript库。 jQuery极大简化了JavaScript操作。兼容不同浏览器下的语法问题。 2.第一个jQuery实例 body部分:<body><div></div><div></div></body>css样式：<
复制链接

扫一扫