1 / 43

jQuery

jQuery. jQuery. jQuery. jQuery. 所有网站中： 每 10 个，就有 6 个使用 jQuery 使用 工具库的 网站中： 每 10 个，就有 9 个使用 jQuery. 什么是 jQuery. jQuery 是 javascript 一个封装得非常好的类 ，封 装 了 jQuery 的一系列 方法。 比如： $( " # btn " ) = jQuery 类的实例 $("# btn ").show () = jQuery 方法. jQuery 优点.

xerxes-dominguez
Download Presentation

jQuery

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. jQuery

  2. jQuery

  3. jQuery

  4. jQuery 所有网站中： 每 10个，就有 6个使用 jQuery 使用工具库的网站中： 每 10个，就有 9个使用 jQuery

  5. 什么是 jQuery jQuery 是 javascript一个封装得非常好的类，封 装了 jQuery 的一系列方法。 比如： $("#btn") = jQuery 类的实例 $("#btn").show() = jQuery 方法

  6. jQuery优点 • write less, do more / 简洁易用 • 兼容主流浏览器（ IE, FF, Safari, Chrome…） • 插件丰富（OsChina：1000+） • 开源免费 • 文档详尽

  7. jQuery使用准备 在需要使用 jQuery 的页面中引入 jQuery 的 js文 件即可。例如： <script type="text/javascript"src="js/jquery.js"> </script> 引入之后便可在页面的任意 js区域使用 jQuery 提 供的语法。

  8. jQuery基本语法 jQuery 使用“$()” 通过元素的 id、class、元素名 以及元素的层级关系等方式引用元素，并返回 jQuery 对象，只有 jQuery 对象才能使用 jQuery 定义的 方法。 jQuery 不能直接调用 dom定义的方法。

  9. jQuery 核心功能

  10. 核心功能选择网页元素 • $(document) //整个文档对象 • $('#myId') //ID为myId的网页元素 • $('div.myClass') // class为myClass的div • $('a:first') //网页中第一个a元素 • $('tr:odd') //选择表格的奇数行 • ……

  11. 核心功能改变选择结果集 • $('div').next('p'); //div后面的第一个p元素 • $('div').parent(); //div元素的父元素 • $('div').closest('form'); //离div最近form • $('div').children(); //div的所有子元素 • $('div').siblings(); //div的同级元素 • ……

  12. 核心功能元素取赋值 • 使用同一个函数，来完成取值（getter）和赋值 • （setter），即“取值器”与“赋值器”合一。 • 取出或设置 text 内容： • .text() / .text("设置内容") • 取出或设置元素的属性值： • .attr() / .attr("width","180")

  13. 核心功能元素移动 • 第一种方法是使用 .insertAfter()，把 div 元素 • 移动 p 元素后面： • $('div').insertAfter($('p')); • 第二种方法是使用 .after()，把 p 元素加到 div • 元素前面： • $('p').after($('div'));

  14. 核心功能元素增删 • 删除元素使用：.remove() • 清空元素内容：.empty() • 创建新元素：.append()

  15. 核心功能链式操作 • 在 jQuery 中，一切对象皆为 jQuery，任何扩展的 • 方法/功能必须按照约定返回自身（jQuery 对象）， • 因此许多功能都能通过追加“.”操作一步到位。 • $('div').find('h3').eq(2).html('Hello'); • $('div') //找到div元素 • .find('h3') //选择其中的h3元素 • .eq(2) //选择第3个h3元素 • .html('Hello'); //将它的内容改为Hello

  16. 核心功能事件操作 • 将事件直接绑定在网页元素之上： • .blur() 表单元素失去焦点。 • .change() 表单元素的值发生变化 • .click() 鼠标单击 • .dblclick() 鼠标双击 • .ready() DOM加载完成 • .unload() 用户离开页面

  17. 核心功能工具方法 • 提供与元素无关的工具方法： • $.each() 遍历一个数组或对象 • $.inArray() 返回值在数组中的索引位置 • $.trim() 去除字符串两端的空格 • $.isEmptyObject() 判断某个对象是否为空 • $.support() 判断浏览器是否支持某个特性 • ……

  18. 核心功能特效 • 简单方法实现动态特效： • .fadeIn() 淡入 • .fadeOut() 淡出 • .fadeTo() 调整透明度 • .hide() 隐藏元素 • .show() 显示元素 • ……

  19. jQuery 插件编写

  20. 核心功能插件编写 类级别的插件开发。即给 jQuery 添加新的全局函数 ，相当于给 jQuery 类本身添加方法： jQuery.extend(object);

  21. 核心功能插件编写 对象级别的插件开发，即给 jQuery 对象添加方法： jQuery.fn.extend(object);

  22. 核心功能插件编写示例 $.fn.extend({ alertWhileClick:function(){ $(this).click(function(){ alert($(this).val()); }); } }); $("#input1").alertWhileClick();

  23. 核心功能命名空间 jQuery.myPlugin = { foo:function() { alert('This is a test.'); }, bar:function(param) { alert('This takes a parameter.'); } };

  24. 核心功能命名空间 • 调用时采用的方法： • $.myPlugin.foo(); • $.myPlugin.bar('baz'); • jQuery 的全局函数就是属于 jQuery 命名空间 • 的函数

  25. 核心功能类库冲突 当引用的其他类库也定义了“$”方法，如果 同时把这些内容放在一起就会引起变量方法定 义冲突，jQuery 对此专门提供了方法用于解决 此问题。

  26. 核心功能解决类库冲突 使用 jQuery 中的 jQuery.noConflict(); 即可把 变量 $ 的控制权让渡给第一个实现它的那个库或 之前自定义的 $ 方法。 之后应用 jQuery 的时候只要将所有的 $ 换成 jQuery 即可，如原来引用对象方法 $('#msg') 改为 jQuery('#msg')。

  27. jQuery 最佳实践

  28. 最佳实践使用最新版本

  29. 最佳实践使用最新版本 • 2013年4月18日 jQuery 2.0正式版发布： • 不再支持IE 6/7/8 • 更轻更快：2.0版本文件与1.9.1相比小了12% • jQuery 2.0 API完全兼容jQuery 1.9 API • jQuery 团队将同时支持 1.x / 2.x，jQuery 1.9 会继 • 续支持 IE 6/7/8。

  30. 最佳实践用对选择器

  31. 最佳实践用对选择器 • 最快：id选择器和元素标签选择器 • jQuery 内部会自动调用浏览器的原生方法：getElementById() • 较慢：class选择器 • IE5-IE8 都没有部署这个方法，所以这个选择器在IE中会相当慢 • 最慢：伪类选择器和属性选择器 • 浏览器没有针对它们的原生方法

  32. 最佳实践不要过度使用 • NO: • $(this).attr('id') • YES: • this.id

  33. 最佳实践做好缓存 • NO: • jQuery('#top').find('p.classA'); • jQuery('#top').find('p.classB'); • YES: • varcached = jQuery('#top'); • cached.find('p.classA'); • cached.find('p.classB');

  34. 最佳实践使用链式写法 • $('div').find('h3').eq(2).html('Hello'); • 采用链式写法时，jQuery自动缓存每一步的结果， • 因此比非链式写法要快。根据测试，链式写法比 • （不使用缓存的）非链式写法，大约快了25%。

  35. 最佳实践事件委托处理 比如，有一个表格（table元素），里面有 100 个格子（td元素），现在要求在每个格子上面绑 定一个点击事件（click），请问是否需要将下面 的命令执行 100 次？ $("td").on("click", function(){ $(this).toggleClass("click"); });

  36. 最佳实践事件委托处理 我们只要把这个事件绑定在 table 元素上面就可以 了，因为 td 元素发生点击事件之后，这个事件会 “冒泡”到父元素 table 上面，从而被监听到。 $("table").on("click", "td", function(){ $(this).toggleClass("click"); });

  37. 最佳实践事件委托处理 比较： $("td").on("click", function(){ $(this).toggleClass("click"); }); $("table").on("click", "td", function(){ $(this).toggleClass("click"); });

  38. 最佳实践选择最短作用域链 读取变量的时候，先在当前作用域寻找该变量，如 果找不到，就前往上一层的作用域寻找该变量。这 样的设计，使得读取局部变量比读取全局变量快得 多。

  39. 最佳实践选择最短作用域链 NO: vara = 0; function x(){ a += 1; } YES: function y(){ vara = 0; a += 1; }

  40. jQuery扩展阅读 jQuery 基金下其他项目： • i2shopping 使用的部分 jQuery 插件： • jBox • Bgiframe • AjaxQueue

  41. jQuery THANKS! 武良呈

  42. jQuery 扩展资料 jQuery1.8.3 api文档

  43. jQuery 扩展资料 jQuery 入门学习站点： http://www.w3school.com.cn/jquery/index.asp jQuery 官网： http://jquery.com jQuery 官方 API 文档： http://api.jquery.com

More Related