jQuery对象与DOM对象

时间 2021-08-14

标签 javascript css html java jquery 编程数组 dom ide 测试栏目 JQuery 繁體版

原文原文链接

一、jQuery对象、DOM对象二者之间的关系javascript

DOM对象，若是想调用jQuery的方法，必须先转换为jQuery对象css

DOM对象：文档树中的对象都是DOM对象html

jQuery对象：把DOM对象包装后就获得jQuery对象java

二、jQuery对象与DOM对象之间的转换jquery

2.一、如何获取DOM对象:jQuery->DOM编程

$(spObj)[0].innerHTML数组

$(spObj).get(0).innerHTMLdom

2.二、如何将DOM对象转换为jQuery对象ide

$(spObj)测试

三、jQuery方式获取页面上的元素？

主要经过如下方法获取jQuery对象

$('#id')

$('span')

$('.cls')

获取后直接就是一个jQuery对象，经过jQuery对象便可调用jQuery的方法，例如

.text()

.val()

.html()

.css('color','red');

jQuery中大多都是方法，不多有属性，由于属性很难链式编程。获取值、设置值都是使用同一个方法，有参数表示设置值，无参数表示取值

四、示例

4.一、使用DOM对象改变背景色

<!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>jQuery测试</title>
    <script type="text/javascript" src="js/jquery-1.12.3.js"></script>
    <script type="text/javascript">
        $(function(){
            //dom
            document.getElementById('btn').onclick = function(){
                //dom对象
                var divObj = document.getElementById('dv');
                divObj.style.backgroundColor = "red";
            };
        });
    </script>
</head>
<body>
    <input type="button" id="btn" value="变背景颜色"/>
    <div id="dv" style="width:300px;height:200px;border:solid 1px red;"></div>
</body>
</html>

效果图

4.二、使用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>jQuery测试</title>
    <script type="text/javascript" src="js/jquery-1.12.3.js"></script>
    <script type="text/javascript">
        $(function(){
            //dom
            document.getElementById('btn').onclick = function(){
                //dom对象
                var divObj = document.getElementById('dv');
                //dom对象转jQuery对象
                $(divObj).css('backgroundColor','red');
            };
        });
    </script>
</head>
<body>
    <input type="button" id="btn" value="变背景颜色"/>
    <div id="dv" style="width:300px;height:200px;border:solid 1px red;"></div>
</body>
</html>

4.三、使用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>jQuery测试</title>
    <script type="text/javascript" src="js/jquery-1.12.3.js"></script>
    <script type="text/javascript">
        $(function(){
            $('#btn').click(function(){
                $('#dv').css('backgroundColor','blue');
            });
        });
    </script>
</head>
<body>
    <input type="button" id="btn" value="变背景颜色"/>
    <div id="dv" style="width:300px;height:200px;border:solid 1px red;"></div>
</body>
</html>

效果图

五、哪些不须要转jQuery对象

Array（数组）对象有没有对应的jQuery对象？

数组自己就不是DOM对象。不存在与jQuery对象之间的转换。

使用jQuery语句能够直接使用数组，就像$.each()或$.map();

parseInt() Array这些是不须要转换的。

补充

经过document.getElementsByTagName()或者document.getElementsByName()获取的返回值是一个相似于数组的值，但不是数组，没有数组特有的方法。

1. JQuery对象与DOM对象
2. jQuery对象与DOM对象
3. jQuery对象和DOM对象
4. Jquery对象和DOM对象
5. DOM对象和JQuery对象
6. JQuery对象和DOM对象
7. DOM对象和Jquery对象
8. jQuery 对象和 DOM 对象
9. 关于jquery对象与DOM对象
10. DOM对象与jquery对象的区别
更多相关文章...
• XML DOM - CDATASection 对象 - XML DOM 教程
• XML DOM - Comment 对象 - XML DOM 教程
• Composer 安装与使用
• Java Agent入门实战（一）-Instrumentation介绍与使用