Jquery 入门示例详解

实例介绍

[下载地址]

【实例简介】
【实例截图】

【核心代码】

一、环境设置

下载 jQuery

地址：http://jquery.com/

中文地址：http://wiki.jquery.org.cn/doku.php

我下载下来的文件为：jquery-1.2.5.js，这是一个 javascript 脚本文件。

将这个脚本文件复制到你的网页文件夹中，在需要使用 JQuery 的网页中增加

现在就可以在页面中使用 JQuery 了！

二、使用 document 对象

首先让我们实现 Helloworld。当网页加载之后，显示一个提示框，内容为

Hello, world。

在文档载入后，马上执行代码，可以通过 document 对象的 ready 事件来

完成。

取得 document 对象的方法非常简单，$( document )，如下就可以取得

document 对象的 ready 事件 $( document ).ready。

让我们完成它。这个页面在文档载入之后会弹出一个对话框，并显示Hello,

world。

<html>

<head>

<title>Hello</title>

$(document).ready( function() {

alert( "Hello, world." );

} );

</script>

/head>

</body>

</html>

由于 document 对象的 ready 事件非常常用，它还可以简化为 $( )，上述代码也可以如

下完成。

<html>

<head>

<title>Hello</title>

$( function() {

alert( "Hello, world." );

} );

</script>

/head>

</body>

</html>

三、使用选择器取得页面中的元素

jQuery 使用两种方式来选择 html 的 element，第一种使用 CSS 和 Xpath

选择器联合起来形成一个字符串来传送到jQuery的构造器（如：$("div > ul a")）；

第二种是用 jQuery 对象的几个 methods(方法)。这两种方式还可以联合起来混合

使用。

使用 CSS 和 XPath 选择器选择的方法有许多种用法，关于详细的 CSS 选

择器请参考附录。

首先来看通过元素的 ID 取得元素：$( “#id” )，在名字前面增加 # 表示

这是一个 id，注意引号不要丢掉。

在页面中增加一个 id 为 msg 的 span 元素，将 helloworld 显示在 span

元素中，可以如下实现：

<html>

<head>

<title>Hello</title>

$( function() {

$("#msg").html("Hello, world."); } );

</script>

</head>

<body>

</body>

</html>

注意：#id 需要用引号引起来，有参数的 html 函数用来为元素的 innerHTML 赋值。

下一个例子：

比如我们有一个 list ，它的 ID 是 orderedlist，那么取得这个 list 的引用

的 jQuery 就是 $( “#orderedlist” )，为它增加一个值为 red 的 class 属性

$("#orderedlist").addClass("red")，addClass 函数用来为元素增加 CSS 设置。取

得 list 中的最后一个 li 的引用，$( “#orderedlist li:last” )。

下面的例子将最后一个 li 的内容更改为 hello, world.

<html>

<head>

<title>Hello</title>

$( function() { alert("wait");

$( "#orderedlist li:last" ).html("hello, world.");

} );

</script>

</head>

<body>

<li>First element</li>

<li>Second element</li>

<li>Third element</li>

</ol>

</body>

</html> 使用方法来取得元素

使用方法可以取得更强大的功能，首先我们看 find函数，通过 find 可以

在已经取得元素集合中进行条件查找，例如：$("#orderedlist").find(“li”)，查找在

orderedlist 中的 li 元素，相当于 $( “#orderedlist li” )。查找的结果为元素的集合。

遍历返回的元素集合 each()

each 处理函数可以传递一个表示顺序号的参数，顺序号从 0 开始。

在函数中通过 this 取得当前被处理的元素对象，例如，下面的函数，将找到 id

为 orderedlist 的元素中的 li 元素，并将其内容依次增加 Hello,world 和顺序号

码。

$( function() {

$("#orderedlist").find("li").each(function(i) {

$(this).html( $(this).html() " BAM! " i );

});

注意：在 each 函数中 this 表示当前正在处理的元素，参数 i 表示当前处

理的元素在集合中的序号。

其中没有参数的 html()方法是获取对象的 html 代码，而有参数的方法

html( 内容 )则是设置元素的 html。

下面的例子通过一个超级链接来实现表单的重置

超级链接的内容为

<a id="reset" href="#">Reset!</a>

取得这个超级链接的方法为 $( “#reset” )，点击这个超级链接的事件为

click，即 $( “#reset” ).click，写出其处理函数为

$( “#reset” ).click( function(){

} )

取得表单 id 为 myform 的表单表示为 $( “#myform” )[0]，调用其 reset 方

法就是 $("#form")[0].reset()，注意，由于 $() 返回的结果为集合，所以取得集合

中第一个元素就是 $()[0] 了。

因此合起来的代码为：

// use this to reset a single form

$("# reset ").click(function() {

$("#form1")[0].reset();

});

如果要将所有的表单重置，那就通过元素的标记名取得元素，结合 each 函数，

就是如下的代码了。

$("#reset").click(function() {

$("form").each(function() {

this.reset();

});

全部代码如下：

<html>

<head>

<title>Hello</title>

$( function() {

$("#reset").click(function() {

$("#form1")[0].reset();

});

</script>

</head>

<body>

<a id="reset" href="#">Reset!</a> <form id="form1">

</form>

</body>

</html> 使用基本的过滤器

:first 第一个匹配的元素

:last 最后一个匹配的元素

:even 匹配的序号为偶数

:odd 匹配的序号为奇数

例如：

设置表格所有的偶数行的背景色

$("tr:even").css("background-color", "#bbbbff");

设置表格所有奇数行的背景色

$("tr:odd").css("background-color", "#bbbbff");

设置斑马线表格

$("tr:even").css("background-color", "#e7e7ff");

$("tr:odd").css("background-color", "#f7f7f7");

实现斑马线表格，并且当鼠标位于某行的时候，此行背景变为灰色

:not( 表达式 ) 从匹配的集合中删除所有符合表达式的元素

例如：

选择紧接在没有被选中的复选框的后面的 lable ，将其背景色设置为黄色

$("input:not(:checked) span").css("background-color", "yellow");

:eq 匹配元素在匹配集合中的索引号等于指定值的元素

:lt 匹配元素在匹配集合中的索引号小于指定值的元素

:gt 匹配元素在匹配集合中的索引号大于指定值的元素

例如：

将前 4 个格的颜色设置为红色

$("td:lt(4)").css("color", "red");

:header 匹配标题行，例如 h1, h2, h3 ……

例如：

设置所有标题的背景色，前景色

$(":header").css({ background:'#CCC', color:'blue' })

下面的例子设置表格颜色为斑马线，并且当鼠标指向某行的时候会变为灰色。

Hover（）鼠标悬停事件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>jQuery Starterkit</title>

$( function() {

$("tr:even").css("backgroundColor", "#e7e7ff");

$("tr:odd").css("backgroundColor", "#f7f7f7");

$("tbody tr").hover(

function() {

$(this).css("backgroundColor","gray");

function() {

$("tr:even").css("backgroundColor", "#e7e7ff");

$("tr:odd").css("backgroundColor", "#f7f7f7");

}

);

});

</script>

</head>

<body>

<h1>jQuery Starterkit</h1>

<thead>

<tr>

<th>Email</th>

<th>Phone</th>

<th>Total</th>

</tr>

</thead> <tbody>

<tr>

<td>devo@flexomat.com</td>

<td>http://gmail.com</td>

</tr>

<tr>

<td>henry@mountdev.net</td>

<td>http://www.gmail.com</td>

</tr>

<tr>

<td>christian@reno.gov</td>

<td>http://www.dotnet.ca</td>

</tr>

</tbody>

</table>

</body>

</html> 针对表单的筛选

:text 匹配所有的 type 为 text 的输入项

例如：

将表单中所有 type 为 text 的输入项的背景色设置为红色

$(":text")").css({background:"red"})

:checkbox 匹配所有 type 为 checkbox 的输入项

例如：

将页面中所有的复选框设置为选中状态

$(":checkbox").each( function( ) {

this.checked = true;

});

其它

:input 匹配所有 input 元素

:text 匹配所有 type 为 text 的输入项

:checkbox 匹配所有 type 为 checkbox 的输入项

:password 匹配所有 type 为 password 的输入项

:radio 匹配所有 type 为 radio 的输入项

:submit 匹配所有 type 为 submit 的输入项

:image 匹配所有 type 为 image 的输入项

:reset 匹配所有 type 为 reset 的输入项

:button 匹配所有 type 为 button的输入项

:file 匹配所有 type 为 file的输入项

:hidden 匹配所有 type 为 hidden的输入项

针对输入项状态的条件

:enabled 匹配所有 type 为 hidden的输入项

:disabled 匹配所有被禁用的元素

:checked 匹配所有被选中的单选框和复选框

:selected 匹配所有被选中的元素

示例

将所有被禁用的元素背景设置为灰色

$("input:disabled").css({background:"grey"})

进行进一步的筛选

jQuery 还提供了 filter() 和 not() 方法。

filter() 方法使用过滤表达式来进行进一步的筛选，例如：找到 id 为 raq 的元

素为 $( “#raq” )，其中子元素的标记为 dd 的元素为 $( “#raq”).find( “dd” )

not() 方法正好相反，用来从匹配的集合中删除所有符合过滤表达式的被选择项。

设置表格中除去第一行和最后一行的所有行的背景色

$("tr").not( ":last, :first" ) .css("background-color", "red");

考虑一个无序的 list，我们需要选择所有的没有 ul 子元素的 li 元素。

$( “li” ).not( “[ul]” )

这个语法来自于 xpath 表达式，可以用于在子元素和属性上实现过滤器，

例如，取得所有有 name 属性的超级链接 $( “a[@name]” )。

还可以通过 *= 实现部分匹配，例如取得超级链接的开始部分为

“/content/gallery” 的超级链接，就是 $( “a[href^=/content/gallery]”)

常用的属性过滤器

[attr] 匹配拥有指定属性的元素

[attr=value] 匹配属性值为 value 的元素

[attr!=value] 匹配不拥有属性 value 的元素

[attr^=value] 匹配属性的开头部分为 value 的元素

[attr$=value] 匹配属性的结尾部分为 value 的元素

[attr*=value] 匹配属性中包含 value 的元素

[selector1][selector2][selectorN] 连续使用属性过滤器

取得上一个或者下一个元素

让我们将一个元素中的某些子元素隐藏起来，然后再设置另外一些子元素的

点击事件处理。

下面的例子使用到了 hide() 和 show(), hide() 函数将元素隐藏起来，执行的

是 css 样式中的 display:none。

next() 函数返回下一个元素，hide() 函数用来隐藏元素。end() 结束当前的

子处理，重新开始一个新处理。

找到 id 为 raq 的元素为 $( “#raq” )，其中子元素的标记为 dd 的元素为

$( “#raq”).find( “dd” )，将其隐藏起来为 $( “#raq” ).find( “dd” ).hide()，结束对 dd

元素的操作准备重新开始另外一组操作使用 end()，再查找 raq 中元素标记名为

dt 的元素为$( “#raq” ).find( “dd” ).hide().find( “dt” )，设置其点击事件处理为：

$( “#raq” ).find( “dd” ).hide().find( “dt” ).click( function() { } );

取得当前元素的下一个元素为 $(this).next()，下面为完整的例子。

$( function() {

$('#faq').find('dd').hide().end().find('dt').click(function() {

var answer = $(this).next();

if (answer.is(':visible')) {

answer.slideUp();

} else {

answer.slideDown();

}

});

完整的示例如下：

<html>

<head>

<title>Hello</title>

$(document).ready( function() {

$('#faq').find('dd').hide().end().find('dt').click(function() {

var answer = $(this).next();

if (answer.is(':visible')) {

answer.slideUp();

} else {

answer.slideDown();

}

});

</script>

</head>

<dt>What shouldn't I do to the bird?</dt>

<dd>Never use oils or lotions which contain oils on your bird. They gunk up the feathers,

and ruin their insulating properties. This means a chilled bird. Never wait out a cat bite--those

require immediate veterinary attention--a bird can die within two days because a cat's mouth is so

filthy and full of bacteria. Don't bother with over-the-counter medication. It really doesn't work,

and in some cases, may upset the delicate bacterial balance in the bird's body, or even worsen the

situation. Never try to treat a fracture at home.</dd>

<dt>My bird is healthy. I don't need to go to a vet, do I?</dt>

<dd>Schedule a "well-bird" checkup. Prevention is the best medicine. Even though the bird might

appear outwardly healthy, it may have a low-grade infection or something not so readily apparent. Your

bird's health and your peace of mind will be worth it.</dd>

<dt>My bird's leg is being rubbed raw by the leg band. Can I take it off?</dt>

<dd>No. Don't attempt this, especially if the leg is broken or swollen. The vet will be able

to remove the band, and deal with whatever injury maybe lurking under the banded area.</dd>

<dt>How do I pull a broken blood feather?</dt>

<dd> The remedy is simple--yank! It's most easily done

with two people. One to restrain the bird and the other to pull the feather. Use pliers, or a

hemostat. Tweezers won't work on primaries. Make certain that the wing bones are firmly supported

or you can break the wing. Clamp onto the feather and give a sharp tug in the direction of the

feather. The feather will come out. Next, apply gentle, direct pressure to the follicle where the

feather was to stop the bleeding. Dab some styptic powder on it, as it will help stop the bleeding

as well. Let the bird rest. Ask your vet or breeder to demonstrate exactly how to pull a blood

feather if you're apprehensive about doing it.</dd>

</dl>

</body>

</html>

取得当前元素的父级（上一级）元素为 parents()

例如取得元素名为 p 的父级元素为 parents( “p” )

下面的例子将 id 为 msg 的元素的上一级元素颜色设置为 green

<html>

<head>

<title>Hello</title>

$(document).ready( function() {

$("#msg").parents("div").css("color", "green");

});

</script>

</head>

<body>

<p>

One

<br/>

<div>

Hello, beijing.

Hello, world.

</div>

Three

<br/>

</p>

</body>

</html>

在 VisualStudio 2005 中， ASP.NET 有一个非常方便的树型控件 TreeView，我

们可以开启它的 checkbox 功能，实现选择。但是，在默认方式下，TreeView 没

有自动选择下级节点的功能，我们可以使用 jQuery 为它增加这个功能。

分析 TreeView 生成的 Html 可以发现，每层节点都保存在 table 元素中，如果

节点又下层节点，则 table 元素的下一个元素为 div 元素，div 元素中包含一个

表示下层节点的 table 元素，下层节点的复选框就位于其中。

通过 jQuery 的 parents 函数和 next 函数，可以完成以上（树）的选择。

页面内容如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs"

Inherits="TreeViewDemo._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>Untitled Page</title>

$(function() {

$(":checkbox").click(function() {

var v = this.checked;

$(this).parents("table").next("div").find(":checkbox").each(function() {

this.checked = v;

});

</script>

</head>

<body>

<div>

<asp:TreeView ID="TreeView1" runat="server"

Height="244px"

Width="158px"

ShowCheckBoxes="All" >

<Nodes>

<asp:TreeNode>

<asp:TreeNode Text="One" Value="One">

<asp:TreeNode Text="1" Value="1"></asp:TreeNode>

<asp:TreeNode Text="2" Value="2"></asp:TreeNode>

<asp:TreeNode Text="3" Value="3"></asp:TreeNode>

</asp:TreeNode>

<asp:TreeNode Text="Two" Value="Two">

<asp:TreeNode Text="1" Value="1"></asp:TreeNode>

<asp:TreeNode Text="2" Value="2"></asp:TreeNode>

</asp:TreeNode>

<asp:TreeNode Text="Three" Value="Three"></asp:TreeNode>

<asp:TreeNode Text="Four" Value="Four"></asp:TreeNode>

</asp:TreeNode>

</Nodes>

</asp:TreeView>

</div>

</form>

</body> </html>

四、取得和设置元素的内容

组成网页的元素

我们在网页上看到的内容都来自于网页的元素，例如 table 元素为我们在网页上

生成表格，select 元素生成列表框或者下拉列表框，input 元素生成输入项等等。

其中，表单中的输入项比较特殊，大部分的表单元素有一个称为 value 的属性。

表单元素的 value 属性是一个可读可写的字符串，指定了表单元素包含或表示

的“值”,浏览器在显示网页的时候，将 value 的值显示出来。在提交表单的时

候，将把这个字符串发送到 Web 服务器。

例如：对于 Text 元素或者 TextArea 元素来说，该属性存放的是用户输入的文

本，对于 Button 元素来说，该属性指定了在按钮上显示的文本。

动态生成网页内容

1. 通过 HTML 文本串生成内容

innerHTML 属性

通过 innerHTML 属性可以读取或者设置元素标记之间的内容。

尤其对于 DIV 和 SPAN 元素，经常使用元素的 innerHTML 属性来操作其内容

<html>

<head>

function createHtml()

{

var m = txtIn.value;

msg.innerHTML = m;

}

</script>

</head>

<body>

</html>

2. 通过 DOM 对象来生成

为了动态操作网页，W3C 开发了特别针对 XHTML(以及 HTML ) 的

DOM。这个 DOM 定义了一个 HTMLDocument 和一个 HTMLElement 作为这

种实现的基础。每个 HTML 元素通过它自己的 HTMLElement 类型来表示，例

如 HTMLDivElement 代表了 <div>，但有少数元素除外，它们只包含

HTMLElement 提供的属性和方法。

下面的例子通过 DOM 来生成一个 <h1> 的标题。

<html>

<head>

function createHtml()

{

var h = document.createElement("h1");

var hText = document.createTextNode("Hello");

h.appendChild( hText );

msg.appendChild( h );

}

</script>

</head>

<body>

</body>

</html>

对于输入项目，也经常使用其 value 属性来控制其内容

<html>

<head>

function createHtml()

{

msg.value = "Hello, world.";

}

</script>

</head>

</body>

</html>

常用元素解析

select 元素的处理

select 元素表示用户可以选择的选项集合，该集合由 Option 元素表示， Select 元

素可以用两种截然不同的方式操作，type 属性的值如果为 multiple ，就允许用

户进行多项选择，否则用户只能选择一个选项。

size 属性确定显示效果为下拉列表框，还是一个列表框。当没有设置 size 属性，

或者 size 属性小于等于 1 时，显示为一个下拉列表框，大于 1 时，显示为列表

框。

当用户选择不同的选项时，Select 元素将触发它的 onchange 事件处理程序。对

于“单选”的 Select 元素，可读可写的属性 selectedIndex 用数字指定了当前被

选中的选项，对于“多选”的 Select 元素，一个 selectedIndex 属性不足以表示

被选中的项的整个集合。在这种情况下，必须遍历 options 数组中的所有元素，

检查每个 option 对象的 selected 属性的值。

除了 selected 属性外，option 元素还有 text 属性，用于指定 select 元素显示的

纯文本串。value 属性也是可读可写的字符串，指定了提交表单时要发送给服务

器的字符串。value 属性是一个存储数据的好地方。

删除 select 中所有的选项

通过将 options.length 设置为 0 ,可以删除所有的 option 对象，如下代码可以删

除 select 元素中的所有选项

address.options.length = 0;

删除某个 option 元素

通过将某个 option 元素设置为 null ，从而在 select 元素中删除一个 option 对

象，在删除一个 option 对象之后，options 中位于这个 option 对象之后的元素

就会自动前移。

创建 option 元素

Option 元素定义了构造函数 Option()，可以动态创建新的 Option 元素，把它们附加在 options 数组的尾部，可以给 select 元素增加新的选项。

var optiona = new Option(

“One”, // text 属性

“One value”, // value 属性

false, // defaultSelected 属性，可选

false); // selected 属性，可选

countries.options[ countries.options.length] = options;

创建一个项目

var option = new Option(optionData.caption, optionData.value);

selectElement.add(option); // 注意，此时必须使用 add 方法加入

var oOption = document.createElement(“option”);

var oText = document.createElement(“One”);

oOption.appendChild( oText );

table 元素

使用经典的方法来创建 table 代码会非常冗长，而且有些难于理解。 HTML DOM

为 table, tbody, tr 增加了一些属性和方法以便于操作。

几个基本概念：

Caption 元素，应该为 table 元素的子元素，可以给 table 一个简单的描述。通

过 align, vlign 属性可以指定对齐方式。

Thead 表头元素，任何给定的 table 对象都只能定义一个 thead。

TFoot 表尾元素，任何给定的 table 对象都只能定义一个 tfoot。

TBody 表体元素，Tbody 元素会为表格自定定义，即使没有显式定义 tbody 元

素。

Table 元素

属性

caption 获取表格的 caption 对象

tHead

tFoot

tBodies 获取表格中所有 tBody 对象的集合，此集合中的对象以

HTML 源顺序排列。

rows 获取来自于 table 对象的 tr 对象集合

cells 获取整个表格中所有单元格集合

方法：

createCaption()

createTHead() 创建 thead 元素并加入表格中 createTFoot()

insertRow( position )

deleteCaption()

deleteTHead()

deleteTFoot()

deleteRow( position )

tbody 元素

属性：

rows

方法

insertRow( position)

deleteRow( position )

tr 元素

属性：

cells tr 元素中所有单元格的集合

方法：

insertCell( position) 在指定位置插入新的单元格

deleteCell( position ) 删除指定位置的单元格

文本框元素

都采用 text 属性来表示其内容。

在 jQuery 中

取得表单元素的值，使用 val()

设置表单元素的值，使用 attr( 属性名，属性值 )

例如：

清除所有文本框的值

$( ":text").attr("value", "");

取得元素的内容，例如 DIV 或者 SPAN 元素的内容，没有参数的 html() 用来

取得元素的内容，有参数的 html() 用来设置元素的内容

val() 取得列表框选中的 Va lue

var styleValue = $('#styleDropdown').val();

styleValue 为一个集合

禁用输入元素

dropdownSet.attr("disabled",true);

注：在 jQuery 中遍历一个集合

$.each(container,callback)

遍历一个容器，将容器中的数据元素传递给 callback 函数进行处理

container (Array|Object) 对于一个数组，将遍历其中的数据项目，对于一个元素，将遍历其属性。

callback (Function) 用来处理容器中元素的函数，如果处理得是一个数组，函数将处理数组中的每一

个元素，如果是容器是一个对象，将处理对象的每一个属性。

函数的第一个参数是元素在容器中的索引，或者对象的属性名称，第二个参数为项目或者属性的值，在函

数内容，上下文 this 表示当前作为第二个参数传递的对象。五、元素的事件

元素的 onXxxxx 事件同样有效，但是 jQuery 不喜欢 on, 所以在 jQuery 中直

接使用事件的名字。例如 DHTML 中的 onclick 事件，在 Query 中就是 click。

然后我们实现这样一个效果，当鼠标移动到一段文本中的一个超级链接上时，它

的父级元素也就是整段文本将突出显示。

<html>

<head>

<title>Hello</title>

$( function() {

$("a").hover(function() {

$(this).parents("p").addClass("highlight");

}, function() {

$(this).parents("p").removeClass("highlight");

});

</script>

</head>

<body>

<STYLE>

.highlight

{

background-color:aqua;

color:green;

}

</STYLE>

<p>Never use oils or lotions which contain oils on your bird. They gunk up the feathers,

and ruin their insulating properties. This means a chilled bird. Never wait out a cat bite--those

require immediate veterinary attention--a <a href="#">bird</a> can die within two days because a

cat's mouth is so

filthy and full of bacteria. Don't bother with over-the-counter medication. It really doesn't work,

and in some cases, may upset the delicate bacterial balance in the bird's body, or even worsen the

situation. Never try to treat a fracture at home.</p>

<p>Schedule a "well-bird" checkup. <a href="#">Prevention</a> is the best medicine. Even

though the bird might appear outwardly healthy, it may have a low-grade infection or something not so

readily apparent. Your bird's health and your peace of mind will be worth it.</p> <p>No. Don't attempt this, especially if the leg is broken or swollen. The vet will be able

to remove the band, and deal with <a href="#">whatever</a> injury maybe lurking under the

banded area.</p>

</body>

</html>

六、使用 AJAX

AJAX 的核心使用了 XMLHttpRequest 对象，我们将其简称为 XHR，

使用下面的代码可以生成通用的 XHR 对象

var xhr;

if (window.XMLHttpRequest) {

xhr = new XMLHttpRequest();

}

else if (window.ActiveXObject) {

xhr = new ActiveXObject("Msxml2.XMLHTTP");

}

else {

throw new Error("Ajax is not supported by this browser");

}

使用 XHR 对象

XHR 对象的常用方法和事件

设置请求

open( method 请求的动作类型 , url 地址 , async 同步还是异步)

发送请求

send( content )

请求状态变化的事件

onreadystatechange

返回的文本内容属性

responseText

返回的 XML DOM

responseXML

下面是使用异步方式发送请求，并取得返回结果的例子

var xhr;

if (window.XMLHttpRequest) {

xhr = new XMLHttpRequest();

}

else if (window.ActiveXObject) {

xhr = new ActiveXObject("Msxml2.XMLHTTP"); }

else {

throw new Error("Ajax is not supported by this browser");

}

xhr.onreadystatechange = function() {

if (xhr.readyState == 4) {

if (xhr.status >= 200 && xhr.status < 300) {

document.getElementById('someContainer')

.innerHTML = xhr.responseText;

}

xhr.open('GET','/serverResource');

xhr.send();

使用 jQuery 完成向服务器请求，并将返回的文本内容赋予对象的 innerHTML

的方法为 load

load

load(url,parameters,callback)

例如，上面的例子可以如下完成

$('.injectMe').load('/someResource');

还可以过滤返回内容中特定的内容进行填充, # 表示选择返回的 html 串中

的元素

例如：

$('.injectMe').load('/someResource #div');

设置请求参数

serialize()

将表单中的成功完成的参数包装成请求参数串

serializeArray()

将表单中成功文激光参数包装成一个数组

发出 GET 请求

$.get

$.get(url,parameters,callback)

取得返回的 JSON 数据

$.getJSON(url,parameters,callback)

发出 POST 请求

$.post

$.post(url,parameters,callback)

完全的 AJAX 控制

$.ajax(options)

设置 AJAX

$.ajaxSetup(properties)

使用 ajax 请求取得的结果填充元素的内容

$.post("rate.php", {rating: $(this).html()}, function(xml) {

// format result

var result = [

"Thanks for rating, current average: ",

$("average", xml).text(),

", number of votes: ",

$("count", xml).text()

];

// output result

$("#rating").html(result.join(''));

} );

$.post 函数用于向服务器发送 post 请求，第一个参数为服务器的地址，第二个

参数为发送的参数，参数使用 {} 包围起来，每一组参数有一个名字，还有一个

使用冒号 : 分割的值，多个参数使用 , 进行分割。第三个为调用完成之后的回

调函数，函数有一个参数，参数为服务器返回的 xml 结果。

下面的代码定义一个数组

Var result = [

"Thanks for rating, current average: ",

$("average", xml).text(),

", number of votes: ",

$("count", xml).text()

];

result.join('') 将数组中的内容连接为一个字符串。

七、动起来

css 类型

addClass( 名 )

为元素增加 css 类型

remoteClass( 名 )

删除元素的 css 类型

toggleClass( 名 )

如果原来没有 css 类型，则增加，如果原来已经有了，则删除。

CSS 样式

css( 名，值)

设置 css 样式

css( 名 )

取得 css 样式

设置元素的高度和宽度

width(value)

height(value)

取得元素的高度和宽度

width()

height()

显示和隐藏元素

show()

如果元素是隐藏的，则显示匹配的所有元素，如果原来就是可视的，则没有任何

变化，这个方式不管元素原来是通过 hide() 隐藏还是通过 css 样式设置 display

为 none 都可以工作。

hide()

如果元素是可视的，则隐藏所有匹配的元素。

还可以传递参数，来设置显示和隐藏的速度效果

参数: fast, normal, slow

例如：

show('fast'); hide('slow');

切换元素的显示

toggle() 方法切换元素的显示效果，如果原来是隐藏的，则切换到显示状态，如

果原来是显示的，切换到隐藏状态。

slideDown( speed, [callback] )

通过改变匹配元素的高度来逐渐显露出元素，并且可以在完成之后调用可选的回

调函数。

在这种动画效果中，使所有匹配的元素表现出“幻灯片”效果

slideUp( speed, [callback] )

使用“幻灯片”效果隐藏匹配的元素。

slideToggle( speed, [callback] )

通过“幻灯片”效果切换匹配元素的显示，原来隐藏的改变成显示，原来显示的

改变为隐藏。

fadeIn( speed, [callback] )

通过改变元素的透明度来逐渐淡入元素，可以在完成之后调用可选的回调函数。

fadeOut( speed, [callback] )

实现“淡出”效果。

fadeTo( speed, opacity, [callback] )

通过指定的速度将元素的透明度改变。

例如：

$("p:first").click(function () {

$(this).fadeTo("slow", 0.33);

});

animate( params, [duration], [easing], [callback] )

通过 animate 实现自定义的动画效果

关于这个函数关键的问题在于将对象的样式属性被动态变化。

八、表格排序，使用 tablesorter 插件

首先文档中加入如下的 <script src="lib/jquery.tablesorter.js"

type="text/javascript"></script>，以便引用 tablesorter.js。

如果需要对 id 为 large 的表格进行排序，进行如下的设置

$("#large").tableSorter(); 现在点击表格的 head ，已经可以排序了！

注意，表格的表头部分定义为：

<thead>

<tr>

<th>Email</th>

<th>Phone</th>

<th>Total</th>

</tr>

</thead>

使用表格的斑马线

$("#large").tableSorter({

stripingRowClass: ['odd','even'], // Class names for striping supplyed as a array.

stripRowsOnStartUp: true // Strip rows on tableSorter init.

});

九、Plug me:制作自己的插件

有两种类型的 jQuery 扩展

z 实用工具函数直接使用 $ 进行定义

z 处理 jQuery 包装的集合，也称为 jQuery 命令

扩展的文件名命名规则：

文件名使用 jquery 开头，然后是插件的名字，最后是 .js，中间使用 . 分割，

例如，如果要创建一个 myplugin 的扩展，那么文件名应该为 jquery.myplugin.js.

处理 jQuery 集合的命令

语法：$.fn.命令的名字 = function( 参数 ) { }

在函数体内，this 指向待处理的 jQuery 集合

如果你需要一个一个的处理集合内的元素，可以通过 this.each 函数来完成。

比如，我们要将集合中的文本输入项设置为 readonly, 并且，如果为 readonly 状

态的话，透明度为 0.5，否则透明度为 1。

( function($){

$.fn.setReadOnly = function(readonly) {

return this.filter('input:text')

.attr('readonly',readonly)

.css('opacity', readonly ? 0.5 : 1.0);

}

})(jQuery);

下面的命令将 select 中的项目清空

$.fn.emptySelect = function() {

return this.each(function(){

if (this.tagName=='SELECT') this.options.length = 0;

});

}

再看下面的设置 select 内容的命令

$.fn.loadSelect = function(optionsDataArray) {

return this.emptySelect().each( function(){

if (this.tagName=='SELECT') {

var selectElement = this;

$.each( optionsDataArray, function(index,optionData){

var option = new Option(optionData.caption, optionData.value);

if ($.browser.msie) {

selectElement.add(option);

}

else {

selectElement.add(option,null);

}

});

}

});

}

附录： CSS 选择符

统配选择符（Universal Selector）

语法：

* { sRules }

说明：

通配选择符。选定文档目录树(DOM)中的所有类型的单一对象。

假如通配选择符不是单一选择符中的唯一组成， “*”可以省略。

示例：

*[lang=fr] { font-size:14px; width:120px; }

*.div { text-decoration:none; }

类型选择符（Type Selectors）

语法：

E { sRules }

说明：

类型选择符。以文档语言对象(Element)类型作为选择符。

示例：

td { font-size:14px; width:120px; }

a { text-decoration:none; }

属性选择符（Attribute Selectors）

语法：

E [ attr ] { sRules }

E [ attr = value ] { sRules }

E [ attr ~= value ] { sRules }

E [ attr |= value ] { sRules }

说明：

属性选择符。

选择具有 attr 属性的 E

选择具有 attr 属性且属性值等于 value 的 E

选择具有 attr 属性且属性值为一用空格分隔的字词列表，其中一个等于 value

的 E 。这里的 value 不能包含空格

选择具有 attr 属性且属性值为一用连字符分隔的字词列表，由 value 开始的 E

示例：

h[title] { color: blue; } /* 所有具有 title属性的h 对象 */

span[class=demo] { color: red; }

div[speed="fast"][dorun="no"] { color: red; }

a[rel~="copyright"] { color:black; }

包含选择符（Descendant Selectors）

语法：

E1 E2 { sRules }

说明：

包含选择符。选择所有被 E1 包含的 E2 。即 E1.contains(E2)==true 。

示例：

table td { font-size:14px; }

div.sub a { font-size:14px; }

子对象选择符（Child Selectors）

语法：

E1 > E2 { sRules }

说明：

子对象选择符。选择所有作为 E1 子对象的 E2 。

示例：

body > p { font-size:14px; }

/* 所有作为body 的子对象的 p 对象字体尺寸为 14px */

div ul>li p { font-size:14px; }

ID选择符（ID Selectors）

语法：

#ID { sRules }

说明：

ID选择符。以文档目录树(DOM)中作为对象的唯一标识符的 ID 作为选择符。

示例：

#note { font-size:14px; width:120px;}

类选择符（Class Selectors）

语法：

E.className { sRules }

说明：

类选择符。在 HTML 中可以使用此种选择符。其效果等同于 E [ class ~=

className ] 。请参阅属性选择符( Attribute Selectors )。

在 IE5 ，可以为对象的 class 属性(特性)指定多于一个值( className )，其方法

是指定用空格隔开的一组样式表的类名。例如：<div class="class1 class2">。

示例：

div.note { font-size:14px; }

/* 所有 class 属性值等于（包含）"note"的 div对象字体尺寸为 14px */

.dream { font-size:14px; }

/* 所有 class 属性值等于（包含）"note"的对象字体尺寸为14px */

选择符分组（Grouping）

语法：

E1 , E2 , E3 { sRules }

说明：

选择符分组。将同样的定义应用于多个选择符，可以将选择符以逗号分隔的方式

并为组。

示例：

.td1,div a,body { font-size:14px; }

td,div,a { font-size:14px; }

伪类及伪对象选择符（Pseudo Selectors）

语法：

E : Pseudo-Classes { sRules }

E : Pseudo-Elements { sRules }

说明：

伪类及伪对象选择符。

伪类选择符。请参阅伪类( Pseudo-Classes )。

伪对象选择符。请参阅伪对象( Pseudo-Elements )。

示例：

div:first-letter { font-size:14px; }

a.fly :hover { font-size:14px; color:red; } jQuery 参考

jQuery( expression, [context] )

$( 表达式, [context] )

This function accepts a string containing a CSS selector which is then used to match a

set of elements.

The core functionality of jQuery centers around this function. Everything in jQuery is

based upon this, or uses this in some way. The most basic use of this function is to

pass in an expression (usually consisting of CSS), which then finds all matching

elements.

By default, if no context is specified, $() looks for DOM elements within the context

of the current HTML document. If you do specify a context, such as a DOM element

or jQuery object, the expression will be matched against the contents of that context.

这个函数接受一个包含 CSS 选择器的字符串，然后使用它来匹配一个元素的集

合。

jQuery 的核心函数围绕这个函数，任何jQuery 中的函数都基于此，或者通过一

些其他的途径使用它。最基本的使用就是传递一个 CSS 的选择器，来查找匹配

的元素。

默认情况下，函数如果没有指定内容，$() 在当前的html 文档内容中查找元素，

如果指定了内容，例如一个 DOM 元素或者 jQuery 对象，就在其中查找。

jQuery( html )

Create DOM elements on-the-fly from the provided String of raw HTML.

You can pass in plain HTML Strings written by hand, create them using some

template engine or plugin, or load them via AJAX. There are limitations when

creating input elements, see the second example. Also when passing strings that may

include slashes (such as an image path), escape the slashes. When creating single

elements use the closing tag or XHTML format. For example, to create a span use

$("<span/>") or $("<span></span>") instead of without the closing slash/tag.

Do not create <input>-Elements without a type-attribute, due to Microsofts

read/write-once-rule for the type-attribute of <input>-elements, see this official

statement for details.

使用提供的原始 HTML 内容创建 DOM 元素，你可以传递纯文本的 HTML 字

符串，或者通过 AJAX 加载的内容，在创建 input 元素的时候有一个限制，不

要创建没有 type 属性的 input 元素，由于 Microsoft 读写一次的规则。对于

input 元素的 type 属性，参看 official statement jQuery( html )

$( html )

Create DOM elements on-the-fly from the provided String of raw HTML.

You can pass in plain HTML Strings written by hand, create them using some

template engine or plugin, or load them via AJAX. There are limitations when

creating input elements, see the second example. Also when passing strings that may

include slashes (such as an image path), escape the slashes. When creating single

elements use the closing tag or XHTML format. For example, to create a span use

$("<span/>") or $("<span></span>") instead of without the closing slash/tag.

通过提供一个原始的 HTML 字符串直接创建 DOM 元素。

你可以通过一个手工生成的文本的 HTML 字符串来创建元素，字符串来自于一

个模版引擎或者插件，或者通过 AJAX 来得到，在创建 input 元素的时候有一

些限制，看第二个例子，另外，当传递的字符串包含反斜线，比如图片路径时，

避免使用反斜线。当创建元素的时候要使用关闭标记，或者使用 XHTML 格式，

例如，使用 $( ‘<span/>’ ) 或者 $( ‘<span></span>’ ) 创建一个 span 元素。

示例 1

$("<div><p>Hello</p></div>").appendTo("body")

示例 2

Do not create <input>-Elements without a type-attribute, due to

Microsofts read/write-once-rule for the type-attribute of

<input>-elements, see this official statement for details. // Does NOT

work in IE:

不要创建没有 type 属性的 input 元素。

$("<input/>").attr("type", "checkbox"); // 不能在 IE 上工作:

$("<input type='checkbox'/>"); // 应该这样

jQuery( elements )

$( 元素 )

Wrap jQuery functionality around a single or multiple DOM Element(s).

This function also accepts XML Documents and Window objects as valid arguments

(even though they are not DOM Elements).

将一个或者多个 DOM 元素包装成 jQuery 集合，以便于进行处理。

这个功能也可以接收 XML 文档或者 Window 对象作为参数。

示例

将网页的背景色设置为黑色

$(document.body).css( "background", "black" );

隐藏表单中所有的 input 元素

$(myForm.elements).hide()

jQuery( callback )

$( 回调函数 )

A shorthand for $(document).ready().

$( document ).ready() 的简写。

jQuery 选择器

ancestor descendant

Matches all descendant elements specified by "descendant" of elements specified by

"ancestor".

匹配所有指定的后代，可以包括多层。注意后面的 > 只能匹配直接的孩子。

示例：

匹配表单中所有的 input 元素

$("form input").css("border", "2px dotted blue");

selector1, selector2, selectorN

Matches the combined results of all the specified selectors.

You can specify any number of selectors to combine into a single result. Note order of

the dom elements in the jQuery object aren't necessarily identical.

选择所有选择器的结果

你可以指定任意数量的选择器，然后合并得到一个结果，注意，DOM 对象的顺

序不需要统一。

示例：

匹配三种选择器的结果

$("div,span,p.myClass").css("border","3px solid red");

Selectors > child

Matches all child elements specified by "child" of elements specified by "parent".

匹配所有的孩子元素

示例：

匹配 id 为 main 元素的所有孩子

$("#main > *").css("border", "3px double red");

prev next

Matches all next elements specified by "next" that are next to elements specified by

"prev".

通过指定第一个和第二个来匹配相邻的元素

示例

匹配前面有一个 label 元素的 input 元素

$("label input").css("color", "blue").val("Labeled!")

prev ~ siblings

Matches all sibling elements after the "prev" element that match the filtering

"siblings" selector.

匹配所有指定的兄弟元素

示例：

匹配与 id 为 prev 同级的 div 元素

$("#prev ~ div").css("border", "3px groove blue");

Html 如下：

<body>

<div>div (doesn't match since before #prev)</div>

<div>div sibling</div>

<div>div sibling <div id="small">div neice</div></div>

<span>span sibling (not div)</span>

<div>div sibling</div>

</body>

val( )

Get the content of the value attribute of the first matched element.

In jQuery 1.2, a value is now returned for all elements, including selects. For multiple

selects an array of values is returned. For older versions of jQuery use the fieldValue

function of the Form Plugin.

取得第一个匹配元素的 value 属性值

在 jQuery1.2 中，对于元素集合返回一个值，包括 select 元素，对于多选的 select

元素，返回一个 values 的集合，对于老版本的 jQuery，使用 Form Plugin 的

fieldValue 函数。

示例：

function displayVals() {

var singleValues = $("#single").val();

var multipleValues = $("#multiple").val() || [];

$("p").html("<b>Single:</b> "

singleValues

" <b>Multiple:</b> "

multipleValues.join(", "));

}

$("select").change(displayVals);

displayVals(); filter( expr )

Removes all elements from the set of matched elements that do not match the

specified expression(s).

This method is used to narrow down the results of a search. Provide a

comma-separated list of expressions to apply multiple filters at once.

从匹配的集合中删除不匹配指定表达式的所有元素。

这个方法经常用来在一个搜索的结果上进行进一步的过滤，可以提供一个用 ,

分割的表达式一次性的进行多个过滤

示例：

设置所有 div 元素的背景色，然后将有 middle 类的 div 元素设置边框颜色为

红色。

$("div").css("background", "#c8ebcc")

.filter(".middle")

.css("border-color", "red");

not( expr )

Removes elements matching the specified expression from the set of matched

elements.

从匹配的集合中删除所有匹配指定表达式的元素。

示例：

设置 class 不是 green 类型，id 不为 blueone 的所有 div 元素的边框为红色。

$("div").not(".green, #blueone")

.css("border-color", "red");

常用的 JavaScript

导航到新页面

window.document.location.href = “newurl”;

替换当前的地址

替换后，就不能回到历史页面中了

window.document.replace( url )

定位：

事件参数中的位置

window.event

相对于屏幕的位置，整数

screenX

screenY

相对于引起事件的对象位置，整数

offsetX

offsetY

事件发生时，鼠标在客户区中的坐标，整数

clientX

clientY

相对于引起事件的父元素的位置，整数

style 中元素的位置，注意元素必须使用绝对定位

style.left

style.top

放置对象也必须采用绝对定位，这样才能使用元素的 offsetLeft，offsetTop，

offsetHeight，offsetWidth 特征来判断每个角的 x 和 y 坐标。

自定义的鼠标提示通过设置元素 style 的 visibility 为 visible 可以显示，设置为 hidden 可以隐藏

内容

标签： jQuery

实例下载地址

点此下载实例

不能下载？内容有错？点击这里报错 + 投诉 + 提问

好例子网口号：伸出你的我的手 — 分享！

网友评论

我要评论

小贴士

感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。

类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。

关于好例子网

本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见版权及免责申明

Jquery 入门示例详解

同类人气实例

实例介绍

实例下载地址