一、jQuery的基本用法:
随着WEB2.0及ajax思想在互联网上的快速发展传播,陆续出现了一些优秀的Js框架,其中比较著名
的有Prototype、YUI、jQuery、mootools、Bindows以及国内的JSVM框架等,
jQuery是继prototype之后的又一个优秀的Javascript框架。它是由John Resig 于2006 年初创建
的,它有助于简化JavaScript 以及Ajax 编程。
它具有如下一些特点:
1. 代码简练、语义易懂、学习快速、文档丰富。
2. jQuery是一个轻量级的脚本,其代码非常小巧,最新版的JavaScript包只有20K左右。
3. jQuery支持CSS1-CSS3,以及基本的xPath。
4. jQuery是跨浏览器的,它支持的浏览器包括IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+。
5. 可以很容易的为jQuery扩展其他功能。
6. 能将JS代码和HTML代码完全分离,便于代码和维护和修改。
7. 插件丰富,除了jQuery本身带有的一些特效外,可以通过插件实现更多功能,如表单验证、
tab导航、拖放效果、表格排序、DataGrid,树形菜单、图像特效以及ajax上传等。
使用方法(同prototype)
在需要使用JQuery的页面中引入JQuery的js文件即可。
例如:
引入之后便可在页面的任意地方使用jQuery提供的语法。
二、学习教程及参考资料
请参照《jQuery中文API手册》和https://www.wendangku.net/doc/8d10063378.html,/visual/cn/index.xml
推荐两篇不错的jquery教程:《jQuery的起点教程》和《使用jQuery 简化Ajax 开发》(说明:以
上文档都放在了【附件】中)
三、语法总结和注意事项
1、关于页面元素的引用
通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath 条件等
方法,且返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法。
如:
01.$("#msg").html();-->通过ID
02.$("div").html(); $("input").val(); -->通过元素名(jQuery获取的是一个集合)
03.$("div p"); -->第一行代码得到所有
元素。
04.$("div.container") -->第二行代码得到class为container的
05.$("div #msg"); -->第三行代码得到
06.$("table a",context); -->第四行代码得到context为上下文的table里面所有的连接元素。
2、jQuery对象与dom对象的相互转换
2.1只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的,普通的dom对
象一般可以通过$()转换成jquery对象。
如:$(document.getElementById("msg"))则为jquery对象,可以使用jquery的方法。
2.2由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项,
一般可通过索引取出。
如:$("#msg")[0],$("div").eq(1)[0],$("div").get()[1],$("td")[5]这些都是dom对象,可以使用dom中的方法,但不能再使用Jquery的方法。
以下几种写法都是正确的:
01.$("#msg").html();
02.$("#msg")[0].innerHTML;
03.$("#msg").eq(0)[0].innerHTML;
04.$("#msg").get(0).innerHTML;
对于获取的元素集合,获取其中的某一项(通过索引指定)可以使用eq或get(n)方法或者索引号获
取,要注意,eq返回的是jquery对象,而get(n)和索引返回的是dom元素对象。
如要获取第三个
01.$("div").eq(2).html(); //调用jquery对象的方法
02.$("div").get(2).innerHTML; //调用dom的方法属性
3、同一函数实现set和get
Jquery中的很多方法都是如此,主要包括如下几个:
01.$("#msg").html(); //返回id为msg的元素节点的html内容。
02.$("#msg").html("new content");
03.//将“new content”作为html串写入id为msg的元素节点内容中,页面显示粗体的new content
04.$("#msg").text(); //返回id为msg的元素节点的文本内容。
05.$("#msg").text("new content");
06.//将“new content”作为普通文本串写入id为msg的元素节点内容中,页面显示
new content
07.$("#msg").height(); //返回id为msg的元素的高度
08.$("#msg").height("300"); //将id为msg的元素的高度设为300
09.$("#msg").width(); //返回id为msg的元素的宽度
10.$("#msg").width("300"); //将id为msg的元素的宽度设为300
11.$("input").val("); //返回表单输入框的value值
12.$("input").val("test"); //将表单输入框的value值设为test
13.$("#msg").click(); //触发id为msg的元素的单击事件
14.$("#msg").click(fn); //为id为msg的元素单击事件添加函数
同样blur,focus,select,submit事件都可以有这两种调用方法
4、几个有用的jQuery方法:
0)集合处理功能
对于jquery返回的集合内容无需我们自己循环遍历并对每个对象分别做处理,jquery已经为我们提
供的很方便的方法进行集合的处理。
包括两种形式:
01.$("p").each(function(i){this.style.color=['#f00','#0f0','#00f'][i]})
02.//为索引分别为0,1,2的p元素分别设定不同的字体颜色。
03.$("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})
04.//实现表格的隔行换色效果
05.$("p").click(function(){alert($(this).html())})
06.//为每个p元素增加了click事件,单击某个p元素则弹出其内容
1)$.browser.浏览器类型:检测浏览器类型。有效参数:safari, opera, msie, mozilla。如检测是否ie:$.browser.isie,是ie浏览器则返回true。
2)$.each(obj, fn):通用的迭代函数。可用于近似地迭代对象和数组(代替循环)。
如
01.$.each( [0,1,2], function(i, n){ alert( "Item #" + i + ": " + n ); });
等价于:
01.var tempArr=[0,1,2];
02.for(var i=0;i 03. alert("Item #"+i+": "+tempArr[i]); 04.} 3)也可以处理json数据,如 01.$.each( { name: "John", lang: "JS" }, function(i, n){ alert( "Name: " + i + ", Value: " 02.+ n ); }); 结果为: https://www.wendangku.net/doc/8d10063378.html,:name, Value:John https://www.wendangku.net/doc/8d10063378.html,:lang, Value:JS 4)$.map(array, fn):数组映射。把一个数组中的项目(处理转换后)保存到到另一个新数组中,并返 回生成的新数组。 如: 01.var tempArr=$.map( [0,1,2], function(i){ return i + 4; }); 02.tempArr内容为:[4,5,6] 03.var tempArr=$.map( [0,1,2], function(i){ return i > 0 ? i + 1 : null; }); 04.tempArr内容为:[2,3] 5)$.merge(arr1,arr2):合并两个数组并删除其中重复的项目。 如: 01.$.merge( [0,1,2], [2,3,4] ) //返回[0,1,2,3,4] 6)$.trim(str):删除字符串两端的空白字符。 如: 01.$.trim(" hello, how are you? "); //返回"hello,how are you? " 5、操作元素的样式 主要包括以下几种方式: 01.$("#msg").css("background"); //返回元素的背景颜色 02.$("#msg").css("background","#ccc") //设定元素背景为灰色 03.$("#msg").height(300); $("#msg").width("200"); //设定宽高 04.$("#msg").css({ color: "red", background: "blue" });//以名值对的形式设定样式 05.$("#msg").addClass("select"); //为元素增加名称为select的class 06.$("#msg").removeClass("select"); //删除元素名称为select的class 07.$("#msg").toggleClass("select"); //如果存在(不存在)就删除(添加)名称为select 的class 6、完善的事件处理功能 Jquery已经为我们提供了各种事件处理方法,我们无需在html元素上直接写事件,而可以直接为通 过jquery获取的对象添加事件。 如: 01.$("#msg").click(function(){alert("good")}) //为元素添加了单击事件 02.$("p").click(function(i){this.style.color=['#f00','#0f0','#00f'][i]}) //为三个不同的p 元素单击事件分别设定不同的处理 jQuery中几个自定义的事件: (1)hover(fn1,fn2):当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移 出这个元素时,会触发指定的第二个函数。 01.//当鼠标放在表格的某行上时将class置为over,离开时置为out。 02.$("tr").hover(function(){ 03.$(this).addClass("over"); 04.}, 05. function(){ 06. $(this).addClass("out"); 07.}); (2)ready(fn):当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。 01.$(document).ready(function(){alert("Load Success")}) 02.//页面加载完毕提示“Load Success”,不同于onload事件,onload需要页面内容加载完毕(图片等 03.),而ready只要页面html代码下载完毕即触发。与$(fn)等价 (3)toggle(evenFn,oddFn): 每次点击时切换要调用的函数。如果点击了一个匹配的元素,则触发 指定的第一个函数,当再次点击同一元素时,则触发指定的第二个函数。随后的每次点击都重复对 这两个函数的轮番调用。 01.//每次点击时轮换添加和删除名为selected的class。 02.$("p").toggle(function(){ 03. $(this).addClass("selected"); 04.},function(){ 05. $(this).removeClass("selected"); 06.}); (4)trigger(eventtype): 在每一个匹配的元素上触发某类事件。 例如: 01.$("p").trigger("click"); //触发所有p元素的click事件 (5)bind(eventtype,fn),unbind(eventtype): 事件的绑定与反绑定 从每一个匹配的元素中(添加)删除绑定的事件。 例如: 01.$("p").bind("click", function(){alert($(this).text());}); 02.//为每个p元素添加单击事件 03.$("p").unbind(); //删除所有p元素上的所有事件 04.$("p").unbind("click") //删除所有p元素上的单击事件 7、扩展我们需要的功能 01.$.extend({ 02. min: function(a, b){return a < b?a:b; }, 03. max: function(a, b){return a > b?a:b; } 04.}); //为jquery扩展了min,max两个方法 使用扩展的方法(通过“$.方法名”调用): 01.alert("a=10,b=20,max="+$.max(10,20)+",min="+$.min(10,20)); ----------->ajax编程,请见其它笔记. 8、渐入淡出 01.$("#msg").fadeIn("fast"); 02.$("#msg").fadeOut("slow"); 没错,上面两行代码已经分别实现了一个id为Msg的jquery对象的渐入和淡出。做一个像Gmail一样 的动态加载通知条,用jquery就那么简单。两个函数接受的参数除了快慢等,还可以接收整型,作 为渐入或淡出的完成时间,单位为MS。 9.plugin这也是一个插件的时代。 jquery插件给我的感觉清一色的清洁,简单。如Jtip,要使用它的功能,只需要在你的元素的class 上加上Jtip,并引入jtip.js及其样式即可以了。其他事情插件全包。我喜欢jquery的一个重要原因 是发现她已经有了很多很好,很精彩的插件。 10.解决自定义方法或其他类库与jQuery的冲突 很多时候我们自己定义了$(id)方法来获取一个元素,或者其他的一些js类库如prototype也都定义 了$方法,如果同时把这些内容放在一起就会引起变量方法定义冲突,Jquery对此专门提供了方法用 于解决此问题。 使用jquery中的jQuery.noConflict();方法即可把变量$的控制权让渡给第一个实现它的那个库或之 前自定义的$方法。之后应用Jquery的时候只要将所有的$换成jQuery即可,如原来引用对象方法 $("#msg")改为jQuery("#msg")。 如: 01.jQuery.noConflict(); 02.// 开始使用jQuery 03.jQuery("div p").hide(); 04.// 使用其他库的$() 05.$("content").style.display = 'none'; (二)基于jQuery的Ajax用法: 基于JQuery框架的AJAX 在JQuery中,AJAX有三种实现方式:$.ajax(),$.post,$.get()。 (1)使用$.post实现Ajax向页面发送数据($.get()的用法与此相似) 01.$.post(’save.cgi’, {text: ‘my string’,number: 23}, function() { 02.alert(’Your data has been saved.’); 03.}); (2)如果您确实需要编写一些复杂的Ajax 脚本,那么需要用到$.ajax() 函数。您可以指定xml、 script、html 或者json,jQuery 将自动为回调函数准备合适的结果,这样您便可以立即使用该结果。还可以指定beforeSend、error、success 或者complete 回调函数,向用户提供更多有关Ajax 体验的反馈。 $.ajax() 使Ajax 由复杂变简单 01.$.ajax({ 02.url: ‘document.xml’, 03.type: ‘GET’, 04.dataType: ‘xml’, 05.timeout: 1000, 06.error: function(){ 07.alert(’Error loading XML document’); 08.}, 09.success: function(xml){ 10.// do something with xml 11.} 12.}); 另一实例: XHTML(主要): 代码: 复制内容到剪贴板 01.
03.
09.
10.
11.
JS:
1、引入jquery框架:
代码: 复制内容到剪贴板
01.
2、构建AJAX,JQUERY的好处是不需要在XHTML中使用JS代码来触发事件了,可以直接封装在JS
文件中:
代码: 复制内容到剪贴板
01.
02. //$.ajax()方式
03. $(document).ready(function (){
04. $('#send_ajax').click(function (){ //直接把onclick事件写在了JS中,而不需要混在
05.XHTML中了
06. var params=$('input').serialize(); //序列化表单的值,与prototype中的
07.form.serialize()相同
08. $.ajax({
09. url :'ajax_test.php', //后台处理程序
10. type:'post', //数据发送方式
11. dataType:'json', //接受数据格式
12. data:params, //要传递的数据
13. success:update_page //回传函数(这里是函数名)
14. });
15. });
16. });
17. function update_page (json) { //回传函数实体,参数为XMLhttpRequest.responseText
18. var str="姓名:"+https://www.wendangku.net/doc/8d10063378.html,ername+"";
19. str+="年龄:"+json.age+"";
20. str+="性别:"+json.sex+"";
21. str+="工作:"+json.job;
22. $("#result").html(str);
23. }
(三)Struts2 + jQuery 的简单例子使用
JSON插件提供了一种名为json的ResultType,一旦为某个Action指定了一个类型为json的Result,
则该Result无需映射到任何视图资源。
因为,JSON插件允许我们在JavaScript中异步调用Action,且负责将Action里的状态信息序列化成
JSON格式的数据,并将该数据返回给客户端页面的JavaScript 。这样就可以完成Ajax交互。
1、将struts2的json插件加入web工程的lib,jsonplugin的下载地址:
https://www.wendangku.net/doc/8d10063378.html,/p/jsonplugin/downloads/list
2、struts.xml添加专为ajax使用的package
01.
02.
03.
04.
05.
3、在页面中引入jquery的js文件库
01.
02.
03. function clickButton()
04. {
05. var url = 'ajaxRequest.action';
06. var params = {
07. name:$('#name').attr('value'),
08. contactEmail:$('#contactEmail').attr('value'),
09. subject:$('#subject').attr('value'),
10. content:$('#content').attr('value')
11. }; //通过id获得输入值
12. jQuery.post(url, params, callbackFun, 'json');
13. }
14./url:响应aciton;params:传入参数;callbackFun:响应完成后的回调函数;
15. function callbackFun(data)
16. {
17. alert("SUCCESS");
18. }
19.
4、action逻辑与普通的ation写法无大区别。
JSON将Action里的状态信息序列化成JSON格式的数据
原文地址:js和jquery获取父级元素、子级元素、兄弟元素的方法作者:草根gis 先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比。 JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当最DOM元素 原生的JS获取ID为test的元素下的子元素。可以用: var a = docuemnt.getElementById("test").getElementsByTagName_r("div"); 这样是没有问题的 此时a.length=2; 但是如果我们换另一种方法 var b =document.getElementByIdx_x("test").childNodes; 此时b.length 在IE浏览器中没问题,其依旧等于2,但是在FF浏览器中则会使4,是因为FF把换行也当做一个元素了。 所以,在此,我们就要做处理了,需遍历这些元素,把元素类型为空格而且是文本都删除。 functiondel_ff(elem){ varelem_child = elem.childNodes; for(vari=0; i< p=""> if(elem_child[i].nodeName == "#text" && !/s/.test(elem_child.nodeValue)) {elem.removeChild(elem_child)
} } } 上述函数遍历子元素,当元素里面有节点类型是文本并且文本类型节点的节点值是空的。就把他删除。 nodeNames可以得到一个节点的节点类型,/s/是非空字符在JS里的正则表达式。前面加!,则表示是空字符 test() 方法用于检测一个字符串是否匹配某个模式.语法是:RegExpObject.test(string) 如果字符串string 中含有与RegExpObject 匹配的文本,则返回true,否则返回false。 nodeValue表示得到这个节点里的值。 removeChild则是删除元素的子元素。 之后,在调用子,父,兄,这些属性之前,调用上面的函数把空格清理一下就可以了 下面介绍JQUERY的父,子,兄弟节点查找方法 jQuery.parent(expr) 找父亲节点,可以传入expr进行过滤,比如$("span").parent()或者$("span").parent(".class") jQuery.parents(expr),类似于jQuery.parents(expr),但是是查找所有祖先元素,不限于父元素
jQuery常用功能大全 1、关于页面元素的引用 通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery 对象(集合对象),不能直接调用dom定义的方法。 2、jQuery对象与dom对象的转换 只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的,调用方法时要注意操作的是dom对象还是jquery对象。 普通的dom对象一般可以通过$()转换成jquery对象。 如:$(document.getElementByIdx_x("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的方法,如要获取第三个
jquery选择器之获取父级元素、同级元素、子元素 1、父级元素 1.1 parent() 方法返回被选元素的直接父元素。 如:$("span").parent(); 1.2 parents() 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素()。 如:$("span").parents();
也可以使用可选参数来过滤对祖先元素的搜索。 如:$("span").parents("ul"); 1.3 parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。 如:$("span").parentsUntil("div");
2、同胞 2.1 siblings() 方法返回被选元素的所有同胞元素。如:$("h2").siblings(); 返回属于
2.2 next() 方法返回被选元素的下一个同胞元素。 如:$("h2").next(); 2.3 nextAll() 方法返回被选元素的所有跟随的同胞元素。如:$("h2").nextAll();
2.4 nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。 如:$("h2").nextUntil("h6");
2.5 prev(), prevAll() 以及prevUntil() 方法的工作方式与上面的方法类似,只不过方向相反而已:它们返回的是前面的同胞元素。 3、子元素 3.1 children() 方法返回被选元素的所有直接子元素。 如:$("div").children(); 返回类名为"1" 的所有元素,并且它们是
window.onload $(document).ready() 执 行时机必须等待网页中所有的内容加载完毕后(包括 图片)才能执行 网页中所有DOM结构绘制完毕后就 执行,可能DOM元素关联的东西并 没有加载完 编写个数不能同时编写多个,以下代码无法正确执行: window.onload =function({alert("test1");}window.onload = function(){alert("test2");}结果只会输出 "test2" 能同时编写多个 简 化写法无 $(document).ready(function(){}); 可以简写成$(function(){}); 一、选择网页元素 jQuery的基本设计和主要用法,就是"选择某个网页元素,然后对其进行某种操作"。这是它区别于其他函数库的根本特点。 使用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元素
$的选择器部分: 凡是运用$,其返回值是一个object $选择器主要用于选择标签.基本用法是同css的选择器.但是,很让人兴奋的是,他支持常见的浏览器,而css中很多选择器是IE6所不支持的. 1.基本选择器(3种): $("标签名"),如$("p")是选取了所有的p标签节点 $("#id名"),如$("#test")是选取了id为test的标签节点 $(".class名"),如$(".test")是选取了所有class为test的标签节点 上面的$("标签名")和$(".class名")返回的都是所有满足的节点,至于进一步筛选可以添加一些函数,如eq,gt,lt 等等. 2.组选择器: 下面还是现做一个约定:把"标签名或#id名或.class名"记作mix,则mix表示一个标签名,或一个#id或一个.class. $("mix,mix,mix,..."),如:$("div,#test1,p,.test2,#test3") 3.后代选择器: $("mix mix"),当然可以是多个嵌套,但后代选择器可以是深层子代,所以$("mix mix mix ...")这种写法作用不大.例子:$("div .test"):在div标签内的所有具有test的class的后代元素(就是被div嵌套的class属性为test 的标签) 可以见DEMO。 4.子选择器: $("mix>mix"),这个放在后代选择器后面是为了和它做对比.子选择器只能选择第一代子代.不处理深层嵌套.例子: $("div>.test")
在$("div + #test")中能取到p段落节点
则不能取到 6.属性选择器: 把属性选择器不放在css选择器里面是因为jQuery中写法是不一样的.至于css中写法可以参考我之前写的一篇css的选择器一文.jQuery中是和xPath类似的写法: $("mix[@attr]"):选取所有该mix且具有attr属性的节点 $("mix[@attr=a_value"]):选取所有该mix且具有attr属性并满足属性值为a_value的节点 $("mix[@attr^=a_value_head"]):attr属性的属性值是以a_value_head开头的 $("mix[@attr$=a_value_end"]):attr属性的属性值是以a_value_end结尾的 $("mix[@attr*=a_value"]):attr属性的属性值中包含a_value 7.进一步选择器: