重新整理JavaScript笔记

2026-02-03 18:44:19 +08:00 · 2024-01-13 17:25:31 +08:00
parent 96a49a36de
commit 52d96d354e
109 changed files with 745 additions and 1752 deletions
--- a/JavaScript/jQuery/11
+++ b/JavaScript/jQuery/11
@@ -0,0 +1,112 @@
+## JavaScript 类库
+
+- **作用:** JavaScript 类库的出现，就是为了简化 JavaScript 的开发。
+- **内容:** JavaScript 类库封装了预定义的对象和函数。
+- **目的:** 帮助开发人员建立有高难度交互的 Web 2.0 特性的富客户端页面，并且兼容各大浏览器。
+
+> **扩展内容**
+> 
+> Web 2.0 相关概念:
+> 
+> 1. Web 1.0: 网络 -> 人（单向信息。网络是信息提供者，单向的提供和单一理解）
+> 2. Web 2.0: 人 -> 人（以网络为沟通渠道进行人与人沟通。网络是平台，用户提供信息，通过网络，其他用户获取信息）
+> 3. Web 3.0: 人 -> 网络 -> 人（人与网络之间的双向沟通。网络成为用户需求理解者和提供者）
+> 
+> 富客户端与瘦客户端：
+> 
+> 1. 富客户端:（Rich Internet Applications，RIA）利用具有很强交互性的富客户端技术来为用户提供一个更高和更全方位的网络体验。
+> 2. 瘦客户端:（Thin Client）指的是在客户端-服务器网络体系中的一个基本无需应用程序的计算机终端。
+
+## jQuery 的编程步骤
+
+- 在 HTML 页面引入 jQuery 文件
+
+```html
+<!-- 1. 引入jQuery文件 -->
+<script src="jquery-1.11.3.js"></script>
+```
+
+- 在 HTML 页面定义元素
+
+```html
+<!-- 定义HTML页面元素 -->
+<input type="text" value="请输入你的用户名" id="username">
+```
+
+- 使用 jQuery 的选择器定位元素
+
+```javascript
+// 2. 使用jQuery选择器定位HTML页面元素
+var $username = $("#username");
+```
+
+- 利用 jQuery 提供的 API 完成需求
+
+```javascript
+// 3. 调用jQuery的API方法
+console.log($username.val());
+```
+
+## jQuery 基础内容
+
+### jQuery 工厂函数
+
+jQuery 的工厂函数算做是 jQuery 的一个入口，通过它既可以使用选择器，也可以包装 DOM 对象，还可以创建元素等功能。
+
+**工厂函数的写法有两种:**
+
+- 第一种是 `$()`
+- 第二种是 `jQuery()`
+
+> 这里的 `$` 符号就表示 jQuery，是 jQuery 的一个约定。
+> 
+> 不仅如此，jQuery 也建议通过 jQuery 获取的元素变量前都增加 `$` 符号。目前有很多 JS 库都效仿了 jQuery 的这种做法，当然也引起了多个使用 `$` 的 JS 库一起使用时的一些冲突，主要还是集中在 `$` 的使用权上。
+
+### jQuery 对象与 DOM 对象
+
+#### DOM 对象
+
+定义：是指通过 DOM 获取的元素。
+
+#### jQuery 对象
+
+定义：是通过包装 DOM 对象后产生的一种对象（jQuery 自定义的全局对象）。可以说 jQuery 底层其实还是 DOM 对象。
+
+> **注意:** jQuery 是类数组对象，所以 jQuery 对象中可能包含多个 DOM 对象或一个 DOM 对象，这要看具体情况。
+
+### DOM 对象转换为 jQuery 对象
+
+DOM 对象要想转换为 jQuery 对象，需要使用 jQuery 的工厂函数 `$()` 将其包裹，返回的就是对应的 jQuery 对象。
+
+```javascript
+// DOM对象
+var username = document.getElementById("username");
+// DOM对象转换为jQuery对象
+var $username = $(username);
+// 测试
+console.log($username.val());
+```
+
+### jQuery 对象转换为 DOM 对象
+
+- jQuery 对象是数组对象。jQuery 对象[索引值]可以直接转换为对应的 DOM 对象
+
+```javascript
+// jQuery对象
+var $user = $("#username");
+// 1. jQuery对象是数组对象
+var user1 = $user[0];
+// 测试
+console.log(user1.value);
+```
+
+- jQuery提供了get(index)方法。jQuery对象.get(索引值)也可以转换为对应的DOM对象
+
+```
+// jQuery对象
+var $user = $("#username");
+// 2. jQuery提供get(index)方法进行转换
+var user2 = $user.get(0);
+// 测试
+console.log(user2.value);
+```
--- a/JavaScript/jQuery/12
+++ b/JavaScript/jQuery/12
@@ -0,0 +1,178 @@
+## 显示和隐藏效果
+
+通过同时改变元素的宽度和高度来实现显示或者隐藏。
+
+### 无动画效果
+	
+- 显示: show()
+- 隐藏: hide()
+
+```javascript
+$("#panel h5.head").click(function(){
+    var $content = $(this).next("div.content");
+    if($content.is(":visible")){
+       $content.hide();
+    }else{
+       $content.show();
+    }
+})
+```
+
+### 有动画效果
+	
+#### 显示: show(speed,callback)
+	
+- speed: 预定义三种速度"slow"、"normal"和"fast"，或自定义时间，单位为毫秒。
+- callback: 动画执行完毕后的回调函数。
+
+#### 隐藏: hide(speed,callback)
+	
+- speed: 预定义三种速度"slow"、"normal"和"fast"，或自定义时间，单位为毫秒。
+- callback: 动画执行完毕后的回调函数。
+
+```javascript
+$("#panel h5.head").click(function(){
+    var $content = $(this).next("div.content");
+    if($content.is(":visible")){
+        $content.hide(600);
+    }else{
+        $content.show(600);
+    }
+})
+```
+
+## 滑动式动画效果
+
+通过改变高度来实现显示或者隐藏的效果。
+
+### 向上滑动: slideUp(speed,callback)
+	
+- speed: 预定义三种速度"slow"、"normal"和"fast"，或自定义时间，单位为毫秒。
+- callback: 动画执行完毕后的回调函数。
+
+### 向下滑动: slideDown(speed,callback)
+	
+- speed: 预定义三种速度"slow"、"normal"和"fast"，或自定义时间，单位为毫秒。
+- callback: 动画执行完毕后的回调函数。
+
+```javascript
+$("#panel h5.head").click(function(){
+    var $content = $(this).next("div.content");
+    if($content.is(":visible")){
+        $content.slideUp(600);
+    }else{
+        $content.slideDown(600);
+    }
+})
+```
+
+## 淡入淡出动画效果
+
+通过改变不透明度 opacity 来实现显示或者隐藏。
+
+### 淡入效果: fadeIn(speed,callback)
+	
+- speed: 预定义三种速度"slow"、"normal"和"fast"，或自定义时间，单位为毫秒。
+- callback: 动画执行完毕后的回调函数。
+
+### 淡出效果: fadeOut(speed,callback)
+	
+- speed: 预定义三种速度"slow"、"normal"和"fast"，或自定义时间，单位为毫秒。
+- callback: 动画执行完毕后的回调函数。
+
+```javascript
+$("#panel h5.head").click(function(){
+    var $content = $(this).next("div.content");
+    if($content.is(":visible")){
+        $content.fadeOut(600);
+    }else{
+        $content.fadeIn(600);
+    }
+})
+```
+
+## 动画切换效果
+
+### toggle(duration,complete): 显示或隐藏匹配元素。
+
+- duration: 一个字符串或者数字决定动画将运行多久。
+- complete: 在动画完成时执行的回调函数。
+
+```javascript
+$('#clickme').click(function() {
+	$('#book').toggle('slow', function() {
+		// Animation complete.
+	});
+});
+```
+
+### slideToggle(duration,complete)：用滑动动画显示或隐藏一个匹配元素。
+
+- duration：一个字符串或者数字决定动画将运行多久。
+- complete：在动画完成时执行的回调函数。
+
+```javascript
+$('#clickme').click(function() {
+	$('#book').slideToggle('slow', function() {
+		// Animation complete.
+	});
+});
+```
+
+## 自定义动画效果
+
+animate(properties,duration,easing,complete)
+
+- properties：一个CSS属性和值的对象,动画将根据这组对象移动。
+- duration：一个字符串或者数字决定动画将运行多久。
+- easing：一个字符串，表示过渡使用哪种缓动函数。
+- complete：在动画完成时执行的回调函数。
+
+```javascript
+$("#panel").click(function(){
+   $(this).animate({left: "500px"}, 3000);
+})
+```
+
+aniamte(properties,options)
+
+- properties：一个CSS属性和值的对象,动画将根据这组对象移动。
+- options：一组包含动画选项的值的集合。 支持的选项：
+	- duration：一个字符串或者数字决定动画将运行多久。
+	- easing：一个字符串，表示过渡使用哪种缓动函数。
+	- queue：一个布尔值，指示是否将动画放置在效果队列中。如果为false时，将立即开始动画。
+	- complete：在动画完成时执行的回调函数。
+
+```javascript
+$("#panel").click(function(){
+    $(this).animate({left: "500px"}, 3000);
+})
+```
+
+> **注意：**animate方法不接受以下属性:
+> 
+> - backgroundColor
+> - borderBottomColor
+> - borderLeftColor
+> - borderRightColor
+> - borderTopColor
+> - Color
+> - outlineColor
+
+## 并发与排队效果
+
+### 并发效果: 指的就是多个动画效果同时执行。
+
+```javascript
+$("#panel").click(function(){
+   $(this).animate({left: "500px",height:"200px"}, 3000);
+})
+```
+
+### 排队效果: 指的就是多个动画按照先后顺序执行。
+
+```javascript
+$("#panel").click(function(){
+    $(this).animate({left: "500px"}, 3000).animate({height: "200px"}, 3000);
+})
+```
--- a/JavaScript/jQuery/13
+++ b/JavaScript/jQuery/13
@@ -0,0 +1,336 @@
+DOM 是 Document Object Model 的缩写，译为 **文档对象模型**。根据 W3C DOM 规范，DOM 是一种与浏览器、平台、语言无关的接口，使用该接口可以轻松地访问页面中所有的标准组件。
+
+jQuery 中另一个重要的组成部分就是封装了原生 DOM 的操作。
+
+## 基本操作
+
+### html操作
+
+html() 方法用于读取或设置指定元素的 HTML 代码，类似于原生 DOM 中的 innerHTML 属性。
+
+```javascript
+//获取<p>元素的HTML代码
+$("input:eq(0)").click(function(){
+    alert(  $("p").html() );
+});
+//设置<p>元素的HTML代码
+$("input:eq(1)").click(function(){
+    $("p").html("<strong>你最讨厌的水果是?</strong>");
+});
+```
+
+### 文本操作
+
+text() 方法用于读取或设置指定元素的文本内容，类似于原生 DOM 中的 textContent 属性。
+
+```javascript
+//获取<p>元素的文本
+$("input:eq(0)").click(function(){
+    alert(  $("p").text() );
+});
+//设置<p>元素的文本
+$("input:eq(1)").click(function(){
+    $("p").text("你最讨厌的水果是?");
+});
+```
+
+### 值操作
+
+val() 方法用于读取或设置指定元素的 value 属性值，类似于原生 DOM 中的 value 属性。
+
+```javascript
+//获取按钮的value值
+$("input:eq(0)").click(function(){
+   alert( $(this).val() );
+});
+//设置按钮的value值
+$("input:eq(1)").click(function(){
+   $(this).val("我被点击了!");
+});
+```
+
+### 属性操作
+
+- attr() 方法用于获取或设置指定元素的属性，类似于原生 DOM 中的 getAttribute() 方法和 setAttribute() 方法。
+- removeAttr() 方法用于删除指定元素的属性，类似于原生 DOM 中的 removeAttribute() 方法。
+
+```javascript
+//设置<p>元素的属性'title'
+$("input:eq(0)").click(function(){
+   $("p").attr("title","选择你最喜欢的水果.");
+});
+//获取<p>元素的属性'title'
+$("input:eq(1)").click(function(){
+   alert( $("p").attr("title") );
+});
+//删除<p>元素的属性'title'
+$("input:eq(2)").click(function(){
+   $("p").removeAttr("title");
+});
+```
+
+## 样式操作
+
+操作样式主要分成两种：
+
+- 一种是使用style属性直接设置CSS中的属性
+- 一种是使用class样式名称设置CSS。
+
+### attr() 方法操作
+
+class 本身就是元素中的一个属性，所以也可以使用设置属性方式来设置或删除 class 样式。
+
+**语法结构:**
+
+```javascript
+element.attr("class",className)
+```
+
+> **值得注意的是:** 使用 attr() 方法设置 class 样式时，无论之前是否包含 class 属性，之前设置的样式都会被覆盖。
+
+```javascript
+//<input type="button" value="采用属性增加样式"  id="b1"/>
+$("#b1").click(function(){
+   $("#mover").attr("class","one");
+})
+```
+
+### addClass() 方法操作
+
+addClass() 方法表示追加样式，也就是说，无论之前是否包含 class 样式，调用 addClass() 方法只是在其基础上增加一个新的样式。而之前设置的样式依旧存在。
+
+```javascript
+//<input type="button" value=" addClass"  id="b2"/>
+$("#b2").click(function(){
+   $("#mover").addClass("mini");
+})
+```
+
+### removeClass() 方法操作
+
+removeClass() 方法表示删除样式，但该方法的使用有以下三种方式:
+
+- removeClass(): 默认不传递任何参数，表示删除所有样式。
+- removeClass(className): 传递一个样式名称，表示删除指定一个样式。
+- removeClass(className1 className2): 传递多个样式名称，中间使用空格隔开，表示删除指定多个样式。
+
+```javascript
+//<input type="button" value="removeClass"  id="b3"/>
+$("#b3").click(function(){
+   $("#mover").removeClass();
+})
+```
+
+### toggleClass() 方法操作
+
+toggleClass() 方法表示在没有样式与指定样式之间进行切换，效果相当于使用 addClass() 方法和 removeClass() 方法。
+
+```javascript
+//<input type="button" value=" 切换样式"  id="b4"/>
+$("#b4").click(function(){
+   // 在没有样式与指定样式之间切换
+   $("#mover").toggleClass("one");
+})
+```
+
+### hasClass() 方法操作
+
+hasClass() 方法表示指定元素是否包含指定样式。
+
+> **值得注意的是:** hasClass() 方法并不能判断是否包含样式，而是判断是否包含指定样式。
+
+```javascript
+//<input type="button" value=" hasClass"  id="b5"/>
+$("#b5").click(function(){
+   // 判断是否含有某个指定样式
+   alert($("#mover").hasClass("one"));
+})
+```
+
+### css() 方法操作
+
+css() 方法也可以获取或设置 CSS 样式，但并不是通过 class 属性，而是通过 style 属性直接设置 CSS 中的属性。
+
+#### 获取样式: 
+
+css(attrName) 方法，用于获取当前 style 属性的值。
+
+#### 设置样式: 
+
+- css(attrName,attrValue) 方法，用于设置当前 style 属性的值。**但每次只能设置一个CSS中的属性。**
+- css({attrName:attrValue,attrName:attrValue,…}) 方法，用于设置当前 style 属性的值。**每次可以设置多个CSS中的属性。**
+
+## 遍历节点
+
+### 获取父元素
+
+parent() 方法可以获取指定元素的父元素。
+
+- parent() 方法: 不传递任何参数，是获取指定元素的父元素。
+- parent(selector) 方法: 是获取指定元素的符合 selector 选择器的父元素。
+
+```javascript
+var $parent = $("li:first").parent();	//第一个<li>元素的父元素
+```
+
+### 获取子元素
+
+children() 方法可以获取指定元素的子元素。
+
+- children() 方法: 不传递任何参数，可以获取指定元素的所有子元素。
+- children(selector) 方法: 是获取指定元素的符合 selector 选择器的子元素。
+
+```javascript
+var $ul = $("ul").children();
+alert( $ul.length );//<p>元素下有3个子元素
+```
+
+### 获取兄弟元素
+
+**next() 方法是获取指定元素的下一个兄弟元素。**
+
+- next() 方法: 不传递任何参数，是获取指定元素的下一个兄弟元素。
+- next(selector) 方法: 是获取指定元素符合 selector 选择器的下一个兄弟元素。
+
+```javascript
+var $p1 = $("p").next();
+alert( $p1.html() );  //  紧邻<p>元素后的同辈元素
+```
+
+**prev() 方法是获取指定元素的上一个兄弟元素。**
+
+- prev()方法: 不传递任何参数，是获取指定元素的上一个兄弟元素。
+- prev(selector) 方法: 是获取指定元素符合 selector 选择器的上一个兄弟元素。
+
+```javascript
+var $ul = $("ul").prev();
+alert( $ul.html() );  //  紧邻<ul>元素前的同辈元素
+```
+
+**siblings() 方法是获取指定元素的所有兄弟元素。**
+
+
+- siblings()方法: 不传递任何参数，是获取指定元素的所有兄弟元素。
+- siblings(selector) 方法:是获取指定元素符合 selector 选择器的所有兄弟元素。
+
+```javascript
+var $p2 = $("p").siblings();
+alert( $p2.html() );  //  紧邻<p>元素的唯一同辈元素
+```
+
+### 查找指定后代元素
+
+find(selector) 方法，可以查找指定元素的符合 selector 选择器的后代元素。
+
+```javascript
+var eles = $("ul").find("li");	//查找ul元素下的所有li元素
+```
+
+## 创建操作
+
+按照原生 DOM 的思路，创建节点需要分别创建元素节点、文本节点和属性节点。
+
+- 元素节点，使用 jQuery 的工厂函数 `$(HTML代码)` 来创建。
+- 文本节点，使用 jQuery 的 `text()` 方法进行设置文本，而不需要创建文本节点。
+- 属性节点，使用 jQuery 的 `attr()` 方法进行设置属性，而不需要创建属性节点。
+
+其实，使用 jQuery 创建元素，并不需要按照原生 DOM 的思路进行创建。可以一步代码创建完整的元素。
+
+```javascript
+//创建一个<li>元素 包括元素节点,文本节点和属性节点
+var $li = $("<li title='香蕉'>香蕉</li>");
+
+// 获取<ul>节点 <li>的父节点
+var $parent = $("ul");
+
+// 添加到<ul>节点中，使之能在网页中显示
+$parent.append($li);
+```
+
+## 插入操作
+
+jQuery 中的插入操作分为内部插入和外部插入。
+
+### 内部插入
+	
+- append() 方法: 将 append() 后面的元素插入在 append() 前面指定元素的后面。
+- prepend() 方法: 将 prepend() 后面的元素插入在 prepend() 前面指定元素的前面。
+- appendTo() 方法: 将 appendTo() 前面的元素插入在 appendTo() 后面的元素的后面。
+- prependTo() 方法: 将 prependTo() 前面的元素插入在 prependTo() 后面的元素的前面。
+
+```javascript
+// append - append后面的节点被添加到append前面的节点的后面
+$("#tj").append($("#ms"));
+
+// prepend - prepend后面的节点被添加到prepend前面的节点的前面
+$("#tj").prepend($("#ms"));
+
+// appendTo - appendTo前面的节点被添加到appendTo后面的节点的后面
+$("#tj").appendTo($("#ms"));
+
+// prependTo - prependTo前面的节点被添加到prependTo后面的节点的前面
+$("#tj").prependTo($("#ms"));
+```
+
+### 外部插入
+	
+- before() 方法: 将 before() 后面的元素插入在 before() 前面的指定元素的前面。
+- after() 方法: 将 after() 后面的元素插入在 after() 前面的指定元素的后面。
+- insertBefore() 方法: 将 insertBefore() 前面的元素插入在 insertBefore() 后面的指定元素的前面。
+- insertAfter() 方法: 将 insertAfter() 前面的元素插入在 insertAfter() 后面的指定元素的后面。
+
+```javascript
+// before - before后面的节点被添加到before前面的节点的前面
+$("#tj").before($("#ms"));
+
+// after - after后面的节点被添加到after前面的节点的后面
+$("#tj").after($("#ms"));
+
+// insertBefore
+$("#tj").insertBefore($("#ms"));
+
+// insertAfter
+$("#tj").insertAfter($("#ms"));
+```
+
+## 删除操作
+
+jQuery 中的删除操作分别为 remove() 方法和 empty() 方法。
+
+- remove() 方法: 删除自身元素及所有后代元素。
+- empty() 方法: 删除所有后代元素，但保留自身元素。该方法适合完成清空操作。
+
+```javascript
+$("ul li:eq(1)").remove(); // 获取第二个<li>元素节点后，将它从网页中删除
+
+$("ul li").remove("li[title!=菠萝]");  //把<li>元素中属性title不等于"菠萝"的<li>元素删除
+
+$("ul li:eq(1)").empty(); // 获取第二个<li>元素节点后，清空此元素里的内容
+```
+
+## 替换操作
+
+jQuery 中的替换操作分别为 replaceWith() 方法和 replaceAll() 方法。
+
+- replaceWith() 方法: 该方法前面的元素是被替换元素。
+- replaceAll() 方法: 就是颠倒了的repalceWith( )方法。
+
+```javascript
+$("p").replaceWith("<strong>你最不喜欢的水果是?</strong>");
+// 同样的实现： $("<strong>你最不喜欢的水果是?</strong>").replaceAll("p");
+```
+
+## 复制操作
+
+jQuery 中的复制操作使用的方法为 clone() 方法，该方法与原生 DOM 中的复制节点的方法cloneNode() 在使用时极为相似。
+
+- 原生 DOM 中的 cloneNode(Boolean) 方法，参数 Boolean 表示是否复制后代节点。
+- jQuery 中的 clone(Boolean) 方法，参数 Boolean 表示是否复制事件。
+
+```javascript
+$("ul li").click(function(){
+   $(this).clone().appendTo("ul"); // 复制当前点击的节点，并将它追加到<ul>元素
+   $(this).clone(true).appendTo("ul"); // 注意参数true
+   //可以复制自己，并且他的副本也有同样功能
+})
+```
--- a/JavaScript/jQuery/14
+++ b/JavaScript/jQuery/14
@@ -0,0 +1,144 @@
+## 页面加载
+
+原生 DOM 中的事件具有页面加载的内容 onload 事件，在 jQuery 中同样提供了对应的内容ready() 函数。
+
+### ready与onload之间的区别
+
+| onload | ready |
+| ------- | ------ |
+| 没有简写方式 | 具有简写方式 | 
+| 当HTML页面所有内容加载完毕后才执行onload | 当DOM节点加载完毕后就执行ready |
+| 一个HTML页面只能编写一个onload | 一个HTML页面允许同时编写多个ready |
+
+### ready()的编写方式
+
+- $(document).ready(function(){});
+- $().ready(function(){});
+- $(function(){});
+
+## 事件绑定
+
+jQuery 中提供了事件绑定与解绑机制，类似于原生 DOM 中的 addEventListener() 方法。
+
+### jQuery 的事件绑定
+
+#### 单事件绑定
+
+单事件绑定就是指为指定元素绑定一个指定的事件，例如 click、change 等。
+
+```javascript
+<div id="panel">
+    <h5 class="head">什么是jQuery?</h5>
+    <div class="content">
+        jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
+    </div>
+</div>
+
+<script>
+    $("#panel h5.head").bind("click",function(){
+        var $content = $(this).next("div.content");
+        if($content.is(":visible")){
+           $content.hide();
+        }else{
+           $content.show();
+        }
+    })
+</script>
+```
+
+#### 多事件绑定
+
+多事件绑定就是为指定元素同时绑定多个指定的事件，例如同时绑定 mouseover 和 mouseout 事件等。
+
+```javascript
+<div id="panel">
+    <h5 class="head">什么是jQuery?</h5>
+    <div class="content">
+        jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
+    </div>
+</div>
+
+<script>
+   $("#panel h5.head").bind("mouseover mouseout",function(){
+       var $content = $(this).next("div.content");
+       if($content.is(":visible")){
+           $content.hide();
+       }else{
+           $content.show();
+       }
+   });
+</script>
+```
+
+## 模拟操作
+
+模拟操作就是指通过程序模拟用户在页面中的操作，比如用户点击某个按钮的事件完成一个效果，jQuery 中可以通过该方法模拟用户点击按钮事件。也就是说，不需要用户的操作行为，而是我们通过程序来模拟用户操作。
+
+```javascript
+<button id="btn">点击我</button>
+<div id="test"></div>
+
+<script>
+    $('#btn').bind("click", function(){
+        $('#test').append("<p>我的绑定函数1</p>");
+    }).bind("click", function(){
+        $('#test').append("<p>我的绑定函数2</p>");
+    }).bind("click", function(){
+        $('#test').append("<p>我的绑定函数3</p>");
+    });
+    $('#btn').trigger("click");
+</script>
+```
+
+## 与其他JS库共存
+
+### 第一种方式
+
+```javascript
+/*
+  * 先引入其他JS库,后引入jQuery
+  * * "$"符号属于其他JS库
+  * 解决冲突
+  * * jQuery中 - "$"符号指代jQuery
+  * * jQuery中不再使用"$"符号
+  */
+jQuery(document).ready(function(){
+	console.log("this is ready.");
+});
+```
+
+### 第二种方式
+
+```javascript
+jQuery(document).ready(function($){
+	// 在当前函数中使用"$"符号 - jQuery
+});
+// "$"符号 - 其他JS库
+```
+
+### 第三种方式
+
+```javascript
+(function($){
+	// "$"符号 - jQuery
+})(jQuery);
+// "$"符号 - 其他JS库
+```
+
+### 第四种方式
+
+```javascript
+jQuery.noConflict();
+jQuery(function($){
+	console.log($("p").text());
+});
+```
+
+### 第五种方式
+
+```javascript
+jQuery.noConflict();
+(function($){
+	console.log($("p").text());
+})(jQuery);
+```
--- a/JavaScript/jQuery/15
+++ b/JavaScript/jQuery/15
@@ -0,0 +1,572 @@
+## 日期插件
+
+layDate 日期插件致力于成为全球最用心的 web 日期支撑，为国内外所有从事 web 应用开发的同仁提供力所能及的动力。
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>01_laydate插件的基本使用</title>
+    <script src="laydate/laydate.js"></script>
+</head>
+<body>
+    <input placeholder="请输入日期" class="laydate-icon" onclick="laydate()">
+    <br>
+    <input placeholder="请输入日期" id="hello1">
+    <span class="laydate-icon" onclick="laydate({elem: '#hello1'});"></span>
+</body>
+</html>
+```
+
+### layDate API选项:
+
+- elem: '#id', //需显示日期的元素选择器
+- event: 'click', //触发事件
+- format: 'YYYY-MM-DD hh:mm:ss', //日期格式
+- istime: false, //是否开启时间选择
+- isclear: true, //是否显示清空
+- istoday: true, //是否显示今天
+- issure: true, 是否显示确认
+- festival: true //是否显示节日
+- min: `1900-01-01 00:00:00`, //最小日期
+- max: `2099-12-31 23:59:59`, //最大日期
+- start: `2014-6-15 23:00:00`,    //开始日期
+- fixed: false, //是否固定在可视区域
+- zIndex: 99999999, //css z-index
+- choose: function(dates){} //选择好日期的回调
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>02_laydate插件的高级使用</title>
+    <script src="jquery-1.11.3.js"></script>
+    <script src="laydate/laydate.js"></script>
+</head>
+<body>
+    <input id="mydate" placeholder="请输入日期" class="laydate-icon">
+    <script>
+        laydate({
+            elem : "#mydate",
+            event : "focus",
+            istime : true,
+            isclear : false,
+            istoday : false,
+            issure : false
+        });
+    </script>
+</body>
+</html>
+```
+
+## 表单验证插件
+
+表单验证插件主要是针对表单元素的值进行验证，并给出响应的图形以及文字提示。
+
+**常用验证插件**
+
+- formValidator
+- jQuery.validator
+- easyForm
+- validate.js
+
+### jQuery.validator 插件
+
+该插件提供用户方便地实现表单验证，同时还提供大量的定制选项。
+官方地址：[http://jqueryvalidation.org/](http://jqueryvalidation.org/)
+
+**validation基本使用**
+
+```html
+<div id="main">
+    <p>Take a look at the source to see how messages can be customized with metadata.</p>
+    <!-- Custom rules and messages via data- attributes -->
+    <form class="cmxform" id="commentForm" method="post" action="">
+        <fieldset>
+            <legend>Please enter your email address</legend>
+            <p>
+                <label for="cemail">E-Mail *</label>
+                <input id="cemail" name="email" data-rule-required="true" data-rule-email="true" data-msg-required="Please enter your email address" data-msg-email="Please enter a valid email address">
+            </p>
+            <p>
+                <input class="submit" type="submit" value="Submit">
+            </p>
+        </fieldset>
+    </form>
+</div>
+<script>
+    $(document).ready(function() {
+        $("#commentForm").validate();
+    });
+</script>
+```
+
+**validate()验证方法的选项**
+
+| 选项名称 | 描述说明 |
+| -------- | ---------- |
+| debug | 设置是否为调试模式，如果为调试模式表单不会被提交。 |
+| submitHandler | 表单提交时的回调函数，一般用于提交当前表单。|
+| rules | 设置表单元素的验证规则，格式为key:value。 |
+| messages | 设置表单元素验证不通过时的错误提示信息。 |
+| errorClass | 自定义错误提示信息的样式。 |
+| ignore | 设置哪些表单元素不进行验证。|
+
+**validation自定义验证**
+
+```html
+<div id="main">
+    <form class="cmxform" id="commentForm" method="post" action="">
+        <fieldset>
+            <legend>Please enter your email address</legend>
+            <p>
+                <label for="cemail">E-Mail *</label>
+                <input id="cemail" name="email" data-rule-required="true" data-rule-email="true" data-msg-email="Please enter a valid email address">
+            </p>
+            <p>
+                <input class="submit" type="submit" value="Submit">
+            </p>
+        </fieldset>
+    </form>
+</div>
+<script>
+    $(document).ready(function() {
+        $("#commentForm").validate({
+            messages: {
+                email: {
+                    required: 'Enter this!'
+                }
+            }
+        });
+    });
+</script>
+```
+
+**自定义验证方法**
+
+jQuery.validator.addMethod( name, method [, message ] )方法
+
+- name：设置验证方法的名称。
+- method：回调函数，function(value,element,param){}
+	- value：元素的值
+	- element：元素本身
+	- param：参数
+- message：设置验证不通过的错误提示信息。
+
+```html
+<div id="main">
+    <form class="cmxform" id="texttests" method="get" action="foo.html">
+        <h2 id="summary"></h2>
+        <fieldset>
+            <legend>Example with custom methods and heavily customized error display</legend>
+            <table>
+                <tr>
+                    <td>
+                        <label for="number">textarea</label>
+                    </td>
+                    <td>
+                        <input id="number" name="number" title="Please enter a number with at least 3 and max 15 characters!">
+                    </td>
+                    <td></td>
+                </tr>
+                <tr>
+                    <td>
+                        <label for="secret">Secret</label>
+                    </td>
+                    <td>
+                        <input name="secret" id="secret">
+                    </td>
+                    <td></td>
+                </tr>
+                <tr>
+                    <td>
+                        <label for="math">7 + 4 =</label>
+                    </td>
+                    <td>
+                        <input id="math" name="math" title="Please enter the correct result!">
+                    </td>
+                    <td></td>
+                </tr>
+            </table>
+            <input class="submit" type="submit" value="Submit">
+        </fieldset>
+    </form>
+    <h3 id="warning">Your form contains tons of errors! Please try again.</h3>
+</div>
+<script>
+    // this one requires the text "buga", we define a default message, too
+    $.validator.addMethod("buga", function(value) {
+        return value == "buga";
+    }, 'Please enter "buga"!');
+
+    // this one requires the value to be the same as the first parameter
+    $.validator.methods.equal = function(value, element, param) {
+        return value == param;
+    };
+
+    $().ready(function() {
+        var validator = $("#texttests").bind("invalid-form.validate", function() {
+            $("#summary").html("Your form contains " + validator.numberOfInvalids() + " errors, see details below.");
+        }).validate({
+            debug: true,
+            errorElement: "em",
+            errorContainer: $("#warning, #summary"),
+            errorPlacement: function(error, element) {
+                error.appendTo(element.parent("td").next("td"));
+            },
+            success: function(label) {
+                label.text("ok!").addClass("success");
+            },
+            rules: {
+                number: {
+                    required: true,
+                    minlength: 3,
+                    maxlength: 15,
+                    number: true
+                },
+                secret: "buga",
+                math: {
+                    equal: 11
+                }
+            }
+        });
+
+    });
+</script>
+```
+
+## 瀑布流插件
+
+### 什么是瀑布流
+
+瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。
+
+**特点**
+
+- 琳琅满目: 整版以图片为主，大小不一的图片按照一定的规律排列。
+- 唯美: 图片的风格以唯美的图片为主。
+- 操作简单: 在浏览网站的时候，只需要轻轻滑动一下鼠标滚轮,一切的美妙的图片精彩便可呈现在你面前。
+
+### Masonry 插件
+
+Masonry 是 jQuery 的布局插件，可以把 Masonry 看做是 CSS 的浮动布局。
+
+无论排列的元素是水平浮动的还是垂直浮动的，Masonry 都是根据网格先垂直排列元素，再水平排列元素，就像修墙一样。
+
+配置 Masonry 相当简单，只需在 jQuery 脚本简单的使用 `.masonry()` 方法来包装容器元素。由于布局，很可能需要制定一个选项。
+
+#### masonry() 方法推荐选项
+
+- itemSelector：指定使用项目中哪些子元素进行布局
+- columnWidth：设置每列的宽度
+
+```html
+<div id="basic" class="container">
+    <div class="item"></div>
+    <div class="item h2"></div>
+    <div class="item"></div>
+    <div class="item h3"></div>
+    <div class="item h5"></div>
+    <div class="item h2"></div>
+    <div class="item"></div>
+    <div class="item h4"></div>
+    <div class="item"></div>
+    <div class="item h3"></div>
+    <div class="item"></div>
+    <div class="item h5"></div>
+    <div class="item"></div>
+    <div class="item h3"></div>
+    <div class="item h4"></div>
+    <div class="item h4"></div>
+    <div class="item"></div>
+    <div class="item h3"></div>
+    <div class="item h4"></div>
+    <div class="item h4"></div>
+    <div class="item h5"></div>
+</div>
+<script>
+    $("#basic").masonry({
+        itemSelector: '.item',
+        columnWidth: 100
+    });
+</script>
+```
+
+#### masonry() 方法布局选项
+
+- gutter：设置每列之间的宽度
+- percentPosition：值为true，使用百分值，而不是像素值
+- stamp：在布局中标记元素，Masonry将在这些标记的元素下进行布局
+- isFitWidth：基于容器的父元素大小设置容器的宽度以适应可用的列数
+- isOriginLeft：设置布局的水平对齐，默认为true时，从左到右
+- isOriginTop：设置布局的垂直对齐，默认为true时，从上到下
+
+**百分值效果**
+
+```html
+<div id="basic" class="container">
+    <div class="item item-sizer"></div>
+    <div class="item item-sizer h2"></div>
+    <div class="item item-sizer"></div>
+    <div class="item item-sizer h3"></div>
+    <div class="item item-sizer h5"></div>
+    <div class="item item-sizer h2"></div>
+    <div class="item item-sizer"></div>
+    <div class="item item-sizer h4"></div>
+    <div class="item item-sizer"></div>
+    <div class="item item-sizer h3"></div>
+    <div class="item item-sizer"></div>
+    <div class="item item-sizer h5"></div>
+    <div class="item item-sizer"></div>
+    <div class="item item-sizer h3"></div>
+    <div class="item item-sizer h4"></div>
+    <div class="item item-sizer h4"></div>
+    <div class="item item-sizer"></div>
+    <div class="item item-sizer h3"></div>
+    <div class="item item-sizer h4"></div>
+    <div class="item item-sizer h4"></div>
+    <div class="item item-sizer h5"></div>
+</div>
+<script>
+    $("#basic").masonry({
+        columnWidth: ".item-sizer",
+        percentPosition : true
+    });
+</script>
+```
+
+**固定元素**
+
+```html
+<div id="basic" class="container">
+    <div class="stamp stamp1"></div>
+    <div class="stamp stamp2"></div>
+    <div class="item"></div>
+    <div class="item h2"></div>
+    <div class="item"></div>
+    <div class="item h3"></div>
+    <div class="item h5"></div>
+    <div class="item h2"></div>
+    <div class="item"></div>
+    <div class="item h4"></div>
+    <div class="item"></div>
+    <div class="item h3"></div>
+    <div class="item"></div>
+    <div class="item h5"></div>
+    <div class="item"></div>
+    <div class="item h3"></div>
+    <div class="item h4"></div>
+    <div class="item h4"></div>
+    <div class="item"></div>
+    <div class="item h3"></div>
+    <div class="item h4"></div>
+    <div class="item h4"></div>
+    <div class="item h5"></div>
+</div>
+<script>
+    $("#basic").masonry({
+        itemSelector: '.item',
+        columnWidth: 100,
+        stamp: '.stamp'
+    });
+</script>
+```
+
+**自适应宽度**
+
+```html
+<div id="basic" class="container">
+    <div class="item"></div>
+    <div class="item h2"></div>
+    <div class="item"></div>
+    <div class="item h3"></div>
+    <div class="item h5"></div>
+    <div class="item h2"></div>
+    <div class="item"></div>
+    <div class="item h4"></div>
+    <div class="item"></div>
+    <div class="item h3"></div>
+    <div class="item"></div>
+    <div class="item h5"></div>
+    <div class="item"></div>
+    <div class="item h3"></div>
+    <div class="item h4"></div>
+    <div class="item h4"></div>
+    <div class="item"></div>
+    <div class="item h3"></div>
+    <div class="item h4"></div>
+    <div class="item h4"></div>
+    <div class="item h5"></div>
+</div>
+<script>
+    $("#basic").masonry({
+        itemSelector: '.item',
+        columnWidth: 100,
+        isFitWidth: true
+    });
+</script>
+```
+
+#### masonry() 方法设置选项
+
+- containerStyle：对容器中的元素使用CSS样式
+- transitionDuration：设置改变位置或外观的过度时间，默认为0.4s
+- isResizeBound：是否根据窗口大小调整大小和位置
+- isInitLayout：是否初始化布局，为false时，可以在初始化布局前，使用方法或绑定事件
+
+#### Masonry 插件的方法
+
+**布局**
+
+- masonry( )：布局容器中所有的元素。当每个元素改变大小时，布局依旧有效并且每个元素要重新进行布局
+- layoutItems( )：布局指定元素
+
+**添加或删除元素**
+
+- appended( )：在布局的最后添加并布局新的元素
+- remove( )：从Masonry对象中或DOM中删除指定元素
+
+**事件**
+
+- on事件：添加一个Masonry事件的监听器
+- off事件：删除一个Masonry事件的监听器
+
+```html
+<div id="basic" class="container">
+    <div class="item"></div>
+    <div class="item h2"></div>
+    <div class="item"></div>
+    <div class="item h3"></div>
+    <div class="item h5"></div>
+    <div class="item"></div>
+    <div class="item h2"></div>
+    <div class="item"></div>
+    <div class="item h3"></div>
+    <div class="item h5"></div>
+    <div class="item h2"></div>
+    <div class="item"></div>
+    <div class="item h4"></div>
+    <div class="item"></div>
+    <div class="item h3"></div>
+    <div class="item"></div>
+    <div class="item h5"></div>
+</div>
+<script>
+    var $grid = $("#basic").masonry({
+        itemSelector: '.item',
+        columnWidth: 100,
+        isFitWidth: true
+    });
+
+    $grid.on( 'click', '.item', function() {
+        // change size of item via class
+        $( this ).toggleClass('grid-item--gigante');
+        // trigger layout
+        $grid.masonry();
+    });
+
+    $grid.on("layoutComplete",function( event, laidOutItems ) {
+        console.log( 'Masonry layout complete with ' + laidOutItems.length + ' items' );
+    });
+</script>
+```
+
+## 开发插件
+
+### jQuery 插件种类
+
+- 对象方法插件: 这种插件是将对象方法封装起来，用于对通过选择器获取的jQuery对象进行操作，是最常见的一种插件。
+- 全局函数插件: 可以将独立的函数添加到jQuery命名空间下，例如 `$.each( )`方法等。
+- 选择器插件: 个别情况下，会需要用到选择器插件。虽然jQuery的选择器已经很强大，但还是会需要扩展一些个性化的选择器用法。
+
+### 对象方法插件
+
+- 第一种定义方式
+
+```javascript
+jQuery.fn.changeBgColor = function(color){
+	this.css("background",color);
+}
+```
+
+- 第二种定义方式
+
+```javascript
+jQuery.fn.swapClass=function(class1,class2){
+	return this.each(function(){ //this 表示的是 匹配到的一组 <li>
+		var $element = jQuery(this); //this表示的是每个<li>
+		if($element.hasClass(class1)){
+			$element.removeClass(class1).addClass(class2);
+		} else if ($element.hasClass(class2)){
+			$element.removeClass(class2).addClass(class1);
+		}
+	});
+}
+```
+
+- 第三种定义方式
+
+```javascript
+jQuery.fn.extend({
+	changeBgColor = function(color){
+		this.css("background",color);
+	}
+});
+```
+
+### 全局函数插件
+
+- 第一种定义方式
+
+```javascript
+jQuery.globalFunction = function(){
+	alert("This is my plugins ");
+}
+```
+
+- 第二种定义方式
+
+```javascript
+jQuery.extend({
+	functionOne : function(){
+		alert("This is one function");
+	},
+	functionTwo : function(param){
+		alert("This is two function , param is "+param);
+	}
+});
+```
+
+- 第三种定义方式
+
+```javascript
+jQuery.sum = function(array){
+	var total = 0;
+	jQuery.each(array,function(index,value){
+		total += value;
+	});
+	return total;
+}
+```
+
+### jQuery插件案例
+
+```javascript
+jQuery.fn.shadow = function(){
+	return this.each(function(){
+		var $originalElement = jQuery(this);
+		for(var i=0; i < 5 ; i ++){
+			$originalElement.clone().css({
+				position:'absolute',
+				left:$originalElement.offset().left + i,
+				top:$originalElement.offset().top + i,
+				margin:0,
+				zIndex:-1,
+				opacity:0.1
+			}).appendTo('body');
+		}
+	});
+}
+```
--- a/JavaScript/jQuery/16
+++ b/JavaScript/jQuery/16
@@ -0,0 +1,298 @@
+## 什么是 jQuery 的选择器
+
+jQuery 的选择器的想法是源于 CSS 中的选择器的用法，其实在 JavaScript 中也有类似的用法，比如 querySelector() 或 querySelectorAll() 方法的使用，也是借助 CSS 中的选择器来定位 HTML 页面元素的。只不过相比 jQuery 中的选择器，JavaScript 中的 querySelector() 或 querySelectorAll() 方法的性能相对差一些而已。
+
+jQuery 的选择器最主要的作用就是用于定位 HTML 页面的元素。它不仅可以定位 HTML 页面中具体某个元素，还可以通过各种方式定位复合条件的一组元素等等。
+
+> **值得注意的是:** jQuery 的选择器最大的特点就是将定位元素和元素行为进行了有效的分离。这是在实际开发中非常必要的一项特点！
+
+## jQuery 选择器的种类
+
+jQuery 中使用其工厂函数 `$()` 作为容器，来接收 jQuery 的选择器内容。而 jQuery 的选择器则以字符串形式传递给 jQuery 的工厂函数。
+
+jQuery 的选择器种类大概可以分为以下几种:
+
+### 基本选择器
+
+```javascript
+//选择 id为 one 的元素
+$('#btn1').click(function(){
+    $('#one').css("background","#bfa");
+});
+//选择 class 为 mini 的所有元素
+$('#btn2').click(function(){
+    $('.mini').css("background","#bfa");
+});
+//选择 元素名是 div 的所有元素
+$('#btn3').click(function(){
+    $('div').css("background","#bfa");
+});
+//选择 所有的元素
+$('#btn4').click(function(){
+    $('*').css("background","#bfa");
+});
+//选择 所有的span元素和id为two的div元素
+$('#btn5').click(function(){
+    $('span,#two').css("background","#bfa");
+});
+```
+
+> **需要注意**
+> 
+> 1. 通配符选择器（*）默认匹配HTML页面中所有的元素。
+> 2. 复合选择器（多个选择器并列使用）的使用，每个选择器之间使用”,”进行分割。并且复合选择器匹配的结果是多个选择器的并集效果。
+
+
+### 层级选择器
+
+```javascript
+//选择 body内的所有div元素.
+$('#btn1').click(function(){
+    $('body div').css("background","#bbffaa");
+})
+//在body内的选择 元素名是div 的子元素.
+$('#btn2').click(function(){
+    $('body > div').css("background","#bbffaa");
+})
+//选择 所有class为one 的下一个div元素.
+$('#btn3').click(function(){
+    $('.one + div').css("background","#bbffaa");
+})
+//选择 id为two的元素后面的所有div兄弟元素.
+$('#btn4').click(function(){
+    $('#two ~ div').css("background","#bbffaa");
+})
+```
+
+> **值得注意的是:**
+> 
+> selectors~selector2 选择器，是获取符合 selector1 选择器的元素后面所有符合selector2 选择器的兄弟元素。
+> 
+> jQuery 中还有一个方法 siblings()，是获取指定元素的所有兄弟元素。
+
+### 基本过滤选择器
+
+```javascript
+//选择第一个div元素.
+$('#btn1').click(function(){
+    $('div:first').css("background","#bfa");
+})
+//选择最后一个div元素.
+$('#btn2').click(function(){
+    $('div:last').css("background","#bfa");
+})
+//选择class不为one的 所有div元素.
+$('#btn3').click(function(){
+    $('div:not(.one)').css("background","#bfa");
+})
+//选择 索引值为偶数 的div元素。
+$('#btn4').click(function(){
+    $('div:even').css("background","#bfa");
+})
+//选择 索引值为奇数 的div元素。
+$('#btn5').click(function(){
+    $('div:odd').css("background","#bfa");
+})
+//选择 索引等于 3 的元素
+$('#btn6').click(function(){
+    $('div:eq(3)').css("background","#bfa");
+})
+//选择 索引大于 3 的元素
+$('#btn7').click(function(){
+    $('div:gt(3)').css("background","#bfa");
+})
+//选择 索引小于 3 的元素
+$('#btn8').click(function(){
+    $('div:lt(3)').css("background","#bfa");
+})
+//选择 所有的标题元素.比如h1, h2, h3等等...
+$('#btn9').click(function(){
+    $(':header').css("background","#bfa");
+})
+//选择 当前正在执行动画的所有元素.
+$('#btn10').click(function(){
+    $(':animated').css("background","#bfa");
+});
+```
+
+> **值得注意的是:**
+> 
+> 1. “:not(selector)” 选择器，不仅可以匹配到 class 属性值不是 one 的元素，还匹配到没有 class 属性的元素。这不仅仅只是一个反操作的过程。
+> 2. “:even” 和 ”:odd” 选择器，表示索引值为偶数或者索引值为奇数的元素，但是需要注意的是索引值是从 0 开始的。
+> 3. :header” 选择器，是匹配 h1 - h6 标题元素，并不能匹配指定的某个标题元素。如果需要匹配具体某个标题元素可以使用元素选择器，所以这种用法在实际开发中很少见到。
+> 4. “:animated” 选择器，是匹配正在执行动画效果的元素，但需要注意的是它只能匹配 jQuery 执行的动画效果，而不能匹配其他技术实现的动画效果。
+
+
+### 内容过滤选择器
+
+```javascript
+//选取含有文本"di"的div元素.
+$('#btn1').click(function(){
+    $('div:contains(di)').css("background","#bbffaa");
+})
+//选取不包含子元素(或者文本元素)的div空元素.
+$('#btn2').click(function(){
+    $('div:empty').css("background","#bbffaa");
+})
+//选取含有class为mini元素 的div元素.
+$('#btn3').click(function(){
+    $('div:has(.mini)').css("background","#bbffaa");
+})
+//选取含有子元素(或者文本元素)的div元素.
+$('#btn4').click(function(){
+    $('div:parent').css("background","#bbffaa");
+})
+```
+
+> **值得注意的是:** “:has(selector)” 选择器，匹配含有符合 selector 选择器元素的元素，并不是匹配符合 selector 的元素。
+
+### 可见性过滤选择器
+
+```javascript
+//选取所有不可见的元素.包括<input type="hidden"/>.
+$('#btn_hidden').click(function(){
+    $('div:hidden').show(3000).css("background","#bbffaa");
+})
+//选取所有可见的元素.
+$('#btn_visible').click(function(){
+    $('div:visible').css("background","#FF6500");
+})
+```
+
+> **值得注意的是:** show() 方法表示将隐藏的元素显示，其参数表示动画执行的时长。（后面的内容会详细讲到）。
+
+### 属性过滤选择器
+
+```javascript
+//选取含有 属性title 的div元素.
+$('#btn1').click(function(){
+    $('div[title]').css("background","#bbffaa");
+})
+//选取 属性title值等于 test 的div元素.
+$('#btn2').click(function(){
+    $('div[title=test]').css("background","#bbffaa");
+})
+//选取 属性title值不等于 test 的div元素.
+$('#btn3').click(function(){
+    $('div[title!=test]').css("background","#bbffaa");
+})
+//选取 属性title值 以 te 开始 的div元素.
+$('#btn4').click(function(){
+    $('div[title^=te]').css("background","#bbffaa");
+})
+//选取 属性title值 以 est 结束 的div元素.
+$('#btn5').click(function(){
+    $("div[title$=est]").css("background","#bbffaa");
+})
+//选取 属性title值 含有 es  的div元素.
+$('#btn6').click(function(){
+    $("div[title*=es]").css("background","#bbffaa");
+})
+//组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有 es 的元素.
+$('#btn7').click(function(){
+    $("div[id][title*=es]").css("background","#bbffaa");
+})
+```
+
+> **值得注意的是:**
+> 
+> 1. “[attrName!=value]” 选择器，匹配 attrName 属性的值不等于 value 的元素，但也包含没有 attrName 属性的所有元素。
+> 2. “[attribute][attribute]” 属性复合选择器，是多个属性过滤选择器并列使用，匹配的结果是多个属性过滤选择器的交集。
+
+### 子元素过滤选择器
+
+```javascript
+//选取每个父元素下的第2个子元素
+$('#btn1').click(function(){
+    $('div.one :nth-child(2)').css("background","#bbffaa");
+})
+//选取每个父元素下的第一个子元素
+$('#btn2').click(function(){
+    $('div.one :first-child').css("background","#bbffaa");
+})
+//选取每个父元素下的最后一个子元素
+$('#btn3').click(function(){
+    $('div.one :last-child').css("background","#bbffaa");
+})
+//如果父元素下的仅仅只有一个子元素，那么选中这个子元素
+$('#btn4').click(function(){
+    $('div.one :only-child').css("background","#bbffaa");
+})
+```
+
+> **值得注意的是:**
+> 
+> 1. 子元素过滤选择器的特殊用法，就是在其前面需要增加空格。不然子元素过滤选择器将不会有效果！
+> 2. “nth-child(index)” 选择器中的 index 是从 0 开始的。
+
+### 表单对象属性过滤选择器
+
+```javascript
+//对表单内 可用input 赋值操作.
+$('#btn1').click(function(){
+    $("#form1 input:enabled").val("这里变化了！");
+    return false;
+})
+//对表单内 不可用input 赋值操作.
+$('#btn2').click(function(){
+    $("#form1 input:disabled").val("这里变化了！");
+    return false;
+})
+$(":checkbox").click(countChecked);
+function countChecked() {
+    var n = $("input:checked").length;
+    $("div").eq(0).html("<strong>有"+n+" 个被选中!</strong>");
+}
+countChecked();//进入页面就调用.
+$("select").change(function () {
+    var str = "";
+    $("select :selected").each(function () {
+         str += $(this).text() + ",";
+    });
+    $("div").eq(1).html("<strong>你选中的是："+str+"</strong>");
+})
+```
+
+> **值得注意的是:**
+> 
+> 1. “:checked” 选择器，匹配 checkbox 和 radio 元素中被选中的。
+> 2. “:selected” 选择器，匹配 select 元素中 option 元素被选中的。
+
+### 表单选择器
+
+```javascript
+var $alltext = $("#form1 :text");
+var $allpassword= $("#form1 :password");
+var $allradio= $("#form1 :radio");
+var $allcheckbox= $("#form1 :checkbox");
+
+var $allsubmit= $("#form1 :submit");
+var $allimage= $("#form1 :image");
+var $allreset= $("#form1 :reset");
+var $allbutton= $("#form1 :button"); // <input type=button />  和 <button ></button>都可以匹配
+var $allfile= $("#form1 :file");
+var $allhidden= $("#form1 :hidden"); // <input type="hidden" />和<div style="display:none">test</div>都可以匹配.
+var $allselect = $("#form1 select");
+var $alltextarea = $("#form1 textarea");
+
+var $AllInputs = $("#form1 :input");
+var $inputs = $("#form1 input");
+
+$("div").append(" 有" + $alltext.length + " 个（ :text 元素）<br/>")
+        .append(" 有" + $allpassword.length + " 个（ :password 元素）<br/>")
+        .append(" 有" + $allradio.length + " 个（ :radio 元素）<br/>")
+        .append(" 有" + $allcheckbox.length + " 个（ :checkbox 元素）<br/>")
+        .append(" 有" + $allsubmit.length + " 个（ :submit 元素）<br/>")
+        .append(" 有" + $allimage.length + " 个（ :image 元素）<br/>")
+        .append(" 有" + $allreset.length + " 个（ :reset 元素）<br/>")
+        .append(" 有" + $allbutton.length + " 个（ :button 元素）<br/>")
+        .append(" 有" + $allfile.length + " 个（ :file 元素）<br/>")
+        .append(" 有" + $allhidden.length + " 个（ :hidden 元素）<br/>")
+        .append(" 有" + $allselect.length + " 个（ select 元素）<br/>")
+        .append(" 有" + $alltextarea.length + " 个（ textarea 元素）<br/>")
+        .append(" 表单有 " + $inputs.length + " 个（input）元素。<br/>")
+        .append(" 总共有 " + $AllInputs.length + " 个(:input)元素。<br/>")
+        .css("color", "red")
+
+$("form").submit(function () { return false; }); // return false;不能提交.
+```
--- a/JavaScript/jQuery/17
+++ b/JavaScript/jQuery/17
@@ -0,0 +1,534 @@
+jQuery UI 能做的事可谓是包罗万象。实际上，jQuery UI 在某种意义上并不是插件，而是一个完整的插件库。
+
+jQuery UI 中主要包含以下几个功能:
+
+- Effect（效果）
+- Interactions（交互组件）
+- Widget（部件）
+- 此外，还为jQuery和核心动画提供了很多高级效果。
+
+
+## Effect（效果）
+
+### animate() 方法
+
+文档在引入核心效果文件的情况下，扩展的 `.animate()` 方法可接受另外一些样式属性。
+
+扩展后 animate 方法接受以下属性:
+
+- backgroundColor
+- borderBottomColor
+- borderLeftColor
+- borderRightColor
+- borderTopColor
+- Color
+- outlineColor
+
+```javascript
+var state = true;
+$( "#button" ).click(function() {
+	if ( state ) {
+		$( "#effect" ).animate({
+			backgroundColor: "#aa0000",
+			color: "#fff",
+			width: 500
+		}, 1000 );
+	} else {
+		$( "#effect" ).animate({
+			backgroundColor: "#fff",
+			color: "#000",
+			width: 240
+		}, 1000 );
+	}
+	state = !state;
+});
+```
+
+### effect() 方法
+
+```javascript
+function runEffect() {
+	var selectedEffect = $( "#effectTypes" ).val();
+
+	var options = {};
+	if ( selectedEffect === "scale" ) {
+		options = { percent: 0 };
+	} else if ( selectedEffect === "transfer" ) {
+		options = { to: "#button", className: "ui-effects-transfer" };
+	} else if ( selectedEffect === "size" ) {
+		options = { to: { width: 200, height: 60 } };
+	}
+
+	$( "#effect" ).effect( selectedEffect, options, 500, callback );
+};
+
+function callback() {
+	setTimeout(function() {
+		$( "#effect" ).removeAttr( "style" ).hide().fadeIn();
+	}, 1000 );
+};
+
+$( "#button" ).click(function() {
+	runEffect();
+	return false;
+});
+```
+
+## Interactions（交互组件）
+
+### Draggable Widget
+
+Draggable Widget 允许使用鼠标移动元素。
+
+```javascript
+<div id="draggable" class="ui-widget-content">
+	<p>Drag me around</p>
+</div>
+
+<script>
+	$( "#draggable" ).draggable();
+</script>
+```
+
+draggable()的事件:
+	
+- start：当拖动开始时触发。
+- drag：当鼠标在拖动过程中移动时触发。
+- stop：当拖动停止时触发。
+
+```javascript
+<div id="draggable" class="ui-widget ui-widget-content">
+
+    <p>Drag me to trigger the chain of events.</p>
+
+    <ul class="ui-helper-reset">
+        <li id="event-start" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-play"></span>"start" invoked <span class="count">0</span>x</li>
+        <li id="event-drag" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-arrow-4"></span>"drag" invoked <span class="count">0</span>x</li>
+        <li id="event-stop" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-stop"></span>"stop" invoked <span class="count">0</span>x</li>
+    </ul>
+</div>
+
+<script>
+    var $start_counter = $( "#event-start" ),
+            $drag_counter = $( "#event-drag" ),
+            $stop_counter = $( "#event-stop" ),
+            counts = [ 0, 0, 0 ];
+
+    $( "#draggable" ).draggable({
+        start: function() {
+            counts[ 0 ]++;
+            updateCounterStatus( $start_counter, counts[ 0 ] );
+        },
+        drag: function() {
+            counts[ 1 ]++;
+            updateCounterStatus( $drag_counter, counts[ 1 ] );
+        },
+        stop: function() {
+            counts[ 2 ]++;
+            updateCounterStatus( $stop_counter, counts[ 2 ] );
+        }
+    });
+
+    function updateCounterStatus( $event_counter, new_count ) {
+        // first update the status visually...
+        if ( !$event_counter.hasClass( "ui-state-hover" ) ) {
+            $event_counter.addClass( "ui-state-hover" )
+                    .siblings().removeClass( "ui-state-hover" );
+        }
+        // ...then update the numbers
+        $( "span.count", $event_counter ).text( new_count );
+    }
+</script>
+```
+
+draggable() 的选项:
+
+- axis：设置只能在x轴或y轴方向拖动。
+- containment：设置在某个区域内拖动。
+- cursor：设置拖动时鼠标的样式。
+- cursorAt：设置鼠标的相对定位。
+- handle：设置指定元素触发鼠标按下事件才能拖动。
+- cancel：防止在指定元素上拖动。
+- revert：当停止拖动时，元素是否被重置到初始位置。
+- snap：拖动元素是否吸附在其他元素。
+- snapMode：设置拖动元素在指定元素的哪个边缘。
+	- snap设置为true时该选项有效。
+	- 可选值 - inner|outer|both
+
+```javascript
+<div id="draggable1" class="draggable ui-widget-content">
+    <p>I can be dragged only vertically</p>
+</div>
+
+<div id="draggable2" class="draggable ui-widget-content">
+    <p>I can be dragged only horizontally</p>
+</div>
+
+<div id="draggable4" class="draggable ui-widget-content">
+    <p>I will always stick to the center (relative to the mouse)</p>
+</div>
+
+<div id="draggable5" class="draggable ui-widget-content">
+    <p class="ui-widget-header">I can be dragged only by this handle</p>
+</div>
+
+<div id="draggable6" class="draggable ui-widget-content">
+    <p>You can drag me around&hellip;</p>
+    <p class="ui-widget-header">&hellip;but you can't drag me by this handle.</p>
+</div>
+
+<div id="draggable7" class="draggable ui-widget-content">
+    <p>Revert the original</p>
+</div>
+
+<div id="draggable8" class="draggable ui-widget-content">
+    <p>Default (snap: true), snaps to all other draggable elements</p>
+</div>
+
+<div id="draggable9" class="draggable ui-widget-content">
+    <p>I only snap to the outer edges of the big box</p>
+</div>
+
+<div id="containment-wrapper" class="draggable">
+    <div id="draggable3" class="draggable ui-widget-content">
+        <p>I'm contained within the box</p>
+    </div>
+</div>
+
+<script>
+    $( "#draggable1" ).draggable({ axis: "y" });
+    $( "#draggable2" ).draggable({ axis: "x" });
+    $( "#draggable3" ).draggable({ containment: "#containment-wrapper" });
+    $( "#draggable4" ).draggable({ cursor: "move", cursorAt: { top: 56, left: 56 } });
+    $( "#draggable5" ).draggable({ handle: "p" });
+    $( "#draggable6" ).draggable({ cancel: "p.ui-widget-header" });
+    $( "#draggable7" ).draggable({ revert: true });
+    $( "#draggable8" ).draggable({ snap: true });
+    $( "#draggable9" ).draggable({ snap: "#containment-wrapper", snapMode: "outer" });
+</script>
+```
+
+### Droppable Widget
+
+Droppable Widget 为可拖拽小部件创建目标。
+
+droppable() 的事件:
+
+- drop：该事件在被允许拖放的元素覆盖时触发。
+
+droppable() 的选项:
+
+- accept：指定可拖动的元素可被接受。
+- activeClass：被允许拖放的元素覆盖时，改变样式。
+- hoverClass：被允许拖放的元素悬停时，改变样式。
+
+```javascript
+<div id="draggable-nonvalid" class="ui-widget-content">
+    <p>I'm draggable but can't be dropped</p>
+</div>
+
+<div id="draggable" class="ui-widget-content">
+    <p>Drag me to my target</p>
+</div>
+
+<div id="droppable" class="ui-widget-header">
+    <p>Drop here</p>
+</div>
+<script>
+    $( "#draggable, #draggable-nonvalid" ).draggable();
+
+    $( "#droppable" ).droppable({
+        accept: "#draggable",
+        activeClass: "ui-state-hover",
+        hoverClass: "ui-state-active",
+        drop: function( event, ui ) {
+            $( this )
+                    .addClass( "ui-state-highlight" )
+                    .find( "p" )
+                    .html( "Dropped!" );
+        }
+    });
+</script>
+```
+
+### Resizeable Widget
+
+Resizeable Widget 使用鼠标改变元素的尺寸。
+
+```javascript
+<div id="resizable" class="ui-widget-content">
+    <h3 class="ui-widget-header">Resizable</h3>
+</div>
+<script>
+    $( "#resizable" ).resizable();
+</script>
+```
+
+### Sortable Widget
+
+Sortable Widget 使用鼠标调整列表中或者网格中元素的排序。
+
+```javascript
+<ul id="sortable">
+    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
+    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
+    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
+    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
+    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
+    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
+    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
+</ul>
+<script>
+    $( "#sortable" ).sortable();
+</script>
+```
+
+## Widget（部件）
+
+### Accordion Widget
+
+Accordion Widget 把一对标题和内容面板转换成折叠面板。
+
+```javascript
+<div id="accordion">
+    <h3>Section 1</h3>
+    <div>
+        <p>
+            Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
+            ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
+            amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
+            odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
+        </p>
+    </div>
+    <h3>Section 2</h3>
+    <div>
+        <p>
+            Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
+            purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
+            velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
+            suscipit faucibus urna.
+        </p>
+    </div>
+    <h3>Section 3</h3>
+    <div>
+        <p>
+            Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
+            Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
+            ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
+            lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
+        </p>
+        <ul>
+            <li>List item one</li>
+            <li>List item two</li>
+            <li>List item three</li>
+        </ul>
+    </div>
+    <h3>Section 4</h3>
+    <div>
+        <p>
+            Cras dictum. Pellentesque habitant morbi tristique senectus et netus
+            et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
+            faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
+            mauris vel est.
+        </p>
+        <p>
+            Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
+            Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
+            inceptos himenaeos.
+        </p>
+    </div>
+</div>
+
+<script>
+    $( "#accordion" ).accordion();
+</script>
+```
+
+> **值得注意的是:**
+> 
+> - 使用`<div>`元素作为折叠面板的容器。
+> - 使用`<h3>`元素作为折叠面板的标题。
+> - 使用`<div>`元素作为折叠面板的内容。
+
+### Autocomplete Widget
+
+Autocomplete Widget 自动完成功能根据用户输入值进行搜索和过滤，让用户快速找到并从预设值列表中选择。
+
+```javascript
+<div class="ui-widget">
+    <label for="tags">Tags: </label>
+    <input id="tags">
+</div>
+<script>
+    var availableTags = [
+        "ActionScript",
+        "AppleScript",
+        "Asp",
+        "BASIC",
+        "C",
+        "C++",
+        "Clojure",
+        "COBOL",
+        "ColdFusion",
+        "Erlang",
+        "Fortran",
+        "Groovy",
+        "Haskell",
+        "Java",
+        "JavaScript",
+        "Lisp",
+        "Perl",
+        "PHP",
+        "Python",
+        "Ruby",
+        "Scala",
+        "Scheme"
+    ];
+    $( "#tags" ).autocomplete({
+        source: availableTags
+    });
+</script>
+```
+
+### Datepicker Widget
+
+Datepicker Widget 从弹出框或在线日历选择一个日期。
+
+```javascript
+<p>Date: <input type="text" id="datepicker"></p>
+<script>
+    $( "#datepicker" ).datepicker();
+</script>
+```
+
+### Dialog Widget
+
+Dialog Widget 在一个交互覆盖层中打开内容。
+
+- 基本对话框示例
+
+```javascript
+<div id="dialog" title="Basic dialog">
+    <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
+</div>
+<script>
+    $( "#dialog" ).dialog();
+</script>
+```
+
+- 模式对话框示例
+
+```javascript
+<div id="dialog-modal" title="Basic modal dialog">
+    <p>Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</p>
+</div>
+<script>
+    $( "#dialog-modal" ).dialog({
+        modal: true
+    });
+</script>
+```
+
+- 操作对话框示例
+
+```javascript
+<div id="dialog" title="Basic dialog">
+    <p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
+</div>
+
+<button id="opener">Open Dialog</button>
+
+<script>
+    $( "#dialog" ).dialog({
+        autoOpen: false,
+        show: {
+            effect: "blind",
+            duration: 1000
+        },
+        hide: {
+            effect: "explode",
+            duration: 1000
+        },
+        buttons : {
+            "OK": function() {
+                $( this ).dialog( "close" );
+            },
+            Cancel: function() {
+                $( this ).dialog( "close" );
+            }
+        }
+    });
+
+    $( "#opener" ).button().click(function() {
+        $( "#dialog" ).dialog( "open" );
+    });
+</script>
+```
+
+### Tabs Widget
+
+Tabs Widget 是一种多面板的单内容区，每个面板与列表中的标题相关。
+
+```javascript
+<div id="tabs">
+    <ul>
+        <li><a href="#tabs-1">Nunc tincidunt</a></li>
+        <li><a href="#tabs-2">Proin dolor</a></li>
+        <li><a href="#tabs-3">Aenean lacinia</a></li>
+    </ul>
+    <div id="tabs-1">
+        <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
+    </div>
+    <div id="tabs-2">
+        <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
+    </div>
+    <div id="tabs-3">
+        <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
+        <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
+    </div>
+</div>
+<script>
+    $( "#tabs" ).tabs();
+</script>
+```
+
+### Tooltip Widget
+
+Tooltip Widget 可自定义的、可主题化的工具提示框，替代原生的工具提示框。
+
+```javascript
+<p>
+    <label for="age">Your age:</label>
+    <input id="age" title="We ask for your age only for statistical purposes.">
+</p>
+<script>
+    $( document ).tooltip();
+</script>
+```
+
+### Menu Widget
+
+Menu Widget 带有鼠标和键盘交互的用于导航的可主题化菜单。
+
+- 禁用页面中默认的鼠标右键功能。
+
+```javascript
+$(document).contextmenu(function (event) {
+	event.preventDefault();
+});
+```
+
+- 自定义鼠标右键菜单。
+
+```javascript
+$(document).mousedown(function (event) {
+	if(event.button == 2){
+		$( "#menu").removeAttr("style").menu().position({
+			my: "left top",
+			at: "left top",
+			of : event,
+			collision: "fit"
+		});
+	}
+});
+```
--- a/JavaScript/jQuery/18
+++ b/JavaScript/jQuery/18
@@ -0,0 +1,43 @@
+类数组对象就是结构上类似于数组的对象，该对象具备数组的一些特性属性或方法，同时具有自己独特的一些属性或方法。
+
+## 数组与类数组对象的区别
+
+- 数组的类型是 Array
+- 类数组对象的类型是 Object
+
+## 类数组的操作
+
+- length属性：获取指定元素的个数。
+- eq(index)：将下标等于index的DOM对象取出来。
+- get(index)：返回一个DOM对象组成的数组。
+- index（obj）：返回DOM或jQuery对象在类数组中的下标。
+
+### 遍历方法
+
+`$(selector).each(callback)` 方法
+
+- callback：回调函数，function(index,domEle){}
+	- index：遍历过程中的索引值
+	- domEle：遍历后得到的DOM对象
+
+```javascript
+$("input").each(function(index,domEle){
+   console.log(domEle.value);
+});
+```
+
+`$.each(obj,callback)` 方法
+
+- obj：需要遍历的对象或数组。
+- callback：回调函数，function(index,domEle){}
+	- index：遍历过程中的索引值
+	- domEle：遍历后得到的DOM对象
+
+```javascript
+$.each($("input"),function(index,domEle){
+    console.log(domEle.value);
+    console.log($(domEle).val());
+    console.log(this.value);
+    console.log($(this).val());
+});
+```