A
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,174
On Slideshare
1,174
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
8
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Jquery 前端界面组件 日期: 2009.10.09 ------- 写更少的代码,做更多的事情。
  • 2. 主 题 Jquery 语法与插件 2 Jquery 案例演示 3 Jquery 概述 1
  • 3. 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 即可。
  • 4.
    • 1.2 能做什么
    • 程序员:简化 javascript 和 ajax 编程,能够使程序员从设计和书写繁杂的 JS 应用中解脱出来,将关注点转向功能需求和业务需求上而非 js 实现细节上,从而提高项目的开发速度。
    • 用户:改善了页面视觉效果,增强了与页面的交互性,体验更绚丽的网页物资,用户体现效果好。
    JQUERY 概述
  • 5.
    • 1.3 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 的用户界面库 和网页特效库
    JQUERY 概述
  • 6. JQUERY 概述 1.4 主流的 JavaScript 框架 ※ YUI ※ Dojo ※ mooTools ※ Prototype ※ jQuery ※ More.. 性能测试: http://mootools.net/slickspeed/ , 我们做个对比 , 结果如下:
  • 7. JQUERY 概述
  • 8. 主 题 Jquery 简介 1 Jquery 案例演示 3 Jquery 语法与插件 2
  • 9. 二、 Jquery 语法与插件
    • 2.1 jQuery 下载与安装
      • 当前版本 1.3.2
      • 官方网站下载: http:// jquery.com /
      • jQuery 的安装
    • 在页面头部 head 中,添加如下 js 文件
    • <script type=&quot;text/javascript&quot; src=&quot;jquery.js&quot;></script>
      • 在 Eclipse 中添加 jquery 的智能提示功能
    • http://wxinpeng.javaeye.com/blog/458372
  • 10. 二、 Jquery 语法与插件
    • 2.2 页面载入
    • $(document).ready(callback);
    • $(document).ready(function() {….});  简写 $(function(){…..});
      • 绑定一个在 DOM 文档载入完成后执行的函数
      • 同一个页面上可以多次使用
      • Demo 演示
  • 11. 二、 Jquery 语法与插件
    • 2.3 核心函数
      • $(expression,[context])
    • 接收一个包含 CSS 选择器的字符串,然后用这个字符 串去匹配 一组元素 ,jQuery 的核心功能都是通过这个函数实现的
    • Demo 演示
      • $(html)
    • 根据提供的原始 HTML 标记字符串,动态创建由 jQuery 对象包装 的 DOM 元素
    • Demo 演示
  • 12. 二、 JQUERY 语法及其使用
      • $(elements)
    • 将一个或多个 DOM 元素转化为 jQuery 对象 注意是 jQuery 对象,而 不是 DOM 对象。如果我想得到 DOM 对象呢?很简单,只需在其后 跟一个索引值(如 [0] )—因为它得到的是一个对象数组,即可得到 DOM 对象。然后就可以使用 innerHTML 、 innerText 等 DHTML 方法 和属性了。
    • Demo 演示
  • 13. 二、 Jquery 语法与插件
    • 2.4 选择器 , 返 回 JQuery 对象
      • 基本选择器
      • *, class,element, id, selector1, selector2 等 .
      • Demo 演示
      • 层级选择器
      • ancestor descendant, parent > child, prev + next , prev ` siblings
      • Demo 演示
      • 简单选择器
      • even, odd, eq[index], last, first 等
      • Demo 演示
      • 内容选择器
      • contains[text], empty, parent, has[selector] 等 .
      • Demo 演示
  • 14. 二、 JQUERY 语法及其插件
      • 可见性选择器
      • hidden, visible.
      • Demo 演示
      • 属性选择器
      • [attribute *=value], [attribute =value], [attribute] 等
      • Demo 演示
      • 子元素选择器
      • first-child, last-child, nth-child(index), only-child.
      • Demo 演示
      • 表单选择器
      • button, checkbox, file, hidden 等 .
      • 表单对象属性选择器
      • checked, disabled, enabled, selected
  • 15. 二、 JQUERY 语法及其使用
    • 2.5 属性
      • attr(name)
    • 取得第一个匹配元素的属性值
      • attr(properties)
    • 将一个“名 / 值”形式的对象设置为所有匹配元素的属性
      • attr(key,value)
    • 为所有匹配的元素设置一个属性值
    • Demo 演示
  • 16. 二、 JQUERY 语法及其使用
    • 2.6 class
      • addClass(class)
      • 为每个匹配的元素添加指定的 class
      • removeClass(class)
      • 从所有匹配的元素中删除全部或者指定的 class
    • Demo 演示
  • 17. 二、 JQUERY 语法及其使用
    • 2.7 HTML 、 TEXT 、 VAL
      • Html()
      • 取得第一个匹配元素的 html 内容
      • Html(val)
      • 设置每一个匹配元素的 html 内容
      • text()
      • 取得第一个匹配元素的 text( 文本 ) 内容
      • text(val)
      • 设置每一个匹配元素的 text 内容
      • Demo 演示
  • 18. 二、 JQUERY 语法及其使用
      • Val()
      • 获得第一个匹配元素的当前值
      • Val(val)
      • 设置每一个匹配元素的值
      • Demo 演示
  • 19. 二、 JQUERY 语法及其使用
    • 2.8 DOM 文档处理
      • 内部插入
      • append(content), appendTo(content), prepend(content), prependTo(content).
      • 外部插入
      • after(content), before(content), insertAfter(content), insertBefore(content).
      • Demo 演示
  • 20. 二、 JQUERY 语法及其使用
    • 2.9 效果
      • Show()
      • 显示隐藏的匹配元素
      • Show(speed,[callback])
      • 以优雅的动画显示所有匹配的元素,并在显示完成后可选地触发一个回调函数
      • Hide()
      • 隐藏显示的元素
      • Hide (speed,[callback])
      • 以优雅的动画显示所有匹配的元素,并在隐藏完成后可选地触发一个回调函数
      • Demo 演示
  • 21. 主 题
    • 2. 10 Ajax 通过 HTTP 请求加载远程数据
      •   $. 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) 
      • Demo 演示
  • 22. 主 题
    • 2. 11 插件
      •   官方插件网址
      • http:// www.cssrain.cn /
    • 2.12 工具
      •   在 Eclipse 中添加 jquery 的智能提示功能 http://wxinpeng.javaeye.com/blog/458372
      • jQuery 中文社区
      • http:// bbs.jquery.org.cn
      • jQuery 官方网站
      • http:// jquery.com
      • 很好的 API 查询站点
        • http://www.visualjquery.com/index.xml
  • 23. 主 题 Jquery 概述 1 Jquery 语法与插件 2 Jquery 案例演示 3
  • 24. 主 题 案例演示
  • 25. 主 题 Jquery 概述 1 Jquery 语法与插件 2 Jquery 案例演示 3
  • 26.
    • Thank You !