您的位置：首页 > Web前端 > JQuery

Web_JavaScript_JQuery_JQuery基础知识；

2014-12-17 15:29 656 查看

=〉2014/12/14 17:00

基础教程：http://w3school.com.cn/jquery/index.asp

参考手册：http://w3school.com.cn/jquery/jquery_reference.asp

jQuery基础知识

<一>、jQuery 教程

1、前言

jQuery 是一个轻量级JavaScript 库。jQuery 极大地简化JavaScript编程。jQuery 很容易学习。

2、通用实例

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

一、jQuery 简介

1、jQuery 库可以通过一行简单的标记被添加到网页中。jQuery 是一个 JavaScript 函数库。

2、特性

(1)、HTML 元素选取；

(2)、HTML 元素操作；

(3)、CSS 操作；

(4)、HTML 事件函数；

(5)、JavaScript 特效和动画；

(6)、HTML DOM 遍历和修改；

(7)、AJAX；

(8)、Utilities；

3、JQuery引用

向您的页面添加 jQuery 库，jQuery 库位于一个 JavaScript 文件中，其中包含了所有的 jQuery 函数。

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

</head>

4、基础JQuery实例

功能：使用hide()函数隐藏文档中所有的<p>元素；

<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>
<p>This is another paragraph.</p>
<button type="button">Click me</button>
</body>
</html>

5、jQuery下载

共有两个版本的 jQuery 可供下载：一份是精简过的，另一份是未压缩的（供调试或阅读）。

下载地址：http://jquery.com/download/#Download_jQuery

6、库替代法

Google 和 Microsoft 对 jQuery 的支持都很好。如果您不愿意在自己的计算机上存放 jQuery 库，那么可以从 Google 或 Microsoft 加载 CDN jQuery 核心文件。

(1)、使用 Google CDN

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>

</head>

(2)、使用 Microsoft CDN

<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>

</head>

二、jQuery 安装

1、jQuery引用

如需使用 jQuery，您需要下载 jQuery 库（会在下面为您讲解），然后把它包含在希望使用的网页中。jQuery 库是一个 JavaScript 文件，您可以使用 HTML 的 <script> 标签引用它：

<head>
<script src="jquery.js"></script>

</head>

提示：您是否很疑惑为什么我们没有在 <script> 标签中使用 type="text/javascript" ？在 HTML5 中，不必那样做了。JavaScript 是 HTML5 以及所有现代浏览器中的默认脚本语言！

2、jQuery下载

有两个版本的 jQuery 可供下载：

1)、Production version - 用于实际的网站中，已被精简和压缩；

2)、Development version - 用于测试和开发（未压缩，是可读的代码）；

这两个版本都可以从 jQuery.com 下载。

3、替代方案

如果您不希望下载并存放 jQuery，那么也可以通过 CDN（内容分发网络）引用它。谷歌和微软的服务器都存有 jQuery 。

(1)、Google CDN

<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

</head>

(2)、Microsoft CDN

<head>

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>

</head>

提示：使用谷歌或微软的 jQuery，有一个很大的优势：许多用户在访问其他站点时，已经从谷歌或微软加载过 jQuery。所有结果是，当他们访问您的站点时，会从缓存中加载 jQuery，这样可以减少加载时间。同时，大多数 CDN 都可以确保当用户向其请求文件时，会从离用户最近的服务器上返回响应，这样也可以提高加载速度。

三、jQuery 语法

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

1、$(this).hide()实例

功能：隐藏当前的HTML元素；

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$(this).hide();	// this指当前触发click的按钮；
});
});
</script>
</head>
<body>
<button type="button">Click me</button>
</body>
</html>

2、$("#test").hide()实例

功能：隐藏id="text"的元素；

3、$("p").hide()实例

功能：隐藏所有<p>元素；

4、$(".test").hide()实例

功能：隐藏所有class="test"的元素；

5、jQuery 语法

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

语法：$(selector).action()

说明：美元符号定义 jQuery；选择符（selector）“查询”和“查找” HTML 元素；action() 执行对元素的操作；

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

6、文档就绪函数

所有 jQuery 函数位于一个 document ready 函数中：

$(document).ready(function(){

--- jQuery functions go here ----

});

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。如果在文档没有完全加载之前就运行函数，操作可能失败。

四、jQuery 选择器

选择器允许您对元素组或单个元素进行操作。关键点是学习 jQuery 选择器是如何准确地选取您希望应用效果的元素。

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

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 属性。

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

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

4、选择器实例

$(this) 当前 HTML 元素

$("p") 所有 <p> 元素

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

$(".intro") 所有 class="intro" 的元素

$("#intro") id="intro" 的元素

$("ul li:first") 每个 <ul> 的第一个 <li> 元素

$("[href$='.jpg']") 所有带有以 ".jpg" 结尾的属性值的 href 属性

$("div#intro .head") id="intro" 的 <div> 元素中的所有 class="head" 的元素

五、jQuery 事件

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

1、jQuery 事件函数

jQuery 事件处理方法是 jQuery 中的核心函数。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”（或“激发”）经常会被使用。通常会把 jQuery 代码放到 <head>部分的事件处理方法中：

<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>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>

2、单独文件中的函数

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

3、jQuery 名称冲突

jQuery 使用 $ 符号作为 jQuery 的简介方式。某些其他 JavaScript 库中的函数（比如 Prototype）同样使用 $ 符号。jQuery 使用名为 noConflict() 的方法来解决该问题。var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替 $ 符号；

4、事件结论

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

(1)、把所有 jQuery 代码置于事件处理函数中；

(2)、把所有事件处理函数置于文档就绪事件处理器中；

(3)、把 jQuery 代码置于单独的 .js 文件中；

(4)、如果存在名称冲突，则重命名 jQuery 库；

5、jQuery 事件

jQuery 事件方法部分例子(jQuery 事件参考手册：http://w3school.com.cn/jquery/jquery_ref_events.asp)

Event 函数绑定函数至

$(document).ready(function) 将函数绑定到文档的就绪事件（当文档完成加载时）

$(selector).click(function) 触发或将函数绑定到被选元素的点击事件

$(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件

$(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件

$(selector).mouseover(function)触发或将函数绑定到被选元素的鼠标悬停事件

<二>、jQuery 效果

隐藏、显示、切换，滑动，淡入淡出，以及动画，哇哦！

一、隐藏和显示

通过 jQuery，您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素

语法：

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

1、隐藏_hide()

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".ex .hide").click(function(){
$(this).parents(".ex").hide("slow");
});
});
</script>
<style type="text/css">
div.ex
{
background-color:#e5eecc;
padding:7px;
border:solid 1px #c3c3c3;
}
</style>
</head>
<body>
<h3>中国办事处</h3>
<div class="ex">
<button class="hide" type="button">隐藏</button>
<p>
联系人：张先生<br />
北三环中路 100 号<br />
北京
</p>
</div>
<h3>美国办事处</h3>
<div class="ex">
<button class="hide" type="button">隐藏</button>
<p>
联系人：David<br />
第五大街 200 号<br />
纽约
</p>
</div>
</body>
</html>

2、显示_show()

3、显示/隐藏开关_toggle()

通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。显示被隐藏的元素，并隐藏已显示的元素：

语法：$(selector).toggle(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。

二、淡入淡出

通过 jQuery，您可以实现元素的淡入淡出效果。

jQuery 拥有下面四种 fade 方法：

fadeIn()：淡入已隐藏的元素；

fadeOut()：用于淡出可见元素；

fadeToggle()：可以在 fadeIn() 与 fadeOut() 方法之间进行切换；

fadeTo()：允许渐变为给定的不透明度（值介于 0 与 1 之间）；

1、淡入_fadeIn()

$(selector).fadeIn(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。可选的 callback 参数是 fading 完成后所执行的函数名称。

2、淡出_fadeOut()

$(selector).fadeOut(speed,callback);

3、淡入/淡出开关_fadeToggle()

如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。

如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。

$(selector).fadeToggle(speed,callback);

4、 fadeTo()

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

必需的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。可选的 callback 参数是该函数完成后所执行的函数名称。

三、滑动

jQuery 滑动方法可使元素上下滑动。通过 jQuery，您可以在元素上创建滑动效果。

jQuery 拥有以下滑动方法：

slideDown()

slideUp()

slideToggle()

1、向下滑动显示_slideDown()

$(selector).slideDown(speed,callback);

<!DOCTYPE html>
<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>

2、向上滑动隐藏_slideUp()

$(selector).slideUp(speed,callback);

3、滑动开关_slideToggle()

可以在 slideDown() 与 slideUp() 方法之间进行切换。

$(selector).slideToggle(speed,callback);

四、动画

jQuery animate() 方法允许您创建自定义的动画。

$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。可选的 callback 参数是动画完成后所执行的函数名称。

1、实例

功能：它把 <div> 元素移动到左边，直到 left 属性等于 250 像素为止：

<!DOCTYPE html>
<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>

提示：默认地，所有 HTML 元素都有一个静态位置，且无法移动。如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！

1、animate() - 操作多个属性

请注意，生成动画的过程中可同时使用多个属性：

$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});

});

提示：可以用 animate() 方法来操作所有 CSS 属性吗？是的，几乎可以！不过，需要记住一件重要的事情：当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。同时，色彩动画并不包含在核心 jQuery 库中。如果需要生成颜色动画，您需要从 jQuery.com 下载 Color Animations 插件。

2、animate() - 使用相对值

也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：

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

});

3、animate() - 使用预定义的值

您甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle"：

功能：高度切换，从无到有，从有到无；

$("button").click(function(){
$("div").animate({
height:'toggle'
});

});

4、animate() - 使用队列功能

默认地，jQuery 提供针对动画的队列功能。这意味着如果您在彼此之后编写多个 animate() 调用，jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate 调用。

(1)、实例 1

功能：如果您希望在彼此之后执行不同的动画，那么我们要利用队列功能，实现宽高的改变；

$("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");

});

(2)、实例 2

功能：把 <div> 元素移动到右边，然后增加文本的字号：

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

var div=$("div");

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

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

});

五、停止动画_stop()_2014/12/15 23:36

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

<!DOCTYPE html>
<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>

1、stop() 方法

jQuery stop() 方法用于停止动画或效果，在它们完成之前。stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

$(selector).stop(stopAll,goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。因此，默认地，stop() 会清除在被选元素上指定的当前动画。

六、 Callback 函数

Callback 函数在当前动画 100% 完成之后执行。

1、jQuery 动画的问题

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

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

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

由于 JavaScript 语句（指令）是逐一执行的 - 按照次序，动画之后的语句可能会产生错误或页面冲突，因为动画还没有完成。为了避免这个情况，您可以以参数的形式添加 Callback 函数。

2、jQuery Callback 函数

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

$(selector).hide(speed,callback)

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

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

七、jQuery - Chaining

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

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

1、jQuery 方法链接

直到现在，我们都是一次写一条 jQuery 语句（一条接着另一条）。不过，有一种名为链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。

提示：这样的话，浏览器就不必多次查找相同的元素。如需链接一个动作，您只需简单地把该动作追加到之前的动作上。

(1)、例子 1_下面的例子把 css(), slideUp(), and slideDown() 链接在一起。"p1" 元素首先会变为红色，然后向上滑动，然后向下滑动：

$("#p1").css("color","red").slideUp(2000).slideDown(2000);
// 链接；

提示：当进行链接时，代码行会变得很差。不过，jQuery 在语法上不是很严格；您可以按照希望的格式来写，包含折行和缩进。

(2)、例子 2_这样写也可以运行：

$("#p1").css("color","red")

.slideUp(2000)

.slideDown(2000);

提示：jQuery 会抛掉多余的空格，并按照一行长代码来执行上面的代码行；

<三>、jQuery HTML

一、jQuery - 获得内容和属性

前言：jQuery 拥有可操作 HTML 元素和属性的强大方法。

0、jQuery DOM 操作

提示：DOM = Document Object Model（文档对象模型）；DOM 定义访问 HTML 和 XML 文档的标准：W3C 文档对象模型独立于平台和语言的界面，允许程序和脚本动态访问和更新文档的内容、结构以及样式；

前言：jQuery 中非常重要的部分，就是操作 DOM 的能力。jQuery 提供一系列与 DOM 相关的方法，这使访问和操作元素和属性变得很容易。

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

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

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

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

});

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

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

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

});

(3)、val() - 设置或返回表单字段的值;

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

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

});

2、获取属性 - attr()

前言： attr() 方法用于获取属性值；

二、jQuery - 设置内容和属性

前言：使用 text()、html() 以及 val()设置内容；

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

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

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

});

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

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

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

});

(3)、val() - 设置或返回表单字段的值；

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

$("#test3").val("cyb_23");

});

1、text()、html() 以及 val() 的回调函数

text()、html() 以及 val()，同样拥有回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

$("#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 + ")";

});

});

2、设置属性 - attr()

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

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

});

提示：attr() 方法也允许您同时设置多个属性。

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

$("#w3s").attr({

"href" : "http://www.w3school.com.cn/jquery",

"title" : "W3School jQuery Tutorial"

});

});

3、attr() 的回调函数

jQuery 方法 attr()，也提供回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

三、jQuery - 添加元素

前言：通过 jQuery，可以很容易地添加新元素/内容；

1、添加新的 HTML 内容方法

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

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

(3)、after() - 在被选元素之后插入内容；

(4)、before() - 在被选元素之前插入内容；

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

$("p").append("Some appended text.");

3、jQuery prepend() 方法_在被选元素的开头插入内容。

$("p").prepend("Some prepended text.");

4、通过 append() 和 prepend() 方法添加若干新元素

前言：在上面，只在被选元素的开头/结尾插入文本/HTML；不过，append() 和 prepend() 方法能够通过参数接收无限数量的新元素。可以通过 jQuery 来生成文本/HTML（就像上面的例子那样），或者通过 JavaScript 代码和 DOM 元素。

实例：创建若干个新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 append() 方法把这些新元素追加到文本中（对 prepend() 同样有效）：

function appendText()

{

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

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

var txt3=document.createElement("p"); // 以 DOM 创建新元素

txt3.innerHTML="Text.";

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

}

5、jQuery after() 和 before() 方法

(1)、jQuery after() 方法在被选元素之后插入内容。

$("img").after("Some text after");

(2)、jQuery before() 方法在被选元素之前插入内容。

$("img").before("Some text before");

6、通过 after() 和 before() 方法添加若干新元素

前言：after() 和 before() 方法能够通过参数接收无限数量的新元素。可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建新元素。

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 之后插入新元素

}

四、jQuery - 删除元素

前言：通过 jQuery，可以很容易地删除已有的 HTML 元素。

1、删除元素/内容

(1)、remove() - 删除被选元素（及其子元素）；

(2)、empty() - 从被选元素中删除子元素；

2、jQuery remove()方法

说明：jQuery remove() 方法删除被选元素及其子元素。

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

3、jQuery empty() 方法

说明；jQuery empty() 方法删除被选元素的子元素。

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

3、过滤被删除的元素

说明：jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。该参数可以是任何 jQuery 选择器的语法。

实例：删除 class="italic" 的所有 <p> 元素

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

五、jQuery - 获取并设置 CSS 类

前言：通过 jQuery，可以很容易地对 CSS 元素进行操作；

1、jQuery 操作 CSS

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

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

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

(4)、css() - 设置或返回样式属性；

2、jQuery addClass() 方法

实例：向不同的元素添加 class 属性。当然，在添加类时，您也可以选取多个元素；

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

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

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

});

实例：指定多个类(important、blue)

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

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

});

3、jQuery removeClass() 方法

实例：如何在不同的元素中删除指定的 class 属性,

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

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

});

4、jQuery toggleClass() 方法

说明：对被选元素进行添加/删除类的切换操作；

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

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

});

六、jQuery css() 方法

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

1、返回 CSS 属性

(1)、返回指定的 CSS 属性的值：

css("propertyname");

实例：返回首个匹配元素的 background-color 值：

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

2、设置 CSS 属性

设置指定的 CSS 属性：css("propertyname","value");

3、设置多个 CSS 属性

css({"propertyname":"value","propertyname":"value",...});

七、jQuery - 尺寸

前言：通过 jQuery，很容易处理元素和浏览器窗口的尺寸；

1、jQuery 尺寸方法

width()；

height()；

innerWidth()；

innerHeight()；

outerWidth()；

outerHeight()；

2、jQuery width() 和 height() 方法

width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。

height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。

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

var txt="";

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

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

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

});

3、jQuery innerWidth() 和 innerHeight() 方法

innerWidth() 方法返回元素的宽度（包括内边距）。

innerHeight() 方法返回元素的高度（包括内边距）。

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

var txt="";

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

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

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

});

4、jQuery outerWidth() 和 outerHeight() 方法

outerWidth() 方法返回元素的宽度（包括内边距和边框）。

outerHeight() 方法返回元素的高度（包括内边距和边框）。

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

var txt="";

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

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

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

});

outerWidth(true) 方法返回元素的宽度（包括内边距、边框和外边距）。

outerHeight(true) 方法返回元素的高度（包括内边距、边框和外边距）。

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

var txt="";

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

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

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

});

5、jQuery - 更多的 width() 和 height()

实例：返回文档（HTML 文档）和窗口（浏览器视口）的宽度和高度，

$("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);

});

6、设置指定的 <div> 元素的宽度和高度：

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

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

});

<四>、jQuery 遍历

一、jQuery 遍历

1、什么是遍历？

jQuery 遍历，意为“移动”，用于根据其相对于其他元素的关系来“查找”（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。

2、家族树

通过 jQuery 遍历，您能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍历。

3、遍历 DOM

遍历方法中最大的种类是树遍历（tree-traversal）。

二、jQuery 遍历 - 祖先

提示：祖先是父、祖父或曾祖父等等。通过 jQuery，您能够向上遍历 DOM 树，以查找元素的祖先。

1、向上遍历 DOM 树

parent()；

parents()；

parentsUntil()；

2、jQuery parent() 方法

parent() 方法返回被选元素的直接父元素。该方法只会向上一级对 DOM 树进行遍历。

$(document).ready(function(){

$("span").parent();

});

3、jQuery parents() 方法

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

// 返回所有 <span> 元素的所有祖先

$(document).ready(function(){

$("span").parents();

});

// 返回所有 <span> 元素的所有祖先且是 <ul> 元素

$(document).ready(function(){

$("span").parents("ul");

});

4、jQuery parentsUntil() 方法

parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。

// 返回介于 <span> 与 <div> 元素之间的所有祖先元素

$(document).ready(function(){

$("span").parentsUntil("div");

});

三、jQuery 遍历 - 后代

前言：后代是子、孙、曾孙等等；通过 jQuery，您能够向下遍历 DOM 树，以查找元素的后代。

1、向下遍历 DOM 树

children()

find()

2、jQuery children() 方法

children() 方法返回被选元素的所有直接子元素。该方法只会向下一级对 DOM 树进行遍历。

// 返回每个 <div> 元素的所有直接子元素

$(document).ready(function(){

$("div").children();

});

// 返回<div> 的直接子元素且类名为 "1" 的所有 <p> 元素

$(document).ready(function(){

$("div").children("p.1");

});

3、jQuery find() 方法

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

// 返回属于 <div> 后代的所有 <span> 元素

$(document).ready(function(){

$("div").find("span");

});

// 返回 <div> 的所有后代

$(document).ready(function(){

$("div").find("*");

});

四、jQuery 遍历 - 同胞

说明：同胞拥有相同的父元素。通过 jQuery，您能够在 DOM 树中遍历元素的同胞元素。

0、在 DOM 树中水平遍历

siblings()

next()

nextAll()

nextUntil()

prev()

prevAll()

prevUntil()

1、jQuery siblings() 方法

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

// 返回 <h2> 的所有同胞元素

$(document).ready(function(){

$("h2").siblings();

});

// 返回属于 <h2> 的同胞元素的所有 <p> 元素

$(document).ready(function(){

$("h2").siblings("p");

});

2、jQuery next() 方法

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

3、jQuery nextAll() 方法

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

4、jQuery nextUntil() 方法

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

5、jQuery prev(), prevAll() & prevUntil() 方法

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

五、jQuery 遍历 - 过滤

三个最基本的过滤方法是：first(), last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。其他过滤方法，比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。

1、jQuery first() 方法

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

// 选取首个 <div> 元素内部的第一个 <p> 元素

$(document).ready(function(){

$("div p").first();

});

2、jQuery last() 方法

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

// 选择最后一个 <div> 元素中的最后一个 <p> 元素

$(document).ready(function(){

$("div p").last();

});

3、jQuery eq() 方法

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

// 选取第二个 <p> 元素（索引号 1）

$(document).ready(function(){

$("p").eq(1);

});

4、jQuery filter() 方法

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

// 返回带有类名 "intro" 的所有 <p> 元素

$(document).ready(function(){

$("p").filter(".intro");

});

5、jQuery not() 方法

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

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

// 返回不带有类名 "intro" 的所有 <p> 元素

$(document).ready(function(){

$("p").not(".intro");

});

<五>、jQuery - AJAX

一、jQuery - AJAX 简介

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

0、jQuery AJAX 实例

<!DOCTYPE html>

<html>

<head>

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

<script>

$(document).ready(function() {

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

$('#test').load('/example/jquery/demo_test.txt');

})

})

</script>

</head>

<body>

<h3 id="test">请点击按钮，通过 jQuery AJAX 改变这段文本。</h3>

<button id="btn" type="button">获得外部内容</button>

</body>

</html>

1、什么是 AJAX？

AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。使用 AJAX 的应用程序案例：谷歌地图、腾讯微博、优酷视频、人人网等等。您可以在我们的 AJAX 教程中学到更多有关 AJAX 的知识(www.w3school.com.cn/ajax/index.asp)。

2、关于 jQuery 与 AJAX

说明：通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。

提示：如果没有 jQuery，AJAX 编程还是有些难度的。编写常规的 AJAX 代码并不容易，因为不同的浏览器对 AJAX 的实现并不相同。这意味着您必须编写额外的代码对浏览器进行测试。不过，jQuery 团队为我们解决了这个难题，我们只需要一行简单的代码，就可以实现 AJAX 功能。

二、jQuery - AJAX load() 方法

1、jQuery load() 方法

jQuery load() 方法是简单但强大的 AJAX 方法。load() 方法从服务器加载数据，并把返回的数据放入被选元素中。

语法：$(selector).load(URL,data,callback);

参数：必需的 URL 参数规定您希望加载的 URL。可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。可选的 callback 参数是 load() 方法完成后所执行的函数名称。

示例：

->demo_test.txt

<h2>jQuery and AJAX is FUN!!!</h2>

<p id="ptxt">This is some text</p>

// 可以把 jQuery 选择器添加到 URL 参数,把 "demo_test.txt" 文件中 id="ptxt" 的元素的内容，加载到指定的 <div> 元素中

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$("#div1").load("/example/jquery/demo_test.txt #ptxt");
});
});
</script>
</head>
<body>
<div id="div1">
<h2>使用 jQuery AJAX 来改变文本</h2>
</div>
<button>获得外部内容</button>
</body>
</html>

2、jQuery load()方法回调函数

可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：

responseTxt - 包含调用成功时的结果内容

statusTXT - 包含调用的状态

xhr - 包含 XMLHttpRequest 对象

示例：如果 load() 方法已成功，则显示“外部内容加载成功！”，而如果失败，则显示错误消息：

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

$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){

if(statusTxt=="success")

alert("外部内容加载成功！");

if(statusTxt=="error")

alert("Error: "+xhr.status+": "+xhr.statusText);

});

});

三、jQuery - AJAX get() 和 post() 方法

jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。

1、HTTP 请求：GET、POST

在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。GET - 从指定的资源请求数据；POST - 向指定的资源提交要处理的数据；

GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。

如需学习更多有关 GET 和 POST 以及两方法差异的知识，请阅读我们的 HTTP 方法 - GET 对比 POST(www.w3school.com.cn/tags/html_ref_httpmethods.asp)；

2、jQuery $.get() 方法

$.get() 方法通过 HTTP GET 请求从服务器上请求数据。

语法：$.get(URL,callback);

参数：必需的 URL 参数规定您希望请求的 URL。可选的 callback 参数是请求成功后所执行的函数名。

// 使用 $.get() 方法从服务器上的文件中取回数据

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

$.get("demo_test.asp",function(data,status){

alert("Data: " + data + "\nStatus: " + status);

});

});

->demo_test.asp

<%
response.write("This is some text from an external ASP file.")

%>

->HTML

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
$.get("/example/jquery/demo_test.asp", function(data, status) {
alert("数据：" + data + "\n状态：" + status);
});
});
});
</script>
</head>
<body>
<button>发送GET请求，获得返回结果</button>
</body>
</html>

3、jQuery $.post() 方法

$.post() 方法通过 HTTP POST 请求从服务器上请求数据。

语法：$.post(URL,data,callback);

参数：必需的 URL 参数规定您希望请求的 URL。可选的 data 参数规定连同请求发送的数据。可选的 callback 参数是请求成功后所执行的函数名。

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

$.post("demo_test_post.asp",

{

name:"cyb_23",

city:"lf"

},

function(data,status){

alert("Data: " + data + "\nStatus: " + status);

});

});

->demo_test_post.asp

<%
dim fname,city
fname=Request.Form("name")
city=Request.Form("city")
Response.Write("Dear " & fname & ". ")
Response.Write("Hope you live well in " & city & ".")

%>

->HTML

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function() {
$("button").click(function() {
$.post("/example/jquery/demo_test_post.asp", {
name: "cyb_23",
city: "lf"
},
function(data, status) {
alert("数据：" + data + "\n状态：" + status);
});
});
});
</script>
</head>
<body>
<button>发送POST请求，获得返回结果</button>
</body>
</html>

4、$.ajax()方法；

<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 杂项

一、jQuery - noConflict() 方法

引言：如何在页面上同时使用 jQuery 和其他框架？

1、jQuery 和其他 JavaScript 框架

正如您已经了解到的，jQuery 使用 $ 符号作为 jQuery 的简写。如果其他 JavaScript 框架也使用 $ 符号作为简写怎么办？

其他JavaScript 框架包括：MooTools、Backbone、Sammy、Cappuccino、Knockout、JavaScript MVC、Google Web Toolkit、Google Closure、Ember、Batman 以及 Ext JS。

其中某些框架也使用 $ 符号作为简写（就像 jQuery），如果您在用的两种不同的框架正在使用相同的简写符号，有可能导致脚本停止运行。

2、jQuery noConflict() 方法

noConflict() 方法会释放 $ 标识符的控制，这样其他脚本就可以使用它而不引起错误；

(1)、使用全名

当然，您仍然可以通过全名替代简写的方式来使用 jQuery：

$.noConflict();

jQuery(document).ready(function(){

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

jQuery("p").text("jQuery 仍在运行！");

});

});

(2)、使用简写

您也可以创建自己的简写。noConflict() 可返回对 jQuery 的引用，您可以把它存入变量，以供稍后使用；

var jq = $.noConflict();

jq(document).ready(function(){

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

jq("p").text("jQuery 仍在运行！");

});

});

(3)、传递

如果你的 jQuery 代码块使用 $ 简写，并且您不愿意改变这个快捷方式，那么您可以把 $ 符号作为变量传递给 ready 方法。这样就可以在函数内使用 $ 符号 - 而在函数外，依旧不得不使用 "jQuery"：

$.noConflict();

jQuery(document).ready(function($){

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

$("p").text("jQuery 仍在运行！");

});

});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航