jQuery预习资料

最新推荐文章于 2021-01-27 11:27:14 发布

吕吕布

最新推荐文章于 2021-01-27 11:27:14 发布

阅读量321

点赞数

文章标签： jquery 预习资料

本文链接：https://blog.csdn.net/caijie41736081/article/details/78693388

版权

<html>

<head>

$(document).ready(function(){

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

$(this).hide();

});

</script>

</head>

<body>

<p>If you click on me, I will disappear.</p>

</body>

</html>

------------------------------------------------------------------

<html>

<head>

$(document).ready(function(){

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

$("p").hide();

});

</script>

</head>

<body>

<h2>This is a heading</h2>

<p>This is a paragraph.</p>

<button type="button">Click me</button>

</body>

</html>

===================================================================

向页面添加 jQuery 库

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

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

<head>

</head>

库的替代

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

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

使用 Google 的 CDN

<head>

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

</head>

使用 Microsoft 的 CDN

<head>

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

</head>

====================================================================

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(function(){

--- jQuery functions go here ----

});

在文档完全加载之前运行函数操作失败的情况：

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

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

==================================================================

jQuery 选择器

1、jQuery 元素选择器

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

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

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

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

2、jQuery 属性选择器

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

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

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

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

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

3、jQuery CSS 选择器

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

实例：

<html>

<head>

$(document).ready(function(){

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

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

});

</script>

</head>

<body>

<h2>This is a heading</h2>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

<button type="button">Click me</button>

</body>

</html>

更多的实例

语法	描述
$(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 选择器

选择器	实例	选取
*	$("*")	所有元素
#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)	$("ul li:eq(3)")	列表中的第四个元素（index 从 0 开始）
:gt(no)	$("ul li:gt(3)")	列出 index 大于 3 的元素
:lt(no)	$("ul li: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 中发生事件时自动被调用的函数。由“事件”（event）“触发”（triggered）是经常被用到的术语。

单独文件中的函数（把jQuery 函数放到独立的 .js 文件中,易于jQuery 函数维护）

实例

<head>

</head>

jQuery 名称冲突（了解）

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

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

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

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

实例：

<html>

<head>

var jq=jQuery.noConflict();

jq(document).ready(function(){

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

jq("p").hide();

});

</script>

</head>

<body>

<h2>This is a heading</h2>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

<button type="button">Click me</button>

</body>

</html>

结论

由于 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)	被选元素的鼠标悬停事件

jQuery 事件方法

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

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 效果（隐藏、显示、切换，滑动，淡入淡出，以及动画）

jQuery 效果—隐藏和显示：通过 hide() 和 show() 两个函数，jQuery 支持对 HTML 元素的隐藏和显示

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

语法：

$(selector).hide(speed,callback)

$(selector).show(speed,callback)

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

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

实例（隐藏）：

<html>

<head>

$(document).ready(function(){

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

$("p").hide();

});

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

$("p").show();

});

</script>

</head>

<body>

<p id="p1">If you click on the "Hide" button, I will disappear.</p>

</body>

</html>

-----------------------------------------------------------------------------------------------------

<html>

<head>

$(document).ready(function(){

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

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

});

</script>

</head>

<body>

<p>This is a paragraph with little content.</p>

<p>This is another small paragraph.</p>

</body>

</html>

jQuery 切换

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

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

语法：

$(selector).toggle(speed,callback)

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

实例

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

--------------------------------------------------------------------

<!DOCTYPE html>

<html>

<head>

$(document).ready(function(){

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

$("p").toggle();

});

</script>

</head>

<body>

<p>这是一个段落。</p>

<p>这是另一个段落。</p>

</body>

</html>

页面显示为：

点击“切换”之后，页面的段落隐藏起来，变为：

注：点击“切换”，隐藏和显示段落字体循环.

jQuery 滑动函数 - slideDown, slideUp, slideToggle

jQuery 拥有以下滑动函数：

$(selector).slideDown(speed,callback)

$(selector).slideUp(speed,callback)

$(selector).slideToggle(speed,callback)

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

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

slideDown() 实例

<html>

<head>

$(document).ready(function(){

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

$(".panel").slideDown("slow");

});

</script>

div.panel,p.flip

{

margin:0px;

padding:5px;

text-align:center;

background:#e5eecc;

border:solid 1px #c3c3c3;

}

div.panel

{

height:120px;

display:none;

}

</style>

</head>

<body>

<p>W3School - 领先的 Web 技术教程站点</p>

<p>在 W3School，你可以找到你所需要的所有网站建设教程。</p>

</div>

<p class="flip">请点击这里</p>

</body>

</html>

页面为：

点击“请点击这里”之后，页面慢慢向下展开、直到停止，页面为：

---------------------------------------------------------------------------------------------------------------

slideUp() 实例

<html>

<head>

$(document).ready(function(){

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

$(".panel").slideUp("slow");

});

</script>

div.panel,p.flip

{

margin:0px;

padding:5px;

text-align:center;

background:#e5eecc;

border:solid 1px #c3c3c3;

}

div.panel

{

height:120px;

}

</style>

</head>

<body>

<p>W3School - 领先的 Web 技术教程站点</p>

<p>在 W3School，你可以找到你所需要的所有网站建设教程。</p>

</div>

<p class="flip">请点击这里</p>

</body>

</html>

页面为：

点击“请点击这里”之后，页面慢慢向上收起、直到停止，页面为：

------------------------------------------------------------------------------------------------------

slideToggle() 实例

<html>

<head>

$(document).ready(function(){

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

$(".panel").slideToggle("slow");

});

</script>

div.panel,p.flip

{

margin:0px;

padding:5px;

text-align:center;

background:#e5eecc;

border:solid 1px #c3c3c3;

}

div.panel

{

height:120px;

display:none;

}

</style>

</head>

<body>

<p>W3School - 领先的 Web 技术教程站点</p>

<p>在 W3School，你可以找到你所需要的所有网站建设教程。</p>

</div>

<p class="flip">请点击这里</p>

</body>

</html>

jQuery 效果 - 淡入淡出--fadeIn(), fadeOut(), fadeTo()

jQuery 拥有以下 fade 函数：

$(selector).fadeIn(speed,callback)

$(selector).fadeOut(speed,callback)

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

Query 拥有下面四种 fade 方法：

· fadeIn()

· fadeOut()

· fadeToggle()

· fadeTo()

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

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

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

fadeIn实例：

<html>

<head>

$(document).ready(function(){

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

$("#div1").fadeIn();

$("#div2").fadeIn("slow");

$("#div3").fadeIn(3000);

});

</script>

</head>

<body>

<p>演示带有不同参数的 fadeIn() 方法。</p>

<button>点击这里，使三个矩形淡入</button>

<br>

<br>

</body>

</html>

页面为：

点击“点击这里，使三个矩形淡入”三个矩形逐渐淡入，页面为：

-----------------------------------------------------------------------------------------------

fadeOut() 实例

<html>

<head>

$(document).ready(function(){

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

$("#div1").fadeOut();

$("#div2").fadeOut("slow");

$("#div3").fadeOut(3000);

});

</script>

</head>

<body>

<p>演示带有不同参数的 fadeOut() 方法。</p>

<button>点击这里，使三个矩形淡出</button>

<br>

<br>

</body>

</html>

页面为：

点击“点击这里，使三个矩形淡入”三个矩形逐渐淡出，页面为：

-------------------------------------------------------------------------------------

fadeToggle() 实例

<html>

<head>

$(document).ready(function(){

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

$("#div1").fadeToggle();

$("#div2").fadeToggle("slow");

$("#div3").fadeToggle(3000);

});

</script>

</head>

<body>

<p>演示带有不同参数的 fadeToggle() 方法。</p>

<button>点击这里，使三个矩形淡入淡出</button>

<br>

<br>

</body>

</html>

------------------------------------------------------------------------------------------------------------------

fadeTo() 实例

<html>

<head>

$(document).ready(function(){

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

$("#div1").fadeTo("slow",0.15);

$("#div2").fadeTo("slow",0.4);

$("#div3").fadeTo("slow",0.7);

});

</script>

</head>

<body>

<p>演示带有不同参数的 fadeTo() 方法。</p>

<button>点击这里，使三个矩形淡出</button>

<br>

<br>

</body>

</html>

页面为：

点击“点击这里，使三个矩形淡出”三个矩形逐渐淡出，页面为：

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：

<html>

<head>

$(document).ready(function(){

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

$("div").animate({left:'250px'});

});

</script>

</head>

<body>

<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>

</div>

</body>

</html>

----------------------------------------------------------------------------------------------------

实例 2

<html>

<head>

$(document).ready(function(){

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

$("div").animate({

left:'250px',

opacity:'0.5',

height:'150px',

width:'150px'

});

</script>

</head>

<body>

</div>

</body>

</html>

----------------------------------------------------------------------------------------------------------------------

实例3：

<html>

<head>

$(document).ready(function(){

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

$("div").animate({ left:'250px', height:'+=150px', width:'+=150px' });

});

</script>

</head>

<body>

</body>

</html>

----------------------------------------------------------------------------------------------

实例4：

<html>

<head>

$(document).ready(function(){

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

$("div").animate({

height:'toggle'

});

</script>

</head>

<body>

</div>

</body>

</html>

------------------------------------------------------------------------------------------------

实例5：

<html>

<head>

$(document).ready(function(){

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

var div=$("div");

div.animate({height:'300px',opacity:'0.4'},"slow");

div.animate({width:'300px',opacity:'0.8'},"slow");

div.animate({height:'100px',opacity:'0.4'},"slow");

div.animate({width:'100px',opacity:'0.8'},"slow");

});

</script>

</head>

<body>

</div>

</body>

</html>

----------------------------------------------------------------------------------------------

实例6：

<html>

<head>

$(document).ready(function(){

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

var div=$("div");

div.animate({left:'100px'},"slow");

div.animate({fontSize:'3em'},"slow");

});

</script>

</head>

<body>

<div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>

</body>

</html>

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

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

jQuery 停止动画stop（）

jQuery stop() 方法

jQuery stop() 方法用于停止动画或效果，在它们完成之前。

stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

实例1：

<html>

<head>

$(document).ready(function(){

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

$("#panel").slideDown(5000);

});

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

$("#panel").stop();

});

</script>

#panel,#flip

{

padding:5px;

text-align:center;

background-color:#e5eecc;

border:solid 1px #c3c3c3;

}

#panel

{

padding:50px;

display:none;

}

</style>

</head>

<body>

<div id="flip">点击这里，向下滑动面板</div>

<div id="panel">Hello world!</div>

</body>

</html>

--------------------------------------------------------

实例2：

<html>

<head>

$(document).ready(function(){

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

$("div").animate({left:'100px'},5000); $("div").animate({fontSize:'3em'},5000);

});

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

$("div").stop();

});

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

$("div").stop(true);

});

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

$("div").stop(true,true);

});

</script>

</head>

<body>

<button id="stop3">停止但要完成</button>

<p><b>"开始"</b> 按钮会启动动画。</p>

<p><b>"停止"</b> 按钮会停止当前活动的动画，但允许已排队的动画向前执行。</p>

<p><b>"停止所有"</b> 按钮停止当前活动的动画，并清空动画队列；因此元素上的所有动画都会停止。</p>

<p><b>"停止但要完成"</b> 会立即完成当前活动的动画，然后停下来。</p>

<div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>

</body>

</html>

------------------------------------------------------------------------

实例3：

<html>

<head>

$(document).ready(function(){

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

$("#panel").slideDown(5000);

});

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

$("#panel").stop();

});

</script>

#panel,#flip {

padding:5px;

text-align:center;

background-color:#e5eecc;

border:solid 1px #c3c3c3;

}

#panel {

padding:50px;

display:none;

}

</style>

</head>

<body>

<div id="flip">点击这里，向下滑动面板</div>

<div id="panel">Hello world!</div>

</body>

</html>

jQuery Callback 函数

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

为了避免这个情况，您可以以参数的形式添加 Callback 函数。当动画 100% 完成后，即调用 Callback 函数。

实例：

<html>

<head>

$(document).ready(function(){

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

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

alert("The paragraph is now hidden");

});

</script>

</head>

<body>

<p>This is a paragraph with little content.</p>

</body>

</html>

jQuery - Chaining

通过 jQuery，您可以把动作/方法链接起来。

Chaining 允许我们在一条语句中允许多个 jQuery 方法（在相同的元素上）。

实例1：

<html>

<head>

<script src="/jquery/jquery-1.11.1.min.js"></script>

<script>

$(document).ready(function()

{

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

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

});

</script>

</head>

<body>

<p id="p1">jQuery 乐趣十足！</p>

<button>点击这里</button>

</body>

</html>

效果："p1" 元素首先会变为红色，然后向上滑动，然后向下滑动。

---------------------------------------------------------------------------------------------------------------

实例2：

<html>

<head>

<script src="/jquery/jquery-1.11.1.min.js"></script>

<script>

$(document).ready(function() {

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

$("#p1").css("color","red") .slideUp(2000) .slideDown(2000);

});

</script>

</head>

<body>

<p id="p1">jQuery 乐趣十足！</p>

<button>点击这里</button>

</body>

</html>

效果：同实例1.

jQuery 效果函数

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

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

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

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

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

===================================================================

jQuery HTML

jQuery DOM 操作

jQuery 中非常重要的部分，就是操作 DOM 的能力。

jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。

提示：DOM = Document Object Model（文档对象模型）

DOM 定义访问 HTML 和 XML 文档的标准：

“W3C 文档对象模型独立于平台和语言的界面，允许程序和脚本动态访问和更新文档的内容、结构以及样式。”

获得内容 - text()、html() 以及 val()

三个简单实用的用于 DOM 操作的 jQuery 方法：

· text() - 设置或返回所选元素的文本内容

· html() - 设置或返回所选元素的内容（包括 HTML 标记）

· val() - 设置或返回表单字段的值

<html>

<head>

$(document).ready(function(){

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

alert("Text: " + $("#test").text());

});

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

alert("HTML: " + $("#test").html());

});

</script>

</head>

<body>

<p id="test">这是段落中的<b>粗体</b>文本。</p>

</body>

</html>

----------------------------------------------------------------------------------------

<html>

<head>

$(document).ready(function(){

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

alert("Value: " + $("#test").val());

});

</script>

</head>

<body>

</body>

</html>

--------------------------------------------------------------------------

<html>

<head>

$(document).ready(function(){

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

alert($("#w3s").attr("href"));

});

</script>

</head>

<body>

<p><a href="http://www.w3school.com.cn" id="w3s">W3School.com.cn</a></p>

</body>

</html>

-----------------------------------------------------------------------------------------------

jQuery - 设置内容和属性

设置内容 - text()、html() 以及 val()

我们将使用前一章中的三个相同的方法来设置内容：

· text() - 设置或返回所选元素的文本内容

· html() - 设置或返回所选元素的内容（包括 HTML 标记）

· val() - 设置或返回表单字段的值

<html>

<head>

$(document).ready(function(){

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

$("#test1").text("Hello world!");

});

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

$("#test2").html("<b>Hello world!</b>");

});

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

$("#test3").val("Dolly Duck");

});

</script>

</head>

<body>

<p id="test2">这是另一个段落。</p>

<p>Input field: <input type="text" id="test3" value="Mickey Mouse"></p>

</body>

</html>

--------------------------------------------------------------------------

<html>

<head>

$(document).ready(function(){

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

$("#test1").text(function(i,origText){

return "Old text: " + origText + " New text: Hello world! (index: " + i + ")";

});

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

$("#test2").html(function(i,origText){

return "Old html: " + origText + " New html: Hello <b>world!</b> (index: " + i + ")";

});

</script>

</head>

<body>

<p id="test2">这是另一段<b>粗体</b>文本。</p>

</body>

</html>

-----------------------------------------------------------------------------------

设置属性 - attr()

jQuery attr() 方法也用于设置/改变属性值。

<html>

<head>

$(document).ready(function(){

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

$("#w3s").attr("href","http://www.w3school.com.cn/jquery");

});

</script>

</head>

<body>

<p><a href="http://www.w3school.com.cn" id="w3s">W3School.com.cn</a></p>

<p>请把鼠标指针移动到链接上，或者点击该链接，来查看已经改变的 href 值。</p>

</body>

</html>

--------------------------------------------------------------------------------------------------------------------

<html>

<head>

$(document).ready(function(){

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

$("#w3s").attr({ "href" : "http://www.w3school.com.cn/jquery/", "title" : "W3School jQuery 教程"}); });

});

</script>

</head>

<body>

<p><a href="http://www.w3school.com.cn" id="w3s">W3School.com.cn</a></p>

<button>改变 href 和 title 值</button>

<p>请把鼠标指针移动到链接上，或者点击该链接，来查看已经改变的 href 值和已经设置的 title 值。</p> </body>

</html>

-----------------------------------------------------------------------------------------------

<html>

<head>

$(document).ready(function(){

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

$("#w3s").attr("href", function(i,origValue){

return origValue + "/jquery";

});

</script>

</head>

<body>

<p><a href="http://www.w3school.com.cn" id="w3s">w3school.com.cn</a></p>

<p>请把鼠标指针移动到链接上，或者点击该链接，来查看已经改变的 href 值。</p>

</body>

</html>

----------------------------------------------------------------------------------------

jQuery - 添加元素

添加新内容的四个 jQuery 方法：

· append() - 在被选元素的结尾插入内容

· prepend() - 在被选元素的开头插入内容

· after() - 在被选元素之后插入内容

· before() - 在被选元素之前插入内容

<html>

<head>

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

$("p").append(" <b>Appended text</b>.");

});

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

$("ol").append("<li>Appended item</li>");

});

</script>

</head>

<body>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

<button id="btn2">追加列表项</button>

</body>

</html>

----------------------------------------------------------------------

<html>

<head>

$(document).ready(function(){

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

$("p").prepend("<b>Prepended text</b>. ");

});

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

$("ol").prepend("<li>Prepended item</li>");

});

</script>

</head>

<body>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

<ol>

</ol>

<button id="btn2">添加列表项</button>

</body>

</html>

-------------------------------------------------------------------------

<html>

<head>

function appendText() {

var txt1="<p>Text.</p>"; // 以 HTML 创建新元素

var txt2=$("<p></p>").text("Text."); // 以 jQuery 创建新元素

var txt3=document.createElement("p");

txt3.innerHTML="Text."; // 通过 DOM 来创建文本

$("body").append(txt1,txt2,txt3); // 追加新元素

}

</script>

</head>

<body>

<p>This is a paragraph.</p>

</body>

</html>

--------------------------------------------------------------------

<html>

<head>

$(document).ready(function(){

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

$("img").before("<b>Before</b>");

});

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

$("img").after("<i>After</i>");

});

</script>

</head>

<body>

<button id="btn1">在图片前面添加文本</button>

<button id="btn2">在图片后面添加文本</button>

</body>

</html>

---------------------------------------------------------------------

<html>

<head>

function afterText() {

var txt1="<b>I </b>"; // 以 HTML 创建元素

var txt2=$("<i></i>").text("love "); // 通过 jQuery 创建元素

var txt3=document.createElement("big"); // 通过 DOM 创建元素

txt3.innerHTML="jQuery!";

$("img").after(txt1,txt2,txt3); // 在 img 之后插入新元素

}

</script>

</head>

<body>

<button οnclick="afterText()">在图片后面添加文本</button>

</body>

</html>

---------------------------------------------------------------------------

jQuery - 删除元素

删除元素/内容一般可使用以下两个 jQuery 方法：

· remove() - 删除被选元素（及其子元素）

· empty() - 从被选元素中删除子元素

<html>

<head>

$(document).ready(function(){

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

$("#div1").remove();

});

</script>

</head>

<body>

This is some text in the div.

<p>This is a paragraph in the div.</p>

<p>This is another paragraph in the div.</p>

</div>

<br>

</body>

</html>

-----------------------------------------------------------------------------------

<html>

<head>

$(document).ready(function(){

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

$("#div1").empty();

});

</script>

</head>

<body>

This is some text in the div.

<p>This is a paragraph in the div.</p>

<p>This is another paragraph in the div.</p>

</div>

<br>

</body>

</html>

------------------------------------------------------------------------------------

<html>

<head>

$(document).ready(function(){

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

$("p").remove(".italic");

});

</script>

</head>

<body>

<p>This is a paragraph in the div.</p>

<p class="italic"><i>This is another paragraph in the div.</i></p>

<button>删除 class="italic" 的所有 p 元素</button>

</body>

</html>

-----------------------------------------------------------------------------------

jQuery - 获取并设置 CSS 类

jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：

· addClass() - 向被选元素添加一个或多个类

· removeClass() - 从被选元素删除一个或多个类

· toggleClass() - 对被选元素进行添加/删除类的切换操作

· css() - 设置或返回样式属性

<html>

<head>

$(document).ready(function(){

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

$("h1,h2,p").addClass("blue");

$("div").addClass("important");

});

</script>

.important { font-weight:bold; font-size:xx-large; }

.blue { color:blue; }

</style>

</head>

<body>

<p>这是一个段落。</p>

<p>这是另一个段落。</p>

<div>这是非常重要的文本！</div> <br>

<button>向元素添加类</button>

</body>

</html>

--------------------------------------------------------------------------------

<html>

<head>

</script>

$(document).ready(function(){

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

$("#div1").addClass("important blue");

});

</script>

.important

{

font-weight:bold;

font-size:xx-large;

}

.blue

{

color:blue;

}

</style>

</head>

<body>

<div id="div1">这是一些文本。</div>

<div id="div2">这是一些文本。</div>

<br>

<button>向第一个 div 元素添加类</button>

</body>

</html>

--------------------------------------------------------------------------------

<html>

<head>

$(document).ready(function(){

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

$("h1,h2,p").removeClass("blue");

});

</script>

.important { font-weight:bold; font-size:xx-large; }

.blue { color:blue; }

</style>

</head>

<body>

<p class="blue">这是一个段落。</p>

<p>这是另一个段落。</p> <br>

<button>从元素上删除类</button>

</body>

</html>

-------------------------------------------------------------------------------------

<html>

<head>

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

$("h1,h2,p").toggleClass("blue");

});

</script>

.blue { color:blue; }

</style>

</head>

<body>

<p>这是一个段落。</p>

<p>这是另一个段落。</p>

</body>

</html>

--------------------------------------------------------------------------------------

jQuery - css() 方法

css() 方法设置或返回被选元素的一个或多个样式属性。

<html>

<head>

$(document).ready(function(){

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

alert("Background color = " + $("p").css("background-color"));

});

</script>

</head>

<body>

<p style="background-color:#ff0000">这是一个段落。</p>

<p style="background-color:#00ff00">这是一个段落。</p>

<p style="background-color:#0000ff">这是一个段落。</p>

<button>返回 p 元素的背景色</button>

</body>

</html>

------------------------------------------------------------------------------------

<html>

<head>

$(document).ready(function(){

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

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

});

</script>

</head>

<body>

<p style="background-color:#ff0000">这是一个段落。</p>

<p style="background-color:#00ff00">这是一个段落。</p>

<p style="background-color:#0000ff">这是一个段落。</p>

<p>这是一个段落。</p>

<button>设置 p 元素的背景色</button>

</body>

</html>

------------------------------------------------------------------------------------

<html>

<head>

$(document).ready(function(){

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

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

});

</script>

</head>

<body>

<p style="background-color:#ff0000">这是一个段落。</p>

<p style="background-color:#00ff00">这是一个段落。</p>

<p style="background-color:#0000ff">这是一个段落。</p>

<p>这是一个段落。</p>

<button>为 p 元素设置多个样式</button>

</body>

</html>

jQuery CSS 函数 - 来自本页

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

jQuery CSS 操作函数

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

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

--------------------------------------------------------------------------------

jQuery - 尺寸

jQuery 提供多个处理尺寸的重要方法：

· width()

· height()

· innerWidth()

· innerHeight()

· outerWidth()

· outerHeight()

<html>

<head>

$(document).ready(function(){

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

var txt="";

txt+="Width of div: " + $("#div1").width() + "</br>";

txt+="Height of div: " + $("#div1").height();

$("#div1").html(txt);

});

</script>

</head>

<body>

<p>width() - 返回元素的宽度。</p>

<p>height() - 返回元素的高度。</p>

</body>

</html>

----------------------------------------------------------------------------------------

<html>

<head>

$(document).ready(function(){

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

var txt="";

txt+="Width of div: " + $("#div1").width() + "</br>";

txt+="Height of div: " + $("#div1").height() + "</br>";

txt+="Inner width of div: " + $("#div1").innerWidth() + "</br>";

txt+="Inner height of div: " + $("#div1").innerHeight();

$("#div1").html(txt);

});

</script>

</head>

<body>

<p>innerWidth() - 返回元素的宽度（包括内边距）。</p>

<p>innerHeight() - 返回元素的高度（包括内边距）。</p>

</body>

</html>

---------------------------------------------------------------------------------------

<html>

<head>

</script>

$(document).ready(function(){

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

var txt="";

txt+="Width of div: " + $("#div1").width() + "</br>";

txt+="Height of div: " + $("#div1").height() + "</br>";

txt+="Outer width of div: " + $("#div1").outerWidth() + "</br>";

txt+="Outer height of div: " + $("#div1").outerHeight();

$("#div1").html(txt);

});

</script>

</head>

<body>

<br>

<p>outerWidth() - 返回元素的宽度（包括内边距和边框）。</p>

<p>outerHeight() - 返回元素的高度（包括内边距和边框）。</p>

</body>

</html>

---------------------------------------------------------------------------------------

<html>

<head>

$(document).ready(function(){

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

var txt="";

txt+="Width of div: " + $("#div1").width() + "</br>";

txt+="Height of div: " + $("#div1").height() + "</br>";

txt+="Outer width of div (margin included): " + $("#div1").outerWidth(true) + "</br>";

txt+="Outer height of div (margin included): " + $("#div1").outerHeight(true);

$("#div1").html(txt);

});

</script>

</head>

<body>

<p>outerWidth(true) - 返回元素的宽度（包括内边距、边框和外边距）。</p>

<p>outerHeight(true) - 返回元素的高度（包括内边距、边框和外边距）。</p>

</body>

</html>

-----------------------------------------------------------------------------------------

<html>

<head>

$(document).ready(function(){

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

var txt="";

txt+="Document width/height: " + $(document).width();

txt+="x" + $(document).height() + "\n";

txt+="Window width/height: " + $(window).width();

txt+="x" + $(window).height(); alert(txt);

});

</script>

</head>

<body>

<button>显示文档和窗口的尺寸</button>

</body>

</html>

-------------------------------------------------------------------------------------

<html>

<head>

$(document).ready(function(){

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

$("#div1").width(320).height(320);

});

</script>

</head>

<body>

</body>

</html>

jQuery 文档操作方法

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

方法	描述
addClass()	向匹配的元素添加指定的类名。
after()	在匹配的元素之后插入内容。（注意与append()的区别）
append()	向匹配的元素内部追加内容。（注意与after()的区别）
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 遍历 - 祖先

向上遍历 DOM 树的方法：

· parent()方法返回被选元素的直接父元素。

· parents()方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。

· parentsUntil()方法返回介于两个给定元素之间的所有祖先元素。如下面的例子返回介于 <span> 与 <div> 元素之间的所有祖先元素。

<html>

<head>

<style>

.ancestors * {

display: block; border: 2px solid lightgrey;

color: lightgrey; padding: 5px; margin: 15px;

}

</style>

$(document).ready(function(){

$("span").parent().css({"color":"red","border":"2px solid red"});

});

</script>

</head>

<body>

<div style="width:500px;">div (曾祖父)

<ul>ul (祖父)

<li>li (直接父)

</li>

</ul>

</div>

<div style="width:500px;">div (祖父)

<p>p (直接父)

</p>

</div>

</body>

</html>

结果：

-------------------------------------------------------------------------

<html>

<head>

<style>

.ancestors *

{

display: block;

border: 2px solid lightgrey;

color: lightgrey;

padding: 5px;

margin: 15px;

}

</style>

</script>

$(document).ready(function(){

$("span").parents().css({"color":"red","border":"2px solid red"});

});

</script>

</head>

<body class="ancestors">body (曾曾祖父)

<div style="width:500px;">div (曾祖父)

<ul>ul (祖父)

<li>li (直接父)

</li>

</ul>

</div>

</body>

</html>

结果：

------------------------------------------------------------------------------------

<html>

<head>

<style>

.ancestors *

{

display: block;

border: 2px solid lightgrey;

color: lightgrey;

padding: 5px;

margin: 15px;

}

</style>

</script>

$(document).ready(function(){

$("span").parents("ul").css({"color":"red","border":"2px solid red"});

});

</script>

</head>

<body class="ancestors">body (曾曾祖父)

<div style="width:500px;">div (曾祖父)

<ul>ul (祖父)

<li>li (直接父)

</li>

</ul>

</div>

</body>

</html>

结果：

------------------------------------------------------------------------------

<html>

<head>

<style>

.ancestors *

{

display: block;

border: 2px solid lightgrey;

color: lightgrey;

padding: 5px;

margin: 15px;

}

</style>

</script>

$(document).ready(function(){

$("span").parentsUntil("div").css({"color":"red","border":"2px solid red"});

});

</script>

</head>

<body class="ancestors"> body (曾曾祖父)

<div style="width:500px;">div (曾祖父)

<ul>ul (祖父)

<li>li (直接父)

</li>

</ul>

</div>

</body>

</html>

结果：

------------------------------------------------------------------------------

jQuery 遍历 - 后代

向下遍历 DOM 树 jQuery 方法：

· children()方法返回被选元素的所有直接子元素。

· find()方法返回被选元素的后代元素，一路向下直到最后一个后代。

<html>

<head>

<style>

.descendants * {

display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px;

}

</style>

$(document).ready(function(){

$("div").children().css({"color":"red","border":"2px solid red"});

});

</script>

</head>

<body>

<div class="descendants" style="width:500px;">div (当前元素)

<p>p (子)

</p>

<p>p (child)

</p>

</div>

</body>

</html>

结果：

--------------------------------------------------------------------------------------

<html>

<head>

<style>

.descendants *

{

display: block;

border: 2px solid lightgrey;

color: lightgrey;

padding: 5px;

margin: 15px;

}

</style>

</script>

$(document).ready(function(){

$("div").children("p.1").css({"color":"red","border":"2px solid red"});

});

</script>

</head>

<body>

<div class="descendants" style="width:500px;">div (当前元素)

<p class="1">p (子)

</p>

<p class="2">p (子)

</p>

</div>

</body>

</html>

结果：

-------------------------------------------------------------------------

<html>

<head>

<style>

.descendants *

{

display: block;

border: 2px solid lightgrey;

color: lightgrey;

padding: 5px;

margin: 15px;

}

</style>

</script>

$(document).ready(function(){

$("div").find("span").css({"color":"red","border":"2px solid red"});

});

</script>

</head>

<body>

<div class="descendants" style="width:500px;">div (current element)

<p>p (子)

</p>

<p>p (child)

</p>

</div>

</body>

</html>

结果：

-------------------------------------------------------------------------

<html>

<head>

<style>

.descendants *

{

display: block;

border: 2px solid lightgrey;

color: lightgrey;

padding: 5px;

margin: 15px;

}

</style>

</script>

$(document).ready(function(){

$("div").find("*").css({"color":"red","border":"2px solid red"});

});

</script>

</head>

<body>

<div class="descendants" style="width:500px;">div (当前元素)

<p>p (子)

</p>

<p>p (child)

</p>

</div>

</body>

</html>

结果：

-------------------------------------------------------------------------

jQuery 遍历 - 同胞

在 DOM 树中水平遍历方法：

· siblings()方法返回被选元素的所有同胞元素。

· next()方法返回被选元素的下一个同胞元素。该方法只返回一个元素。

· nextAll()方法返回被选元素的所有跟随的同胞元素。

· nextUntil()方法返回介于两个给定参数之间的所有跟随的同胞元素。

· prev()

· prevAll()

· prevUntil()

注：prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞元素向后遍历，而不是向前）。

<html>

<head>

<style>

.siblings * {

display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px;

}

</style>

$(document).ready(function(){

$("h2").siblings().css({"color":"red","border":"2px solid red"});

});

</script>

</head>

<div>div (父)

</div>

</body>

</html>

----------------------------------------------------------------------------------

<html>

<head>

<style>

.siblings *

{

display: block;

border: 2px solid lightgrey;

color: lightgrey;

padding: 5px;

margin: 15px;

}

</style>

</script>

$(document).ready(function(){

$("h2").siblings("p").css({"color":"red","border":"2px solid red"});

});

</script>

</head>

<div>div (父)

</div>

</body>

</html>

------------------------------------------------------------------------------------

<html>

<head>

<style>

.siblings *

{

display: block;

border: 2px solid lightgrey;

color: lightgrey;

padding: 5px;

margin: 15px;

}

</style>

</script>

$(document).ready(function(){

$("h2").next().css({"color":"red","border":"2px solid red"});

});

</script>

</head>

<div>div (父)

</div>

</body>

</html>

------------------------------------------------------------------------------------

<html>

<head>

<style>

.siblings *

{

display: block;

border: 2px solid lightgrey;

color: lightgrey;

padding: 5px;

margin: 15px;

}

</style>

</script>

$(document).ready(function(){

$("h2").nextAll().css({"color":"red","border":"2px solid red"});

});

</script>

</head>

<div>div (父)

</div>

</body>

</html>

------------------------------------------------------------------------------------

<html>

<head>

<style>

.siblings *

{

display: block;

border: 2px solid lightgrey;

color: lightgrey;

padding: 5px;

margin: 15px;

}

</style>

</script>

$(document).ready(function(){

$("h2").nextUntil("h6").css({"color":"red","border":"2px solid red"});

});

</script>

</head>

<div>div (父)

</div>

</body>

</html>

------------------------------------------------------------------------------------

jQuery 遍历 - 过滤

三个最基本的过滤方法是：

●first() 方法返回被选元素的首个元素。

●last() 方法返回被选元素的最后一个元素。

●eq() 方法返回被选元素中带有指定索引号的元素。索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。

●filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。

●not() 方法返回不匹配标准的所有元素。

提示：not() 方法与 filter() 相反。

<html>

<head>

</script>

$(document).ready(function(){

$("div p").first().css("background-color","yellow");

});

</script>

</head>

<body>

<h1>欢迎来到我的主页</h1>

<div>

<p>这是 div 中的一个段落。</p>

</div>

<div>

<p>这是 div 中的另一个段落。</p>

</div>

<p>这也是段落。</p>

</body>

</html>

------------------------------------------------------------------------

<html>

<head>

</script>

$(document).ready(function(){

$("div p").last().css("background-color","yellow");

});

</script>

</head>

<body>

<h1>欢迎来到我的主页</h1>

<div>

<p>这是 div 中的一个段落。</p>

</div>

<div>

<p>这是 div 中的另一个段落。</p>

</div>

<p>这也是段落。</p>

</body>

</html>

---------------------------------------------------------------------

<html>

<head>

</script>

$(document).ready(function(){

$("p").eq(1).css("background-color","yellow");

});

</script>

</head>

<body>

<h1>欢迎来到我的主页</h1>

<p>我是唐老鸭 (index 0)。</p>

<p>唐老鸭 (index 1)。</p>

<p>我住在 Duckburg (index 2)。</p>

<p>我最好的朋友是米老鼠 (index 3)。</p>

</body>

</html>

-------------------------------------------------------------------------

<html>

<head>

</script>

$(document).ready(function(){

$("p").filter(".intro").css("background-color","yellow");

});

</script>

</head>

<body>

<h1>欢迎来到我的主页</h1>

<p>我是唐老鸭。</p>

<p class="intro">我住在 Duckburg。</p>

<p class="intro">我爱 Duckburg。</p>

<p>我最好的朋友是 Mickey。</p>

</body>

</html>

-------------------------------------------------------------------

<html>

<head>

</script>

$(document).ready(function(){

$("p").not(".intro").css("background-color","yellow");

});

</script>

</head>

<body>

<h1>欢迎来到我的主页</h1>

<p>我是唐老鸭。</p>

<p class="intro">我住在 Duckburg。</p>

<p class="intro">我爱 Duckburg。</p>

<p>我最好的朋友是 Mickey。</p>

</body>

</html>

=======================================================================

jQuery AJAX 函数

AJAX 和 jQuery

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

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

AJAX 和 jQuery

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

AJAX 是与服务器交换数据的艺术，它在不重载全部页面的情况下，实现了对部分网页的更新。

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

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

------------------------------------------------------------------------------------

实例：

<html>

<head>

$(document).ready(function(){

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

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

});

</script>

</head>

<body>

</body>

</html>

页面显示为

点击“改变内容”，页面变为

----------------------------------------------------------------------------------------------------------------

jQuery - AJAX load() 方法

● load() 方法从服务器加载数据，并把返回的数据放入被选元素中。

<html>

<head>

$(document).ready(function(){

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

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

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

});

</script>

</head>

<body>

</body>

</html>

页面显示为

点击“改变内容”，页面变为

---------------------------------------------------------------------------------------------------------------

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 文件