• 1. jQuery 培训 The Write Less,Do More,Javascript Library 1
  • 2. jQuery概述1.1 基本概念 jQuery是一个轻量级javascript库 兼容CSS3,还兼容各种浏览器 使用户能更方便地处理HTML文档、事件、实现动画效果,并且方便地为网站提供Ajax交互2
  • 3. jQuery概述1.2 能做什么 以插件的形式持续地通过开发加入新的功能 获取页面的部分内容 修改页面的外观 修改页面的内容 在页面中响应用户的交互 给页面加上动画 无刷新返回服务器端的信息 还提供了改进基本的 JavaScript 结构,如迭代和数组操作3
  • 4. jQuery概述1.3 其他javascript库 Prototype YUI Dojo mooTools jQuery不会与全局命名空间冲突,简洁,只要花很少的时间去学习 性能测试: http://mootools.net/slickspeed4
  • 5. jQuery开始前的准备2.1 jQuery下载 当前版本1.2.3 官方网站下载:http://jquery.com/ 三种版本,Minified and Gzipped、Uncompressed、Packed 2.2 jQuery安装 在页面头部head中,添加js5
  • 6. jQuery基础3.1 页面载入 $(document).ready(callback) $(callback) (缩写) 绑定一个在DOM文档载入完成后执行的函数 同一个页面上可以多次使用 请确保在 元素的onload事件中没有注册函数,否则不会触发$(document).ready()事件6
  • 7. jQuery基础3.2 核心函数 这个函数接收一个包含CSS或基本的XPath选择符的字符串,然后用这个字符串去匹配一组元素。 jQuery的核心功能都是通过这个函数实现的。 jQuery中的一切都构建于这个函数之上,或者说都是在以某种方式使用这个函数。这个函数最基本的用法就是向它传递一个表达式(通常由CSS或XPath选择符组成),然后根据这个表达式来查询所有匹配的元素。 在默认情况下,$()查询的是当前HTML文档中的DOM元素。 返回值:jQuery 参数: expr (String): 用来查询用的字符串 context (Element|jQuery): (可选)作为上下文的DOM元素、文档或jQuery对象。 $(html) 根据提供的原始 HTML 标记字符串,动态创建由 jQuery 对象包装的 DOM 元素7
  • 8. jQuery基础$(elements) $(elements) 为一个或多个DOM元素捆绑jQuery功能。 这个函数也可以接收XML文档和Window对象(虽然它们不是DOM元素)作为有效的参数。 返回值: jQuery 参数: elements (Element|Array): 由jQuery对象封装的DOM元素 8
  • 9. jQuery基础3.3 选择器 返回jQuery对象 #id 根据给定的ID匹配一个元素 element 根据给定的元素名匹配所有元素9
  • 10. jQuery基础.class 根据给定的class名匹配所有元素 * 匹配所有元素 selector1,selector2,selectorN 将每一个选择器匹配到的元素合并后一起返回10
  • 11. jQuery基础3.4 属性 attr(name) 取得第一个匹配元素的属性值 attr(properties) 将一个“名/值”形式的对象设置为所有匹配元素的属性 attr(key,value) 为所有匹配的元素设置一个属性值11
  • 12. jQuery基础3.5 class addClass(class) 为每个匹配的元素添加指定的class removeClass(class) 从所有匹配的元素中删除全部或者指定的class12
  • 13. jQuery基础3.6 HTML html() 取得第一个匹配元素的html内容 html(val) 设置每一个匹配元素的html内容 3.7 文本 text()、text(val) 和HTML类似13
  • 14. jQuery基础3.8 值 val() 获得第一个匹配元素的当前值 val(val) 设置每一个匹配元素的值14
  • 15. jQuery基础3.9 内部插入 append(content) 向每个匹配的元素内部追加内容 appendTo(content) 把所有匹配的元素追加到另一个、指定的元素元素集合中15
  • 16. jQuery基础3.10 CSS css(properties) 把一个“名/值对”对象设置为所有匹配元素的样式属性 属性名包含 "-"的话,必须使用引号 css(name,value) 在所有匹配的元素中,设置一个样式属性的值16
  • 17. jQuery基础3.11 事件 click(fn) 在每一个匹配元素的click事件中绑定一个处理函数17
  • 18. jQuery基础3.12 效果 show() 显示隐藏的匹配元素 show(speed,[callback]) 以优雅的动画显示所有匹配的元素,并在显示完成后可选地触发一个回调函数 hide() 隐藏显示的元素18
  • 19. jQuery基础hide(speed,[callback]) 以优雅的动画隐藏所有匹配的元素,并在显示完成后可选地触发一个回调函数 toggle() 切换元素的可见状态 19
  • 20. jQuery基础3.13 Ajax $.ajax(options) 通过 HTTP 请求加载远程数据 3.14 综合应用 表格背景色的交替显示,鼠标悬停,行背景变色20
  • 21. 插件机制jQuery.fn.extend(object) 扩展 jQuery 元素集来提供新的方法,可一次扩充多个 jQuery.extend(object) 扩展jQuery对象本身 jQuery.fn.jpage = function([parameter]){...} 单独扩充一个插件 jpage是插件名21
  • 22. jQuery Q&A$ = jQuery $是jQuery的别名,返回一个jQuery对象 命名冲突 jQuery(function($){…}),内部的 jQuery 代码依然可以安全的使用 $ 作为别名,也可定义任意别名,如jQuery (function($){…}) 连锁方法 可以对一个jQuery对象连续调用多个不同的jQuery方法22
  • 23. jQuery Q&AjQuery对象与dom对象的转换 只有jQuery对象才能使用jQuery定义的方法 普通的dom对象一般可以通过$()转换成jQuery对象 由于jquery对象本身是一个集合。所以如果jQuery对象要转换为dom对象则必须取出其中的某一项,一般可通过索引取出 以下几种方式都可以: $("#msg").html(); $("#msg")[0].innerHTML; $("#msg").eq(0)[0].innerHTML; $("#msg").get(0).innerHTML; 23
  • 24. 其他插件 jquery.jdMenu 多级菜单 ui.tabs 选项卡 工具 EditPlus剪辑文本 DreamWeaver CS3插件 Aptana Studio FireFox2 + FireBug1.05 24
  • 25. 参考网站jQuery官方网站 http://jquery.com jQuery 中文社区 http://bbs.jquery.org.cn 一个Blog(有不少教程和插件) http://www.cssrain.cn25
  • 26. 谢 谢 !26