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添加到网页中： $(#test).hide()：隐藏所有 id=test 的元素$(p).hide()：隐藏所有段落$(.test).hide()或$(p.test).hide()：隐藏所有 class=test 的段落准确地选取您希望应用效果的元素。jQuery 元素选择器 和 属性选择器 允许您通过标签名、属性名或内容对HTML元素进行选择。选择器允许您对HTML元素组或单个元素进行操作。在HTML DOM术语中选择器允许您对DOM元素组或单个DOM节点进行操作。jQuery元素选择器jQuery使用CSS选择器来选取HTML元素。$(p) 选取p元素$(ro) 选取所有class=intro的p元素 ③$(p#demo) 选取id=demo 的第一个p元素。jQuery属性选择器jQuery使用XPath表达式来选择带有给定属性的元素$([href]) 选取所有带有href属性的元素$([href=#]) 选取所有带有href值等于#的元素$([href!=#]) 选取所有带有href值不等于#的元素 ④ $([href$=.jpg]) 选取所有href值以.jpg结尾的元素。jQuery CSS 选择器jQuery CSS选择器可用于改变HTML元素的CSS属性。 jQuery 事件函数jQuery 事件处理方法是 jQuery 中的核心函数。事件处理程序指的是 当HTML中发生某些事件时所调用的方法 。术语由事件“触发”（或“激发”）经常会被使用。通常会把jQuery代码放到head部分的事件处理方法中jQuery 名称冲突jQuery 使用 $ 符号作为 jQuery 的简介方式某些其他 JavaScript 库中的函数（比如 Prototype）同样使用 $ 符号jQuery 使用名为 noConflict() 的方法来解决该问题var jq=jQuery.noConflict() ，帮助您使用自己的名称（比如 jq）来代替 $ 符号。由于 jQuery 是为处理 HTML 事件而特别设计的，那么当您遵循以下原则时，您的代码会更恰当且更易维护： 把所有 jQuery 代码置于 事件处理函数 中把所有事件处理函数置于 文档就绪事件处理器 中把 jQuery 代码置于 单独的 .js 文件 中如果存在名称冲突，则 重命名 jQuery 库jQuery 事件Event 函数绑定函数$(document).ready(function) 将函数绑定到文档的就绪事件（当文档完成加载时）$(selector).click(function) 触发或将函数绑定到被选元素的点击