* [5.3 jQuery对象与DOM对象之间的转换](about:blank#53_jQuery__DOM__271)
* * [5.3.1 将jQuery 对象转换为DOM 对象](about:blank#531_jQuery__DOM__282)
* [5.3.2 将DOM 对象转换为jQuery 对象](about:blank#532_DOM__jQuery__295)
6.解决jQuery与其他库的冲突
总结
前言
======================================================================
在这篇文章中，我们将了解jQuery 的定义、它的作用、为什么要学习jQuery、如何使用它、它的语法，最后比较jQuery 对象和DOM 对象之间的差异。
1. 什么是JQuery？
==================================================================================
jQuery 可以很容易地理解为一个JavaScript 函数库。 jQuery 是一个轻量级的JavaScript 库，“编写更少，工作更多”。
好处包括：
轻的
强大的选择器
更好地封装DOM 操作
可靠的事件机制
完美的阿贾克斯
不要污染顶级变量。
出色的浏览器兼容性。
连锁经营模式。
隐式重复。
行为层和结构层的分离。
丰富的插件支持。
完整的文档。
开源。
2.配置jQuery环境
====================================================================================
您可以访问jQuery 官方网站http://jquery.com/，在本地下载最新的jQuery 文件并将其部署到您的项目中。官方网站如下。
这是一个代码示例。
头
脚本类型=\’text/javascript\’ src=\’jquery.js\’/script
/头
注意：根据您的情况调整此处的路径位置。另外，你可以在官网下载两个版本的jQuery：精简版和未压缩版（用于调试或阅读）。请根据您的需求选择下载。
当然，如果你不想在本地下载jQuery，也可以使用Google的CDN或微软的CDN。
使用谷歌的CDN。
Google CDN 在中国不再可用。以下内容仅用于演示目的。
头
脚本
类型=\’文本/javascript\’
src=\’http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js\’
/剧本
/头
使用微软的CDN。
头
脚本
类型=\’文本/javascript\’
src=\’http://ajax.microsoft.com/ajax/jquery
/jquery-1.4.min.js\’
/剧本
/头
3.jQuery语法
==============================================================================
jQuery 语法被编程为选择HTML 元素并允许您对它们执行某些操作。
基本语法是：
$(选择器).action();
美元符号$ 定义了jQuery。
HTML 元素的查询和搜索选择器。
jQuery 的action() 对元素执行操作。
另一件需要注意的事情是，jQuery 库中的$ 符号可能会导致KaTeX 解析错误，例如： Expected \’EOF\’, got \’#\’ at Position 3: (\”#lw\”) 和jQuery(\’….ajax etc.) jQuery 的简写。除非另有说明，程序中的$ 符号是jQuery 的缩写。
3.1 文档准备功能
所有jQuery 函数都位于支持文档的函数内。
$(文档).ready(函数(){
});
//可以简写为
$(函数(){
});
这是为了防止jQuery 代码在文档完全加载（准备好）之前运行。如果在文档完全加载之前运行该函数，操作可能会失败。下面给出两个具体例子。
我试图隐藏一个不存在的元素。
获取未完全加载的图像的大小。
上面的代码实际上与传统的JavaScript window.onload 方法类似，但也有一些区别。这是一个快速比较：
| $(文档).ready() |
| — | — |
| 执行时机| 必须等待网页中的所有内容加载完毕（包括图像） | 网页中的所有DOM 结构可能无法渲染。已加载|
| 要写入的项目数| 不能同时写入多个项目。 | 可以同时写入多个项目。 |
写数字的意思是：
window.onload=函数() {
警报（\’测试1\’）；
};
window.onload=函数() {
警报（\’测试2\’）；
};
//仅针对test2输出结果。
$(文档).ready(函数() {
警报（\’测试1\’）；
});
$(文档).ready(函数() {
警报（\’测试2\’）；
});
//结果会打印两次
3.2 编写你的第一个jQuery 程序
例子：
!DOCTYPE html
html
头
元字符集=\’utf-8\’/
标题/标题
!– 使用Microsoft 的CDN 加载jQuery —
头
脚本
类型=\’文本/javascript\’
src=\’http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js\’
/剧本
/头
/头
身体
脚本类型=\’文本/javascript\’
//等待dom 元素加载
$(文档).ready(函数() {
//弹出框：显示hello world
警报（\’你好世界\’）；
});
/剧本
/身体
/html
4.jQuery代码风格
====================================================================================
正确的编码风格可以让你的代码更容易阅读，并且正确地注释你的代码对于以后的代码维护也很有帮助。让我们举个例子：
!DOCTYPE html
html
头
元字符集=\’utf-8\’/
标题/标题
脚本类型=\’text/javascript\’ src=\’http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js\’/script
/头
身体
div 类=\’盒子\’
ul 类=\’菜单\’
li class=\’级别1\’
a href=\’#\’spring/a
ul 类=\’级别2\’
充满春天/丽
充满春天/丽
充满春天/丽
充满春天/丽
/ul
/里
li class=\’级别1\’
a href=\’#\’夏天/a
ul 类=\’级别2\’
里炎热的夏天/里
里炎热的夏天/里
里炎热的夏天/里
里炎热的夏天/里
/ul
/里
li class=\’级别1\’
a href=\’#\’秋天/a
ul 类=\’级别2\’
li 秋天的空气很清新/li
li 秋天的空气很清新/li
li 秋天的空气很清新/li
li 秋天的空气很清新/li
/ul
/里
/ul
/div
脚本类型=\’文本/javascript\’
//等待dom 元素加载
$(文档).ready(函数() {
$(\’.level1a\’).click(function () {
$（这个）
.addClass(\’当前\’)
。下一个（）
。展示（）
。父级（）
。兄弟（）
.children(\’a\’)
.removeClass(\’当前\’)
。下一个（）
。隐藏（）;
返回假。
});
});
/剧本
/身体
/html
代码非常简单。我没有添加任何CSS 样式。运行时效果为：
让我简单解释一下这段代码。用鼠标单击标签会添加一个名为current 的类，调用next() 和show() 显示其后面的元素，并调用parent()、sisters() 和children。 (\”a\”) 从其父级同级元素的内部子元素a 中删除名为current 的类(removeClass(\”current\”))，并隐藏紧随其后的元素。
这是jQuery中一个强大的链式操作。一行代码就完成了导航栏的功能。这就是jQuery 的美妙之处。您可以尝试编写本机JavaScript 代码。当然，上面的方法后面会解释，不懂的也不要着急。但是，为了进一步提高代码的可读性和可维护性，我们建议以下编写实践：
$(文档).ready(函数() {
$(\’.level1a\’).click(function () {
$（这个）
.addClass(\’current\’) //将\’current\’ 样式添加到当前元素
。下一个（）
.show() //显示下一个元素
。父级（）
。兄弟（）
.children(\’a\’)
.removeClass(\’current\’) //从父元素的同级元素的子元素中删除\’current\’ 样式
。下一个（）
.hide(); //下一个元素将被隐藏
返回假。
});
});
也就是说，添加适当的换行符和注释可以帮助你一目了然地了解代码的功能，提高代码的可读性，方便日后的维护，提高开发效率。
5. jQuery 和DOM 对象
========================================================================================
5.1 DOM对象
DOM（文档对象模型）对象。这通常称为文档对象模型。每个DOM 都可以表示为一棵DOM 树。
例如，这样的代码：
小时1/小时1
哔哔
乌尔
李/李
/ul
h1、p、ul 和li 标签都是DOM 元素节点。在JavaScript 中，可以通过document.getElementById()、document.getElementsByTagName() 等方式获取元素节点。这样得到的DOM元素就是一个DOM对象。对象可以在JavaScript 中使用以下方法：
var domObj=document.getElementById(\’id\’); //获取DOM 对象。
var objHtml=domObj.innerHTML //在JavaScript中使用innerHTML属性。
5.2 jQuery 对象
jQuery 对象是通过用jQuery 包装DOM 对象创建的对象。 jQuery 对象是jQuery 特有的。如果对象是jQuery 对象，则可以使用jQuery 方法，例如：
$(\’#xnm\’).html(); //获取id的html代码。 html() 是一个jQuery 方法。
这段代码相当于：
document.getElementById(\’xnm\’).innerHTML;
例如，您不能在jQuery 对象内使用$(\”#xnm\”).innerHTML 等方法。您可以使用$(\”#xnm\”).html() 方法代替。出于同样的原因，DOM 对象不能使用jQuery 的方法。例如：document.getElementById(“xnm”).html();也会报错。
注意：如果使用#id 作为选择器，您将获得一个jQuery 对象，而不是通过document.getElementById(“id”); 获得的DOM 对象。两者并不等同。我们需要从一开始就建立这样一个概念：jQuery 对象和DOM 对象之间存在差异，并且它们不等同。
5.3 jQuery对象和DOM对象之间的转换
在讨论jQuery 对象和DOM 对象之间的转换之前，我们首先要就定义变量的样式达成一致。然后在变量前面添加$ 符号，如下所示：
var $test=jQuery 对象；
#### 算法问题解决
大公司面试还是以算法问题为主，所以我也推荐《LeetCode》和《算法的乐趣》这本书，特别是算法方面的。分享来自美团等领先公司的学习笔记和Xmind 思维导图（附答案+分析），以便每个人都可以学习。
**我最后写的**
**最后，我想给所有Java朋友一些建议。这也是我的个人经历。 **
1、疯狂编程
2.学习效果可视化
3.写博客
4.阅读好的代码
5、心理调整
#1. 以上关于Jquery简介（超详细）的信息仅供参考。相关信息请参见官方公告。
原创文章，作者：CSDN，如若转载，请注明出处：https://www.sudun.com/ask/92114.html
