JS+JQUERY

HTML DOM中的DOM事件类型响应网站，各类响应事件。

http://www.w3school.com.cn/jsref/dom_obj_event.asp //作为一个代码开发者，怎么可以少的了手册呢

在HTML页面中添加新的元素方法：如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。

代码如下：

 1 <!DOCTYPE html>
 2 <html>
 3 <body>
 4 
 5 <div id="div1">
 6 <p id="p1">这是一个段落。</p>
 7 <p id="p2">这是另一个段落。</p>
 8 </div>
 9 
10 <script>
11 var para=document.createElement("p");
12 var node=document.createTextNode("这是新段落。");
13 para.appendChild(node);
14 
15 var element=document.getElementById("div1");
16 element.appendChild(para);
17 </script>
18 
19 </body>
20 </html>

代码讲解：

例子解释：

这段代码创建新的 <p> 元素：

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

如需向 <p> 元素添加文本，您必须首先创建文本节点。这段代码创建了一个文本节点：

var node=document.createTextNode("这是新段落。");

然后您必须向 <p> 元素追加这个文本节点：

para.appendChild(node);

最后您必须向一个已有的元素追加这个新元素。

这段代码找到一个已有的元素：

var element=document.getElementById("div1");

这段代码向这个已有的元素追加新元素：

element.appendChild(para);

HTML DOM 教程

在我们的 JavaScript 教程的 HTML DOM 部分，您已经学到了：

如何改变 HTML 元素的内容 (innerHTML)
如何改变 HTML 元素的样式 (CSS)
如何对 HTML DOM 事件作出反应
如何添加或删除 HTML 元素

实例

循环遍历对象的属性：

1 var person={fname:"Bill",lname:"Gates",age:56};
2 
3 for (x in person)
4   {
5   txt=txt + person[x];
6   }

数字属性和方法

属性：

MAX VALUE
MIN VALUE
NEGATIVE INFINITIVE
POSITIVE INFINITIVE
NaN
prototype
constructor

方法：

toExponential()
toFixed()
toPrecision()
toString()
valueOf()

Number 对象

Number 对象是原始数值的包装对象。

创建 Number 对象的语法：

var myNum=new Number(value);
var myNum=Number(value);

参数

参数 value 是要创建的 Number 对象的数值，或是要转换成数字的值。

返回值

当 Number() 和运算符 new 一起作为构造函数使用时，它返回一个新创建的 Number 对象。如果不用 new 运算符，把 Number() 作为一个函数来调用，它将把自己的参数转换成一个原始的数值，并且返回这个值（如果转换失败，则返回 NaN）。

Number 对象属性

属性	描述
constructor	返回对创建此对象的 Number 函数的引用。
MAX_VALUE	可表示的最大的数。
MIN_VALUE	可表示的最小的数。
NaN	非数字值。
NEGATIVE_INFINITY	负无穷大，溢出时返回该值。
POSITIVE_INFINITY	正无穷大，溢出时返回该值。
prototype	使您有能力向对象添加属性和方法。

Number 对象方法

方法	描述
toString	把数字转换为字符串，使用指定的基数。
toLocaleString	把数字转换为字符串，使用本地数字格式顺序。
toFixed	把数字转换为字符串，结果的小数点后有指定位数的数字。
toExponential	把对象的值转换为指数计数法。
toPrecision	把数字格式化为指定的长度。
valueOf	返回一个 Number 对象的基本数字值。



JS中string即字符串类型的对象所具有的对象属性与方法：
indexOf() 方法如何使用 indexOf() 来定位字符串中某一个指定的字符首次出现的位置。
match() 方法如何使用 match() 来查找字符串中特定的字符，并且如果找到的话，则返回这个字符。
如何替换字符串中的字符 - replace()如何使用 replace() 方法在字符串中用某些字符替换另一些字符。

Boolean 对象

您可以将 Boolean 对象理解为一个产生逻辑值的对象包装器。

Boolean（逻辑）对象用于将非逻辑值转换为逻辑值（true 或者 false）。

创建 Boolean 对象

使用关键词 new 来定义 Boolean 对象。下面的代码定义了一个名为 myBoolean 的逻辑对象：

var myBoolean=new Boolean()
注释：如果逻辑对象无初始值或者其值为 0、-0、null、""、false、undefined 或者 NaN，那么对象的值为 false。否则，其值为 true（即使当自变量为字符串 "false" 时）！

Math 对象

Math（算数）对象的作用是：执行普通的算数任务。

Math 对象提供多种算数值类型和函数。无需在使用这个对象之前对它进行定义。

算数值

JavaScript 提供 8 种可被 Math 对象访问的算数值：

常数
圆周率
2 的平方根
1/2 的平方根
2 的自然对数
10 的自然对数
以 2 为底的 e 的对数
以 10 为底的 e 的对数

这是在 Javascript 中使用这些值的方法：（与上面的算数值一一对应）

Math.E
Math.PI
Math.SQRT2
Math.SQRT1_2
Math.LN2
Math.LN10
Math.LOG2E
Math.LOG10E
RegExp 对象的方法

RegExp 对象有 3 个方法：test()、exec() 以及 compile()。
test()

test() 方法检索字符串中的指定值。返回值是 true 或 false。

例子：
```
var patt1=new RegExp("e");

document.write(patt1.test("The best things in life are free")); 
```
由于该字符串中存在字母 "e"，以上代码的输出将是：
```
true
```
exec()

exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null。

例子 1：
```
var patt1=new RegExp("e");

document.write(patt1.exec("The best things in life are free")); 
```
由于该字符串中存在字母 "e"，以上代码的输出将是：
```
e
```
compile()

compile() 方法用于改变 RegExp。

compile() 既可以改变检索模式，也可以添加或删除第二个参数。

例子：
```
var patt1=new RegExp("e");

document.write(patt1.test("The best things in life are free"));

patt1.compile("d");

document.write(patt1.test("The best things in life are free"));
```
由于字符串中存在 "e"，而没有 "d"，以上代码的输出是：
```
true false
```

Window 对象

所有浏览器都支持 window 对象。它表示浏览器窗口。

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

甚至 HTML DOM 的 document 也是 window 对象的属性之一：

其他 Window 方法

一些其他方法：

window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸

window.screen 对象包含有关用户屏幕的信息。

Window Screen

window.screen 对象在编写时可以不使用 window 这个前缀。

一些属性：

screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度

Window Screen 可用宽度

screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如窗口任务栏。

window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

Window Location

window.location 对象在编写时可不使用 window 这个前缀。

一些例子：

location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口（80 或 443）
location.protocol 返回所使用的 web 协议（http:// 或 https://）
window.history 对象包含浏览器的历史。

Window History

window.history 对象在编写时可不使用 window 这个前缀。

为了保护用户隐私，对 JavaScript 访问该对象的方法做出了限制。

一些方法：

history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击按钮向前相同

警告框

警告框经常用于确保用户可以得到某些信息。

当警告框出现后，用户需要点击确定按钮才能继续进行操作。

语法：

alert("文本")

确认框

确认框用于使用户可以验证或者接受某些信息。

当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。

如果用户点击确认，那么返回值为 true。如果用户点击取消，那么返回值为 false。

语法：

confirm("文本")

提示框

提示框经常用于提示用户在进入页面前输入某个值。

当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。

如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。

语法：

prompt("文本","默认值")

JavaScript 计时事件

通过使用 JavaScript，我们有能力作到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。

在 JavaScritp 中使用计时事件是很容易的，两个关键方法是:

setTimeout(): 未来的某时执行代码
clearTimeout(): 取消setTimeout()

setTimeout()

语法

var t=setTimeout("javascript语句",毫秒)

setTimeout() 方法会返回某个值。在上面的语句中，值被储存在名为 t 的变量中。假如你希望取消这个 setTimeout()，你可以使用这个变量名来指定它。

setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert('5 seconds!')"，或者对函数的调用，诸如 alertMsg()"。

第二个参数指示从当前起多少毫秒后执行第一个参数。

提示：1000 毫秒等于一秒。

clearTimeout()

语法

clearTimeout(setTimeout_variable)

JavaScript 框架（库）

JavaScript 高级程序设计（特别是对浏览器差异的复杂处理），通常很困难也很耗时。

为了应对这些调整，许多的 JavaScript (helper) 库应运而生。

这些 JavaScript 库常被称为 JavaScript 框架。

在本教程中，我们将了解到一些广受欢迎的 JavaScript 框架：

jQuery
Prototype
MooTools

所有这些框架都提供针对常见 JavaScript 任务的函数，包括动画、DOM 操作以及 Ajax 处理。

在本教程中，您将学习到如何开始使用它们，来使得 JavaScript 编程更容易、更安全且更有乐趣。

jQuery

jQuery 是目前最受欢迎的 JavaScript 框架。

它使用 CSS 选择器来访问和操作网页上的 HTML 元素（DOM 对象）。

jQuery 同时提供 companion UI（用户界面）和插件。

许多大公司在网站上使用 jQuery：

Google
Microsoft
IBM
Netflix

引用 jQuery:

1 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
2 </script>

Prototype

Prototype 是一种库，提供用于执行常见 web 任务的简单 API。

API 是应用程序编程接口（Application Programming Interface）的缩写。它是包含属性和方法的库，用于操作 HTML DOM。

Prototype 通过提供类和继承，实现了对 JavaScript 的增强。

MooTools

MooTools 也是一个框架，提供了可使常见的 JavaScript 编程更为简单的 API。

MooTools 也含有一些轻量级的效果和动画函数。

W3school 提供完整的 jQuery 参考手册以及大量的在线实例。

jQuery 参考手册

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

链接：http://www.w3school.com.cn/jquery/jquery_reference.asp

jQuery 语法

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

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

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

示例

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

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

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

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

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

文档就绪函数

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

$(document).ready(function(){

--- jQuery functions go here ----

});

语法	描述
$(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 事件处理方法是 jQuery 中的核心函数。

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”（或“激发”）经常会被使用。

通常会把 jQuery 代码放到 <head>部分的事件处理方法中：

语法：

$("button").click(function() {..some code... } )

通过事件触发函数为核心的JQUERY来进行的动态网页。
语法简介：点击那个按钮或时间函数，会在哪一个标签或元素处发生什么动画或动作。

jQuery 名称冲突

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

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

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

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

结论

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

把所有 jQuery 代码置于事件处理函数中
把所有事件处理函数置于文档就绪事件处理器中
把 jQuery 代码置于单独的 .js 文件中
如果存在名称冲突，则重命名 jQuery 库

Query 事件

下面是 jQuery 中事件常用方法的一些例子：

Event 函数	绑定函数至
$(document).ready(function)	将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function)	触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function)	触发或将函数绑定到被选元素的双击事件
$(selector).focus(function)	触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function)	触发或将函数绑定到被选元素的鼠标悬停事件

JQUERY中好玩的动画演示及动态网页讲解

一：显示与隐藏

jQuery hide() 和 show()

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

（1）：Jquery中的关于标签的显示与隐藏代码如下：

$("#hide").click(function(){
  $("p").hide();
});

$("#show").click(function(){
  $("p").show();
});

2）语法：

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

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

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

下面的例子演示了带有 speed 参数的 hide() 方法：

3）jQuery toggle()

通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。

显示被隐藏的元素，并隐藏已显示的元素：

语法：

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

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <script src="/jquery/jquery-1.11.1.min.js"></script>
 5 <script type="text/javascript">
 6 $(document).ready(function(){
 7   $(".ex .hide").click(function(){
 8     $(this).parents(".ex").hide("slow");
 9   });
10 });
11 </script>
12 <style type="text/css"> 
13 div.ex
14 {
15 background-color:#e5eecc;
16 padding:7px;
17 border:solid 1px #c3c3c3;
18 }
19 </style>
20 </head>
21  
22 <body>
23 
24 <h3>中国办事处</h3>
25 <div class="ex">
26 <button class="hide" type="button">隐藏</button>
27 <p>联系人：张先生<br /> 
28 北三环中路 100 号<br />
29 北京</p>
30 </div>
31 
32 <h3>美国办事处</h3>
33 <div class="ex">
34 <button class="hide" type="button">隐藏</button>
35 <p>联系人：David<br /> 
36 第五大街 200 号<br />
37 纽约</p>
38 </div>
39 
40 </body>
41 </html>

$(所要触发的按钮或其他触发函数介质).click(function(){

$("所需要隐藏的HTML元素").hide();

});

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <script src="/jquery/jquery-1.11.1.min.js"">
 5 <script type="text/javascript">
 6 $(docment).reday(function(){
 7 $("#hide").click(function(){
 8 $("p").hide();
 9 });
10 
11 $("#show").click(function(){
12 $("p1").show();
13 });
14 });
15 </script>
16 </head>
17 <body>
18 <p  id="p1">如果点击隐藏按钮，我就会消失</p>
19 <button id="#hide" type="button">隐藏</button>
20 <button id="#show" type="button">显示</button>
21 </body>
22 </html>

例二：

隐藏显示中的稍微加深让隐藏时带有时间代码如下：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <script src="/jquery/jquery-1.11.1.min.js"></script>
 5 <script type="text/javascript">
 6 $(document).ready(function(){
 7   $("button").click(function(){
 8   $("p").hide(1000);
 9   });
10 });
11 </script>
12 </head>
13 <body>
14 <button type="button">隐藏</button>
15 <p>这是一个段落。</p>
16 <p>这是另一个段落。</p>
17 </body>
18 </html>

jQuery 效果 - 淡入淡出

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

jQuery Fading 方法

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

jQuery 拥有下面四种 fade 方法：

fadeIn()
fadeOut()
fadeToggle()
fadeTo()

1）jQuery fadeIn() 方法

jQuery fadeIn() 用于淡入已隐藏的元素。

语法：

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

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是 fading 完成后所执行的函数名称。

下面的例子演示了带有不同参数的 fadeIn() 方法：

举例代码如下：

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js" ></script>
<script type="test/javascripr">
$(docment).ready(function(){
 $("button").click(function(){
    $("div1").fadein();
    $("div2").fadein(slow);
    $("div3").fadein(3000);
});
});
</script>
</head>
<body>
<p>演示三种不同参数的fadein函数</p>
<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><br>
</body>
</html>

2）jQuery fadeOut() 方法

jQuery fadeOut() 方法用于淡出可见元素。

语法：

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

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是 fading 完成后所执行的函数名称。

下面的例子演示了带有不同参数的 fadeOut() 方法：

代码如下：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <script src="/jquery/jquery-1.11.1.min.js"></script>
 5 <script type="text/javascript">
 6 $(document).ready(function(){
 7   $("button").click(function(){
 8     $("#div1").fadeOut();
 9     $("#div2").fadeOut("slow");
10     $("#div3").fadeOut(3000);
11   });
12 });
13 </script>
14 </head>
15 
16 <body>
17 <p>演示带有不同参数的 fadeOut() 方法。</p>
18 <button>点击这里，使三个矩形淡出</button>
19 <br><br>
20 <div id="div1" style="width:80px;height:80px;background-color:red;"></div>
21 <br>
22 <div id="div2" style="width:80px;height:80px;background-color:green;"></div>
23 <br>
24 <div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
25 </body>
26 
27 </html>

3）jQuery fadeToggle() 方法

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

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

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

语法：

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

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是 fading 完成后所执行的函数名称。

下面的例子演示了带有不同参数的 fadeToggle() 方法：

代码如下：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <script src="/jquery/jquery-1.11.1.min.js"></script>
 5 <script>
 6 $(document).ready(function(){
 7   $("button").click(function(){
 8     $("#div1").fadeToggle();
 9     $("#div2").fadeToggle("slow");
10     $("#div3").fadeToggle(3000);
11   });
12 });
13 </script>
14 </head>
15 
16 <body>
17 
18 <p>演示带有不同参数的 fadeToggle() 方法。</p>
19 <button>点击这里，使三个矩形淡入淡出</button>
20 <br><br>
21 <div id="div1" style="width:80px;height:80px;background-color:red;"></div>
22 <br>
23 <div id="div2" style="width:80px;height:80px;background-color:green;"></div>
24 <br>
25 <div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
26 </body>
27 
28 </body>
29 </html>

4）jQuery fadeTo() 方法

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

语法：

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

必需的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。

可选的 callback 参数是该函数完成后所执行的函数名称。

下面的例子演示了带有不同参数的 fadeTo() 方法：

代码如下：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <script src="/jquery/jquery-1.11.1.min.js"></script>
 5 <script>
 6 $(document).ready(function(){
 7   $("button").click(function(){
 8     $("#div1").fadeToggle();
 9     $("#div2").fadeToggle("slow");
10     $("#div3").fadeToggle(3000);
11   });
12 });
13 </script>
14 </head>
15 
16 <body>
17 
18 <p>演示带有不同参数的 fadeToggle() 方法。</p>
19 <button>点击这里，使三个矩形淡入淡出</button>
20 <br><br>
21 <div id="div1" style="width:80px;height:80px;background-color:red;"></div>
22 <br>
23 <div id="div2" style="width:80px;height:80px;background-color:green;"></div>
24 <br>
25 <div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
26 </body>
27 
28 </body>
29 </html>

jQuery 效果 - 滑动

jQuery 滑动方法可使元素上下滑动。

jQuery 滑动方法

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

jQuery 拥有以下滑动方法：

slideDown()
slideUp()
slideToggle()

1）jQuery slideDown() 方法

jQuery slideDown() 方法用于向下滑动元素。

语法：

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

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称。

下面的例子演示了 slideDown() 方法：

代码如下：

<!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）jQuery slideUp() 方法

jQuery slideUp() 方法用于向上滑动元素。

语法：

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

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称。

下面的例子演示了 slideUp() 方法：

3）jQuery slideToggle() 方法

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

如果元素向下滑动，则 slideToggle() 可向上滑动它们。

如果元素向上滑动，则 slideToggle() 可向下滑动它们。

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

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称。

下面的例子演示了 slideToggle() 方法：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <script src="jquery/jquery-1.11.1.min.js"></script>
 5 <script type="text/javascript">
 6 $(docment).ready(function(){
 7   $(".flip").click(function(){
 8   $(".penal").slideToggle("slow");
 9 });
10 });
11 </script>
12 </head>
13 <style type="text/css"> 
14 div.panel,p.flip
15 {
16 margin:0px;
17 padding:5px;
18 text-align:center;
19 background:#e5eecc;
20 border:solid 1px #c3c3c3;
21 }
22 div.panel
23 {
24 height:120px;
25 display:none;
26 }
27 </style>
28 </head>
29  
30 <body>
31  
32 <div class="panel">
33 <p>W3School - 领先的 Web 技术教程站点</p>
34 <p>在 W3School，你可以找到你所需要的所有网站建设教程。</p>
35 </div>
36 <p class="flip">请点击这里</p>
37 </html>

jQuery 效果 - 动画

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

jQuery 动画 - animate() 方法

jQuery animate() 方法用于创建自定义动画。

语法：

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

必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

下面的例子演示 animate() 方法的简单应用；它把 <div> 元素移动到左边，直到 left 属性等于 250 像素为止：

提示：默认地，所有 HTML 元素都有一个静态位置，且无法移动。

如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！

jQuery animate() - 操作多个属性(深度)

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

提示：可以用 animate() 方法来操作所有 CSS 属性吗？

是的，几乎可以！不过，需要记住一件重要的事情：当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。

同时，色彩动画并不包含在核心 jQuery 库中。

如果需要生成颜色动画，您需要从 jQuery.com 下载 Color Animations 插件。

案例代码如下：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <script src="/jquery/jquery-1.11.1.min.js">
 5 </script>
 6 <script> 
 7 $(document).ready(function(){
 8   $("button").click(function(){
 9     $("div").animate({
10       left:'250px',
11       opacity:'0.5',
12       height:'150px',
13       width:'150px'
14     });
15   });
16 });
17 </script> 
18 </head>
19  
20 <body>
21 
22 <button>开始动画</button>
23 <p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>
24 <div style="background:#98bf21;height:100px;width:100px;position:absolute;">
25 </div>
26 
27 </body>
28 </html>

jQuery animate() - 使用相对值

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

jQuery animate() - 使用预定义的值

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

jQuery animate() - 使用队列功能

默认地，jQuery 提供针对动画的队列功能。

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

使用队列功能的代码如下：

<!DOCTYPE html>
<html>
<head>
<script src="jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript"></script>
$(docment).ready(function(){
    $("button").click(function(){
   var div=$("div");
         div.animate({left:'250px'},"slow");
         div.animate({fontSize:'3em'},"slow");
});
});
</head>
<body>
<button>开始动画</button>
<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。<p/>
<div style="background:red;width:100px;
height:100px;position:absolute"></div>
</body>
</html>

jQuery 停止动画

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

jQuery stop() 方法

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

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

语法

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

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

因此，默认地，stop() 会清除在被选元素上指定的当前动画。

代码案例如下：

 1 <DOCTYPE html>
 2 <html>
 3 <head>
 4 <script src="jquery/jquery-1.11.1.min.js"></script>
 5 <script>
 6 $(docment).ready(function(){
 7     $("#start").click(function(){
 8       $("div").animate ({left:'250px'},5000);
 9       $("div").animate({fontSize:'3em'},5000);
10 });
11     $("#stop").click(function(){
12       $("div").stop(); 
13 });
14     $("#stop2").click(function(){
15       $("div").stop(true);
16 });
17     $("#stop3").click(funcution(){
18       $("div").stop(true,true);
19 });
20 });
21 </script>
22 </head>
23 <body>
24 <button id="start" type=button>开始</button>
25 <button id="stop" type=button>停止</button>
26 <button id="stop2" type=button>停止所有</button>
27 <button id="stop3" type=button>停止但要完成</button>
28 <p>"开始" 按钮会启动动画。<p/>
29 <p>"停止" 按钮会停止当前活动的动画，但允许已排队的动画向前执行。<p/>
30 <p>"停止所有" 按钮停止当前活动的动画，并清空动画队列；因此元素上的所有动画都会停止。<p/>
31 <p>"停止但要完成" 会立即完成当前活动的动画，然后停下来。<p/>
32 <div style="background:red;width:150px;
33 height:150px;position:absolute">HELLO</div>
34 </body>
35 
36 </html>

jQuery Callback 函数

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

jQuery 动画的问题

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

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

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

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

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

jQuery Callback 函数

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

典型的语法：

$(selector).hide(speed,callback)

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

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

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <script src="jquery/jquery.1.11.1.min.js"></script>
 5 <script type="text/javascript">
 6 $(docment).ready(function(){
 7    $("button").click(function(){
 8       $("p").hide(1000,function(){
 9   alert("这条信息已经隐藏")；
10   });
11  });
12 }):
13 </script>
14 </head>
15 <body>
16 <button type=button>Hide</button>
17 <p>这是一个段落！！</p>
18 </body>
19 </html>

jQuery - Chaining

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

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

jQuery 方法链接

直到现在，我们都是一次写一条 jQuery 语句（一条接着另一条）。

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

提示：这样的话，浏览器就不必多次查找相同的元素。

如需链接一个动作，您只需简单地把该动作追加到之前的动作上。

示例代码如下：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <script src="jquery/jquery-1.11.1.min.js"></script>
 5 <script type="text/javascript">
 6 $(docment).ready(function(){
 7    $("button").click(function(){
 8       $("p1").css("color","red").sildup(2000).sildDown(2000);
 9  });
10 });
11 </script>
12 </head>
13 <body>
14 <p id="p1">jQuery 乐趣十足！</p>
15 <button>点击这里</button>
16 </body>
17 </html>

jQuery - css() 方法

jQuery css() 方法

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

返回 CSS 属性

如需返回指定的 CSS 属性的值，请使用如下语法：

css("propertyname");

下面的例子将返回首个匹配元素的 background-color 值：

实例

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

设置 CSS 属性

如需设置指定的 CSS 属性，请使用如下语法：

css("propertyname","value");

下面的例子将为所有匹配元素设置 background-color 值：

实例

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

设置多个 CSS 属性

如需设置多个 CSS 属性，请使用如下语法：

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

下面的例子将为所有匹配元素设置 background-color 和 font-size：

实例

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

下面的例子设置指定的 <div> 元素的宽度和高度：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <script src="/jquery/jquery-1.11.1.min.js"></script>
 5 <script>
 6 $(document).ready(function(){
 7   $("button").click(function(){
 8     $("#div1").width(320).height(320);
 9   });
10 });
11 </script>
12 </head>
13 <body>
14 
15 <div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
16 <br>
17 <button>调整 div 的尺寸</button>
18 
19 </body>
20 </html>

jQuery 遍历

什么是遍历？

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

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

图示解释：

<div> 元素是 <ul> 的父元素，同时是其中所有内容的祖先。
<ul> 元素是 <li> 元素的父元素，同时是 <div> 的子元素
左边的 <li> 元素是 <span> 的父元素，<ul> 的子元素，同时是 <div> 的后代。
<span> 元素是 <li> 的子元素，同时是 <ul> 和 <div> 的后代。
两个 <li> 元素是同胞（拥有相同的父元素）。
右边的 <li> 元素是 <b> 的父元素，<ul> 的子元素，同时是 <div> 的后代。
<b> 元素是右边的 <li> 的子元素，同时是 <ul> 和 <div> 的后代。

提示：祖先是父、祖父、曾祖父等等。后代是子、孙、曾孙等等。同胞拥有相同的父。

遍历 DOM

jQuery 提供了多种遍历 DOM 的方法。

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

下一章会讲解如何在 DOM 树中向上、下以及同级移动。

如需了解所有的 jQuery 遍历方法，请访问我们的：http://www.w3school.com.cn/jquery/jquery_ref_traversing.asp

jQuery 遍历 - 过滤

缩写搜索元素的范围

三个最基本的过滤方法是：first(), last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。

其他过滤方法，比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素。

jQuery first() 方法

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

下面的例子选取首个 <div> 元素内部的第一个 <p> 元素：

实例

$(document).ready(function(){
  $("div p").first();
});

jQuery last() 方法

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

下面的例子选择最后一个 <div> 元素中的最后一个 <p> 元素：

实例

$(document).ready(function(){
  $("div p").last();
});

jQuery eq() 方法

eq() 方法返回被选元素中带有指定索引号的元素。

索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。下面的例子选取第二个 <p> 元素（索引号 1）：

实例

$(document).ready(function(){
  $("p").eq(1);
});

jQuery filter() 方法

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

下面的例子返回带有类名 "intro" 的所有 <p> 元素：

实例

$(document).ready(function(){
  $("p").filter(".intro");
});

jQuery not() 方法

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

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

下面的例子返回不带有类名 "intro" 的所有 <p> 元素：

实例

$(document).ready(function(){
  $("p").not(".intro");
});

关于 jQuery 与 AJAX

jQuery 提供多个与 AJAX 有关的方法。

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

提示：如果没有 jQuery，AJAX 编程还是有些难度的。

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

一个简单的Ajax案例代码如下：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <script src="/jquery/jquery-1.11.1.min.js">
 5 </script>
 6 <script>
 7 $(document).ready(function(){
 8   $("#btn1").click(function(){
 9     $('#test').load('/example/jquery/demo_test.txt');
10   })
11 })
12 </script>
13 </head>
14 
15 <body>
16 
17 <h3 id="test">请点击下面的按钮，通过 jQuery AJAX 改变这段文本。</h3>
18 <button id="btn1" type="button">获得外部的内容</button>
19 
20 </body>
21 </html>

jQuery - AJAX load() 方法

jQuery load() 方法

jQuery load() 方法是简单但强大的 AJAX 方法。

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

语法：

$(selector).load(URL,data,callback);

必需的 URL 参数规定您希望加载的 URL。

也可以把 jQuery 选择器添加到 URL 参数。

下面的例子把 "demo_test.txt" 文件中 id="p1" 的元素的内容，加载到指定的 <div> 元素中：

可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。

可选的 callback 参数是 load() 方法完成后所执行的函数名称。

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

callback函数中的不同参数的含义：

responseTxt - 包含调用成功时的结果内容
statusTXT - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象

下面的例子会在 load() 方法完成后显示一个提示框。如果 load() 方法已成功，则显示“外部内容加载成功！”，而如果失败，则显示错误消息：

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

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

HTTP 请求：GET vs. POST

两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。

GET - 从指定的资源请求数据
POST - 向指定的资源提交要处理的数据

GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。

POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。

如需学习更多有关 GET 和 POST 以及两方法差异的知识，请阅读我们的 HTTP 方法 - GET 对比 POST。

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

$.get() 的第一个参数是我们希望请求的 URL（"demo_test.asp"）。

第二个参数是回调函数。第一个回调参数存有被请求页面的内容，第二个回调参数存有请求的状态。

提示：这个 ASP 文件 ("demo_test.asp") 类似这样：

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

jQuery $.post() 方法

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

语法：

$.post(URL,data,callback);

必需的 URL 参数规定您希望请求的 URL。

可选的 data 参数规定连同请求发送的数据。

可选的 callback 参数是请求成功后所执行的函数名。

下面的例子使用 $.post() 连同请求一起发送数据：

$.post() 的第一个参数是我们希望请求的 URL ("demo_test_post.asp")。

然后我们连同请求（name 和 city）一起发送数据。

"demo_test_post.asp" 中的 ASP 脚本读取这些参数，对它们进行处理，然后返回结果。

第三个参数是回调函数。第一个回调参数存有被请求页面的内容，而第二个参数存有请求的状态。

提示：这个 ASP 文件 ("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 & ".")
%>

jQuery - noConflict() 方法

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

jQuery 和其他 JavaScript 框架

正如您已经了解到的，jQuery 使用 $ 符号作为 jQuery 的简写。

如果其他 JavaScript 框架也使用 $ 符号作为简写怎么办？

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

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

jQuery 的团队考虑到了这个问题，并实现了 noConflict() 方法。

jQuery noConflict() 方法

noConflict() 方法会释放会 $ 标识符的控制，这样其他脚本就可以使用它了。

jQuery - noConflict() 方法

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

jQuery 和其他 JavaScript 框架

正如您已经了解到的，jQuery 使用 $ 符号作为 jQuery 的简写。

如果其他 JavaScript 框架也使用 $ 符号作为简写怎么办？

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

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

jQuery 的团队考虑到了这个问题，并实现了 noConflict() 方法。

jQuery noConflict() 方法

noConflict() 方法会释放会 $ 标识符的控制，这样其他脚本就可以使用它了。

posted @ 2018-10-16 14:33 相伴红尘醉阅读(458) 评论(0) 编辑收藏举报

刷新页面返回顶部

相伴红尘醉

JS+JQUERY

HTML DOM 教程

实例

数字属性和方法

属性：

方法：

Number 对象

创建 Number 对象的语法：

参数

返回值

Number 对象属性

Number 对象方法

Boolean 对象

创建 Boolean 对象

Math 对象

算数值

RegExp 对象的方法

test()

例子：

exec()

例子 1：

compile()

例子：

Window 对象

其他 Window 方法

Window Screen

Window Screen 可用宽度

Window Location

Window History

警告框

语法：

确认框

语法：

提示框

语法：

JavaScript 计时事件

setTimeout()

语法

clearTimeout()

语法

JavaScript 框架（库）

jQuery

引用 jQuery:

Prototype

MooTools

jQuery 参考手册

jQuery 语法

示例

文档就绪函数

更多的JQUERY选择器实例

jQuery 事件函数

jQuery 名称冲突

结论

Query 事件

jQuery hide() 和 show()

3）jQuery toggle()

语法：

jQuery 效果 - 淡入淡出

jQuery Fading 方法

1）jQuery fadeIn() 方法

语法：

2）jQuery fadeOut() 方法

语法：

3）jQuery fadeToggle() 方法

语法：

4）jQuery fadeTo() 方法

语法：

jQuery 效果 - 滑动

jQuery 滑动方法

1）jQuery slideDown() 方法

语法：

2）jQuery slideUp() 方法

语法：

3）jQuery slideToggle() 方法

jQuery 效果 - 动画

jQuery 动画 - animate() 方法

语法：

jQuery animate() - 操作多个属性(深度)

jQuery animate() - 使用相对值