JavaWeb(3)——jQuery(1)

自律彭于晏

已于 2022-08-15 00:05:07 修改

阅读量165

点赞数

分类专栏： JavaWeb 文章标签： javascript jquery 前端

于 2022-08-12 16:56:10 首次发布

本文链接：https://blog.csdn.net/zjr_java/article/details/125042528

版权

jQuery 对象和 Dom 对象区别及相互转换

jQuery 对象和 Dom 对象区别

Dom 对象和 jQuery 对象互转

jQuery 对象和 Dom 对象区别及相互转换的代码演示

jQuery介绍

jQuery，顾名思义，也就是 JavaScript 和查询（Query），它就是辅助 JavaScript 开发的 js 类库。

jQuery好处

核心思想是 write less,do more(写得更少,做得更多)，所以它实现了很多浏览器的兼容问题。
jQuery 现在已经成为最流行的 JavaScript 库，在世界前 10000 个访问最多的网站中，有超过 55%在使用 jQuery。
jQuery 是免费、开源的，jQuery 的语法设计可以使开发更加便捷，例如操作文档对象、选择 DOM 元素、制作动画效果、事件处理、使用 Ajax 以及其他功能

jQuery入门案例

使用jQuery的前提条件:

使用jQuery一定要引入jQuery库,例如

<script src="../script/jquery-1.7.2.js" type="text/javascript"></script>

jQuery中的$表示一个函数,内容如下图所示

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
        <script type="text/javascript">

            $(function () {
                alert($);
            });


        </script>
    </head>
    <body>

        <button id="btn">Button</button>

    </body>
</html>

添加响应函数方式

使用jQuery查询到标签对象,该对象不是Dom对象,而是jQuery对象
使用标签对象.click(function(形参列表){函数体})

例如：

            $(function () { // 表示页面加载完成之后，相当 window.onload = function () {}
                var $btnObj = $("#btnId"); // 表示按id查询标签对象
                $btnObj.click(function () { // 绑定单击事件
                    alert("jQuery 的单击事件");
                });
            });

代码演示用jQuery给按钮绑定一个事件,通过对比Dom与jQuery的区别

<!DOCTYPE html PUBLIC "-//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>Insert title here</title>
        <!-- 引入jquery库 -->
        <script src="../script/jquery-1.7.2.js" type="text/javascript"></script>
        <script type="text/javascript">
            <!-- 原生的javascript实现按钮绑定单机事件 -->
            // window.onload = function () {
            // 	var btnObj = document.getElementById("btnId");
            // 	// alert(btnObj);//[object HTMLButtonElement]   ====>>>  dom对象
            // 	btnObj.onclick = function () {
            // 		alert("js 原生的单击事件");
            // 	}
            // }

            $(function () { // 表示页面加载完成之后，相当 window.onload = function () {}
                var $btnObj = $("#btnId"); // 表示按id查询标签对象
                $btnObj.click(function () { // 绑定单击事件
                    alert("jQuery 的单击事件");
                });
            });

        </script>


    </head>
    <body>
        <button id="btnId">SayHello</button>
    </body>
</html>

jQuery 核心函数——$()

$ 是 jQuery 的核心函数，这个$符号能完成 jQuery 的很多功能。$()就是调用$这个函数,比如说

$(function(){}) #相当于window.onload = function(){};，页面加载完成后执行大括号里的函数体,
$("#id值") #相当于document.getElementById("btnId");，通过id查找节点对象

如果传入参数为 [ 函数 ] 时：相当于window.onload = function(){};，页面加载完成后执行大括号里的函数体，例如下面页面加载完后执行大括内的alert()函数
```
 $(function(){
    alert();
})
```
传入参数为 [ HTML 字符串 ] 时：会对我们创建这个 html 标签对象
1. 例如下面代码相当于在<body>标签中添加了<span>div-span1</span><span>div-span1</span>,注意他调用了jQuery对象的appendTo()方法
```
$("    <div>" +
            "        <span>div-span1</span>" +
            "        <span>div-span2</span>" +
            "    </div>").appendTo("body");
```
传入参数为 ["选择器字符串"] 时，有三种情况
1. $("#id值"); #相当于document.getElementById("btnId");
  通过id查找标签对象
2. $(“标签名”); #相当于document.getElementsByTagName(tagname);
  标签名选择器，根据指定的标签名查询标签对象
  - (提前认识后面即将学到的基本的过滤选择器) $("标签名:first"); #例如：button:first表示选取所有的<button>元素中第1个<button>元素，button:last表示选取所有的<button>元素中最后一个<button>元素
3. $(“.class属性值”); #相当于document.getElementsByClassName("类型名");
  类型选择器，可以根据 class 属性查询标签对象
  注意，class强烈不建议用数字开头，可以参考java的标识符规则
  - (提前认识后面即将学到的基本的过滤选择器) $(".类型名称:first"); #例如：.abc:first表示选取所有类型为abc元素中的首个类型为abc元素，.abc:first表示选取所有类型为abc元素中的最后一个类型为abc元素
传入参数为 [ DOM 对象 ] 时：会把这个 dom 对象转换为 jQuery 对象
```
var dom = document.getElementByName("button3");
alert($(dom).length);
```

向$()函数传入四种参数的代码演示

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
        <script type="text/javascript">

            //核心函数的4个作用
            $(function () {
                alert("页面加载完成之后，自动调用");

                $("    <div>" +
                    "        <span>div-span1</span>" +
                    "        <span>div-span2</span>" +
                    "    </div>").appendTo("body");

                alert($("button").length);//3

                var btnObj = document.getElementById("btn01");
                alert(btnObj);//[object HTMLButtonElement]
                alert($(btnObj));//[object Object]

                alert($("<h1></h1>"));//[object Object]
                alert($("button"));//[object Object]

            });
            //传入参数为[函数]时：在文档加载完成后执行这个函数
            //传入参数为[HTML字符串]时：根据这个字符串创建元素节点对象
            //传入参数为[选择器字符串]时：根据这个字符串查找元素节点对象
            //传入参数为[DOM对象]时：将DOM对象包装为jQuery对象返回

        </script>
    </head>
    <body>
        <button id="btn01">按钮1</button>
        <button>按钮2</button>
        <button>按钮3</button>
    </body>
</html>

jQuery对象的本质

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

下方代码for循环遍历JQuery对象,验证其本身就是dom对象数组+ jQuery 提供的一系列功能函数。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
        <script type="text/javascript">
            $(function () {
                //用于在浏览器打断点,比较变量arr 和变量$btns查看jQuery对象,发现jQuery类似一个数组
                var arr = [12, "abc", true];
                var $btns = $("button");
                //遍历数组后发现里面是一个个的dom对象
                for (var i = 0; i < $btns.length; i++) {
                    alert($btns[i]);
                }
                /*
                                    [object HTMLButtonElement]
                                    [object HTMLButtonElement]
                                    [object HTMLButtonElement]
                                    [object HTMLButtonElement]
                */
            });
        </script>
    </head>
    <body>
        <button id="dom2dom">使用DOM对象调用DOM方法</button>
        <button id="dom2jQuery">使用DOM对象调用jQuery方法</button>
        <button id="jQuery2jQuery">使用jQuery对象调用jQuery方法</button>
        <button id="jQuery2dom">使用jQuery对象调用DOM方法</button>
    </body>
</html>