• 1. Write Less, Do More. JQUERY简介 -------写更少的代码,做更多的事情。
  • 2. 1.JQUERY的概述1.1 JQUERY简介 jQuery由美国人John Resig于2006年初创建,至今已吸引了来自世界各地的众多javascript高手加入其team,包括来自德国的Jörn Zaeffere ,罗马尼亚的Stefan Petre等等。 jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互。 jQuery能够使用户的html页保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需定义id即可。
  • 3. 1.JQUERY的概述1.2 能做什么 程序员:简化javascript和ajax编程,能够使程序员从设计和书写繁杂的JS应用中解脱出来,将关注点转向功能需求而非实现细节上,从而提高项目的开发速度。 用户:改善了页面视觉效果,增强了与页面的交互性,体验更绚丽的网页物资。
  • 4. 1.JQUERY的概述1.3 主流的JavaScript框架 YUI Dojo mooTools Prototype jQuery More.. 性能测试:http://mootools.net/slickspeed/
  • 5. 1.JQUERY的概述1.4 JQUERY的特点 轻量级:经GZip压缩后传输的代码文件仅14KB,未经压缩传送的代码文件仅26KB 链式语法 :$("p.surprise").addClass("ohmy").show("slow"); CSS 1-3 选择器:支持CSS选择器选定DOM对象 跨浏览器:支持Internet Explorer 6+、Opera 9+、Firefox 1.5+、Safari 2+ 简单:较其它JS库更容易入门,中、英文档很齐全 易扩展: JQUERY UI 、 JQUERY FX –已经有很完善的基于JQUERY的用户界面库 和网页特效库
  • 6. 2.JQUERY的使用2.1 jQuery下载 当前版本1.3.1 官方网站下载:http://jquery.com/ 2.2 jQuery安装 在页面头部head中,添加js 2.3 VS2008中可以实现jQuery的智能提示 http://www.cnblogs.com/zhangronghua/archive/2008/10/15/1311400.html
  • 7. 3.JQUERY--基础3.1 页面载入 $(document).ready(callback); $(document).ready(function() {});简写$(function(){}); 绑定一个在DOM文档载入完成后执行的函数 同一个页面上可以多次使用 Demo
  • 8. 3.JQUERY--基础3.2 核心函数 $(expression,[context]) 接收一个包含 CSS 选择器的字符串,然后用这个字符串去匹配一组元素 jQuery 的核心功能都是通过这个函数实现的 $(html) 根据提供的原始 HTML 标记字符串,动态创建由 jQuery 对象包装的 DOM 元素
  • 9. 3.JQUERY--基础$(elements) 将一个或多个DOM元素转化为jQuery对象 注意是jQuery对象,而不是DOM对象。如果我想得到DOM对象呢?很简单,只需在其后跟一个索引值(如[0])—因为它得到的是一个对象数组,即可得到DOM对象。然后就可以使用innerHTML、innerText等DHTML方法和属性了。
  • 10. 3.JQUERY--基础3.3 选择器 返回jQuery对象 基本选择器 *, class,element, id, selector1, selector2等. 层级选择器 ancestor descendant, parent > child, prev + next , prev ` siblings 简单选择器 even, odd, eq[index], last, first等 内容选择器 contains[text], empty, parent, has[selector]等.
  • 11. 3.JQUERY--基础可见性选择器 hidden, visible. 属性选择器 [attribute *=value], [attribute =value], [attribute]等 子元素选择器 first-child, last-child, nth-child(index), only-child. 表单选择器 button, checkbox, file, hidden等. 表单对象属性选择器 checked, disabled, enabled, selected.
  • 12. 3.JQUERY--基础3.4 属性 attr(name) 取得第一个匹配元素的属性值 attr(properties) 将一个“名/值”形式的对象设置为所有匹配元素的属性 attr(key,value) 为所有匹配的元素设置一个属性值
  • 13. 3.JQUERY--基础3.5 class addClass(class) 为每个匹配的元素添加指定的class removeClass(class) 从所有匹配的元素中删除全部或者指定的class Demo
  • 14. 3.JQUERY--基础3.6 HTML html() 取得第一个匹配元素的html内容 html(val) 设置每一个匹配元素的html内容
  • 15. 3.JQUERY--基础3.7 文本 text()、text(val) 和HTML类似 Demo
  • 16. 3.JQUERY--基础3.8 值 val() 获得第一个匹配元素的当前值 val(val) 设置每一个匹配元素的值 Demo
  • 17. 3.JQUERY--基础3.9 DOM文档处理 内部插入 append(content), appendTo(content), prepend(content), prependTo(content). 外部插入 after(content), before(content), insertAfter(content), insertBefore(content). Demo
  • 18. 3.JQUERY--基础3.10 CSS css(properties) 把一个“名/值对”对象设置为所有匹配元素的样式属性 属性名包含 "-"的话,必须使用引号 css(name,value) 在所有匹配的元素中,设置一个样式属性的值 Demo
  • 19. 3.JQUERY--基础3.11 事件 页面载入事件 事件处理 bind , one , trigger, triggerHandler, unbind 交互处理 hover, toggle 事件 click, mouse event, keyboardevent等. Demo
  • 20. 3.JQUERY--基础3.12 效果 show() 显示隐藏的匹配元素 show(speed,[callback]) 以优雅的动画显示所有匹配的元素,并在显示完成后可选地触发一个回调函数 hide() 隐藏显示的元素
  • 21. 3.JQUERY--基础hide(speed,[callback]) 以优雅的动画隐藏所有匹配的元素,并在显示完成后可选地触发一个回调函数 toggle() 切换元素的可见状态 Demo
  • 22. 3.JQUERY--基础3.13 Ajax $.ajax(options) $.get(”search.do”,{id:1},rend); function rend(xml){ alert(xml); }(1)    $.post(”search.do”,{id:1},rend); function rend(xml){alert(xml);}(2)  $(”#msg”).ajaxStart(function(){this.html(”正在载入..”);});(3)    $(”#msg”).ajaxSuccess(function(){this.html(”加载完成!”); });(4)  通过 HTTP 请求加载远程数据 Demo
  • 23. 4.其它插件 官方插件网址 TerryLee Blog上的所做的240个jQuery插件索引 http://www.cssrain.cn/ 工具 可采用任意文本编辑器, VS2008中可以实现智能提示. Aptana Studio FireFox2 + FireBug1.05
  • 24. 4.参考网站jQuery官方网站 http://jquery.com jQuery 中文社区 http://bbs.jquery.org.cn 一个Blog(有不少教程和插件) http://www.cssrain.cn 很好的API查询站点 http://www.visualjquery.com/index.xml    240多个jQuery插件的列表 http://www.cnblogs.com/Terrylee/archive/2007/12/09/the-ultimate-jquery-plugin-list.html
  • 25. 09/1/4 Meteoric_cry 简是一种美德,懒是一种境界。Thanks!