jQuery对象与DOM对象

最新推荐文章于 2025-08-12 14:37:12 发布

转载最新推荐文章于 2025-08-12 14:37:12 发布 · 46 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/amy-1205/p/5848780.html

文章标签：

#javascript #ViewUI

本文对比了使用标准JavaScript与jQuery来操作DOM元素的方法，并详细介绍了如何在两者间进行转换。包括利用数组下标和get()方法将jQuery对象转为DOM对象，以及如何将DOM对象转化为jQuery对象。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery对象与DOM对象是不一样的

例子：

<p id=”ooc”></p>


普通处理，通过标准JavaScript处理：

<script>
var p = document.getElementById('ooc');  //获取p标签内id为ooc的元素，给这个文本节点增加一句话，使颜色变为红色
p.innerHTML = '学习jQuery知识';
p.style.color = 'red';
</script>



jQuery的处理：

<script>
var $p = $('#ooc');
$p.html('学习jQuery知识').css('color','red');
</script>



如何把jQuery对象转成DOM对象？

利用数组下标的方式读取到jQuery中的DOM对象
数组的索引是从0开始的，也就是第一个元素下标是0

HTML代码

<div>元素一</div>
<div>元素二</div>
<div>元素三</div>


JavaScript代码

<script>
var $div = $('div') //jQuery对象
var div = $div[0] //转化成DOM对象
div.style.color = 'red' //操作dom对象的属性
</script>



通过jQuery自带的get()方法

<script>
var $div = $('div') //jQuery对象
var div = $div.get(0) //通过get方法，转化成DOM对象
div.style.color = 'red' //操作dom对象的属性
</script>


通过$(dom)方法将普通的dom对象加工成jQuery对象后调用jQuery

JavaScript代码
<script>
var div = document.getElementsByTagName('div'); //dom对象
var $div = $(div); //jQuery对象
var $first = $div.first(); //找到第一个div元素
$first.css('color', 'red'); //给第一个元素设置颜色
</script>

转载于:https://www.cnblogs.com/amy-1205/p/5848780.html