【JQ】JQuery基础知识学习之JQ对象和DOM对象的相互转换，JQ构造器，JQ选择器，JQ链式语法，JQ事件

最新推荐文章于 2023-08-19 11:52:53 发布

不大好不大好

最新推荐文章于 2023-08-19 11:52:53 发布

阅读量336

点赞数 1

分类专栏： JQuery 文章标签： jquery

本文链接：https://blog.csdn.net/weixin_44707049/article/details/116163051

版权

本文介绍了JQuery中的DOM对象和JQuery对象的区别，以及如何进行相互转换。JQuery对象是由DOM对象组成的集合，不能直接调用DOM方法。转换方法包括使用数组下标或get()方法将JQuery对象转为DOM对象，而DOM对象通过$()函数可转换为JQuery对象。此外，文章还详细解释了JQuery的链式语法和ready事件的使用，强调了end()方法在链式操作中的作用。

摘要由CSDN通过智能技术生成

JQ基础知识
1.在JQuery库中，$表示JQuery的别名。例如$()等效于JQuery()。
2.在做所有事情之前，如果要让JQ读写和处理文档的DOM，则必须在DOM载入之后开始执行事件，所以要使用ready事件作为处理HTML文档的开始。

$(document).ready(function() {
   
    //JQ代码
});
//简写
$(function() {
   
    //JQ代码
});
//JS的onload事件
window.onload = function (){
   
	//JS代码
}

上面的代码的语义：匹配文档中的document结点，然后为该结点绑定ready事件处理函数。ready事件处理函数类似于JS中的window.onload事件处理函数，不过JQ的ready事件要优先于onload事件被激活。
因为ready处理函数在文档内容完全载入后执行，因此不需要等待外部链接文件载入完成，响应要比load事件早。

JQ基础知识
3.$(document).ready()方法可以简写为$()，一般情况下，所有的JQ代码建议都包含在$()函数里面。
4. JQ库的核心是从HTML文档中匹配元素并对其执行操作。
5.JQ代码和JS代码的区别：JQ代码本质上JS代码，两者可以相互混合使用。

JQuery对象和DOM对象的区别
DOM对象
DOM是Document Object Model 的简写，中文翻译文档对象模型。DOM是HTML/XML 的应用编程接口(API)，DOM将整改页面映射为一个由层次结点组成的文件。

DOM的基础知识这里不重复了，网上很多

在DOM树中的结点可以通过document对象的getElementByTagName()或者getElementById()等方法访问它们，也可以利用结点之间的关系，通过它们的关联指针快速进行相互访问。
结点和元素都是DOM对象的组成部分，getElementByTagName()和getElementById()是DOM模型提供的内置方法，所有这些构成了DOM对象基础。
JQuery对象
JQuery对象是通过JQ框架包装DOM对象都产生的一个新的对象。本质上分析它仅是DOM对象的集合，因此可以把DOM对象看成一个独立的个体，JQ对象可以是多个DOM对象组成的数据集合。
两者关系
JQ框架为JQ对象定义了独立使用的方法和属性，它无法直接调用DOM对象的方法，同样的DOM对象也无法直接调用JQ对象的方法和属性。　例如下面的错误代码示范：

$('#myDiv').innerHTML = '插入内容'; //JQuery对象调用DOM属性
getElementById('myDiv').html('插入内容');//DOM对象调用JQ对象的方法

JQ对象和DOM对象相互转换
JQ对象不能够使用DOM对象的方法，但是如果需要，就应该先把JQ对象转换成DOM对象，DOM对象使用JQ对象的方法也是同理。
JQ对象转DOM对象

借助数组下标来读取JQ对象集合中的某个DOM元素对象。
借助JQ对象的get()方法。

第一种方法：

<body>
    <ul>
        <li>我是第1个li标签</li>
        <li>我是第2个li标签</li>
        <li>我是第3个li标签</li>
    </ul>

    <script src="../plug-in/Jquery/jquery-3.6.0.js"></script>
    <script>
        $(function() {
   
            //匹配文档中的所有li标签
            let $li = $('li'); //返回JQ对象
            //将JQ集合中的第一个DOM元素赋值给变量li，此时变量li保存着DOM元素
            let li = $li[0]; //返回DOM对象
            console.log(li.innerHTML);
        });
    </script>
</body>