学习JQuery的第一天（区分DOM与JQuery）（DOM与JQuery对象互相转换）

程序猿追

已于 2022-05-19 16:23:54 修改

阅读量1.7k

点赞数 14

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

于 2022-03-22 22:04:54 首次发布

本文链接：https://blog.csdn.net/aasd23/article/details/123670369

版权

前端专栏收录该内容

11 篇文章 31 订阅

订阅专栏

第一点

首先啥是JQuery？
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由John Resig发布。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。（百度百科的哈，不是自己说的）

下载安装JQuery

首先打开这个网页，jQuery的版本下载网址：我是链接，然后在，左侧下载版本，再把下载的解压，复制到你新建的项目里。

在这里插入图片描述

在这里插入图片描述
我们把它引入进来

    <script type="text/javascript" src="../2022.3.22/jquery-3.4.1/2020.3.22/jquery-3.4.1/jquery-3.4.1.js">

    </script>

    <script type="text/javascript">
        alert($);
    </script>

运行，如果看到这一串代码，那就ok了

在这里插入图片描述

第二点

来看看js的Dom对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>title</title>
    <script type="text/javascript">
        window.onload = function (){
            var butbyid = document.getElementById("butid");
            alert(butbyid);
        }
    </script>
</head>
<body>
<button id="butid">我是按钮</button>
</body>
</html>

效果：
在这里插入图片描述
来点onclick

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度一下，你就知道</title>
</head>
<body>
<button id="butid">我是按钮</button>
</body>
</html>

效果：

在这里插入图片描述

JQuery的代码是这样的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度一下，你就知道</title>
    <script type="text/javascript" src="../2022.3.22/jquery-3.4.1/2020.3.22/jquery-3.4.1/jquery-3.4.1.js">
    </script>
    <script type="text/javascript">
        // window.onload = function (){
        //     var butbyid = document.getElementById("butid");
        //     // alert(butbyid);
        //     butbyid.onclick = function () {
        //         alert("大哥，我被点了")
        //     }
        // }
        $(function () {
            var $butbyid = $("#butid");
            $butbyid.click(function () {
                alert("大哥，我又被点了")
            });
        });
    </script>
</head>
<body>
<button id="butid">我是按钮</button>
</body>
</html>

效果：

在这里插入图片描述

这里总结一下：

1、使用JQuery一定要引入JQuery。
2、JQuery的$是一个函数
3、为按钮添加一个响应函数：（1）使用JQuery查询到标签对象（2）使用标签对象.click{function(){}}

第三点

到这里了，可能就有人会问了，这个$到底是个啥呀？

1、传入参数为（函数）时：
表示页面加载完成之后，相当于 window。onload = function(){}

eg：

    <script type="text/javascript">
        $(function () {
            alert("大哥，我又又被点了")
        });
    </script>

效果：

在这里插入图片描述

2、传入参数为（HTML的字符串是）时：
会为我们创建html的标签

eg：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度一下，你就知道</title>
    <script type="text/javascript" src="../2022.3.22/jquery-3.4.1/2020.3.22/jquery-3.4.1/jquery-3.4.1.js">
    </script>
    <script type="text/javascript">
        $(function () {
            $("<div> <p>2022.3.22</p> <p>2022.3.22</p> </div>").appendTo("body");
        });
    </script>
</head>
<body>
<div>
    <p>2022.3.22</p>
    <p>2022.3.22</p>
</div>
</body>
</html>

效果：

在这里插入图片描述

3、传入参数为（选择器字符串）时：
$(“#id属性”) id选择器，根据id查询对象
$(“标签名”) 标签名选择器，根据标签名查询对象
$(“.class属性”) 类选择器，根据类查询对象

这里就不一一列举了，可以查看上面的第二点的“大哥，我被点了”那坨代码

        $(function () {
            var $butbyid = $("#butid");
            $butbyid.click(function () {
                alert("大哥，我又被点了")
            });
        });

4、传入参数为（DOM对象）时：
会把DOM转成JQuery对象

DOM很明显的特征是可以直接看到标签信息
eg：
这样

在这里插入图片描述

    <script type="text/javascript">
        $(function () {
            var btnid = document.getElementById("b1");
            alert(btnid)
        });
    </script>

但是如果这样，它就会变成这样的对象

    <script type="text/javascript">
        $(function () {
            var btnid = document.getElementById("b1");
            alert($(btnid));
        });
    </script>

在这里插入图片描述

那么到了这里如何区分DOM与JQuery对象呢？

第四点

DOM对象
1、通过getElementByid()查询标签对象
2、通过getElementByName()查询标签对象
3、通过getElementByTagName()查询标签对象
4、通过createElement()查询标签对象

eg：[object HTMLButtonElement]

JQuery对象

1、通过JQuery提供的api创建的对象
2、通过JQuery包装的DOM对象
3、通过JQuery提供的api查询到的对象

eg：[object Object]

第五点

DOM与JQuery的区别？

先看代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度一下，你就知道</title>
    <script type="text/javascript" src="../2022.3.22/jquery-3.4.1/2020.3.22/jquery-3.4.1/jquery-3.4.1.js">
    </script>
    <script type="text/javascript">
        $(function () {
            // var btnid = document.getElementById("b1");
            // alert(btnid);
            document.getElementById("textdiv").innerText = "我滴任务完成了";
          //  $("#textdiv").innerText = "我滴任务完成了";
        });
    </script>
</head>
<body>
<div id="textdiv">
哈哈哈，鸡汤来咯
</div>
</body>
</html>

在这里插入图片描述

一个引用会改变值，二另一类相反。

同样的通过function调用click，JQuery可以，但DOM不可以只能用onclick.

即：DOM不能用JQuery的对象与方法，JQuery也不能用DOM的对象与方法。

DOM与JQuery对象互相转换

1、DOM对象转JQuery对象
（1）、先有DOM对象
（2）、$(DOM对象)就可以转成为JQuery对象

2、JQuery对象转DOM对象
（1）、先有JQuery对象
（2）、JQuery对象 [下标] 就可以取出相应的DOM对象

如图：

在这里插入图片描述
（求关注，持续更新中……）

我变秃了，也变强了……

程序猿追

关注

14
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
16
评论
学习JQuery的第一天（区分DOM与JQuery）（DOM与JQuery对象互相转换）

第一点首先啥是JQuery？jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由John Resig发布。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。（百度百科的哈，不是自己说的）下载安装JQuery首先打开这个
复制链接

扫一扫