JQuery简介 - 什么是jQuery

叁歲伎倆 2023-06-30 06:44 29阅读 0赞

### 概念 ###

> **官方概念：**
> 
> jQuery是一个快速，小型且功能丰富的JavaScript库。借助易于使用的API（可在多种浏览器中使用），使HTML文档的遍历和操作，事件处理，动画和Ajax等事情变得更加简单。

> **个人理解：**
> 
> jQuery是JavaScript的一个工具库，工具库就是指封装好的JavaScript函数，可以直接在程序中进行调用，那jQuery就是一款非常流行的JavaScript库。jQuery设计的宗旨是“写更少的代码，做更多的事情”。jQuery库封装了JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

### jQuery 优点 ###

*  **占用空间少：**
    
    缩小并压缩后的jQuery文件只有30KB。
 *  **符合CSS3规范：**
    
    支持CSS3选择器查找元素以及样式属性操作。
 *  **跨浏览器：**
    
    jQuery兼容各种主流浏览器，如IE、Chrome、Firefox、Safari、Opera等。

### jQuery 特点 ###

**快速获取文档元素**

jQuery的选择机制构建于Css的选择器，它提供了快速查询DOM文档中元素的能力，而且大大强化了JavaScript中获取页面元素的方式。

**提供漂亮的页面动态效果**

jQuery中内置了一系列的动画效果，可以开发出非常漂亮的网页，许多网站都使用jQuery的内置的效果，比如淡入淡出、元素移除等动态特效。

**创建AJAX无刷新网页**

AJAX是异步的JavaScript和XML的简称，可以开发出非常灵敏无刷新的网页，特别是开发服务器端网页时，比如PHP网站，需要往返地与服务器通信，如果不使用AJAX，每次数据更新不得不重新刷新网页，而使用AJAX特效后，可以对页面进行局部刷新，提供动态的效果。

**提供对JavaScript语言的增强**

jQuery提供了对基本JavaScript结构的增强，比如元素迭代和数组处理等操作。

**增强的事件处理**

jQuery提供了各种页面事件，它可以避免程序员在HTML中添加太多事件处理代码，最重要的是，它的事件处理器消除了各种浏览器兼容性问题。

**更改网页内容**

jQuery可以修改网页中的内容，比如更改网页的文本、插入或者翻转网页图像，jQuery简化了原本使用JavaScript代码需要处理的方式。

### jQuery 语法 ###

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

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

*  美元符号定义 jQuery
 *  选择符（selector）“查询"和"查找” HTML 元素
 *  jQuery 的 action() 执行对元素的操作

示例：

* `$(this).hide()` \- 隐藏当前元素
 * `$("p").hide()` \- 隐藏所有``元素
 * `$("p.test").hide()` \- 隐藏所有 `class="test"` 的``元素
 * `$("#test").hide()` \- 隐藏所有 `id="test"` 的元素

### jQuery 示例 ###

#### 选择器 ####

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

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的CSS 选择器，除此之外，它还有一些自定义的选择器。

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

> **元素选择器**

jQuery 元素选择器基于元素名选取元素。

$("p")

在页面中选取所有``元素。

> **id选择器**

jQuery `#id` 选择器通过 HTML 元素的 id 属性选取指定的元素。

页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 `#id` 选择器。  
通过 id 选取元素语法如下：

$("#test")

> **class选择器**

Query 类选择器可以通过指定的 class 查找元素。

语法如下：

$(".test")

#### 事件处理 ####

> **jQuery 事件方法语法**

在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。

页面中指定一个点击事件：

$("p").click();

下一步是定义什么时间触发事件。您可以通过一个事件函数实现：

$("p").click(function(){ 
        // 动作触发后执行的代码!!
    });

> **常用的 jQuery 事件方法**

**文档就绪事件**

`$(document).ready()` 方法表示在文档完全加载完后执行函数。该事件方法在所有jQuery代码之前编写，在开发时，所有的jQuery代码实例都要放到`ready()`的回调函数中，示例如下：

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

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。

如果在文档没有完全加载之前就运行函数，就会报错。例如获取一个不存在的元素等等。

该事件还有一种简化的写法：

$(function(){ 
       // 开始写 jQuery 代码...
    });

上面代码示例中的简化方法和使用`$(document).ready()` 方法的效果相同。

**鼠标事件**

`click()`函数在用户使用鼠标左键点击 HTML 元素时执行。

在下面的实例中，当点击事件在某个 ``元素上触发时，隐藏当前的``元素：

$("p").click(function(){ 
        $(this).hide();
    });

鼠标事件还有很多方法，比如：

*  `dblclick()` \- 鼠标双击事件
 *  `mouseenter()` \- 鼠标进入某元素事件
 *  `mouseleave()` \- 鼠标离开某元素事件
 *  `mousedown()` \- 鼠标按下事件
 *  `mouseup()` \- 鼠标松开事件
 *  `hover()` \- 鼠标光标悬停事件

除了上述的事件外，还有键盘事件、表单事件、窗口事件等，我们会在后面的章节中给大家做详细介绍。

### 经验分享 ###

jQuery是一款优秀的JavaScript库，jQuery设计者的宗旨是“write less，do more”，即少写代码，多做事。那在使用jQuery完成比较复杂的页面开发时，可以快速的获取DOM元素，并且快速的修改DOM元素的样式，这比使用原生的JS简单多了，而且jQuery还提供了一些实现动画及特效的函数，可以快速实现复杂的用户交互效果，用起来是很爽的！

不过，我们在学习jQuery之前，最好是有一定的JavaScript基础和使用JS原生开发的能力，因为只有对原始JavaScript比较了解之后，再学习jQuery，才能体会到jQuery的优势，并且让我们可以快速理解jQuery的设计原理。jQuery虽然在操作DOM元素和实现用户交互时很好用，但是在处理业务逻辑比较复杂的需求时，还是要使用原生JavaScript来实现，jQuery可以作为辅助工具来使用。

> 微信交流：zzxingyun