jQuery对象和Dom对象

最新推荐文章于 2023-07-15 20:08:50 发布

衰小孩、519

最新推荐文章于 2023-07-15 20:08:50 发布

阅读量73

点赞数

分类专栏： JavaWeb 文章标签： javaweb

本文链接：https://blog.csdn.net/A_JOKER___/article/details/121088686

版权

JavaWeb 专栏收录该内容

86 篇文章 0 订阅

订阅专栏

jQuery对象的本质

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

jQuery对象和Dom对象区分

一、什么是jQuery对象，什么是dom对象
	Dom对象
	1. 通过getElementByld(查询出来的标签对象是Dom对象
	2. 通过getElementsByName()查询出来的标签对象是Dom对象
	3. 通过getElementsByTagName(查询出来的标签对象是Dom对象
	4. 通过createElement()方法创建的对象，是Dom对象
	DOM对象Alert出来的效果是: [object HTML标签名lement]

二、jQuery对象
	1. 通过JQuery提供的API创建的对象，是JQuery对象
	2. 通过JQuery包装的Dom对象，也是JQuery对象
	3. 通过JQuery提供的API查询到的对象，是JQuery对象
	jQuery对象Alert出来的效果是: [object Object]

jQuery对象和Dom对象使用区别

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

Dom对象和jQuery对象互转

一、dom对象转化为jQuery对象(*重点)
	1、先有DOM对象
	2、$(DOM对象) 就可以转换成为jQuery 对象
二、jQuery 对象转为dom对象(*重点)
	1、先有jQuery对象
	2、jQuery 对象[下标]取出相应的DOM对象

请添加图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../script/jquery.min.js"></script>
    <script type="text/javascript">
        $(function (){
            //Dom对象的方法和jQuery对象的方法不一样,不能相互调用
            var divobj = document.getElementById("testdiv");
            divobj.innerHTML="hello";

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

            //$(Dom对象)：将Dom对象转换为jQuery对象
            //$obj[下标]：通过使用下标方式将jQuery对象取出
            alert($(document.getElementById("testdiv")));//将Dom对象转换为jQuery对象
            alert($(document.getElementById("testdiv"))[0])//通过使用下标方式将jQuery对象取出
        })
    </script>
</head>
<body>
<div id="testdiv">hello world</div>
</body>
</html>