jQuery基础入门.ppt

《jQuery基础入门.ppt》由会员分享，可在线阅读，更多相关《jQuery基础入门.ppt（33页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、jQuery 基础教程基础教程内容简介内容简介jQuery的由来及简介的由来及简介一一jQuery对象和对象和DOM对象对象二二jQuery选择器选择器三三jQuery中的中的DOM操作操作四四使用使用jQuery创建动画效果创建动画效果三三五五JavaScript框架简介框架简介v随着随着JavaScript、CSS、Ajax等技术的不断等技术的不断进步，越来越多的开发者将一个又一个丰进步，越来越多的开发者将一个又一个丰富多彩的程序功能进行封装，供其他人可富多彩的程序功能进行封装，供其他人可以调用这些封装好的以调用这些封装好的程序组件（框架）程序组件（框架）v当前流行的当前流行的JavaSc

2、ript库有库有:jQuery简介简介vjQuery由美国人由美国人JohnResig创建，创建，jQuery是一个是一个JavaScript函数库。函数库。jQuery是继是继prototype之后又一个优秀的之后又一个优秀的Javascript框架。其宗旨是框架。其宗旨是WRITELESS,DOMORE,写更少的代码写更少的代码,做更多的事情做更多的事情v它是轻量级的它是轻量级的js库库(压缩后只有压缩后只有21k)，这是其它的，这是其它的js库库所不及的，它兼容所不及的，它兼容CSS3，还兼容各种浏览器，还兼容各种浏览器（IE6.0+,FF1.5+,Safari2.0+,Opera9.0

3、。jQuery简介简介vjQuery是一个快速的，简洁的是一个快速的，简洁的javaScript库，使用户能更库，使用户能更方便地处理方便地处理HTMLdocuments、events、实现动画效果，、实现动画效果，并且方便地为网站并且方便地为网站提供提供AJAX交互交互jQuery是一个快速的，简洁的是一个快速的，简洁的javaScript库，使用户能更方便地处理库，使用户能更方便地处理HTMLdocuments、events、实现动画效果、实现动画效果，并，并且方便地为网站提供且方便地为网站提供AJAX交互。交互。jQuery还还有一个比较大的优势是，它的文档说明很全有一个比较大的优势是，

4、它的文档说明很全，而且各种应用也说得很详细，同时还有而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。许多成熟的插件可供选择。jQuery的优势的优势v轻量级轻量级（Lightweight）v强大的选择器强大的选择器v出色的出色的DOM操作封装操作封装v可靠的事件处理机制可靠的事件处理机制v出色的浏览器兼容性出色的浏览器兼容性jQuery 理念理念:写得少写得少,做得多做得多jQuery特性特性vjQuery库包含以下特性：库包含以下特性：HTML元素选取元素选取HTML元素操作元素操作CSS操作操作HTML事件函数事件函数JavaScript特效和动画特效和动画HTMLDOM遍历和修

5、改遍历和修改AJAXUtilitiesvjQuery库位于一个库位于一个JavaScript文件中，其中包含了所有的文件中，其中包含了所有的jQuery函函数。数。v可以通过下面的标记把可以通过下面的标记把jQuery添加到网页中：添加到网页中：注意：注意：标签应该位于页面的标签应该位于页面的部分。部分。jQuery语法语法v通过通过jQuery，您可以选取（查询，您可以选取（查询，query）HTML元素，元素，并对它们执行并对它们执行“操作操作”（actions）。）。vjQuery语法是为语法是为HTML元素的选取编制的，可以对元素元素的选取编制的，可以对元素执行某些操作。执行某些操作。

6、v基础语法是：基础语法是：$(selector).action()美元符号定义美元符号定义jQuery选择符（选择符（selector）“查询查询”和和“查找查找”HTML元素元素jQuery的的action()执行对元素的操作执行对元素的操作jQuery语法语法vjQuery语法实例语法实例$(this).hide()jQueryhide()函数，隐藏当前的函数，隐藏当前的HTML元素。元素。$(#test).hide()jQueryhide()函数，隐藏函数，隐藏id=test的元素。的元素。$(p).hide()jQueryhide()函数，隐藏所有函数，隐藏所有元素。元素。$(.tes

7、t).hide()jQueryhide()函数，隐藏所有函数，隐藏所有class=test的元素。的元素。亲自试一试亲自试一试jQuery语法语法v文档就绪函数文档就绪函数您也许已经注意到在我们的实例中的所有您也许已经注意到在我们的实例中的所有jQuery函数位于一个函数位于一个documentready函数中：函数中：这是为了防止文档在完全加载（就绪）之前运行这是为了防止文档在完全加载（就绪）之前运行jQuery代码。代码。如果在文档没有完全加载之前就运行函数，操作可能失败。如果在文档没有完全加载之前就运行函数，操作可能失败。试图隐藏一个不存在的元素试图隐藏一个不存在的元素获得未完全加载的图

8、像的大小获得未完全加载的图像的大小jQueryjQuery的选择器的选择器jQuery选择器选择器vjQuery元素选择器和属性选择器允许您通过标签名、属性元素选择器和属性选择器允许您通过标签名、属性名或内容对名或内容对HTML元素进行选择元素进行选择。v选择器允许您对选择器允许您对HTML元素组或单个元素进行操作元素组或单个元素进行操作。v在在HTMLDOM术语中：选择器允许您对术语中：选择器允许您对DOM元素组或元素组或单个单个DOM节点进行操作。节点进行操作。vjQuery元素选择器元素选择器jQuery使用使用CSS选择器来选取选择器来选取HTML元素。元素。$(“p”)选取选取元素。

9、、元素。、$(p.into)选取所有选取所有class=into的的元素。元素。$(p#into)选取所有选取所有id=into的的元素。元素。jQuery选择器选择器vjQuery属性选择属性选择器器vjQuery使用使用XPath表达式来选择带有给定属性的元素。表达式来选择带有给定属性的元素。$(href)选取所有带有选取所有带有href属性的元素。属性的元素。$(href=#)选取所有带有选取所有带有href值等于值等于#的元素。的元素。$(href!=#)选取所有带有选取所有带有href值不等于值不等于#的元的元素。素。$(href$=.jpg)选取所有选取所有href值以值以.jpg

10、结尾的元结尾的元素。素。vjQueryCSS选择器选择器vjQueryCSS选择器可用于改变选择器可用于改变HTML元素的元素的CSS属性。属性。v下面的例子把所有下面的例子把所有p元素的背景颜色更改为红色：元素的背景颜色更改为红色：亲自试一试亲自试一试jQuery选择器选择器v更多的选择器实例更多的选择器实例jQuery选择器参考手册选择器参考手册jQuery事件函数事件函数vjQuery事件处理方法是事件处理方法是jQuery中的核心函数。中的核心函数。v事件处理程序指的是当事件处理程序指的是当HTML中发生某些事件时所调用的方法。术中发生某些事件时所调用的方法。术语由事件语由事件“触发触

11、发”（或（或“激发激发”）经常会被使用。）经常会被使用。v通常会把通常会把jQuery代码放到代码放到部分的事件处理方法中：部分的事件处理方法中：v示例示例v在上面的例子中，当按钮的点击事件被触发时会调用一个函数：在上面的例子中，当按钮的点击事件被触发时会调用一个函数：v该方法隐藏所有该方法隐藏所有jQuery事件函数事件函数v下面是下面是jQuery中事件方法的一些例子中事件方法的一些例子vjQuery事件参考手册事件参考手册jQueryjQuery中的中的DOMDOM操作操作jQuery中的中的DOM操作操作vjQuery中非常重要的部分，就是操作中非常重要的部分，就是操作DOM的能力。的

12、能力。vjQuery提供一系列与提供一系列与DOM相关的方法，这使访问和操作相关的方法，这使访问和操作元素和属性变得很容易。元素和属性变得很容易。v提示：提示：DOM=DocumentObjectModel（文档对象模型）（文档对象模型）vDOM定义访问定义访问HTML和和XML文档的标准：文档的标准：v“W3C文档对象模型独立于平台和语言的界面，允许程序文档对象模型独立于平台和语言的界面，允许程序和脚本动态访问和更新文档的内容、结构以及样式。和脚本动态访问和更新文档的内容、结构以及样式。”v获得内容获得内容-text()、html()以及以及val()获取节点获取节点三个简单实用的用于三个简

13、单实用的用于DOM操作的操作的jQuery方法：方法：vtext()-设置或返回所选元素的文本内容设置或返回所选元素的文本内容vhtml()-设置或返回所选元素的内容（包括设置或返回所选元素的内容（包括HTML标记）标记）vval()-设置或返回表单字段的值设置或返回表单字段的值v下面的例子演示如何通过下面的例子演示如何通过jQuerytext()和和html()方法来获得内容：方法来获得内容：v亲自试一试亲自试一试v下面的例子演示如何通过下面的例子演示如何通过jQueryval()方法获得输入字段的值方法获得输入字段的值v亲自试一试亲自试一试获取节点获取节点v获取属性获取属性-attr()v

14、jQueryattr()方法用于获取属性值。方法用于获取属性值。v下面的例子演示如何获得链接中下面的例子演示如何获得链接中href属性的值：属性的值：v实例实例v亲自试一试亲自试一试v如需有关如需有关jQueryHTML方法的完整内容，请访问以下参考手册：方法的完整内容，请访问以下参考手册：vjQuery文档操作文档操作vjQuery属性操作属性操作vjQueryCSS操作操作jQuery删除元素删除元素v删除元素删除元素/内容内容v如需删除元素和内容，一般可使用以下两个如需删除元素和内容，一般可使用以下两个jQuery方：方：vremove()-删除被选元素（及其子元素）删除被选元素（及其子

15、元素）v亲自试一试亲自试一试vempty()-从被选元素中删除子元素从被选元素中删除子元素v亲自试一试亲自试一试v下面的例子删除下面的例子删除class=italic的所有的所有元素：元素：v亲自试一试亲自试一试jQuery添加元素添加元素vappend()-在被选元素的结尾插入内容在被选元素的结尾插入内容v亲自试一试亲自试一试vprepend()-在被选元素的开头插入内容在被选元素的开头插入内容v亲自试一试亲自试一试v在下面的例子中，我们创建若干个新元素。这些元素可以通过在下面的例子中，我们创建若干个新元素。这些元素可以通过text/HTML、jQuery或者或者JavaScript/DOM

16、来创建。然后我们通过来创建。然后我们通过append()方法把这些新元素追加到文本中（对方法把这些新元素追加到文本中（对prepend()同样有效）：同样有效）：v亲自试一试亲自试一试jQuery添加元素添加元素vafter()-在被选元素之后插入内容在被选元素之后插入内容vbefore()-在被选元素之前插入内容在被选元素之前插入内容v亲自试一试亲自试一试v在下面的例子中，我们创建若干新元素。这些元素可以通过在下面的例子中，我们创建若干新元素。这些元素可以通过text/HTML、jQuery或者或者JavaScript/DOM来创建。然后我们通过来创建。然后我们通过after()方法把这些新

17、元素插到文本中（对方法把这些新元素插到文本中（对before()同样有效）：同样有效）：v亲自试一试亲自试一试使用使用jQueryjQuery创建动画效果创建动画效果jQuery中的动画中的动画:隐藏和显示隐藏和显示实例实例jQueryhide()演示一个简单的演示一个简单的jQueryhide()方法。方法。jQueryhide()v另另jQueryhide()和和show()v通过通过hide()和和show()两个函数，两个函数，jQuery支持对支持对HTML元素的隐藏和显示：元素的隐藏和显示：示例示例jQuery中的动画中的动画(2)vjQuery隐藏和显示隐藏和显示hide()和和

18、show()都可以设置两个可选参数：都可以设置两个可选参数：speed和和callback。speed参数规定显示或隐藏的速度。可以设置这些值：参数规定显示或隐藏的速度。可以设置这些值：slow,fast,normal或毫秒。或毫秒。callback参数是在参数是在hide或或show函数完成之后被执行的函数名称。函数完成之后被执行的函数名称。下面的例下面的例子演示了带有子演示了带有speed参数的参数的hide()方法：方法：实例实例亲自试一试亲自试一试jQuery中的动画中的动画(3)vjQuery切换切换jQuerytoggle()函数使用函数使用show()或或hide()函数来切换函

19、数来切换HTML元素的元素的可见状态。可见状态。隐藏显示的元素，显示隐藏的元素。隐藏显示的元素，显示隐藏的元素。实例实例亲自试一试亲自试一试语法：语法：jQuery效果参考手册效果参考手册jQuery中的动画中的动画(滑动滑动)vjQuery滑动函数滑动函数-slideDown,slideUp,slideTogglejQuery拥有以下滑动函数：拥有以下滑动函数：slideDown()jQueryslideDown()方法方法用于向下滑动元素用于向下滑动元素。slideUp()jQueryslideUp()方法方法用于向上滑动元素。用于向上滑动元素。slideToggle()如果元素向下滑动，

20、则如果元素向下滑动，则jQueryslideToggle()可可向上滑动它们。向上滑动它们。jQuery中的动画中的动画jQuery 动画动画-animate()方法方法 jQuery animate()方法用于创建自定义动画。方法用于创建自定义动画。语法语法 亲自试一试亲自试一试 jQuery animate()-操作多个属性操作多个属性 亲自试一试亲自试一试 jQuery animate()-使用相对值使用相对值 也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上+=或或-=：亲自试一试亲自试一试 jQuery an

21、imate()-使用预定义的值使用预定义的值 您甚至可以把属性的动画值设置为您甚至可以把属性的动画值设置为 show、hide 或或 toggle：亲自试一试亲自试一试 jQuery animate()-使用队列功能使用队列功能 隐藏，如果您希望在彼此之后执行不同的动画，那么我们要利用队列功能：隐藏，如果您希望在彼此之后执行不同的动画，那么我们要利用队列功能：亲自试一试亲自试一试 下面的例子把下面的例子把 元素移动到右边，然后增加文本的字号：元素移动到右边，然后增加文本的字号：亲自试一试亲自试一试jQuery效果效果总结总结jQuery对象和对象和DOM对象的区别对象的区别v注意用注意用“$”

22、选中的元素（选中的元素（jQuery对象）和用对象）和用DOM方法选中的元素（方法选中的元素（DOM对象）含义并不相对象）含义并不相同同vvarone=getElementById(“one”);v$(“#one”)v表现在表现在jQuery对象的方法和属性与对象的方法和属性与DOM对象的并不相同，如对象的并不相同，如vone.onclick()v$(“#one”).click()jQuery中的中的“$”及其作用及其作用v4.创建创建DOM元素元素v使用使用“$”可以直接创建可以直接创建DOM元素：元素：varnewP=$(武广高速铁路即将通车！武广高速铁路即将通车！);v创建了创建了DOM

23、元素后，将这个元素插入到在页面的元素后，将这个元素插入到在页面的某个具体位置上某个具体位置上newP.insertAfter(“#chapter”);/将创建的将创建的newP元素元素插入到插入到ID为为#chapter的元素之后的元素之后或者或者newP.appendTo(body);创建创建DOM元素的方法总结元素的方法总结v将新元素插入到匹配元素的里的方法：将新元素插入到匹配元素的里的方法：vappend()appendTo()prepend()prependTo()1.append()表示在原有元素中插入新元素表示在原有元素中插入新元素2.$(body)append(newP);3.appendTo()表示将新元素插入到原有元素里表示将新元素插入到原有元素里newP.appendTo(body);4.将新元素插入到匹配元素的盘边将新元素插入到匹配元素的盘边5.after()insertafter()before()insertbefore()6.将新元素包含住匹配的元素将新元素包含住匹配的元素7.wrap()