jQuery预习资料
2017-12-02 10:42
225 查看
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(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>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(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>
<script type="text/javascript" src="jquery.js"></script>
</head>
库的替代
Google 和 Microsoft
对 jQuery
的支持都很好。
如果您不愿意在自己的计算机上存放 jQuery
库，那么可以从 Google or Microsoft 加载
CDN jQuery 核心文件。
使用 Google
的 CDN
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>
</head>
使用 Microsoft
的 CDN
<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
/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>
<script type="text/javascript" src="../jquery/jquery.js" tppabs="http://www.w3school.com.cn/jquery/jquery.js"></script>
<script type="text/javascript">
$(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>
更多的实例
jQuery 选择器
============================================================
jQuery 事件
jquery事件处理函数是当 HTML
中发生事件时自动被调用的函数。由“事件”（event）“触发”（triggered）是经常被用到的术语。
单独文件中的函数（把jQuery
函数放到独立的 .js
文件中,易于jQuery
函数维护）
实例
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="my_jquery_functions.js"></script>
</head>
jQuery 名称冲突（了解）
jQuery 使用 $
符号作为 jQuery
的简介方式。
某些其他 JavaScript
库中的函数（比如 Prototype）同样使用
$ 符号。
jQuery 使用名为 noConflict()
的方法来解决该问题。
var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替
$ 符号。
实例：
<html>
<head>
<script type="text/javascript" src="../jquery/jquery.js" tppabs="http://www.w3school.com.cn/jquery/jquery.js"></script>
<script type="text/javascript">
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 中事件函数的一些例子：
jQuery 事件方法
事件方法会触发匹配元素的事件，或将函数绑定到所有匹配元素的某个事件。
jQuery 事件处理方法
事件处理方法把事件处理器绑定至匹配元素。
===========================================================================================
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>
<script type="text/javascript" src="../jquery/jquery.js" tppabs="http://www.w3school.com.cn/jquery/jquery.js"></script>
<script type="text/javascript">
$(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>
<button id="hide" type="button">Hide</button>
<button id="show" type="button">Show</button>
</body>
</html>
-----------------------------------------------------------------------------------------------------
<html>
<head>
<script type="text/javascript" src="../jquery/jquery.js" tppabs="http://www.w3school.com.cn/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000);
});
});
</script>
</head>
<body>
<button type="button">Hide</button>
<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>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
</script>
</head>
<body>
<button type="button">切换</button>
<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>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideDown("slow");
});
});
</script>
<style type="text/css">
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>
<div class="panel">
<p>W3School - 领先的 Web 技术教程站点</p>
<p>在 W3School，你可以找到你所需要的所有网站建设教程。</p>
</div>
<p class="flip">请点击这里</p>
</body>
</html>
页面为：
点击“请点击这里”之后，页面慢慢向下展开、直到停止，页面为：
---------------------------------------------------------------------------------------------------------------
slideUp() 实例
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideUp("slow");
});
});
</script>
<style type="text/css">
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
}
</style>
</head>
<body>
<div class="panel">
<p>W3School - 领先的 Web 技术教程站点</p>
<p>在 W3School，你可以找到你所需要的所有网站建设教程。</p>
</div>
<p class="flip">请点击这里</p>
</body>
</html>
页面为：
点击“请点击这里”之后，页面慢慢向上收起、直到停止，页面为：
------------------------------------------------------------------------------------------------------
slideToggle() 实例
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideToggle("slow");
});
});
</script>
<style type="text/css">
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>
<div class="panel">
<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>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
});
</script>
</head>
<body>
<p>演示带有不同参数的 fadeIn()
方法。</p>
<button>点击这里，使三个矩形淡入</button>
<br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
</body>
</html>
页面为：
点击“点击这里，使三个矩形淡入”三个矩形逐渐淡入，页面为：
-----------------------------------------------------------------------------------------------
fadeOut() 实例
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
});
</script>
</head>
<body>
<p>演示带有不同参数的 fadeOut()
方法。</p>
<button>点击这里，使三个矩形淡出</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>
页面为：
点击“点击这里，使三个矩形淡入”三个矩形逐渐淡出，页面为：
-------------------------------------------------------------------------------------
fadeToggle() 实例
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
});
</script>
</head>
<body>
<p>演示带有不同参数的 fadeToggle() 方法。</p>
<button>点击这里，使三个矩形淡入淡出</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</body>
</html>
------------------------------------------------------------------------------------------------------------------
fadeTo() 实例
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(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>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</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>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left:'250px'});
});
});
</script>
</head>
<body>
<button>开始动画</button>
<p>默认情况下，所有 HTML
元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position
属性设置为 relative、fixed
或 absolute。</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
----------------------------------------------------------------------------------------------------
实例 2
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
});
</script>
</head>
<body>
<button>开始动画</button>
<p>默认情况下，所有 HTML
元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position
属性设置为 relative、fixed
或 absolute。</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
----------------------------------------------------------------------------------------------------------------------
实例3：
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({ left:'250px', height:'+=150px', width:'+=150px' });
});
});
</script>
</head>
<body>
<button>开始动画</button>
<p>默认情况下，所有 HTML
元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position
属性设置为 relative、fixed
或 absolute。</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"> </div>
</body>
</html>
----------------------------------------------------------------------------------------------
实例4：
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
});
</script>
</head>
<body>
<button>开始动画</button>
<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
------------------------------------------------------------------------------------------------
实例5：
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(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>
<button>开始动画</button>
<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
----------------------------------------------------------------------------------------------
实例6：
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});
});
</script>
</head>
<body>
<button>开始动画</button>
<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>
<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>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown(5000);
});
$("#stop").click(function(){
$("#panel").stop();
});
});
</script>
<style type="text/css">
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
</style>
</head>
<body>
<button id="stop">停止滑动</button>
<div id="flip">点击这里，向下滑动面板</div>
<div id="panel">Hello world!</div>
</body>
</html>
--------------------------------------------------------
实例2：
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"> </script>
<script>
$(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="start">开始</button>
<button id="stop">停止</button>
<button id="stop2">停止所有</button>
<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>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown(5000);
});
$("#stop").click(function(){
$("#panel").stop();
});
});
</script>
<style type="text/css">
#panel,#flip {
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel {
padding:50px;
display:none;
}
</style>
</head>
<body>
<button id="stop">停止滑动</button>
<div id="flip">点击这里，向下滑动面板</div>
<div id="panel">Hello world!</div>
</body>
</html>
jQuery Callback 函数
jQuery 动画的问题：由于 JavaScript
语句（指令）是逐一执行的 -
按照次序，动画之后的语句可能会产生错误或页面冲突，因为动画还没有完成。
为了避免这个情况，您可以以参数的形式添加 Callback
函数。当动画 100% 完成后，即调用
Callback 函数。
实例：
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});
});
});
</script>
</head>
<body>
<button type="button">Hide</button>
<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 效果函数
===================================================================
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>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(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>
<button id="btn1">显示文本</button>
<button id="btn2">显示 HTML</button>
</body>
</html>
----------------------------------------------------------------------------------------
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert("Value: " + $("#test").val());
});
});
</script>
</head>
<body>
<p>姓名：<input type="text" id="test" value="米老鼠"></p>
<button>显示值</button>
</body>
</html>
--------------------------------------------------------------------------
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(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>
<button>显示 href
值</button>
</body>
</html>
-----------------------------------------------------------------------------------------------
jQuery - 设置内容和属性
设置内容 - text()、html() 以及 val()
我们将使用前一章中的三个相同的方法来设置内容：
· text() - 设置或返回所选元素的文本内容
· html() - 设置或返回所选元素的内容（包括
HTML 标记）
· val() - 设置或返回表单字段的值
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(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="test1">这是段落。</p>
<p id="test2">这是另一个段落。</p>
<p>Input field: <input type="text" id="test3" value="Mickey Mouse"></p>
<button id="btn1">设置文本</button>
<button id="btn2">设置 HTML</button>
<button id="btn3">设置值</button>
</body>
</html>
--------------------------------------------------------------------------
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(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="test1">这是<b>粗体</b>文本。</p>
<p id="test2">这是另一段<b>粗体</b>文本。</p>
<button id="btn1">显示旧/新文本</button>
<button id="btn2">显示旧/新
HTML</button>
</body>
</html>
-----------------------------------------------------------------------------------
设置属性 - attr()
jQuery attr()
方法也用于设置/改变属性值。
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(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>
<button>改变
href 值</button>
<p>请把鼠标指针移动到链接上，或者点击该链接，来查看已经改变的
href 值。</p>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(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>
<script src="/jquery/jquery-1.11.1.min.js"></script> <script>
$(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>
<button>改变
href 值</button>
<p>请把鼠标指针移动到链接上，或者点击该链接，来查看已经改变的
href 值。</p>
</body>
</html>
----------------------------------------------------------------------------------------
jQuery - 添加元素
添加新内容的四个 jQuery
方法：
· append() -
在被选元素的结尾插入内容
· prepend() -
在被选元素的开头插入内容
· after() - 在被选元素之后插入内容
· before() -
在被选元素之前插入内容
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"> </script>
<script> $(document).ready(function(){
$("#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>
<ol> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ol>
<button id="btn1">追加文本</button>
<button id="btn2">追加列表项</button>
</body>
</html>
----------------------------------------------------------------------
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(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>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button id="btn1">添加文本</button>
<button id="btn2">添加列表项</button>
</body>
</html>
-------------------------------------------------------------------------
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
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>
<button onclick="appendText()">追加文本</button>
</body>
</html>
--------------------------------------------------------------------
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("img").before("<b>Before</b>");
});
$("#btn2").click(function(){
$("img").after("<i>After</i>");
});
});
</script>
</head>
<body>
<img src="/i/eg_w3school.gif" alt="W3School Logo" />
<br><br>
<button id="btn1">在图片前面添加文本</button>
<button id="btn2">在图片后面添加文本</button>
</body>
</html>
---------------------------------------------------------------------
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
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>
<img src="/i/eg_w3school.gif" alt="W3School Logo" /> <br><br>
<button onclick="afterText()">在图片后面添加文本</button>
</body>
</html>
---------------------------------------------------------------------------
jQuery - 删除元素
删除元素/内容一般可使用以下两个 jQuery
方法：
· remove() -
删除被选元素（及其子元素）
· empty() - 从被选元素中删除子元素
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").remove();
});
});
</script>
</head>
<body>
<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">
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>
<button>删除 div 元素</button>
</body>
</html>
-----------------------------------------------------------------------------------
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").empty();
});
});
</script>
</head>
<body>
<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">
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>
<button>清空 div 元素</button>
</body>
</html>
------------------------------------------------------------------------------------
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(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>
<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>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1,h2,p").addClass("blue");
$("div").addClass("important");
});
});
</script>
<style type="text/css">
.important { font-weight:bold; font-size:xx-large; }
.blue { color:blue; }
</style>
</head>
<body>
<h1>标题 1</h1>
<h2>标题 2</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<div>这是非常重要的文本！</div> <br>
<button>向元素添加类</button>
</body>
</html>
--------------------------------------------------------------------------------
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").addClass("important blue");
});
});
</script>
<style type="text/css">
.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>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1,h2,p").removeClass("blue");
});
});
</script>
<style type="text/css">
.important { font-weight:bold; font-size:xx-large; }
.blue { color:blue; }
</style>
</head>
<body>
<h1 class="blue">标题 1</h1>
<h2 class="blue">标题 2</h2>
<p class="blue">这是一个段落。</p>
<p>这是另一个段落。</p> <br>
<button>从元素上删除类</button>
</body>
</html>
-------------------------------------------------------------------------------------
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"> </script>
<script> $(document).ready(function(){
$("button").click(function(){
$("h1,h2,p").toggleClass("blue");
});
});
</script>
<style type="text/css">
.blue { color:blue; }
</style>
</head>
<body>
<h1>标题 1</h1>
<h2>标题 2</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>切换 CSS
类</button>
</body>
</html>
--------------------------------------------------------------------------------------
jQuery - css() 方法
css() 方法设置或返回被选元素的一个或多个样式属性。
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert("Background color = " + $("p").css("background-color"));
});
});
</script>
</head>
<body>
<h2>这是标题</h2>
<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>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").css("background-color","yellow");
});
});
</script>
</head>
<body>
<h2>这是标题</h2>
<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>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").css({"background-color":"yellow","font-size":"200%"});
});
});
</script>
</head>
<body>
<h2>这是标题</h2>
<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 函数 -
来自本页
jQuery CSS 操作函数
下面列出的这些方法设置或返回元素的 CSS
相关属性。
--------------------------------------------------------------------------------
jQuery - 尺寸
jQuery 提供多个处理尺寸的重要方法：
· width()
· height()
· innerWidth()
· innerHeight()
· outerWidth()
· outerHeight()
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"> </script>
<script>
$(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>
<div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div> <br>
<button>显示 div
的尺寸</button>
<p>width() - 返回元素的宽度。</p>
<p>height() - 返回元素的高度。</p>
</body
19826
>
</html>
----------------------------------------------------------------------------------------
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"> </script>
<script>
$(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>
<div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div> <br>
<button>显示 div
的尺寸</button>
<p>innerWidth() - 返回元素的宽度（包括内边距）。</p>
<p>innerHeight() - 返回元素的高度（包括内边距）。</p>
</body>
</html>
---------------------------------------------------------------------------------------
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<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>
<div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
<br>
<button>显示 div
的尺寸</button>
<p>outerWidth() - 返回元素的宽度（包括内边距和边框）。</p>
<p>outerHeight() - 返回元素的高度（包括内边距和边框）。</p>
</body>
</html>
---------------------------------------------------------------------------------------
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"> </script>
<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 (margin included): " + $("#div1").outerWidth(true) + "</br>";
txt+="Outer height of div (margin included): " + $("#div1").outerHeight(true);
$("#div1").html(txt);
});
});
</script>
</head>
<body>
<div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div> <br>
<button>显示 div
的尺寸</button>
<p>outerWidth(true) - 返回元素的宽度（包括内边距、边框和外边距）。</p>
<p>outerHeight(true) - 返回元素的高度（包括内边距、边框和外边距）。</p>
</body>
</html>
-----------------------------------------------------------------------------------------
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(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>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").width(320).height(320);
});
});
</script>
</head>
<body>
<div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div> <br>
<button>调整 div
的尺寸</button>
</body>
</html>
jQuery 文档操作方法
这些方法对于 XML 文档和
HTML 文档均是适用的，除了：html()。
==============================================================================
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>
<script src="/jquery/jquery-1.11.1.min.js"> </script>
<script>
$(document).ready(function(){
$("span").parent().css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body>
<div class="ancestors">
<div style="width:500px;">div (曾祖父)
<ul>ul (祖父)
<li>li (直接父)
<span>span</span>
</li>
</ul>
</div>
<div style="width:500px;">div (祖父)
<p>p (直接父)
<span>span</span>
</p>
</div>
</div>
</body>
</html>
结果：
-------------------------------------------------------------------------
<html>
<head>
<style>
.ancestors *
{
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<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 (直接父)
<span>span</span>
</li>
</ul>
</div>
</body>
<!-- 最外围的红色边框，在 body 元素之前，是 html 元素（也是祖先）。 -->
</html>
结果：
------------------------------------------------------------------------------------
<html>
<head>
<style>
.ancestors *
{
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<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 (直接父)
<span>span</span>
</li>
</ul>
</div>
</body>
</html>
结果：
------------------------------------------------------------------------------
<html>
<head>
<style>
.ancestors *
{
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<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 (直接父)
<span>span</span>
</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>
<script src="/jquery/jquery-1.11.1.min.js"> </script>
<script>
$(document).ready(function(){
$("div").children().css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body>
<div class="descendants" style="width:500px;">div (当前元素)
<p>p (子)
<span>span (孙)</span>
</p>
<p>p (child)
<span>span (孙)</span>
</p>
</div>
</body>
</html>
结果：
--------------------------------------------------------------------------------------
<html>
<head>
<style>
.descendants *
{
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<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 (子)
<span>span (孙)</span>
</p>
<p class="2">p (子)
<span>span (孙)</span>
</p>
</div>
</body>
</html>
结果：
-------------------------------------------------------------------------
<html>
<head>
<style>
.descendants *
{
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<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 (子)
<span>span (孙)</span>
</p>
<p>p (child)
<span>span (孙)</span>
</p>
</div>
</body>
</html>
结果：
-------------------------------------------------------------------------
<html>
<head>
<style>
.descendants *
{
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<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 (子)
<span>span (孙)</span>
</p>
<p>p (child)
<span>span (孙)</span>
</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>
<script src="/jquery/jquery-1.11.1.min.js"> </script>
<script>
$(document).ready(function(){
$("h2").siblings().css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body class="siblings">
<div>div (父)
<p>p</p>
<span>span</span>
<h2>h2</h2>
<h3>h3</h3>
<p>p</p>
</div>
</body>
</html>
----------------------------------------------------------------------------------
<html>
<head>
<style>
.siblings *
{
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
$("h2").siblings("p").css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body class="siblings">
<div>div (父)
<p>p</p>
<span>span</span>
<h2>h2</h2>
<h3>h3</h3>
<p>p</p>
</div>
</body>
</html>
------------------------------------------------------------------------------------
<html>
<head>
<style>
.siblings *
{
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
$("h2").next().css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body class="siblings">
<div>div (父)
<p>p</p>
<span>span</span>
<h2>h2</h2>
<h3>h3</h3>
<p>p</p>
</div>
</body>
</html>
------------------------------------------------------------------------------------
<html>
<head>
<style>
.siblings *
{
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
$("h2").nextAll().css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body class="siblings">
<div>div (父)
<p>p</p>
<span>span</span>
<h2>h2</h2>
<h3>h3</h3>
<p>p</p>
</div>
</body>
</html>
------------------------------------------------------------------------------------
<html>
<head>
<style>
.siblings *
{
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
$("h2").nextUntil("h6").css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body class="siblings">
<div>div (父)
<p>p</p>
<span>span</span>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
<p>p</p>
</div>
</body>
</html>
------------------------------------------------------------------------------------
jQuery 遍历 - 过滤
三个最基本的过滤方法是：
●first()
方法返回被选元素的首个元素。
●last()
方法返回被选元素的最后一个元素。
●eq() 方法返回被选元素中带有指定索引号的元素。索引号从
0 开始，因此首个元素的索引号是
0 而不是
1。
●filter()
方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
●not()
方法返回不匹配标准的所有元素。
提示：not()
方法与 filter()
相反。
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<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 src="/jquery/jquery-1.11.1.min.js">
</script>
<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 src="/jquery/jquery-1.11.1.min.js">
</script>
<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 src="/jquery/jquery-1.11.1.min.js">
</script>
<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 src="/jquery/jquery-1.11.1.min.js">
</script>
<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>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#b01").click(function(){
$('#myDiv').load('/jquery/test1.txt');
});
});
</script>
</head>
<body>
<div id="myDiv"><h2>通过 AJAX
改变文本</h2></div>
<button id="b01" type="button">改变内容</button>
</body>
</html>
页面显示为
点击“改变内容”，页面变为
----------------------------------------------------------------------------------------------------------------
jQuery - AJAX load() 方法
● load()
方法从服务器加载数据，并把返回的数据放入被选元素中。
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#b01").click(function(){
htmlobj=$.ajax({url:"/jquery/test1.txt",async:false});
$("#myDiv").html(htmlobj.responseText);
});
});
</script>
</head>
<body>
<div id="myDiv"><h2>通过 AJAX
改变文本</h2></div>
<button id="b01" type="button">改变内容</button>
</body>
</html>
页面显示为
点击“改变内容”，页面变为
---------------------------------------------------------------------------------------------------------------
jQuery AJAX 请求
注：
(url) 被加载的数据的 URL（地址）
(data) 发送到服务器的数据的键/值对象
(callback) 当数据被加载时，所执行的函数
(type) 被返回的数据的类型 (html,xml,json,jasonp,script,text)
(options) 完整 AJAX
请求的所有键/值对选项
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(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>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(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>
<script type="text/javascript" src="jquery.js"></script>
</head>
库的替代
Google 和 Microsoft
对 jQuery
的支持都很好。
如果您不愿意在自己的计算机上存放 jQuery
库，那么可以从 Google or Microsoft 加载
CDN jQuery 核心文件。
使用 Google
的 CDN
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>
</head>
使用 Microsoft
的 CDN
<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
/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>
<script type="text/javascript" src="../jquery/jquery.js" tppabs="http://www.w3school.com.cn/jquery/jquery.js"></script>
<script type="text/javascript">
$(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" 的元素 |
| 选择器 | 实例 | 选取 |
| * | $("*") | 所有元素 |
| #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>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="my_jquery_functions.js"></script>
</head>
jQuery 名称冲突（了解）
jQuery 使用 $
符号作为 jQuery
的简介方式。
某些其他 JavaScript
库中的函数（比如 Prototype）同样使用
$ 符号。
jQuery 使用名为 noConflict()
的方法来解决该问题。
var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替
$ 符号。
实例：
<html>
<head>
<script type="text/javascript" src="../jquery/jquery.js" tppabs="http://www.w3school.com.cn/jquery/jquery.js"></script>
<script type="text/javascript">
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 事件处理方法
事件处理方法把事件处理器绑定至匹配元素。
| 方法 | 触发 |
| $(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>
<script type="text/javascript" src="../jquery/jquery.js" tppabs="http://www.w3school.com.cn/jquery/jquery.js"></script>
<script type="text/javascript">
$(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>
<button id="hide" type="button">Hide</button>
<button id="show" type="button">Show</button>
</body>
</html>
-----------------------------------------------------------------------------------------------------
<html>
<head>
<script type="text/javascript" src="../jquery/jquery.js" tppabs="http://www.w3school.com.cn/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000);
});
});
</script>
</head>
<body>
<button type="button">Hide</button>
<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>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").toggle();
});
});
</script>
</head>
<body>
<button type="button">切换</button>
<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>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideDown("slow");
});
});
</script>
<style type="text/css">
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>
<div class="panel">
<p>W3School - 领先的 Web 技术教程站点</p>
<p>在 W3School，你可以找到你所需要的所有网站建设教程。</p>
</div>
<p class="flip">请点击这里</p>
</body>
</html>
页面为：
点击“请点击这里”之后，页面慢慢向下展开、直到停止，页面为：
---------------------------------------------------------------------------------------------------------------
slideUp() 实例
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideUp("slow");
});
});
</script>
<style type="text/css">
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
}
</style>
</head>
<body>
<div class="panel">
<p>W3School - 领先的 Web 技术教程站点</p>
<p>在 W3School，你可以找到你所需要的所有网站建设教程。</p>
</div>
<p class="flip">请点击这里</p>
</body>
</html>
页面为：
点击“请点击这里”之后，页面慢慢向上收起、直到停止，页面为：
------------------------------------------------------------------------------------------------------
slideToggle() 实例
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".flip").click(function(){
$(".panel").slideToggle("slow");
});
});
</script>
<style type="text/css">
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>
<div class="panel">
<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>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
});
</script>
</head>
<body>
<p>演示带有不同参数的 fadeIn()
方法。</p>
<button>点击这里，使三个矩形淡入</button>
<br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
</body>
</html>
页面为：
点击“点击这里，使三个矩形淡入”三个矩形逐渐淡入，页面为：
-----------------------------------------------------------------------------------------------
fadeOut() 实例
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
});
</script>
</head>
<body>
<p>演示带有不同参数的 fadeOut()
方法。</p>
<button>点击这里，使三个矩形淡出</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>
页面为：
点击“点击这里，使三个矩形淡入”三个矩形逐渐淡出，页面为：
-------------------------------------------------------------------------------------
fadeToggle() 实例
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeToggle();
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});
});
</script>
</head>
<body>
<p>演示带有不同参数的 fadeToggle() 方法。</p>
<button>点击这里，使三个矩形淡入淡出</button>
<br><br>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</body>
</html>
------------------------------------------------------------------------------------------------------------------
fadeTo() 实例
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(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>
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<br>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<br>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</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>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left:'250px'});
});
});
</script>
</head>
<body>
<button>开始动画</button>
<p>默认情况下，所有 HTML
元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position
属性设置为 relative、fixed
或 absolute。</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
----------------------------------------------------------------------------------------------------
实例 2
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
});
</script>
</head>
<body>
<button>开始动画</button>
<p>默认情况下，所有 HTML
元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position
属性设置为 relative、fixed
或 absolute。</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
----------------------------------------------------------------------------------------------------------------------
实例3：
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({ left:'250px', height:'+=150px', width:'+=150px' });
});
});
</script>
</head>
<body>
<button>开始动画</button>
<p>默认情况下，所有 HTML
元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position
属性设置为 relative、fixed
或 absolute。</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"> </div>
</body>
</html>
----------------------------------------------------------------------------------------------
实例4：
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});
});
</script>
</head>
<body>
<button>开始动画</button>
<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
------------------------------------------------------------------------------------------------
实例5：
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(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>
<button>开始动画</button>
<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
----------------------------------------------------------------------------------------------
实例6：
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
});
});
</script>
</head>
<body>
<button>开始动画</button>
<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>
<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>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown(5000);
});
$("#stop").click(function(){
$("#panel").stop();
});
});
</script>
<style type="text/css">
#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}
</style>
</head>
<body>
<button id="stop">停止滑动</button>
<div id="flip">点击这里，向下滑动面板</div>
<div id="panel">Hello world!</div>
</body>
</html>
--------------------------------------------------------
实例2：
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"> </script>
<script>
$(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="start">开始</button>
<button id="stop">停止</button>
<button id="stop2">停止所有</button>
<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>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideDown(5000);
});
$("#stop").click(function(){
$("#panel").stop();
});
});
</script>
<style type="text/css">
#panel,#flip {
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel {
padding:50px;
display:none;
}
</style>
</head>
<body>
<button id="stop">停止滑动</button>
<div id="flip">点击这里，向下滑动面板</div>
<div id="panel">Hello world!</div>
</body>
</html>
jQuery Callback 函数
jQuery 动画的问题：由于 JavaScript
语句（指令）是逐一执行的 -
按照次序，动画之后的语句可能会产生错误或页面冲突，因为动画还没有完成。
为了避免这个情况，您可以以参数的形式添加 Callback
函数。当动画 100% 完成后，即调用
Callback 函数。
实例：
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});
});
});
</script>
</head>
<body>
<button type="button">Hide</button>
<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>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(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>
<button id="btn1">显示文本</button>
<button id="btn2">显示 HTML</button>
</body>
</html>
----------------------------------------------------------------------------------------
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert("Value: " + $("#test").val());
});
});
</script>
</head>
<body>
<p>姓名：<input type="text" id="test" value="米老鼠"></p>
<button>显示值</button>
</body>
</html>
--------------------------------------------------------------------------
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(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>
<button>显示 href
值</button>
</body>
</html>
-----------------------------------------------------------------------------------------------
jQuery - 设置内容和属性
设置内容 - text()、html() 以及 val()
我们将使用前一章中的三个相同的方法来设置内容：
· text() - 设置或返回所选元素的文本内容
· html() - 设置或返回所选元素的内容（包括
HTML 标记）
· val() - 设置或返回表单字段的值
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(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="test1">这是段落。</p>
<p id="test2">这是另一个段落。</p>
<p>Input field: <input type="text" id="test3" value="Mickey Mouse"></p>
<button id="btn1">设置文本</button>
<button id="btn2">设置 HTML</button>
<button id="btn3">设置值</button>
</body>
</html>
--------------------------------------------------------------------------
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(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="test1">这是<b>粗体</b>文本。</p>
<p id="test2">这是另一段<b>粗体</b>文本。</p>
<button id="btn1">显示旧/新文本</button>
<button id="btn2">显示旧/新
HTML</button>
</body>
</html>
-----------------------------------------------------------------------------------
设置属性 - attr()
jQuery attr()
方法也用于设置/改变属性值。
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(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>
<button>改变
href 值</button>
<p>请把鼠标指针移动到链接上，或者点击该链接，来查看已经改变的
href 值。</p>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(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>
<script src="/jquery/jquery-1.11.1.min.js"></script> <script>
$(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>
<button>改变
href 值</button>
<p>请把鼠标指针移动到链接上，或者点击该链接，来查看已经改变的
href 值。</p>
</body>
</html>
----------------------------------------------------------------------------------------
jQuery - 添加元素
添加新内容的四个 jQuery
方法：
· append() -
在被选元素的结尾插入内容
· prepend() -
在被选元素的开头插入内容
· after() - 在被选元素之后插入内容
· before() -
在被选元素之前插入内容
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"> </script>
<script> $(document).ready(function(){
$("#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>
<ol> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ol>
<button id="btn1">追加文本</button>
<button id="btn2">追加列表项</button>
</body>
</html>
----------------------------------------------------------------------
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(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>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button id="btn1">添加文本</button>
<button id="btn2">添加列表项</button>
</body>
</html>
-------------------------------------------------------------------------
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
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>
<button onclick="appendText()">追加文本</button>
</body>
</html>
--------------------------------------------------------------------
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("img").before("<b>Before</b>");
});
$("#btn2").click(function(){
$("img").after("<i>After</i>");
});
});
</script>
</head>
<body>
<img src="/i/eg_w3school.gif" alt="W3School Logo" />
<br><br>
<button id="btn1">在图片前面添加文本</button>
<button id="btn2">在图片后面添加文本</button>
</body>
</html>
---------------------------------------------------------------------
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
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>
<img src="/i/eg_w3school.gif" alt="W3School Logo" /> <br><br>
<button onclick="afterText()">在图片后面添加文本</button>
</body>
</html>
---------------------------------------------------------------------------
jQuery - 删除元素
删除元素/内容一般可使用以下两个 jQuery
方法：
· remove() -
删除被选元素（及其子元素）
· empty() - 从被选元素中删除子元素
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").remove();
});
});
</script>
</head>
<body>
<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">
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>
<button>删除 div 元素</button>
</body>
</html>
-----------------------------------------------------------------------------------
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").empty();
});
});
</script>
</head>
<body>
<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">
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>
<button>清空 div 元素</button>
</body>
</html>
------------------------------------------------------------------------------------
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(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>
<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>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1,h2,p").addClass("blue");
$("div").addClass("important");
});
});
</script>
<style type="text/css">
.important { font-weight:bold; font-size:xx-large; }
.blue { color:blue; }
</style>
</head>
<body>
<h1>标题 1</h1>
<h2>标题 2</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<div>这是非常重要的文本！</div> <br>
<button>向元素添加类</button>
</body>
</html>
--------------------------------------------------------------------------------
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").addClass("important blue");
});
});
</script>
<style type="text/css">
.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>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1,h2,p").removeClass("blue");
});
});
</script>
<style type="text/css">
.important { font-weight:bold; font-size:xx-large; }
.blue { color:blue; }
</style>
</head>
<body>
<h1 class="blue">标题 1</h1>
<h2 class="blue">标题 2</h2>
<p class="blue">这是一个段落。</p>
<p>这是另一个段落。</p> <br>
<button>从元素上删除类</button>
</body>
</html>
-------------------------------------------------------------------------------------
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"> </script>
<script> $(document).ready(function(){
$("button").click(function(){
$("h1,h2,p").toggleClass("blue");
});
});
</script>
<style type="text/css">
.blue { color:blue; }
</style>
</head>
<body>
<h1>标题 1</h1>
<h2>标题 2</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>切换 CSS
类</button>
</body>
</html>
--------------------------------------------------------------------------------------
jQuery - css() 方法
css() 方法设置或返回被选元素的一个或多个样式属性。
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert("Background color = " + $("p").css("background-color"));
});
});
</script>
</head>
<body>
<h2>这是标题</h2>
<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>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").css("background-color","yellow");
});
});
</script>
</head>
<body>
<h2>这是标题</h2>
<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>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").css({"background-color":"yellow","font-size":"200%"});
});
});
</script>
</head>
<body>
<h2>这是标题</h2>
<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) | 设置匹配元素的宽度 |
下面列出的这些方法设置或返回元素的 CSS
相关属性。
| CSS 属性 | 描述 |
| css() | 设置或返回匹配元素的样式属性。 |
| height() | 设置或返回匹配元素的高度。 |
| offset() | 返回第一个匹配元素相对于文档的位置。 |
| offsetParent() | 返回最近的定位祖先元素。 |
| position() | 返回第一个匹配元素相对于父元素的位置。 |
| scrollTop() | 设置或返回匹配元素相对滚动条顶部的偏移。 |
| scrollLeft() | 设置或返回匹配元素相对滚动条左侧的偏移。 |
| width() | 设置或返回匹配元素的宽度。 |
jQuery - 尺寸
jQuery 提供多个处理尺寸的重要方法：
· width()
· height()
· innerWidth()
· innerHeight()
· outerWidth()
· outerHeight()
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"> </script>
<script>
$(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>
<div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div> <br>
<button>显示 div
的尺寸</button>
<p>width() - 返回元素的宽度。</p>
<p>height() - 返回元素的高度。</p>
</body
19826
>
</html>
----------------------------------------------------------------------------------------
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"> </script>
<script>
$(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>
<div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div> <br>
<button>显示 div
的尺寸</button>
<p>innerWidth() - 返回元素的宽度（包括内边距）。</p>
<p>innerHeight() - 返回元素的高度（包括内边距）。</p>
</body>
</html>
---------------------------------------------------------------------------------------
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<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>
<div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
<br>
<button>显示 div
的尺寸</button>
<p>outerWidth() - 返回元素的宽度（包括内边距和边框）。</p>
<p>outerHeight() - 返回元素的高度（包括内边距和边框）。</p>
</body>
</html>
---------------------------------------------------------------------------------------
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"> </script>
<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 (margin included): " + $("#div1").outerWidth(true) + "</br>";
txt+="Outer height of div (margin included): " + $("#div1").outerHeight(true);
$("#div1").html(txt);
});
});
</script>
</head>
<body>
<div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div> <br>
<button>显示 div
的尺寸</button>
<p>outerWidth(true) - 返回元素的宽度（包括内边距、边框和外边距）。</p>
<p>outerHeight(true) - 返回元素的高度（包括内边距、边框和外边距）。</p>
</body>
</html>
-----------------------------------------------------------------------------------------
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(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>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").width(320).height(320);
});
});
</script>
</head>
<body>
<div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div> <br>
<button>调整 div
的尺寸</button>
</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>
<script src="/jquery/jquery-1.11.1.min.js"> </script>
<script>
$(document).ready(function(){
$("span").parent().css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body>
<div class="ancestors">
<div style="width:500px;">div (曾祖父)
<ul>ul (祖父)
<li>li (直接父)
<span>span</span>
</li>
</ul>
</div>
<div style="width:500px;">div (祖父)
<p>p (直接父)
<span>span</span>
</p>
</div>
</div>
</body>
</html>
结果：
-------------------------------------------------------------------------
<html>
<head>
<style>
.ancestors *
{
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<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 (直接父)
<span>span</span>
</li>
</ul>
</div>
</body>
<!-- 最外围的红色边框，在 body 元素之前，是 html 元素（也是祖先）。 -->
</html>
结果：
------------------------------------------------------------------------------------
<html>
<head>
<style>
.ancestors *
{
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<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 (直接父)
<span>span</span>
</li>
</ul>
</div>
</body>
</html>
结果：
------------------------------------------------------------------------------
<html>
<head>
<style>
.ancestors *
{
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<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 (直接父)
<span>span</span>
</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>
<script src="/jquery/jquery-1.11.1.min.js"> </script>
<script>
$(document).ready(function(){
$("div").children().css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body>
<div class="descendants" style="width:500px;">div (当前元素)
<p>p (子)
<span>span (孙)</span>
</p>
<p>p (child)
<span>span (孙)</span>
</p>
</div>
</body>
</html>
结果：
--------------------------------------------------------------------------------------
<html>
<head>
<style>
.descendants *
{
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<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 (子)
<span>span (孙)</span>
</p>
<p class="2">p (子)
<span>span (孙)</span>
</p>
</div>
</body>
</html>
结果：
-------------------------------------------------------------------------
<html>
<head>
<style>
.descendants *
{
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<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 (子)
<span>span (孙)</span>
</p>
<p>p (child)
<span>span (孙)</span>
</p>
</div>
</body>
</html>
结果：
-------------------------------------------------------------------------
<html>
<head>
<style>
.descendants *
{
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<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 (子)
<span>span (孙)</span>
</p>
<p>p (child)
<span>span (孙)</span>
</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>
<script src="/jquery/jquery-1.11.1.min.js"> </script>
<script>
$(document).ready(function(){
$("h2").siblings().css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body class="siblings">
<div>div (父)
<p>p</p>
<span>span</span>
<h2>h2</h2>
<h3>h3</h3>
<p>p</p>
</div>
</body>
</html>
----------------------------------------------------------------------------------
<html>
<head>
<style>
.siblings *
{
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
$("h2").siblings("p").css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body class="siblings">
<div>div (父)
<p>p</p>
<span>span</span>
<h2>h2</h2>
<h3>h3</h3>
<p>p</p>
</div>
</body>
</html>
------------------------------------------------------------------------------------
<html>
<head>
<style>
.siblings *
{
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
$("h2").next().css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body class="siblings">
<div>div (父)
<p>p</p>
<span>span</span>
<h2>h2</h2>
<h3>h3</h3>
<p>p</p>
</div>
</body>
</html>
------------------------------------------------------------------------------------
<html>
<head>
<style>
.siblings *
{
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
$("h2").nextAll().css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body class="siblings">
<div>div (父)
<p>p</p>
<span>span</span>
<h2>h2</h2>
<h3>h3</h3>
<p>p</p>
</div>
</body>
</html>
------------------------------------------------------------------------------------
<html>
<head>
<style>
.siblings *
{
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
$("h2").nextUntil("h6").css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body class="siblings">
<div>div (父)
<p>p</p>
<span>span</span>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
<p>p</p>
</div>
</body>
</html>
------------------------------------------------------------------------------------
jQuery 遍历 - 过滤
三个最基本的过滤方法是：
●first()
方法返回被选元素的首个元素。
●last()
方法返回被选元素的最后一个元素。
●eq() 方法返回被选元素中带有指定索引号的元素。索引号从
0 开始，因此首个元素的索引号是
0 而不是
1。
●filter()
方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
●not()
方法返回不匹配标准的所有元素。
提示：not()
方法与 filter()
相反。
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<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 src="/jquery/jquery-1.11.1.min.js">
</script>
<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 src="/jquery/jquery-1.11.1.min.js">
</script>
<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 src="/jquery/jquery-1.11.1.min.js">
</script>
<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 src="/jquery/jquery-1.11.1.min.js">
</script>
<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>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#b01").click(function(){
$('#myDiv').load('/jquery/test1.txt');
});
});
</script>
</head>
<body>
<div id="myDiv"><h2>通过 AJAX
改变文本</h2></div>
<button id="b01" type="button">改变内容</button>
</body>
</html>
页面显示为
点击“改变内容”，页面变为
----------------------------------------------------------------------------------------------------------------
jQuery - AJAX load() 方法
● load()
方法从服务器加载数据，并把返回的数据放入被选元素中。
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#b01").click(function(){
htmlobj=$.ajax({url:"/jquery/test1.txt",async:false});
$("#myDiv").html(htmlobj.responseText);
});
});
</script>
</head>
<body>
<div id="myDiv"><h2>通过 AJAX
改变文本</h2></div>
<button id="b01" type="button">改变内容</button>
</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 文件 |
(url) 被加载的数据的 URL（地址）
(data) 发送到服务器的数据的键/值对象
(callback) 当数据被加载时，所执行的函数
(type) 被返回的数据的类型 (html,xml,json,jasonp,script,text)
(options) 完整 AJAX
请求的所有键/值对选项
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 数据通信与网络三——OSI每层的功能简介（预习资料与个人总结大全）
- 【jquery】 API讲解 内部培训资料
- jQuery .tmpl(), .template()学习资料小结
- 利用JQuery的上传插件实现资料的上传
- Jquery Web 前端验证框架插件，jquery-validate资料，validation
- jquery datagrid 所有资料
- jquery 资料链接
- !! jquery主要资料
- JQuery官方学习资料（译）：遍历
- jQuery学习资料分享
- jquery学习资料
- jQuery 工具函数学习资料
- 很不错的jQuery学习资料和实例
- jQuery资料参考
- JQuery相关资料
- jQuery .tmpl(), .template()学习资料小结
- jQuery 如何操作cookie (网上资料太乱,故特意整理最简单的)
- jquery学习资料
- jquery 资料
- jQuery .tmpl(), .template()学习资料小结