### JQuery的小小总结
#### 一、概述
JQuery是一种流行的JavaScript库，它极大地简化了JavaScript编程中的HTML文档遍历、事件处理、动画以及Ajax交互等任务。由于其易用性和强大的功能，JQuery成为了前端开发中最受欢迎的库之一。
#### 二、选择器
JQuery的一个核心特性是其丰富的选择器机制，它允许开发者快速地选取DOM中的元素并对其进行操作。以下是一些常用的选择器示例：
- `$("xxx")`：选取页面中所有名称为`xxx`的HTML标签元素。
- `$("p#demo")`：选取所有`id="demo"`的`<p>`元素。
- `$("p.style")`：选取所有类名为`style`的`<p>`元素。
- `$("#demo")`：选取文档中`id="demo"`的所有元素（一个文档中每个ID应该是唯一的）。
- `$(".style")`：选取所有类名为`style`的元素。
- `$("a[href]")`：选取所有带有`href`属性的`<a>`元素。
- `$("a[href='#']")`：选取所有带有`href`属性且其值为`#`的`<a>`元素。
- `$("a[href!='#']")`：选取所有带有`href`属性且其值不等于`#`的`<a>`元素。
- `$("a[href$='.jpg']")`：选取所有带有`href`属性且其值以`.jpg`结尾的`<a>`元素。
这些选择器可以帮助开发者高效地定位到需要操作的DOM元素。
#### 三、获取元素集合中的具体项
通过JQuery选择器获取的通常是元素的集合，如果需要获取集合中的某个具体元素，可以使用`eq(index)`方法：
```javascript
$("div").eq(1).hide(); // 隐藏当前页面中第2个div元素
```
如果不获取具体元素而直接调用方法，则会作用于整个元素集合：
```javascript
$("#demo").hide(); // 隐藏当前页面中所有id="demo"的元素
```
#### 四、jQuery对象与DOM对象的区别
- **jQuery对象**：使用JQuery选择器获取的元素是jQuery对象，它可以调用JQuery的方法。
- **DOM对象**：JavaScript原生操作DOM获取的对象是DOM对象，它只能使用DOM的方法。
从jQuery对象转换为DOM对象的方法包括`get(index)`和`[index]`：
```javascript
// 获取当前页面中的第1个div元素的DOM对象
$("div").get(0); // 或 $("div")[0] 或 $("div").eq(0)[0]
```
特别注意：jQuery对象只能使用jQuery方法，而DOM对象只能使用DOM方法。
#### 五、引用jQuery库文件
为了使用JQuery的功能，需要在项目中引入jQuery库文件。通常可以从jQuery官网下载或使用第三方CDN服务提供的库文件，例如：
- Google CDN提供的1.7.0版本的JQuery文件：`http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js`
- 微软提供的1.7.0版本的JQuery文件：`http://ajax.microsoft.com/ajax/jquery/jquery-1.7.min.js`
#### 六、执行入口
确保JQuery文件加载完成后才执行JQuery代码非常重要。为此，所有的JQuery代码都应该放在`$(document).ready(function(){...})`内部：
```javascript
$(document).ready(function(){
// 在这里编写JQuery代码
});
```
#### 七、避免命名冲突
有时其他JavaScript库也可能使用 `$` 符号，这会导致命名冲突。为了解决这个问题，JQuery提供了`$.noConflict()`方法：
```javascript
var jq = $.noConflict(); // 将$的职权让渡给jq
jq("div").hide(); // 使用jq代替$
```
#### 八、JQuery方法概览
JQuery提供了大量内置方法来简化常见的Web开发任务，如事件处理、动画、Ajax请求等。例如：
- **事件处理**：绑定事件处理器。
- **动画效果**：实现复杂的动画效果。
- **页面元素操作**：添加、删除或替换DOM元素。
- **操作页面元素的属性**：读取或修改元素的属性。
- **CSS操作**：更改元素的样式。
- **Ajax**：发送异步HTTP请求。
- **遍历集合**：遍历元素集合。
- **数据流和函数流的操作**：处理数据流和函数调用。
- **DOM元素操作**：操作DOM元素。
JQuery是一个功能强大且易于使用的JavaScript库，极大地简化了许多Web开发任务。通过掌握上述知识点，开发者可以更加高效地进行前端开发工作。
