1、代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery与javascript的相互转换</title>
<!--引入jquery依赖包-->
<script type="text/javascript" src="../jquery-1.11.3.js"></script>
<script type="text/javascript">
/**
* 1.DOM对象转换成jquery对象
* 方法：对于一个DOM对象, 只需要用$()把DOM对象包装起来, 就可以获得一个jquery对象。
* 例如：
* var helloDom = document.getElementById("hello");
* $(helloDom).css("color","#f00")
*
* 2.jquery对象转换成DOM对象
* 方法一：jquery对象是一个数组对象, 可以通过[index]的方法得到对应的DOM对象。
* 例如：
* ($("li.abc")[0]).innerHTML = "ttttttttttttttt";
* 方法二：使用jquery中的get(index)方法得到相应的DOM对象。
* 例如：
* ($("li.abc").get(0)).innerHTML = "ttttttttttttttt";
*/
$(function() {
//目前是javascript对象，对于该对象而言，无法使用jquery的方法
var helloDom = document.getElementById("hello");
//使用$()将helloDom节点封装成jquery节点
var jHello = $(helloDom);
jHello.css("color","#f00");
//每一个jquery节点都是一个数组，只要取出数组中的值，这个值就是js节点，就能使用js方法
//当转换为js节点之后，就无法使用jquery的方法，要使用jquery的方法，再通过$()进行封装
//($("li.abc")[0]).innerHTML = "ttttttttttttttt";
($("li.abc").get(0)).innerHTML = "ttttttttttttttt";
});
</script>
</head>
<body>
<div id="hello">
<ul>
<li class="abc">aaaaaaaaaaaaaaa</li>
<li>bbbbbbbbbbbbbbb</li>
<li>ccccccccccccccc</li>
<li>ddddddddddddddd</li>
</ul>
</div>
</body>
</html>
相关推荐
总的来说，jQuery对象与DOM对象之间的转换是开发中常见的需求。掌握这种转换技巧能帮助你更好地利用这两个世界的优点，提升代码的可读性和效率。在编写jQuery代码时，一定要注意选择合适的方法，避免混淆两者，这样...
**jQuery库与原生JavaScript常用方法** jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互。这个博客主要探讨了jQuery库与原生JavaScript之间的对比，以及它们各自的一些常用...
两者之间可以互相转换：将DOM对象转换为jQuery对象，可以使用`$(domElement)`；反之，使用`.get(index)`或`.eq(index)`方法将jQuery对象转回DOM对象。 DOM对象与jQuery对象转换的常见用途包括使用原生方法进行性能...
3. jQuery+CSS实用图片收缩与放大效果插件 4. jquery+div实现同时滑动切换的图文展示特效插件下载 5. jquery+div带动画按钮图片手动与自动切换的特效代码 6. jquery一页多用的飞飞图片幻灯插件演示 7. jquery...
两者之间可以相互转换，如`$(element)`将DOM对象转换为jQuery对象，`element[0]`或`.get(0)`则可将jQuery对象转换回DOM对象。 **jQuery选择器** jQuery选择器类似于CSS选择器，用于选取DOM元素。它们包括： 1. 基本...
17. jquery图文排行混合互相切换效果(仿Vancl效果) 18. jQuery图片插件之鼠标放在图片上出现动态的hover效果插件 19. jQuery图片自动轮播淡入淡出的幻灯插件iFadeSlide 20. jQuery大气banner带时间线自动播放的...
一、JQuery对象和DOM对象的相互转化（《锋利的JQuery》） JQuery转化为DOM： 1、var jq = $(‘#selector’); var dom = jq[index]; 2、var jq1 = $(‘#selector1′); var dom1 = jq1.get(index) 或者 var ...
需要注意的是，虽然可以相互转换，但jQuery对象和DOM对象不可以直接相互调用各自的方法。例如，jQuery对象不能直接使用DOM方法，因为它们并不完全相同。反之，DOM对象也不能直接使用jQuery的方法。不过，一旦完成了...
**jQuery** 是一个JavaScript库，简化了JavaScript的DOM操作、事件处理、动画和Ajax交互。jQuery的核心理念是"写得更少，做得更多"，它的API易于理解和使用，使得开发者可以快速实现常见的网页交互效果。 **PHP**...
jQuery 是一款广泛使用的 JavaScript 库，它的出现极大地简化了网页的 DOM 操作、事件处理、动画效果和Ajax交互。标题中提到的"jQuery API"指的是jQuery提供的各种函数和方法，这些API允许开发者高效地操控网页元素...
课件强调了jQuery不污染顶级变量的特性，这是指jQuery不会修改JavaScript的全局对象，如window、document或Array等，这有助于避免与其他JavaScript库或自定义脚本发生命名冲突。此外，jQuery的浏览器兼容性也很出色...
《锋利的jQuery》适合所有对jQuery技术感兴趣的Web设计者和前端开发人员...1.4.2 jQurey对象和DOM对象的相互转换 13 1.4.3 实例研究 14 1.5 解决jQuery和其他库的冲突 16 1.6 jQuery开发工具和插件 18 1.7 小结 22
此外，本文还提供了一些相关的JSON在线工具供大家参考，包括在线JSON代码检验、检验、美化、格式化工具、在线XML/JSON相互转换工具、JSON代码在线格式化/美化/压缩/编辑/转换工具等。 在JavaScript中，操作JSON数据...
转换方法包括：使用`$(domElement)`将DOM对象转化为jQuery对象，而从jQuery对象获取DOM对象则可以通过索引访问，如`$jQueryObject[0]`或使用`$jQueryObject.get(0)`。 jQuery的选择器丰富多样，包括： - **基本...
通过设置`dataType: 'json'`，jQuery会自动将服务器返回的JSON数据转化为JavaScript对象，方便进一步操作。 2. **JSONP与跨域**: JSONP（JSON with Padding）是解决JavaScript跨域问题的一种方式。jQuery的`$.get...
jQuery对象和原生DOM元素有所不同，但可以互相转换。`$(element)`将DOM元素转换为jQuery对象，`$(selector)[index]`或`.get(index)`则可将jQuery对象转为DOM元素。 ### 7. jQuery插件 jQuery生态系统庞大，拥有...
1.4.2 jQurey对象和DOM对象的相互转换 1.4.3 实例研究 1.5 解决jQuery和其他库的冲突 1.6 jQuery开发工具和插件 1.7 小结 第2章 jQuery选择器 2.1 jQuery选择器是什么 2.2 jQuery选择器的优势 2.3 jQuery选择器 ...
3. **jQuery 对象与 DOM 对象的转换** - jQuery对象是jQuery库中的封装对象，可以执行jQuery特有的方法；DOM对象是原生JavaScript的对象，用于操作HTML元素。两者之间可以通过`.get()`和`$(...)`进行相互转换。 4....