• 1. JQuery初步 Date: 2012/04/10
  • 2. AgendajQuery历史和简介 Write Less,Do More! 选择器 jQuery &Ajax jQuery事件绑定 jQuery plugin Q &A
  • 3. jQuery历史2005年8月22日,John Resig写博客提出Behaviour框架的三项改良建议: 1.支持层级选择符2.支持事件绑定3.消除冗余关键字 2006年1月14日, jQuery正式发布 2006年1月24日, jQuery博客建立 2006年1月25日,首个jQuery插件发布 2006年2月26日,jQuery AJAX插件发布 jQuery中文api:http://jquery-api-zh-cn.googlecode.com/svn/trunk/index.html John Resig, jQuery的创始人和技术领袖,目前在Mozilla担任JavaScript工具开发工程师。著有《Pro JavaScript Techniques》(即《精通JavaScript》)等经典JavaScript书籍。
  • 4. jQuery特点write less,do more jQuery is designed to change the way that you write javascript. The focus of jquery: Find some elements,do something with them. 优势: 轻量级 (Lightweight) 强大的选择器 出色的DOM操作封装 可靠的事件处理机制 出色的浏览器兼容性 完善的Ajax 链式操作方式 行为层和结构层分离 丰富的插件支持和完善的文档
  • 5. jQuery与prototype提到jQuery就会很自然的与prototype进行比较: jQuery也是纯粹的javascript代码库,完全可以在其它的web应用中使用 jQuery能兼顾主流浏览器标准,能跨浏览器运行 jQuery开发者操作的对象不是原始的DOM元素,而是jQuery对象。通过这种方式使得开发者无须理会不同浏览器处理dom对象时存在的差异,而是直接以jQuery对象所支持的属性和方法操作DOM对象。 jQuery提供了一些工具来简化数组,字符串的操作。 jQuery库对Ajax也提供了良好的支持,使用jquery无须手动创建XMLHttpRequest对象,只需指定发送请求的URL和处理服务器相应的回调函数即可, jQuery将负责完成剩下的工作。
  • 6. jQuery使用下载:http://www.jquery.com提供了最新的jQuery框架下载。通常只需下载最小的jQuery包(Minified)即可。目前最新的版本jquery-1.7.2.min.js文件只有32 KB 引用: 将jQuery框架文件导入后,就可以使用jQuery的选择器和各种函数功能了。
  • 7. jQuery=$jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象 jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#tab”).html(); jQuery 对象无法使用 DOM 对象的任何方法, 同样 DOM 对象也不能使用 jQuery 里的任何方法 建议约定:如果获取的是 jQuery 对象, 那么要在变量前面加上 $. var $variable = jQuery 对象 var variable = DOM 对象 补充:jQuery 对象不能使用 DOM 中的方法, 但如果 jQuery 没有封装想要的方法, 不得不使用 DOM方法的时候, 有如下两种处理方法: (1) jQuery 对象是一个数组对象, 可以通过 [index] 的方法得到对应的 DOM对象. $("#msg")[0] (2) 使用 jQuery 中的 get(index) 方法得到相应的 DOM 对象 $("#msg").get(0)
  • 8. DOM对象转换为jQuery对象对于一个 DOM 对象, 只需要用 $() 把 DOM 对象包装起来(jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象), 就可以获得一个 jQuery 对象. 例如: $(document.getElementById(“test”))转换后就可以使用 jQuery 中的方法了
  • 9. jQuery Selector选择器是 jQuery 的根基, 在 jQuery 中, 对事件处理, 遍历 DOM 和 Ajax 操作都依赖于选择器 jQuery 选择器的优点: 1.简洁的写法 2.完善的事件处理机制 if(document.getELementById(‘test’)){ } $(‘#test’). 即使元素不存在也不会报错。
  • 10. Selector通过$选取DOM元素和创建DOM元素 * 匹配任何元素 E 匹配标签名称为E的所有元素 E F 匹配标签名称为F,作为E的后代节点的所有元素 E>F 匹配标签名称为F,作为E的后代节点的所有元素 E+F 匹配前面是邻近兄弟节点E的所有元素F(E,F紧挨着) E-F 匹配前面是任何兄弟节点E的所有元素F(E,F可以不安紧挨着) E:has(F) 匹配标签名称为E,至少有一个标签名称为F的后代节点出的所有元素 E.C 匹配带有类名C的所有元素E E#I 匹配id特性为I的元素E E[A] 匹配带有特性A的所有元素E (example:selector-firstTest.html)
  • 11. jQuery元素选择器jQuery 元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素。 $("p") 选取

    元素。 $("p.intro") 选取所有 class="intro" 的

    元素。 $(“p#demo”) 选取 id=“demo” 的第一个

    元素。

  • 12. jQuery属性选择器jQuery 属性选择器 jQuery 使用 XPath 表达式来选择带有给定属性的元素。 $("[href]") 选取所有带有 href 属性的元素。 $("[href='#']") 选取所有带有 href 值等于 "#" 的元素。 $("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。 $("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
  • 13. jQuery CSS 选择器jQuery CSS 选择器 jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。 1.改变 id 为 one 的元素的背景色为 红色 $("#one").css("backgroundColor","red"); 2.改变元素名为

    的所有元素的背景色为 # bbffaa,字体颜色为红色 $("p").css({color:"red",backgroundColor:"#bbffaa"}); 3.改变第一个

    元素的背景色为红色 $("p").eq(0).css("backgroundColor","red"); 4.改变所有

    元素和 id 为 one 的元素的背景色为 # bbffaa $("h1,#one").css("backgroundColor","#bbffaa");

  • 14. 层次选择器改变 内所有
    的背景色为 # bbffaa $(“body div") 改变 内子
    的背景色为 # bbffaa $(“body>div") 改变 id 为 one 的下一个
    的背景色为 # bbffaa $("#one+div") 改变 id 为 two 的元素后面的所有兄弟
    的元素的背景色为 # bbffaa $("#two~div") 改变 id 为 two 的元素所有

    兄弟元素的背景色为 # bbffaa $("#two"). siblings("p")

  • 15. 过滤选择器过滤选择器主要是通过特定的过滤规则来筛选出所需的 DOM 元素, 该选择器都以 “:” 开头 按照不同的过滤规则, 过滤选择器又可分为基本过滤, 内容过滤, 可见性过滤, 属性过滤, 子元素过滤和表单对象属性过滤选择器. 时间有限,无法一一介绍每个选择器,我们通过一个实例来 演示相应的一些用法。(example:selector-firstTest.html)
  • 16. jQuery的DOM操作1.查找节点 2.创建节点$(html) 3.插入节点 var newP =$("

    This is a dom test!

    "); newP.insertAfter(“#test”); //将创建的newP元素插入到ID为#test的元素后 或者 newP.appendTo(“body”); //插入到body元素里 4.删除节点 remove(attr);empty() 5.复制节点 clone();clone(true)后者同时复制事件 6.替换节点 replaceWith();replaceAll() 7.包裹节点 wrap();wrapAll()
  • 17. jQuery的DOM操作8.属性操作 jQuery 中有很多方法都是一个函数实现获取和设置. 如: attr(), html(), text(), val(), height(), width(), css() 等. removeAttr(): 删除指定元素的指定属性 9.样式操作 追加样式: addClass() 移除样式: removeClass() --- 从匹配的元素中删除全部或指定的 class 切换样式: toggleClass() --- 控制样式上的重复切换.如果类名存在则删除它, 如果类名不存在则添加它. 判断是否含有某个样式: hasClass() --- 判断元素中是否含有某个 class, 如果有, 则返回 true; 否则返回 false
  • 18. jQuery的DOM操作取得匹配元素的所有子元素组成的集合: children(). 该方法只考虑子元素而不考虑任何后代元素. 取得匹配元素后面紧邻的同辈元素的集合(但集合中只有一个元素): next() 取得匹配元素前面紧邻的同辈元素的集合(但集合中只有一个元素): prev() 取得匹配元素前后所有的同辈元素: siblings()
  • 19. jQuery事件(Event)jQuery 事件处理方法是 jQuery 中的核心函数。 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”(或“激发”)经常会被使用。 通常会把 jQuery 代码放到 部分的事件处理方法中: 单独文件中的函数 如果您的网站包含许多页面,并且您希望您的 jQuery 函数易于维护,那么请把您的 jQuery 函数放到独立的 .js 文件中。 当我们在教程中演示 jQuery 时,会将函数直接添加到 部分中。不过,把它们放到一个单独的文件中会更好,就像这样(通过 src 属性来引用文件):
  • 20. jQuery事件(Event)在页面加载完毕后, 浏览器会通过 JavaScript 为 DOM 元素添加事件. 在常规的 JavaScript 代码中, 通常使用 window.onload 方法, 在 jQuery 中使用$(document).ready() 方法. jQuery的写法则会使页面仅加载完DOM结构后就执行,即加载完html文档后,还没加载图像等其他文件就执行ready()函数,给图像添加“display:none”的样式,因此id为“loading”的图片不可能被显示。所以$(document). ready()比window.onload载入执行更快 . 在DOM文档载入后就执行,载入速度更快; 如果找不到DOM中的元素,能够自动容错; 在页面中多个地方使用ready()方法不会发生冲突
  • 21. jQuery事件(Event)对匹配的元素进行特定的事件绑定: bind() 移除事件unbind() 举例: 1.给某个图片增加click事件:$(‘img’).bind(‘click’,function(){}) 2.移除某按钮上的所有 click 事件: $(“btn”).unbind(“click”) 3.移除某按钮上的所有事件: $(“btn”).unbind(); 4.one(): 该方法可以为元素绑定处理函数. 当处理函数触发一次后, 立即被删除. 即在每个对象上, 事件处理函数只会被执行一次.
  • 22. jQuery事件(Event)jQuery 名称冲突 jQuery 使用 $ 符号作为 jQuery 的简介方式。 某些其他 JavaScript 库中的函数(比如 Prototype)同样使用 $ 符号。 jQuery 使用名为 noConflict() 的方法来解决该问题。 var jq=jQuery.noConflict(),帮助您使用自己的名称(比如 jq)来代替 $ 符号。
  • 23. jQuery AjaxAJAX是一种流行的B/S技术,包含三个要点: A:异步操作,即先加载后处理 J:Javascript脚本 X:XML,目前还出现了JSON jQuery为AJAX提供了两个层次的访问函数,以及6种状态事件: 高级函数: $.get(url,params,callback); $.post(url,params,callback); $.getJSON(); $.getScript(); load(url,params,callback); 低级函数: $.ajax(params) 状态事件: ajaxSuccess,ajaxError,ajaxComplete,ajaxSend,ajaxStart,ajaxStop
  • 24. jQuery & AjaxjQuery ajax请求
  • 25. jQuery&Ajaxload(url,[data],[callback]) Returns:jQuery包装集 Load方法能够载入远程html文件代码并插入到DOM中。 默认采用GET方式,如果传递了data参数则采用POST方式 load是最简单的Ajax函数, 但是使用具有局限性: 1. 它主要用于直接返回HTML的Ajax接口 2. load是一个jQuery包装集方法,需要在jQuery包装集上调用,并且会将返回的HTML加载到对象中, 即使设置了回调函数也还是会加载. 提示:我们要时刻注意浏览器缓存, 当使用GET方式时要添加时间戳参数 (new Date()).getTime() 来保证每次发送的URL不同, 可以避免浏览器缓存.
  • 26. jQuery&AjaxjQuery.get( url, [data], [callback], [type] ) Returns: XMLHttpRequest 说明: 通过远程 HTTP GET 请求载入信息。 这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。 其中data是返回的数据, testStatus表示状态码, 可能是如下值: "timeout","error","notmodified","success","parsererror" type参数是指data数据的类型, 可能是下面的值: "xml", "html", "script", "json", "jsonp", "text".默认为"html". jQuery.getJSON( url, [data], [callback] ) 方法就相当于 jQuery.get(url, [data],[callback], "json")
  • 27. jQuery&AjaxjQuery.post( url, [data], [callback], [type] ) Returns: XMLHttpRequest 说明: 通过远程 HTTP POST 请求载入信息。 这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。
  • 28. jQuery&AjaxjQuery.getJSON( url, [data], [callback] ) Returns: XMLHttpRequest 相当于: jQuery.get(url, [data],[callback], "json") 说明: 通过 HTTP GET 请求载入 JSON 数据。 getJSON函数仅仅将get函数的type参数设置为"JSON"而已. 在回调函数中获取的数据已经是按照JSON格式解析后的对象了.
  • 29. jQuery&AjaxjQuery.getScript( url, [callback] ) Returns: XMLHttpRequest 相当于: jQuery.get(url, null, [callback], "script") 说明: 通过 HTTP GET 请求载入并执行一个 JavaScript 文件。 jQuery 1.2 版本之前,getScript 只能调用同域 JS 文件。 1.2中,您可以跨域调用 JavaScript 文件。
  • 30. jQuery&Ajax如果您确实需要编写一些复杂的 Ajax 脚本,那么需要用到 $.ajax() 函数。您可以指定 xml、script、html 或者 json,jQuery 将自动为回调函数准备合适的结果,这样您便可以立即使用该结果。还可以指定 beforeSend、error、success 或者 complete 回调函数,向用户提供更多有关 Ajax 体验的反馈。此外,还有一些其它的参数可供使用,您可以使用它们设置 Ajax 请求的超时,也可以设置页面 “最近一次修改” 的状态。 $.ajax({ url: 'document.xml', type: 'GET', dataType: 'xml', timeout: 1000, error: function(){ alert('Error loading XML document'); }, success: function(xml){ // do something with xml } });
  • 31. jQuery&AjaxjQuery.ajaxSetup( options ) : 设置全局 AJAX 默认选项。 设置 AJAX 请求默认地址为 "/xmlhttp/",禁止触发全局 AJAX 事件,用 POST 代替默认 GET 方法。其后的 AJAX 请求不再设置任何选项参数。 jQuery 代码: $.ajaxSetup({ url: "/xmlhttp/", global: false, type: "POST" }); $.ajax({ data: myData }); serialize() 与 serializeArray() serialize() : 序列表表格内容为字符串。 serializeArray() : 序列化表格元素 (类似 '.serialize()' 方法) 返回 JSON 数据结构数据。
  • 32. jQuery pluginjQuery plugin开发: 1.类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法,jQuery的全局函数就是属于jQuery命名空间的函数。 2.对象级别的插件开发,即给jQuery对象添加方法。 jQuery为插件开发提供了两个方法,分别是: jQuery.fn.extend(object):给jQuery对象添加方法 jQuery.extend(object):为扩展jQuery类本身,为类添加新的方法。 jQuery plugin命名方式:jquery.*.*.js
  • 33. jQuery pluginjQuery plugin开发: 1.类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法,jQuery的全局函数就是属于jQuery命名空间的函数。 2.对象级别的插件开发,即给jQuery对象添加方法。 jQuery为插件开发提供了两个方法,分别是:jQuery jQuery.fn.extend(object):给jQuery对象添加方法jQuery jQuery.extend(object):为扩展jQuery类本身,为类添加新的方法。
  • 34. jQuery pluginjQuery.fn.extend(object) fn: jQuery.fn=jQuery.prototype={ init:function(selector,context){//…} }; jQuery.fn.extend(object),对jQuery.prototype进行扩展,就是为jQuery类添加成员函数,jQuery的实例可以使用这个成员函数。 Example: $.fn.extend({ alertWhileClick:function(){$(this).click(function(){ alert($(this).val()); })} }); $(“#input1”).alertWhileClick();
  • 35. jQuery pluginjQuery.extend(object) 就是为jQuery类添加类方法,我们可以理解为添加静态方法。 Example: $.extend({ add:function(a,b){ return a+b; } }); 这样就为jQuery添加了一个add的静态方法,之后就可以在引入jQuery的地方之间额使用这个类方法:$.add(3,4);//return 7
  • 36. jQuery学习资源http://jquery.com/ http://www.w3school.com.cn/jquery/index.asp http://developer.51cto.com/art/201005/202450.htm
  • 37. Questions Q&A
  • 38. The EndThank you!