《jquery框架应用》由会员分享，可在线阅读，更多相关《jquery框架应用（21页珍藏版）》请在金锄头文库上搜索。
1、马文广jQuery简介及特点jQuery语法总结及注意事项jQuery性能优化使用jQuery简化Ajax开发jQuery插件扩展内容内容jQuery简介jQuery是继prototype之后的又一个优秀 Javascript框架。它是由 John Resig 于 2006 年 初创建的，它有助于简化 JavaScript 以及Ajax 编程。有人使用这样的一比喻来比较prototype 和jQuery：prototype就像Java，而jQuery就像 ruby. 它是一个简洁快速灵活的JavaScript框架， 它能让你在你的网页上简单的操作文档、处理事 件、实现特效并为Web页面添加Aj
2、ax交互。jQuery特点代码简练、语义易懂、学习快速、文档丰富。 jQuery是一个轻量级的脚本，其代码非常小巧， 最新版的JavaScript包只有20K左右。 jQuery支持CSS1-CSS3,以及基本的xPath。 jQuery是跨浏览器的，它支持的浏览器包括IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+。 可以很容易的为jQuery扩展其他功能。 能将JS代码和HTML代码完全分离，便于代码和维 护和修改。 jQuery特点插件丰富，除了jQuery本身带有的一些特效外， 可以通过插件实现更多功能，如表单验证、tab导 航、拖放效果、表格排序、D
3、ataGrid，树形菜单 、图像特效以及ajax上传等。jQuery选择器$(#element); /选择ID$(.element); /Class $(p); /html标签$(“form input”);/子对象$(table.orders tr:odd)/选取了table的奇数行$(“div,span,p.myClass”);/同时选择多种对象$(“:input”); /表单对象$(“inputname=myname”);/特定的表单对 象$(pa);/包含一个或多个链接的段落 jQuery对象操作$(“#element”).addClass(“selected”);/给对象添加样 式$
4、(#element).css( “background-color“:“yellow“, “font-weight”:“bold” );/改变对象样式$(“p”).text(“Some new text.”);/改变对象文本$(“img”).attr( src: “test.jpg”, alt: “Test Image” );/ 改变对象文本$(“p”).add(“span”);/给对象增加标签$(“p”).find(“span”);/查找对象内部的对应元素$(“p”).parent();/对象的父级元素$(“p”).append(“Hello”);/给对象添加内容jQuery的dom操作(一
5、)创建元素节点 var p = $(); $(body).append(p); 创建文本节点 var a = $(hello world); $(body).append(a);/添加到body元素的最后. 复制节点 var a = $(hello world); $(body).append(a); var clone_a = a.clone(); $(body).append(clone_a); jQuery的dom操作(二)插入节点 append() , appendTo() , prepend() , prependTo() , after() , insertAfter() , be
6、fore() , insertBefore() 删除节点 $(#node).remove(); 替换节点 $(“替换 test1！“).replaceAll(“#node“); 页面载入$(document).ready() 在所有DOM加载之前引发JS代码 $(window).load() 代码会在页面所有内容加载完成后按先后顺序依 次执行. jQuery的链盒理念 使用链盒将各种操作DOM的方法粘到一起，也可 以使用jQuery的end()方法，来实现在特定范围内 推进或回溯你需要得到的元素。本质上讲，每次 使用（诸如children()或filter()）方法来改变元素 集合时，你可以在
7、这些方法之后使用end()，来重 新定位你最初选取的元素集合。 例子$(form#login).find(label.optional).hide().end() / 第一步，隐藏表单中那些带有label .find(input:password).css(border, 1px solid red).end() / 第二步，为表单的密码输入域渲染上红色 边框 .submit(function() return confirm(Are you sure you want to submit?); ); / 第三步，为表单加上提交 处理 整个过程是，先选取一个表单，再在其中选取一些元素做 修改，
8、然后回溯到表单，为它定义一个submit()处理。 几个有用的jQuery方法 $.each(obj, fn)：通用的迭代函数。可用于近似 地迭代对象和数组（代替循环）。 $.extend(target,prop1,propN)：用一个或多个 其他对象来扩展一个对象，返回这个被扩展的对 象。这是jquery实现的继承方式 $.map(array, fn)：数组映射。把一个数组中的 项目(处理转换后)保存到到另一个新数组中，并 返回生成的新数组。 $.merge(arr1,arr2):合并两个数组并删除其中重 复的项目。 jQuery性能优化(一)总是从ID选择器开始继承，选择多个元素时，最 好
9、从就近的ID开始继承。在class前使用tag，总是用一个tag name来限制 (修饰)class (并且不要忘记就近的ID)。将jQuery对象缓存起来掌握强大的链式操作 ,这样可以写更少的代码, 让 我们的js更轻量 使用子查询 对直接的DOM操作进行限制,内存中建立你确实 想要的东西,然后更新DOM jQuery性能优化(二)消除无效查询,尽管jQuery可以很优雅的处理没有 匹配元素的情况,但它还是需要花费时间去寻找冒泡压缩js jQuery简化Ajax开发$(#content).load(content.html); $.get(script.php, name: Simon, f
10、unction(data) alert(data);); $.post(script.php, name: Simon, function(data) alert(data);); $.getJSON(json.php, function(json) alert(json.foo + : + json.bar);); $.getScript(script.js);$.ajax(options)jQuery跨域操作 $.getJSON( “get_json_data.php?name=mwg ); $.ajax( url:“get_json_data.php?name=zhangsan“, ty
11、pe:GET, dataType: jsonp, success:function(data) alert(data.name); );替代jQuery的js跨域动态加载js文件 function remoteRequest(url) var date = new Date(); var dcsSrc = url; var dcs = document.createElement(script); dcs.id = scriptsrc + date.valueOf(); dcs.type = text/javascript; dcs.language = javascript; dcs.src
12、 = dcsSrc; document.getElementsByTagName(“head“)0.appe ndChild(dcs); jQuery自定义扩展jQuery.fn.extend( check: function() return this.each(function() this.checked = true; ); , uncheck: function() return this.each(function() this.checked = false; ); ); $(“inputtype=checkbox“).check(); $(“inputtype=radio“).uncheck(); 最新版jquery1.4 Alpha 21.live 方法被大幅度检修，现在支持提交，更改 ，mouseenter，mouseleave，焦点，模糊在所 有浏览器活动。现在还支持背景和数据。 2.append, prepend 方法优化 3.add has been adjusted to always return elements in document order. 4.find, empty, remove, addClass, removeClass, hasClass, attr, and css 等方法 进行了重构，大大的优化。谢谢！
