jQuery基础入门.ppt

1、jQuery 基础教程,内容简介,JavaScript框架简介,随着JavaScript、CSS、Ajax等技术的不断进步，越来越多的开发者将一个又一个丰富多彩的程序功能进行封装，供其他人可以调用这些封装好的程序组件（框架） 当前流行的 JavaScript 库有:,jQuery简介,jQuery 由美国人John Resig创建， jQuery 是一个 JavaScript 函数库。jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是WRITELESS,DOMORE,写更少的代码,做更多的事情 它是轻量级的js库(压缩后只有21k)，这是其它的js库所不及的，

2、它兼容CSS3，还兼容各种浏览器（IE6.0+,FF1.5+,Safari2.0+, Opera9.0。,jQuery简介,jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、 events、实现动画效果，并且方便地为网站 提供AJAX交互jQuery是一个快速的，简洁的 javaScript库，使用户能更方便地处理 HTML documents、events、实现动画效果 ，并 且方便地为网站提供AJAX交互。 jQuery还 有一个比较大的优势是，它的文档说明很全 ， 而且各种应用也说得很详细，同时还有 许多成熟的插件可供选择。,jQue

3、ry的优势,轻量级 （Lightweight） 强大的选择器 出色的DOM操作封装 可靠的事件处理机制 出色的浏览器兼容性,jQuery 理念: 写得少, 做得多,jQuery特性,jQuery 库包含以下特性： HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTML DOM 遍历和修改 AJAX Utilities jQuery 库位于一个 JavaScript 文件中，其中包含了所有的 jQuery 函数。 可以通过下面的标记把 jQuery 添加到网页中： 注意： 标签应该位于页面的 部分。,jQuery语法,通过 jQuer

4、y，您可以选取（查询，query） HTML 元素，并对它们执行“操作”（actions）。 jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。 基础语法是：$(selector).action() 美元符号定义 jQuery 选择符（selector）“查询”和“查找” HTML 元素 jQuery 的 action() 执行对元素的操作,jQuery语法,jQuery 语法实例 $(this).hide() jQuery hide() 函数，隐藏当前的 HTML 元素。 $(#test).hide() jQuery hide() 函数，隐藏 id=test 的元素

5、。 $(p).hide() jQuery hide() 函数，隐藏所有 元素。 $(.test).hide() jQuery hide() 函数，隐藏所有 class=test 的元素。 亲自试一试,jQuery语法,文档就绪函数 您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中： 这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。 如果在文档没有完全加载之前就运行函数，操作可能失败。 试图隐藏一个不存在的元素 获得未完全加载的图像的大小,jQuery的选择器,jQuery 选择器,jQuery 元素选择器和属性选择器允许您通

6、过标签名、属性名或内容对 HTML 元素进行选择。 选择器允许您对 HTML 元素组或单个元素进行操作。 在 HTML DOM 术语中：选择器允许您对 DOM 元素组或单个 DOM 节点进行操作。 jQuery 元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素。 $(“p”) 选取 元素。、 $(o) 选取所有 class=into 的 元素。 $(p#into) 选取所有 id=into 的 元素。,jQuery 选择器,jQuery 属性选择器 jQuery 使用 XPath 表达式来选择带有给定属性的元素。 $(href) 选取所有带有 href 属性的元素

7、。 $(href=#) 选取所有带有 href 值等于 # 的元素。 $(href!=#) 选取所有带有 href 值不等于 # 的元素。 $(href$=.jpg) 选取所有 href 值以 .jpg 结尾的元素。 jQuery CSS 选择器 jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。 下面的例子把所有 p 元素的背景颜色更改为红色： 亲自试一试,jQuery 选择器,更多的选择器实例 jQuery 选择器参考手册,jQuery 事件函数,jQuery 事件处理方法是 jQuery 中的核心函数。 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

8、术语由事件“触发”（或“激发”）经常会被使用。 通常会把 jQuery 代码放到 部分的事件处理方法中： 示例 在上面的例子中，当按钮的点击事件被触发时会调用一个函数： 该方法隐藏所有,jQuery 事件函数,下面是 jQuery 中事件方法的一些例子 jQuery 事件参考手册,jQuery中的DOM操作,jQuery 中的 DOM 操作,jQuery 中非常重要的部分，就是操作 DOM 的能力。 jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。 提示：DOM = Document Object Model（文档对象模型） DOM 定义访问 HTML 和

9、XML 文档的标准： “W3C 文档对象模型独立于平台和语言的界面，允许程序和脚本动态访问和更新文档的内容、结构以及样式。” 获得内容 - text()、html() 以及 val(),获取节点,三个简单实用的用于 DOM 操作的 jQuery 方法： text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容（包括 HTML 标记） val() - 设置或返回表单字段的值 下面的例子演示如何通过 jQuery text() 和 html() 方法来获得内容： 亲自试一试 下面的例子演示如何通过 jQuery val() 方法获得输入字段的值 亲自试一试,获取节

10、点,获取属性 - attr() jQuery attr() 方法用于获取属性值。 下面的例子演示如何获得链接中 href 属性的值： 实例 亲自试一试 如需有关 jQuery HTML 方法的完整内容，请访问以下参考手册： jQuery 文档操作 jQuery 属性操作 jQuery CSS 操作,jQuery删除元素,删除元素/内容 如需删除元素和内容，一般可使用以下两个 jQuery 方： remove() - 删除被选元素（及其子元素） 亲自试一试 empty() - 从被选元素中删除子元素 亲自试一试 下面的例子删除 class=italic 的所有 元素： 亲自试一试,jQuery添

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

12、aScript/DOM 来创建。然后我们通过 after() 方法把这些新元素插到文本中（对 before() 同样有效）： 亲自试一试,使用jQuery创建动画效果,jQuery 中的动画: 隐藏和显示,实例 jQuery hide() 演示一个简单的 jQuery hide() 方法。 jQuery hide() 另jQuery hide() 和 show() 通过 hide() 和 show() 两个函数，jQuery 支持对 HTML 元素的隐藏和显示： 示例,jQuery 中的动画(2),jQuery 隐藏和显示 hide() 和 show() 都可以设置两个可选参数：speed 和

13、 callback。 speed 参数规定显示或隐藏的速度。可以设置这些值：slow, fast, normal 或毫秒。 callback 参数是在 hide 或 show 函数完成之后被执行的函数名称。下面的例子演示了带有 speed 参数的 hide() 方法： 实例 亲自试一试,jQuery 中的动画(3),jQuery 切换 jQuery toggle() 函数使用 show() 或 hide() 函数来切换 HTML 元素的可见状态。 隐藏显示的元素，显示隐藏的元素。 实例 亲自试一试 语法： jQuery 效果参考手册,jQuery 中的动画(滑动),jQuery 滑动函数 -

14、slideDown, slideUp, slideToggle jQuery 拥有以下滑动函数： slideDown() jQuery slideDown()方法用于向下滑动元素。 slideUp() jQuery slideUp()方法用于向上滑动元素。 slideToggle() 如果元素向下滑动，则 jQuery slideToggle()可向上滑动它们。,jQuery 中的动画,jQuery 动画 - animate() 方法 jQuery animate() 方法用于创建自定义动画。 语法 亲自试一试 jQuery animate() - 操作多个属性 亲自试一试 jQuery an

15、imate() - 使用相对值 也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=： 亲自试一试 jQuery animate() - 使用预定义的值 您甚至可以把属性的动画值设置为 show、hide 或 toggle： 亲自试一试 jQuery animate() - 使用队列功能 隐藏，如果您希望在彼此之后执行不同的动画，那么我们要利用队列功能： 亲自试一试 下面的例子把 元素移动到右边，然后增加文本的字号： 亲自试一试,jQuery 效果,总结,jQuery对象和DOM对象的区别,注意用“$”选中的元素（jQuery对象）和用DOM方法选中的元素（DOM对象）含义并不相同 var one=getElementById(“one”); $(“#one”) 表现在jQuery对象的方法和属性与DOM对象的并不相同，如 one.onclick() $(“#one”).click(),jQuery中的“$”及其作用,4. 创建DOM元素 使用“$”可以直接创建DOM元素： var newP =$(武广高速铁路即将通车！); 创建了DOM元素后，将这个元素插入到在页面的某个具体位置上 newP.insertAfter(“#chapter”); /将创建的newP元素插入到ID为#chapter的元素之后 或者 newP.appendTo(body);,创