现有需求，若页面上有改动，则在做审核作时给出提示，让他先保存再点审核
实现方法：jquery.dirtyforms
1，页面引入：jquery,dirtyforms,jquery.facebox
2，初始使用 $('form').dirtyForms();
3，在做审核时判断if($.DirtyForms.isDirty()){ alert('页面有修改，请先点保存！');return false; }
4，在保存时清除：$('form').dirtyForms('setClean');
参考：jQuery设计思想
对于网页开发者来说，学会jQuery是必要的。因为它让你了解业界最通用的技术，为将来学习更高级的库打下基础，并且确实可以很轻松地做出许多复杂的效果。
虽然jQuery上手简单，比其他库容易学会，但是要全面掌握，却不轻松。因为它涉及到网页开发的方方面面，提供的各种方法和内部变化有上千种之多。初学者常常感到，入门很方便，提高很困难。
目前，互联网上最好的jQuery入门教材，是Rebecca Murphey写的《jQuery基础》（jQuery Fundamentals）。在Google里搜索"jQuery 培训"，此书排在第一位。jQuery官方团队已经同意，把此书作为官方教程的基础。
这本书虽然是入门教材，但也足足有100多页。我对它做了一个详细的笔记，试图理清jQuery的设计思想，找出学习的脉络。我的目标是全面掌握jQuery，遇到问题的时候，心里有底，基本知道使用它的哪一个功能，然后可以迅速从手册中找到具体的写法。
下面就是我的笔记，它应该是目前网上不多的jQuery中文教程之一。你只需要一点javascript语言的基本知识，就能看懂它，在最短的时间里，掌握jQuery的所有主要方面（除了ajax和插件开发）。
===========================================
jQuery设计思想
原文网址：http://jqfundamentals.com/book/
【目录】
一、选择网页元素
二、改变结果集
三、链式操作
四、元素的操作：取值和赋值
五、元素的操作：移动
六、元素的操作：复制、删除和创建
七、工具方法
八、事件操作
九、特殊效果
【正文】
一、选择网页元素
jQuery的基本设计思想和主要用法，就是"选择某个网页元素，然后对其进行某种操作"。这是它区别于其他Javascript库的根本特点。
使用jQuery的第一步，往往就是将一个选择表达式，放进构造函数jQuery()（简写为$），然后得到被选中的元素。
选择表达式可以是CSS选择器：
$(document) //选择整个文档对象
$('#myId') //选择ID为myId的网页元素
$('div.myClass') // 选择class为myClass的div元素
$('input[name=first]') // 选择name属性等于first的input元素
也可以是jQuery特有的表达式：
$('a:first') //选择网页中第一个a元素
$('tr:odd') //选择表格的奇数行
$('#myForm :input') // 选择表单中的input元素
$('div:visible') //选择可见的div元素
$('div:gt(2)') // 选择所有的div元素，除了前三个
$('div:animated') // 选择当前处于动画状态的div元素
二、改变结果集
jQuery设计思想之二，就是提供各种强大的过滤器，对结果集进行筛选，缩小选择结果。
$('div').has('p'); // 选择包含p元素的div元素
$('div').not('.myClass'); //选择class不等于myClass的div元素
$('div').filter('.myClass'); //选择class等于myClass的div元素
$('div').first(); //选择第1个div元素
$('div').eq(5); //选择第6个div元素
有时候，我们需要从结果集出发，移动到附近的相关元素，jQuery也提供了在DOM树上的移动方法：
$('div').next('p'); //选择div元素后面的第一个p元素
$('div').parent(); //选择div元素的父元素
$('div').closest('form'); //选择离div最近的那个form父元素
$('div').children(); //选择div的所有子元素
$('div').siblings(); //选择div的同级元素
三、链式操作
jQuery设计思想之三，就是最终选中网页元素以后，可以对它进行一系列操作，并且所有操作可以连接在一起，以链条的形式写出来，比如：
$('div').find('h3').eq(2).html('Hello');
分解开来，就是下面这样：
$('div') //找到div元素
.find('h3') //选择其中的h3元素
.eq(2) //选择第3个h3元素
.html('Hello'); //将它的内容改为Hello
这是jQuery最令人称道、最方便的特点。它的原理在于每一步的jQuery操作，返回的都是一个jQuery对象，所以不同操作可以连在一起。
jQuery还提供了.end()方法，使得结果集可以后退一步：
$('div')
.find('h3')
.eq(2)
.html('Hello')
.end() //退回到选中所有的h3元素的那一步
.eq(0) //选中第一个h3元素
.html('World'); //将它的内容改为World
四、元素的操作：取值和赋值
操作网页元素，最常见的需求是取得它们的值，或者对它们进行赋值。
jQuery设计思想之四，就是使用同一个函数，来完成取值（getter）和赋值（setter），即"取值器"与"赋值器"合一。到底是取值还是赋值，由函数的参数决定。
$('h1').html(); //html()没有参数，表示取出h1的值
$('h1').html('Hello'); //html()有参数Hello，表示对h1进行赋值
常见的取值和赋值函数如下：
.html() 取出或设置html内容
.text() 取出或设置text内容
.attr() 取出或设置某个属性的值
.width() 取出或设置某个元素的宽度
.height() 取出或设置某个元素的高度
.val() 取出某个表单元素的值
需要注意的是，如果结果集包含多个元素，那么赋值的时候，将对其中所有的元素赋值；取值的时候，则是只取出第一个元素的值（.text()例外，它取出所有元素的text内容）。
五、元素的操作：移动
jQuery设计思想之五，就是提供两组方法，来操作元素在网页中的位置移动。一组方法是直接移动该元素，另一组方法是移动其他元素，使得目标元素达到我们想要的位置。
假定我们选中了一个div元素，需要把它移动到p元素后面。
第一种方法是使用.insertAfter()，把div元素移动p元素后面：
$('div').insertAfter($('p'));
第二种方法是使用.after()，把p元素加到div元素前面：
$('p').after($('div'));
表面上看，这两种方法的效果是一样的，唯一的不同似乎只是操作视角的不同。但是实际上，它们有一个重大差别，那就是返回的元素不一样。第一种方法返回div元素，第二种方法返回p元素。你可以根据需要，选择到底使用哪一种方法。
使用这种模式的操作方法，一共有四对：
.insertAfter()和.after()：在现存元素的外部，从后面插入元素
.insertBefore()和.before()：在现存元素的外部，从前面插入元素
.appendTo()和.append()：在现存元素的内部，从后面插入元素
.prependTo()和.prepend()：在现存元素的内部，从前面插入元素
六、元素的操作：复制、删除和创建
除了元素的位置移动之外，jQuery还提供其他几种操作元素的重要方法。
复制元素使用.clone()。
删除元素使用.remove()和.detach()。两者的区别在于，前者不保留被删除元素的事件，后者保留，有利于重新插入文档时使用。
清空元素内容（但是不删除该元素）使用.empty()。
创建新元素的方法非常简单，只要把新元素直接传入jQuery的构造函数就行了：
$('<p>Hello</p>');
$('<li class="new">new list item</li>');
$('ul').append('<li>list item</li>');
七、工具方法
jQuery设计思想之六：除了对选中的元素进行操作以外，还提供一些与元素无关的工具方法（utility）。不必选中元素，就可以直接使用这些方法。
如果你懂得Javascript语言的继承原理，那么就能理解工具方法的实质。它是定义在jQuery构造函数上的方法，即jQuery.method()，所以可以直接使用。而那些操作元素的方法，是定义在构造函数的prototype对象上的方法，即jQuery.prototype.method()，所以必须生成实例（即选中元素）后使用。如果不理解这种区别，问题也不大，只要把工具方法理解成，是像javascript原生函数那样，可以直接使用的方法就行了。
常用的工具方法有以下几种：
$.trim() 去除字符串两端的空格。
$.each() 遍历一个数组或对象。
$.inArray() 返回一个值在数组中的索引位置。如果该值不在数组中，则返回-1。
$.grep() 返回数组中符合某种标准的元素。
$.extend() 将多个对象，合并到第一个对象。
$.makeArray() 将对象转化为数组。
$.type() 判断对象的类别（函数对象、日期对象、数组对象、正则对象等等）。
$.isArray() 判断某个参数是否为数组。
$.isEmptyObject() 判断某个对象是否为空（不含有任何属性）。
$.isFunction() 判断某个参数是否为函数。
$.isPlainObject() 判断某个参数是否为用"{}"或"new Object"建立的对象。
$.support() 判断浏览器是否支持某个特性。
八、事件操作
jQuery设计思想之七，就是把事件直接绑定在网页元素之上。
$('p').click(function(){
alert('Hello');
});
目前，jQuery主要支持以下事件：
.blur() 表单元素失去焦点。
.change() 表单元素的值发生变化
.click() 鼠标单击
.dblclick() 鼠标双击
.focus() 表单元素获得焦点
.focusin() 子元素获得焦点
.focusout() 子元素失去焦点
.hover() 同时为mouseenter和mouseleave事件指定处理函数
.keydown() 按下键盘（长时间按键，只返回一个事件）
.keypress() 按下键盘（长时间按键，将返回多个事件）
.keyup() 松开键盘
.load() 元素加载完毕
.mousedown() 按下鼠标
.mouseenter() 鼠标进入（进入子元素不触发）
.mouseleave() 鼠标离开（离开子元素不触发）
.mousemove() 鼠标在元素内部移动
.mouseout() 鼠标离开（离开子元素也触发）
.mouseover() 鼠标进入（进入子元素也触发）
.mouseup() 松开鼠标
.ready() DOM加载完成
.resize() 浏览器窗口的大小发生改变
.scroll() 滚动条的位置发生变化
.select() 用户选中文本框中的内容
.submit() 用户递交表单
.toggle() 根据鼠标点击的次数，依次运行多个函数
.unload() 用户离开页面
以上这些事件在jQuery内部，都是.bind()的便捷方式。使用.bind()可以更灵活地控制事件，比如为多个事件绑定同一个函数：
$('input').bind(
'click change', //同时绑定click和change事件
function() {
alert('Hello');
}
);
有时，你只想让事件运行一次，这时可以使用.one()方法。
$("p").one("click", function() {
alert("Hello"); //只运行一次，以后的点击不会运行
});
.unbind()用来解除事件绑定。
$('p').unbind('click');
所有的事件处理函数，都可以接受一个事件对象（event object）作为参数，比如下面例子中的e：
$("p").click(function(e) {
alert(e.type); // "click"
});
这个事件对象有一些很有用的属性和方法：
event.pageX 事件发生时，鼠标距离网页左上角的水平距离
event.pageY 事件发生时，鼠标距离网页左上角的垂直距离
event.type 事件的类型（比如click）
event.which 按下了哪一个键
event.data 在事件对象上绑定数据，然后传入事件处理函数
event.target 事件针对的网页元素
event.preventDefault() 阻止事件的默认行为（比如点击链接，会自动打开新页面）
event.stopPropagation() 停止事件向上层元素冒泡
在事件处理函数中，可以用this关键字，返回事件针对的DOM元素：
$('a').click(function(e) {
if ($(this).attr('href').match('evil')) { //如果确认为有害链接e.preventDefault(); //阻止打开
$(this).addClass('evil'); //加上表示有害的class
}
});
有两种方法，可以自动触发一个事件。一种是直接使用事件函数，另一种是使用.trigger()或.triggerHandler()。
$('a').click();
$('a').trigger('click');
九、特殊效果
最后，jQuery允许对象呈现某些特殊效果。
$('h1').show(); //展现一个h1标题
常用的特殊效果如下：
.fadeIn() 淡入
.fadeOut() 淡出
.fadeTo() 调整透明度
.hide() 隐藏元素
.show() 显示元素
.slideDown() 向下展开
.slideUp() 向上卷起
.slideToggle() 依次展开或卷起某个元素
.toggle() 依次展示或隐藏某个元素
除了.show()和.hide()，所有其他特效的默认执行时间都是400ms（毫秒），但是你可以改变这个设置。
$('h1').fadeIn(300); // 300毫秒内淡入
$('h1').fadeOut('slow'); // 缓慢地淡出
在特效结束后，可以指定执行某个函数。
$('p').fadeOut(300, function() { $(this).remove(); });
更复杂的特效，可以用.animate()自定义。
$('div').animate(
{
left : "+=50", //不断右移
opacity : 0.25 //指定透明度
},
300, // 持续时间
function() { alert('done!'); } //回调函数
);
$.fx.off如果设置为true，则关闭所有网页特效。
0，页面引用jquery及插件jquery-1.2.6.pack.js，jquery.dimensions.pack.js 详细效果见BRM系统--发展部跟进
1，为承载数据的div增加onscroll事件：
2，在AddMoreData()方法中判断滚动条是否到达底部，若是，则异步传输数据
function AddMoreData(){
var myDiv = $("#dvBody")[0];
// alert( $("#dvBody")[0]);
if ( myDiv.scrollTop + myDiv.style.pixelHeight > myDiv.scrollHeight ){
lastPostFunc(); //异步加载数据
}
}
var hasReturn = true; //指示当目前异步请求返回之后才可以进行下一次的异步传输，不然可能会出现数据不一致的情况
3, function lastPostFunc()
{
if ( ! hasReturn ) return;
hasReturn = false; //开始本次传输
//传输查询条件
var queryStr = document.location.search;
//因要获取上次滚动所达元素，以便在数据中取出此记录以下的数据，故须要在页面中用一hidden元素存起每次的最后的记录ID，并传给查询数据内
var url = "data.aspx" + queryStr + "&lastID=" + $("#LastID").val() + "&sn="+$(".sn:last").attr("id");
url = url + "&txtCustomerName=" + $("#txtCustomerName").val();
url = url + "&txtTel=" + $("#txtTel").val();
url = url + "&ddlCustomerTypeSelectedValue=" + $("#ddlCustomerType").val();
url = url + "&ddlCommunicateStatusSelectedValue=" + $("#ddlCommunicateStatus").val();
url = url + "&txtOrderDate_begin=" + $("#txtOrderDate_begin").val();
url = url + "&txtOrderDate_end=" + $("#txtOrderDate_end").val();
//alert(url);
$('div#lastPostsLoader').html('
'); //用id为lastPostsLoader的div加载等待图片
$.post(url,
function(data){
//alert($(".wrdLatest:last").attr("id"));
if (data != "") {
$(".wrdLatest1:last").after(data); //回调函数，将查询到的新数量加到：class为wrdLatest1的集合的最后一个元素之后，故在得到的数据中要生//成classclass为wrdLatest1的元素，以定位最后一个。
}
$('div#lastPostsLoader').empty();
hasReturn = true; //本次传输完毕，可以进行下一次异步传输
});
};
1,$:$(“a”) 是一个jQuery选择器(selector),在这里，它选择所有的a标签，得到一个对象集合，$号是 jQuery “类”(jQuery “class”)的一个别称，因此$()构造了一个新的jQuery 对象(jQuery object)。相当于document.getElementsByTagName(“a”)，这是一个函数！，$号是 jQuery “类”(jQuery “class”)的一个别称，因此$()构造了一个新的jQuery 对象(jQuery object)。函数 click() 是这个jQuery对象的一个方法，它绑定了一个单击事件到所有选中的标签(这里是所有的a标签),并在事件触发时执行了它所提供的alert方法.
（1）：$(“div > p”) ：找div下的p元素，如
one
two
three
会返回
two
$(“div > p”)[0]:第一个, $(“p”):直接找到段落P，即无符号.#时直接找页面的类型，又如$(“div”)
（2）：$(document.body).background( “black” ); 即()可除了字符串之外，还可以是dom对象
（3）：选择ID $(“#orderedlist”) 前面加个#号即可，（如CSS），相当于getElementById(“”)，$(“#orderedlist li”) 打到orderdilist下的li元素
（4） : $(“.wrdLatest:last”)；$得到一个集合，得到class为.wrdLatest的所有集合，last指示得到取出最后一个元素
(5):*用法 定义：匹配所有元素 多用于结合上下文来搜索。
实例：查看页所有元素的数量 代码：$(“*”).length; //点击按钮四将执行这句代码
(6)定义：将每一个选择器匹配到的元素合并后一起返回。你可以指定任意多个选择器，并将匹配到的元素合并到一个结果内。
：$(“.red_test,#btn_5”)
2, 执行方法：通过$得到元素，在方法中直接写function: $(“#orderedlist”).click( function(){$(“#orderedlist”).addClass(“red”);} )
每一个onXXX事件都有效，如onclick,onchange,onsubmit等，都有jQuery等价表示方法（onXXX，所以都改成了XXX，去掉了on）
3,为得到的元素增加CSS操作：
（1） CSS属性： $(this).css({‘background-color’ : ‘yellow’, ‘font-weight’ : ‘bolder’}); 得到某一属性：var color = $(this).css(“background-color”);
或：$(this).css(“color”,”blue”);
（2 ) addClass: $(this).addClass(“green”); removeClass
（3）：height( )：得到宽度，height(100);设置宽度 类似还有：width( )， html()（得到元素内部html）
（4）：$(“#checkbox_id”).attr(“checked”); //获取一个CheckBox的状态(有没有被选中,返回true/false)
$(“#checkbox_id”).attr(“checked”,true); //设置一个CheckBox的状态为选中(checked=true)
$(“.wrdLatest1:last”).attr(“id”)
$(“input[name=’checkbox_name’][checked]”); //选择被选中CheckBox元素的集合
4,遍历元素：each:$(“#orderedlist”).find(“li”).each(function(i) { $(this).html( $(this).html() + ” BAM! ” + i ); //$(“#orderedlist”).find(“li”)是一个集合，遍历之
each之前是一个集合。
5，查找元素：find,filter(),not() : $(“li”).not(“:has(ul)”).css(“border”, “1px solid black”);
选择上一个或者下一个元素:$(this).next(),parents(“p”)
6,jQuery常用技巧
1、关于页面元素的引用
通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jquery对象（集合对象），不能直接调用dom定义的方法。
2、jQuery对象与dom对象的转换
只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的，调用方法时要注意操作的是dom对象还是jquery对象。
普通的dom对象一般可以通过$()转换成jquery对象。
如：$(document.getElementById(”msg”))则为jquery对象，可以使用jquery的方法。
由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项，一般可通过索引取出。
如：$(”#msg”)[0]，$(”div”).eq(1)[0]，$(”div”).get()[1]，$(”td”)[5]这些都是dom对象，可以使用dom中的方法，但不能再使用Jquery的方法。
以下几种写法都是正确的：
$(”#msg”).html();$(”#msg”)[0].innerHTML;$(”#msg”).eq(0)[0].innerHTML;$(”#msg”).get(0).innerHTML;
3、如何获取jQuery集合的某一项
对于获取的元素集合，获取其中的某一项（通过索引指定）可以使用eq或get(n)方法或者索引号获取，要注意，eq返回的是jquery对象，而 get(n)和索引返回的是dom元素对象。对于jquery对象只能使用jquery的方法，而dom对象只能使用dom的方法，如要获取第三个
$(”div”).eq(2).html(); //调用jquery对象的方法$(”div”).get(2).innerHTML; //调用dom的方法属性
4、同一函数实现set和get
jQuery中的很多方法都是如此，主要包括如下几个：
$(”#msg”).html(); //返回id为msg的元素节点的html内容。$(”#msg”).html(”new content”);//将“new content” 作为html串写入id为msg的元素节点内容中,页面显示粗体的new content$(”#msg”).text(); //返回id为msg的元素节点的文本内容。$(”#msg”).text(”new content”);//将“new content” 作为普通文本串写入id为msg的元素节点内容中,页面显示new content$(”#msg”).height(); //返回id为msg的元素的高度$(”#msg”).height(”300″); //将id为msg的元素的高度设为300$(”#msg”).width(); //返回id为msg的元素的宽度$(”#msg”).width(”300″); //将id为msg的元素的宽度设为300$(”input”).val(”); //返回表单输入框的value值$(”input”).val(”test”); //将表单输入框的value值设为test$(”#msg”).click(); //触发id为msg的元素的单击事件$(”#msg”).click(fn); //为id为msg的元素单击事件添加函数
同样blur,focus,select,submit事件都可以有着两种调用方法。
5、集合处理功能对于jquery返回的集合内容无需我们自己循环遍历并对每个对象分别做处理，jquery已经为我们提供的很方便的方法进行集合的处理。
包括两种形式：
$(”p”).each(function(i){this.style.color=[‘#f00′,’#0f0′,’#00f’][ i ]})//为索引分别为0，1，2的p元素分别设定不同的字体颜色。$(”tr”).each(function(i) {this.style.backgroundColor=[‘#ccc’,’#fff’][i%2]})//实现表格的隔行换色效 果$(”p”).click(function(){alert($(this).html())})//为每个p元素增加了click事件，单击某个p 元素则弹出其内容
6、扩展我们需要的功能
$.extend({min: function(a, b){return a < b?a:b; },max: function(a, b){return a > b?a:b; }}); //为jquery扩展了min,max两个方法
使用扩展的方法（通过“$.方法名”调用）：
alert(”a=10,b=20,max=”+$.max(10,20)+”,min=”+$.min(10,20));
7、支持方法的连写
所谓连写，即可以对一个jquery对象连续调用各种不同的方法。例如：
$(”p”).click(function(){alert($(this).html())}).mouseover(function(){alert(’mouse over event’)}).each(function(i){this.style.color=[‘#f00′,’#0f0′,’#00f’][ i ]});
8、操作元素的样式
主要包括以下几种方式：
$(”#msg”).css(”background”); //返回元素的背景颜色$(”#msg”).css(”background”,”#ccc”) //设定元素背景为灰色$(”#msg”).height(300); $(”#msg”).width(”200″); //设定宽高$(”#msg”).css({ color: “red”, background: “blue” });//以名值对的形式设定样式$(”#msg”).addClass(”select”); //为元素增加名称为select的class$(”#msg”).removeClass(”select”); //删除元素名称为select的class$(”#msg”).toggleClass(”select”); //如果存在（不存在）就删除（添加）名称为select的class
9、完善的事件处理功能
jQuery已经为我们提供了各种事件处理方法，我们无需在html元素上直接写事件，而可以直接为通过jquery获取的对象添加事件。$(”#msg”).click(function(){alert(”good”)}) //为元素添加了单击事件$(”p”).click(function(i){this.style.color= [‘#f00′,’#0f0′,’#00f’][ i ]})//为三个不同的p元素单击事件分别设定不同的处理
jQuery中几个自定义的事件：
(1)hover(fn1,fn2)：一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。
//当鼠标放在表格的某行上时将class置为over，离开时置为out。$(”tr”).hover(function(){$(this).addClass(”over”);},function(){$(this).addClass(”out”);});
（2）ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
$(document).ready(function(){alert(”Load Success”)})//页面加载完毕提示“Load Success”,相当于onload事件。与$(fn)等价
（3）toggle(evenFn,oddFn): 每次点击时切换要调用的函数。如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数。随后的每次点击都重复对这两个函数的轮番调用。
// 每次点击时轮换添加和删除名为selected的class。$(”p”).toggle(function() {$(this).addClass(”selected”);},function(){$(this).removeClass(”selected”);});
（4）trigger(eventtype): 在每一个匹配的元素上触发某类事件。
例如：
$(”p”).trigger(”click”); //触发所有p元素的click事件
（5）bind(eventtype,fn)，unbind(eventtype): 事件的绑定与反绑定
从每一个匹配的元素中（添加）删除绑定的事件。例如：
$(”p”).bind(”click”, function(){alert($(this).text());}); //为每个p元素添加单击事件$(”p”).unbind(); //删除所有p元素上的所有事件$(”p”).unbind(”click”) //删除所有p元素上的单击事件
10、几个实用特效功能
其中toggle()和slidetoggle()方法提供了状态切换功能。
如toggle()方法包括了hide()和show()方法。
slideToggle()方法包括了slideDown()和slideUp方法。
11、几个有用的jQuery方法
$.browser.浏览器类型：检测浏览器类型。有效参数：safari, opera, msie, mozilla。如检测是否ie：$.browser.isie，是ie浏览器则返回true。
$.each(obj, fn)：通用的迭代函数。可用于近似地迭代对象和数组（代替循环）。如
$.each( [0,1,2], function(i, n){ alert( “Item #” + i + “: ” + n ); });
等价于：
var tempArr=[0,1,2];for(var i=0;i
也可以处理json数据，如
$.each( { name: “John”, lang: “JS” }, function(i, n){ alert( “Name: ” + i + “, Value: ” + n ); });
结果为：
Name:name, Value:JohnName:lang, Value:JS
$.extend(target,prop1,propN)：用一个或多个其他对象来扩展一个对象，返回这个被扩展的对象。这是jquery实现的继承方式。
如：
代码
$.extend(settings, options);//合并settings和options，并将合并结果返回settings中，相当于options继承setting并将继承结 果保存在setting中。var settings = $.extend({}, defaults, options);//合并defaults和options，并将合并结果返回到setting中而不覆盖default内容。
可以有多个参数（合并多项并返回）
$.map(array, fn)：数组映射。把一个数组中的项目(处理转换后)保存到到另一个新数组中，并返回生成的新数组。
如：
var tempArr=$.map( [0,1,2], function(i){ return i + 4; });tempArr内容为：[4,5,6]var tempArr=$.map( [0,1,2], function(i){ return i > 0 ? i + 1 : null; });tempArr内容为：[2,3]$.merge(arr1,arr2):合并两个数组并删除其中重复的项目。如：$.merge( [0,1,2], [2,3,4] ) //返回[0,1,2,3,4]$.trim(str)：删除字符串两端的空白字符。如：$.trim(” hello, how are you? “); //返回”hello,how are you? ”
12、解决自定义方法或其他类库与jQuery的冲突
很多时候我们自己定义了$(id)方法来获取一个元素，或者其他的一些js类库如prototype也都定义了$方法，如果同时把这些内容放在一起就会引起变量方法定义冲突，Jquery对此专门提供了方法用于解决此问题。
使用jquery中的jQuery.noConflict();方法即可把变量$的控制权让渡给第一个实现它的那个库或之前自定义的$方法。之后应用 Jquery的时候只要将所有的$换成jQuery即可，如原来引用对象方法$(”#msg”)改为jQuery(”#msg”)。
如：jQuery.noConflict();// 开始使用jQueryjQuery(”div p“).hide();// 使用其他库的 $()$(”content”).style.display = ‘none’;
函数$.ajax的解析
函数：$.ajax(properties)
功能：用一个http请求访问一个远程页面
返回：XMLHttpRequest
参数：
(String)? url 请求地址；
(String)? type?? 请求类型(”GET”,”POST”)；
(String)? dataType：从服务器端返回的数据类型(”xml”,”html”,”script”,”json”)；
(Boolean)? ifModified：根据Last-Modified header判断返回内容是否改变；
(Number)? timeout：请求超时；
(Boolean)? global：对此次请求是否引起全局的ajax事件出来，默认true；
(Function)? error：错误处理函数；
(Function)? complete：请求完成后的处理函数；
(Object|String)? data：发送到服务器端的数据；
(String) contentType ：默认”application/x-www-form-urlencoded”；
(Boolean)? processData ：传输到服务器端的数据默认被转换到query string中以适合默认”application/x-www-form-urlencoded”方式，如果你想以DOMDocuments方式传输数据，就将该选项设为false；
(Boolean)? aysnc:是否异步传输，默认为true；
(Function)? beforeSend:请求前响应函数；
例子：（加载并且执行一个js文件）
jQuery Code
$.ajax({
type: “GET”,
url: “test.js”,
dataType: “script”
})
向服务器保存数据并且响应用户的动作完成
jQuery Code
$.ajax({
type: “POST”,
url: “some.php”,
data: “name=John&location=Boston”,
success: function(msg){
alert( “Data Saved: ” + msg );
}
});
jQuery Code
var html = $.ajax({
url: “some.php”,
async: false
}).responseText;
jQuery Code
var xmlDocument = [create xml document];
$.ajax({
url: “page.php”,
processData: false,
data: xmlDocument,
success: handleResponse
});
函数$.ajaxSetup的解析
函数：$.ajaxSetup(settings),$.ajaxTimeout(time)
功能：设定请求的一些参数
返回： undefined
例子：
$.ajaxSetup( {
url: “/xmlhttp/”,
global: false,
type: “POST”
} );
$.ajaxTimeout( 5000 );
函数$.get的解析
函数：$.get(url, params, callback),$.getIfModified(url, params, callback),
$.getJSON(url, params, callback),$.getScript(url, callback)
功能：get方式提交数据
例子：
$.get(”test.cgi”,
{ name: “John”, time: “2pm” },
function(data){
alert(”Data Loaded: ” + data);
});
函数$.post
函数：$.post(url, params, callback)
功能：post方式提交数据
例子：
$.post(”test.cgi”,
{ name: “John”, time: “2pm” },
function(data){
alert(”Data Loaded: ” + data);
});
函数ajaxComplete的解析
函数：ajaxComplete(callback),ajaxComplete(callback),ajaxSend(callback)
ajaxStart(callback),ajaxStop(callback),ajaxSuccess(callback)
功能：XMLHttpRequest状态改变过程中各个响应处理函数
例子：
$(”#msg”).ajaxComplete(function(request, settings){
$(this).append(”<li>Request Complete.</li>”);
});
$(”#msg”).ajaxSuccess(function(request, settings){
$(this).append(”<li>Successful Request!</li>”);
});
$(”#loading”).ajaxStop(function(){
$(this).hide();
});
$(”#msg”).ajaxSend(function(request, settings){
$(this).append(”<li>Starting request at ” + settings.url + “</li>”);
});
函数load的解析
函数：load(url, params, callback),loadIfModified(url, params, callback)
功能：加载html内容
返回：jQuery对象
参数：同get和post方式提交
例子：
代码
//jQuery Code
$(”#feeds”).load(”feeds.html”);
Before
<div id=”feeds”></div>
Result:
<div id=”feeds”><b>45</b> feeds found.</div>
//jQuery Code
$(”#feeds”).load(”feeds.html”,
{limit: 25},
function() { alert(”The last 25 entries in the feed have been loaded”); }
函数serialize的解析
函数：serialize()
功能：将表单元素和值序列化成string
返回：String
例子：
jQuery Code
$(”input[@type=text]“).serialize();
Before
<input type=’text’ name=’name’ value=’John’/>
<input type=’text’ name=’location’ value=’Boston’/
Result
name=John&location=Boston
jQuery-Selectors(选择器)的使用(一、基本篇)
本系列文章主要讲述jQuery框架的选择器(Selectors)使用方法，我将以实例方式进行讲述，以简单，全面为基础，不会涉及很深，我的学习方法：先入门，后进阶！
本系列文章分为：基本篇、层次篇、简单篇、内容篇、可见性篇、属性篇、子元素篇、表单篇、表单对象属性篇共9篇文章。
您对本系列文章有任何建议或意见请发送到邮箱：sjzlgt@qq.com
由于是第一次写技术性系列文章，难免会出错或代码BUG，欢迎指出，在此谢过！
您可以到jQuery官网来学习更多的有关jQuery知识。
1. #id用法
定义：根据给定的ID匹配一个元素。
返回值：Element
参数：id (String) : 用于搜索的，通过元素的 id 属性中给定的值
实例：将ID为”div_red”的DIV的边框改为红色
代码：$(“#div_red”).css(“border”,”red 2px solid”); //点击按钮一将执行这句代码
DIV ID=”div_red”
扩展：#id中的id可以是页面任何元素的id,如input,btuuon,div,table,span等等
2. element用法
定义：根据给定的元素名匹配所有元素。
返回值：Array<Element>
参数：element (String) : 一个用于搜索的元素。指向 DOM 节点的标签名。
实例：将页面<P>标记内的文字颜色改为红色
代码：$(“p”).css(“color”,”red”); //点击按钮二将执行这句代码
P标记1 ID=”p1″
P标记2 无ID
扩展：参数值可以是页面任何元素，如div,button,div,table,tr,td,p,h1,span,input
3. .class用法
定义：根据给定的类（样式名称）匹配元素。
返回值：Array<Element>
参数：class (String) 一个用以搜索的类（样式名称）。一个元素可以有多个类（样式名称），只要有一个符合就能被匹配到。
实例：将页面所有引用了”.red_test”样式的元素背景颜色改为蓝色
代码：$(“.red_test”).css(“background-color”,”blue”); //点击按钮三将执行这句代码
DIV ID=”div_red_1″ calss=”red_test”
DIV ID=”div_red_2″ 无class
SPAN ID=”span_red_1″ calss=”red_test”
扩展：可以看一下jQuery官网上Selectors/.class的实例。
4. *用法
定义：匹配所有元素 多用于结合上下文来搜索。
返回值：Array<Element>
实例：查看页所有元素的数量
代码：$(“*”).length; //点击按钮四将执行这句代码
扩展：可以看一下jQuery官网上Selectors/*的实例。
5. selector1,selector2,selectorN用法
定义：将每一个选择器匹配到的元素合并后一起返回。你可以指定任意多个选择器，并将匹配到的元素合并到一个结果内。
返回值：Array<Element>
参数：selector1 (Selector) : 一个有效的选择器 selector2 (Selector) : 另一个有效的选择器 selectorN (Selector) : (可选) 任意多个有效选择器
实例：将页面上所有引用名称为”li_test”样式的<Li>元素和ID为”li_red”的<Li>元素的边框改为绿色，宽度为5px
代码：$(“.red_test,#btn_5”).css(“border”,”5px solid Green”); //点击按钮五将执行这句代码
* Li
* Li id=”li_red”
* Li
* Li
* Li
* Li
jQuery选择器的使用灵活度非常高，至此，您可以利用本文中的四种选择器和上一篇中所讲的选择器组合并看效果，相信你会看到足以令你震撼的结果！
1. ancestor descendant用法
定?? 义：在给定的祖先元素下匹配所有的符合条件后代元素
返回值：Array
参?? 数：ancestor (Selector):任何有效选择器 descendant (Selector):用以匹配元素的选择器，并且它是第一个选择器的后代元素
实?? 例：将ID为”div_1″的DIV中所有的Input元素的背景色改为红色
代码： $(“div_1 input”).css(“background-color”,”red”); //点击按钮一将执行这句代码
DIV ID=”div_1″
DIV ID=”div_2″
DIV ID=”div_3″
DIV ID=”div_4″
DIV ID=”div_5″
DIV ID=”div_5_1″
注意：本实例请与第2个用法的实例作对比，看其控制范围！
2. parent > child用法
定?? 义：在给定的父元素下匹配所有的子元素
返回值：Array
参?? 数：parent (Selector):任何有效选择器 child (Selector): 用以匹配元素的选择器，并且它是第一个选择器的子元素
实?? 例：将ID为”div_a1″的DIV中所有的Input元素的背景色改为红色
代码： $(“#div_a1 > input”).css(“background-color”,”red”); //点击按钮二将执行这句代码
DIV ID=”div_a1″
DIV ID=”div_a2″
DIV ID=”div_a3″
DIV ID=”div_a4″
DIV ID=”div_a5″
DIV ID=”div_a5_1″
3. prev + next用法
定?? 义：匹配所有紧接在 prev 元素后的 next 元素
返回值：Array
参?? 数：prev (Selector):任何有效选择器 next (Selector):一个有效选择器并且紧接着第一个选择器
实?? 例：将ID为”div_b1″的DIV中所有span元素后紧跟的input元素的背景色改为红色
代码：$(“#div_b1 span + input”).css(“background-color”,”red”); //点击按钮三将执行这句代码
DIV ID=”div_b1″
span
DIV ID=”div_b2″
span
DIV ID=”div_b3″
span
DIV ID=”div_b4″
span
DIV ID=”div_b5″
DIV ID=”div_b5_1″ span
注意：第一个选择器我用了ancestor descendant用法，您也可以尝试其它用法。本例请与下面第4点的实例作对比并看效果！
4. prev ~ siblings用法
定?? 义：匹配 prev 元素之后的所有 siblings 元素
返回值：Array
参?? 数：prev (Selector):任何有效选择器 siblings (Selector):一个选择器，并且它作为第一个选择器的同辈
实?? 例：将ID为”div_c1″的DIV中所有与span元素之后平级的input元素的背景色改为红色
代码：$(“#div_c1 span ~ input”).css(“background-color”,”red”); //点击按钮四将执行这句代码
DIV ID=”div_c1″
span
DIV ID=”div_c2″
span
DIV ID=”div_c3″
span
DIV ID=”div_c4″
span
DIV ID=”div_c5″
DIV ID=”div_c5_1″ span
注意：DIV ID=”div_c1″ 和 ID=”div_c4″中的span元素前的input并未改变背景色，因为第二个选择器查找第一个选择器之后的元素
1. :first用法
定?? 义：匹配找到的第一个元素
返回值：Element
实?? 例：将ID为”ul_1″的ul中的第一个Li元素的背景色改为红色
代?? 码： $(“#ul_1 li:first”).css(“background-color”,”red”); //点击按钮一将执行这句代码
ul ID=”ul_1″
* Li 1
* Li 2
* Li 3
* Li 4
* Li 5
* Li 6
* Li 7
* Li 8
2. :last用法
定?? 义：匹配找到的最后一个元素
返回值：Element
实?? 例：将ID为”ul_2″的ul中的最后一个Li元素的背景色改为红色
代?? 码： $(“#ul_2 li:last”).css(“background-color”,”red”); //点击按钮二将执行这句代码
ul ID=”ul_2″
* Li 1
* Li 2
* Li 3
* Li 4
* Li 5
* Li 6
* Li 7
* Li 8
3. :not(selector)用法
定?? 义：去除所有与给定选择器匹配的元素
返回值：Array
参?? 数：selector (Selector) : 用于筛选的选择器
实?? 例：将ID为”ul_3″的ul中除最后一个Li元素以外的其他Li元素的背景色改为红色
代?? 码： $(“#ul_3 li:not(li:last)”).css(“background-color”,”red”); //点击按钮三将执行这句代码
ul ID=”ul_3″
* Li 1
* Li 2
* Li 3
* Li 4
* Li 5
* Li 6
* Li 7
* Li 8
扩展：你可以试试执行 $(“li:not(li:last)”).css(“background-color”,”red”); 这句代码，看看有什么效果
4. :even用法
定?? 义：匹配所有索引值为偶数的元素，从 0 开始计数
返回值：Array
实?? 例：将ID为”ul_4″的ul中索引为偶数的Li元素的背景色改为红色(注：索引从0开始)
代?? 码： $(“#ul_4 li:even”).css(“background-color”,”red”); //点击按钮四将执行这句代码
ul ID=”ul_4″
* Li 1
* Li 2
* Li 3
* Li 4
* Li 5
* Li 6
* Li 7
* Li 8
5. :odd用法
定?? 义：匹配所有索引值为奇数的元素，从 0 开始计数
返回值：Array
实?? 例：将ID为”ul_5″的ul中索引为奇数的Li元素的背景色改为红色(注：索引从0开始)
代?? 码： $(“#ul_5 li:odd”).css(“background-color”,”red”); //点击按钮五将执行这句代码
ul ID=”ul_5″
* Li 1
* Li 2
* Li 3
* Li 4
* Li 5
* Li 6
* Li 7
* Li 8
6. :eq(index)用法
定?? 义：匹配一个给定索引值的元素
返回值：Element
参?? 数：index (Number) : 从 0 开始计数
实?? 例：将ID为”ul_6″的ul中索引为3的Li元素的背景色改为红色(注：索引从0开始)
代?? 码： $(“#ul_6 li:eq(3)”).css(“background-color”,”red”); //点击按钮六将执行这句代码
ul ID=”ul_6″
* Li 1
* Li 2
* Li 3
* Li 4
* Li 5
* Li 6
* Li 7
* Li 8
7. :gt(index)用法
定?? 义：匹配所有大于给定索引值的元素
返回值：Array
参?? 数：index (Number) : 从 0 开始计数
实?? 例：将ID为”ul_7″的ul中索引值大于3的Li元素的背景色改为红色(注：索引从0开始)
代?? 码： $(“#ul_7 li:gt(3)”).css(“background-color”,”red”); //点击按钮七将执行这句代码
ul ID=”ul_7″
* Li 1
* Li 2
* Li 3
* Li 4
* Li 5
* Li 6
* Li 7
* Li 8
8. :lt(index)用法
定?? 义：匹配所有小于给定索引值的元素
返回值：Array
参?? 数：index (Number) : 从 0 开始计数
实?? 例：将ID为”ul_8″的ul中索引值小于3的Li元素的背景色改为红色(注：索引从0开始)
代?? 码： $(“#ul_8 li:lt(3)”).css(“background-color”,”red”); //点击按钮八将执行这句代码
ul ID=”ul_8″
* Li 1
* Li 2
* Li 3
* Li 4
* Li 5
* Li 6
* Li 7
* Li 8
9. :header用法
定?? 义：匹配如 h1, h2, h3之类的标题元素
返回值：Array
实?? 例：将ID为”div_1″的DIV中所有header(标题)元素的背景色改为红色
代?? 码： $(“#div_1 :header”).css(“background-color”,”red”); //点击按钮九将执行这句代码
DIV ID=”div_1″P标记
span标记
H1
H2
H3
H4
H5
H6
10. :animated用法
定?? 义：匹配所有正在执行动画效果的元素
返回值：Array
实?? 例：将ID为”div_2″的DIV中没有执行动画效果的元素的背景色改为红色
代?? 码： $(“#div_2 :not(:animated)”).css(“background-color”,”red”); //点击按钮十将执行这句代码
DIV id=”div_2″
span标记
1. :input用法 定?? 义：匹配所有 input, textarea, select 和 button 元素
2. :text用法 定?? 义：匹配所有的单行文本框
3. :password用法 定?? 义：匹配所有密码框