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 函数中:

$(document).ready(function(){

--- jQuery functions go here ----

});

这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。

下面是两种假如文档完全加载之前运行函数的话,操作失败的情况:

  • 试图隐藏一个不存在的元素。
  • 获得未完全加载的图像的大小。

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 元素的背景颜色更改为红色:

实例

$("p").css("background-color","red");

更多的实例

语法描述
$(this) 当前 HTML 元素
$("p") 所有 <p> 元素
$("p.intro") 所有 class="intro" 的 <p> 元素
$(".intro") 所有 class="intro" 的元素
$("#intro") id="intro" 的第一个元素
$("ul li:first") 每个 <ul> 的第一个 <li> 元素
$("[href$='.jpg']") 所有带有以 ".jpg" 结尾的 href 属性的属性
$("div#intro .head") id="intro" 的 <div> 元素中的所有 class="head" 的元素
 

jQuery 名称冲突

jQuery 使用 $ 符号作为 jQuery 的简介方式。

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

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

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

jQuery 事件

下面是 jQuery 中事件函数的一些例子:

Event 函数绑定函数至
$(document).ready(function)

文档的就绪事件

(当 HTML 文档就绪可用)

$(selector).click(function) 被选元素的点击事件
$(selector).dblclick(function) 被选元素的双击事件
$(selector).focus(function) 被选元素的获得焦点事件
$(selector).mouseover(function) 被选元素的鼠标悬停事件

jQuery 隐藏和显示

通过 hide() 和 show() 两个函数,jQuery 支持对 HTML 元素的隐藏和显示:

实例

$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});

TIY

hide() 和 show() 都可以设置两个可选参数:speed 和 callback。

语法:

$(selector).hide(speed,callback)

$(selector).show(speed,callback)

callback 参数是在 hide 或 show 函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback 参数的知识。

speed 参数可以设置这些值:"slow", "fast", "normal" 或 milliseconds:

实例

$("button").click(function(){
$("p").hide(1000);
});

jQuery 切换

jQuery toggle() 函数使用 show() 或 hide() 函数来切换 HTML 元素的可见状态。

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

语法:

$(selector).toggle(speed,callback)

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

实例

$("button").click(function(){
$("p").toggle();
});

TIY

callback 参数是在 hide 或 show 函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback 参数的知识。

jQuery 滑动函数 - slideDown, slideUp, slideToggle

jQuery 拥有以下滑动函数:

$(selector).slideDown(speed,callback)

$(selector).slideUp(speed,callback)

$(selector).slideToggle(speed,callback)

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

callback 参数是在 hide 或 show 函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback 参数的知识。

slideDown() 实例

$(".flip").click(function(){
$(".panel").slideDown();
});

TIY

slideUp() 实例

$(".flip").click(function(){
$(".panel").slideUp()
})

TIY

slideToggle() 实例

$(".flip").click(function(){
$(".panel").slideToggle();
});

TIY

jQuery Fade 函数 - fadeIn(), fadeOut(), fadeTo()

jQuery 拥有以下 fade 函数:

$(selector).fadeIn(speed,callback)

$(selector).fadeOut(speed,callback)

$(selector).fadeTo(speed,opacity,callback)

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

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

callback 参数是在 hide 或 show 函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback 参数的知识。

fadeTo() 实例

$("button").click(function(){
$("div").fadeTo("slow",0.25);
});

TIY

fadeOut() 实例

$("button").click(function(){
$("div").fadeOut(4000);
});
 

jQuery 自定义动画

jQuery 函数创建自定义动画的语法:

$(selector).animate({params},[duration],[easing],[callback])

关键的参数是 params。它定义了产生动画的属性。可以同时设置多个此类属性:

animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});

第二个参数是 duration。它定义用来应用于动画的时间。它设置的值是:"slow", "fast", "normal" 或 毫秒。

实例 1

<script type="text/javascript">
$(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");
});
});
</script> 

TIY

实例 2

<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({left:"100px"},"slow");
$("#box").animate({fontSize:"3em"},"slow");
});
});
</script> 

TIY

HTML 元素默认是静态定位,且无法移动。

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

jQuery 效果 - 来自本页

函数描述
$(selector).hide() 隐藏被选元素
$(selector).show() 显示被选元素
$(selector).toggle() 切换(在隐藏与显示之间)被选元素
$(selector).slideDown() 向下滑动(显示)被选元素
$(selector).slideUp() 向上滑动(隐藏)被选元素
$(selector).slideToggle() 对被选元素切换向上滑动和向下滑动
$(selector).fadeIn() 淡入被选元素
$(selector).fadeOut() 淡出被选元素
$(selector).fadeTo() 把被选元素淡出为给定的不透明度
$(selector).animate()

对被选元素执行自定义动画

jQuery Callback 函数

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

典型的语法:

$(selector).hide(speed,callback)

callback 参数是一个在 hide 操作完成后被执行的函数。

错误(没有 callback)

$("p").hide(1000);
alert("The paragraph is now hidden");

TIY

正确(有 callback)

$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});

jQuery 包含很多供改变和操作 HTML 的强大函数。

改变 HTML 内容

语法

$(selector).html(content)

html() 函数改变所匹配的 HTML 元素的内容(innerHTML)。

实例

$("p").html("W3School");

TIY

添加 HTML 内容

语法

$(selector).append(content)

append() 函数向所匹配的 HTML 元素内部追加内容。

语法

$(selector).prepend(content)

prepend() 函数向所匹配的 HTML 元素内部预置(Prepend)内容。

实例

$("p").append(" W3School");

TIY

语法

$(selector).after(content)

after() 函数在所有匹配的元素之后插入 HTML 内容。

语法

$(selector).before(content)

before() 函数在所有匹配的元素之前插入 HTML 内容。

实例

$("p").after(" W3School.");

TIY

jQuery HTML 操作 - 来自本页

函数描述
$(selector).html(content) 改变被选元素的(内部)HTML
$(selector).append(content) 向被选元素的(内部)HTML 追加内容
$(selector).prepend(content) 向被选元素的(内部)HTML “预置”(Prepend)内容
$(selector).after(content) 在被选元素之后添加 HTML
$(selector).before(content) 在被选元素之前添加 HTML

jQuery CSS 操作

jQuery 拥有三种供 CSS 操作的重要函数:

  • $(selector).css(name,value)
  • $(selector).css({properties})
  • $(selector).css(name)

CSS 操作实例

函数 css(name,value) 为所有匹配元素的给定 CSS 属性设置值:

实例

$(selector).css(name,value)
$("p").css("background-color","yellow");

TIY

函数 css({properties}) 同时为所有匹配元素的一系列 CSS 属性设置值:

实例

$(selector).css({properties})
$("p").css({"background-color":"yellow","font-size":"200%"});

TIY

函数 css(name) 返回指定的 CSS 属性的值:

实例

$(selector).css(name)
$(this).css("background-color");

TIY

jQuery Size 操作

jQuery 拥有两种供尺寸操作的重要函数:

  • $(selector).height(value)
  • $(selector).width(value)

Size 操作实例

函数 height(value) 设置所有匹配元素的高度:

实例

$(selector).height(value)
$("#id100").height("200px");

TIY

函数 width(value) 设置所有匹配元素的宽度:

实例

$(selector).width(value)
$("#id200").width("300px");

TIY

jQuery CSS 函数 - 来自本页

CSS 属性描述
$(selector).css(name,value) 为匹配元素设置样式属性的值
$(selector).css({properties}) 为匹配元素设置多个样式属性
$(selector).css(name) 获得第一个匹配元素的样式属性值
$(selector).height(value) 设置匹配元素的高度
$(selector).width(value) 设置匹配元素的宽度

jQuery AJAX 函数

jQuery 拥有供 AJAX 开发的丰富函数(方法)库。

jQuery AJAX 实例

通过 AJAX 来改变文本

TIY

上面的例子摘自我们的 AJAX 教程,但使用 jQuery 进行了修改。

什么是 AJAX?

AJAX = Asynchronous JavaScript and XML.

AJAX 是一种创建快速动态网页的技术。

AJAX 通过在后台与服务器交换少量数据的方式,允许网页进行异步更新。这意味着有可能在不重载整个页面的情况下,对网页的一部分进行更新。

您可以在我们的 AJAX 教程 中学习更多有关 AJAX 的知识。

AJAX 和 jQuery

jQuery 提供了供 AJAX 开发的丰富函数(方法)库。

通过 jQuery AJAX,使用 HTTP Get 和 HTTP Post,您都可以从远程服务器请求 TXT、HTML、XML 或 JSON。

而且您可以直接把远程数据载入网页的被选 HTML 元素中!

写的更少,做的更多

jQuery 的 load 函数是一种简单的(但很强大的)AJAX 函数。它的语法如下:

$(selector).load(url,data,callback)

请使用选择器来定义要改变的 HTML 元素,使用 url 参数来指定您的数据的 web 地址。

TIY

只有当您希望向服务器发送数据,才需要使用 data 参数。只有当您需要在完毕之后触发一个函数时,您才需要使用 callback 参数。

Low Level AJAX

$.ajax(options) 是低层级 AJAX 函数的语法。

$.ajax 提供了比高层级函数更多的功能,但是同时也更难使用。

option 参数设置的是 name|value 对,定义 url 数据、密码、数据类型、过滤器、字符集、超时以及错误函数。

TIY

jQuery AJAX 请求

请求描述
$(selector).load(url,data,callback) 把远程数据加载到被选的元素中
$.ajax(options) 把远程数据加载到 XMLHttpRequest 对象中
$.get(url,data,callback,type) 使用 HTTP GET 来加载远程数据
$.post(url,data,callback,type) 使用 HTTP POST 来加载远程数据
$.getJSON(url,data,callback) 使用 HTTP GET 来加载远程 JSON 数据
$.getScript(url,callback) 加载并执行远程的 JavaScript 文件

(selector) jQuery 元素选择器语法

(url) 被加载的数据的 URL(地址)

(data) 发送到服务器的数据的键/值对象

(callback) 当数据被加载时,所执行的函数

(type) 被返回的数据的类型 (html,xml,json,jasonp,script,text)

(options) 完整 AJAX 请求的所有键/值对选项