jQuery基础入门ppt

jQuery基础教程内容简介jQuery的由来及简介一jQuery对象和DOM对象二jQuery选择器三jQuery中的DOM操作四使用jQuery创建动画效果三五JavaScript框架简介随着JavaScript、CSS、Ajax等技术的不断进步，越来越多的开发者将一个又一个丰富多彩的程序功能进行封装，供其他人可以调用这些封装好的程序组件（框架）当前流行的JavaScript库有:jQuery简介jQuery由美国人JohnResig创建，jQuery是一个JavaScript函数库。jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITELESS,DOMORE,写更少的代码,做更多的事情它是轻量级的js库(压缩后只有21k)，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器（IE6.0+,FF1.5+,Safari2.0+,Opera9.0。jQuery简介jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery的优势轻量级（Lightweight）强大的选择器出色的DOM操作封装可靠的事件处理机制出色的浏览器兼容性jQuery理念:写得少,做得多jQuery特性jQuery库包含以下特性：HTML元素选取HTML元素操作CSS操作HTML事件函数JavaScript特效和动画HTMLDOM遍历和修改AJAXUtilitiesjQuery库位于一个JavaScript文件中，其中包含了所有的jQuery函数。可以通过下面的标记把jQuery添加到网页中：注意：script标签应该位于页面的head部分。jQuery语法通过jQuery，您可以选取（查询，query）HTML元素，并对它们执行“操作”（actions）。jQuery语法是为HTML元素的选取编制的，可以对元素执行某些操作。基础语法是：$(selector).action()•美元符号定义jQuery•选择符（selector）“查询”和“查找”HTML元素•jQuery的action()执行对元素的操作jQuery语法jQuery语法实例$(this).hide()•jQueryhide()函数，隐藏当前的HTML元素。$(#test).hide()•jQueryhide()函数，隐藏id=test的元素。$(p).hide()•jQueryhide()函数，隐藏所有p元素。$(.test).hide()•jQueryhide()函数，隐藏所有class=test的元素。亲自试一试jQuery语法文档就绪函数您也许已经注意到在我们的实例中的所有jQuery函数位于一个documentready函数中：这是为了防止文档在完全加载（就绪）之前运行jQuery代码。如果在文档没有完全加载之前就运行函数，操作可能失败。•试图隐藏一个不存在的元素•获得未完全加载的图像的大小jQuery的选择器jQuery选择器jQuery元素选择器和属性选择器允许您通过标签名、属性名或内容对HTML元素进行选择。选择器允许您对HTML元素组或单个元素进行操作。在HTMLDOM术语中：选择器允许您对DOM元素组或单个DOM节点进行操作。jQuery元素选择器jQuery使用CSS选择器来选取HTML元素。•$(“p”)选取p元素。、•$(p.into)选取所有class=into的p元素。•$(p#into)选取所有id=into的p元素。jQuery选择器jQuery属性选择器jQuery使用XPath表达式来选择带有给定属性的元素。$([href])选取所有带有href属性的元素。$([href='#'])选取所有带有href值等于#的元素。$([href!='#'])选取所有带有href值不等于#的元素。$([href$='.jpg'])选取所有href值以.jpg结尾的元素。jQueryCSS选择器jQueryCSS选择器可用于改变HTML元素的CSS属性。下面的例子把所有p元素的背景颜色更改为红色：亲自试一试jQuery选择器更多的选择器实例jQuery选择器参考手册jQuery事件函数jQuery事件处理方法是jQuery中的核心函数。事件处理程序指的是当HTML中发生某些事件时所调用的方法。术语由事件“触发”（或“激发”）经常会被使用。通常会把jQuery代码放到head部分的事件处理方法中：示例在上面的例子中，当按钮的点击事件被触发时会调用一个函数：该方法隐藏所有jQuery事件函数下面是jQuery中事件方法的一些例子jQuery事件参考手册jQuery中的DOM操作jQuery中的DOM操作jQuery中非常重要的部分，就是操作DOM的能力。jQuery提供一系列与DOM相关的方法，这使访问和操作元素和属性变得很容易。提示：DOM=DocumentObjectModel（文档对象模型）DOM定义访问HTML和XML文档的标准：“W3C文档对象模型独立于平台和语言的界面，允许程序和脚本动态访问和更新文档的内容、结构以及样式。”获得内容-text()、html()以及val()获取节点三个简单实用的用于DOM操作的jQuery方法：text()-设置或返回所选元素的文本内容html()-设置或返回所选元素的内容（包括HTML标记）val()-设置或返回表单字段的值下面的例子演示如何通过jQuerytext()和html()方法来获得内容：亲自试一试下面的例子演示如何通过jQueryval()方法获得输入字段的值亲自试一试获取节点获取属性-attr()jQueryattr()方法用于获取属性值。下面的例子演示如何获得链接中href属性的值：实例亲自试一试如需有关jQueryHTML方法的完整内容，请访问以下参考手册：jQuery文档操作jQuery属性操作jQueryCSS操作jQuery删除元素删除元素/内容如需删除元素和内容，一般可使用以下两个jQuery方：remove()-删除被选元素（及其子元素）亲自试一试empty()-从被选元素中删除子元素亲自试一试下面的例子删除class=italic的所有p元素：亲自试一试jQuery添加元素append()-在被选元素的结尾插入内容亲自试一试prepend()-在被选元素的开头插入内容亲自试一试在下面的例子中，我们创建若干个新元素。这些元素可以通过text/HTML、jQuery或者JavaScript/DOM来创建。然后我们通过append()方法把这些新元素追加到文本中（对prepend()同样有效）：亲自试一试jQuery添加元素after()-在被选元素之后插入内容before()-在被选元素之前插入内容亲自试一试在下面的例子中，我们创建若干新元素。这些元素可以通过text/HTML、jQuery或者JavaScript/DOM来创建。然后我们通过after()方法把这些新元素插到文本中（对before()同样有效）：亲自试一试使用jQuery创建动画效果jQuery中的动画:隐藏和显示实例jQueryhide()演示一个简单的jQueryhide()方法。jQueryhide()另jQueryhide()和show()通过hide()和show()两个函数，jQuery支持对HTML元素的隐藏和显示：示例jQuery中的动画(2)jQuery隐藏和显示hide()和show()都可以设置两个可选参数：speed和callback。speed参数规定显示或隐藏的速度。可以设置这些值：slow,fast,normal或毫秒。callback参数是在hide或show函数完成之后被执行的函数名称。下面的例子演示了带有speed参数的hide()方法：实例亲自试一试jQuery中的动画(3)jQuery切换jQuerytoggle()函数使用show()或hide()函数来切换HTML元素的可见状态。隐藏显示的元素，显示隐藏的元素。实例亲自试一试语法：jQuery效果参考手册jQuery中的动画(滑动)jQuery滑动函数-slideDown,slideUp,slideTogglejQuery拥有以下滑动函数：•slideDown()jQueryslideDown()方法用于向下滑动元素。•slideUp()jQueryslideUp()方法用于向上滑动元素。•slideToggle()如果元素向下滑动，则jQueryslideToggle()可向上滑动它们。jQuery中的动画jQuery动画-animate()方法jQueryanimate()方法用于创建自定义动画。语法亲自试一试jQueryanimate()-操作多个属性亲自试一试jQueryanimate()-使用相对值也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上+=或-=：亲自试一试jQueryanimate()-使用预定义的值您甚至可以把属性的动画值设置为show、hide或toggle：亲自试一试jQueryanimate()-使用队列功能隐藏，如果您希望在彼此之后执行不同的动画，那么我们要利用队列功能：亲自试一试下面的例子把div元素移动到右边，然后增加文本的字号：亲自试一试jQuery效果总结jQuery对象和DOM对象的区别注意用“$”选中的元素（jQuery对象）和用DOM方法选中的元素（DOM对象）含义并不相同varone=getElementById(“one”);$(“#one”)表现在jQuery对象的方法和属性与DOM对象的并不相同，如one.onclick()$(“#one”).click()jQuery中的“$”及其作用4.创建DOM元素使用“$”可以直接创建DOM元素：varnewP=$(p武广高速铁路即将通车！/p);创建了DOM元素后，将这个元素插入到在页面的某个具体位置上newP.insertAfter(“#chapter”);//将创建的newP元素插入到ID为#chapter的元素之后或者newP.appendTo(body);创建DOM元素的方法总结将新元素插入到匹配元素的里的方法：append()appendTo()prepend()prependTo()1.append()表示在原有元素中插入新元素2.$(body)append(newP);3.appendTo()表示将新元素插入到原有元素里newP.appendTo(body);4.将新元素插入到匹配元素的盘边5.after()insertafter()before()insertbefore()6.将新元素包含住匹配的元素7.wrap()