jQuery.js库

1. 教程

(1) 简介

JQuery 是一个 JavaScript 函数库。( jQuery.js )

(2) 安装

在页面中正确的引入相应的 jQuery 版本，因为是一个 JS 库： <script src="jquery-1.12.0.min.js"></script>

(3) 语法

selector: 选择器。
action: 操作名称。
$(selector).action() 或者 jQuery(selector).action();

(4) 选择器

CSS 语法中的选择器可以在 jQuery 中套用。

(5) 事件

event: 事件名称。
$(selector).event();

2. 效果

(1) 隐藏/显示

speed: 速度( value：slow/fast/normal/msec(毫秒数) )。
callback: 回叫信号( value: function(){} )。
$(selector).hide(speed, callback); 隐藏。
$(selector).show(speed, callback); 显示。
$(selector).toggle(speed, callback);  隐藏/显示相互切换。

(2) 淡入/淡出

fade: 变色。
opatcity: 不透明( value: 0~1 )。
$(selector).fadeIn(speed, callback); 淡入已隐藏的元素
$(selector).fadeOut(speed, callback); 淡出可见元素
$(selector).fadeToggle(speed, callback); 淡入/淡出相互切换
$(selector).fadeTo(speed, opatcity, callback); 允许渐变为给定的不透明度

(3) 滑动

slide：滑动。
$(selector).slideDown(speed, callback); 
$(selector).slideUp(speed, callback);
$(selector).slideToggle(speed, callback);

(4) 动画

params: CSS中的样式，只有 value 是 number 的样式才有效果。且多个效果用分号隔开。
$(selector).animate({params}, speed, callback);

(5) 停止动画

stopAll: 是否清除动画队列默认 false。
goTOEnd: 是否立即完成动画默认 false。
$(selector).stop(stopAll, goTOEnd);

(6) Callback

函数在动画完成后执行。

(7) Chaning

把动作/方法连接在一起，jQuery 就属于链式特性，因为它返回值是一个对象。所以可以一直点下去。

3. HTML

(1) 获取内容和属性

• 获取内容

text(value/function(){});
html(value/function(){});
val(value/function(){});

• 获取属性

attr(attribute, value/function(){});

(2) 添加元素

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

(3) 删除元素

remove([selector]); 删除被选元素（及其子元素）方法也可接受一个参数，允许您对被删元素进行过滤。
empty(); 从被选元素中删除子元素

(4) 获取并设置 CSS 类

addClass("classNmae1 name2"); 元素添加 class 属性,同时添加不同 class 用空格隔开
removeClass("className"); 删除指定的 class 属性。 
toggleClass("classNmae"); 元素进行添加/删除类的切换操作。
css();

(5) CSS()

设置或返回被选元素的一个或多个样式属性。

css("propertyName"); 获取样式。
css("rropertyName", "value"); 设置样式。
eg：
    css("background-color", "red");
    css({"propertyName": "value", "propertyName1": "value1", ...});

(6) 尺寸

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

4. 遍历

用于根据其相对于其他元素的关系来"查找"（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。

(1) 祖先

向上遍历 DOM 树。

parent(); 返回父元素。
parents([selector]); 返回所有祖先元素。传入一个参数进行筛选。
parentUntil([selector]); 返回介于两个给定元素之间的所有祖先元素。

(2) 后代

子元素。

children([selector]); 返回被选元素的所有直接子元素。
find([selector]); 返回被选元素的后代元素，一路向下直到最后一个后代。

(3) 同胞

同胞拥有相同的父元素。

siblings(); 返回被选元素的所有同胞元素。
next(); 返回被选元素的下一个同胞元素。
nextAll(); 返回被选元素的所有跟随的同胞元素。
nextUntil(); 返回介于两个给定参数之间的所有跟随的同胞元素。
以下方法与上面相同，但方向不同
prev();
prevAll();
prevUntil();

(4) 过滤

first(); 返回被选元素的首个元素。
last(); 返回被选元素的最后一个元素。
eq(); 返回被选元素中带有指定索引号的元素。
filter(); 允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
not(); 返回不匹配标准的所有元素。

5. Ajax

异步 JavaScript 和 XML。在不刷新页面的情况下与后台进行数据交互。

(1) load()

从服务器加载数据，并把返回的数据放入被选元素中。

$(selector).load(URL, data, callback);
    必需的 URL 参数规定您希望加载的 URL。
    可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。
    可选的 callback 参数是 load() 方法完成后所执行的函数名称，可以设置不同参数{
        responseTxt - 包含调用成功时的结果内容
        statusTXT - 包含调用的状态
        xhr - 包含 XMLHttpRequest 对象
    }

(2) get()/post()

用于通过 HTTP GET 或 POST 请求从服务器请求数据。

callback: 两个参数（data,status）。
$.get(URL, callback); 通过 HTTP GET 请求从服务器上请求数据。
$.post(URL, data, callback); 通过 HTTP POST 请求从服务器上请求数据。

6. 其他

(1) onConflict()

如果 jQuery 操作符与其他库起冲突时使用该方法。

$.onConflict();
jQuery(selector).action();
var jq = $.onConflict();
jq(selector).action();
jQuery(document).ready(function($) {
    $(selector).action();
});

(2) JSONP

json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据,因为“同源策略”

$.getJSON(URL, function(data) {});

7. 插件

(1) jQuery Validate

插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其他 37 种语言。

(2) jQuery Accordion

插件用于创建折叠菜单。它通常与嵌套的列表、定义列表或嵌套的 div 一起使用。选项用于指定结构、激活的元素和定制的动画。

(3) jQuery Autocomplete

插件根据用户输入值进行搜索和过滤，让用户快速找到并从预设值列表中选择。通过给 Autocomplete 字段焦点或者在其中输入字符，插件开始搜索匹配的条目并显示供选择的值的列表。通过输入更多的字符，用户可以过滤列表以获得更好的匹配。

(4) jQuery Password Validation

插件扩展了 jQuery Validate 插件，提供了两种组件：
一种评价密码的相关因素的功能：比如大小写字母的混合情况、字符（数字、特殊字符）的混合情况、长度、与用户名的相似度（可选的）。
一种使用评价功能显示密码强度的验证插件自定义方法。显示的文本可以被本地化。
您可以简单地自定义强度显示的外观、本地化消息显示，并集成到已有的表单中。

(5) jQuery Prettydate

插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其他 37 种语言。

(6) jQuery Tooltip

插件取代了原生的工具提示框，让它们可自定义，您只需要调整它们的内容、位置和外观即可。

8. 参考手册

(1) 选择器

(2) 事件

(3) 效果

(4) HTML / CSS

(5) 遍历方法

(6) AJAX

(7) 杂项

(8) 属性