共计 4660 个字符，预计需要花费 12 分钟才能阅读完成。
jQuery（一）– 初步了解
jQuery 介绍
由 John Resig 创建于 2006 年一月的开源项目，jQuery 凭借着跨平台的兼容性，简洁的语法，极大的简化了 JavaScript 人员遍历 HTML 文档，操作 DOM，处理事件，执行动画，和开发 Ajax 的操作。
jQuery 优点
- 轻量级。采用 Uglifys 压缩后保持再 30kb 左右。
- 拥有强大的选择器。jQuery 允许开发者使用 CSS1 到 CSS3 几乎所有选择器，以及 jQuery 独创的高级而复杂的选择器。
- 出色的 DOM 封装操作。jQuery 封装了大量常用的 DOM 操作，使开发者再编写 DOM 操作相关程序的时候能够得心应手。
- 可靠的事件处理机制。jQuery 的事件处理机制吸收了 Javascript 专家编写的 Dean Edwards 编写的事件处理函数的精华，使得 jQuery 再处理事件绑定的时候相当可靠。在预留退路（graceful degradation）、循序渐进以及非入侵式（Unobtrusive）编程思想方面，jQuery 也做得非常不错。
- 完善的 Ajax。jQuery 将所有的 ajax 操作封装到一个函数
$.ajax()里，使得开发者处理 Ajax 的时候能够专心处理业务逻辑而无需关心复杂的浏览器兼容性和 XMLHttpRequest 对象的创建和使用问题。 - 不污染顶级变量。jQuery 只建立一个名为 jQuery 的对象。其所有的函数方法都在这个对象之下。其别名
$也可以随时交出控制权，绝对不会污染其他的对象。使得 jQuery 库可以与其他 Js 库共存 - 出色的浏览器兼容性
- 链式操作方式。对发生在同一个 jQuery 对象上的一组动作，可以直接连写无需重复获取对象。
- 隐式迭代。当用 jQuery 找到带有
.myClass类的全部元素时，无需循环遍历每一个返回的元素。 - 行为层与结构层的分离。开发者可以使用 jQuery 选择器选中元素，然后直接给元素添加事件。简单的来说就是可以在 js 中操作 html。
- 丰富的插件支持。
- 完善的文档。
- 开源
jQuery 使用
下载
可以通过 node.js 自带的包管理器 npm 或者 bower 等包管理器下载，也可以通过官网下载
npm 下载 /cnpm 下载 /bower 下载
npm i jquery/cnpm i jquery/bower i jquery
官网下载
https://code.jquery.com/jquery-3.4.1.min.js，另存为 Js 文件即可，也可以在线引用
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
第一个 jQuery 程序
开始之前需要知道一点，在 jQuery 库中，$就是 jQuery 的一个简写形式，例如 $("#foo") 和jQuery("#foo")是等价的，$.ajax和 jQuery.ajax 是等价的。
// 引入 jQuery
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(document).ready(function(){ // 等待 DOM 元素加载完毕
alert("hello world");
});
</script>其中 $(document).ready(); 这段代码类似于 window.onload 的作用，但是其中有些差别
| window.onload | $(document).ready() | |
|---|---|---|
| 执行时机 | 必须等待网页中所有的内容加载完毕后（包括图片）才能执行 | 网页中所有 DOM 结构绘制完毕后就执行，可能 DOM 元素关联的东西并没有加载完 |
| 编写个数 | 不能同时编写多个，以下代码无法正确执行：window.onload = function(){alert("test")};window.onload = function(){alert("test2");}结果只会输出“test2” |
能同时编写多个，以下代码能够正确执行：$(document).ready(function(){alert("hello world");}) $(document).ready(function(){alert("hello again")};);结果两次都输出 |
| 简化写法 | 无 |
$(document).ready(function(){//....};)可以简写为$(function(){});
|
链式代码风格
我的理解是通过 . 运算符来链接层级操作，类似于 Js 原生的 document.getElementById('#app').value 这样的。
代码规范
（1）对于同一个对象不超过三个操作的，可以直接写成一行。
“$(‘li’).show().unbind(‘click’);
（2）对于同一个对象不超过三个操作的，建议每行写一个操作
$(this).removeClass('mouseout')
.addClass('mouseout')
.stop()
.fadeTo('fast',0.6)
.fadeTo('fast',1)
.unbind('click')（3）对于多个对象的少量操作，可以每个对象写一行，如果涉及子元素，可以考虑适当地缩进，例如上面提到的代码。
$(this).addClass('highlight').children('li').show().end()
---------------------------------------------------------
$(this).addClass('highlight')
.children('li').shiw().end()注释的重要性
$('#table > tbody > tr:has(td:has(:checkbox:enabled))').css('background','red');
这一行代码就算是精通 jQuery 的人也不一定能一眼就看出作用，通过有意义的注释可以提高开发效率
// 在一个 id 为 table 的表格的 tbody 中，如果每行的一列中的 checkbox 没有被禁用，则把这行的背景设为红色
$('#table > tbody > tr:has(td:has(:checkbox:enabled))').css('background','red');jQuery 对象和 DOM 对象
DOM 对象（Document Object Model，文档对象模型）
每一份 DOM 都可以表示成一颗树，树的内容为 html 代码的标签元素，按层级表示
<html>
<head>
<title></title>
</head>
<body>
<table>
//...
</table>
<p>
//...
</p>。。。</body>
</html>
jQuery 对象
jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象。
// 通过获取 id 为 foo 的元素内的 html 代码。.html()是 jQuery 里的方法
| DOM 对象操作 | jQuery 对象操作 |
|---|---|
| document.getElementById(‘foo’).innerHTML | $(‘#foo’).html() |
注意：
在 jQuery 对象中无法使用 DOM 对象的任何方法。，DOM 对象中也不能使用任何 jQuery 方法。
像 DOM 对象有 innerHTML 方法，但是 jQuery 中没有；jQuery 对象中有 html() 方法，但是 DOM 中没有。
jQuery 对象和 DOM 对象的互相转换
在讨论此之前规定好代码规范：
- 如果获取的是 jQuery 对象，那么在变量前面加上
$
var $variable = jquery 对象
- 如果获取的是 DOM 对象，
var variable = DOM 对象
jQuery 对象转成 DOM 对象
jQuery 对象不能使用 DOM 中的方法，但如果对 jQuery 对象所提供的方法不熟悉，或者 jQuery 没有封装想要的方法，不得不使用 DOM 对象的时候，有以下两种处理方法。
jQuery 提供了两种方法将一个 jQuery 对象转换成 DOM 对象，即 [index] 和get(index)
案例 html 代码：
<input name="Checkbox" type="checkbox" id="cr">
（1）jQuery 对象是一个类似于数组的对象，可以通过 [index] 的方法得到相应的DOM 对象
var $cr = $('#cr'); //jquery 对象
var cr = $cr[0]; //DOM 对象
alert(cr.checked); // 检测这个 checkbox 是否被选中（2）另一种方法是 jQuery 本身提供的，通过 get(index) 方法得到相应的 DOM 对象
var $cr = $('#cr'); //jquery 对象
var cr = $cr.get(0); //DOM 对象
alert(cr.checked); // 检测这个 checkbox 是否被选中DOM 对象转成 jQuery 对象
对于一个 DOM 对象，只需要用 $() 把 DOM 对象包装起来，就可以获得一个 jQuery 对象了。方式为$(DOM 对象)
var cr = document.getElemntById('cr'); //DOM 对象
var $cr = $(cr); //jQuery 对象转换后，可以任意使用 jQuery 中的方法。
通过以上方法，可以任意相互转换 jQuery 兑现和 DOM 对象。
范例代码)
解决 jQuery 库与其他库的冲突
在 jQuery 库中，几乎所有的插件都被限制在它的命名空间里 — jQuery。通常，全局对象都被很厚地储存在 jQuery 命名空间里，因此当 jQuery 库和其他 JavaScript 库一起使用时不会引起冲突。
默认情况下，jQuery 用 — $作为快捷方式。
一共有三种方式，其中第三种有两种方法
- 方式一：移交“$”使用权
jQuery.noConflict(); // 将变量 $ 的控制权交给 prototype.js
/**
* 在该函数内就可以用“jQuery”代替字符“$”使用 jquery
*/
jQuery(function(){// 使用 jQuery
jQuery("p").click(function(){alert(jQuery(this).text());
})
})
$('pp').style.display = 'none'; // 使用 pototype.js 隐藏元素- 方式二：起别名
var $J = jQuery.noConflict(); // 自定义快捷方式
/**
* 同样的，在这里可以使用“$J”代替字符“$”使用 jquery
*/
$J(function(){$J('p').click(function(){alert($J(this).text());
})
})
$('pp').style.display = 'none';-
方式三：既可以使用字符
$，又不用起别名- 其一：移交使用权时传参，之后就可以在 jQuery 方法内使用字符
$而不用别名
jQuery.noConflict(); // 使用 jQuery 设定页面加载时执行的函数传参 jQuery(function($){$("p").click(function(){alert($(this).text()); }) }); $('pp').style.display = 'none'; - 其一：移交使用权时传参，之后就可以在 jQuery 方法内使用字符
-
其二：类似于一，不过是使用匿名函数
jQuery.noConflict(); // 匿名函数内部的 $ 均为 jQuery (function($){$("p").click(function(){alert($(this).text()); }) }) $('pp').style.display = 'none';