Jquery  前端界面组件 日期: 2009.10.09 ------- 写更少的代码,做更多的事情。
主 题 Jquery 语法与插件 2 Jquery 案例演示 3 Jquery 概述 1
JQUERY  概述 <ul><li>1.1 JQUERY 简介 </li></ul><ul><li>jQuery 由美国人 John Resig 于 2006 年初创建,至今已吸引了来自世界各地的众多 javascript 高手加入其 tea...
<ul><li>1.2  能做什么 </li></ul><ul><li>程序员:简化 javascript 和 ajax 编程,能够使程序员从设计和书写繁杂的 JS 应用中解脱出来,将关注点转向功能需求和业务需求上而非 js 实现细节上,从而提...
<ul><li>1.3 JQUERY 的特点 </li></ul><ul><ul><li>轻量级:经 GZip 压缩后传输的代码文件仅 14KB ,未经压缩传送的代码文件仅 26KB   </li></ul></ul><ul><ul><li>链...
JQUERY  概述 1.4  主流的 JavaScript 框架 ※  YUI ※  Dojo ※  mooTools ※  Prototype ※  jQuery ※  More.. 性能测试: http://mootools.net/sl...
JQUERY  概述
主 题 Jquery 简介 1 Jquery 案例演示 3 Jquery 语法与插件 2
二、  Jquery 语法与插件 <ul><li>2.1 jQuery 下载与安装 </li></ul><ul><ul><li>当前版本 1.3.2 </li></ul></ul><ul><ul><li>官方网站下载: http:// jque...
二、  Jquery 语法与插件 <ul><li>2.2  页面载入 </li></ul><ul><li>$(document).ready(callback); </li></ul><ul><li>$(document).ready(func...
二、  Jquery 语法与插件 <ul><li>2.3  核心函数 </li></ul><ul><ul><li>$(expression,[context]) </li></ul></ul><ul><li>接收一个包含  CSS  选择器的字...
二、 JQUERY  语法及其使用 <ul><ul><li>$(elements) </li></ul></ul><ul><li>将一个或多个 DOM 元素转化为 jQuery 对象  注意是 jQuery 对象,而 不是 DOM 对象。如果我...
二、  Jquery 语法与插件 <ul><li>2.4  选择器 , 返 回 JQuery 对象 </li></ul><ul><ul><li>基本选择器 </li></ul></ul><ul><ul><li>  *, class,elemen...
二、 JQUERY  语法及其插件 <ul><ul><li>可见性选择器 </li></ul></ul><ul><ul><li>  hidden, visible. </li></ul></ul><ul><ul><li>Demo  演示 </l...
二、 JQUERY  语法及其使用 <ul><li>2.5  属性 </li></ul><ul><ul><li>attr(name) </li></ul></ul><ul><li>取得第一个匹配元素的属性值 </li></ul><ul><ul>...
二、 JQUERY  语法及其使用 <ul><li>2.6 class </li></ul><ul><ul><li>addClass(class) </li></ul></ul><ul><ul><li>  为每个匹配的元素添加指定的 class...
二、 JQUERY  语法及其使用 <ul><li>2.7  HTML 、 TEXT 、 VAL </li></ul><ul><ul><li>Html() </li></ul></ul><ul><ul><li>取得第一个匹配元素的 html 内...
二、 JQUERY  语法及其使用 <ul><ul><li>Val() </li></ul></ul><ul><ul><li>获得第一个匹配元素的当前值 </li></ul></ul><ul><ul><li>Val(val) </li></ul...
二、 JQUERY  语法及其使用 <ul><li>2.8 DOM 文档处理 </li></ul><ul><ul><li>内部插入 </li></ul></ul><ul><ul><li>append(content), appendTo(con...
二、 JQUERY  语法及其使用 <ul><li>2.9  效果 </li></ul><ul><ul><li>Show() </li></ul></ul><ul><ul><li>显示隐藏的匹配元素 </li></ul></ul><ul><ul...
主 题 <ul><li>2. 10 Ajax  通过  HTTP  请求加载远程数据 </li></ul><ul><ul><li>  $. ajax(options ) </li></ul></ul><ul><ul><li>  $.get(”s...
主 题 <ul><li>2. 11  插件 </li></ul><ul><ul><li>  官方插件网址 </li></ul></ul><ul><ul><li>http:// www.cssrain.cn / </li></ul></ul><u...
主 题 Jquery   概述 1 Jquery 语法与插件 2 Jquery 案例演示 3
主 题 案例演示
主 题 Jquery   概述 1 Jquery 语法与插件 2 Jquery 案例演示 3
<ul><li>Thank You ! </li></ul>
Upcoming SlideShare
Loading in...5
×

A

835

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
835
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
9
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

A

  1. 1. Jquery 前端界面组件 日期: 2009.10.09 ------- 写更少的代码,做更多的事情。
  2. 2. 主 题 Jquery 语法与插件 2 Jquery 案例演示 3 Jquery 概述 1
  3. 3. JQUERY 概述 <ul><li>1.1 JQUERY 简介 </li></ul><ul><li>jQuery 由美国人 John Resig 于 2006 年初创建,至今已吸引了来自世界各地的众多 javascript 高手加入其 team ,包括来自德国的 J&ouml;rn Zaeffere ,罗马尼亚的 Stefan Petre 等等。 </li></ul><ul><li>jQuery 是一个快速的,简洁的 javaScript 库,使用户能更方便地处理 HTML documents 、 events 、实现动画效果,并且方便地为网站提供 AJAX 交互。 </li></ul><ul><li>jQuery 能够使用户的 html 页保持代码和 html 内容分离,也就是说,不用再在 html 里面插入一堆 js 来调用命令了,只需定义 id 即可。 </li></ul>
  4. 4. <ul><li>1.2 能做什么 </li></ul><ul><li>程序员:简化 javascript 和 ajax 编程,能够使程序员从设计和书写繁杂的 JS 应用中解脱出来,将关注点转向功能需求和业务需求上而非 js 实现细节上,从而提高项目的开发速度。 </li></ul><ul><li>用户:改善了页面视觉效果,增强了与页面的交互性,体验更绚丽的网页物资,用户体现效果好。 </li></ul>JQUERY 概述
  5. 5. <ul><li>1.3 JQUERY 的特点 </li></ul><ul><ul><li>轻量级:经 GZip 压缩后传输的代码文件仅 14KB ,未经压缩传送的代码文件仅 26KB </li></ul></ul><ul><ul><li>链式语法 : $(&quot;p.surprise&quot;).addClass(&quot;ohmy&quot;).show(&quot;slow&quot;); </li></ul></ul><ul><ul><li>CSS 1-3 选择器:支持 CSS 选择器选定 DOM 对象 </li></ul></ul><ul><ul><li>跨浏览器:支持 Internet Explorer 6+ 、 Opera 9+ 、 Firefox 1.5+ 、 Safari 2+ </li></ul></ul><ul><ul><li>简单:较其它 JS 库更容易入门,中、英文档很齐全 </li></ul></ul><ul><ul><li>易扩展: JQUERY UI 、 JQUERY FX – 已经有很完善的基于 JQUERY 的用户界面库 和网页特效库 </li></ul></ul>JQUERY 概述
  6. 6. JQUERY 概述 1.4 主流的 JavaScript 框架 ※ YUI ※ Dojo ※ mooTools ※ Prototype ※ jQuery ※ More.. 性能测试: http://mootools.net/slickspeed/ , 我们做个对比 , 结果如下:
  7. 7. JQUERY 概述
  8. 8. 主 题 Jquery 简介 1 Jquery 案例演示 3 Jquery 语法与插件 2
  9. 9. 二、 Jquery 语法与插件 <ul><li>2.1 jQuery 下载与安装 </li></ul><ul><ul><li>当前版本 1.3.2 </li></ul></ul><ul><ul><li>官方网站下载: http:// jquery.com / </li></ul></ul><ul><ul><li>jQuery 的安装 </li></ul></ul><ul><li>在页面头部 head 中,添加如下 js 文件 </li></ul><ul><li><script type=&quot;text/javascript&quot; src=&quot;jquery.js&quot;></script> </li></ul><ul><ul><li>在 Eclipse 中添加 jquery 的智能提示功能 </li></ul></ul><ul><li> http://wxinpeng.javaeye.com/blog/458372 </li></ul>
  10. 10. 二、 Jquery 语法与插件 <ul><li>2.2 页面载入 </li></ul><ul><li>$(document).ready(callback); </li></ul><ul><li>$(document).ready(function() {….});  简写 $(function(){…..}); </li></ul><ul><ul><li>绑定一个在 DOM 文档载入完成后执行的函数 </li></ul></ul><ul><ul><li>同一个页面上可以多次使用 </li></ul></ul><ul><ul><li>Demo 演示 </li></ul></ul>
  11. 11. 二、 Jquery 语法与插件 <ul><li>2.3 核心函数 </li></ul><ul><ul><li>$(expression,[context]) </li></ul></ul><ul><li>接收一个包含 CSS 选择器的字符串,然后用这个字符 串去匹配 一组元素 ,jQuery 的核心功能都是通过这个函数实现的 </li></ul><ul><li>Demo 演示 </li></ul><ul><ul><li>$(html) </li></ul></ul><ul><li>根据提供的原始 HTML 标记字符串,动态创建由 jQuery 对象包装 的 DOM 元素 </li></ul><ul><li>Demo 演示 </li></ul>
  12. 12. 二、 JQUERY 语法及其使用 <ul><ul><li>$(elements) </li></ul></ul><ul><li>将一个或多个 DOM 元素转化为 jQuery 对象 注意是 jQuery 对象,而 不是 DOM 对象。如果我想得到 DOM 对象呢?很简单,只需在其后 跟一个索引值(如 [0] )—因为它得到的是一个对象数组,即可得到 DOM 对象。然后就可以使用 innerHTML 、 innerText 等 DHTML 方法 和属性了。 </li></ul><ul><li>Demo 演示 </li></ul>
  13. 13. 二、 Jquery 语法与插件 <ul><li>2.4 选择器 , 返 回 JQuery 对象 </li></ul><ul><ul><li>基本选择器 </li></ul></ul><ul><ul><li> *, class,element, id, selector1, selector2 等 . </li></ul></ul><ul><ul><li>Demo 演示 </li></ul></ul><ul><ul><li>层级选择器 </li></ul></ul><ul><ul><li> ancestor descendant, parent > child, prev + next , prev ` siblings </li></ul></ul><ul><ul><li>Demo 演示 </li></ul></ul><ul><ul><li>简单选择器 </li></ul></ul><ul><ul><li> even, odd, eq[index], last, first 等 </li></ul></ul><ul><ul><li>Demo 演示 </li></ul></ul><ul><ul><li>内容选择器 </li></ul></ul><ul><ul><li>contains[text], empty, parent, has[selector] 等 . </li></ul></ul><ul><ul><li> Demo 演示 </li></ul></ul>
  14. 14. 二、 JQUERY 语法及其插件 <ul><ul><li>可见性选择器 </li></ul></ul><ul><ul><li> hidden, visible. </li></ul></ul><ul><ul><li>Demo 演示 </li></ul></ul><ul><ul><li>属性选择器 </li></ul></ul><ul><ul><li> [attribute *=value], [attribute =value], [attribute] 等 </li></ul></ul><ul><ul><li>Demo 演示 </li></ul></ul><ul><ul><li>子元素选择器 </li></ul></ul><ul><ul><li> first-child, last-child, nth-child(index), only-child. </li></ul></ul><ul><ul><li>Demo 演示 </li></ul></ul><ul><ul><li>表单选择器 </li></ul></ul><ul><ul><li> button, checkbox, file, hidden 等 . </li></ul></ul><ul><ul><li>表单对象属性选择器 </li></ul></ul><ul><ul><li> checked, disabled, enabled, selected </li></ul></ul>
  15. 15. 二、 JQUERY 语法及其使用 <ul><li>2.5 属性 </li></ul><ul><ul><li>attr(name) </li></ul></ul><ul><li>取得第一个匹配元素的属性值 </li></ul><ul><ul><li>attr(properties) </li></ul></ul><ul><li>将一个“名 / 值”形式的对象设置为所有匹配元素的属性 </li></ul><ul><ul><li>attr(key,value) </li></ul></ul><ul><li>为所有匹配的元素设置一个属性值 </li></ul><ul><li>Demo 演示 </li></ul>
  16. 16. 二、 JQUERY 语法及其使用 <ul><li>2.6 class </li></ul><ul><ul><li>addClass(class) </li></ul></ul><ul><ul><li> 为每个匹配的元素添加指定的 class </li></ul></ul><ul><ul><li>removeClass(class) </li></ul></ul><ul><ul><li> 从所有匹配的元素中删除全部或者指定的 class </li></ul></ul><ul><li>Demo 演示 </li></ul>
  17. 17. 二、 JQUERY 语法及其使用 <ul><li>2.7 HTML 、 TEXT 、 VAL </li></ul><ul><ul><li>Html() </li></ul></ul><ul><ul><li>取得第一个匹配元素的 html 内容 </li></ul></ul><ul><ul><li>Html(val) </li></ul></ul><ul><ul><li>设置每一个匹配元素的 html 内容 </li></ul></ul><ul><ul><li>text() </li></ul></ul><ul><ul><li>取得第一个匹配元素的 text( 文本 ) 内容 </li></ul></ul><ul><ul><li>text(val) </li></ul></ul><ul><ul><li>设置每一个匹配元素的 text 内容 </li></ul></ul><ul><ul><li>Demo 演示 </li></ul></ul>
  18. 18. 二、 JQUERY 语法及其使用 <ul><ul><li>Val() </li></ul></ul><ul><ul><li>获得第一个匹配元素的当前值 </li></ul></ul><ul><ul><li>Val(val) </li></ul></ul><ul><ul><li>设置每一个匹配元素的值 </li></ul></ul><ul><ul><li>Demo 演示 </li></ul></ul>
  19. 19. 二、 JQUERY 语法及其使用 <ul><li>2.8 DOM 文档处理 </li></ul><ul><ul><li>内部插入 </li></ul></ul><ul><ul><li>append(content), appendTo(content), prepend(content), prependTo(content). </li></ul></ul><ul><ul><li>外部插入 </li></ul></ul><ul><ul><li>after(content), before(content), insertAfter(content), insertBefore(content). </li></ul></ul><ul><ul><li>Demo 演示 </li></ul></ul>
  20. 20. 二、 JQUERY 语法及其使用 <ul><li>2.9 效果 </li></ul><ul><ul><li>Show() </li></ul></ul><ul><ul><li>显示隐藏的匹配元素 </li></ul></ul><ul><ul><li>Show(speed,[callback]) </li></ul></ul><ul><ul><li>以优雅的动画显示所有匹配的元素,并在显示完成后可选地触发一个回调函数 </li></ul></ul><ul><ul><li>Hide() </li></ul></ul><ul><ul><li>隐藏显示的元素 </li></ul></ul><ul><ul><li>Hide (speed,[callback]) </li></ul></ul><ul><ul><li>以优雅的动画显示所有匹配的元素,并在隐藏完成后可选地触发一个回调函数 </li></ul></ul><ul><ul><li>Demo 演示 </li></ul></ul>
  21. 21. 主 题 <ul><li>2. 10 Ajax 通过 HTTP 请求加载远程数据 </li></ul><ul><ul><li>  $. ajax(options ) </li></ul></ul><ul><ul><li>  $.get(”search.do”,{id:1},rend); function rend(xml){ alert(xml); }(1)  </li></ul></ul><ul><ul><li>$.post(”search.do”,{id:1},rend); function rend(xml){alert(xml);}(2)  </li></ul></ul><ul><ul><li>$(”#msg”).ajaxStart(function(){this.html(” 正在载入 ..”);});(3)    </li></ul></ul><ul><ul><li>$(”#msg”).ajaxSuccess(function(){this.html(” 加载完成!” ); });(4)  </li></ul></ul><ul><ul><li>Demo 演示 </li></ul></ul>
  22. 22. 主 题 <ul><li>2. 11 插件 </li></ul><ul><ul><li>  官方插件网址 </li></ul></ul><ul><ul><li>http:// www.cssrain.cn / </li></ul></ul><ul><li>2.12 工具 </li></ul><ul><ul><li>  在 Eclipse 中添加 jquery 的智能提示功能 http://wxinpeng.javaeye.com/blog/458372 </li></ul></ul><ul><ul><li>jQuery 中文社区 </li></ul></ul><ul><ul><li> http:// bbs.jquery.org.cn </li></ul></ul><ul><ul><li>jQuery 官方网站 </li></ul></ul><ul><ul><li> http:// jquery.com </li></ul></ul><ul><ul><li>很好的 API 查询站点 </li></ul></ul><ul><ul><ul><li>http://www.visualjquery.com/index.xml </li></ul></ul></ul>
  23. 23. 主 题 Jquery 概述 1 Jquery 语法与插件 2 Jquery 案例演示 3
  24. 24. 主 题 案例演示
  25. 25. 主 题 Jquery 概述 1 Jquery 语法与插件 2 Jquery 案例演示 3
  26. 26. <ul><li>Thank You ! </li></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×