JavaScript+jQuery+ES6入门到放弃之jQuery基础

博主： Arvin
发布时间：2022 年 09 月 06 日
1709 次浏览
暂无评论
7732字数
分类： JavaScript

## 什么是jQuery？

概述：jQuery 是一个 JavaScript 函数库，jQuery 是一个轻量级的"写的少，做的多"的 JavaScript 库。

jQuery 库包含以下功能：

* HTML 元素选取
* HTML 元素操作
* CSS 操作
* HTML 事件函数
* JavaScript 特效和动画
* HTML DOM 遍历和修改
* AJAX
* Utilities

**提示：** 除此之外，jQuery 还提供了大量的插件。

## jQuery 安装

可以通过多种方法在网页中添加 jQuery。 您可以使用以下方法：

* 从 [jquery.com](http://jquery.com/download/) 下载 jQuery 库
  
  * Production version - 用于实际的网站中，已被精简和压缩。`jquery-版本号.min.js`
  * Development version - 用于测试和开发（未压缩，是可读的代码）`jquery-版本号.js`
* 从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery
  
  * 如果您不希望下载并存放 jQuery，那么也可以通过 CDN（内容分发网络） 引用它。
  * Staticfile CDN、百度、又拍云、新浪、谷歌和微软的服务器都存有 jQuery 。
  * 如果你的站点用户是国内的，建议使用百度、又拍云、新浪等国内CDN地址，如果你站点用户是国外的可以使用谷歌和微软。

**本地文件导入：** jQuery 库是一个 JavaScript 文件，您可以使用 HTML 的 `<script>` 标签引用它：`<script src="js/jquery-3.5.1.min.js"></script>`

**CND在线导入：**

```html
// CDNJS
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
// Staticfile CDN
<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
// BootCDN
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
// Microsoft CDN
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.1.js"></script>
// Google CDN
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
```

## 基础语法

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

基础语法：`$(selector).action()` 或 `jQuery(selector).action()`

* 美元符号定义 jQuery
* 选择符（selector）"查询"和"查找" HTML 元素
* jQuery 的 action() 执行对元素的操作
  
  * 事件处理方法
  * 动画方法
  * HTML/CSS方法
  * 遍历方法
  * Ajax方法
  * 杂项方法

### 文档就绪事件

**基础语法：**

```javascript
$(document).ready(function(){
   // 开始写 jQuery 代码...
});
```

实际开发中，通常使用 `ready()`方法实现在页面加载后执行操作

`$(document).ready()`与 `window.onload`类似，但也有区别

| 比较项   | window.onload                                                         | $(document).ready()                                                                                 |
| -------- | --------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- |
| 执行时机 | 必须等待网页中所有的内容加载完毕后（包括图片、视频、flash等）才能执行 | 网页中所有DOM文档结构绘制完毕后即刻执行，与DOM元素关联的内容（图片、视频、flash等）可能并没有加载完 |
| 编写次数 | 同一页面不能同时编写多个                                              | 同一页面能同时编写多个                                                                              |
| 简化写法 | 无                                                                    | $(  function() {       //执行代码 }  ) ;                                                            |

## dom对象和jQuery对象

DOM对象：直接使用JavaScript获取的节点对象

```javascript
var objDOM = document.getElementById("title");
var objHTML = objDOM.innerHTML;
```

jQuery对象：使用jQuery包装DOM对象后产生的对象，能够使用jQuery中的方法

```javascript
var $objJQuery = $("#title");
var objHTML = $objJQuery.html();
```

**注意：** DOM对象和jQuery对象的方法不能混用

</div>

## jQuery选择器

**概述：** jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"选择"（或查找）HTML 元素。 它基于已经存在的 [**CSS 选择器**](https://www.runoob.com/cssref/css-selectors.html)，除此之外，它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头：`$()`。

### 基础选择器

基础选择器包括ID选择器、类选择器、标签选择器、全局选择器和并集选择器

| 名称       | 语法构成                              | 描述                                   | 示例                                                     |
| ---------- | ------------------------------------- | -------------------------------------- | -------------------------------------------------------- |
| ID选择器   | #id                                   | 根据给定的id匹配元素                   | $("#title")选取id为title的元素                           |
| 类选择器   | .class                                | 根据给定的class匹配元素                | $(".title")选取所有class为title的元素                    |
| 标签选择器 | element                               | 根据给定的标签名匹配元素               | $("h2" )选取所有h2元素                                   |
| 全局选择器 | *                                     | 匹配所有元素                           | $("*")选取所有元素                                       |
| 并集选择器 | selector1, selector2, ...,  selectorN | 将每一个选择器匹配的元素合并后一起返回 | $("div,p,.title" )选取所有div、p和拥有class为title的元素 |

### 层次选择器

层次选择器通过DOM元素之间的层次关系来获取元素

| 名称           | 语法构成     | 描述                                           | 示例                                 |
| -------------- | ------------ | ---------------------------------------------- | ------------------------------------ |
| 后代选择器     | anc  dsct    | 选取ancestor元素里的所有descendant（后代）元素 | $("#menu span")选取#menu下的元素     |
| 子选择器       | parent>child | 选取parent元素下的child（子）元素              | $("#menu>span")选取#menu的子元素     |
| 相邻元素选择器 | prev+next    | 选取紧邻prev元素之后的next元素                 | $("h2+dl")选取紧邻元素之后的同辈元素 |
| 同辈元素选择器 | prev~sibings | 选取prev元素之后的所有siblings元素             | $("h2~dl")选取元素之后所有的同辈元素 |

### 过滤选择器

**基本过滤选择器**

| 语法           | 描述                                     | 示例                                         |
| -------------- | ---------------------------------------- | -------------------------------------------- |
| :first         | 选取第一个元素                           | $("li:first")选取所有元素中的第一个元素      |
| :last          | 选取最后一个元素                         | $("li:last")选取所有元素中的最后一个元素     |
| :not(selector) | 选取去除所有与给定选择器匹配的元素       | $("li:not(.three)")选取class不是three的元素  |
| :even          | 选取索引是偶数的所有元素（index从0开始） | $("li:even")选取所有元素中索引值是偶数的元素 |
| :odd           | 选取索引是奇数的所有元素（index从0开始） | $("li:odd")选取所有元素中索引值是奇数的元素  |
| :eq(index)     | 选取索引等于index的元素（index从0开始）  | $("li:eq(1)")选取索引等于1的元素             |
| :gt(index)     | 选取索引大于index的元素（index从0开始）  | $("li:gt(1)")选取索引大于1的元素             |
| :lt(index)     | 选取索引小于index的元素（index从0开始）  | $("li:lt(1)")选取索引小于1的元素             |
| :header        | 选取所有标题元素，如h1~h6                | $(":header")选取网页中所有标题元素           |
| :focus         | 选取当前获取焦点的元素                   | $(":focus")选取当前获取焦点的元素            |
| :animated      | 选择所有动画                             | $(":animated")选取当前所有动画元素           |

**属性选择器：** 属性选择器通过HTML元素的属性来选择元素

| 语法构成               | 描述                                 | 示例                                              |
| ---------------------- | ------------------------------------ | ------------------------------------------------- |
| `[attribute]`        | 选取包含给定属性的元素               | $("[href]")选取含有href属性的元素                 |
| `[attribute=value]`  | 选取等于给定属性是某个特定值的元素   | $("[href = '#']")选取href属性值为“#”的元素      |
| `[attribute!=value]` | 选取不等于给定属性是某个特定值的元素 | $("[href !=  '#']")选取href属性值不为“#”的元素  |
| `[attribute^=value]` | 选取给定属性是以某些特定值开始的元素 | $("[href ^= 'en']")选取href属性值以en开头的元素   |
| `[attribute$=value]` | 选取给定属性是以某些特定值结尾的元素 | 选取href属性值以.jpg结尾的元素                    |
| `[attribute*=value]` | 选取给定属性是以包含某些值的元素     | $("[href *= 'txt']")选取href属性值中含有txt的元素 |

### jQuery选择器注意事项

**特殊符号的转义：**

```html
<div id="id#a">aa</div>
<div id="id[2]">cc</div>

<script>
$("#id#a");   //无效
$("#id[2]");   //无效

$("#id\\#a");    //正常获取
$("#id\\[2\\]");    //正常获取
</script>
```

**选择器中的空格：**选择器的书写规范很严格，多一个空格或少一个空格，都会影响选择器的效果

```javascript
var $t_a = $(".test :hidden"); // 带空格的jQuery选择器    [选取class为“test”的元素内的所有隐藏元素]
var $t_b = $(".test:hidden");  // 不带空格的jQuery选择器  [选取class为“test”的隐藏元素]
```

## 解决jQuery和其他库的冲突

jQuery定义了**`jQuery.noConflict()`**方法，放弃对$的使用权

```javascript
jQuery.noConflict(); // 让渡$使用权，后续jQuery代码使用jQuery代替$
jQuery( document ).ready( … );
// 或者重新指定一个替代符号：
var  $j = jQuery.noConflict(); // 让渡$使用权，并指定用 $j 代替$
$j( document ).ready( … );
```

上面的代码改变了jQuery的编码风格，烦琐且不利于重用已有代码

推荐采用：

```javascript
jQuery.noConflict(); // 让渡$使用权，其他脚本库可以使用$
jQuery(document).ready(function ($) {
    // 在这里继续使用$编写jQuery代码
    $("#show").click( … );
});
```

或者：

```javascript
jQuery.noConflict(); // 让渡$使用权，其他脚本库可以使用$
(function ($) {
    // 在这里继续使用$编写jQuery代码
    $(document).ready(function () {
        $("#show").click( … );
    });
})(jQuery);
```

---

▶️ 开始学习下一章: [JavaScript+Jquery+ES6入门到放弃之jQuery操作DOM](https://jbea.cn/archives/569.html)

</div>

最后修改：2022 年 09 月 06 日

都滑到这里了，不点赞再走！？

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

评论 *

私密评论

名称 *

🎲

邮箱 *

地址

JavaScript+jQuery+ES6入门到放弃之jQuery基础

Arvin • 2022 年 09 月 06 日

## 什么是jQuery？

概述：jQuery 是一个 JavaScript 函数库，jQuery 是一个轻量级的"写的少，做的多"的 JavaScript 库。

jQuery 库包含以下功能：

* HTML 元素选取
* HTML 元素操作
* CSS 操作
* HTML 事件函数
* JavaScript 特效和动画
* HTML DOM 遍历和修改
* AJAX
* Utilities

**提示：** 除此之外，jQuery 还提供了大量的插件。

## jQuery 安装

可以通过多种方法在网页中添加 jQuery。 您可以使用以下方法：

**本地文件导入：** jQuery 库是一个 JavaScript 文件，您可以使用 HTML 的 `<script>` 标签引用它：`<script src="js/jquery-3.5.1.min.js"></script>`

**CND在线导入：**

## 基础语法

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

基础语法：`$(selector).action()` 或 `jQuery(selector).action()`

### 文档就绪事件

**基础语法：**

```javascript
$(document).ready(function(){
   // 开始写 jQuery 代码...
});
```

实际开发中，通常使用 `ready()`方法实现在页面加载后执行操作

`$(document).ready()`与 `window.onload`类似，但也有区别

## dom对象和jQuery对象

DOM对象：直接使用JavaScript获取的节点对象

```javascript
var objDOM = document.getElementById("title");
var objHTML = objDOM.innerHTML;
```

jQuery对象：使用jQuery包装DOM对象后产生的对象，能够使用jQuery中的方法

```javascript
var $objJQuery = $("#title");
var objHTML = $objJQuery.html();
```

**注意：** DOM对象和jQuery对象的方法不能混用

</div>

## jQuery选择器

**概述：** jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。

jQuery 中所有选择器都以美元符号开头：`$()`。

### 基础选择器

基础选择器包括ID选择器、类选择器、标签选择器、全局选择器和并集选择器

### 层次选择器

层次选择器通过DOM元素之间的层次关系来获取元素

### 过滤选择器

**基本过滤选择器**

**属性选择器：** 属性选择器通过HTML元素的属性来选择元素

### jQuery选择器注意事项

**特殊符号的转义：**

```html
<div id="id#a">aa</div>
<div id="id[2]">cc</div>

<script>
$("#id#a");   //无效
$("#id[2]");   //无效

$("#id\\#a");    //正常获取
$("#id\\[2\\]");    //正常获取
</script>
```

**选择器中的空格：**选择器的书写规范很严格，多一个空格或少一个空格，都会影响选择器的效果

## 解决jQuery和其他库的冲突

jQuery定义了**`jQuery.noConflict()`**方法，放弃对$的使用权

上面的代码改变了jQuery的编码风格，烦琐且不利于重用已有代码

推荐采用：

或者：

---

▶️ 开始学习下一章: [JavaScript+Jquery+ES6入门到放弃之jQuery操作DOM](https://jbea.cn/archives/569.html)

</div>

JavaScript+jQuery+ES6入门到放弃之jQuery基础

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

Java基础之JDK的安装

开启Visual Studio Code编写jQuery语法提示

C#-WinForms实现手写板

使用GSAP实现滚动条交互动画

HTML从入门到精通 - 初识HTML

float和double使用时的大坑

来自胡福厚同学的项目总结

来自肖嘉乐同学的项目总结

JavaScript+jQuery+ES6入门到放弃之BOM操作

使用HTML5和CSS3制作商业站点-全套笔记分享

JavaScript+jQuery+ES6入门到放弃之jQuery基础

发表评论 取消回复 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

JavaScript+jQuery+ES6入门到放弃之jQuery基础

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款