jQuery 库学习

jQuery是一个快速、小而功能丰富的JavaScript库。它使得HTML文档遍历和操作、事件处理、动画和Ajax等事情变得更加简单，它提供了一个易于使用的API，可以跨多种浏览器工作。jQuery结合了通用性和可扩展性。

下载 jQuery

共有两个版本的 jQuery 可供下载：一份是精简过的，另一份是未压缩的（供调试或阅读）。

这两个版本都可从 jQuery.com 下载。

Google CDN:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">

Microsoft CDN:

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js

jQuery 语法

jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。

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

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

jQuery 元素选择器

jQuery 使用 CSS 选择器来选取 HTML 元素。

$("p") 选取 <p> 元素。

$("p.intro") 选取所有 class="intro" 的 <p> 元素。

$("p#demo") 选取所有 id="demo" 的 <p> 元素。

jQuery 属性选择器

jQuery 使用 XPath 表达式来选择带有给定属性的元素。

$("[href]") 选取所有带有 href 属性的元素。

$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

jQuery CSS 选择器

jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

下面的例子把所有 p 元素的背景颜色更改为红色：

$("p").css("background-color","red");

jQuery 动画效果         

提示：Chaining 允许我们在一条语句中允许多个 jQuery 方法（在相同的元素上）。

方法	参数	效果
$(selector).hide(speed,callback); $(selector).show(speed,callback);	speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。 callback 参数是隐藏或显示完成后所执行的函数名称。	元素的显示 / 隐藏
$(selector).fadeIn(speed,callback); $(selector).fadeOut(speed,callback); $(selector).fadeToggle(speed,callback); $(selector).fadeTo(speed,opacity,callback);	speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。 callback 参数是隐藏或显示完成后所执行的函数名称。	元素的淡入淡出 （fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。）
$(selector).slideDown(speed,callback); $(selector).slideUp(speed,callback); $(selector).slideToggle(speed,callback);	speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。 callback 参数是隐藏或显示完成后所执行的函数名称。	元素的上下滑动 （slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。）
$(selector).animate({params},speed,callback);	params (必须)参数定义形成动画的 CSS 属性。 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。 callback 参数是动画完成后所执行的函数名称。 队列功能：创建包含这些方法调用的“内部”队列。然后逐一运行。 相对值：自定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=： 提示：如需对位置进行操作，首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！	创建自定义的动画
$(selector).stop(stopAll,goToEnd);	stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。 goToEnd 参数规定是否立即完成当前动画。默认是 false。	动画或效果完成前对它们进行停止

jQuery HTML

• text() - 设置或返回所选元素的文本内容
• html() - 设置或返回所选元素的内容（包括 HTML 标记）
• val() - 设置或返回表单字段的值
• attr() - 方法也允许您设置属性。（可以同时多个）

        text()、html() 以及 val()，同样拥有回调函数。回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。

        attr()，也提供回调函数。回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

添加新内容的四个方法：

• append() - 在被选元素的结尾插入内容
• prepend() - 在被选元素的开头插入内容
• after() - 在被选元素之后插入内容
• before() - 在被选元素之前插入内容

删除元素/内容：

• remove() - 删除被选元素（及其子元素）
• empty() - 从被选元素中删除子元素

操作 CSS：

• addClass() - 向被选元素添加一个或多个类
• removeClass() - 从被选元素删除一个或多个类
• toggleClass() - 对被选元素进行添加/删除类的切换操作
• css() - 设置或返回样式属性

处理尺寸的重要方法：

• width()                设置或返回元素的宽度（不包括内边距、边框或外边距）
• height()              设置或返回元素的高度（不包括内边距、边框或外边距）
• innerWidth()      返回元素的宽度（包括内边距）
• innerHeight()     返回元素的高度（包括内边距）
• outerWidth()     返回元素的宽度（包括内边距和边框）
• outerHeight()    返回元素的高度（包括内边距和边框）

jQuery  AJAX

        jQuery load() 方法是简单但强大的 AJAX 方法。从服务器加载数据，并把返回的数据放入被选元素中。

语法：$(selector).load( URL ,  [data] ,  [callback]  );

jQuery 中发起Ajax 最常用三种方法

• $.get()        语法：  $.get(  url,    [data],   [callback]  )       
• $post()​​​​​​       语法：  $.post(  url,    [data],   [callback]  )  
• $ajax()       语法：  $.ajax( {    type:'' ,                            //请求方式，例：'GET','POST'

                                                        url:'',                                //请求URL地址

                                                ​​​​​​​        ​​​​​​​data:{},                             //请求携带数据

​​​​​​​​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        success:funtion(res){}   //请求成功回调函数

​​​​​​​​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​        ​​​​​​​         } )  

注：url (string) 请求地址   data(object) 提交数据  callback(function)回调函数

 接口文档结构：

1. 接口名称：用于识别各个接口的简单说明。
2. 接口URL:  接口调用地址。
3. 调用方式：接口调用方式，例如 GET或POST 。
4. 参数格式： 接口需要传递参数（参数名称，参数类型，是否必选，参数说明）。
5. 响应格式： 接口返回值详细说明（数据名称，数据类型，说明）。
6. 返回实例（可选）： 列举服务器返回数据结构。