jQuery学习（一）

一、jQuery概念
jQuery 是一个 JavaScript 库，可以简化JavaScript编程，便于实现网页的各种动作效果。
（一）JQuery的使用
下载jQuery库引用。或者通过 CDN（内容分发网络） 引用它。建议使用百度、又拍云、新浪等国内CDN地址，如果你站点用户是国外的可以使用谷歌和微软。
（二）语法
jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
1、 $(selector).action([function(){//jQuery动作代码}])；美元符号$定义 jQuery；选择器（selector）"查询"和"查找" HTML 元素；其中选择器要使用双引号括起来。
注意：action([function(){//jQuery动作代码}])；中多个执行函数表达式用逗号分隔；其中函数表达式会立即执行。
注意：jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。
2、文档就绪事件
$(document).ready(function(){//jQuery执行代码});简洁写法：$(function(){//jQuery代码});为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。
3、JavaScript 入口函数
window.onload = function () {//执行代码}
4、jQuery 入口函数与 JavaScript 入口函数的区别
jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。
JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。
（三）jQuery事件
在 jQuery 中，网页html的事件属性大都有一个等效的 jQuery 方法。jQuery事件就是指元素被触发（发生该事件）之后的响应动作即jQuery语法中action([function(){//jQuery动作代码}]);。
1、常用的jQuery事件方法
$(document).ready() 方法允许我们在文档完全加载完后执行函数。
click()方法是当按钮点击事件被触发时会调用一个函数。
dblclick()方法触发 dblclick鼠标双击事件;
mouseenter()方法当鼠标指针穿过元素时，会发生 mouseenter 事件；
mouseleave() 方法触发 mouseleave 事件当鼠标指针离开元素时。
hover()方法用于模拟光标悬停事件，当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。
focus() 方法触发 focus 事件当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。
blur() 方法触发 blur 事件，当元素失去焦点时，发生 blur 事件。
注意:和HTML中的事件属性要做好对比区分。

二、jQuery 效果（效果中大多是相对的）
（一）隐藏和显示效果
$(selector).hide(speed,callback);和$(selector).show(speed,callback); speed可以取以下值："slow"、"fast" 或毫秒。可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
注意：可选的 callback 参数对于$(selector)选择器选中n个元素，callback函数就执行n次；当 callback 函数加上括号时，函数立即执行并且只会调用一次，函数执行比效果提前执行；不加括号，选中n个元素，就执行n次。
1、隐藏显示切换
可以使用 toggle() 方法来切换 hide() 和 show() 方法。
（二）淡入淡出效果
1、fadeIn() 用于淡入已隐藏的元素；
2、fadeOut()用于淡出可见元素； 
3、fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
4、fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。语法：$(selector).fadeTo(speed,opacity,callback);其中opacity是透明度。
（三）上下滑动效果
1、slideDown()用于向下滑动元素。
2、slideUp()用于向上滑动元素。
3、slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
（四）动画效果
 animate() 方法允许您创建自定义的动画。语法：$(selector).animate({params},speed,callback);
 1、必需的 params 参数定义形成动画的 CSS 属性。
注意：params可以设置所有css属性，但是要使用Camel（驼峰命名法）标记法书写所有的属性名，例如：paddingLeft 而不是 padding-left；
 注意：所有 HTML 元素都有一个静态位置，且无法移动。如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！
 2、属性参数值可以使用相对值，也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=；可以把属性的动画值设置为 "show"、"hide" 或 "toggle",例如： $("div").animate({  height:'toggle' });
 3、动画效果可以使用链式连接，原理是使用队列算法实现多个animate()调用。
注意：要理解JavaScript对于异步的实现原理：对于耗时的程序不进入主线程、而进入"任务队列"（task queue）的任务，只有等主线程任务执行完毕，"任务队列"开始通知主线程，请求执行任务，该任务才会进入主线程执行。

参考JavaScript实现同步和异步的原理
4、stop(stopAll,goToEnd) 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。
注意：可选的 stopAll 布尔参数规定是否清除所有动画队列；可选的 goToEnd 参数规定是否立即完成当前动画，默认是 false。
注意：动画效果中Callback 函数在当前动画 100% 完成之后才执行。没有回调函数，程序例如弹窗会在效果完成前弹出。
5、jQuery方法链接允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。
注意：在编写方法链接时，可以换行或者缩进，jQuery 会抛掉多余的空格，并当成一行长代码来执行上面的代码行。

三、jQuery HTML
jQuery 拥有可操作 HTML 元素和属性的强大方法。
 （一）jQuery DOM 操作
1、text() - 设置或返回所选元素的文本内容，其中包括换行和空格；
2、html() - 设置或返回所选元素的内容（包括 HTML 标记），其中包括换行和空格；
3、val() - 设置或返回表单字段的值；
4、attr()方法对于 HTML 元素我们自己自定义的 DOM 属性。
5、prop()函数对于 HTML 元素本身就带有的固有属性
注意：如果没有相应的属性，prop()方法返回空字符串；attr()返回值是 undefined；
（二）设置内容和属性
1、text(“内容”) - 设置或返回所选元素的文本内容，其中包括换行和空格；
2、html(“内容”) - 设置或返回所选元素的内容（包括 HTML 标记），其中包括换行和空格；
3、val(“内容”) - 设置或返回表单字段的值；
（三）text()、html() 以及 val() 的回调函数
回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。
例如： $("#test1").text(function(i,origText){
        return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")"; 
    });
1、attr() 方法也用于设置/改变属性值。可以设置多个属性值，用逗号分隔。
2、attr()方法也提供回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。
注意：回调函数是用于获取原始值，通过函数返回新的要设置的值。
例如： $("#runoob").attr("href", function(i,origValue){
    return origValue + "/jquery"; 
  });
（四）添加元素
1、append() - 在被选元素的结尾插入内容；
2、prepend() - 在被选元素的开头插入内容；
3、after() - 在被选元素之后插入内容；
4、before() - 在被选元素之前插入内容；
注意：append/prepend 是在选择元素内部嵌入。after/before 是在元素外面追加。
5、append() 和 prepend() 方法能够通过参数接收无限数量的新元素。多个参数用逗号分隔。
注意：这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。
6、after() 和 before() 方法添加若干新元素。同append/prepend方法类似。多个参数用逗号分隔。
注意：这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。
（五）删除元素
1、remove() - 删除被选元素（及其子元素）；
注意：remove() 方法也可接受一个参数，用于删除指定的元素。参数可以是任何 jQuery 选择器的语法。
2、empty() - 从被选元素中删除子元素；
（六）获取并设置 CSS 类
jQuery设置元素css样式的原理：通过给元素添加或者删除类属性，利用类选择器来设置其样式。
1、addClass() - 向被选元素添加一个或多个类；
2、removeClass() - 从被选元素删除一个或多个类；
3、toggleClass() - 对被选元素进行添加/删除类的切换操作；
注意：元素的类属性可以设置多个值，用空格分隔。
4、css("propertyname");方法返回指定CSS 属性的值；
5、css("propertyname","value");设置指定的 CSS 属性；
6、css({"propertyname":"value","propertyname":"value",...});设置多个 CSS 属性；
（六）jQuery 尺寸
1、width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
2、height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。
3、innerWidth() 方法返回元素的宽度（包括内边距）。
4、innerHeight() 方法返回元素的高度（包括内边距）。
5、outerWidth() 方法返回元素的宽度（包括内边距和边框）。
6、outerHeight() 方法返回元素的高度（包括内边距和边框）。

四、jQuery 遍历
jQuery 遍历，意为"移动"，用于根据其相对于其他元素的关系来"查找"（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。遍历方法中最大的种类是树遍历（tree-traversal）。
（一）遍历 - 祖先
通过 jQuery，您能够向上遍历 DOM 树，以查找元素的祖先。
1、parent() 方法返回被选元素的直接父元素。
2、parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。
3、parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
例如：返回介于 <span> 与 <div> 元素之间的所有祖先元素： $("span").parentsUntil("div");
（二）遍历 - 后代
通过 jQuery，您能够向下遍历 DOM 树，以查找元素的后代。
1、children() 方法返回被选元素的所有直接子元素。
注意：可以使用可选参数来过滤对子元素的搜索，参数可以是任何 jQuery 选择器的语法来选取指定直接子元素。
2、find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。其中参数为*，会返回所有后代元素。
（三）遍历 - 同胞(siblings)
通过 jQuery，您能够在 DOM 树中遍历元素的同胞元素。
1、siblings() 方法返回被选元素的所有同胞元素。
2、next() 方法返回被选元素的下一个同胞元素。
3、nextAll() 方法返回被选元素的所有跟随的同胞元素。
4、nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
注意：prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞之前元素遍历，而不是之后元素遍历）。
（四）遍历- 过滤
三个最基本的过滤方法是：first(), last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。其他过滤方法，比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。
1、first() 方法返回被选元素的首个元素。
2、last() 方法返回被选元素的最后一个元素。
3、eq() 方法返回被选元素中带有指定索引号的元素。索引号从 0 开始。
4、filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
注意：参数可以是任何 jQuery 选择器的语法来过滤指定元素，例如：$("p").filter(".url");返回带有类名 "url" 的所有 <p> 元素；
5、not() 方法返回不匹配标准的所有元素。
注意：not() 方法与 filter() 相反。

五、jQuery Ajax（重点）
（一）AJAX 简介
AJAX 是与服务器交换数据的技术，它在不重载全部页面的情况下，实现了对部分网页的更新。AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。
1、load() 方法从服务器加载数据，并把返回的数据放入被选元素中。语法：$(selector).load(URL,data,callback);
必需的 URL 参数规定您希望加载的 URL；可选的 data 参数是与请求一同发送的查询字符串键/值对集合；可选的 callback 参数是 load() 方法完成后所执行的函数名称。
注意：可以把 jQuery 选择器添加到 URL 参数。例如：$("#div1").load("demo_test.txt #p1");把 "demo_test.txt" 文件中 id="p1" 的元素的内容，加载到指定的 <div> 元素中。
2、可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：
（1）responseTxt - 包含调用成功时的结果内容；
（2）statusTXT - 包含调用的状态；
（3）xhr - 包含 XMLHttpRequest 对象；
注意：为了避免多页面情形下的代码重复，在index文件里只写重复部分，剩下的一股脑放各自单独文件 load() 进来。
（二）XMLHttpRequest 对象：用于在后台与服务器交换数据。
（1）在不重新加载页面的情况下更新网页；
（2）在页面已加载后从服务器请求数据；
（3）在页面已加载后从服务器接收数据；
（4）在后台向服务器发送数据；
1、XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 可以同步或异步地返回 Web 服务器的响应，并且能够以文本或者一个 DOM 文档的形式返回内容。
注意：尽管名为 XMLHttpRequest，它并不限于和 XML 文档一起使用：它可以接收任何形式的文本文档。
2、XMLHttpRequest 对象属性
（1）readyState
HTTP 请求的状态.当一个 XMLHttpRequest 初次创建时，这个属性的值从 0 开始，直到接收到完整的 HTTP 响应，这个值增加到 4。

5 个状态中每一个都有一个相关联的非正式的名称，下表列出了状态、名称和含义：

状态	名称	描述
0	Uninitialized	初始化状态。XMLHttpRequest 对象已创建或已被 abort() 方法重置。
1	Open	open() 方法已调用，但是 send() 方法未调用。请求还没有被发送。
2	Sent	Send() 方法已调用，HTTP 请求已发送到 Web 服务器。未接收到响应。
3	Receiving	所有响应头部都已经接收到。响应体开始接收但未完成。
4	Loaded	HTTP 响应已经完全接收。

readyState 的值不会递减，除非当一个请求在处理过程中的时候调用了 abort() 或 open() 方法。每次这个属性的值增加的时候，都会触发 onreadystatechange 事件句柄。

（2）responseText属性
包含客户端接收到的HTTP响应的文本内容。当readyState值为0、1或2时，responseText包含一个空字符串。当readyState值为3(正在接收)时，响应中包含客户端还未完成的响应信息。当readyState为4(已加载)时，该responseText包含完整的响应信息。
（三）AJAX get() 和 post() 方法
1、$.get(URL,callback);通过 HTTP GET 请求从服务器上请求数据。
（1）必需的 URL 参数规定您希望请求的 URL；
（2）可选的 callback 参数是请求成功后所执行的函数名。回调函数有两个参数：第一个回调参数存有被请求页面的内容，第二个回调参数存有请求的状态。
2、$.post(URL,data,callback);通过 HTTP POST 请求向服务器提交或获取数据。
（1）必需的 URL 参数规定您希望请求的 URL。
（2）可选的 data 参数是连同请求发送的数据。
注意：提交到服务器的数据，多个数据使用逗号分隔，格式是键值对。语法和json一样。
（3）可选的 callback 参数是请求成功后所执行的函数名。第一个回调参数存有被请求页面的内容，第二个回调参数存有请求的状态。
（四）noConflict() 方法
如果其他 JavaScript 框架也使用 $ 符号作为简写怎么办？可以使用noConflict() 方法会释放对 $ 标识符的控制，这样其他脚本就可以使用它了。
1、可以通过全名替代简写的方式来使用 jQuery；
2、利用noConflict（）方法使用其他字符代替$，例如：var jq = $.noConflict();

（五）JSONP 
Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。
同源策略，它是由Netscape提出的一个著名的安全策略，现在所有支持JavaScript 的浏览器都会使用这个策略。
1、ajax和jsonp这两种技术在调用方式上”看起来”很像，目的也一样，都是请求一个url，然后把服务器返回的数据进行处理，因此jquery和ext等框架都把jsonp作为ajax的一种形式进行了封装；
2、但ajax和jsonp其实本质上是不同的东西。ajax的核心是通过XmlHttpRequest获取非本页内容，而jsonp的核心则是动态添加；
3、JSONP原理
ajax请求受同源策略影响，不允许进行跨域请求，而script标签src属性中的链接却可以访问跨域的js脚本，利用这个特性，服务端不再返回JSON格式的数据，而是返回一段调用某个函数的js代码，在src中进行了调用，这样实现了跨域。

六、jQuery 插件（插件即简化各种操作的程序）
插件的使用：引入相关文件，配置相关参数即可。
（一）Validate校验插件
jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其他 37 种语言。
（二）jQuery Cookie 插件
jQuery 可以通过 jquery.cookie.js 插件来操作 Cookie。
（三）jQuery Accordion
jQuery Accordion 插件用于创建折叠菜单。它通常与嵌套的列表、定义列表或嵌套的 div 一起使用。选项用于指定结构、激活的元素和定制的动画。
（四）jQuery Autocomplete 插件根据用户输入值进行搜索和过滤，让用户快速找到并从预设值列表中选择。通过给 Autocomplete 字段焦点或者在其中输入字符，插件开始搜索匹配的条目并显示供选择的值的列表。通过输入更多的字符，用户可以过滤列表以获得更好的匹配。
（五）jQuery Growl 插件(消息提醒)
jQuery Growl 插件(消息提醒) 允许您很容易地在一个覆盖层显示反馈消息。消息会在一段时间后自动消失，不需要单击"确定"按钮等。用户也可以通过移动鼠标或点击关闭按钮加快隐藏信息。
（六）jQuery Password Validation（密码验证）
jQuery Password Validation（密码验证）插件扩展了 jQuery Validate 插件，提供了两种组件：
一种评价密码的相关因素的功能：比如大小写字母的混合情况、字符（数字、特殊字符）的混合情况、长度、与用户名的相似度（可选的）。
一种使用评价功能显示密码强度的验证插件自定义方法。显示的文本可以被本地化。
（七）jQuery Tooltip
jQuery Tooltip 插件取代了原生的工具提示框，让它们可自定义，您只需要调整它们的内容、位置和外观即可。
（八）jQuery 树型菜单插件(Treeview)
jQuery Treeview 提供了一个无序灵活的可折叠的树形菜单。适用于一些菜单的导航，支持基于 cookie 的持久性菜单。