1. 首页
  2. ppt
  3. 软件开发

jQuery 培训

538    1    0
noblemoon
颜色：
下载需要 10 金币 [ 金币充值 ]
亲，您也可以通过 分享原创文档 来获得金币奖励！

服务器/托管费、人工审核、技术维护等都需要很多费用，感谢您支持深度开源的发展！

下载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培训