当前位置:文档之家› 完整版(JQuery语法)

完整版(JQuery语法)

jQuery 语法您可以选取(查询,query)HTML 元素,并对它们执行“操作”(actions)。

jQuery 语法实例$(this).hide()演示jQuery hide() 函数,隐藏当前的HTML 的元素。

$("#test").hide()演示jQuery hide() 函数,隐藏id="test" 的元素。

$("p").hide()演示jQuery hide() 函数,隐藏所有<p> 元素。

$(".test").hide()演示jQuery hide() 函数,隐藏所有class="test" 的元素。

jQuery 语法jQuery 语法是为HTML 元素的选取编制,可以对元素执行某些操作。

基础语法是:$(selector).action()•美元符号定义jQuery•选择符(selector)“查询”和“查找” HTML 元素•jQuery action() 执行对元素的操作实例$(this).hide() - 隐藏当前元素$("p").hide() - 隐藏所有段落$("p.test").hide() - 隐藏所有class="test" 的段落$("#test").hide() - 隐藏所有id="test" 的元素提示:jQuery 使用的语法是XPath 与CSS 选择器语法的组合。

在本教程接下来的章节,您将学习到更多有关选择器的语法。

文档就绪函数您也许已经注意到在我们的实例中的所有jQuery 函数位于一个document ready 函数中:这是为了防止文档在完全加载(就绪)之前运行jQuery 代码。

jQuery 选择器选择器允许您对元素组或单个元素进行操作。

jQuery 选择器在前面的章节中,我们展示了一些有关如何选取HTML 元素的实例。

关键点是学习jQuery 选择器是如何准确地选取您希望应用效果的元素。

jQuery 元素选择器和属性选择器允许您通过标签名、属性名或内容对HTML 元素进行选择。

选择器允许您对HTML 元素组或单个元素进行操作。

在HTML DOM 术语中:选择器允许您对DOM 元素组或单个DOM 节点进行操作。

jQuery 元素选择器jQuery 使用CSS 选择器来选取HTML 元素。

$("p") 选取<p> 元素。

$("p.intro") 选取所有class="intro" 的<p> 元素。

$("p#demo") 选取id="demo" 的第一个<p> 元素。

jQuery 属性选择器jQuery 使用XPath 表达式来选择带有给定属性的元素。

$("[href]") 选取所有带有href 属性的元素。

$("[href='#']") 选取所有带有href 值等于"#" 的元素。

$("[href!='#']") 选取所有带有href 值不等于"#" 的元素。

$("[href$='.jpg']") 选取所有href 值以".jpg" 结尾的元素。

jQuery CSS 选择器jQuery CSS 选择器可用于改变HTML 元素的CSS 属性。

下面的例子把所有p 元素的背景颜色更改为红色:实例jQuery 参考手册 - 选择器jQuery 事件jQuery 是为事件处理特别设计的。

jQuery 事件函数jQuery 事件处理函数是jQuery 中的核心函数。

事件处理函数是当HTML 中发生事件时自动被调用的函数。

由“事件”(event)“触发”(triggered)是经常被用到的术语。

在您<head> 中由于jQuery 是为事件处理特别设计的,通常是把jQuery 代码置于网页<head> 部分的“事件处理”函数中:实例TIY在上面的例子中,定义了一个处理HTML 按钮的点击事件的click 函数:click 函数内部的代码隐藏所有<p> 元素:所有事件函数都在文档自身的“事件处理器”内部进行定义:单独文件中的函数如果您的网站包含许多页面,并且您希望您的jQuery 函数易于维护,那么请把您的jQuery 函数放到独立的 .js 文件中。

当我们在教程中演示jQuery 时,会将函数直接添加到<head> 部分中。

不过,把它们放到一个单独的文件中会更好,就像这样(通过src 属性来引用文件):实例jQuery 使用$ 符号作为jQuery 的简介方式。

某些其他JavaScript 库中的函数(比如Prototype)同样使用$ 符号。

jQuery 使用名为noConflict() 的方法来解决该问题。

var jq=jQuery.noConflict(),帮助您使用自己的名称(比如jq)来代替$ 符号。

TIY结论由于jQuery 是为处理HTML 事件而特别设计的,那么当您遵循以下原则时,您的代码会更恰当且更易维护:•把所有jQuery 代码置于事件处理函数中•把所有事件处理函数置于文档就绪事件处理器中•把jQuery 代码置于单独的 .js 文件中•如果存在名称冲突,则重命名jQuery 库jQuery 参考手册 - 事件jQuery 事件方法事件方法会触发匹配元素的事件,或将函数绑定到所有匹配元素的某个事件。

触发实例:上面的例子将触发id="demo" 的button 元素的click 事件。

绑定实例:上面的例子会在点击id="demo" 的按钮时隐藏所有图像。

事件处理方法把事件处理器绑定至匹配元素。

jQuery 效果jQuery 是为事件处理特别设计的。

jQuery 事件函数隐藏、显示、切换、滑动以及动画。

WOW!实例jQuery hide()演示简单的jQuery hide() 函数。

jQuery hide()另一个hide() 演示。

如何隐藏部分文本。

jQuery slideToggle()演示简单的slide panel 效果。

jQuery fadeTo()演示简单的jQuery fadeTo() 函数。

jQuery animate()演示简单的jQuery animate() 函数。

jQuery 隐藏和显示通过hide() 和show() 两个函数,jQuery 支持对HTML 元素的隐藏和显示:实例TIYhide() 和show() 都可以设置两个可选参数:speed 和callback。

语法:callback 参数是在hide 或show 函数完成之后被执行的函数名称。

您将在本教程下面的章节学习更多有关callback 参数的知识。

speed 参数可以设置这些值:"slow", "fast", "normal" 或milliseconds:实例TIYjQuery 切换jQuery toggle() 函数使用show() 或hide() 函数来切换HTML 元素的可见状态。

隐藏显示的元素,显示隐藏的元素。

语法:speed 参数可以设置这些值:"slow", "fast", "normal" 或毫秒。

实例TIYcallback 参数是在hide 或show 函数完成之后被执行的函数名称。

您将在本教程下面的章节学习更多有关callback 参数的知识。

jQuery 滑动函数- slideDown, slideUp, slideTogglejQuery 拥有以下滑动函数:speed 参数可以设置这些值:"slow", "fast", "normal" 或毫秒。

callback 参数是在hide 或show 函数完成之后被执行的函数名称。

您将在本教程下面的章节学习更多有关callback 参数的知识。

slideDown() 实例TIYslideUp() 实例TIYslideToggle() 实例TIYjQuery Fade 函数- fadeIn(), fadeOut(), fadeTo()jQuery 拥有以下fade 函数:speed 参数可以设置这些值:"slow", "fast", "normal" 或毫秒。

fadeTo() 函数中的opacity 参数规定减弱到给定的不透明度。

callback 参数是在hide 或show 函数完成之后被执行的函数名称。

您将在本教程下面的章节学习更多有关callback 参数的知识。

fadeTo() 实例TIYfadeOut() 实例TIYjQuery 自定义动画jQuery 函数创建自定义动画的语法:关键的参数是params。

它定义了产生动画的属性。

可以同时设置多个此类属性:第二个参数是duration。

它定义用来应用于动画的时间。

它设置的值是:"slow", "fast", "normal" 或毫秒。

实例 1TIY实例 2TIYHTML 元素默认是静态定位,且无法移动。

如需使元素可以移动,请把CSS 的position 设置为relative 或absolute。

jQuery 参考手册 - 效果jQuery Callback 函数动画创造了对callback 函数的需求。

许多jQuery 函数涉及动画。

这些函数也许会将speed 或duration 作为可选参数。

例子:$("p").hide("slow")speed 或duration 参数可以设置许多不同的值,比如"slow", "fast", "normal" 或毫秒。

实例TIY由于JavaScript 语句(指令)是逐一执行的- 按照次序,动画之后的语句可能会产生错误或页面冲突,因为动画还没有完成。

为了避免这个情况,您可以以参数的形式添加Callback 函数。

jQuery Callback 函数当动画100% 完成后,即调用Callback 函数。

相关主题