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 @   小家电维修  阅读(56)  评论(0)  编辑  收藏  举报
相关博文：
· Python学习之路-Python2-30天学习笔记
· javascript基础练习
· JQuery的一些函数
· jQuery 效果：
· jQuery - AJAX load() 方法
阅读排行：
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· 单线程的Redis速度为什么快？
· 展开说说关于C#中ORM框架的用法！
· Pantheons：用 TypeScript 打造主流大模型对话的一站式集成库
· SQL Server 2025 AI相关能力初探
点击右上角即可分享
微信分享提示
目 录 X

1.Jquery简单介绍

1.1 jquery简介

1.1.1 什么是 jQuery ？

1.1.2 为什么使用 jQuery ？

1.2 jQuery 安装

1.2.1 网页中添加 jQuery

1.2.2 替代方案

1.2.3 jQuery 使用版本

1.3 jQuery 语法

1.3.1 jQuery 语法

1.3.2 文档就绪事件

1.4 jQuery 选择器

1.4.1 元素选择器

1.4.2 #id 选择器

1.4.3 .class 选择器

1.4.4 CSS 选择器

1.4.5 更多实例

1.4.6 独立文件中使用 jQuery 函数

1.5 jQuery 事件

1.5.1 什么是事件？

1.5.2 jQuery 事件方法语法

1.5.3 常用的 jQuery 事件方法

1.6 比较keypress、keydown与keyup

2.jQuery 效果

2.1 jQuery 效果 – 隐藏和显示

2.1.1 jQuery hide() 和 show()

2.1.2 jQuery toggle()

2.2 jQuery 效果 – 淡入淡出

2.2.1 实例

2.2.2 jQuery Fading 方法

2.2.3 jQuery fadeIn() 方法

2.2.4 jQuery fadeOut() 方法

2.2.5 jQuery fadeToggle() 方法

2.2.6 jQuery fadeTo() 方法

2.3 jQuery 效果 - 滑动

2.3.1 实例

2.3.2 jQuery slideDown() 方法

2.3.3 jQuery slideUp() 方法

2.3.4 jQuery slideToggle() 方法

2.4 jQuery 效果 – 动画

2.4.1 jQuery 动画 - animate() 方法

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

2.4.3 jQuery animate() - 使用相对值

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

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

2.5 jQuery 效果 – 停止动画

2.5.1 jQuery stop() 方法

2.6 jQuery Callback 方法

2.6.1 jQuery 动画的问题

2.7 jQuery Chaining

2.7.1 jQuery 方法链接

3.jQuery HTML

3.1 jQuery 捕获

3.1.1 jQuery -获取内容和属性

3.1.2 jQuery DOM 操作

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

3.1.4 获取属性 - attr()

3.2 jQuery 设置

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

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

3.2.3 设置属性 - attr()

3.2.4 attr() 的回调函数

3.3 jQuery 添加元素

3.3.1 添加新的 HTML 内容

3.3.2 jQuery append() 方法

3.3.3 jQuery prepend() 方法

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

3.3.5 jQuery after() 和 before() 方法

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

3.4 jQuery 删除元素

3.4.1 删除元素/内容

3.4.2 jQuery empty() 方法

3.4.3 过滤被删除的元素

3.5 jQuery CSS 类

3.5.1 jQuery 操作 CSS

3.5.2 实例样式表

3.5.3 jQuery addClass() 方法

3.5.4 jQuery removeClass() 方法

3.5.5 jQuery toggleClass() 方法

3.6 jQuery css() 方法

3.6.1 返回 CSS 属性

3.6.2 设置 CSS 属性

3.6.3 设置多个 CSS 属性

3.7 jQuery 尺寸

3.7.1 jQuery 尺寸 方法

3.7.2 jQuery 尺寸

3.7.3 jQuery width() 和 height() 方法

3.7.4 jQuery innerWidth() 和 innerHeight() 方法

3.7.5 jQuery outerWidth() 和 outerHeight() 方法

4.jQuery 遍历

4.1 jQuery 遍历

4.1.1 什么是遍历？

4.1.2 遍历 DOM

4.2 jQuery 遍历 - 祖先

4.2.1 向上遍历 DOM 树

4.2.2 jQuery parent() 方法

4.2.3 jQuery parents() 方法

4.2.4 jQuery parentsUntil() 方法

4.3 jQuery 遍历 - 后代

4.3.1 向下遍历 DOM 树

4.3.2 jQuery children() 方法

4.3.3 jQuery find() 方法

4.4 jQuery 遍历 - 同胞(siblings)

4.4.1 在 DOM 树中水平遍历

4.4.2 jQuery siblings() 方法

4.4.3 jQuery next() 方法

4.4.4 jQuery nextAll() 方法

4.4.5 jQuery nextUntil() 方法

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

4.5 jQuery 遍历 - 过滤

4.5.1 缩小搜索元素的范围

4.5.2 jQuery first() 方法

4.5.3 jQuery last() 方法

4.5.4 jQuery eq() 方法

4.5.5 jQuery filter() 方法

4.5.6 jQuery not() 方法

5.jQuery AJAX

5.1 jQuery AJAX 简介

5.1.1 什么是 AJAX？

5.1.2 关于 jQuery 与 AJAX

5.2 jQuery - AJAX load() 方法

5.2.1 jQuery load() 方法

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

5.3.1 HTTP 请求：GET vs. POST

5.3.2 jQuery $.get() 方法

5.3.3 jQuery $.post() 方法

6.参考手册