首页
ppt
软件开发
×
该PPT是用户上传,如果对该PPT内容或使用有所疑问,请根据该ppt中作者所留的联系方式,咨询原作者!
如果涉及侵权等原因需要删除,请联系QQ:875388611
jQuery 培训
787
1
0
noblemoon
颜色:
下载需要
10
金币
[ 金币充值 ]
亲,您也可以通过
分享原创文档
来获得金币奖励!
服务器/托管费、人工审核、技术维护等都需要很多费用,感谢您支持深度开源的发展!
下载PPT
0
推荐
7
收藏
PPT 内容
PPT 图集
1. jQuery 廖敏 系统中心软件开发组 2010-03-04
2. 第2页 共30页培训纲要jQuery简介 部署jQuery jQuery基础 jQuery与ajax jQuery插件 JSON介绍 相关资料介绍
3. 第3页 共30页jQuery简介jQuery是John Resig建立的一个轻量级javascript库 主流的js库还有Prototype, YUI, Dojo, MooTools。jQuery简洁易用、性能较为优秀(性能测试:http://mootools.net/slickspeed) 兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+) 使用户能更方便地处理HTML文档、事件、实现动画效果 方便地为网站提供Ajax交互 Write Less, Do More…
4. 第4页 共30页一些简单的代码简化 实现为页面的某一区域中的每个链接附加一个单击事件 没有使用 jQuery 的 DOM 脚本 使用了 jQuery 的 DOM 脚本
5. 第5页 共30页jQuery能做什么?获取页面的部分内容 修改页面的外观 修改页面的内容 在页面中响应用户的交互 给页面加上动画 无刷新返回服务器端的信息 还提供了改进基本的 JavaScript 结构,如迭代和数组操作 以插件的形式持续地通过开发加入新的功能
6. 第6页 共30页jQuery下载与安装jQuery下载 稳定版本1.3.2,发布版19k 官方网站下载:http://jquery.com/ jQuery安装 在页面头部head中,添加js 页面载入 $(document).ready(callback) 绑定一个在DOM文档载入完成后执行的函数 同一个页面上可以多次使用 Demo
7. 第7页 共30页jQuery 与 $“$”符号在jQuery框架中代表对jQuery对象的引用 jQuery = window.jQuery = window.$ = function( selector, context ) {…} 获得jQuery对象 选择器:jQuery( selector, [context] ) $(selector, [context]) 例一: $(“#myDiv") 例二:$("input:radio", document.forms[0]); 例三: $("div > p").css("border", "1px solid gray"); 构造jQuery对象:jQuery(html)、jQuery(elements) $(html)、$(elements) $("
Hello
").appendTo("body") $(document.body).css( "background", "black" ); 回调函数:jQuery(callback) $(callback) $( document ).ready( callback ) 的简写
8. 第8页 共30页jQuery 选择器基本选择器 根据给定的ID匹配一个元素 $("#myDiv").css("border","3px solid gray"); 根据给定的CSS类匹配元素 $(".myClass").css("border","3px solid green"); 根据给定的元素名匹配所有元素 $("div").css("border","3px solid yellow"); 通配符 $(‘*’) .css("border","3px solid red"); 将每一个选择器匹配到得元素合并后一起返回 $("div,span,p.myClass").css("border","3px solid red"); 层次选择器(部分) 在给定的祖先元素下匹配所有的后代元素 $("form input").css("border", "2px dotted blue"); 表单选择器(部分) 匹配所有按钮 $(":button").css({background:"yellow", border:"3px red solid"});
9. 第9页 共30页jQuery过滤器基本过滤器(部分) 匹配找到的第一个元素 $("tr:first").css("font-style", "italic"); 匹配所有索引值为偶数的元素 $("tr:even").css("background-color", "#bbbbff"); 内容过滤器(部分) 匹配包含给定文本的元素 $("div:contains('John')").css("text-decoration", "underline"); 可见性过滤器(部分) 匹配所有的不可见元素 $("div:hidden").show(3000); 属性过滤器 子元素过滤器 表单过滤器
10. 第10页 共30页jQuery 对象属性操作属性 attr(name):取得第一个匹配元素的属性值 $("em").attr("title"); attr(key, value):为所有匹配的元素设置一个属性值 $(“:button:gt(1)").attr("disabled","disabled") ; 内容 html():取得第一个匹配元素的html内容 $("div").html(); html(val):设置每一个匹配元素的html内容 $("div").html("
Hello
Again
"); 文本 text():取得所有匹配元素的内容 $("div").text(); text(val):设置所有匹配元素的文本内容,不进行HTML解析 $("div").text("
Hello
Again
");
11. 第11页 共30页jQuery 对象属性操作值 val():获取第一个匹配元素的当前值 单选返回值 $("#single").val() ; 多选返回数组 $("#multiple").val(); val(val):设置每一个匹配元素的值 $("input").val("text"); $("#multiple").val(["Multiple2", "Multiple3"]); CSS类 addClass(class):为每个匹配的元素添加指定的类名 $("p:last").addClass("selected"); $("p:last").addClass("selected highlight"); removeClass(class):从所有匹配的元素中删除全部或者指定的类 $("p:even").removeClass("blue"); $("p:odd").removeClass("blue under"); $("p:eq(1)").removeClass();
12. 第12页 共30页jQuery文档内容处理内部插入 append(content):向每个匹配的元素内部追加内容 $("p").append("
Hello
"); appendTo(content):把所有匹配的元素追加到指定的元素或元素集合中 $("span").appendTo("#foo") prepend、prependTo 外部插入 after(content):在每个匹配的元素之后插入内容 $("p").after("
Hello
"); before、insertAfter、insertBefore 复制 clone():克隆匹配的DOM元素并且选中这些克隆的副本 $("b").clone().prependTo("p"); clone(true):元素及事件一起克隆 $("button").clone(true).insertAfter(this); 包裹 wrap(html):把所有匹配的元素用其他元素的结构化标记包装起来 $("p").wrap("
"); wrapAll、wrapInner
13. 第13页 共30页jQuery文档内容处理删除 empty():删除匹配的元素集合中所有的子节点 $("p").empty(); remove():从DOM中删除所有匹配的元素 $("p").remove(); $("p").remove(":contains('Hello')"); 替换 replaceAll(selector):用匹配的元素替换所有selector匹配到的元素 $("
Paragraph.
").replaceAll("p"); replaceWith(content):将所有匹配的元素替换成指定的HTML或DOM元素 $("p").replaceWith("
Paragraph.
");
14. 第14页 共30页jQuery事件操作事件 click(fn):在每一个匹配元素的单击事件中绑定一个处理函数 $("p").click(function () { $(this).slideUp(); }); click():触发每一个匹配元素的单击事件 $("p").click(); keydown、keyup、submit、change、blur… 事件绑定 为每一个匹配元素的特定事件绑定一个事件处理函数 bind(type, data, fn) function handler(event) { alert(event.data.foo); } $("p").bind("click", {foo: "bar"}, handler) 在每个匹配的元素上触发某类事件 Trigger(type,[data]) 删除事件绑定 Unbind([type],[data]) One、trigerHandler
15. 第15页 共30页jQuery事件操作事件切换 鼠标移入移出一个对象 hover(over,out) over:鼠标移到元素上要触发的函数 out:鼠标移出元素要触发的函数 每次点击后轮番依次调用函数 toggle(fn1,fn2…) fn1:第一次点击时执行的函数 fn2:第二次… fn3,fn4… :更多次点击时要执行的函数 事件委派 die、live 页面载入 ready
16. 第16页 共30页jQuery特效操作基本特效 隐藏显示的匹配元素 hide() hide(speed,[callback]) 显示隐藏的匹配元素 show() show(speed,[callback]) 淡入淡出 通过不透明度的变化来实现所有匹配元素的淡入效果 fadeIn(speed, [callback]) 淡出效果 fadeOut(speed,[callback]) 调整为指定的不透明度 fadeTo(speed,opacity,[callback]) opacity: 0到1之间的数字 滑动 slideDown、slideToggle、slideUp
17. 第17页 共30页jQuery常见的工具函数字符串操作 $.trim(str):去掉字符串起始和结尾的空格 $.trim(" hello, how are you? "); 数组和对象操作 遍历对象或数组 $.each(obj,callback) $.each( [0,1,2], function(i, n){ alert( "Item #" + i + ": " + n ); }); 数组过滤函数 $.grep(array,callback,[invert]) $.grep( [0,1,2], function(n,i){ return n > 0; }); 将一个数组中的元素转换到另一个数组中 $.map(array,callback) $.map( [0,1,2], function(n){ return n + 4; });
18. 第18页 共30页jQuery与AJAXAjax请求 load( url, [data], [callback] ) 载入远程 HTML 文件代码并插入至 DOM 中 url (String) : 请求的HTML页的URL地址 data (Map) : 发送至服务器的 key/value 数据 callback (Callback) : 请求完成时(不需要是success的)的回调函数 $("#feeds").load("feeds.php", {limit: 25}, function(){ alert("The last 25 entries in the feed have been loaded"); }); jQuery.get( url, [data], [callback] ) 使用GET方式来进行异步请求 url (String) : 发送请求的URL地址 data (Map) :发送至服务器的 key/value 数据 callback (Function) : (可选) 载入成功时回调函数 $.get("test.php"); $.get("test.php", { name: "John", time: "2pm" } ); $.get("test.php", function(data){ alert("Data Loaded: " + data); });
19. 第19页 共30页jQuery与AJAXjQuery.getJSON(url, [data], [callback]) 通过HTTP GET请求载入JSON数据 url(String):发送请求地址 data(Map):(可选)待发送key/value参数 callback(Function):(可选)载入成功时回调函数 $.getJSON("test.js", function(json){ alert("JSON Data: " + json.users[3].name); });
20. 第20页 共30页jQuery与AJAXjQuery.post( url, [data], [callback], [type] ) 使用POST方式来进行异步请求 url (String) : 发送请求的URL地址. data (Map) :发送至服务器的 key/value 数据 callback (Function) : (可选) 载入成功时回调函数 type (String) : (可选) 客户端请求的类型(JSON,XML,等等)
21. 第21页 共30页jQuery与AJAXjQuery.getScript( url, [callback] ) 通过 GET 方式请求载入并执行一个 JavaScript 文件 url (String) : 待载入 JS 文件地址。 callback (Function) : (可选) 成功载入后回调函数。 jQuery 1.2 版本之前,getScript 只能调用同域 JS 文件。 1.2版本之后,可以跨域调用 JavaScript 文件 jQuery.ajax( options ) 通过 HTTP 请求加载远程数据 jQuery 的底层 AJAX 实现。简单易用的高层实现如 $.get, $.post 等 options实用的参数有:beforeSend ,success ,complete ,error 。我们可以定义这些事件来很好的处理我们的每一次的Ajax请求
22. 第22页 共30页jQuery与AJAXAjax事件 ajaxStart(callback):Ajax请求开始时执行函数 $("#loading").ajaxStart(function(){ $(this).show(); }); ajaxSend(callback):Ajax请求发送前执行函数 $("#msg").ajaxSend(function(event, request, settings){ $(this).append("
Starting request at " + settings.url + "
"); }); ajaxSuccess(callback):Ajax请求成功时执行函数 $("#msg").ajaxSuccess(function(evt, request, settings){ $(this).append("
Successful Request!
"); }); ajaxError(callback):Ajax请求发生错误时执行函数 ajaxComplete(callback):Ajax请求完成时执行函数 ajaxStop(callback):Ajax请求结束时执行函数
23. 第23页 共30页jQuery 插件之表单异步提交jquery.form.js 处理表单异步提交 $(function(){ var options = { [url:url,method:post,] beforeSubmit: validate, success: processJson, iframe: true }; $('#submitForm').submit(function() { $(this).ajaxSubmit(options); return false; // 必须 }); $('#btn_submit').click(function() { $('#submitForm').submit(); }); }); function validate(formData, jqForm, options) {//表单验证,返回true/false} function processJson(data) {// 处理结果}
24. 第24页 共30页JSON介绍JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。 JSON数据的两种格式: 对象 :{key1:value1,key2:value2,…} 数组:[对象1, 对象2, …] 值(value)可以是双引号括起来的字符串(string)、数值(number)、true、false、 null、对象(object)或者数组(array)。 JSON对象举例 var User = {"UserID":11, "Name":"Truly", "Email":"zhuleipro◎hotmail.com"}; {"UserID":11, "Name":{"FirstName":"Truly","LastName":"Zhu"}, "Email":"zhuleipro◎hotmail.com"} JSON数组举例 var UserList = [ {"UserID":11, "Name":{"FirstName":"Truly","LastName":"Zhu"}, "Email":"zhuleipro◎hotmail.com"}, {"UserID":12, "Name":{"FirstName":"Jeffrey","LastName":"Richter"}, "Email":"xxx◎xxx.com"}, {"UserID":13, "Name":{"FirstName":"Scott","LastName":"Gu"}, "Email":"xxx2◎xxx2.com"} ];
25. 第25页 共30页JSON介绍JSON数据操作 alert(User.Name); alert(UserList[0].Name.FirstName); JSON特点 对象是属性、值对的集合。一个对象的开始于“{”,结束于“}”。每一个属性名和值间用“:”提示,属性间用“,”分隔。 数组是有顺序的值的集合。一个数组开始于"[",结束于"]",值之间用","分隔。 值可以是引号里的字符串、数字、true、false、null,也可以是对象或数组。这些结构都能嵌套。 字符串和数字的定义和C或Java基本一致。
26. 第26页 共30页json.jarJson.jar是一个java处理json数据的包 对象类型:JSONObject JSONObject jo = new JSONObject(); // {} jo.put(“key”, value); jo.toString(); // 返回json格式字符串{key:value} 数组类型:JSONArray JSONArray ja = new JSONArray(); // [] ja.put(object); ja.toString(); // [{…},{…},…]
27. 第27页 共30页培训小结jQuery本质上是定义在window对象的一个属性,其中封装了很多便于js操作的API,其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。 jQuery最大的特点:简洁易用,它允许你用最少数量的代码就能非常优雅地(且非常有效地)找出和操作HTML元素 方便地处理HTML文档、事件、实现动画效果 简洁的Ajax交互 强大的插件支持 JSON数据格式的特点及使用
28. 第28页 共30页jQuery适用场合jQuery能有效的提高开发效率,但是在下列情况下不建议使用: javascript初学者 jQuery代码过于简便直观,不利于培养扎实的javascript功底 行为比较复杂的项目 jQuery获取DOM节点的速度比标准DOM方法高出4倍以上,当网站行为比较复杂的时候,累加的微小差距会显著影响网站性能 超高访问量的页面 当需要考虑减小服务器传输量的时候,应该毫不犹豫的去掉jQuery,可以显著减小网站流量 只需要jQuery的一个功能的页面 比如很多时候为了获得一个getElementById的简写,不惜引入庞大的jQuery,这虽然算不上大问题,但有责任心的开发者不会做这种事情 适合使用jQuery的场合 中小型网站,专题,具有一定javascript经验的人
29. 第29页 共30页参考资料jQuery官网: http://jquery.com jQuery在线手册: http://www.visualjquery.com/ jQuery表单插件: http://malsup.com/jquery/form/#code-samples Json介绍: http://www.json.org/json-zh.html Json.jar文档: http://www.json.org/java/index.html
30. 第30页 共30页 Thank You!
关键词
jQuery
JavaScript框架
手册
培训
CSS
相关PPT
jQuery 培训
jQuery培训讲义
JQuery培训 (初级)
Tomcat培训教材培训
smartgwt 培训
smartgwt 培训
Oracle Sql培训
jQuery 培训文档 (公司内部分享)
CSS 培训
L2TP培训