注意：所有文章除特别说明外，转载请注明出处.
1.jQuery语法
jQuery语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
jQuery 入口函数与 JavaScript 入口函数的区别：
1.jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。
1 | //文档就绪之后执行jQuery方法 |
2.JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。
2.jQuery 选择器
jQuery 选择器(jQuery 选择器允许我们对 HTML 元素组或单个元素进行操作)基于元素的 id、类、类型、属性、属性值等”查找”（或选择）HTML 元素，jQuery 中所有选择器都以美元符号开头：$()。
1.#id 选择器
jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素，页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。
语法：$("#test")
2..class 选择器
jQuery 类选择器可以通过指定的 class 查找元素
语法：$(".test")
3.元素选择器
jQuery 元素选择器基于元素名选取元素
语法：$("p") 表示选取页面中所有的<p>元素
4.过滤选择器
主要是通过特定的过滤规则筛选出所需要的DOM元素 过滤规则：选择器以(:)开头
主要过滤选择器：
1.:first 选取第一个元素
2.:last 选取最后一个元素
3.:header 选取所有的标题元素，如：h2/h3/h1等
...
案例：
//改变第一个<div>元素的背景色
$('div:first').css("background","#bbffaa");
3.jQuery 事件
事件(jQuery 是为事件处理特别设计的)：页面对不同访问者的响应叫做事件 事件处理程序指的是当HTML中发生某些事件时所调用的方法
1.jQuery 事件方法语法
在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法
1.$("p").click();//页面中点击事件的语法，然后在事件触发之后让其执行相关的事件处理程序
2.常用的jQuery事件方法
1.click() 该方法是当按钮点击事件被触发时会调用的一个函数
$("p").click(function(){
$(this).hide();
});
2.dblclick() 当双击元素时，会发生dblclick事件
3.mouseenter() 当鼠标指针穿过元素时，会发生 mouseenter 事件
4.mouseleave() 当鼠标指针离开元素时，会发生 mouseleave 事件
5.mousedown()
...
3.
2.事件绑定
1.基本效果
在文档装载完成之后，如果需要为元素绑定事件来完成操作，可以使用bind()方法来对匹配元素进行特定事件的绑定。
格式：
bind(type [,data],fn);
1.type:事件类型
2.可选参数，作为event、data属性值传递给事件对象的额外数据对象
3.fn:用来绑定操作的处理函数
注意：jQuery中的事件绑定类型比普通的JavaScript事件绑定类型少了on
案例：
$(function(){
$("#panel h5.head").bind("click",function(){
$(this).next("div.content").show();
})
})
注意：在jQuery中的关键字this，this引用的是携带相应行为的DOM元素
2.加强效果
3.改变事件的绑定类型
4.简写绑定事件
4.jQuery效果
1.hide()/show() 通过hide()和show()方法来隐藏和显示HTML元素
//hide()方法
$("#hide").click(function(){
$("p").hide();
});
//show()方法
$("#show").click(function(){
$("p").show();
});
2.toggle() 使用 toggle() 方法来切换 hide() 和 show() 方法
3.fadeIn() 用于淡入已隐藏的元素
//fadeIn()方法中的效果时长："slow"/fast以及毫秒值
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
4.fadeOut() 方法用于淡出可见元素
//类似于fadeIn()方法，其也能够控制效果时长
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
5.fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换
如果元素已淡出，则fadeToggle()会向元素添加淡入效果 如果元素已淡入，则fadeToggle()会向元素添加淡出效果
6.fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）
opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）
7.slideDown() 方法用于向下滑动元素
$("#flip").click(function(){
$("#panel").slideDown();
});
8.slideUp() 方法用于向上滑动元素
$("#flip").click(function(){
$("#panel").slideUp();
});
9.slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换
10.animate() 用于创建自定义动画
语法：$(selector).animate({params},speed,callback);
1.params:定义形成动画的css属性
2.speed:可以是fast/slow/毫秒值
3.callback:可选，表示动画完成之后所执行的函数名称
$("button").click(function(){
$("div").animate({left:'250px'});
});
5.jQuery 方法链接
有一种名为链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。
提示： 这样的话，浏览器就不必多次查找相同的元素。如需链接一个动作，只需简单地把该动作追加到之前的动作上。
1 | //表示p1元素会首先变成红色，然后向上滑动，最后向下滑动 |
1.jQuery方法
1. on()方法 该方法在被选元素及子元素上添加一个或多个事件处理程序
注意：使用on()方法添加的事件处理程序适用于当前及未来的元素
提示：
1.如果需要移除事件处理程序，使用off()方法 2.如需添加只运行一次的事件然后移除，请使用 one() 方法
2.event.preventDefault() 方法 阻止元素发生默认的行为
例如：点击提交按钮时阻止对表单的提交或阻止URL的链接等
提示：请使用 event.isDefaultPrevented() 方法来检查指定的事件上是否调用了 preventDefault() 方法
注意：参数event必须，是来自事件绑定绑定函数
6.jQuery 获取内容和属性
前提：jQuery 提供一系列与 DOM(文档对象模型)
相关的方法，这使访问和操作元素和属性变得很容易
1.获取内容(方法)
1.text() - 设置或返回所选元素的文本内容
2.html() - 设置或返回所选元素的内容（包括 HTML 标记）
3.val() - 设置或返回表单字段的值
4.attr() 方法用于获取属性值
注意：1.对于
HTML元素本身就带有的固有属性，在处理时，使用 prop 方法。对于 HTML 元素我们自己自定义的 DOM 属性，在处理时，使用 attr 方法
2.设置内容和属性
1.attr() 用于设置或改变一个或多个属性值
3.添加元素
1.append() 在被选元素结尾插入内容
2.prepend() 在被选元素开头插入内容
3.after() 在被选元素之后插入内容
4.before() 在被选元素之前插入内容
总结：1.append()/prepend() 是在选择元素内部嵌入 2.after()/before()是在元素外面追加
4.删除元素
如果需要删除元素，一般使用remove()/empty()方法。
1.remove() 删除被选元素以及子元素
//此时删除的不仅是div1里面的内容，而且还有div1这个块
$("#div1").remove();
2.empty() 从被选元素中删除子元素
//此时仅仅删除的是div1里面的内容，并没有删除div1这个块
$("#div1").empty();
3.过滤被删除的元素
//即就是接受一个参数，删除该参数下所有的元素
$("p").remove(".italic");//表示删除class="italic"下面的所有<p>元素
7.jQuery css() 方法
1.css() 方法设置或返回被选元素的一个或多个样式属性
扩展
JavaScript Object.keys()方法
作用：返回对象的可枚举属性和方法的名称语法：Object.keys(object)
8.jQuery 尺寸
1.width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）
2.height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）
3.innerWidth() 方法返回元素的宽度（包括内边距）
4.innerHeight() 方法返回元素的高度（包括内边距）
5.outerWidth() 方法返回元素的宽度（包括内边距和边框）
6.outerHeight() 方法返回元素的高度（包括内边距和边框）
9.jQuery 遍历
1.祖先
通过 jQuery，能够向上遍历 DOM 树，以查找元素的祖先
1.parent() 方法返回被选元素的直接父元素，该方法只会向上一级对 DOM 树进行遍历
//表示只返回span元素的直接父元素(如：<ul>/<li>)
$(document).ready(function(){
$("span").parent();
});
2.parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)
//返回元素span的所有父元素
$(document).ready(function(){
$("span").parents();
});
3.parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素
//返回介于span元素与div元素之间所有的父元素
$(document).ready(function(){
$("span").parentsUntil("div");
});
2.后代
通过jQuery，我们可以向下遍历DOM树，查找元素的所有后代
1.children()方法 返回被选元素的所有直接子元素，该方法只会向下一级对 DOM 树进行遍历
//返回div元素的所有子元素，不会越级返回元素
$(document).ready(function(){
$("div").children();
});
注意：可以使用可选参数来过滤子元素的搜索
//表示返回类名为class_1的所有<p>元素，且这些元素是<div>的直接子元素
$(document).ready(function(){
$("div").children("p.class_1");
});
2.find()方法 返回被选元素的后代元素，一路向下直到最后一个后代
//表示返回div元素后代的所有span元素
$(document).ready(function(){
$("div").find("span");
});
//表示返回div元素的所有后代
$(document).ready(function(){
$("div").find("*");
});
3.同胞
前提：同胞拥有相同的父元素，通过 jQuery，我们能够在 DOM 树中遍历元素的同胞元素
1.next() 方法返回被选元素的下一个同胞元素
//表示返回h2元素的下一个同胞元素
$(document).ready(function(){
$("h2").next();
});
2.nextAll() 方法返回被选元素的所有跟随的同胞元素
//表示返回h2元素的所有跟随同胞元素
$(document).ready(function(){
$("h2").nextAll();
});
3.nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素
//返回介于h2-h6之间的所有的跟随同胞元素
$(document).ready(function(){
$("h2").nextUntil("h6");
});
4.siblings() 方法返回被选元素的所有同胞元素
注意：prev() prevAll() 以及 prevUntil()
方法的工作方式与上面的方法类似。只不过是工作方向相反而已，它们返回的是前面的同胞元素（在 DOM 树中沿着同胞之前元素遍历，而不是之后元素遍历）
4.过滤
基本的过滤方法：first()/last()和eq()，它们允许我们基于其在一组元素中的位置来选择一个特定的元素
1.first() 方法返回被选元素的首个元素
//选取首个 <div> 元素内部的第一个 <p> 元素
$(document).ready(function(){
$("div p").first();
});
2.last() 方法返回被选元素的最后一个元素
//选择最后一个 <div> 元素中的最后一个 <p> 元素
$(document).ready(function(){
$("div p").last();
});
3.eq() 方法返回被选元素中带有指定索引号的元素
//索引号从 0 开始，因此首个元素的索引号是 0 而不是 1
$(document).ready(function(){
$("p").eq(1);
});
4.filter() 方法允许我们规定一个标准，如果元素不匹配这个标准的会被从集合中删除，匹配的元素会被返回
//返回带有类名 "url" 的所有 <p> 元素
$(document).ready(function(){
$("p").filter(".url");
});
10.jQuery - AJAX
AJAX 与服务器交换的技术，它在不重载全部页面的情况下，实现了对部分网页的更新。
AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML） 简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。
注意：ajax的工作原理相当于在用户和服务器之间加了一个中间层(AJAX引擎)，使用户操作与服务器响应异步化
jQuery 提供多个与 AJAX 有关的方法，通过 jQuery AJAX 方法，我们能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON同时我们能够把这些外部数据直接载入网页的被选元素中 是用于创建快速动态网页的技术。
Ajax只刷新局部网页的技术：
1.JavaScript：更新局部的网页
2.XML：一般用于请求数据和响应数据的封装
3.XMLHttpRequest对象：发送请求到服务器并获得返回结果(该对象是整个Ajax技术的核心，提供异步发送请求的能力)
4.异步：发送请求后不等返回结果，由回调函数处理结果
0.open()方法 建立与服务器的连接
method：post/get 该参数指定请求的http方法
URL：该参数指定请求的地址
async：该参数指定是否使用异步请求
setRequestHeader：设置请求头信息
1.load() 方法是简单但强大的 AJAX 方法
作用：从服务器加载数据，并把返回的数据放入被选元素中
1.URL参数规定所希望加载的URL
2.data参数规定与请求一同发送的查询字符串键值对集合
语法：$(selector).load(URL,data,callback);
如：
$("#hello").load("text.html");
2.$.get() 方法
作用：通过 HTTP GET 请求从服务器上请求数据
1.URL(String) 请求的HTML网页的URL地址
2.data 传递的数据 callback(data,status)：请求完成时的回调函数，data指从服务器响应的地址，status 指服务器请求的响应状态
语法：$.get(URL，data,callback)
URL 参数规定您希望请求的 URL
callback 参数是请求成功后所执行的函数名(可选)
语法：$.get(URL,callback);
3.$.post() 方法通过 HTTP POST 请求向服务器提交数据
1.URL 参数规定您希望请求的 URL
2.data 参数规定连同请求发送的数据(可选)
3.callback参数是请求成功后所执行的函数名(可选)
语法：$.post(URL,data,callback);
get与post请求的区别：1.get方法通常用来从指定的资源请求数据(可用于缓存、保存浏览器历史记录、只应当用于取回数据)。2.post方法通常用来向指定的资源提交要被处理的数据(post请求不会被缓存、请求不会保存在浏览器历史记录中、对请求数据长度没有限制、主要是向服务器提交数据，特别是大批量的数据)
4.ajax() 该方法通过HTTP请求加载远程数据，是jQurey底层AJAX实现，$.ajax() 返回其创建的 XMLHttpRequest 对象，在最简单的情况下，$.ajax()可以不带任何参数直接使用。
注意：所有的选项都可以通过 $.ajaxSetup() 函数来全局设置
语法：jQuery.ajax([settings])
settings：用于配置AJAX请求的键值对集合 可以通过$.ajaxSetup() 设置任何选项的默认值
该方法常见的参数：
URL：发送请求的地址
type：请求的方法(get/post)
timeout：设置请求超时时间
async：默认为true，表示为异步请求，false表示为同步请求
beforeSend：发送请求前触发该事件
cache：默认为true，表示从浏览器缓存中加载请求信息
complete：请求结束后触发该事件
contentType：发送信息到服务器时内容编码的类型
data：发送到服务器的数据
dataType：预期服务器返回的数据类型
error：表示请求失败时调用的方法
global：设置为false将不会触发全局ajax事件
ifModified：仅在服务器数据改变时获取新数据
processData：发送的数据将被转换为对象
success：请求成功后回调函数
5.ajax提交form表单方法
在日常项目中经常使用到ajax提交form表单，而ajax提交表单有两种方式：
1.无返回结果，直接将表单交给后台，让后台直接处理 最简单的：$(“#formid”).submit();//直接将form表单提交到后台。
2.有返回结果的，在这种情况下，后台不管执行成功还是失败，最终的信息都需要返回到前台。而ajax本身属于有返回结果的一类，其中的success方法就是处理后台返回结果的。
ajax提交表单有返回结果的两种实现方式：
1 | 1.将表单数据序列化 |
注意：使用这种方法的前提是form表单中要有name属性，后台获取的键值对为key=name值，value=各项值 无论是input标签还是span标签或者其他标签一定要有name属性，没有name属性，后台是获取不到该项的。
2
3
4
5
6
7
8
<span style="font-size:18px;">
//提交表单
var obj = document.getElementById("xx_iframe").contentWindow;
obj.$("#yourform").form("submit",{
success:function(data){
//对结果处理
});</span>
注意：ajax中封装的post、get请求都是有返回结果的一类
6.serizlize()方法
作用：将表单中的元素名称和值转换成URL参数格式。
语法：$().serizlize()
如：
$("#form1").serizlize(); //表示把表单名称为form1的元素名称和值序列化
7.send() 方法
作用：该方法表示发送请求，其中参数为content表示指定请求的参数。
8.常用的属性
1.onreadystatechange：指定回调函数
2.readyState：XMLHttpRequest的状态信息
3.status：http状态信息码
4.responseText：获取响应的文本内容
5.responseXML：获得响应的XML文档对象document
AJAX的封装
1.函数封装
function ajax(url,Succ,Fail){
var aj=new XMLHttpRequest();
aj.open('Get',url,true);
aj.send();
aj.onreadystatechange=function(){
if(aj.readyState==4){
if(aj.status==200){
Succ(aj.responseText)
}else{
if(Fail){
Fail(aj.statusText)
}
}
}
}
}
2.获取JSON数据
<input type="button" value="测试按钮"id="but">
<div id="div1"></div>
<script>
var but=document.getElementById("but");
var div1=document.getElementById("div1");
but.=function(){
ajax("test1.json",function(str){
var name=JSON.parse(str);
for(var i in name){
for(var j in name[i]){
var lis=document.createElement('li'); lis.innerHTML=j+':'+name[i][j];
div1.appendChild(lis);
}
}
}),function(s){
alert(s)
}
}
</script>
AJAX使用的步骤
1.创建XMLHttpRequest对象
语法：
var myAjax = new XMLHttpRequest();
或 var myAjax = new ActiveXObject("microsoft.xmlhttp");
2.open()方法连接服务器
3.send()方法发送请求给服务器
2.向服务器发送请求：使用open()方法和send()方法
语法：
open(method,url,async) 表示规定请求的类型、URL以及是否异步请求，method：请求类型，get/post
url:文件在服务器上的位置
send(string):string 仅用于post请求
3.服务器响应
如果我们需要获取来自服务器的响应，需要使用XMLHttpRequest对象的responseText或responseXML属性
responseText属性：该属性返回字符串形式的响应
responseXML属性：如果来自服务器的响应是XML，同时需要作为XML对象进行解析，需要使用responseXML属性
4.onreadystatechange属性连接函数responseText属性从服务器返回的数据
onreadystatechange 事件，当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当 readyState 改变时，就会触发 onreadystatechange 事件。
XMLHttpRequest 对象的三个重要的属性：
onreadystatechange:存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState:存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
status:200: "OK"/404: 未找到页面
注意：我们能够使用Ajax验证用户名是否存在。
步骤：
1.使用文本框的onblur事件
2.使用ajax技术实现异步交互
1.创建XMLHttpRequest对象
2.通过XMLHttpRequest对象设置请求信息
3.向服务器发送请求
4.创建回调函数，根据响应状态动态更新页面
扩展：四种常用的ajax请求方式：
<br>
1.$.ajax()返回其创建的 XMLHttpRequest 对象
$.ajax() 只有一个参数：参数 key/value 对象，包含各配置及回调函数信息，如果你指定了dataType选项，那么需要保证服务器返回正确的MIME信息，(如 xml 返回 "text/xml")
2.通过远程http get请求载入信息
比较复杂的$.ajax来说，get请求功能更简单，请求成功时可以调用回调函数，出错时还是使用$.ajax
3.通过远程http post请求载入信息
post请求相对比较简单，请求成功时可以调用回调函数，出错时也使用$.ajax请求
4.通过http get请求载入JSON数据
方法：$.getJSON(url,function(){})
扩展：jQuery DataTable 前端插件(与后端完全分离) 强大的功能支持：排序、分页、搜索等
主要特点：自动分页处理、即时表格数据过滤、数据排序以及数据类型自动检测、自动处理列宽度、可通过CSS定制样式、支持隐藏列、易用、可扩展性和灵活性、国际化、动态创建表格。
使用方法：
1.首先构建我们需要的数据列表，以及页面显示表格
2.在jQuery DataTable官网下载一份js库
3.在页面中引入这两个文件，然后在两个文件要在最前面以至于能够被引用到
4.编写前端程序，需要使用到ajax对后台进行请求，所以在配置datatable的时候，要加上{“serverSide”:ture}，以保证页面在加载时就请求后台，以及每次对datatable进行操作时也是请求后台。
5.配置数据返回对应具体的列，在Datatable中，属性columns用来配置具体列的属性，包括对应的数据列名，是否支持搜索，是否显示，是否支持排序等。
列 columns 和 columnDefs基本使用
相同点：达到相同的效果
不同点：作用和使用不一样
1.columns：设置特定列的初始化属性，可以定义数组设置多列，数组长度必须等于表格的数量，只想使用默认值可以设为“NULL”，数组每个元素只能设置单列的属性。
2.columnDefs：与columns非常相似，该数组可以针对特定的列，多列或者所有列定义。数组可以任意长度。通过targets参数设置一个列或者多列
属性定义：
0或正整数 - 从左边的列索引计数
负整数 - 列索引从右边计数
一个字符串 - 类名称将被匹配上的TH为列
字符串“_all” - 所有的列（即指定一个默认值）
两个参数可以同时使用，但是columns定义的优先级最高。
当columnDefs里对同一列有多个定义时，最开始的定义优先级最高
注意：
DataTables的一些基础属性配置:
"bPaginate": true, //翻页功能
"bLengthChange": true, //改变每页显示数据数量
"bFilter": true, //过滤功能
"bSort": false, //排序功能
"bInfo": true,//页脚信息
"bAutoWidth": true//自动宽度
"sPaginationType": "full_numbers" //分页样式
1.数据排序："aaSorting": [ [ 4, "desc" ] ] };//表示从第0列开始，以第四列倒序排序
2.隐藏某列：
3.国际化：
扩展1
控制台属性和方法：
1.console.log 用于输出普通信息 2.console.info 用于输出提示性信息 3.console.error用于输出错误信息 4.console.warn用于输出警示信息 5.console.debug用于输出调试信息
注意：console对象的上面5种方法，都可以使用printf风格的占位符。不过，占位符的种类比较少，只支持字符（%s）、整数（%d或%i）、浮点数（%f）和对象（%o）四种
1.%o //此占位符用来查看对象内部情况
2.
案例：
console.log("%d年%d月%d日",2011,3,26);//表示输出日期
console.log("圆周率是%f",3.1415926);//输出数学表达式
控制台方法：
1.console.assert 对输入的表达式进行断言，只有表达式为false时，才输出相应的信息到控制台。
2.console.count 用于统计代码被执行的次数。<br/>
3.console.dir 直接将该DOM结点以DOM树的结构进行输出，可以详细查对象的方法发展等。<br/>
4.console.time 计时开始<br/>
5.console.timeEnd 计时结束
6.console.trace 堆栈跟踪相关的调试
扩展2
jquery setTimeout()函数使用方法
该方法表示从载入后延迟指定的时间去执行一个表达式或者是函数，仅仅执行一次。与
window.clean Timeout一起使用
window.location.reload()函数
JS中实现刷新页面的方法，浏览器重新从服务器中请求资源
11.JSONP/JSON
简介：JSONP是JSON的一种使用模式，可以让网页从其他网站获取资料，实现跨域读取数据。
同源策略：它是由Netscape提出的一个著名的安全策略，现在所有支持JavaScript 的浏览器都会使用这个策略。
JSON.parse() 将数据转换为JavaScript对象。
语法：JSON.parse(text[, reviver])
text：一个有效的JSON字符串 reviver：转换结果的函数，将为对象的每个成员调用此函数
1.JSON 数组
JSON数组在中括号中书写，数组可以包含多个对象。
{
"sites": [
{ "name":"菜鸟教程" , "url":"www.runoob.com" },
{ "name":"google" , "url":"www.google.com" },
{ "name":"微博" , "url":"www.weibo.com" }
]
}
2.JSON使用JavaScript语法
JSON使用JavaScript语法。通过JavaScript可以创建一个对象数组，并赋值。
var sites = [
{ "name":"runoob" , "url":"www.runoob.com" },
{ "name":"google" , "url":"www.google.com" },
{ "name":"微博" , "url":"www.weibo.com" }
];
注意：JSON文件的类型是”.json” JSON 文本的MIME类型是”application/json”
3.JSON 对象
1.循环对象：
使用for-in来循环对象的属性
<p id="demo"></p>
<script type="text/javascript">
var myobject = {"name":"username","alexa":1000,"site":null};
for(x in myobject){
document.getElementById("demo").innerHTML+=myobject[x]+"<br>";
}
</script>
4.JSON.parse()
因为JSON经常用于与服务器交换数据，在接收服务器数据时一般是字符串，所以我们可以使用JSON.parse()方法将数据转换为JavaScript对象。
5.JSON.stringify()
因为JSON用于与服务端交换数据，向服务器发送数据时一般是字符串。我们可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串。
12.jQuery EasyUI
jQuery EasyUI是一个基于jQuery的框架，集成了各种用户界面（UI）插件。jQuery EasyUI能够帮助Web开发者更轻松的打造出功能丰富并且美观的UI界面。
两种方法声明UI组件：
1.直接在HTML声明组件
<div class="easyui-dialog" style="width:400px;height:200px"data-options="title:'My Dialog',collapsible:true,iconCls:'icon-ok',onOpen:function(){}">
dialog content.
</div>
2.编写JavaScript来创建组件
<input id="cc" style="width:200px" /> //HTML标签
$('#cc').combobox({ //jQuery语法
url: ...,
required: true,
valueField: 'id',
textField: 'text'
});
EasyUI应用 创建CRUD应用
13.jQuery Validate验证详解
jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。
1.导入JS文件1
2
3<script src="jQuery.1.8.3.js" type="text/javascript"></script>
<script src="jquery.validate.js" type="text/javascript"></script>
<script src="messages_zh.js" type="text/javascript"></script>
2.默认校验规则
3.默认的提示
4.使用方法
1.通过属性方式添加验证规则
2.metadata用法(将校验规则写到控件中或者在 class 属性填写规则（效果一样）)
注意：使用class="{}"的方式需要引入包：jquery.metadata.js
3.将校验规则写到JS代码中
14.jQuery 树型菜单插件(Treeview)
jQuery Treeview提供了一个无序灵活的树形菜单
1.首先引入 CSS 与 JS 文件
<link rel="stylesheet" href="http://static.runoob.com/assets/js/jquery-treeview/jquery.treeview.css"/>
<link rel="stylesheet" href="http://static.runoob.com/assets/js/jquery-treeview/screen.css"/>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://static.runoob.com/assets/js/jquery-treeview/jquery.cookie.js"></script>
<script src="http://static.runoob.com/assets/js/jquery-treeview/jquery.treeview.js" type="text/javascript"></script>
2.然后编写 JS 程序
$("#browser").treeview({
toggle: function() {
console.log("%s was toggled.", $(this).find(">span").text());
}
});
3.最后编写 HTML 文件
//在类里面声明filetree treeview-famfamfam
<ul id="browser" class="filetree treeview-famfamfam">
<li><span class="folder">Folder 1</span>
<ul>
<li><span class="folder">Item 1.1</span>
<ul>
<li><span class="file">Item 1.1.1</span></li>
</ul>
</li>
<li><span class="folder">Folder 2</span>
<ul>
<li><span class="folder">Subfolder 2.1</span>
<ul id="folder21">
<li><span class="file">File 2.1.1</span></li>
<li><span class="file">File 2.1.2</span></li>
</ul>
</li>
<li><span class="folder">Subfolder 2.2</span>
<ul>
<li><span class="file">File 2.2.1</span></li>
<li><span class="file">File 2.2.2</span></li>
</ul>
</li>
</ul>
</li>
<li class="closed"><span class="folder">Folder 3 (closed at start)</span>
<ul>
<li><span class="file">File 3.1</span></li>
</ul>
</li>
<li><span class="file">File 4</span></li>
</ul>
</li>
</ul>
4.最后加上相关的按钮或者链接（整个HTML页面完成）
15.jQuery Tooltip
提示：jQuery Tooltip 取代了原生的工具提示框，让其可以自定义，我们只需要调整其内容、位置和外观便可。
使用步骤：
1.
16.jQuery Prettydate
jQuery Prettydate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。
1.使用方法
如果我们需要使用到此插件，需要我们在title标签中加上带有ISO8601日期
<a title="2008-01-28T20:24:17Z">January 28th, 2008</a>
<a title="2008-01-27T22:24:17Z">January 27th, 2008</a>
<a title="2008-01-26T22:24:17Z">January 26th, 2008</a>
然后对它们使用prettyDate()方法
$(function() { $("a").prettyDate(); });
17.Password Validation 插件
对于密码验证，这一插件提供了两种组件：
1.
2.
1.使用方式
如果我们需要使用到password validation插件，我们需要添加一个class="password"到input中，同时添加显示强度的基本标记在表单的需要显示的地方。
//首先设置验证器的默认情况，然后编写验证器的验证规则
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
$( "#myform" ).validate({
rules: {
password: "required",
password_again: {
equalTo: "#password"
}
}
});
