jQuery经典实例.doc

jQuery经典实例 第1章　基础之篇 第1讲　jQuery简介 【1】适合JQuery课程学习的人员：①准备做Ajax前台开发；②熟悉Java、.Net、PHP、Python、Ruby等；③熟悉JavaScript，了解Ajax，想要提高；④网页设计师，熟悉CSS；⑤想熟练掌握JQuery的使用方式。 【2】JQuery的特点： ①写尽可能少的代码，做尽可能多的事情（Write less,Do more）； ②用很简洁的代码完成很丰富的工作，会改变我们写JavaScript代码的一些方式； ③支持各种主流浏览器，包括IE6以上，FireFox2以上，Safari2以上和Opera9以上的版本； ④以强大的CSS选择器为基础，几乎所有的操作都先使用选择器查找DOM对象，然后对其进行各种操作； ⑤屏蔽浏览器差异，对DOM的操作提供了方便 的扩展，易用的事件处理API和动画API； ⑥强大的插件机制； ⑦社区活跃，文档非常齐全，全部配有示例。学 习容易，易用性很高。 【3】学习环境准备： ①任何你喜欢的编辑器或IDE； ②各种主流浏览器； ③一个自己熟悉的应用服务器。 【4】jQuery是一个轻量级的 JavaScript库 ，它极大地简化了JavaScript编程。 【5】【点击后隐藏的效果】 html head script type=text/javascript src=jquery.js/script script type=text/javascript $(document).ready(function () { $(p).click(function () { $(this).hide(); }); }); /script /head body pIf you click on me, I will disappear./p /body /html 【6】jQuery库位于一个JavaScript文件中，其中包含了所有的jQuery函数，可以通过下面的标记把jQuery添加到网页中： head script type=text/javascript src=jquery.js /script /head 第2讲　jQuery语法 【1】jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。 基础语法是：$(selector).action() ·美元符号定义jQuery ·选择符selector“查询”和“查找”HTML元素 ·jQuery 的action()执行对元素的操作 【2】【$(this).hide()：隐藏当前Html元素】 html head script type=text/javascript src=/jquery/jquery.js/script script type=text/javascript $(document).ready(function () { $(button).click(function () { $(this).hide(); }); }); /script /head body button type=buttonClick me/button /body /html 【3】【$(#test).hide()：隐藏所有 id=test 的元素】 html head script type=text/javascript src=/jquery/jquery.js/script script type=text/javascript $(document).ready(function () { $(button).click(function () { $(#test).hide(); }); }); /script /head body h2This is a heading/h2 pThis is a paragraph./p p id=testThis is another paragraph./p button type=buttonClick me/button /body /html 【4】【$(p).hide()：隐藏所有段落】 html head script type=text/javascript src=/jquery/jquery.js/script script type=text/javascript $(document).ready(function () { $