Downloaded 19 times
![3.JQUERY-- 基础 3.2 核心函数 $( expression,[context ]) 接收一个包含 CSS 选择器的字符串，然后用这个字符串去匹配一组元素 jQuery 的核心功能都是通过这个函数实现的 $(html) 根据提供的原始 HTML 标记字符串，动态创建由 jQuery 对象包装的 DOM 元素](https://image.slidesharecdn.com/jquery-learn-1234923050022467-1/85/J-Query-Learn-8-320.jpg)
![3.JQUERY-- 基础 $(elements) 将一个或多个 DOM 元素转化为 jQuery 对象 注意是 jQuery 对象，而不是 DOM 对象。如果我想得到 DOM 对象呢？很简单，只需在其后跟一个索引值（如 [0] ）—因为它得到的是一个对象数组，即可得到 DOM 对象。然后就可以使用 innerHTML 、 innerText 等 DHTML 方法和属性了。](https://image.slidesharecdn.com/jquery-learn-1234923050022467-1/85/J-Query-Learn-9-320.jpg)
![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] 等 .](https://image.slidesharecdn.com/jquery-learn-1234923050022467-1/85/J-Query-Learn-10-320.jpg)
![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.](https://image.slidesharecdn.com/jquery-learn-1234923050022467-1/85/J-Query-Learn-11-320.jpg)
![3.JQUERY-- 基础 3.12 效果 show() 显示隐藏的匹配元素 show(speed,[callback]) 以优雅的动画显示所有匹配的元素，并在显示完成后可选地触发一个回调函数 hide() 隐藏显示的元素](https://image.slidesharecdn.com/jquery-learn-1234923050022467-1/85/J-Query-Learn-20-320.jpg)
![3.JQUERY-- 基础 hide(speed,[callback]) 以优雅的动画隐藏所有匹配的元素，并在显示完成后可选地触发一个回调函数 toggle() 切换元素的可见状态 Demo](https://image.slidesharecdn.com/jquery-learn-1234923050022467-1/85/J-Query-Learn-21-320.jpg)
J Query Learn
- 1. Write Less, DoMore. JQUERY 简介 ------- 写更少的代码，做更多的事情。
- 2. 1.JQUERY 的概述 1.1JQUERY 简介 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.4JQUERY 的特点 轻量级：经 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.1jQuery 下载 当前版本 1.3.1 官方网站下载： http:// jquery.com / 2.2 jQuery 安装 在页面头部 head 中，添加 js <script type="text/javascript" src="./script/jquery.js"></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.5class addClass(class) 为每个匹配的元素添加指定的 class removeClass(class) 从所有匹配的元素中删除全部或者指定的 class Demo
- 14. 3.JQUERY-- 基础 3.6HTML 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.9DOM 文档处理 内部插入 append(content), appendTo(content), prepend(content), prependTo(content). 外部插入 after(content), before(content), insertAfter(content), insertBefore(content). Demo
- 18. 3.JQUERY-- 基础 3.10CSS 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.13Ajax $. 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!