jquery教程练习

 

　　本次练习参考的是w3cschool，可以参考w3cschool的官方文档:

　　https://www.w3cschool.cn/jquery/jquery-examples.html

 

1.Jquery简单介绍

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

1.1 jquery简介

1.1.1 什么是 jQuery ？

　　jQuery是一个JavaScript函数库。

　　jQuery是一个轻量级的"写的少，做的多"的JavaScript库。

　　jQuery库包含以下功能：

  • HTML 元素选取
  • HTML 元素操作
  • CSS 操作
  • HTML 事件函数
  • JavaScript 特效和动画
  • HTML DOM 遍历和修改
  • AJAX
  • Utilities

　　提示： 除此之外，Jquery还提供了大量的插件。

 

1.1.2 为什么使用 jQuery ？

　　目前网络上有大量开源的 JS 框架, 但是 jQuery 是目前最流行的 JS 框架，而且提供了大量的扩展。

　　很多大公司都在使用 jQuery， 例如:

  • Google
  • Microsoft
  • IBM
  • Netflix

 

1.2 jQuery 安装

1.2.1 网页中添加 jQuery

　　可以通过多种方法在网页中添加 jQuery。 您可以使用以下方法：

  • 从 jquery.com 下载 jQuery 库
  • 从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery

　　以上两个版本都可以从 jquery.com 中下载。

　　jQuery 库是一个 JavaScript 文件，您可以使用 HTML 的 <script> 标签引用它：

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

　　提示： 将下载的文件放在网页的同一目录下，就可以使用jQuery。

　　您是否很疑惑为什么我们没有在 <script> 标签中使用 type="text/javascript" ？

　　在 HTML5 中，不必那样做了。JavaScript 是 HTML5 以及所有现代浏览器中的默认脚本语言！

 

1.2.2 替代方案

　　如果您不希望下载并存放 jQuery，那么也可以通过 CDN（内容分发网络） 引用它。

　　百度、又拍云、新浪、谷歌和微软的服务器都存有 jQuery 。

　　如果你的站点用户是国内的，建议使用百度、又拍云、新浪等国内CDN地址，如果你站点用户是国外的可以使用谷歌和微软。

　　注：本站实例均采用百度 jQuery CDN库。

　　如需从百度、又拍云、新浪、谷歌或微软引用 jQuery，请使用以下代码之一：

   

　　百度云:

<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
</head>

　　又拍云:

<head>
<script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js">
</script>
</head>

　　新浪云:

<head>
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">
</script>
</head>

　　Google云:

<head>
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">
</script>
</head>

　　通过 Google CDN 来获得最新可用的版本：

　　不大推荐使用Google CDN来获取版本，因为Google产品在中国很不稳定。

　　如果您观察上什么的 Google URL - 在 URL 中规定了 jQuery 版本 (1.8.0)。如果您希望使用最新版本的 jQuery，也可以从版本字符串的末尾（比如本例 1.8）删除一个数字，谷歌会返回 1.8 系列中最新的可用版本（1.8.0、1.8.1 等等），或者也可以只剩第一个数字，那么谷歌会返回 1 系列中最新的可用版本（从 1.1.0 到 1.9.9）。

   

　　Microsoft云:

<head>
<script src="http://ajax.htmlnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js">
</script>
</head>

　　使用百度、又拍云、新浪、谷歌或微软的 jQuery，有一个很大的优势：

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

 

1.2.3 jQuery 使用版本

　　我们可以在浏览器的 Console 窗口中使用 $.fn.jquery 命令查看当前 jQuery 使用的版本：

 

1.3 jQuery 语法

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

 

1.3.1 jQuery 语法

　　jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

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

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

　　实例:

  • $(this).hide() - 隐藏当前元素
  • $("p").hide() - 隐藏所有段落
  • $("p .test").hide() - 隐藏所有 class="test" 的段落
  • $("#test").hide() - 隐藏所有 id="test" 的元素

 

1.3.2 文档就绪事件

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

$(document).ready(function(){

   // 开始写 jQuery 代码...

 });

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

　　如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子：

  • 试图隐藏一个不存在的元素
  • 获得未完全加载的图像的大小

　　提示：简洁写法（与以上写法效果相同）:

$(function(){

   // 开始写 jQuery 代码...

 });

　　以上两种方式你可以选择你喜欢的方式实现文档就绪后执行jQuery方法。

 

1.4 jQuery 选择器

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

　　jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

　　jQuery 中所有选择器都以美元符号开头：$()。

 

1.4.1 元素选择器

　　jQuery 元素选择器基于元素名选取元素。

　　在页面中选取所有 <p> 元素:

$("p")

 

　　实例

　　用户点击按钮后，所有 <p> 元素都隐藏：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>李泽雄-小家电维修-测试</title> 
<script src="//libs.baidu.com/jquery/2.0.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>

<body>
<h2>这是一个标题</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>点我</button>
</body>
</html>

　　点击前

　　点击后

 

1.4.2 #id 选择器

　　jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。

　　页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。

　　通过 id 选取元素语法如下：

$("#test")

 

　　实例

　　当用户点击按钮后，有 id="test" 属性的元素将被隐藏：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>李泽雄-小家电维修-测试</title> 
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});
</script>
</head>

<body>
<h2>这是一个标题</h2>
<p>这是一个段落</p>
<p id="test">这是另外一个段落</p>
<button>点我</button>
</body>

</html>

　　点击前

　　点击后

 

1.4.3 .class 选择器

　　jQuery 类选择器可以通过指定的 class 查找元素。

　　语法如下：

$(".test")

 

　　实例

　　用户点击按钮后所有带有 class="test" 属性的元素都隐藏：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>李泽雄-小家电维修-测试</title> 
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});
</script>
</head>
<body>

<h2 class="test">这是一个标题</h2>
<p class="test">这是一个段落。</p>
<p>这是另外一个段落。</p>
<button>点我</button>
</body>
</html>

　　点击前

　　点击后

 

1.4.4 CSS 选择器

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

　　实例

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

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

 

1.4.5 更多实例

　　$("*")

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>李泽雄-小家电维修-测试</title> 
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("*").hide();
  });
});
</script>
</head>
<body>

<h2>这是标题</h2>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<button>点我</button>
</body>

</html>
$("*")

　　点击前

　　点击后

 

　　$(this)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>李泽雄-小家电维修-测试</title>
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $(this).hide();
  });
});
</script>
</head>
<body>

<h2>这是标题</h2>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<button>点我</button>

</body>
</html>
$(this)

　　点击前

　　点击后

 

　　$("p.intro")

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>李泽雄-小家电维修-测试</title>
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p.intro").hide();
  });
});
</script>
</head>
<body>

<h2 class="intro">这是一个标题</h2>
<p class="intro">这是一个段落，点击按钮隐藏。</p>
<p>这是另一个段落，点击按钮不会隐藏。</p>
<button>点我</button>

</body>
</html>
View Code

　　点击前

　　点击后

 

　　$("p:first")

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>李泽雄-小家电维修-测试</title>
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p:first").hide();
  });
});
</script>
</head>
<body>

<h2>这是标题</h2>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<button>点我</button>

</body>
</html>
$("p:first")

　　点击前

　　点击后

 

　　$("ul li:first")

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>李泽雄-小家电维修-测试</title>
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("ul li:first").hide();
  });
});
</script>
</head>
<body>

<p>List 1:</p>
<ul>
  <li>Coffee</li>
  <li>Milk</li>
  <li>Tea</li>
</ul>

<p>List 2:</p>
<ul>
  <li>Coffee</li>
  <li>Milk</li>
  <li>Tea</li>
</ul>

<button>点我</button>

</body>
</html>
$("ul li:first")

　　点击前

　　点击后

 

　　$("ul li:first-child")

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>李泽雄-小家电维修-测试</title>
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("ul li:first-child").hide();
  });
});
</script>
</head>
<body>

<p>List 1:</p>
<ul>
  <li>Coffee</li>
  <li>Milk</li>
  <li>Tea</li>
</ul>

<p>List 2:</p>
<ul>
  <li>Coffee</li>
  <li>Milk</li>
  <li>Tea</li>
</ul>

<button>点我</button>

</body>
</html>
$("ul li:first-child")

　　点击前

　　点击后

 

　　$("[href]")

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("[href]").hide();
  });
});
</script>
</head>
<body>

<h2>这是标题</h2>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<p><a href="http://www.w3cschool.cn/html/">HTML 教程</a></p>
<p><a href="http://www.w3cschool.cn/css/">CSS 教程</a></p>
<button>点我</button>

</body>
</html>
$("[href]")

　　点击前

　　点击后

 

　　$("a[target='_blank']")

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("a[target='_blank']").hide();
  });
});
</script>
</head>
<body>

<h2>这是标题</h2>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<p><a href="http://www.w3cschool.cn/html/" target="_blank">HTML 教程</a></p>
<p><a href="http://www.w3cschool.cn/css/">CSS 教程</a></p>
<button>点我</button>

</body>
</html>
$("a[target='_blank']")

　　点击前

　　点击后

 

　　$("a[target!='_blank']")

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("a[target!='_blank']").hide();
  });
});
</script>
</head>
<body>

<h2>这是标题</h2>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<p><a href="http://www.w3cschool.cn/html/" target="_blank">HTML 教程</a></p>
<p><a href="http://www.w3cschool.cn/css/">CSS 教程</a></p>
<button>点我</button>

</body>
</html>
$("a[target!='_blank']")

　　点击前

　　点击后

 

　　$(":button")

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $(":button").hide();
  });
});
</script>
</head>
<body>

<h2>这是标题</h2>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<button>点我</button>

</body>
</html>
$(":button")

　　点击前

　　点击后

 

　　$("tr:even")

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("tr:even").css("background-color","yellow");
});
</script>
</head>
<body>

<h1>欢迎访问我的主页</h1>

<table border="1">
<tr>
  <th>网站名</th>
  <th>网址</th>
</tr>
<tr>
<td>Google</td>
<td>http://www.google.com</td>
</tr>
<tr>
<td>Baidu</td>
<td>http://www.baidu.com</td>
</tr>
<tr>
<td>W3Cschool教程</td>
<td>http://www.w3cschool.cn</td>
</tr>
<tr>
<td>淘宝</td>
<td>http://www.taobao.com</td>
</tr>
<tr>
<td>Facebook</td>
<td>http://www.facebook.com</td>
</tr>
</table>

</body>
</html>
$("tr:even")

　　结果

 

　　$("tr:odd")

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("tr:odd").css("background-color","yellow");
});
</script>
</head>
<body>

<h1>欢迎访问我的主页</h1>

<table border="1">
<tr>
  <th>网站名</th>
  <th>网址</th>
</tr>
<tr>
<td>Google</td>
<td>http://www.google.com</td>
</tr>
<tr>
<td>Baidu</td>
<td>http://www.baidu.com</td>
</tr>
<tr>
<td>W3Cschool教程</td>
<td>http://www.w3cschool.cn</td>
</tr>
<tr>
<td>淘宝</td>
<td>http://www.taobao.com</td>
</tr>
<tr>
<td>Facebook</td>
<td>http://www.facebook.com</td>
</tr>
</table>

</body>
</html>
$("tr:odd")

　　结果

 

1.4.6 独立文件中使用 jQuery 函数

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

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

<head>
<scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script src="my_jquery_functions.js"></script>
</head>

 

1.5 jQuery 事件

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

 

1.5.1 什么是事件？

　　页面对不同访问者的响应叫做事件。

　　事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

　　实例：

  • 在元素上移动鼠标。
  • 选取单选按钮
  • 点击元素

　　在事件中经常使用术语"触发"（或"激发"）例如： "当您按下按键时触发 keypress 事件"。

　　常见 DOM 事件：

 

1.5.2 jQuery 事件方法语法

　　在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。

　　页面中指定一个点击事件：

$("p").click();

　　下一步是定义什么时间触发事件。您可以通过一个事件函数实现：

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

  // action goes here!!       

});

 

1.5.3 常用的 jQuery 事件方法

　　$(document).ready()

　　$(document).ready() 方法允许我们在文档完全加载完后执行函数。该事件方法在 jQuery 语法 章节中已经提到过。

　　click()

　　click() 方法是当按钮点击事件被触发时会调用一个函数。

　　该函数在用户点击 HTML 元素时执行。

　　在下面的实例中，当点击事件在某个 <p> 元素上触发时，隐藏当前的 <p> 元素：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>李泽雄-小家电维修-测试</title> 
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});
</script>
</head>
<body>

<p>如果你点我，我就会消失。</p>
<p>点我消失!</p>
<p>点我也消失!</p>

</body>
</html>

　　结果，这个结果就不演示点击前点击后了

 

　　dblclick()

　　当双击元素时，会发生 dblclick 事件。

　　dblclick() 方法触发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>李泽雄-小家电维修-测试</title> 
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").dblclick(function(){
    $(this).hide();
  });
});
</script>
</head>
<body>

<p>双击鼠标左键的，我就消失。</p>
<p>双击我消失！</p>
<p>双击我也消失！</p>

</body>
</html>

　　结果，这个结果就不演示点击前点击后了

 

　　mouseenter()

　　当鼠标指针穿过元素时，会发生 mouseenter 事件。

　　mouseenter() 方法触发 mouseenter 事件，或规定当发生 mouseenter 事件时运行的函数：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>李泽雄-小家电维修-测试</title> 
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#p1").mouseenter(function(){
    alert("您的鼠标移到了 id=p1 的元素上!");
  });
});
</script>
</head>
<body>

<p id="p1">鼠标指针进入此处，会看到弹窗。</p>

</body>
</html>

　　结果

 

　　mouseleave()

　　当鼠标指针离开元素时，会发生 mouseleave 事件。

　　mouseleave() 方法触发 mouseleave 事件，或规定当发生 mouseleave 事件时运行的函数：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>李泽雄-小家电维修-测试</title> 
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#p1").mouseleave(function(){
    alert("再见，您的鼠标离开了该段落。");
  });
});
</script>
</head>
<body>

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

</body>
</html>

　　结果

 

　　mousedown()

　　当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。

　　mousedown() 方法触发 mousedown 事件，或规定当发生 mousedown 事件时运行的函数：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>李泽雄-小家电维修-测试</title> 
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#p1").mousedown(function(){
    alert("鼠标在该段落上按下！");
  });
});
</script>
</head>
<body>

<p id="p1">这是一个段落</p>

</body>
</html>

　　结果

 

　　mouseup()

　　当在元素上松开鼠标按钮时，会发生 mouseup 事件。

　　mouseup() 方法触发 mouseup 事件，或规定当发生 mouseup 事件时运行的函数：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>李泽雄-小家电维修-测试</title> 
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#p1").mouseup(function(){
    alert("鼠标在段落上松开。");
  });
});
</script>
</head>
<body>

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

</body>
</html>

　　结果

 

　　hover()

　　hover()方法用于模拟光标悬停事件。

　　当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#p1").hover(function(){
    alert("你进入了 p1!");
    },
    function(){
    alert("拜拜! 现在你离开了 p1!");
  }); 
});
</script>
</head>
<body>

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

</body>
</html>

　　结果

 

　　focus()

　　当元素获得焦点时，发生 focus 事件。

　　当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。

　　focus() 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>李泽雄-小家电维修-测试</title> 
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("input").focus(function(){
    $(this).css("background-color","#cccccc");
  });
  $("input").blur(function(){
    $(this).css("background-color","#ffffff");
  });
});
</script>
</head>
<body>

Name: <input type="text" name="fullname"><br>
Email: <input type="text" name="email">

</body>
</html>

　　结果

 

　　blur()

　　当元素失去焦点时，发生 blur 事件。

　　blur() 方法触发 blur 事件，或规定当发生 blur 事件时运行的函数：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>李泽雄-小家电维修-测试</title> 
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("input").focus(function(){
    $(this).css("background-color","#cccccc");
  });
  $("input").blur(function(){
    $(this).css("background-color","#ffffff");
  });
});
</script>
</head>
<body>

Name: <input type="text" name="fullname"><br>
Email: <input type="text" name="email">

</body>
</html>

　　结果

 

1.6 比较keypress、keydown与keyup

  • keydown：在键盘上按下某键时发生，一直按着则会不断触发（opera浏览器除外），它返回的是键盘代码;
  • keypress：在键盘上按下一个按键，并产生一个字符时发生, 返回ASCII码。注意: shift、alt、ctrl等键按下并不会产生字符，所以监听无效，换句话说，只有按下能在屏幕上输出字符的按键时keypress事件才会触发。若一直按着某按键则会不断触发。
  • keyup：用户松开某一个按键时触发，与keydown相对，返回键盘代码.

 

2.jQuery 效果

2.1 jQuery 效果 – 隐藏和显示

　　在 jQuery 中可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素，以及使用 toggle() 方法能够切换 hide() 和 show() 方法。

 

　　实例

　　jQuery hide()

　　简单的jQuery hide()方法演示。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>李泽雄-小家电维修-测试</title> 
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});
</script>
</head>
<body>
<p>你点我，我就会消失。</p>
<p>点我!</p>
<p>点我!</p>
</body>
</html>

　　点击前

　　点击后

 

　　jQuery hide()

　　另一个hide()实例。演示如何隐藏文本。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(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>Google</h3>
<div class="ex">
<button class="hide">点我隐藏</button>
<p>站点名: Google<br> 
站点 URL：http://www.google.com</p>
</div>

<h3>百度</h3>
<div class="ex">
<button class="hide">点我隐藏</button>
<p>站点名: 百度<br> 
站点 URL：http://www.baidu.cn</p>

</div>

</body>
</html>

　　点击前

　　点击后

 

2.1.1 jQuery hide() 和 show()

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $(".hide").click(function(){
    $("p").hide();
  });
  $(".show").click(function(){
    $("p").show();
  });
});
</script>
</head>
<body>
<input type="text" id="text"><br>
<p>如果你点击“隐藏” 按钮，我将会消失。</p>
<button class="hide">隐藏</button>
<button class="show">显示</button>
</body>
</html>

　　结果

 

　　语法:

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

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

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide(1000);
  });
});
</script>
</head>
<body>
<button>隐藏</button>
<p>这是个段落，内容比较少。</p>
<p>这是另外一个小段落</p>
</body>
</html>

　　结果

 

2.1.2 jQuery toggle()

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").toggle("slow");
  });
});
</script>
</head>
<body>

<button>隐藏/显示</button>
<p>这是一个文本段落。</p>
<p>这是另外一个文本段落。</p>
</body>
</html>

　　结果

 

　　语法:

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

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

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

　　可选的 callback 参数，具有以下三点说明：

  1. $(selector)选中的元素的个数为n个，则callback函数会执行n次
  2. callback函数名后加括号，会立刻执行函数体，而不是等到显示/隐藏完成后才执行
  3. callback既可以是函数名，也可以是匿名函数

 

2.2 jQuery 效果 – 淡入淡出

　　在jQuery中可以通过四个方法来实现元素的淡入淡出，这四个方法分别是：fadeIn()、fadeOut()、fadeToggle() 以及 fadeTo()，本文通过实例来为你讲解如何在jQuery中使用这四个方法。

 

2.2.1 实例

　　jQuery fadeIn()

　　演示 jQuery fadeIn() 方法。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.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>点击淡入 div 元素。</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>

　　结果

 

　　jQuery fadeOut()

　　演示 jQuery fadeOut() 方法。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeOut();
    $("#div2").fadeOut("slow");
    $("#div3").fadeOut(3000);
  });
});
</script>
</head>

<body>
<p>以下实例演示了 fadeOut() 使用了不同参数的效果。</p>
<button>点击淡出 div 元素。</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 fadeToggle()

　　演示 jQuery fadeToggle() 方法。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>李泽雄-小家电维修-测试</title>
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeToggle();
    $("#div2").fadeToggle("slow");
    $("#div3").fadeToggle(3000);
  });
});
</script>
</head>
<body>

<p>实例演示了 fadeToggle() 使用了不同的 speed(速度) 参数。</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 fadeTo()

　　演示 jQuery fadeTo() 方法。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.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>

　　结果

 

2.2.2 jQuery Fading 方法

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

　　jQuery 拥有下面四种 fade 方法：

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

 

2.2.3 jQuery fadeIn() 方法

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

　　语法:

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

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

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.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>点击淡入 div 元素。</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>

　　结果

 

2.2.4 jQuery fadeOut() 方法

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

　　语法:

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

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

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeOut();
    $("#div2").fadeOut("slow");
    $("#div3").fadeOut(3000);
  });
});
</script>
</head>

<body>
<p>以下实例演示了 fadeOut() 使用了不同参数的效果。</p>
<button>点击淡出 div 元素。</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>

　　结果

 

2.2.5 jQuery fadeToggle() 方法

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

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

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

　　语法:

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

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

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>李泽雄-小家电维修-测试</title>
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeToggle();
    $("#div2").fadeToggle("slow");
    $("#div3").fadeToggle(3000);
  });
});
</script>
</head>
<body>

<p>实例演示了 fadeToggle() 使用了不同的 speed(速度) 参数。</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>

　　结果

 

2.2.6 jQuery fadeTo() 方法

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

　　语法:

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

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

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

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.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>

　　结果

 

2.3 jQuery 效果 - 滑动

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

 

2.3.1 实例

　　jQuery slideDown()

　　演示 jQuery slideDown() 方法。

　　jQuery slideUp()

　　演示 jQuery slideUp() 方法。

　　jQuery slideToggle()

　　演示 jQuery slideToggle() 方法。

 

2.3.2 jQuery slideDown() 方法

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

　　语法:

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

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

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideDown("slow");
  });
});
</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>
 
<div id="flip">点我滑下面板</div>
<div id="panel">Hello world!</div>

</body>
</html>

　　结果

 

2.3.3 jQuery slideUp() 方法

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

　　语法:

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

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

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideUp("slow");
  });
});
</script>
 
<style type="text/css"> 
#panel,#flip
{
    padding:5px;
    text-align:center;
    background-color:#e5eecc;
    border:solid 1px #c3c3c3;
}
#panel
{
    padding:50px;
}
</style>
</head>
<body>
 
<div id="flip">点我拉起面板</div>
<div id="panel">Hello world!</div>

</body>
</html>

　　结果

 

2.3.4 jQuery slideToggle() 方法

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

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

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

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

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

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideToggle("slow");
  });
});
</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>
 
<div id="flip">点我，显示或隐藏面板。</div>
<div id="panel">Hello world!</div>

</body>
</html>

　　结果

 

2.4 jQuery 效果 – 动画

　　在使用jQuery动画时，你可能想要实现更加丰富的效果，那么你可以通过使用 jQuery animate() 方法自定义动画来达到目的，具体的使用方法如下文所述。

 

2.4.1 jQuery 动画 - animate() 方法

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

　　语法：

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

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

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

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

　　下面的例子演示 animate() 方法的简单应用。它把 <div> 元素往右边移动了 250 像素：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({left:'250px'});
  });
});
</script> 
</head>
 
<body>
<button>开始动画</button>
<p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。 
如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>

</body>
</html>

　　结果

　　默认情况下，所有 HTML 元素都有一个静态位置，且无法移动。

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

　　注意：在 jQuery 的 animate()方法中，第一个参数是一个必须参数，表示一个CSS属性和值的对象。

 

2.4.2 jQuery animate() - 操作多个属性

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.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 元素有一个静态的位置，且是不可移动的。 
如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>

</body>
</html>

　　结果

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

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

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

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

 

2.4.3 jQuery animate() - 使用相对值

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.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 元素有一个静态的位置，且是不可移动的。 
如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>

</body>
</html>

　　结果

 

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      height:'toggle'
    });
  });
});
</script> 
</head>
 
<body>
<button>开始动画</button>
<p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。 
如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>

</body>
</html>

　　结果

 

2.4.5 jQuery animate() - 使用队列功能

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    var div=$("div");
    div.animate({height:'300px',opacity:'0.4'});
    div.animate({width:'300px',opacity:'0.8'});
    div.animate({height:'100px',opacity:'0.4'});
    div.animate({width:'100px',opacity:'0.8'});
  });
});
</script> 
</head>
 
<body>
<button>开始动画</button>
<p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。 
如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>

</body>
</html>

　　结果

　　下面的例子把 <div> 元素往右边移动了 100 像素，然后增加文本的字号：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.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 元素有一个静态的位置，且是不可移动的。 
如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
<div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>

</body>
</html>

　　点击前

　　点击后

 

2.5 jQuery 效果 – 停止动画

　　实例

　　jQuery stop() 滑动

　　演示 jQuery stop() 方法。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.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 stop() 动画(带参数)

　　演示 jQuery stop() 方法

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.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>点击 "开始" 按钮开始动画。</p>
<p>点击 "停止" 按钮停止当前激活的动画，但之后我们能再动画队列中再次激活。</p>
<p>点击 "停止所有" 按钮停止当前动画，并清除动画队列，所以元素的所有动画都会停止。</p>
<p>点击 "停止动画，但完成动作" 快速完成动作，并停止它。</p> 

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

</body>
</html>

　　结果

 

2.5.1 jQuery stop() 方法

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

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

　　语法:

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

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

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

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

　　下面的例子演示 stop() 方法，不带参数：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.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.6 jQuery Callback 方法

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

 

2.6.1 jQuery 动画的问题

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

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

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

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

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

　　实例

　　以下实例在隐藏效果完全实现后回调函数:

　　使用 callback 实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide("slow",function(){
      alert("段落现在被隐藏了");
    });
  });
});
</script>
</head>
<body>
<button>隐藏</button>
<p>我们段落内容，点击“隐藏”按钮我就会消失</p>
</body>
</html>

　　结果

　　以下实例没有回调函数，警告框会在隐藏效果完成前弹出：

　　没有 callback(回调)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide(1000);
    alert("现在段落被隐藏了");
  });
});
</script>
</head>
<body>
<button>隐藏</button>
<p>这是一个段落，内容很少</p>
</body>
</html>

　　结果

 

2.7 jQuery Chaining

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

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

 

2.7.1 jQuery 方法链接

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

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

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

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function()
  {
  $("button").click(function(){
    $("#p1").css("color","red").slideUp(2000).slideDown(2000);
  });
});
</script>
</head>
<body>

<p id="p1">百度!!</p>
<button>点我</button>

</body>
</html>

　　结果

　　如果需要，我们也可以添加多个方法调用。

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

　　如下书写也可以很好地运行：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function()
  {
  $("button").click(function(){
    $("#p1").css("color","red")
      .slideUp(2000)
      .slideDown(2000);
  });
});
</script>
</head>
<body>

<p id="p1">百度!!</p>
<button>点我</button>

</body>
</html>

　　结果

　　jQuery 会抛掉多余的空格，并当成一行长代码来执行上面的代码行。

 

3.jQuery HTML

3.1 jQuery 捕获

3.1.1 jQuery - 获取内容和属性

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

 

3.1.2 jQuery DOM 操作

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

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

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

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

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

 

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

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

  • text() - 设置或返回所选元素的文本内容
  • html() - 设置或返回所选元素的内容（包括 HTML 标记）
  • val() - 设置或返回表单字段的值

　　下面的例子演示如何通过 jQuery text() 和 html() 方法来获得内容：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.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>

　　结果

　　下面的例子演示如何通过 jQuery val() 方法获得输入字段的值：

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    alert("值为: " + $("#test").val());
  });
});
</script>
</head>

<body>
<p>名称: <input type="text" id="test" value="百度"></p>
<button>显示值</button>
</body>
</html>

　　结果

 

3.1.4 获取属性 - attr()

　　jQuery attr() 方法用于获取属性值。

　　下面的例子演示如何获得链接中 href 属性的值：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    alert($("#runoob").attr("href"));
  });
});
</script>
</head>

<body>
<p><a href="http://www.baidu.cn" id="runoob">百度</a></p>
<button>显示 href 属性的值</button>
</body>
</html>

　　结果

　　下一章会讲解如何设置（改变）内容和属性值。

 

3.2 jQuery 设置

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

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

  • text() - 设置或返回所选元素的文本内容
  • html() - 设置或返回所选元素的内容（包括 HTML 标记）
  • val() - 设置或返回表单字段的值

　　下面的例子演示如何通过 text()、html() 以及 val() 方法来设置内容：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.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("百度");
  });
});
</script>
</head>

<body>
<p id="test1">这是一个段落。</p>
<p id="test2">这是另外一个段落。</p>
<p>输入框: <input type="text" id="test3" value="百度"></p>
<button id="btn1">设置文本</button>
<button id="btn2">设置 HTML</button>
<button id="btn3">设置值</button>
</body>
</html>

　　结果

 

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

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

　　下面的例子演示带有回调函数的 text() 和 html()：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("#test1").text(function(i,origText){
      return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")"; 
    });
  });

  $("#btn2").click(function(){
    $("#test2").html(function(i,origText){
      return "旧 html: " + origText + " 新 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>

　　结果

 

3.2.3 设置属性 - attr()

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

　　下面的例子演示如何改变（设置）链接中 href 属性的值：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#runoob").attr("href","http://www.baidu.cn/jquery");
  });
});
</script>
</head>

<body>
<p><a href="http://www.google.cn" id="runoob">google</a></p>
<button>修改 href 值</button>
<p>点击按钮修改后，可以点击链接查看链接地址是否变化。</p>
</body>
</html>

　　结果

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

　　下面的例子演示如何同时设置 href 和 title 属性：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#runoob").attr({
      "href" : "http://www.baidu.cn/jquery",
      "title" : "jQuery 教程"
    });
  });
});
</script>
</head>

<body>
<p><a href="http://www.baidu.cn" id="runoob">百度</a></p>
<button>修改 href 和 title</button>
<p>点击按钮修改后，可以查看 href 和 title 是否变化。</p>
</body>
</html>

　　结果

 

3.2.4 attr() 的回调函数

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

　　下面的例子演示带有回调函数的 attr() 方法：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>李泽雄-小家电维修-测试</title> 
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#baidu").attr("href", function(i, origValue){
            return origValue + "/jquery";
        });
    });
});
</script>
</head>

<body>
<p><a href="http://www.baidu.cn" id="baidu">小家电维修</a></p>
<button>修改 href值</button>
<p>点击按钮修改后，可以点击链接查看 href 属性是否变化。</p>
</body>
</html>

　　结果

 

3.3 jQuery 添加元素

　　通过 jQuery，可以很容易地添加新元素/内容。

 

3.3.1 添加新的 HTML 内容

　　我们将学习用于添加新内容的四个 jQuery 方法：

  • append() - 在被选元素内部的结尾插入指定内容
  • prepend() - 在被选元素内部的开头插入指定内容
  • after() - 在被选元素之后插入内容
  • before() - 在被选元素之前插入内容

 

3.3.2 jQuery append() 方法

　　jQuery append() 方法在被选元素的结尾插入内容

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("p").append(" <b>追加文本</b>。");
  });

  $("#btn2").click(function(){
    $("ol").append("<li>追加列表项</li>");
  });
});
</script>
</head>

<body>
<p>这是一个段落。</p>
<p>这是另外一个段落。</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>

　　结果

 

3.3.3 jQuery prepend() 方法

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("p").prepend("<b>在开头追加文本</b>。 ");
  });
  $("#btn2").click(function(){
    $("ol").prepend("<li>在开头添加列表项</li>");
  });
});
</script>
</head>

<body>
<p>这是一个段落。</p>
<p>这是另外一个段落。</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>

　　结果

 

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

　　在上面的例子中，我们只在被选元素的开头/结尾插入文本/HTML。

　　不过，append() 和 prepend() 方法能够通过参数接收无限数量的新元素。可以通过 jQuery 来生成文本/HTML（就像上面的例子那样），或者通过 JavaScript 代码和 DOM 元素。

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
function appendText()
{
    var txt1="<p>文本。</p>";              // 使用 HTML 标签创建文本
    var txt2=$("<p></p>").text("文本。");  // 使用 jQuery 创建文本
    var txt3=document.createElement("p");
    txt3.innerHTML="文本。";               // 使用 DOM 创建文本 text with DOM
    $("body").append(txt1,txt2,txt3);        // 追加新元素
}
</script>
</head>
<body>

<p>这是一个段落。</p>
<button onclick="appendText()">追加文本</button>

</body>
</html>

　　结果

 

3.3.5 jQuery after() 和 before() 方法

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("img").before("<b>之前</b>");
  });

  $("#btn2").click(function(){
    $("img").after("<i>之后</i>");
  });
});
</script>
</head>

<body>
<img src="/statics/images/fuck" >
<br><br>
<button id="btn1">之前插入</button>
<button id="btn2">之后插入</button>
</body>
</html>

　　结果

 

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

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

　　在下面的例子中，我们创建若干新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 after() 方法把这些新元素插到文本中（对 before() 同样有效）：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.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);          // 在图片后添加文本
}
</script>
</head>
<body>

<img src="/statics/images/fuck" >
<br><br>
<button onclick="afterText()">之后插入</button>

</body>
</html>

　　结果

　　提示：在jQuery中，append/prepend 是在选择元素内部嵌入，而after/before 是在元素外面追加。

 

3.4 jQuery 删除元素

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

 

3.4.1 删除元素/内容

　　如需删除元素和内容，一般可使用以下两个 jQuery 方法：

  • remove() - 删除被选元素（及其子元素）
  • empty() - 从被选元素中删除子元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.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;">

这是 div 中的一些文本。
<p>这是在 div 中的一个段落。</p>
<p>这是在 div 中的另外一个段落。</p>

</div>
<br>
<button>移除div元素</button>

</body>
</html>

　　结果

 

3.4.2 jQuery empty() 方法

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.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;">

这是 div 中的一些文本。
<p>这是在 div 中的一个段落。</p>
<p>这是在 div 中的另外一个段落。</p>

</div>
<br>
<button>清空div元素</button>

</body>
</html>

　　结果(点击清除后)

 

3.4.3 过滤被删除的元素

　　jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。

　　该参数可以是任何 jQuery 选择器的语法。

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").remove(".italic");
  });
});
</script>
</head>
<body>

<p>这是一个段落。</p>
<p class="italic"><i>这是另外一个段落。</i></p>
<p class="italic"><i>这是另外一个段落。</i></p>
<button>移除所有  class="italic" 的 p 元素。</button>

</body>
</html>

　　结果（删除后）

 

3.5 jQuery CSS 类

3.5.1 jQuery 操作 CSS

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

  • addClass() - 向被选元素添加一个或多个类
  • removeClass() - 从被选元素删除一个或多个类
  • toggleClass() - 对被选元素进行添加/删除类的切换操作
  • css() - 设置或返回样式属性

 

3.5.2 实例样式表

　　下面的样式表将用于本页的所有例子：

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

 .blue
 {
 color:blue;
 }

 

3.5.3 jQuery addClass() 方法

　　下面的例子展示如何向不同的元素添加 class 属性。当然，在添加类时，您也可以选取多个元素：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.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>为元素添加 class</button>

</body>
</html>

　　添加前

　　添加后

 

　　您也可以在 addClass() 方法中规定多个类：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.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>

　　添加前

　　添加后

 

3.5.4 jQuery removeClass() 方法

　　下面的例子演示如何在不同的元素中删除指定的 class 属性：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.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>从元素中移除 class</button>
</body>
</html>

　　移除前

　　移除后

 

3.5.5 jQuery toggleClass() 方法

　　下面的例子将展示如何使用 jQuery toggleClass() 方法。该方法对被选元素进行添加/删除类的切换操作：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.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 class="blue">标题 1</h1>
<h2 class="blue">标题 2</h2>
<p class="blue">这是一个段落。</p>
<p>这是另外一个段落。</p>
<br>
<button>切换 class</button>
</body>
</html>

　　这个就不进行结果演示了，这个添加移除都可以。

 

3.6 jQuery css() 方法

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

 

3.6.1 返回 CSS 属性

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

css("propertyname");

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    alert("背景颜色 = " + $("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 元素的 background-color </button>
</body>
</html>

　　结果

 

3.6.2 设置 CSS 属性

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

css("propertyname","value");

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.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 元素的 background-color </button>
</body>
</html>

　　设置前

　　设置后

 

3.6.3 设置多个 CSS 属性

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

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.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>

　　设置前

　　设置后

 

3.7 jQuery 尺寸

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

 

3.7.1 jQuery 尺寸 方法

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

 

3.7.2 jQuery 尺寸

 

3.7.3 jQuery width() 和 height() 方法

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

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.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>
</html>

　　结果

 

3.7.4 jQuery innerWidth() 和 innerHeight() 方法

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

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

　　下面的例子返回指定的 <div> 元素的 inner-width/height：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    var txt="";
    txt+="div 宽度: " + $("#div1").width() + "</br>";
    txt+="div 高度: " + $("#div1").height() + "</br>";
    txt+="div 宽度，包含内边距: " + $("#div1").innerWidth() + "</br>";
    txt+="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>

　　结果

 

3.7.5 jQuery outerWidth() 和 outerHeight() 方法

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

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

　　下面的例子返回指定的 <div> 元素的 outer-width/height：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    var txt="";
    txt+="div 宽度: " + $("#div1").width() + "</br>";
    txt+="div 高度: " + $("#div1").height() + "</br>";
    txt+="div 宽度，包含内边距和边框: " + $("#div1").outerWidth() + "</br>";
    txt+="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>

　　结果

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

 

4.jQuery 遍历

4.1 jQuery 遍历

4.1.1 什么是遍历？

　　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> 的后代。

 

4.1.2 遍历 DOM

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

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

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

 

4.2 jQuery 遍历 - 祖先

　　祖先是父、祖父或曾祖父等等。

　　通过 jQuery，您能够向上遍历 DOM 树，以查找元素的祖先。

 

4.2.1 向上遍历 DOM 树

　　这些 jQuery 方法很有用，它们用于向上遍历 DOM 树：

 

4.2.2 jQuery parent() 方法

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

　　该方法只会向上一级对 DOM 树进行遍历。

　　下面的例子返回每个 <span> 元素的的直接父元素：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.ancestors *
{ 
    display: block;
    border: 2px solid lightgrey;
    color: lightgrey;
    padding: 5px;
    margin: 15px;
}
</style>
<script src="//libs.baidu.com/jquery/1.10.2/jquery.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>

　　结果

 

4.2.3 jQuery parents() 方法

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

　　下面的例子返回所有 <span> 元素的所有祖先：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.ancestors *
{ 
    display: block;
    border: 2px solid lightgrey;
    color: lightgrey;
    padding: 5px;
    margin: 15px;
}
</style>
<script src="//libs.baidu.com/jquery/1.10.2/jquery.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>

</html>

　　结果

　　您也可以使用可选参数来过滤对祖先元素的搜索。

　　下面的例子返回所有 <span> 元素的所有祖先，并且它是 <ul> 元素：

<!DOCTYPE html>
<html>
<head>
<style>
.ancestors *
{ 
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("span").parents("ul").css({"color":"red","border":"2px solid red"});
});
</script>
</head>

<body class="ancestors">body (great-great-grandparent)
  <div style="width:500px;">div (great-grandparent)
    <ul>ul (grandparent)  
      <li>li (direct parent)
        <span>span</span>
      </li>
    </ul>   
  </div>
</body>

</html>

　　结果

 

4.2.4 jQuery parentsUntil() 方法

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

　　下面的例子返回介于 <span> 与 <div> 元素之间的所有祖先元素：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.ancestors *
{ 
    display: block;
    border: 2px solid lightgrey;
    color: lightgrey;
    padding: 5px;
    margin: 15px;
}
</style>
<script src="//libs.baidu.com/jquery/1.10.2/jquery.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>

　　结果

 

4.3 jQuery 遍历 - 后代

　　后代是子、孙、曾孙等等。

　　通过 jQuery，您能够向下遍历 DOM 树，以查找元素的后代。

 

4.3.1 向下遍历 DOM 树

　　下面是两个用于向下遍历 DOM 树的 jQuery 方法：

 

4.3.2 jQuery children() 方法

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

　　该方法只会向下一级对 DOM 树进行遍历。

　　下面的例子返回每个 <div> 元素的所有直接子元素：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.descendants *
{ 
    display: block;
    border: 2px solid lightgrey;
    color: lightgrey;
    padding: 5px;
    margin: 15px;
}
</style>
<script src="//libs.baidu.com/jquery/1.10.2/jquery.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 (儿子元素)
    <span>span (孙子元素)</span>
  </p> 
</div>

</body>
</html>

　　结果

　　您也可以使用可选参数来过滤对子元素的搜索。

　　下面的例子返回类名为 "1" 的所有 <p> 元素，并且它们是 <div> 的直接子元素：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.descendants *
{ 
    display: block;
    border: 2px solid lightgrey;
    color: lightgrey;
    padding: 5px;
    margin: 15px;
}
</style>
<script src="//libs.baidu.com/jquery/1.10.2/jquery.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>

　　结果

 

4.3.3 jQuery find() 方法

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

　　下面的例子返回属于 <div> 后代的所有 <span> 元素：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.descendants *
{ 
    display: block;
    border: 2px solid lightgrey;
    color: lightgrey;
    padding: 5px;
    margin: 15px;
}
</style>
<script src="//libs.baidu.com/jquery/1.10.2/jquery.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 (当前元素) 
  <p>p (儿子元素)
    <span>span (孙子元素)</span>     
  </p>
  <p>p (儿子元素)
    <span>span (孙子元素)</span>
  </p> 
</div>

</body>
</html>

　　结果

　　下面的例子返回 <div> 的所有后代：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.descendants *
{ 
    display: block;
    border: 2px solid lightgrey;
    color: lightgrey;
    padding: 5px;
    margin: 15px;
}
</style>
<script src="//libs.baidu.com/jquery/1.10.2/jquery.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 (儿子元素)
    <span>span (孙子元素)</span>
  </p> 
</div>

</body>
</html>

　　结果

 

4.4 jQuery 遍历 - 同胞(siblings)

　　同胞拥有相同的父元素。

　　通过 jQuery，您能够在 DOM 树中遍历元素的同胞元素。

 

4.4.1 在 DOM 树中水平遍历

　　有许多有用的方法让我们在 DOM 树进行水平遍历：

  • siblings()
  • next()
  • nextAll()
  • nextUntil()
  • prev()
  • prevAll()
  • prevUntil()

 

4.4.2 jQuery siblings() 方法

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

　　下面的例子返回 <h2> 的所有同胞元素：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.siblings *
{ 
    display: block;
    border: 2px solid lightgrey;
    color: lightgrey;
    padding: 5px;
    margin: 15px;
}
</style>
<script src="//libs.baidu.com/jquery/1.10.2/jquery.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>

　　结果

　　您也可以使用可选参数来过滤对同胞元素的搜索。

　　下面的例子返回属于 <h2> 的同胞元素的所有 <p> 元素：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.siblings *
{ 
    display: block;
    border: 2px solid lightgrey;
    color: lightgrey;
    padding: 5px;
    margin: 15px;
}
</style>
<script src="//libs.baidu.com/jquery/1.10.2/jquery.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>

　　结果

 

4.4.3 jQuery next() 方法

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

　　该方法只返回一个元素。

　　下面的例子返回 <h2> 的下一个同胞元素：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.siblings *
{ 
    display: block;
    border: 2px solid lightgrey;
    color: lightgrey;
    padding: 5px;
    margin: 15px;
}
</style>
<script src="//libs.baidu.com/jquery/1.10.2/jquery.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>

　　结果

 

4.4.4 jQuery nextAll() 方法

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

　　下面的例子返回 <h2> 的所有跟随的同胞元素：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.siblings *
{ 
    display: block;
    border: 2px solid lightgrey;
    color: lightgrey;
    padding: 5px;
    margin: 15px;
}
</style>
<script src="//libs.baidu.com/jquery/1.10.2/jquery.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>

　　结果

 

4.4.5 jQuery nextUntil() 方法

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

　　下面的例子返回介于 <h2> 与 <h6> 元素之间的所有同胞元素：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.siblings *
{ 
    display: block;
    border: 2px solid lightgrey;
    color: lightgrey;
    padding: 5px;
    margin: 15px;
}
</style>
<script src="//libs.baidu.com/jquery/1.10.2/jquery.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>

　　结果

 

4.4.6 jQuery prev(), prevAll() & prevUntil() 方法

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

 

4.5 jQuery 遍历 - 过滤

4.5.1 缩小搜索元素的范围

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

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

 

4.5.2 jQuery first() 方法

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.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>

　　结果

 

4.5.3 jQuery last() 方法

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.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>

　　结果

 

4.5.4 jQuery eq() 方法

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.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>google (index 2).</p>
<p>http://www.google.com (index 3)。</p>

</body>
</html>

　　结果

 

4.5.5 jQuery filter() 方法

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
   $("p").filter(".url").css("background-color","yellow");
});
</script>
</head>
<body>

<h1>欢迎访问我的主页</h1>
<p>百度 (index 0).</p>
<p class="url">http://www.百度.cn (index 1)。</p>
<p>google (index 2).</p>
<p class="url">http://www.google.com (index 3)。</p>

</body>
</html>

　　结果

 

4.5.6 jQuery not() 方法

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

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
   $("p").not(".url").css("background-color","yellow");
});
</script>
</head>
<body>

<h1>欢迎访问我的主页</h1>
<p>百度 (index 0).</p>
<p class="url">http://www.baidu.cn (index 1)。</p>
<p>google (index 2).</p>
<p class="url">http://www.google.com (index 3)。</p>

</body>
</html>

　　结果

 

5.jQuery AJAX

5.1 jQuery AJAX 简介

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").load("/statics/demosource/demo_test.txt");
  });
});
</script>
</head>
<body>

<div id="div1"><h2>使用 jQuery AJAX</h2></div>
<button>获取外部内容</button>

</body>
</html>

　　使用前

　　使用后

 

5.1.1 什么是 AJAX？

　　AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

　　简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。

　　使用 AJAX 的应用程序案例：谷歌地图、腾讯微博、优酷视频、人人网等等。

　　可以参考w3cschool的 jQuery Ajax 参考手册学会 jQuery Ajax 的具体应用。

　　可以参考w3cschool的 AJAX 教程中学到更多有关 AJAX 的知识。

 

5.1.2 关于 jQuery 与 AJAX

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

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

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

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

 

5.2 jQuery - AJAX load() 方法

5.2.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="p1">This is some text in a paragraph.</p>

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").load("/statics/demosource/demo_test.txt");
  });
});
</script>
</head>
<body>

<div id="div1"><h2>使用 jQuery AJAX</h2></div>
<button>获取外部内容</button>

</body>
</html>

　　结果

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").load("/statics/demosource/demo_test.txt #p1");
  });
});
</script>
</head>
<body>

<div id="div1"><h2>使用 jQuery AJAX 修改文本</h2></div>
<button>获取外部文本</button>

</body>
</html>

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

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").load("/statics/demosource/demo_test.txt",function(responseTxt,statusTxt,xhr){
      if(statusTxt=="success")
        alert("外部内容加载成功!");
      if(statusTxt=="error")
        alert("Error: "+xhr.status+": "+xhr.statusText);
    });
  });
});
</script>
</head>
<body>

<div id="div1"><h2>使用 jQuery AJAX 修改该文本</h2></div>
<button>获取外部内容</button>

</body>
</html>

　　结果

　　提示：在jQuery的load()方法中，无论AJAX请求是否成功，一旦请求完成（complete）后，回调函数（callback）立即被触发。

 

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

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

 

5.3.1 HTTP 请求：GET vs. POST

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

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

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

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

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

 

5.3.2 jQuery $.get() 方法

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

　　语法：

$.get(URL,callback);

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

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

　　下面的例子使用 $.get() 方法从服务器上的一个文件中取回数据：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>W3Cschool在线教程(w3cschool.cn)</title> 
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $.get("/statics/demosource/demo_test.php",function(data,status){
            alert("数据: " + data + "\n状态: " + status);
        });
    });
});
</script>
</head>
<body>

<button>发送一个 HTTP GET 请求并获取返回结果</button>

</body>
</html>

　　结果

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

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

　　提示： 这个 PHP 文件 ("demo_test.php") 类似这样：

<?php
 echo "This is some text from an external PHP file.";
 ?>

 

5.3.3 jQuery $.post() 方法

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

　　语法:

$.post(URL,data,callback);

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

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

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $.post("/statics/demosource/demo_test_post.php",
    {
      name:"W3Cschool",
      url:"http://www.w3cschool.cn"
    },
    function(data,status){
      alert("数据: " + data + "状态: " + status);
    });
  });
});
</script>
</head>
<body>

<button>发送一个 HTTP POST 请求页面并获取返回内容</button>

</body>
</html>

　　这里就不展示结果了，和get差不多

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

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

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

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

　　提示： 这个 PHP 文件 ("demo_test_post.php") 类似这样：

<?php
 $name = isset($_POST['name']) ? htmlspecialchars($_POST['name']) : '';
 $city = isset($_POST['city']) ? htmlspecialchars($_POST['city']) : '';
 echo 'Dear ' . $name;
 echo 'Hope you live well in ' . $city;
 ?>

 

6.参考手册　　

　　本次练习参考的是w3cschool，可以参考w3cschool的官方文档:

　　https://www.w3cschool.cn/jquery/jquery-examples.html

　　或者参考: http://jquery.yanzhihui.com/（如果网址失效百度搜索jQuery API  中文文档）

 

 

 

 

posted @ 2023-04-17 19:57  小家电维修  阅读(44)  评论(0)  编辑  收藏  举报