培训文档(JQuery)

Jquery目录Jquery............................................................................................................................................1一、入门.......................................................................................................................11，jquery能作什么？.................................................................................................1二、部署及区别...................................................................................................................2在需要使用JQuery的页面中引入JQuery的js文件即可。....................................2window.onload和$(document).ready()区别...............................................................2jquery.js和jquery.min.js的区别。.............................................................................3jQuery和$.....................................................................................................................3jQuery不要重复加载，可能会出现冲突。如：陈哥上次与到的问题。...............3jQuery与其他库的冲突解决.......................................................................................3三、常用--网络摘要没有实例。........................................................................................5jQuery对象与dom对象的转换.................................................................................5如何获取jQuery集合的某一项..................................................................................6同一函数实现set和get..............................................................................................6操作元素的样式...........................................................................................................7事件处理功能...............................................................................................................7几个有用的jQuery方法..............................................................................................8集合处理功能...............................................................................................................9四、详解验证----jQuery.validate..........................................................................................9第一种方法：全在js中判断，有自定义方法。（实例Myvalidata-在js中写验证方法.html）....................................................................................................................10第二种方法：直接在class中写上验证规则验证。（Myvalidata-inputClass.html）.....................................................................................................................................14用struts2+remote方法验证。（实例可以看oa中的type）..................................16jQuery.validate中文API............................................................................................20一、入门1，jquery能作什么？（取得文档中的内容，修改页面的外观，改变文档的内容，响应用户的交互操作，为页面添加动态效果，无需刷新页面从服务器获取信息，简化常见的javascript任务。）二、部署及区别在需要使用JQuery的页面中引入JQuery的js文件即可。例如：headscripttype=text/javascriptsrc=js/jquery-1.4.js/script/head引入之后便可在页面的任意地方使用jQuery提供的语法。不只是在jsp中可以用，在Html中也可以。window.onload和$(document).ready()区别jquery.js和jquery.min.js的区别。jQuery和$jQuery不要重复加载，可能会出现冲突。如：陈哥上次与到的问题。jQuery与其他库的冲突解决jquery库在其他库之后导入!--引入prototype--scriptsrc=prototype-1.6.0.3.jstype=text/javascript/script!--引入jQuery--scriptsrc=../js/jquery-1.4.jstype=text/javascript/scriptscripttype=text/javascriptjQuery.noConflict();//将变量$的控制权让渡给prototype.jsjQuery(function(){//使用jQueryjQuery(p).click(function(){alert(jQuery(this).text());});});$(pp).style.display='none';//使用prototype/script用jQuery.noConflict();将$的控制权交给其他库。也可以用下面这种建一个快捷方式。scripttype=text/javascriptvar$j=jQuery.noConflict();//自定义一个比较短快捷方式$j(function(){//使用jQuery$j(p).click(function(){alert($j(this).text());});});$(pp).style.display='none';//使用prototype/script不想使用备用名称，不想交出$时，还不想与其他库冲突时scripttype=text/javascriptjQuery.noConflict();//将变量$的控制权让渡给prototype.jsjQuery(function($){//使用jQuery$(p).click(function(){//继续使用$方法alert($(this).text());});});$(pp).style.display='none';//使用prototype/script或是scripttype=text/javascriptjQuery.noConflict();//将变量$的控制权让渡给prototype.js(function($){//定义匿名函数并设置形参为$$(function(){//匿名函数内部的$均为jQuery$(p).click(function(){//继续使用$方法alert($(this).text());});});})(jQuery);//执行匿名函数且传递实参jQuery$(pp).style.display='none';//使用prototype/scriptjquery库在其他库之前导入scriptsrc=../js/jquery-1.4.jstype=text/javascript/script!--后导入其他库--scriptsrc=prototype-1.6.0.3.jstype=text/javascript/scriptscripttype=text/javascriptjQuery(function(){//直接使用jQuery,没有必要调用jQuery.noConflict()函数。jQuery(p).click(function(){alert(jQuery(this).text());});});$(pp).style.display='none';//使用prototype/script三、常用--网络摘要没有实例。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;如何获取jQuery集合的某一项对于获取的元素集合，获取其中的某一项（通过索引指定）可以使用eq或get(n)方法或者索引号获取，要注意，eq返回的是jquery对象，而get(n)和索引返回的是dom元素对象。对于jquery对