lijuanabc

浏览: 125767 次

最近访客更多访客>>

njdccy

henryxlx

yokoboy

zy_783095565

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jQuery 教程

jQuery教程

jQuery参考手册

一：JQuery

1.介绍

jQuery是一个JavaScript库。

jQuery极大地简化了JavaScript编程。

jQuery很容易学习。

每一章中用到的实例

<html>

<head>

<scripttype="text/javascript"src="jquery.js"></script>

<scripttype="text/javascript">

$(document).ready(function(){

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

$(this).hide();

});

</script>

</head>

<body>

<p>Ifyouclickonme,Iwilldisappear.</p>

</body>

</html>

TIY

通过点击"TIY"按钮来看看它是如何运行的。

您将学到什么

在本教程中，您将通过文字以及许多在线实例，学到如何通过使用jQuery网页应用JavaScript效果。

jQuery是一个“写的更少，但做的更多”的轻量级JavaScript库。

基本上，您将学习到如何选取HTML元素，以及如何对它们执行类似隐藏、移动以及操作其内容等任务。

您需要具备的基础知识

在您开始学习jQuery之前，您应该对以下知识有基本的了解：

·HTML

·CSS

·JavaScript

如果您需要首先学习这些科目，请在我们的首页查找这些教程。

jQuery实例

通过实例来学习！在W3School，您将找到很多能够编辑并测试的jQuery实例。

jQuery实例

jQuery参考手册

在W3School，您将找到包含所有jQuery对象和函数的完整参考手册。

jQuery参考手册

2.jQuery简介

jQuery库可以通过一行简单的标记被添加到网页中。

jQuery库-特性

jQuery是一个JavaScript函数库。

jQuery库包含以下特性：

·HTML元素选取

·HTML元素操作

·CSS操作

·HTML事件函数

·JavaScript特效和动画

·HTMLDOM遍历和修改

·AJAX

·Utilities

向您的页面添加jQuery库

jQuery库位于单个的JavaScript文件中，其中包含所有jQuery函数。

可以通过下面的标记把jQuery添加到网页中：

<head>

<scripttype="text/javascript"src="jquery.js"></script>

</head>

请注意，<script>标签应该位于页面的<head>部分。

基础jQuery实例

下面的例子演示了jQuery的hide()函数，隐藏了HTML文档中所有的<p>元素。

实例

<html>

<head>

<scripttype="text/javascript"src="jquery.js"></script>

<scripttype="text/javascript">

$(document).ready(function(){

$("button").click(function(){

$("p").hide();

});

</script>

</head>

<body>

<h2>Thisisaheading</h2>

<p>Thisisaparagraph.</p>

<p>Thisisanotherparagraph.</p>

<buttontype="button">Clickme</button>

</body>

</html>

TIY

下载jQuery

存在两份jQuery拷贝可供下载，一是缩小版（由GoogleClosureCompiler），另一个是未压缩版（供debugging或reading）。

两份拷贝均可以从jQuery.com下载（左键点击然后另存为）：

·jQueryminfied(23K)

·jQueryregular(154K)

库的替代

Google和Microsoft对jQuery的支持都很好。

如果您不愿意在自己的计算机上存放jQuery库，那么可以从GoogleorMicrosoft加载CDNjQuery核心文件。

使用Google的CDN

<head>

<scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs

/jquery/1.4.0/jquery.min.js"></script>

</head>

使用Microsoft的CDN

<head>

<scripttype="text/javascript"src="http://ajax.microsoft.com/ajax/jquery

/jquery-1.4.min.js"></script>

</head>

3.jQuery语法

通过jQuery，您可以选取（查询，query）HTML元素，并对它们执行“操作”（actions）。

jQuery语法实例

$(this).hide()

演示jQueryhide()函数，隐藏当前的HTML元素。

$("#test").hide()

演示jQueryhide()函数，隐藏id="test"的元素。

$("p").hide()

演示jQueryhide()函数，隐藏所有<p>元素。

$(".test").hide()

演示jQueryhide()函数，隐藏所有class="test"的元素。

jQuery语法

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

基础语法是：$(selector).action()

·美元符号定义jQuery

·选择符（selector）“查询”和“查找”HTML元素

·jQueryaction()执行对元素的操作

实例

$(this).hide()-隐藏当前元素

$("p").hide()-隐藏所有段落

$("p.test").hide()-隐藏所有class="test"的段落

$("#test").hide()-隐藏所有id="test"的元素

提示：jQuery使用的语法是XPath与CSS选择器语法的组合。在本教程接下来的章节，您将学习到更多有关选择器的语法。

文档就绪函数

您也许已经注意到在我们的实例中的所有jQuery函数位于一个documentready函数中：

$(document).ready(function(){

---jQueryfunctionsgohere----

});

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

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

·试图隐藏一个不存在的元素。

·获得未完全加载的图像的大小。

4.jQuery选择器

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

jQuery选择器

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

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

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

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

在HTMLDOM术语中：

选择器允许您对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"结尾的元素。

jQueryCSS选择器

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

下面的例子把所有p元素的背景颜色更改为红色：

实例

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

TIY

5.jQuery事件

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

jQuery事件函数

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

事件处理函数是当HTML中发生事件时自动被调用的函数。由“事件”（event）“触发”（triggered）是经常被用到的术语。

在您<head>中

由于jQuery是为事件处理特别设计的，通常是把jQuery代码置于网页<head>部分的“事件处理”函数中：

实例

<html>

<head>

<scripttype="text/javascript"src="jquery.js"></script>

<scripttype="text/javascript">

$(document).ready(function(){

$("button").click(function(){

$("p").hide();

});

</script>

</head>

<body>

<h2>Thisisaheading</h2>

<p>Thisisaparagraph.</p>

<p>Thisisanotherparagraph.</p>

<buttontype="button">Clickme</button>

</body>

</html>

TIY

在上面的例子中，定义了一个处理HTML按钮的点击事件的click函数：

$("button").click(function(){..somecode...})

click函数内部的代码隐藏所有<p>元素：

$("p").hide();

所有事件函数都在文档自身的“事件处理器”内部进行定义：

$(document).ready(function(){..somecode...})

单独文件中的函数

如果您的网站包含许多页面，并且您希望您的jQuery函数易于维护，那么请把您的jQuery函数放到独立的.js文件中。

当我们在教程中演示jQuery时，会将函数直接添加到<head>部分中。不过，把它们放到一个单独的文件中会更好，就像这样（通过src属性来引用文件）：

实例

<head>

<scripttype="text/javascript"src="jquery.js"></script>

<scripttype="text/javascript"src="my_jquery_functions.js"></script>

</head>

jQuery名称冲突

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

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

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

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

TIY

结论

由于jQuery是为处理HTML事件而特别设计的，那么当您遵循以下原则时，您的代码会更恰当且更易维护：

·把所有jQuery代码置于事件处理函数中

·把所有事件处理函数置于文档就绪事件处理器中

·把jQuery代码置于单独的.js文件中

·如果存在名称冲突，则重命名jQuery库

jQuery事件

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

Event函数	绑定函数至
$(document).ready(function)	文档的就绪事件（当HTML文档就绪可用）
$(selector).click(function)	被选元素的点击事件
$(selector).dblclick(function)	被选元素的双击事件
$(selector).focus(function)	被选元素的获得焦点事件
$(selector).mouseover(function)	被选元素的鼠标悬停事件

(selector)jQuery元素选择器

如需完整的参考手册，请访问我们的jQuery事件参考手册。

6.jQuery效果

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

jQuery事件函数

隐藏、显示、切换、滑动以及动画。WOW!

ClickHeretoShow/HidePanel

实例

jQueryhide()

演示简单的jQueryhide()函数。

jQueryhide()

另一个hide()演示。如何隐藏部分文本。

jQueryslideToggle()

演示简单的slidepanel效果。

jQueryfadeTo()

演示简单的jQueryfadeTo()函数。

jQueryanimate()

演示简单的jQueryanimate()函数。

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);

});

TIY

jQuery切换

jQuerytoggle()函数使用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

jQueryFade函数-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);

});

TIY

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

<scripttype="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

<scripttype="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()	对被选元素执行自定义动画

如需完整的参考手册，请访问我们的jQueryEffect参考手册。

7.jQueryCallback函数

动画创造了对callback函数的需求。

Becauseanimationstaketime.Wehavetowaitbeforewecanexecutethenextinstruction.

Thecallbackfunctioniscalledaftertheanimationis100%finished.

ClickHeretoShow/HidePanel

jQuery动画的问题

许多jQuery函数涉及动画。这些函数也许会将speed或duration作为可选参数。

例子：$("p").hide("slow")

speed或duration参数可以设置许多不同的值，比如"slow","fast","normal"或毫秒。

实例

$("button").click(function(){

$("p").hide(1000);

});

TIY

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

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

jQueryCallback函数

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

典型的语法：

$(selector).hide(speed,callback)

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

错误（没有callback）

$("p").hide(1000);

alert("Theparagraphisnowhidden");

TIY

正确（有callback）

$("p").hide(1000,function(){

alert("Theparagraphisnowhidden");

});

TIY

结论：如果您希望在一个涉及动画的函数之后来执行语句，请使用callback函数。

8.jQueryHTML操作

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

jQueryHTML操作-来自本页

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

(selector)jQuery元素选择器语法

如需完整的参考手册，请访问我们的jQueryHTML操作参考手册。

9.jQueryCSS函数

jQueryCSS操作

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

jQuerySize操作

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

jQueryCSS函数-来自本页

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

(selector)jQuery元素选择器语法

如需完整的参考手册，请访问我们的jQueryCSS函数参考手册。

10.jQueryAJAX函数

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

jQueryAJAX实例

AJAXisnotaprogramminglanguage.

Itisjustatechniqueforcreatingbetterandmoreinteractivewebapplications.

ChangeContent

TIY

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

什么是AJAX？

AJAX=AsynchronousJavaScriptandXML.

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

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

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

AJAX和jQuery

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

通过jQueryAJAX，使用HTTPGet和HTTPPost，您都可以从远程服务器请求TXT、HTML、XML或JSON。

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

写的更少，做的更多

jQuery的load函数是一种简单的（但很强大的）AJAX函数。它的语法如下：

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

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

TIY

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

LowLevelAJAX

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

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

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

TIY

jQueryAJAX请求

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

(selector)jQuery元素选择器语法

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

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

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

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

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

参考手册

如需更多有关jQueryAJAX函数的信息，请访问我们的jQueryAJAX参考手册。

11.jQuery实例

通过实例增进jQuery技能！

jQuery语法实例

$(this).hide()

演示jQuery的hide()函数，隐藏当前的HTML元素。

$("p").hide()

演示jQuery的hide()函数，隐藏所有<p>元素。

$(".test").hide()

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

$("#test").hide()

演示jQuery的hide()函数，隐藏id="test"的元素。

例子解释

Hiding-Sliding-Fading

jQueryfadeOut()

演示简单的jQueryfadeout()函数。

演示简单的jQueryhide()函数。

演示如何隐藏部分文本。

演示简单的SlidePanel效果。

演示简单的jQueryanimate()函数。

HTML操作

CSS操作

AJAX和jQuery

使用$(selector).load(url)来改变HTML内容。

<html>

<head>

<scripttype="text/javascript"src="/jquery/jquery.js"></script>

<scripttype="text/javascript">

$(document).ready(function(){

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

$('#myDiv').load('/jquery/test1.txt');

});

</script>

</head>

<body>

<divid="myDiv"><h2>LetAJAXchangethistext</h2></div>

<buttonid="b01"type="button">ChangeContent</button>

</body>

</html>

使用$.ajax(options)来改变HTML内容。

<html>

<head>

<scripttype="text/javascript"src="/jquery/jquery.js"></script>

<scripttype="text/javascript">

$(document).ready(function(){

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

htmlobj=$.ajax({url:"/jquery/test1.txt",async:false});

$("#myDiv").html(htmlobj.responseText);

});

</script>

</head>

<body>

<divid="myDiv"><h2>LetAJAXchangethistext</h2></div>

<buttonid="b01"type="button">ChangeContent</button>

</body>

</html>

例子解释

二：jQuery参考手册

jQuery参考手册

在W3School，您将找到包含所有jQuery对象和函数的完整参考手册：

·选择器

·事件

·效果

·遍历

·核心

12.jQuery参考手册-选择器

jQuery选择器

选择器	实例	选取
*	$("*")	所有元素
#id	$("#lastname")	id=lastname的元素
.class	$(".intro")	所有class="intro"的元素
element	$("p")	所有<p>元素
.class.class	$(".intro.demo")	所有class=intro且class=demo的元素

:first	$("p:first")	第一个<p>元素
:last	$("p:last")	最后一个<p>元素
:even	$("tr:even")	所有偶数<tr>元素
:odd	$("tr:odd")	所有奇数<tr>元素

:eq(index)	$("ulli:eq(3)")	列表中的第四个元素（index从0开始）
:gt(no)	$("ulli:gt(3)")	列出index大于3的元素
:lt(no)	$("ulli:lt(3)")	列出index小于3的元素
:not(selector)	$("input:not(:empty)")	所有不为空的input元素

:header	$(":header")	所有标题元素<h1><h2>...
:animated		所有动画元素

:contains(text)	$(":contains('W3School')")	包含文本的所有元素
:empty	$(":empty")	无子（元素）节点的所有元素
:hidden	$("p:hidden")	所有隐藏的<p>元素
:visible	$("table:visible")	所有可见的表格

s1,s2,s3	$("th,td,.intro")	所有带有匹配选择的元素

[attribute]	$("[href]")	所有带有href属性的元素
[attribute=value]	$("[href='#']")	所有href属性的值等于"#"的元素
[attribute!=value]	$("[href!='#']")	所有href属性的值不等于"#"的元素
[attribute$=value]	$("[href$='.jpg']")	所有href属性的值包含".jpg"的元素

:input	$(":input")	所有<input>元素
:text	$(":text")	所有type="text"的<input>元素
:password	$(":password")	所有type="password"的<input>元素
:radio	$(":radio")	所有type="radio"的<input>元素
:checkbox	$(":checkbox")	所有type="checkbox"的<input>元素
:submit	$(":submit")	所有type="submit"的<input>元素
:reset	$(":reset")	所有type="reset"的<input>元素
:button	$(":button")	所有type="button"的<input>元素
:image	$(":image")	所有type="image"的<input>元素
:file	$(":file")	所有type="file"的<input>元素

:enabled	$(":enabled")	所有激活的input元素
:disabled	$(":disabled")	所有禁用的input元素
:selected	$(":selected")	所有被选取的input元素
:checked	$(":checked")	所有被选中的input元素

参阅

教程：jQuery元素选择器语法

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

jQuery选择器

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

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

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

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

在HTMLDOM术语中：

选择器允许您对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"结尾的元素。

jQueryCSS选择器

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

下面的例子把所有p元素的背景颜色更改为红色：

实例

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

TIY

13.jQuery参考手册-事件

Query事件方法

事件方法会触发匹配元素的事件，或将函数绑定到所有匹配元素的某个事件。

触发实例：

$("button#demo").click()

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

绑定实例：

$("button#demo").click(function(){$("img").hide()})

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

方法	描述
ready()	文档就绪事件（当HTML文档就绪可用时）
blur()	触发、或将函数绑定到指定元素的blur事件
change()	触发、或将函数绑定到指定元素的change事件
click()	触发、或将函数绑定到指定元素的click事件
dblclick()	触发、或将函数绑定到指定元素的doubleclick事件
error()	触发、或将函数绑定到指定元素的error事件
focus()	触发、或将函数绑定到指定元素的focus事件
keydown()	触发、或将函数绑定到指定元素的keydown事件
keypress()	触发、或将函数绑定到指定元素的keypress事件
keyup()	触发、或将函数绑定到指定元素的keyup事件
load()	触发、或将函数绑定到指定元素的load事件
mousedown()	触发、或将函数绑定到指定元素的mousedown事件
mouseenter()	触发、或将函数绑定到指定元素的mouseenter事件
mouseleave()	触发、或将函数绑定到指定元素的mouseleave事件
mousemove()	触发、或将函数绑定到指定元素的mousemove事件
mouseout()	触发、或将函数绑定到指定元素的mouseout事件
mouseover()	触发、或将函数绑定到指定元素的mouseover事件
mouseup()	触发、或将函数绑定到指定元素的mouseup事件
resize()	触发、或将函数绑定到指定元素的resize事件
scroll()	触发、或将函数绑定到指定元素的scroll事件
select()	触发、或将函数绑定到指定元素的select事件
submit()	触发、或将函数绑定到指定元素的submit事件
unload()	触发、或将函数绑定到指定元素的unload事件

jQuery事件处理方法

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

方法	触发
$(selector).bind(event)	向匹配元素添加一个或更多事件处理器
$(selector).delegate(selector,event)	向匹配元素添加一个事件处理器，现在或将来
$(selector).die()	移除所有通过live()函数添加的事件处理器
$(selector).live(event)	向匹配元素添加一个事件处理器，现在或将来
$(selector).one(event)	向匹配元素添加一个事件处理器。该处理器只能触发一次。
$(selector).unbind(event)	从匹配元素移除一个被添加的事件处理器
$(selector).undelegate(event)	从匹配元素移除一个被添加的事件处理器，现在或将来
$(selector).trigger(event)	所有匹配元素的指定事件
$(selector).triggerHandler(event)	第一个被匹配元素的指定事件

参阅

教程：jQuery元素选择器语法

14.jQuery参考手册-效果

Query效果函数

Hide/Show	描述
show()	显示被选的元素
hide()	隐藏被选的元素
toggle()	对被选元素进行隐藏和显示的切换

Slide
slideDown()	通过调整高度来滑动显示被选元素
slideUp()	通过调整高度来滑动隐藏被选元素
slideToggle()	对被选元素进行滑动隐藏和滑动显示的切换

Fadein/out
fadeIn()	淡入被选元素至完全不透明
fadeOut()	淡出被选元素至完全不透明
fadeTo()	把被选元素减弱至给定的不透明度

Animation
animate()	对被选元素应用“自定义”的动画
stop()	停止在被选元素上运行动画

Queue
clearQueue()	对被选元素移除所有排队的函数（仍未运行的）
delay()	对被选元素的所有排队函数（仍未运行）设置延迟
dequeue()	运行被选元素的下一个排队函数
queue()	显示被选元素的排队函数

参阅

教程：jQuery元素选择器语法

15.jQuery参考手册-文档操作

jQuery文档操作方法

这些方法对于XML文档和HTML文档均是适用的，除了：html()。

方法	描述
addClass()	向匹配的元素添加指定的类名。
after()	在匹配的元素之后插入内容。
append()	向匹配的元素内部追加内容。
appendTo()	向匹配的元素内部追加内容。
attr()	设置或返回匹配元素的属性和值。
before()	在每个匹配的元素之前插入内容。
clone()	创建匹配元素集合的副本。
detach()	从DOM中移除匹配元素集合。
empty()	删除匹配的元素集合中所有的子节点。
hasClass()	检查匹配的元素是否拥有指定的类。
html()	设置或返回匹配的元素集合中的HTML内容。
insertAfter()	把匹配的元素插入到另一个指定的元素集合的后面。
insertBefore()	把匹配的元素插入到另一个指定的元素集合的前面。
prepend()	向每个匹配的元素内部前置内容。
prependTo()	向每个匹配的元素内部前置内容。
remove()	移除所有匹配的元素。
removeAttr()	从所有匹配的元素中移除指定的属性。
removeClass()	从所有匹配的元素中删除全部或者指定的类。
replaceAll()	用匹配的元素替换所有匹配到的元素。
replaceWith()	用新内容替换匹配的元素。
text()	设置或返回匹配元素的内容。
toggleClass()	从匹配的元素中添加或删除一个类。
unwrap()	移除并替换指定元素的父元素。
val()	设置或返回匹配元素的值。
wrap()	把匹配的元素用指定的内容或元素包裹起来。
wrapAll()	把所有匹配的元素用指定的内容或元素包裹起来。
wrapinner()	将每一个匹配的元素的子内容用指定的内容或元素包裹起来。

参阅

教程：jQuery元素选择器语法

16.jQuery参考手册-属性操作

jQuery属性操作方法

下面列出的这些方法获得或设置元素的DOM属性。

这些方法对于XML文档和HTML文档均是适用的，除了：html()。

方法	描述
addClass()	向匹配的元素添加指定的类名。
attr()	设置或返回匹配元素的属性和值。
hasClass()	检查匹配的元素是否拥有指定的类。
html()	设置或返回匹配的元素集合中的HTML内容。
removeAttr()	从所有匹配的元素中移除指定的属性。
removeClass()	从所有匹配的元素中删除全部或者指定的类。
toggleClass()	从匹配的元素中添加或删除一个类。
val()	设置或返回匹配元素的值。

注释：jQuery文档操作参考手册中也列出了以上方法。本参考页的作用是方便用户单独查阅有关属性操作方面的方法。

参阅

教程：jQuery元素选择器语法

17.jQuery参考手册-CSS操作

jQueryCSS操作函数

下面列出的这些方法设置或返回元素的CSS相关属性。

CSS属性	描述
css()	设置或返回匹配元素的样式属性。
height()	设置或返回匹配元素的高度。
offset()	返回第一个匹配元素相对于文档的位置。
offsetParent()	返回最近的定位祖先元素。
position()	返回第一个匹配元素相对于父元素的位置。
scrollTop()	设置或返回匹配元素相对滚动条顶部的偏移。
scrollLeft()	设置或返回匹配元素相对滚动条左侧的偏移。
width()	设置或返回匹配元素的宽度。

参阅

教程：jQuery元素选择器语法

教程：CSS教程

参考手册：CSS参考手册

18.jQuery参考手册-Ajax

jQueryAjax操作函数

jQuery库拥有完整的Ajax兼容套件。其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据。

函数	描述
jQuery.ajax()	执行异步HTTP(Ajax)请求。
.ajaxComplete()	当Ajax请求完成时注册要调用的处理程序。这是一个Ajax事件。
.ajaxError()	当Ajax请求完成且出现错误时注册要调用的处理程序。这是一个Ajax事件。
.ajaxSend()	在Ajax请求发送之前显示一条消息。
jQuery.ajaxSetup()	设置将来的Ajax请求的默认值。
.ajaxStart()	当首个Ajax请求完成开始时注册要调用的处理程序。这是一个Ajax事件。
.ajaxStop()	当所有Ajax请求完成时注册要调用的处理程序。这是一个Ajax事件。
.ajaxSuccess()	当Ajax请求成功完成时显示一条消息。
jQuery.get()	使用HTTPGET请求从服务器加载数据。
jQuery.getJSON()	使用HTTPGET请求从服务器加载JSON编码数据。
jQuery.getScript()	使用HTTPGET请求从服务器加载JavaScript文件，然后执行该文件。
.load()	从服务器加载数据，然后把返回到HTML放入匹配元素。
jQuery.param()	创建数组或对象的序列化表示，适合在URL查询字符串或Ajax请求中使用。
jQuery.post()	使用HTTPPOST请求从服务器加载数据。
.serialize()	将表单内容序列化为字符串。
.serializeArray()	序列化表单元素，返回JSON数据结构数据。

参阅

教程：jQuery元素选择器语法

教程：Ajax教程

19.jQuery参考手册-遍历

jQuery遍历函数

jQuery遍历函数包括了用于筛选、查找和串联元素的方法。

函数	描述
.add()	将元素添加到匹配元素的集合中。
.andSelf()	把堆栈中之前的元素集添加到当前集合中。
.children()	获得匹配元素集合中每个元素的所有子元素。
.closest()	从元素本身开始，逐级向上级元素匹配，并返回最先匹配的祖先元素。
.contents()	获得匹配元素集合中每个元素的子元素，包括文本和注释节点。
.each()	对jQuery对象进行迭代，为每个匹配元素执行函数。
.end()	结束当前链中最近的一次筛选操作，并将匹配元素集合返回到前一次的状态。
.eq()	将匹配元素集合缩减为位于指定索引的新元素。
.filter()	将匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素。
.find()	获得当前匹配元素集合中每个元素的后代，由选择器进行筛选。
.first()	将匹配元素集合缩减为集合中的第一个元素。
.has()	将匹配元素集合缩减为包含特定元素的后代的集合。
.is()	根据选择器检查当前的匹配元素集合，如果存在至少一个匹配元素，则返回true。
.last()	将匹配元素集合缩减为集合中的最后一个元素。
.map()	把当前匹配集合中的每个元素传递给一个函数，产生包含返回值的新的jQuery对象。
.next()	获得匹配元素集合中每个元素紧邻的同辈元素。
.nextAll()	获得匹配元素集合中每个元素之后的所有同辈元素，由选择器进行筛选（可选）。
.nextUntil()	获得每个元素之后所有的同辈元素，直到遇到匹配选择器的元素为止。
.not()	从匹配元素集合中删除元素。
.offsetParent()	获得用于定位的第一个父元素。
.parent()	获得当前匹配元素集合中每个元素的父元素，由选择器筛选（可选）。
.parentsUntil()	获得当前匹配元素集合中每个元素的祖先元素，直到遇到匹配选择器的元素为止。
.prev()	获得匹配元素集合中每个元素紧邻的前一个同辈元素，由选择器筛选（可选）。
.prevAll()	获得匹配元素集合中每个元素之前的所有同辈元素，由选择器进行筛选（可选）。
.prevUntil()	获得每个元素之前所有的同辈元素，直到遇到匹配选择器的元素为止。
.siblings()	获得匹配元素集合中所有元素的同辈元素，由选择器筛选（可选）。
.slice()	将匹配元素集合缩减为指定范围的子集。

参阅

教程：jQuery元素选择器语法

20.jQuery参考手册-数据存储

jQuery数据存储函数

这些方法允许我们将指定的DOM元素与任意数据相关联。

函数	描述
.data()	存储与匹配元素相关的任意数据。
jQuery.data()	存储与指定元素相关的任意数据。
.removeData()	移除之前存放的数据。
jQuery.removeData()	移除之前存放的数据。

参阅

参考手册：jQuery队列控制

教程：jQuery元素选择器语法

21.jQuery参考手册-队列控制

jQuery队列控制函数

函数	描述
.clearQueue()	从队列中删除所有未运行的项目。
.dequeue()	从队列最前端移除一个队列函数，并执行它。
jQuery.dequeue()	从队列最前端移除一个队列函数，并执行它。
.queue()	显示或操作匹配元素所执行函数的队列。
jQuery.queue()	显示或操作匹配元素所执行函数的队列。

参阅

教程：jQuery元素选择器语法

22.jQuery参考手册-核心

jQuery核心函数

函数	描述
jQuery()	接受一个字符串，其中包含了用于匹配元素集合的CSS选择器。
jQuery.noConflict()	运行这个函数将变量$的控制权让渡给第一个实现它的那个库。

参阅

教程：jQuery元素选择器语法

分享到：

J2EE学习笔记 | sql经典常用大全

2012-05-26 16:48
浏览 1190
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

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

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jQuery 教程

2.jQuery简介

jQuery库-特性

向您的页面添加jQuery库

基础jQuery实例

实例

下载jQuery

库的替代

使用Google的CDN

使用Microsoft的CDN

3.jQuery语法

jQuery语法实例

jQuery语法

实例

文档就绪函数

4.jQuery选择器

jQuery选择器

jQuery元素选择器

jQuery属性选择器

jQueryCSS选择器

实例

更多的实例

5.jQuery事件

jQuery事件函数

在您<head>中

实例

单独文件中的函数

实例

jQuery名称冲突

结论

jQuery事件

6.jQuery效果

jQuery事件函数

实例

jQuery隐藏和显示

实例

语法：

实例

jQuery切换

语法：

实例

jQuery滑动函数-slideDown,slideUp,slideToggle

slideDown()实例

slideUp()实例

slideToggle()实例

jQueryFade函数-fadeIn(),fadeOut(),fadeTo()

fadeTo()实例

fadeOut()实例

jQuery自定义动画

实例1

实例2

jQuery效果-来自本页

7.jQueryCallback函数

jQuery动画的问题

实例

jQueryCallback函数

典型的语法：

错误（没有callback）

正确（有callback）

8.jQueryHTML操作

改变HTML内容

语法

实例

添加HTML内容

语法

语法

实例

语法

语法

实例

jQueryHTML操作-来自本页

9.jQueryCSS函数

jQueryCSS操作

CSS操作实例

最近访客更多访客>>