jQuery快速入门.docx

1、jQuery快速入门一. jQuery 语法实例$(this).hide() 演示 jQuery hide() 函数，隐藏当前的 HTML 元素。 $(#test).hide() 演示 jQuery hide() 函数，隐藏 id=test 的元素。 $(p).hide() 演示 jQuery hide() 函数，隐藏所有 元素。 $(.test).hide() 演示 jQuery hide() 函数，隐藏所有 class=test 的元素。 jQuery 语法jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。基础语法是：$(selector).action() 美元

2、符号定义 jQuery 选择符（selector）“查询”和“查找” HTML 元素 jQuery 的 action() 执行对元素的操作 示例$(this).hide() - 隐藏当前元素$(p).hide() - 隐藏所有段落$(p.test).hide() - 隐藏所有 class=test 的段落$(#test).hide() - 隐藏所有 id=test 的元素提示：jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。在本教程接下来的章节，您将学习到更多有关选择器的语法。文档就绪函数您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document

3、ready 函数中：$(document).ready(function()- jQuery functions go here -);这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。二. jQuery 选择器在前面的章节中，我们展示了一些有关如何选取 HTML 元素的实例。关键点是学习 jQuery 选择器是如何准确地选取您希望应用效果的元素。jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对 HTML 元素进行选择。选择器允许您对 HTML 元素组或单个元素进行操作。在 HTML DOM 术语中：选择器允许您对 DOM 元素组或单个 DOM 节点进行操作。

4、jQuery 元素选择器jQuery 使用 CSS 选择器来选取 HTML 元素。$(p) 选取 元素。$(p.intro) 选取所有 class=intro 的 元素。$(p#demo) 选取 id=demo 的第一个 元素。jQuery 属性选择器jQuery 使用 XPath 表达式来选择带有给定属性的元素。$(href) 选取所有带有 href 属性的元素。$(href=#) 选取所有带有 href 值等于 # 的元素。$(href!=#) 选取所有带有 href 值不等于 # 的元素。$(href$=.jpg) 选取所有 href 值以 .jpg 结尾的元素。jQuery CSS 选

5、择器jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。下面的例子把所有 p 元素的背景颜色更改为红色：实例$(p).css(background-color,red);更多的选择器实例语法描述$(this)当前 HTML 元素$(p)所有 元素$(p.intro)所有 class=intro 的 元素$(.intro)所有 class=intro 的元素$(#intro)id=intro 的第一个元素$(ul li:first)每个 的第一个 元素$(href$=.jpg)所有带有以 .jpg 结尾的属性值的 href 属性$(div#intro .head)id=int

6、ro 的 元素中的所有 class=head 的元素三. jQuery 事件函数jQuery 事件处理方法是 jQuery 中的核心函数。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”（或“激发”）经常会被使用。通常会把 jQuery 代码放到 部分的事件处理方法中：实例$(document).ready(function() $(button).click(function() $(p).hide(); ););This is a headingThis is a paragraph.This is another paragraph.Click me亲自试

7、一试在上面的例子中，当按钮的点击事件被触发时会调用一个函数：$(button).click(function() .some code. )该方法隐藏所有 元素：$(p).hide();单独文件中的函数如果您的网站包含许多页面，并且您希望您的 jQuery 函数易于维护，那么请把您的 jQuery 函数放到独立的 .js 文件中。当我们在教程中演示 jQuery 时，会将函数直接添加到 部分中。不过，把它们放到一个单独的文件中会更好，就像这样（通过 src 属性来引用文件）：实例jQuery 名称冲突jQuery 使用 $ 符号作为 jQuery 的简介方式。某些其他 JavaScript 库

8、中的函数（比如 Prototype）同样使用 $ 符号。jQuery 使用名为 noConflict() 的方法来解决该问题。var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替 $ 符号。亲自试一试结论由于 jQuery 是为处理 HTML 事件而特别设计的，那么当您遵循以下原则时，您的代码会更恰当且更易维护： 把所有 jQuery 代码置于事件处理函数中 把所有事件处理函数置于文档就绪事件处理器中 把 jQuery 代码置于单独的 .js 文件中 如果存在名称冲突，则重命名 jQuery 库 jQuery 事件下面是 jQuery 中事件方法的一些

9、例子：Event 函数绑定函数至$(document).ready(function)将函数绑定到文档的就绪事件（当文档完成加载时）$(selector).click(function)触发或将函数绑定到被选元素的点击事件$(selector).dblclick(function)触发或将函数绑定到被选元素的双击事件$(selector).focus(function)触发或将函数绑定到被选元素的获得焦点事件$(selector).mouseover(function)触发或将函数绑定到被选元素的鼠标悬停事件四. jQuery实例jQuery hide() 演示简单的 jQuery hide(

10、) 函数。 $(document).ready(function() $(p).click(function() $(this).hide(); ););If you click on me, I will disappear.jQuery hide() 另一个 hide() 演示。如何隐藏部分文本。$(document).ready(function()$(.ex .hide).click(function()$(this).parents(.ex).hide(slow););); div.exbackground-color:#e5eecc;padding:7px;border:solid

11、 1px #c3c3c3; Island TradingHide meContact: Helen Bennett Garden House Crowther WayLondonParis TradingHide meContact: Marie Bertrand 265, Boulevard CharonneParisjQuery slideToggle() 演示简单的 slide panel 效果 $(document).ready(function()$(.flip).click(function() $(.panel).slideToggle(slow); );); div.panel

12、,p.flipmargin:0px;padding:5px;text-align:center;background:#e5eecc;border:solid 1px #c3c3c3;div.panelheight:120px;display:none; W3School - 领先的 Web 技术教程站点在 W3School，你可以找到你所需要的所有网站建设教程。 请点击这里 jQuery fadeTo() 演示简单的 jQuery fadeTo() 函数。$(document).ready(function() $(button).click(function() $(div).fadeTo

13、(slow,0.25); ););点击这里查看淡出效果jQuery animate() 演示简单的 jQuery animate() 函数。 $(document).ready(function() $(#start).click(function() $(#box).animate(height:300,slow); $(#box).animate(width:300,slow); $(#box).animate(height:100,slow); $(#box).animate(width:100,slow); );); Start Animation jQuery 隐藏和显示通过 hid

14、e() 和 show() 两个函数，jQuery 支持对 HTML 元素的隐藏和显示：实例$(#hide).click(function()$(p).hide(););$(#show).click(function()$(p).show(););亲自试一试$(document).ready(function() $(#hide).click(function() $(p).hide(); ); $(#show).click(function() $(p).show(); ););如果点击“隐藏”按钮，我就会消失。隐藏显示hide() 和 show() 都可以设置两个可选参数：speed 和 c

15、allback。语法：$(selector).hide(speed,callback)$(selector).show(speed,callback)speed 参数规定显示或隐藏的速度。可以设置这些值：slow, fast, normal 或毫秒。callback 参数是在 hide 或 show 函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback 参数的知识。实例$(button).click(function()$(p).hide(1000););亲自试一试$(document).ready(function() $(button).click(funct

16、ion() $(p).hide(1000); ););隐藏This is a paragraph with little content.This is another small paragraph.jQuery 切换jQuery toggle() 函数使用 show() 或 hide() 函数来切换 HTML 元素的可见状态。隐藏显示的元素，显示隐藏的元素。语法：$(selector).toggle(speed,callback)speed 参数可以设置这些值：slow, fast, normal 或 毫秒。实例$(button).click(function()$(p).toggle()

17、;);亲自试一试$(document).ready(function() $(button).click(function() $(p).toggle(); ););切换This is a paragraph with little content.This is another small paragraph.callback 参数是在该函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback 参数的知识。jQuery 滑动函数 - slideDown, slideUp, slideTogglejQuery 拥有以下滑动函数：$(selector).slideDow

18、n(speed,callback)$(selector).slideUp(speed,callback)$(selector).slideToggle(speed,callback)speed 参数可以设置这些值：slow, fast, normal 或毫秒。callback 参数是在该函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback 参数的知识。slideDown() 实例$(.flip).click(function()$(.panel).slideDown(););亲自试一试 $(document).ready(function() $(.flip).c

19、lick(function() $(.panel).slideDown(slow); );); div.panel,p.flipmargin:0px;padding:5px;text-align:center;background:#e5eecc;border:solid 1px #c3c3c3;div.panelheight:120px;display:none; W3School - 领先的 Web 技术教程站点在 W3School，你可以找到你所需要的所有网站建设教程。 请点击这里 slideUp() 实例$(.flip).click(function()$(.panel).slideU

20、p()亲自试一试 $(document).ready(function() $(.flip).click(function() $(.panel).slideUp(slow); );); div.panel,p.flipmargin:0px;padding:5px;text-align:center;background:#e5eecc;border:solid 1px #c3c3c3;div.panelheight:120px; W3School - 领先的 Web 技术教程站点在 W3School，你可以找到你所需要的所有网站建设教程。 请点击这里 slideToggle() 实例$(.flip).click(function()$(.panel).slideToggle(););