jQuery 基础

### 什么是jQuery：

jQuery是一个开源的函数库，高度封装了**DOM操作**、**事件**、**动画**、**AJAX**、**工具函数**等功能，而且每一个`API`的底层实现都实现了不同浏览器之间的兼容性，让你专心编写逻辑代码，而不要浪费时间在处理兼容性的问题上。总而言之，`jQuery`的目标就是让开发者**写得更少，做得更多**！

### jQuery核心功能选择器：

1. `*`：选取所有元素。

2. `p`：选取所有的p标签。

3. `#test`：选取`id`为`test`的标签。

4. `.test`：选取所有`class`为`test`的标签。

5. `:button`：选取所有`type`为`button`的元素。

6. `div > p`：选取`div`下面的所有子p元素。注意，这个只包括直接子元素。

7. `div p`: 选取`div`下面的所有P元素.

7. `eq(index)`：对一个已经选取后的元素集选取索引值为index的元素。

8. `gt(index)`：对一个已经选取后的元素集选取索引值大于index的元素。

9. `lt(index)`：对一个已经选取后的元素集选取索引值小于index的元素。

10. 只要是CSS中能用的选择器,Jq中都能用.

`runoob:http://www.runoob.com/jquery/jquery-tutorial.html`

`jquery:http://api.jquery.com/`

### jQuery核心功能事件：

jquery封装了js中的所有事件，并且针对不同的浏览器做了一些兼容性处理。使用方式是：

```javascript

$("p").click(function(){

// 动作触发后执行的代码!!

});

```

以下将对一些常用事件进行讲解：

1. `click`事件：点击事件。

2. `onload和document.ready`事件：前者是js的DOM中标准的方法，后者是jquery自己创建的一个方法，ready方法是所有文档元素一旦准备好了，就执行回调，而onload方法是页面中所有的元素都加载完毕了才会执行。

3. `mouseenter`事件：鼠标移动到某个元素上面的事件。

4. `mouseleave`事件：鼠标移出某个元素的事件。

5. `hover`事件：鼠标移动到某个元素和鼠标移出到某个元素的事件。相当于`mouseenter`和`mouseleave`两个事件的集合。

### jQuery核心功能效果：

jquery封装了一套动画效果方法，这些方法在js中是不存在的，jquery是通过修改一系列属性和CSS样式并添加过渡事件来达到这种目的的。以下将对一些常用的效果进行讲解：

1. `hide(duration,callback)`方法：隐藏某个元素，只是把`display`属性修改为`none`，可以提供了一个过渡事件。`duration`默认的时间是400毫秒.

2. `show(duration,callback)`方法：显示某个元素，可以提供一个动画。

3. `toggle(duration,callback)`方法：如果一个元素已经显示了，那么将他隐藏，如果一个元素已经隐藏了，将他显示。

3. `fadeIn(speed,callback)`：有动画效果的显示一个元素，speed用于指示一个元素持续的时间，callback用于表示执行完这个动画后执行的方法。

4. `fadeOut(speed,callback)`：把一个元素隐藏，隐藏后从DOM中删除这个元素。

5. `fadeTo(speed,opacity,callback)`：把一个元素的透明度修改到opacity这个值指的数值。

6. `animate({params},speed,callback)`：所有动画的最基础的方法。params是一个字典，用于修改要动画的CSS样式，speed表示这个动画持续的时间，callback表示这个动画执行结束后的回调。

### jQuery核心功能DOM操作

`DOM`的全称是`Document Object Model`（文档对象模型）。是`jquery`最核心的功能，包括对标签元素的增删改查等，以下将对这些方法进行讲解。

1. 获取和设置内容：`text()`用于获取和设置元素中的文本内容，`html()`用户获取和设置元素中的所有子元素及其文本内容，`val()`用于获取和设置元素的`value`值。`attr()`用户获取和设置标签元素的属性。

2. 添加元素：`append()`在某个元素后面添加子元素。`prepend()`在某个元素最前面添加子元素。`after`在某个元素后面添加一个兄弟元素。`before`在某个元素前面添加一个兄弟元素。

3. 删除元素：`remove()`方法将选中的元素进行删除，可以增加一个过滤条件进行过滤。`empty()`方法将选中的所有子元素都清空。

4. 操作CSS：`addClass()`方法可以向被选中的元素添加一个或多个类，`removeClass`方法可以向被选中的元素删除一个或多个类，`css()`方法可以设置或返回`css`属性。

5. 尺寸：

* width()/height()：返回盒子的真实宽度和高度。

* innerWidth()/innerHeight()：返回盒子的`真实宽度+padding的宽度`，高度同理。

* outerWidth()/outerHeight()：返回盒子的`真实宽度+padding的宽度+边框的宽度`，高度同理。

* outerWidth(true)/outerHeight(true)：返回盒子的`真实宽度+padding的宽度+边框的宽度+外边距的宽度`，高度同理。

### jQuery核心功能DOM元素遍历

`DOM`元素遍历可以在`DOM`树中向上、向下、平行的遍历所有的`DOM`元素，这在开发中查找相关元素的时候特别有用，以下将对这些方法进行讲解：

1. `parent()`方法：获得被选中元素的直接父元素。

2. `children()`方法：获取被选中元素的所有直接子元素，也可以传入参数，进行再次的过滤。

3. `find()`方法：获取被选中元素的所有子孙元素，可以传入参数进行过滤。

4. `siblings()`方法：返回所有和选中元素同级的元素，可以传入参数进行过滤。

5. `next()`方法：返回被选中元素的下一个同胞元素，该方法只能返回一个元素。

6. `nextAll()`方法：返回被选中元素的之后的所有同胞元素。

7. `prev()`方法：返回被选中元素之前的上一个同胞元素。

8. `prevAll()`方法：返回被选中元素之前的所有同胞元素。

9. `first()`方法：返回被选中的元素中的第一个元素。

10. `last()`方法：返回被选中的元素中的最后一个元素。

11. `eq(index)`方法：返回被选中的元素位置为index的元素。

12. `filter(args)`方法：返回被选中的元素中再满足args条件元素。

13. `not(args)`方法：通`filter`函数类似，只不过满足了这个条件就会被过滤掉。

### jQuery核心功能AJAX

`AJAX`的全称是`Asynchronous JavaScript And XML`.中文名是异步的Javascript和XML。简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。原生js写ajax特别麻烦，而且涉及到兼容性问题，但是用jqeury可以轻松实现，而不用关心底部具体的实现细节，以下将对`ajax`的几种方法进行讲解。

1. `$.get(url,[params])`方法：向`url`这个地址发送一个get请求，数据可以放在`params`这个参数中。

2. `$.post(url,[params])`方法：向`url`这个地址发送一个post请求，数据可以放在`params`这个参数中。

3. `$.ajax(url,[params])`方法：以上两个方法的底层实现。

### 其他

1. `each`方法：遍历`jquery`元素集。

2. `index()`：返回当前被选中元素在所有同级元素中的索引值。

3. `get()`：返回当前`jquery`元素的原生`DOM`元素。