1. 简介
jQuery 是目前最受欢迎的 JavaScript 框架。
它使用 CSS 选择器来访问和操作网页上的 HTML 元素(DOM 对象)。
jQuery 同时提供 companion UI(用户界面)和插件。
目前jQuery有1.x和2.x两个主要版本,区别在于2.x移除了对古老的IE 6、7、8的支持,因此2.x的代码更精简。选择哪个版本主要取决于你是否想支持IE 6~8。
从jQuery官网可以下载最新版本。jQuery只是一个jquery-xxx.js
文件,但你会看到有compressed(已压缩)和uncompressed(未压缩)两种版本,使用时完全一样,但如果你想深入研究jQuery源码,那就用uncompressed版本。
jQuery 代码说明:
/*!
* jQuery JavaScript Library v3.5.1
* https://jquery.com/
*
* Includes Sizzle.js
* https://sizzlejs.com/
*
* Copyright JS Foundation and other contributors
* Released under the MIT license
* https://jquery.org/license
*
* Date: 2020-05-04T22:49Z
*/
2. jQuery使用
使用jQuery只需要在页面的<head>
引入jQuery文件即可:
这里jQuery链接为:http://code.jquery.com/jquery-1.11.3.min.js
,或者直接下载jQuery,然后添加本地链接地址。
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
...
</head>
<body>
...
</body>
</html>
3. $符号
$
是著名的jQuery符号。实际上,jQuery把所有功能全部封装在一个全局变量jQuery中,而$
也是一个合法的变量名,它是变量jQuery的别名:
window.jQuery; // jQuery(selector, context)
window.$; // jQuery(selector, context)
$ === jQuery; // true
typeof($); // 'function'
$
本质上就是一个函数,但是函数也是对象,于是$
除了可以直接调用外,也可以有很多其他属性。
4. 选择器
选择器是jQuery的核心。一个选择器写出来类似$('#dom-id')
。
// 按ID查找:
var a = document.getElementById('dom-id');
// 按tag查找:
var divs = document.getElementsByTagName('div');
// 查找<p class="red">:
var ps = document.getElementsByTagName('p');
// 过滤出class="red":
// TODO:
// 查找<table class="green">里面的所有<tr>:
var table = ...
for (var i=0; i<table.children; i++) {
// TODO: 过滤出<tr>
}
如果某个DOM节点有id
属性,利用jQuery查找如下:
// 查找<div id="abc">:
var div = $('#abc');
参考: