J Query Learn
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

J Query Learn

on

  • 2,026 views

jquery入门篇

jquery入门篇

Statistics

Views

Total Views
2,026
Views on SlideShare
2,023
Embed Views
3

Actions

Likes
2
Downloads
18
Comments
0

1 Embed 3

http://www.slideshare.net 3

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

J Query Learn Presentation Transcript

  • 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
    • <script type=&quot;text/javascript&quot; src=&quot;./script/jquery.js&quot;></script>
    • 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)
    • 把一个“名 / 值对”对象设置为所有匹配元素的样式属性
    • 属性名包含 &quot;-&quot; 的话,必须使用引号
    • 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!