jQuery 快速入门

By xingzhi, 2n TechParty@UIC

Transcript

1. jQuery 快速入门 TechParty@UIC 行之
2. 内容 1. jQuery 的简介及其优势 2. jQuery 的选择器 3. jQuery 的DOM操作 4. jQuery 的事件
3. jQuery 的简介及其优势
4. “每多学一点知识，就少写一行代码” ——《锋利的jQuery》 (推荐) 轻量级javaScript类库，简化js操作， 用于快速处理文 档、事件、动画、ajax等。 由John Resig于2006年首次发布， 免费开源。 另有：jQuery Mobile 、 jQuery UI、 jQuery 插件
5. " By crawling Alexa top 100 000 websites I found out that 45% of them use a Javascript framework and among those who use a framework 28% of them use Jquery. " http://goo.gl/rXUGG
6. 兼容多浏览器 强大的选择器 简单的DOM操作 强大的事件处理机制 简化Ajax操作 链式操作（chaining） 面向集合，隐性迭代（implicit iteration) 支持扩展 （jQuery 插件）
7. 调用 Google 提供的 jQuery <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> why? http://goo.gl/IFgGT http://goo.gl/nkVMG jQuery API查询 http://goo.gl/7X2fo
8. jQuery 的选择器
9. 常见ＣＳＳ选择器： 标签选择器 ｄｉｖ {......} ID 选择器 #myID {......} 类选择器 .myClass {......} 后代选择器 #myID div{......} 组群选择器 div, #myID, .myClass {......} jQuery 基本选择器与CSS选择器几乎一样！ 在css选择器的基础上添加更多功能。
10. $ 美刀符号，表示 jQuery jQuery("myID") = $("#myID") document.getElementById("myID") $() ——> 实例化操作函数。
11. jQuery 基本选择器， 同CSS选择器： $("#myID") 选择id为myID的元素 $(".myClass") 选择class 为 myClass 的元 素 $("span") 选择所有span标签元素 $("span,div") http://goo.gl/xmfKh
12. 除此之外，还有： 层次选择器 过滤选择器 表单选择器 如： $("div:first") 选取文档中第一个div 更多了解请看API文档。
13. jQuery 的DOM操作
14. DOM: Document Object Model 文档对象模型 DOM 树 DOM 操作：查找节点、创建节点、删改节点、属性操 作 样式操作等。 http://goo.gl/9o7GF
15. jQuery 的事件
16. 加载DOM： $(document).ready() 代替 onload 方法 http://goo.gl/rckPE
17. END THANK YOU
18. REF: 《锋利的jQuery》