4、jQuery
4.1、jQuery介绍
4.2、jQuery的第一个程序
4.3、jQuery核心函数（$）
4.4、jQuery对象和dom对象区分
4.5、jQuery选择器
- 4.5.1、基本选择器
id选择器:根据id查找标签对象
.class选择器：根据class查找标签对象
element选择器：根据标签名查找标签对象
- 4.5.2、层级选择器
- 4.5.3、过滤选择器
4.6、jQuery元素筛选
4.7、jQuery 的属性操作
- 属性操作实例

4、jQuery

4.1、jQuery介绍

什么是jQuery？

JavaScript和查询（Query）,它是辅助JavaScript开发的js类库

jQuery核心思想：

write less,do more所以实现了很多浏览器的兼容问题。

jQuery流行程度：

jQuery现在已经成为最流行的JavaScript库

jQuery优点：

jQuery是免费、开源的，jQuery的语法设计可以使开发更加敏捷

4.2、jQuery的第一个程序

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="script/jQuery.js"></script>
    <script type="text/javascript">
    /*      window.onload = function (){
            var byId = document.getElementById("btnId");
            byId.onclick = function () {
                alert("js原生事件")
            }
        }*/
        $(function (){//表示页面加载完成之后，相当于window.οnlοad=fuhnction(){}
            var $btnObj = $("#btnId");//表示按id查询标签对象
            $btnObj.click(function () {//绑定单击事件
                alert("jQuery的单击事件");
            });
        });
    </script>
</head>
<body>
    <button id="btnId">sayhello</button>
</body>
</html>

常见问题

使用jQuery一定要引入jQuery库吗？必须引入
jQuery中的$到底是什么？是一个函数
怎么为按钮添加点击响应函数的？

使用jQuery查询到标签对象
使用标签对象.click(function(){});
4.3、jQuery核心函数（$）
$是jQuery的核心函数，能完成jQuery很多功能，$()就是调用$这个函数
jQuery将程序中的“jQuery”字符替换成了“$”

传入参数为[函数]时：

表示页面加载完成之后。相当于window.onload = function(){}

传入参数为[HTML字符串]时：

根据这个字符串创建元素节点对象，会对我们创建这个html标签对象

传入参数为[选择器字符串]时：

根据这个字符串查找元素结点对象
$(“#id属性值”)； id 选择器，根据id查询标签对象
$(“标签名”); 标签名选择器，可以根据指定的标签名查询标签对象
$(“.class属性值”); 类型选择器，可以根据class属性查询标签对象

传入参数为[DOM对象]时：

将DOM对象包装为jQuery对象返回

[

](https://blog.csdn.net/qq_43130076/article/details/121761497)

4.4、jQuery对象和dom对象区分

4.4.1、什么是jQuery对象？什么是dom对象？

Dom对象

通过getElementById()查询出来的标签对象是Dom对象
通过getElementsByName()查询出来的标签对象是Dom对象
通过getElementsByTagName()查询出来的标签对象是Dom对象
通过createElement()方法创建的对象，是Dom对象
Dom对象alert出来的效果是：[object HTML标签名Element]

jQuery对象

通过jQuery提供的API创建的对象，是jQuery对象
通过jQuery包装的Dom对象也是jQuery对象
通过jQuery提供的API查询到的对象，是jQuery对象
jQuery对象alert出来的效果是：[object Object]

4.4.2、问题：jQuery对象的本质是什么？

本质是dom对象的数组+jQuery提供的一系列功能函数

<!DOCTYPE htmlPUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta content="text/html charset=UTF-8"  http-equiv="Content-Type">
    <title>title</title>
    <script type="text/javascript" src="../script/jQuery.js"></script>
    <script type="text/javascript">
        $(function (){
            var $btns = $("button");
            for (var i = 0; i < $btns.length; i++) {
                alert($btns[i])
            }
        });
    </script>
</head>
<body>
<div id="testDiv">zhangsan is very good!</div>
<button id="btn01">使用DOM对象调用DOM方法</button>
<button id="btn02">使用DOM对象调用jQuery方法</button>
<button id="btn03">使用jQuery对象调用jQuery方法</button>
</body>
</html>

4.4.3、jQuery对象和Dom对象使用区别

jQuery对象不能使用DOM对象的属性和方法
DOM对象也不能使用jQuery对象的属性和方法

4.4.4、jQuery对象和Dom对象互转

4.5、jQuery选择器

4.5.1、基本选择器

id选择器:根据id查找标签对象
.class选择器：根据class查找标签对象
element选择器：根据标签名查找标签对象

*选择器：表示任意的所有元素
selector1,selector2组合选择器：合并选择器1，选择器2 的结果并返回

<!DOCTYPE htmlPUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta content="text/html charset=UTF-8"  http-equiv="Content-Type">
    <title>$的本质</title>
    <script type="text/javascript" src="../script/jQuery.js"></script>
    <script type="text/javascript">
        $(function () {
            //1、选择id为one的元素"background-color","#bbffaa"
            $("#btn1").click(function () {
                $("#one").css("background-color","#bbffaa");
            });
            //2、选择class为mini的所有元素
            $("#btn2").click(function () {
                $(".mini").css("background-color","#bbffaa");
            });
            //3、选择元素名是div的所有元素
            $("#btn3").click(function () {
                $("div").css("background-color","#bbffaa");
            });
            //4、选择所有元素
            $("#btn4").click(function () {
                $("*").css("background-color","#bbffaa");
            });
            //5、选择所有的span元素和id为two的元素
            $("#btn5").click(function () {
                $("span,#two").css("background-color","#bbffaa");
            });
        });
    </script>
    <style type="text/css">
        div,span,p{
            width:140px;
            height:140px;
            margin:5px;
            background:#aaa;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Verdana;
        }
        div.mini{
            width: 55px;
            height: 55px;
            background-color: #aaa;
            font-size:12px;
        }
        div.hide{
            display: none;
        }
    </style>
</head>
<body>
<button id="btn1">选择id为one的元素</button>
<button id="btn2">选择class为mini的元素</button>
<button id="btn3">选择元素名是div的所有元素</button>
<button id="btn4">选择所有的元素</button>
<button id="btn5">选择所有的span和id为two的元素</button>
<br/>
<div class="one" id="one">
    选择id为one的元素
    <div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test">
    id为two,class为one,title为test的div
    <div class="mini" title="other">class为mini,title为other</div>
    <div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini"></div>
</div>
<div class="one">
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini" title="test">class为mini,title为test</div>
</div>
<div style="display: none" class="none">
    style的display为"none的div"</div>
<div class="hide">class为“hidden的div”</div>
<div>
    包含input的type为"hidden"的div
    <input type="hidden" size="8">
</div>
<span class="one" id="span">^^span元素^^</span>
</body>
</html>

这里亲自实操总是有些小漏洞，比如：

选择器忘带#
忘带双引号
忘带分号

4.5.2、层级选择器

ancestor descendant
parent > child
prev + next
prev ~ siblings

<!DOCTYPE htmlPUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta content="text/html charset=UTF-8"  http-equiv="Content-Type">
    <title>$的本质</title>
    <script type="text/javascript" src="../script/jQuery.js"></script>
    <script type="text/javascript">
        $(function () {
            //1、选择body内的所有div元素
            $("#btn1").click(function () {
                $("body div").css("background-color","#bbffaa");
            });
            //2、在body内，选择div子元素
            $("#btn2").click(function () {
                $("body > div").css("background-color","#bbffaa");
            });
            //3、选择id为one的下一个div元素
            $("#btn3").click(function () {
                $("#").css("background-color","#bbffaa");
            });
            //4、选择id为two的元素后面的所有div兄弟元素
            $("#btn4").click(function () {
                $("#two~div").css("background-color","#bbffaa");
            });

        });


    </script>
    <style type="text/css">
        div,span,p{
            width:140px;
            height:140px;
            margin:5px;
            background:#aaa;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Verdana;
        }
        div.mini{
            width: 55px;
            height: 55px;
            background-color: #aaa;
            font-size:12px;
        }
        div.hide{
            display: none;
        }
    </style>
</head>
<body>
<button id="btn1">选择body内的所有div元素</button>
<button id="btn2">在body内，选择div子元素</button>
<button id="btn3">选择id为one的下一个div元素</button>
<button id="btn4">选择id为two的元素后面的所有div兄弟元素</button>

<br/>

<div class="one" id="one">
    选择id为one的元素
    <div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test">
    id为two,class为one,title为test的div
    <div class="mini" title="other">class为mini,title为other</div>
    <div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini"></div>
</div>
<div class="one">
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini" title="test">class为mini,title为test</div>
</div>
<div style="display: none" class="none">
    style的display为"none的div"</div>
<div class="hide">class为“hidden的div”</div>
<div>
    包含input的type为"hidden"的div
    <input type="hidden" size="8">
</div>
<span class="one" id="span">^^span元素^^</span>
</body>
</html>

注意：

$(document).ready(function(){
  // 在这里写你的代码...
});
简写成:
$(function($) {
  // 你可以在这里继续使用$作为别名...
});

4.5.3、过滤选择器

基本过滤器

:first 获取第一元素个
:last 选择最后一个
:not 不选择
:even 选择标签的所有偶数下标元素
:odd 选择标签的所有奇数下标元素
:eq(index) 选择下标等于index的元素
:gt(index) 大于
:lt(index) 小于
:header 标题元素
:animated 动画元素
:focus

<!DOCTYPE htmlPUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta content="text/html charset=UTF-8"  http-equiv="Content-Type">
    <title>$的本质</title>
    <script type="text/javascript" src="../script/jQuery.js"></script>

    <style type="text/css">
        div,span,p{
            width:140px;
            height:140px;
            margin:5px;
            background:#aaa;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Verdana;
        }
        div.mini{
            width: 55px;
            height: 55px;
            background-color: #aaa;
            font-size:12px;
        }
        div.hide{
            display: none;
        }
    </style>

    <script type="text/javascript">
        $(function () {
            function anmateIt(){
                $("#mover").slideToggle("slow",anmateIt);
            }
            anmateIt();
        });

        $(function () {
            //1、选择第一个div元素
            $("#btn1").click(function () {
                $("div:first").css("background-color","#bbffaa");
            });

            //2、选择最后一个div元素
            $("#btn2").click(function () {
                $("div:last").css("background-color","#bbffaa");
            });

            //3、选择class不为one的所有div元素
            $("#btn3").click(function () {
                $("div:not(.one)").css("background-color","#bbffaa");
            });

            //4、选择索引值为偶数的div元素
            $("#btn4").click(function () {
                $("div:even").css("background-color","#bbffaa");
            });

            //5、选择索引值为奇数的div元素
            $("#btn5").click(function () {
                $("div:odd").css("background-color","#bbffaa");
            });

            //6、选择索引值大于3的div元素
            $("#btn6").click(function () {
                $("div:gt(3)").css("background-color","#bbffaa");
            });

            //7、选择索引值等于3的div元素
            $("#btn7").click(function () {
                $("div:eq(3)").css("background-color","#bbffaa");
            });

            //8、选择索引值小于3的div元素
            $("#btn8").click(function () {
                $("div:lt(3)").css("background-color","#bbffaa");
            });

            //9、选择所有的标题元素
            $("#btn9").click(function () {
                $(":header").css("background-color","#bbffaa");
            });

            //10、选择当前正在执行动画的所有元素
            $("#btn10").click(function () {
                $(":animated").css("background-color","#bbffaa");
            });

            //11、没有执行动画的最后一个div
            $("#btn11").click(function () {
                $("div:not(:animated):last").css("background-color","#bbffaa");
            });
        });
    </script>
</head>
<body>
<button id="btn1">选择第一个div元素</button>
<button id="btn2">选择最后一个div元素</button>
<button id="btn3">选择class不为one的所有元素</button>
<button id="btn4">选择索引值为偶数的div元素</button>
<button id="btn5">选择索引值为奇数的div元素</button>
<button id="btn6">选择索引值大于3的div元素</button>
<button id="btn7">选择索引值等于3的div元素</button>
<button id="btn8">选择索引值小于3的div元素</button>
<button id="btn9">选择所有的标题元素</button>
<button id="btn10">选择当前正在执行动画的所有元素</button>
<button id="btn11">没有执行动画的最后一个div</button>
<br/>
<h3>基本选择器</h3>
<br/>
<div class="one" id="one">
    选择id为one的元素
    <div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test">
    id为two,class为one,title为test的div
    <div class="mini" title="other">class为mini,title为other</div>
    <div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini"></div>
</div>
<div class="one">
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini" title="test">class为mini,title为test</div>
</div>
<div style="display: none" class="none">
    style的display为"none的div"</div>
<div class="hide">class为“hidden的div”</div>
<div>
    包含input的type为"hidden"的div
    <input type="hidden" size="8">
</div>
<div class="one" id="mover">正在展示动画的div元素</div>
</body>
</html>

内容过滤器

:contains：包含xxx内容的div元素
:empty：匹配不含有子元素或者文本的元素
:has(selector)：匹配含有选择器所匹配的元素的元素
:parent：匹配含有子元素或者文本的元素

<!DOCTYPE htmlPUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta content="text/html charset=UTF-8"  http-equiv="Content-Type">
    <title>内容过滤选择器</title>
    <script type="text/javascript" src="../script/jQuery.js"></script>

    <style type="text/css">
        div,span,p{
            width:140px;
            height:140px;
            margin:5px;
            background:#aaa;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Verdana;
        }
        div.mini{
            width: 55px;
            height: 55px;
            background-color: #aaa;
            font-size:12px;
        }
        div.hide{
            display: none;
        }
    </style>

    <script type="text/javascript">
        $(function () {
            function anmateIt(){
                $("#mover").slideToggle("slow",anmateIt);
            }
            anmateIt();
        });

        $(function () {

            //1、选择含有文本"id"的div元素
            $("#btn1").click(function () {
                $("div:contains('id')").css("background-color","#bbffaa");
            });

            //2、选择不含子元素（或者文本元素）的div元素
            $("#btn2").click(function () {
                $("div:empty").css("background-color","#bbffaa");
            });

            //3、选择含有class为mini元素的div元素
            $("#btn3").click(function () {
                $("div:has(.mini)").css("background-color","#bbffaa");
            });

            //4、选择含有子元素（或者文本元素）的div元素
            $("#btn4").click(function () {
                $("div:parent").css("background-color","#bbffaa");
            });
        });
    </script>
</head>
<body>
<button id="btn1">选择含有文本"id"的div元素</button>
<button id="btn2">选择不含子元素（或者文本元素）的div元素</button>
<button id="btn3">选择含有class为mini元素的div元素</button>
<button id="btn4">选择含有子元素（或者文本元素）的div元素</button>

<br/>
<h3>基本选择器</h3>
<br/>
<div class="one" id="one">
    选择id为one的元素
    <div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test">
    id为two,class为one,title为test的div
    <div class="mini" title="other">class为mini,title为other</div>
    <div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini"></div>
</div>
<div class="one">
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini" title="test">class为mini,title为test</div>
</div>

<div style="display: none" class="none">
    style的display为"none的div"</div>
<div class="hide">class为“hidden的div”</div>

<div>
    包含input的type为"hidden"的div
    <input type="hidden" size="8">
</div>

<div class="one" id="mover">正在展示动画的div元素</div>
</body>
</html>

属性过滤器

[attribute] 匹配包含给定属性的元素
[attribute=value] 匹配给定的属性是某个特定值的元素
[attribute!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素。
[attribute^=value] 匹配给定的属性是以某些值开始的元素
[attribute$=value] 匹配给定的属性是以某些值结束的元素
[attribute*=value] 匹配给定的属性是以包含某些值的元素
[atrrSel1] [attrSel2] [attrSelN] 复合属性选择器，需要同时满足多个条件时使用

<!DOCTYPE htmlPUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta content="text/html charset=UTF-8"  http-equiv="Content-Type">
    <title>属性选择器</title>
    <script type="text/javascript" src="../script/jQuery.js"></script>

    <style type="text/css">
        div,span,p{
            width:140px;
            height:140px;
            margin:5px;
            background:#aaa;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Verdana;
        }
        div.mini{
            width: 55px;
            height: 55px;
            background-color: #aaa;
            font-size:12px;
        }
        div.hide{
            display: none;
        }
    </style>

    <script type="text/javascript">
        $(function () {
            function anmateIt(){
                $("#mover").slideToggle("slow",anmateIt);
            }
            anmateIt();
        });

        $(function () {

            //1、选择含有属性title的div元素
            $("#btn1").click(function () {
                $("div[title]").css("background-color","#bbffaa");
            });

            //2、选择属性title值等于'test'的div元素
            $("#btn2").click(function () {
                $("div[title='test']").css("background-color","#bbffaa");
            });

            //3、选择属性title值不等于'test'的div元素（没有属性title的也将被选中）
            $("#btn3").click(function () {
                $("div[title!='test']").css("background-color","#bbffaa");
            });

            //4、选取属性title值以“te”开始的div元素
            $("#btn4").click(function () {
                $("div[title^='te']").css("background-color","#bbffaa");
            });

            //5、选取属性title值以‘est‘结束的div元素
            $("#btn5").click(function () {
                $("div[title$='est']").css("background-color","#bbffaa");
            });

            //6、选取属性title值含有’es‘的div元素
            $("#btn6").click(function () {
                $("div[title*='es']").css("background-color","#bbffaa");
            });

            //7、组合器首先选取有属性id的div元素，然后在结果中选取属性title值含有'es' 的div元素
            $("#btn7").click(function () {
                $("div[id][title*='es']").css("background-color","#bbffaa");
            });

            //8、选取含有title属性值，且title属性值不等于test的div元素
            $("#btn8").click(function () {
                $("div[title][title!='test']").css("background-color","#bbffaa");
            });
        });
    </script>
</head>
<body>
<button id="btn1">选择含有属性title的div元素</button>
<button id="btn2">选择属性title值等于'test'的div元素</button>
<button id="btn3">选择属性title值不等于'test'的div元素（没有属性title的也将被选中）</button>
<button id="btn4">选取属性title值以“te”开始的div元素</button>
<button id="btn5">选取属性title值以‘est‘结束的div元素</button>
<button id="btn6">选取属性title值含有’es‘的div元素</button>
<button id="btn7">组合器首先选取有属性id的div元素，然后在结果中选取属性title值含有'es' 的div元素</button>
<button id="btn8">选取含有title属性值，且title属性值不等于test的div元素</button>

<div class="one" id="one">
    选择id为one的元素
    <div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test">
    id为two,class为one,title为test的div
    <div class="mini" title="other">class为mini,title为other</div>
    <div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini"></div>
</div>
<div class="one">
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini" title="test">class为mini,title为test</div>
</div>

<div style="display: none" class="none">
    style的display为"none的div"</div>
<div class="hide">class为“hidden的div”</div>

<div>
    包含input的type为"hidden"的div
    <input type="hidden" size="8">
</div>

<div class="one" id="mover">正在展示动画的div元素</div>
</body>
</html>

表单过滤器

:input 匹配所有的input，textarea，select和button元素
:text 表示匹配所有的单行文本框
:password 表示匹配所有的密码框
:radio 表示匹配所有的单选框
:checkbox 表示匹配所有的复选框
:submit 表示匹配所有的提交按钮
:image 表示匹配所有的图片
:reset 表示匹配所有的重置按钮
:button 表示匹配所有的按钮
:file 表示匹配所有的文件域
:hidden 表示匹配所有的隐藏域

表单对象属性过滤器

:enabled：所有可用的
:disabled：所有不可用的
:checked：匹配选中的元素
:selected：匹配选中的option元素

<!DOCTYPE htmlPUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta content="text/html charset=UTF-8"  http-equiv="Content-Type">
    <title>表单对象属性过滤选择器</title>
    <script type="text/javascript" src="../script/jQuery.js"></script>

    <style type="text/css">
        div,span,p{
            width:140px;
            height:140px;
            margin:5px;
            background:#aaa;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Verdana;
        }
        div.mini{
            width: 55px;
            height: 55px;
            background-color: #aaa;
            font-size:12px;
        }
        div.hide{
            display: none;
        }
    </style>

    <script type="text/javascript">
        $(function () {
            function anmateIt(){
                $("#mover").slideToggle("slow",anmateIt);
            }
            anmateIt();
        });

        $(function () {

            //1、对表单内，可用input赋值操作
            $("#btn1").click(function () {
                //val()可以操作表单项的value属性值
                //它可以设置和获取
                $(":text:enabled").val("万能的张三！");
            });

            //2、对表单内，不可用input赋值操作
            $("#btn2").click(function () {
                $(":text:disabled").val("非常万能的张三！");
            });

            //3、获取多选框选中的个数，使用size()方法获取选取到的元素集合的元素个数
            $("#btn3").click(function () {
                $((":checkbox:checked").length);
            });

            //4、获取多选框，每个选中的value值
            $("#btn4").click(function () {
                var $checkboxes = $(":checkbox:checked");
                //以前的遍历方式
/*                for (var i = 0; i < $checkboxes.length; i++) {

                    alert(($checkboxes[i]).value);
                }*/
                //each方法是jQuery对象提供的用来遍历元素的方法
                //在遍历的function函数中，有一个this对象，就是当前遍历到的dom对象
                $checkboxes.each(function () {
                    alert(this.value);
                })
            });

            //5、获取下拉框选中的内容
            $("#btn5").click(function () {
                //获取选中的option对象
                //遍历获取的option标签中的文本内容
                var $options = $("select option:selected");
                //遍历
                $options.each(function () {
                    alert(this.innerHTML);
                })
            });

        });
    </script>
</head>
<body>
<h3>表单对象属性过滤选择器</h3>
<button id="btn1">对表单内可用input赋值操作</button>
<button id="btn2">对表单内，不可用input赋值操作</button>
<button id="btn3">获取多选框选中的个数，使用size()方法获取选取到的元素集合的元素个数</button>
<button id="btn4">获取多选框，每个选中的value值</button>
<button id="btn5">获取下拉框选中的内容</button>

<form id="form1" action="#">
    可用元素：<input name = "add" value="可用文本框1"><br>
    不可用元素：<input name = "email" disabled="disabled" value="不可用文本框1"><br/>
    可用元素：<input name = "che" value="可用文本框2"><br/>
    不可用元素：<input name="name" value="不可用文本框2" disabled="disabled"/><br/>
    <br/>

    多选框：<br>
    <input type="checkbox" name="newsletter" checked="checked" value="test1"/>test1
    <input type="checkbox" name="newsletter" value="test2"/>test2
    <input type="checkbox" name="newsletter" value="test3"/>test3
    <input type="checkbox" name="newsletter" checked="checked" value="test4"/>test4
    <input type="checkbox" name="newsletter"  value="test5"/>test5

    <br/><br/>
    下拉列表1：<br/>
    <select name="test" multiple="multiple" style="" id="sele1">
        <option>浙江</option>
        <option selected="selected">辽宁</option>
        <option>北京</option>
        <option selected="selected">天津</option>
        <option>广州</option>
        <option>湖北</option>
    </select>
    <br/>
    下拉列表2：<br/>
    <select name="test2">
        <option>浙江</option>
        <option>上海</option>
        <option>杭州</option>
        <option selected="selected">北京</option>
        <option>深圳</option>
    </select>
</form>
</body>
</html>

4.6、jQuery元素筛选

eq() 获取给定索引的元素 :eq() 一样
first() 获取第一个元素 :first()一样
last() 获取最后一个元素 :last()一样
filter(exp) 留下匹配的元素
is(exp) 判断是否匹配给定的选择器，只要匹配就返回true
has(exp) 返回包含有匹配选择器的元素的元素 :has一样
not(exp) 删除匹配选择器的元素 :not一样
children(exp) 返回匹配给定的那个的选择器的子元表 parent>child一样
find(exp) 返回匹配给定选择器的后代元素
next() 当前元素的下一个兄弟元素
nextAll() 返回当前元素后面所有的兄弟元素
nextUntil() 返回当前元素到指定匹配的元素为止的后面元素
parent() 返回父元素
prev(exp) 返回当前元素的上一个兄弟元素
prevAll() 返回当前元素前面所有的兄弟元素
prevUntil(exp) 返回当前元素到指定匹配的元素位置的前面元素
siblings(exp) 返回所有兄弟元素
add() 把add匹配的选择器的元素添加到当前jQuery对象中

<!DOCTYPE htmlPUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta content="text/html charset=UTF-8"  http-equiv="Content-Type">
  <title>$的本质</title>
  <script type="text/javascript" src="../script/jQuery.js"></script>

  <style type="text/css">
    div,span,p{
      width:140px;
      height:140px;
      margin:5px;
      background:#aaa;
      border: #000 1px solid;
      float: left;
      font-size: 17px;
      font-family: Verdana;
    }
    div.mini{
      width: 55px;
      height: 55px;
      background-color: #aaa;
      font-size:12px;
    }
    div.hide{
      display: none;
    }
  </style>

  <script type="text/javascript">
    $(function () {
      function anmateIt(){
        $("#mover").slideToggle("slow",anmateIt);
      }
      anmateIt();
    });

    $(function () {
      //1、eq()选择索引值为等于3的div元素
      $("#btn1").click(function () {
        $("div").eq(3).css("background-color","#bfa");
      });

      //2、first()选择第一个div元素
      $("#btn2").click(function () {
        $("div").first().css("background-color","#bfa");
      });

      //3、last()选择最后一个div元素
      $("#btn3").click(function () {
        $("div").last().css("background-color","#bfa");
      });

      //4、filter()在div中选择索引为偶数的
      $("#btn4").click(function () {
        $("div").filter(":even").css("background-color","#bfa");
      });

      //5、is()判断#one是否为:empty或:parent
      $("#btn5").click(function () {
        alert($("#one").is(":empty"));
        alert($("#one").is(":parent"));
      });

      //6、has()选择div中包含.mini的
      $("#btn6").click(function () {
        $("div").has(".mini").css("background-color","#bfa");
      });

      //7、not()选择div中class不为one的
      $("#btn7").click(function () {
        $("div").not(".one").css("background-color","#bfa");
      });

      //8、children()在body中选择所有class为one的div子元素
      $("#btn8").click(function () {
        $("body").children("div.one").css("background-color","#bfa");
      });

      //9、find()在body中选择所有class为mini 的div后代元素
      $("#btn9").click(function () {
        $("body").find("div.mini").css("background-color","#bfa");
      });

      //10、next()#one的下一个div
      $("#btn10").click(function () {
        $("#one").next("div").css("background-color","#bfa");
      });

      //11、nextAll()#one后面左右的span元素
      $("#btn11").click(function () {
        $("#one").nextAll("span").css("background-color","#bfa");
      });

      //12、nextUntil()#one和span之间的元素
      $("#btn12").click(function () {
        $("#one").nextUntil("span").css("background-color","#bfa");
      });

      //13、parent().mini的父元素
      $("#btn13").click(function () {
        $(".mini").parent().css("background-color","#bfa");
      });

      //14、prev()#two的上一个div
      $("#btn14").click(function () {
        $("#two").prev("div").css("background-color","#bfa");
      });

      //15、prevAll()span前面所有的div
      $("#btn15").click(function () {
        $("span").prevAll("div").css("background-color","#bfa");
      });

      //16、prevUntil()span向前直到#one的元素
      $("#btn16").click(function () {
        $("span").prevUntil("#one").css("background-color","#bfa");
      });

      //17、sibling()#two的所有兄弟元素
      $("#btn17").click(function () {
        $("#two").siblings().css("background-color","#bfa");
      });

      //18、add()选择所有的span元素和id为two的元素
      $("#btn18").click(function () {
        $("span").add("#two").css("background-color","#bfa");
      });
    });
  </script>
</head>
<body>
<button id="btn1">eq()选择索引值为等于3的div元素</button><br>
<button id="btn2">first()选择第一个div元素</button><br>
<button id="btn3">last()选择最后一个div元素</button><br>
<button id="btn4">filter()在div中选择索引为偶数的</button><br>
<button id="btn5">is()判断#one是否为:empty或:parent</button><br>
<button id="btn6">has()选择div中包含.mini的</button><br>
<button id="btn7">not()选择div中class不为one的</button><br>
<button id="btn8">children()在body中选择所有class为one的div子元素</button><br>
<button id="btn9">find()在body中选择所有class为mini 的div后代元素</button><br>
<button id="btn10">next()#one的下一个div</button><br>
<button id="btn11">nextAll()#one后面左右的span元素</button><br>
<button id="btn12">nextUntil()#one和span之间的元素</button><br>
<button id="btn13">parent().mini的父元素</button><br>
<button id="btn14">prev()#two的上一个div</button><br>
<button id="btn15">prevAll()span前面所有的div</button><br>
<button id="btn16">prevUntil()span向前直到#one的元素</button><br>
<button id="btn17">sibling()#two的所有兄弟元素</button><br>
<button id="btn18">add()选择所有的span元素和id为two的元素</button><br>
<br/>



<h3>基本选择器</h3>
<br/>

文本框<input type="text"><br/><br/>

<div class="one" id="one">
  选择id为one的元素
  <div class="mini">class为mini</div>
</div>

<div class="one" id="two" title="test">
  id为two,class为one,title为test的div
  <div class="mini" title="other">class为mini,title为other</div>
  <div class="mini" title="test">class为mini,title为test</div>
</div>

<div class="one">
  <div class="mini">class为mini</div>
  <div class="mini">class为mini</div>
  <div class="mini">class为mini</div>
  <div class="mini"></div>
</div>

<div class="one">
  <div class="mini">class为mini</div>
  <div class="mini">class为mini</div>
  <div class="mini">class为mini</div>
  <div class="mini" title="test">class为mini,title为test</div>
</div>

<span>^^span元素111^^</span>

<div style="display: none" class="none">
  style的display为"none的div"</div>

<div class="hide">class为“hidden的div”</div>

<div class="one" >
  包含input的type为"hidden"的div
  <input type="hidden" size="8">
</div>

<span>^^span元素222^^</span>

<div class="one" id="mover">正在展示动画的div元素</div>

</body>
</html>

4.7、jQuery 的属性操作

html() 它可以设置和获取起始标签和结束标签之间的内容。跟dom属性中的innerHTML一样。会把内容中的标签解析为html标签并按照对应效果输出

text() 它可以设置和获取起始标签和结束标签之间的文本。跟dom属性中的innerTEXT一样。不会解析文本中的内容，直接接收或输出成本

val() 它可以设置和获取表单项的value属性值。跟dom属性value一样

属性操作实例

看到属性过滤器，
[https://www.bilibili.com/video/BV1Y7411K7zz?p=72&spm_id_from=333.788.top_right_bar_window_history.content.click

](https://www.bilibili.com/video/BV1Y7411K7zz?p=72&spm_id_from=333.788.top_right_bar_window_history.content.click)

大数据之路

JavaWeb-04

4、jQuery

4.1、jQuery介绍

4.2、jQuery的第一个程序

4.3、jQuery核心函数（$）

4.4、jQuery对象和dom对象区分

4.4.1、什么是jQuery对象？什么是dom对象？

4.4.2、问题：jQuery对象的本质是什么？

4.4.3、jQuery对象和Dom对象使用区别

4.4.4、jQuery对象和Dom对象互转

4.5、jQuery选择器

4.5.1、基本选择器

id选择器:根据id查找标签对象
.class选择器：根据class查找标签对象
element选择器：根据标签名查找标签对象

4.5.2、层级选择器

4.5.3、过滤选择器

基本过滤器

内容过滤器

属性过滤器

表单过滤器

表单对象属性过滤器

4.6、jQuery元素筛选

4.7、jQuery 的属性操作

属性操作实例

JavaWeb-04

4、jQuery

4.1、jQuery介绍

4.2、jQuery的第一个程序

4.3、jQuery核心函数（$）

4.4、jQuery对象和dom对象区分

4.4.1、什么是jQuery对象？什么是dom对象？

4.4.2、问题：jQuery对象的本质是什么？

4.4.3、jQuery对象和Dom对象使用区别

4.4.4、jQuery对象和Dom对象互转

4.5、jQuery选择器

4.5.1、基本选择器

id选择器:根据id查找标签对象.class选择器：根据class查找标签对象element选择器：根据标签名查找标签对象

4.5.2、层级选择器

4.5.3、过滤选择器

基本过滤器

内容过滤器

属性过滤器

表单过滤器

表单对象属性过滤器

4.6、jQuery元素筛选

4.7、jQuery 的属性操作

属性操作实例

id选择器:根据id查找标签对象
.class选择器：根据class查找标签对象
element选择器：根据标签名查找标签对象