jQuery入门jQuery入门.doc

一．jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 jQuery 很容易学习。 我们将学习到如何选取 HTML 元素，以及如何对它们执行类似隐藏、移动以及操作其内容等任务。 二．jQuery 语法 jQuery 语法是为 HTML 元素的选取编制，并可以对元素执行某些操作。 基础语法是：$(selector).action() 美元符号定义 jQuery 选择符（selector）“查询”和“查找” HTML 元素 action() 执行对元素的操作 $(this).hide() - 隐藏当前元素 $(p).hide() - 隐藏所有段落 $(p.test).hide() - 隐藏所有 class=test 的段落 $(#test).hide() - 隐藏第一个 id=test 的元素 文档就绪函数 在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中： $(document).ready(function(){ }); 这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。 下面是两种假如文档完全加载之前运行函数的话，操作失败的情况： 试图隐藏一个不存在的元素。 获得未完全加载的图像的大小。 三．jQuery 选择器 选择器允许您对元素组或单个元素进行操作 关键点是学习 jQuery 选择器是如何准确地选取您希望选到的元素。选择器允许您对 DOM 元素组或单个 DOM 节点进行操作。 （1）jQuery 元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素。 $(p) 选取 p 元素。 $(p.intro) 选取所有 class=intro 的 p 元素。 $(p#demo) 选取 id=demo 的第一个 p 元素。 （2）jQuery 属性选择器 jQuery 使用 XPath 表达式来选择带有给定属性的元素。 $([href]) 选取所有带有 href 属性的元素。 $([href=#]) 选取所有带有 href 值等于 # 的元素。 $([href!=#]) 选取所有带有 href 值不等于 # 的元素。 $([href$=.jpg]) 选取所有 href 值以 .jpg 结尾的元素。 jQuery CSS 选择器 jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。 下面的例子把所有 p 元素的背景颜色更改为红色： 实例 $(p).css(background-color,red); 四．jQuery 事件 jQuery 是为事件处理特别设计的 jQuery 事件函数 jQuery 事件处理函数是 jQuery 中的核心函数。 事件处理函数是当 HTML 中发生事件时自动被调用的函数。 隐藏、显示、切换、滑动 以及动画 jQuery 事件 Event 函数 绑定函数至 $(document).ready(function) 文档的就绪事件 （当 HTML 文档就绪可用） $(selector).click(function) 被选元素的点击事件 $(selector).dblclick(function) 被选元素的双击事件 $(selector).focus(function) 被选元素的获得焦点事件 $(selector).mouseover(function) 被选元素的鼠标悬停事件 jQuery 隐藏和显示 通过 hide() 和 show() 两个函数，jQuery 支持对 HTML 元素的隐藏和显示 hide() 和 show() 都可以设置两个可选参数：speed 和 callback。 语法： $(selector).hide(speed,callback) $(selector).show(speed,callback) speed 参数可以设置这些值：slow, fast, normal 或 milliseconds： jQuery 切换 jQuery toggle() 函数使用 show() 或 hide() 函数来切换 HTML 元素的可见状态。 隐藏显示的元素，显示隐藏的元素。 语法： $(selector).toggle(speed,callback) speed 参数可以设置这些值：slow, fast, normal 或 毫秒。 实例 $(button).click(function(){ $(p).toggle(); }); jQuery 滑动函数 - slideDown, slideUp, slideToggle jQuery 拥有以下滑动函数： $(selector).slideDown(speed,callb