一、简介与安装
jQuery是一个JavaScript函数库。
jQuery是一个轻量级的"写的少，做的多"的JavaScript库
jQuary 主要功能包括如下：
- html 的元素选取
- html的元素操作
- html dom遍历和修改
- js特效和动画效果
- css操作
- html事件操作
- ajax异步请求方式
网页中添加jQuary有两种方式：
-
第一种是在官网下载jQuary库，然后在
<head>标签中添加使用HTML的<script>标签引用它,或者在<body>标签的最后引用它，需要注意的是要将jQuery的引用放在所有js引用的最前边，避免引入其他js文件时对它的调用造成影响。<script src="js/jquery-1.11.1.min.js"></script>
我们下载的jQuery库时有两个版本可供选择：
* Production version —— 用于实际的网页开发，jQuery文件是被压缩和精简的
* Development version —— 用于开发测试，jQuery文件具有可读性
-
第二种是通过 CDN 引用它，百度、谷歌、微软、新浪、菜鸟教程等的服务器都存有jQuery，我们可通过
<script>标签的src引用他们的CDN 库。注意：国内的建议使用百度、新浪等国内CDN地址，国外的可以使用谷歌和微软。 下面简单举两个例子：- 百度 CDN:
<head> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script> </head>- 新浪 CDN:
<head> <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"> </script> </head>
二、基础内容
1. 选择器
通过选择器我们可以多单个或者多个HTML元素进行操作。jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。
以美元符号开头： $() 来获取。
实例：
| 语法 | 描述 |
|---|---|
| $("p") | 元素选择器,获取页面中所有的<p>标签 |
| $("#test") | #id 选择器，获取id为test的元素，页面中id是唯一的 |
| $(".test") | .class 选择器，获取class为test的元素 |
| $("*") | 选取所有元素 |
| $(this) | 选取当前 HTML 元素 |
| $("p.intro") | 选取 class 为 intro 的<p>元素 |
| $("p:first") | 选取第一个<p>元素 |
| $("ul li:first") | 选取第一个<ul>元素的第一个<li>元素 |
| $("ul li:first-child") | 选取每个<ul>元素的第一个<li>元素 |
| $("[href]") | 选取带有 href 属性的元素 |
| $("a[target='_blank']") | 选取所有 target 属性值等于 "_blank" 的 <a> 元素 |
| $("a[target!='_blank']") | 选取所有 target 属性值不等于 "_blank" 的<a>元素 |
| $(":button") | 选取所有 type="button"的 <input>元素 和 <button> 元素 |
| $("tr:even") | 选取偶数位置的 <tr> 元素 |
| $("tr:odd") | 选取奇数位置的 <tr> 元素 |
2. 语法
* jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。写法如下：
```
$(selector).action();
$("#test").hide(); - 隐藏所有 id="test" 的元素
```
* 文档就绪事件
为了防止文档在完全加载（就绪）之前运行 jQuery 代码,我们可以将标签的初始化事件和方法的绑定在如下函数中操作。
```
$(document).ready(function(){
// 开始写 jQuery 代码...
});
也可以简写为：
$(function(){
// 开始写 jQuery 代码...
});
```
3. 事件
| 鼠标 事件 | 鼠标事件触发方式 |
|---|---|
| click | 用户点击 HTML 元素时 |
| dblclick | 双击元素 |
| mouseenter | 鼠标指针穿过元素 |
| mouseleave | 鼠标指针离开元素 |
| mousedown | 鼠标指针移动到元素上方，并按下鼠标按键 |
| mouseup | 在元素上松开鼠标按钮 |
| hover | 当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave) |
| 键盘事件 | 键盘事件触发方式 |
| keypress | |
| keydown | 在键盘按下时触发 |
| keyup | 在按键释放时触发 |
| 表单事件 | 表单事件触发方式 |
| submit | 提交表单 |
| change | 元素的值发生改变 |
| focus | 元素获得焦点 |
| blur | 元素失去焦点 |
| 文档/窗口事件 | 文档/窗口事件触发方式 |
| load | 指定的元素（及子元素）已加载，适用于任何带有 URL 的元素（比如图像、脚本、框架、内联框架） |
| resize | 调整浏览器窗口的大小 |
| scroll | 所有可滚动的元素和 window 对象滚动 |
| unload | 用户离开页面 |
三、页面效果
| 方法 | 描述 |
|---|---|
| show() | 显示 |
| hide() | 隐藏 |
| toggle() | 切换 hide() 和 show() 方法 |
| fadeIn() | 淡入已隐藏的元素 |
| fadeOut() | 淡出可见元素 |
| fadeToggle() | fadeIn() 与 fadeOut() 方法之间进行切换 |
| fadeTo() | 渐变为给定的不透明度（值介于 0 与 1 之间） |
| slideDown() | 向下滑动元素 |
| slideUp() | 向上滑动元素 |
| slideToggle() | 在 slideDown() 与 slideUp() 方法之间进行切换 |
| animate() | 添加动画效果，可操作所有 CSS 属性，也可添加动画队列，实现一系列的动画效果 |
| stop() | 停止动画或效果，在它们完成之前，参数属性： stopAll 参数规定是否应该清除动画队列；goToEnd 参数规定是否立即完成当前动画 |
注：以上方法除标注不带参数的都可带有参数，speed代表速度；callback代表完成后所执行的函数。
四、页面元素 HTML
-
获取内容
- text() — 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容，包括 HTML 标记（span标签）
- val() - 设置或返回表单字段的值（input、 div标签）
jQuery HTML 属性操作方法
| 方法 | 描述 |
|---|---|
| val() | 设置或返回匹配元素的值 |
| html() | 设置或返回匹配的元素集合中的 HTML 内容 |
| attr() | 设置或返回匹配元素的属性和值 |
| addClass() | 向匹配的元素添加指定的类名 |
| hasClass() | 检查匹配的元素是否拥有指定的类 |
| removeAttr() | 从所有匹配的元素中移除指定的属性 |
| removeClass() | 从所有匹配的元素中删除全部或者指定的类 |
| toggleClass() | 从匹配的元素中添加或删除一个类 |
| append() | 在被选元素的结尾插入内容 |
| prepend() | 在被选元素的开头插入内容 |
| after() | 在被选元素之后插入内容 |
| before() | 在被选元素之前插入内容 |
| width() | 设置或返回元素的宽度（不包括内边距、边框或外边距） |
| height() | 设置或返回元素的高度（不包括内边距、边框或外边距） |
| innerWidth() | 返回元素的宽度（包括内边距） |
| innerHeight() | 返回元素的高度（包括内边距） |
| outerWidth() | 返回元素的宽度（包括内边距和边框） |
| outerHeight() | 返回元素的高度（包括内边距和边框） |
| empty() | 删除被选元素的子元素 |
| remove() | 删除被选元素及其子元素 $("p").remove(".italic");过滤被删除的元素 |
五、与后台的交互 Ajax
AJAX 是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新。它不是一种新的编程语言，而是一种使用现有标准的新方法。
AJAX = 异步 JavaScript 和 XML。
通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。
load() 方法
此方法是jQuery从后台加载数据，并将返回的数据展示在页面中。
语法：
$(selector).load(URL,data,callback);
load()方法也可以加载本地文件
必需的 URL 参数规定您希望加载的 URL。
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
-
可选的 callback 参数是 load() 方法完成后所执行的函数名称。回调函数还可以设置不同的参数：
- responseTxt - 包含调用成功时的结果内容
- statusTXT - 包含调用的状态
- xhr - 包含 XMLHttpRequest 对象
$("button").click(function(){
$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("外部内容加载成功!");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});
```
HTTP 网络请求 GET POST
jQuery中客户端与服务端有两种方式进行交互，常用的方法就是GET 和 POST：
| 方法 | 描述 |
|---|---|
| GET | 从指定的资源请求数据,基本上用于从服务器获得（取回）数据,可能返回缓存数据 |
| POST | 向指定的资源提交要处理的数据，也可以从服务端返回数据，但不会缓存数据，常用于请求时上传数据 |
$.get() 方法
$.get() 方法通过 HTTP GET 请求从服务器上请求数据。
基本语法：
$.get(URL,callback);
实例：
$("button").click(function(){
$.get("demo_test.php",function(data,status){
alert("数据: " + data + "\n状态: " + status);
});
});
$.post() 方法
$.post() 方法通过 HTTP POST 请求从服务器上请求数据。
基本语法：
$.post(URL,data,callback);
实例：
$("button").click(function(){
$.post("/try/ajax/demo_test_post.php",
{
name:"biubiubiu",
url:"http://eyimu.com"
},
function(data,status){
alert("数据: \n" + data + "\n状态: " + status);
});
});
