JS之jQuery

jQuery

文章目录

jQuery
- jQuery介绍
- jQuery入门
- jQuery的核心函数
- 如何区分DOM对象和jQuery对象
- jQuery选择器（重点中的重点）
- - 基本选择器
  - 层级选择器
  - 过滤选择器

jQuery介绍

什么是jQuery：
jQuery，顾名思义就是JavaScript和查询（Query），它就是辅助JavaScript开发的js类库。
jQuery核心思想：
“write less，do more”（写的更少，做的更多），所以它实现了很多浏览器的兼容问题
jQuery的流行程度
jQuery现在已经成为最流行的JavaScript类库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。
jQuery优点：
jQuery是免费的、开源的，jQuery的语法设计可以使开发更加敏捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能

jQuery入门

使用jQuery给一个按钮绑定单击事件
引入jQuery文件，可以到jQuery官网去下载然后使用<script>标签引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HelloWorld</title>
    <script type="text/javascript" src="../JSjQuery/jquery-3.6.1.js"></script> //引入jQuery文件，现在是3.6.1 version 
    <script type="text/javascript">
        /*
        //JS原生的单击事件
        window.onload = function (){
            var but01 = document.getElementById("btn01");//dom对象
            but01.onclick = function (){
                alert("Hello World!");
            }
        }
         */
        $(function (){//表示页面加载完成之后，相当于onload事件（window.onload = function (){}）
            var $but01 = $("#btn01");//表示按id查询标签对象，等价于 var but01 = document.getElementById("btn01");//dom对象
            $but01.click(function (){
                alert("jQuery的单击事件-Hello World!");
            });
        });
    </script>
</head>
<body>
<button id="btn01">SayHello</button>
</body>
</html>

使用jQuery的常见问题：

使用jQuery一定要引入jQuery库吗？
是的，必须要引入才能使用
jQuery中的$到底是什么？
是一个函数—— window.jQuery = window.$ = jQuery;
怎么为按钮添加点击响应函数的？
也是分两步：
使用jQuery查询到标签对象
使用标签对象.click((){});

jQuery的核心函数

$是jQuery的核心函数，能完成jQuery的很多功能。$()就是调用$这个函数

传入参数为[函数]时：
表示页面加载完成之后。相当于window.onload = function(){}

    <script type="text/javascript" src="../JSjQuery/jquery-3.6.1.js"></script>
    <script type="text/javascript">
        $(function (){
            alert("页面加载完成之后，自动调用");
        });
    </script>

传入参数为[HTML字符串]时：
会自动创建这个HTML标签对象

 <script type="text/javascript" src="../JSjQuery/jquery-3.6.1.js"></script>
    <script type="text/javascript">
        $(function (){
            alert("页面加载完成之后，自动调用");
            $("<div><span>span-01</span><br>" +
                "<span>span-02</span></div>").appendTo("body");
        });
    </script>
</head>
<body>

</body>
</html>

按F12调出浏览器开发工具可以看到运行后在body标签里面已经生成了div和span标签
在这里插入图片描述

传入参数为[选择器字符串]时：
$("#id属性值"); ——id选择器，根据id查询标签对象
$(“标签名”);——标签选择器，根据指定的标签名查询标签对象
$(".class属性值");——类选择器，根据指定的class属性查询标签对象

        $(function (){//表示页面加载完成之后，相当于onload事件（window.onload = function (){}）
            var $but01 = $("#btn01");//表示按id查询标签对象，等价于 var but01 = document.getElementById("btn01");//dom对象
            $but01.click(function (){
                alert("jQuery的单击事件-Hello World!");
            });
            alert($("button").length); //2
            var $bye = $(".bye");
            $bye.click(function (){
                alert("jQuery的单击事件-Say Good Bye!");
            });
        });

    </script>
</head>
<body>
<button id="btn01">SayHello</button><br><br>
<button class="bye">SayBye</button>
</body>

传入参数为[DOM对象]时：
会把这个dom对象转换成jQuery对象

  var btn02 = document.getElementById("btn02"); // dom对象
            alert(btn02); //[object HTMLButtonElement]
            alert($(btn02)); //[object Object]
        });

如何区分DOM对象和jQuery对象

dom对象

通过getElementById()查询出来的标签对象是Dom对象
通过getElementsByName()查询出来的标签对象是Dom对象
通过getElementsByTagName()查询出来的标签对象是Dom对象
通过createElement()方法创建出来的对象是Dom对象

DOM对象alert出来的效果是： alert(btn02); //[object HTMLButtonElement]

jQuery对象

通过jQuery提供的API创建的对象，是jQuery对象
通过jQuery包装的DOM对象，是jQuery对象
通过jQuery提供的API查询到的对象，是jQuery对象

jQuery对象alert出来的效果是：alert($(btn02)); //[object Object]

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

通过浏览器（F12打开）开发者工具我们可以对前端代码进行调试：
Elemects：对标签和JS代码等的可视化浏览
Console：即控制台，可以查看通过console.log方法输出的结果
Sources：查看源代码，可以进行断点调试
在这里插入图片描述
jQuery对象和Dom对象的使用区别
jQuery对象不能使用DOM对象的属性和方法
DOM对象也不能使用jQuery对象的属性和方法

            document.getElementById("btn02").innerHTML = "It is not Hello!";
            // $("#btn02").innerHTML = "It is Hello now!"; //无效果
            document.getElementById("btn02").click(function (){
                alert("无效果");
            });
            // 要使用如下的onclick
            // document.getElementById("btn02").onclick = function (){
            //     alert("正确的效果");
            // }

             $("#btn02").click(function (){
                alert("click()是jQuery对象的方法");
             });
        });

    </script>
</head>
<body>
<button id="btn02">Hello</button>
</body>
</html>

Dom对象和jQuery对象互相转换

Dom对象转化为jQuery对象（重点）
1. 先有dom对象
2. $(DOM对象)
jQuery对象转化为Dom对象（重点）
1. 现有jQuery对象
2. jQuery对象[下标]取出相应的DOM对象

jQuery选择器（重点中的重点）

基本选择器

#id选择器：根据id查找标签对象
.class选择器：根据class查找标签对象
element选择器：根据标签名查找标签对象
* 选择器：表示任意的，所有的元素
selector1,selector2,…,selectorN组合选择器：合并选择器 selector1,selector2,…,selectorN的结果并返回

结果顺序就是标签在HTML页面中的顺序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Basic Selector</title>
    <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.tit{
            width: 1000px;
            height: 70px;
            background-color: #aaa;
            font-size: 20px;
        }

        div.mini {
            width: 55px;
            height: 55px;
            background-color: #aaaaaa;
            font-size: 12px;
        }

        div.hide{
            display: none;
        }
    </style>
    <script type="text/javascript" src="../JSjQuery/jquery-3.6.1.js"></script>
    <script type="text/javascript">
        //1. 选择id为one的元素设置”background-color“，#bbffaa”
        $( function (){
            $("#btn1").click(function (){
                //css()方法可以设置和获取样式
                $("#one").css("background-color","#bbffaa");
            });

        //2.选择class为mini的所有元素
        $("#btn2").click(function (){
            $(".mini").css("background-color","#AAFFDAFF");
        });
        //3.选择元素名是div的所有元素
            $("#btn3").click(function (){
                $("div").css("background-color","#aadcff");
            });
        //4. 选择所有的元素
            $("#btn4").click(function (){
                $("*").css("background-color","#fcffaa")
            });
        //5.选择所有的span元素和id为two的元素
            $("#btn5").click(function (){
                $("span,#two").css("background-color","#e7aaff")
            });
        //6.选择点亮标题
            $("#btn0").click(function (){
                $(".tit").css("background-color","red")
            });
        });
    </script>
</head>
<body>
    <div class="tit">
        <h1 align="center">基本选择器</h1>
    </div><br>
    <br>
    <br>
    <br>
    <br>

    &emsp;<input type="button"value="点亮标题" id="btn0">
    <input type="button" value="选择id为one的元素" id="btn1">
    <input type="button" value="选择class为mini的所有元素" id="btn2">
    <input type="button" value="选择元素名是div的所有元素" id="btn3">
    <input type="button" value="选择所有的元素" id="btn4">
    <input type="button" value="选择所有的span元素和id为two的元素" id="btn5">

    <br>
    <div class="one" id="one">
        id为one，class为one的div
        <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="..." class="none">style的display为“none”的div</div>
    <div class="hide">class为“hide”的div</div>
    <div>
        包含input的type为“hidden”的div<input type="hidden" size="8">
    </div>
    <span class="one" id="span">^^span元素^^</span>
</body>
</html>

层级选择器

ancestor descendant 后代选择器：在给定的祖先元素下匹配所有的后代元素
parent>child 子元素选择器：在给定的父元素下匹配所有的元素
prev+next 相邻元素选择器：匹配所有紧接在prev元素后的next元素
prev~siblings 之后的兄弟元素选择器：匹配prev元素之后的所有siblings元素

//使用基本选择器的HTML代码
 $(document).ready(function (){ //$( function(){});的全写
            //1. 选择body内的所有div元素
            $("#btn1").click( function (){
                $("body div").css("background-color","#fcffaa")
            });

            //2. 在body内选择div子元素
            $("#btn2").click( function (){
                $("body>div").css("background-color","#fcffaa")
            });

            //3. 选择id为one的下一个div元素
            $("#btn3").click( function (){
                $("#one+div").css("background-color","#fcffaa")
            });

            //4. 选择id为two的元素后面的所有div兄弟元素
            $("#btn4").click( function (){
                $("#two~div").css("background-color","#fcffaa")
            });
        });