JavaWeb学习总结（四）jQuery

理想条件

已于 2023-03-30 19:35:47 修改

阅读量362

点赞数

分类专栏： JavaWeb 文章标签： jquery javascript 学习

于 2023-03-18 21:11:30 首次发布

本文链接：https://blog.csdn.net/long3359/article/details/129642939

版权

JavaWeb 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

JavaWeb学习总结（四）jQuery

一、jQuery简介

（一）什么是jQuery

jQuery，顾名思义，也就是 JavaScript 和查询（Query），它就是辅助 JavaScript 开发的 js 类库。它是一个快速、简洁的JavaScript框架，是一个优秀的JavaScript代码库。

（二）核心思想

write less,do more(写得更少,做得更多)，它实现了很多浏览器的兼容问题。

（三）流行程度

jQuery 现在已经成为最流行的 JavaScript 库，在世界前 10000 个访问最多的网站中，有超过 55%在使用 jQuery。

（四）优点

jQuery 是免费、开源的，它封装了JavaScript常用的功能代码，使开发更加便捷，提供一种简便的JavaScript设计模式，优化HTML文档操作、选择 DOM 元素、事件处理、动画设计和Ajax交互

（五）jQuery初体验

首先在项目下新建一个script文件夹，从jQuery官网或maven仓库下载jQuery库并复制进script文件夹，再编写代码（使用 HTML 的 <script></script> 标签引用jQuery库）：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
	<!--引入jQuery库-->
	<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
	<script type="text/javascript">
		//JavaScript原生的单击事件
		// window.onload = function () {
		// 	var btnObj = document.getElementById("btnId");
		// 	// alert(btnObj);//[object HTMLButtonElement]   ====>>>  dom对象
		// 	btnObj.onclick = function () {
		// 		alert("hello,world");
		// 	}
		// }

		//jQuery的单击事件
		$(function () { // 表示页面加载完成 之后，相当 window.onload = function () {}
			var $btnObj = $("#btnId"); // 表示按id查询标签对象
			$btnObj.click(function () { // 绑定单击事件
				alert("hello,world");
			});
		});
	</script>

</head>
<body>
	<button id="btnId">SayHello</button>
</body>
</html>

在这里插入图片描述
常见问题

使用 jQuery 一定要引入 jQuery 库吗？答案：是，必须
jQuery 中的$到底是什么？答案：它是一个函数
怎么为按钮添加点击响应函数的？答案： 1、使用 jQuery 查询到标签对象 2、使用标签对象.click(function(){});

二、jQuery核心函数

$ 是 jQuery 的核心函数，能完成 jQuery 的很多功能。$()表示调用$这个函数

$()传入参数为函数时：表示页面加载完成之后执行函数。相当于 window.onload = function(){}
$()传入参数为HTML 字符串时：会为我们创建这个 HTML 标签对象，例如$("<div><span>div-span</span></div>")，比原生JavaScript创建HTML标签对象的方式要简便。
$()传入参数为选择器字符串时：
- $("#id 属性值"); id 选择器，根据 id 查询标签对象，相当于document.getElementById()
- $("标签名"); 标签名选择器，根据指定的标签名查询标签对象，相当于document.getElementByTagName()
- $(".class 属性值"); 类型选择器，可以根据 class 属性查询标签对象
$()传入参数为DOM 对象时：会把这个 dom 对象转换为 jQuery 对象

三、DOM对象和 jQuery对象

（一）什么是Dom 对象，什么是 jQuery 对象

1.DOM对象

通过 getElementById()查询出来的标签对象是 Dom 对象
通过 getElementsByName()查询出来的标签对象是 Dom 对象
通过 getElementsByTagName()查询出来的标签对象是 Dom 对象
通过 createElement() 方法创建的对象，是 Dom 对象

DOM 对象 alert 出来的效果是：[object HTML 标签名 Element]

2.jQuery对象

通过 jQuery 提供的 API 创建的对象，是 jQuery 对象
通过 jQuery 包装的 Dom 对象，是 jQuery 对象
通过 jQuery 提供的 API 查询到的对象，是 jQuery 对象

jQuery 对象 alert 出来的效果是：[object Object]

jQuery对象的本质是：DOM对象的数组+jQuery 提供的一系列功能函数

注意：jQuery 对象不能使用 DOM 对象的属性和方法，DOM 对象也不能使用 jQuery 对象的属性和方法

（二）DOM对象和 jQuery对象的互相转换

DOM 对象转化为 jQuery 对象
1. 先有 DOM 对象
2. $( DOM 对象 ) 就可以转换成为 jQuery 对象
jQuery 对象转为 DOM 对象
1. 先有 jQuery 对象
2. 根据jQuery对象[指定的下标值]取出相应的 DOM 对象

在这里插入图片描述

四、jQuery语法

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

选择器（selector）“查找” HTML 元素（后面讲）
jQuery 的 action() 执行对元素的操作（后面讲）

文档就绪事件：

$(document).ready(function(){
	//  jQuery 代码...
});
//等价于原生JavaScript中的：
//window.onload = function () {
//}

为了在文档完全加载（就绪）之后才运行 jQuery 代码，因为文档加载完成后才可以对 DOM对象进行操作。

如果在文档没有完全加载之前就对DOM对象执行操作，操作可能失败。

也可以简化写成：

$(function(){ 
	// jQuery 代码...  
});

五、jQuery选择器

（一）基本选择器

1.#id

（1）概述

id 选择器，根据给定的ID匹配一个元素。

如果选择器中包含特殊字符，可以用两个斜杠转义。参见示例。

（2）示例

查找 ID 为"myDiv"的元素。

HTML 代码:

<div id="notMe"><p>id="notMe"</p></div>
<div id="myDiv">id="myDiv"</div>

jQuery 代码:

$("#myDiv");

结果:

[ <div id="myDiv">id="myDiv"</div> ]

查找含有特殊字符的元素

HTML 代码:

<span id="foo:bar"></span>
<span id="foo[bar]"></span>
<span id="foo.bar"></span>

jQuery 代码:

$("#foo\\:bar")
$("#foo\\[bar\\]")
$("#foo\\.bar")

2.element

（1）概述

根据给定的元素匹配所有元素（标签名选择器）

（2）示例

查找一个 DIV 元素。

HTML 代码:

<div>DIV1</div>
<div>DIV2</div>
<span>SPAN</span>

jQuery 代码:

$("div");

结果:

[ <div>DIV1</div>, <div>DIV2</div> ]

3.class

（1）概述

类选择器，根据给定的class匹配元素。
一个元素可以有多个class，只要有一个符合就能被匹配到。

（2）示例

查找所有类是 “myClass” 的元素.

HTML 代码:

<div class="notMe">div class="notMe"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>

jQuery 代码:

$(".myClass");

结果:

[ <div class="myClass">div class="myClass"</div>, <span class="myClass">span class="myClass"</span> ]

4.*

（1）概述

匹配所有元素
多用于结合上下文来搜索。

（2）示例

找到每一个元素

HTML 代码:

<div>DIV</div>
<span>SPAN</span>
<p>P</p>

jQuery 代码:

$("*")

结果:

[ <div>DIV</div>, <span>SPAN</span>, <p>P</p> ]

5.组合选择器

（1）概述

将每一个选择器匹配到的元素合并后一起返回。

你可以指定任意多个选择器，并将匹配到的元素合并到一个结果内。

（2）示例

HTML 代码:

<div>div</div>
<p class="myClass">p class="myClass"</p>
<span>span</span>
<p class="notMyClass">p class="notMyClass"</p>

jQuery 代码:

$("div,span,p.myClass")//p.myClass表示标签名必须是 p 标签，而且 class 类型还要是 myClass

结果:

[ <div>div</div>, <p class="myClass">p class="myClass"</p>, <span>span</span> ]

（二）层级选择器

1.ancestor descendant

（1）概述

在给定的祖先元素下匹配所有的后代元素

（2）示例

找到form表单中所有的 input 元素

HTML 代码:

<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

jQuery 代码:

$("form input")

结果:

[ <input name="name" />, <input name="newsletter" /> ]

2.parent > child

（1）概述

在给定的父元素下匹配所有的子元素

（2）示例

匹配form表单中所有的子级input元素。

HTML 代码:

<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

jQuery 代码:

$("form > input")

结果:

[ <input name="name" /> ]

3.prev + next

（1）概述

匹配所有紧接在 prev 元素后的 next 元素

（2）示例

匹配所有跟在 label 后面的 input 元素

HTML 代码:

<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />

jQuery 代码:

$("label + input")

结果:

[ <input name="name" />, <input name="newsletter" /> ]

4.prev ~ siblings

（1）概述

匹配 prev 元素之后的所有 siblings 元素（同辈）

（2）示例

找到所有与表单同辈的 input 元素

HTML 代码:

<form>
  <label>Name:</label>
  <input name="name" />
  <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
 </fieldset>
</form>
<input name="none" />
<input name="abc" />

jQuery 代码:

$("form ~ input")

结果:

[ <input name="none" />,<input name="abc" /> ]

（三）过滤选择器

1.基本过滤器

（1）:first

①概述

获取第一个元素

②示例

获取列表中的第一个元素

HTML 代码:

<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>

jQuery 代码:

$('li:first');

结果:

[ <li>list item 1</li> ]

（2）:last

①概述

获取最后一个元素

②示例

获取列表中最后一个元素

HTML 代码:

<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>

jQuery 代码:

$('li:last')

结果:

[ <li>list item 5</li> ]

（3）:not(selector)

①概述

去除所有与给定选择器匹配的元素

②示例

查找所有未选中的 input 元素

HTML 代码:

<input name="apple" />
<input name="flower" checked="checked" />

jQuery 代码:

$("input:not(:checked)")//:checked是表单对象属性过滤器

结果:

[ <input name="apple" /> ]

（4）:even

①概述

匹配所有索引值为偶数的元素，从 0 开始计数

②示例

查找表格的1、3、5…行（即索引值0、2、4…）

HTML 代码:

<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

jQuery 代码:

$("tr:even")

结果:

[ <tr><td>Header 1</td></tr>, <tr><td>Value 2</td></tr> ]

（5）:odd

①概述

匹配所有索引值为奇数的元素，从 0 开始计数

②示例

查找表格的2、4、6行（即索引值1、3、5…）

HTML 代码:

<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

jQuery 代码:

$("tr:odd")

结果:

[ <tr><td>Value 1</td></tr> ]

（6）:eq(index)

①概述

匹配一个给定索引值的元素，从 0 开始计数

②示例

查找第二行

HTML 代码:

<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

jQuery 代码:

$("tr:eq(1)")

结果:

[ <tr><td>Value 1</td></tr> ]

（7）:gt(index)

①概述

匹配所有大于给定索引值的元素，从0 开始计数

②示例

查找第2第3行，即索引值是1和2，也就是比0大

HTML 代码:

<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

jQuery 代码:

$("tr:gt(0)")

结果:

[ <tr><td>Value 1</td></tr>, <tr><td>Value 2</td></tr> ]

（8）:lt(index)

①概述

匹配所有小于给定索引值的元素，从 0 开始计数

②示例

查找第1第2行，即索引值是0和1，也就是比2小

HTML 代码:

<table>
  <tr><td>Header 1</td></tr>
  <tr><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

jQuery 代码:

$("tr:lt(2)")

结果:

[ <tr><td>Header 1</td></tr>, <tr><td>Value 1</td></tr> ]

（9）:header

①概述

匹配如 h1, h2, h3之类的标题元素

②示例

给页面内所有标题加上背景色

HTML 代码:

<h1>Header 1</h1>
<p>Contents 1</p>
<h2>Header 2</h2>
<p>Contents 2</p>

jQuery 代码:

$(":header").css("background", "#EEE");//css() 方法可以设置或获取样式

结果:

[ <h1 style="background:#EEE;">Header 1</h1>, <h2 style="background:#EEE;">Header 2</h2> ]

（10）:animated

①概述

匹配所有正在执行动画效果的元素

②示例

对不在执行动画效果的元素执行一个动画特效

HTML 代码:

<button id="run">Run</button><div></div>

jQuery 代码:

$("#run").click(function(){//单击事件
  $("div:not(:animated)").animate({ left: "+=20" }, 1000);
});

2.内容过滤器

（1）:contains(text)

①概述

匹配包含给定文本的元素

②示例

查找所有包含 “John” 的 div 元素

HTML 代码:

<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn

jQuery 代码:

$("div:contains('John')")

结果:

[ <div>John Resig</div>, <div>Malcom John Sinclair</div> ]

（2）:empty

①概述

匹配所有不包含子元素或者文本的空元素

②示例

查找所有不包含子元素或者文本的空元素

HTML 代码:

<table>
  <tr><td>Value 1</td><td></td></tr>
  <tr><td>Value 2</td><td></td></tr>
</table>

jQuery 代码:

$("td:empty")

结果:

[ <td></td>, <td></td> ]

（3）:has(selector)

①概述

匹配含有选择器所匹配的元素的元素

②示例

给所有包含 p 元素的 div 元素添加一个 class=“test”

HTML 代码:

<div><p>Hello</p></div>
<div>Hello again!</div>

jQuery 代码:

$("div:has(p)").addClass("test");//addClass()给指定元素添加class属性

结果:

[ <div class="test"><p>Hello</p></div> ]

（4）:parent

①概述

匹配含有子元素或者文本的元素

②示例

查找所有含有子元素或者文本的 td 元素

HTML 代码:

<table>
  <tr><td>Value 1</td><td></td></tr>
  <tr><td>Value 2</td><td></td></tr>
</table>

jQuery 代码:

$("td:parent")

结果:

[ <td>Value 1</td>, <td>Value 2</td> ]

3.属性过滤器

（1）[attribute]

①概述

匹配包含给定属性的元素。

②示例

查找所有含有 id 属性的 div 元素

HTML 代码:

<div>
  <p>Hello!</p>
</div>
<div id="test2"></div>

jQuery 代码:

$("div[id]")

结果:

[ <div id="test2"></div> ]

（2）[attribute=value]

①概述

匹配给定的属性是某个特定值的元素
引号在大多数情况下是可选的。在遇到诸如属性值包含"]"时，用引号以避免冲突。

②示例

查找所有 name 属性是 newsletter 的 input 元素

HTML 代码:

<input type="checkbox" name="newsletter" value="Hot Fuzz" />
<input type="checkbox" name="newsletter" value="Cold Fusion" />
<input type="checkbox" name="accept" value="Evil Plans" />

jQuery 代码:

$("input[name='newsletter']")

结果:

[ <input type="checkbox" name="newsletter" value="Hot Fuzz" />, <input type="checkbox" name="newsletter" value="Cold Fusion" /> ]

（3）[attribute!=value]

①概述

匹配所有不含有指定的属性，或者属性不等于特定值的元素。

此选择器等价于:not([attribute=value])
要匹配含有特定属性但不等于特定值的元素，请使用[attribute]:not([attribute=value])

引号在大多数情况下是可选的。在遇到诸如属性值包含"]"时，用引号以避免冲突。

②示例

查找所有 name 属性不是 newsletter 的 input 元素

HTML 代码:

<input type="checkbox" name="newsletter" value="Hot Fuzz" />
<input type="checkbox" name="newsletter" value="Cold Fusion" />
<input type="checkbox" name="accept" value="Evil Plans" />

jQuery 代码:

$("input[name!='newsletter']")

结果:

[ <input type="checkbox" name="accept" value="Evil Plans" /> ]

（4）[attribute^=value]

①概述

匹配给定的属性是以某些值开始的元素

引号在大多数情况下是可选的。在遇到诸如属性值包含"]"时，用引号以避免冲突。

②示例

查找所有 name 以 ‘news’ 开始的 input 元素

HTML 代码:

<input name="newsletter" />
<input name="milkman" />
<input name="newsboy" />

jQuery 代码:

$("input[name^='news']")

结果:

[ <input name="newsletter" />, <input name="newsboy" /> ]

（5）[attribute$=value]

①概述

匹配给定的属性是以某些值结尾的元素
引号在大多数情况下是可选的。在遇到诸如属性值包含"]"时，用引号以避免冲突。

②示例

查找所有 name 以 ‘letter’ 结尾的 input 元素

HTML 代码:

<input name="newsletter" />
<input name="milkman" />
<input name="jobletter" />

jQuery 代码:

$("input[name$='letter']")

结果:

[ <input name="newsletter" />, <input name="jobletter" /> ]

（6）[attribute*=value]

①概述

匹配给定的属性是以包含某些值的元素

引号在大多数情况下是可选的。在遇到诸如属性值包含"]"时，用引号以避免冲突。

②示例

查找所有 name 包含 ‘man’ 的 input 元素

HTML 代码:

<input name="man-news" />
<input name="milkman" />
<input name="letterman2" />
<input name="newmilk" />

jQuery 代码:

$("input[name*='man']")

结果:

[ <input name="man-news" />, <input name="milkman" />, <input name="letterman2" /> ]

（7）复合属性选择器

①概述

需要同时满足多个条件时使用。

②示例

找到所有含有 id 属性，并且它的 name 属性是以 ‘man’ 结尾的

HTML 代码:

<input id="man-news" name="man-news" />
<input name="milkman" />
<input id="letterman" name="new-letterman" />
<input name="newmilk" />

jQuery 代码:

$("input[id][name$='man']")

结果:

[ <input id="letterman" name="new-letterman" /> ]

4.表单过滤器

（1）:input

①概述

匹配所有表单元素

②示例

查找所有的input元素，下面这些元素都会被匹配到。

HTML 代码:

<form>
    <input type="button" value="Input Button"/>
    <input type="checkbox" />
    <input type="file" />
    <input type="hidden" />
    <input type="image" />
    <input type="password" />
    <input type="radio" />
    <input type="reset" />
    <input type="submit" />
    <input type="text" />
    <select><option>Option</option></select>
    <textarea></textarea>
    <button>Button</button>
</form>

jQuery 代码:

$(":input")

结果:

[ 
    <input type="button" value="Input Button"/>,
    <input type="checkbox" />,
    <input type="file" />,
    <input type="hidden" />,
    <input type="image" />,
    <input type="password" />,
    <input type="radio" />,
    <input type="reset" />,
    <input type="submit" />,
    <input type="text" />,
    <select><option>Option</option></select>,
    <textarea></textarea>,
    <button>Button</button>,
 ]

（2）:text

①概述

匹配所有的单行文本框

②示例

查找所有文本框

HTML 代码:

<form>
  <input type="text" />
  <input type="checkbox" />
  <input type="radio" />
  <input type="password" />
  <textarea></textarea>
</form>

jQuery 代码:

$(":text")

结果:

[ <input type="text" /> ]

（3）:password

匹配所有密码框

（4）:radio

匹配所有单选按钮

（5）:checkbox

匹配所有复选框

（6）:submit

匹配所有提交按钮

（7）:image

匹配所有图像域

（8）:reset

匹配所有重置按钮

（9）:button

匹配所有按钮

（10）:file

匹配所有文件域

（11）:hidden

①概述

匹配所有不可见元素，或者type为hidden的元素

②示例

查找隐藏的 tr

HTML 代码:

<table>
  <tr style="display:none"><td>Value 1</td></tr>
  <tr><td>Value 2</td></tr>
</table>

jQuery 代码:

$("tr:hidden")

结果:

[ <tr style="display:none"><td>Value 1</td></tr> ]

匹配type为hidden的元素

HTML 代码:

<form>
  <input type="text" name="email" />
  <input type="hidden" name="id" />
</form>

jQuery 代码:

$("input:hidden")

结果:

[ <input type="hidden" name="id" /> ]

5.表单对象属性过滤器

（1）:enabled

①概述

匹配所有可用元素

②示例

查找所有可用的input元素

HTML 代码:

<form>
  <input name="email" disabled="disabled" />
  <input name="id" />
</form>

jQuery 代码:

$("input:enabled")

结果:

[ <input name="id" /> ]

（2）:disabled

①概述

匹配所有不可用元素

②示例

查找所有不可用的input元素

HTML 代码:

<form>
  <input name="email" disabled="disabled" />
  <input name="id" />
</form>

jQuery 代码:

$("input:disabled")

结果:

[ <input name="email" disabled="disabled" /> ]

（3）:checked

①概述

匹配所有选中的被选中元素(复选框、单选框等，不包括下拉框)

②示例

查找所有选中的复选框元素

HTML 代码:

<form>
  <input type="checkbox" name="newsletter" checked="checked" value="Daily" />
  <input type="checkbox" name="newsletter" value="Weekly" />
  <input type="checkbox" name="newsletter" checked="checked" value="Monthly" />
</form>

jQuery 代码:

$("input:checked")

结果:

[ <input type="checkbox" name="newsletter" checked="checked" value="Daily" />, <input type="checkbox" name="newsletter" checked="checked" value="Monthly" /> ]

（4）:selected

①概述

匹配所有选中的option元素

②示例

查找所有选中的选项元素

HTML 代码:

<select>
  <option value="1">Flowers</option>
  <option value="2" selected="selected">Gardens</option>
  <option value="3">Trees</option>
</select>

jQuery 代码:

$("select option:selected")

结果:

[ <option value="2" selected="selected">Gardens</option> ]

六、jQuery元素筛选

（一）eq(index|-index)

1.概述

获取第N个元素

2.参数

index一个整数，指示元素基于0的位置,这个元素的位置是从0算起。

-index一个整数，指示元素的位置，从集合中的最后一个元素开始倒数，从-1算起。

3.示例

获取匹配的第二个元素

HTML 代码:

<p> This is just a test.</p> <p> So is this</p>

jQuery 代码:

$("p").eq(1)

结果:

[ <p> So is this</p> ]

获取匹配的第二个元素

HTML 代码:

<p> This is just a test.</p> <p> So is this</p>

jQuery 代码:

$("p").eq(-2)

结果:

[ <p> This is just a test.</p> ]

（二）first()

1.概述

获取第一个元素，相当于:first

2.示例

获取匹配的第一个元素

HTML 代码:

<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>

jQuery 代码:

$('li').first()

结果:

[ <li>list item 1</li> ]

（三）last()

1.概述

获取最后一个元素，相当于:last

2.示例

获取匹配的最后一个元素

HTML 代码:

<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>

jQuery 代码:

$('li').last()

结果:

[ <li>list item 5</li> ]

（四）filter(exp|obj|ele|fn)

1.概述

筛选出与指定表达式匹配的元素集合。

这个方法用于缩小匹配的范围。用逗号分隔多个表达式

2.参数

filter的参数可以放选择器或jQuery对象或DOM元素或函数

exp字符串值，包含供匹配当前元素集合的选择器表达式。
obj现有的jQuery对象，以匹配当前的元素。
ele一个用于匹配元素的DOM元素。
fn一个函数用来作为测试元素的集合。它接受一个参数index，这是元素在jQuery集合的索引。在函数中， this指的是当前的DOM元素。

3.示例

保留第一个以及带有select类的元素

HTML 代码:

<p>Hello</p><p>Hello Again</p><p class="selected">And Again</p>

jQuery 代码:

$("p").filter(".selected, :first")

结果:

[ <p>Hello</p>, <p class="selected">And Again</p> ]

保留子元素中不含有ol的元素

HTML 代码:

<p><ol><li>Hello</li></ol></p><p>How are you?</p>

jQuery 代码:

$("p").filter(function(index) {
  return $("ol", this).length == 0;
});

结果:

[ <p>How are you?</p> ]

（五）is(exp|obj|ele|fn)

1.概述

根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。如果没有元素符合，或者表达式无效，都返回false。
注意：在先前版本中，如果提供了复杂的表达式，比如层级选择器（比如 + , ~ 和 > ），始终会返回true

2.参数

is的参数可以放选择器或jQuery对象或DOM元素或函数

exp字符串值，包含供匹配当前元素集合的选择器表达式。
obj现有的jQuery对象，以匹配当前的元素。
ele一个用于匹配元素的DOM元素。
fn一个函数用来作为测试元素的集合。它接受一个参数index，这是元素在jQuery集合的索引。在函数中， this指的是当前的DOM元素。

3.示例

判断input元素的父元素是否是一个表单元素

HTML 代码:

<form><input type="checkbox" /></form>

jQuery 代码:

$("input[type='checkbox']").parent().is("form")

结果:

true

（六）has(exp|ele)

1.概述

保留包含特定后代的元素，去掉那些不含有指定后代的元素。

.has()方法将会从给定的jQuery对象中重新创建一组匹配的对象。提供的选择器会一一测试原先那些对象的后代，含有匹配后代的对象将得以保留。

2.参数

has的参数可以放选择器或DOM元素

exp字符串值，包含供匹配当前元素集合的选择器表达式。
ele一个用于匹配元素的DOM元素。

3.示例

给含有ul的li加上背景色

HTML 代码:

<ul>
  <li>list item 1</li>
  <li>list item 2
    <ul>
      <li>list item 2-a</li>
      <li>list item 2-b</li>
    </ul>
  </li>
  <li>list item 3</li>
  <li>list item 4</li>
</ul>

jQuery 代码:

$('li').has('ul').css('background-color', 'red');

（七）not(exp|ele|fn)

1.概述

删除与指定表达式匹配的元素

2.参数

not的参数可以放选择器或DOM元素或函数

exp字符串值，包含供匹配当前元素集合的选择器表达式。
ele一个用于匹配元素的DOM元素。
fn一个函数用来作为测试元素的集合。在函数中， this指的是当前的DOM元素。

3.示例

从p元素中删除带有 select 的ID的元素

HTML 代码:

<p>Hello</p><p id="selected">Hello Again</p>

jQuery 代码:

$("p").not( $("#selected")[0] )

结果:

[ <p>Hello</p> ]

（八）children()

1.概述

返回匹配给定选择器的子元素功能跟 parent>child 一样

注意：children()只考虑子元素而不考虑所有后代元素。

2.示例

查找DIV中的每个子元素

HTML 代码:

<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>

jQuery 代码:

$("div").children()

结果:

[ <span>Hello Again</span> ]

在div中查找class=selected 的子元素

HTML 代码:

<div><span>Hello</span><p class="selected">Hello Again</p><p>And Again</p></div>

jQuery 代码:

$("div").children(".selected")

结果:

[ <p class="selected">Hello Again</p> ]

（九）find(exp|obj|ele)

1.概述

返回匹配给定选择器的后代元素功能跟 ancestor descendant 一样

2.参数

find的参数可以放选择器或jQuery对象或DOM元素或函数

exp字符串值，包含供匹配当前元素集合的选择器表达式。
obj现有的jQuery对象，以匹配当前的元素。
ele一个用于匹配元素的DOM元素。

3.示例

从所有的段落开始，进一步搜索下面的span元素。与`$("p span")`相同。

HTML 代码:

<p><span>Hello</span>, how are you?</p>

jQuery 代码:

$("p").find("span")

结果:

[ <span>Hello</span> ]

（十）next()

1.概述

返回当前元素的下一个（同辈）兄弟元素功能跟 prev + next 功能一样

这个函数只返回后面那个紧邻的同辈元素，而不是后面所有的同辈元素（所有的同辈元素可以使用nextAll()）。

2.示例

找到每个段落的后面紧邻的同辈元素

HTML 代码:

<p>Hello</p><p>Hello Again</p><div><span>And Again</span></div>

jQuery 代码:

$("p").next()

结果:

[ <p>Hello Again</p>, <div><span>And Again</span></div> ]

找到每个段落的后面紧邻的同辈元素中class为selected的元素

HTML 代码:

<p>Hello</p><p class="selected">Hello Again</p><div><span>And Again</span></div>

jQuery 代码:

$("p").next(".selected")

结果:

[ <p class="selected">Hello Again</p> ]

（十一）nextAll()

1.概述

返回当前元素后面所有的（同辈）兄弟元素功能跟 prev ~ siblings 一样

2.示例

给第一个div之后的所有元素加个类

HTML 代码:

<div></div><div></div><div></div><div></div>

jQuery 代码:

$("div:first").nextAll().addClass("after");

结果:

[ <div class="after"></div>, <div class="after"></div>, <div class="after"></div> ]

（十二）nextUntil([exp|ele][,fil])

1.概述

返回当前元素到指定匹配的元素为止的后面元素

如果提供的jQuery代表了一组DOM元素，.nextUntil()方法也能让我们找遍所有元素所在的DOM树，直到遇到了一个跟提供的参数匹配的元素的时候才会停下来。这个新jQuery对象里包含了下面所有找到的同辈元素，但不包括那个选择器匹配到的元素。

如果没有选择器匹配到，或者没有提供参数，那么跟在后面的所有同辈元素都会被选中。这就跟用没有提供参数的 .nextAll()效果一样。

2.参数

[exp][,filter] exp: 用于筛选祖先元素的表达式。
filter: 一个字符串，其中包含一个选择表达式匹配元素。
[ele][,filter] 用于筛选祖先元素的DOM元素。
filter: 一个字符串，其中包含一个选择表达式匹配元素。

3.示例

给#term-2后面直到dt前的元素加上红色背景

HTML 代码:

<dl>
  <dt>term 1</dt>
  <dd>definition 1-a</dd>
  <dd>definition 1-b</dd>
  <dd>definition 1-c</dd>
  <dd>definition 1-d</dd>

  <dt id="term-2">term 2</dt>
  <dd>definition 2-a</dd>
  <dd>definition 2-b</dd>
  <dd>definition 2-c</dd>

  <dt>term 3</dt>
  <dd>definition 3-a</dd>
  <dd>definition 3-b</dd>
</dl>

jQuery 代码:

//方式一
$('#term-2').nextUntil('dt').css('background-color', 'red');   
//方式二 
var term3 = document.getElementById('term-3');
$('#term-1').nextUntil(term3,'dd').css('color', 'green');

（十三）parent()

1.概述

返回父元素

2.示例

查找每个段落的父元素

HTML 代码:

<div><p>Hello</p><p>Hello</p></div>

jQuery 代码:

$("p").parent()

结果:

[ <div><p>Hello</p><p>Hello</p></div>]

查找段落的父元素中每个class为selected的父元素

HTML 代码:

<div><p>Hello</p></div><div class="selected"><p>Hello Again</p></div>

jQuery 代码:

$("p").parent(".selected")

结果:

[ <div class="selected"><p>Hello Again</p></div> ]

（十四）prev()

1.概述

返回当前元素的上一个兄弟元素
可以用一个可选的表达式进行筛选。只有紧邻的同辈元素会被匹配到，而不是前面所有的同辈元素。

2.示例

找到每个段落紧邻的前一个同辈元素

HTML 代码:

<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>

jQuery 代码:

$("p").prev()

结果:

[ <div><span>Hello Again</span></div> ]

找到每个段落紧邻的前一个同辈元素中类名为selected的元素

HTML 代码:

<div><span>Hello</span></div><p class="selected">Hello Again</p><p>And Again</p>

jQuery 代码:

$("p").prev(".selected")

结果:

[ <p class="selected">Hello Again</p> ]

（十五）prevAll()

1.概述

返回当前元素前面所有的兄弟元素
可以用表达式过滤。

2.示例

给最后一个之前的所有div加上一个类

HTML 代码:

<div></div><div></div><div></div><div></div>

jQuery 代码:

$("div:last").prevAll().addClass("before");

结果:

[ <div class="before"></div>, <div class="before"></div>, <div class="before"></div> ]

（十六）prevUntil([exp|ele][,fil])

1.概述

返回当前元素到指定匹配的元素为止的前面元素

如果提供的jQuery代表了一组DOM元素，.prevUntil()方法也能让我们找遍所有元素所在的DOM树，直到遇到了一个跟提供的参数匹配的元素的时候才会停下来。

如果没有选择器匹配到，或者没有提供参数，那么排在前面的所有同辈元素都会被选中。这就跟用没有提供参数的 .prevAll()效果一样。

2.参数

[expr][,filter] String,StringV1.4expr: 用于筛选祖先元素的表达式
filter: 一个字符串，其中包含一个选择表达式匹配元素。
[element][,filter] DOMElement,StringV1.6element:用于筛选祖先元素的DOM元素
filter: 一个字符串，其中包含一个选择表达式匹配元素。

3.示例

给#term-2前面直到dt前的元素加上红色背景

HTML 代码:

<dl>
  <dt>term 1</dt>
  <dd>definition 1-a</dd>
  <dd>definition 1-b</dd>
  <dd>definition 1-c</dd>
  <dd>definition 1-d</dd>

  <dt id="term-2">term 2</dt>
  <dd>definition 2-a</dd>
  <dd>definition 2-b</dd>
  <dd>definition 2-c</dd>

  <dt>term 3</dt>
  <dd>definition 3-a</dd>
  <dd>definition 3-b</dd>
</dl>

jQuery 代码:

$('#term-2').prevUntil('dt').css('background-color', 'red');

（十七）siblings(exp)

1.概述

返回所有兄弟元素

2.示例

找到每个div的所有同辈元素

HTML 代码:

<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>

jQuery 代码:

$("div").siblings()

结果:

[ <p>Hello</p>, <p>And Again</p> ]

找到每个div的所有同辈元素中带有类名为selected的元素

HTML 代码:

<div><span>Hello</span></div><p class="selected">Hello Again</p><p>And Again</p>

jQuery 代码:

$("div").siblings(".selected")

结果:

[ <p class="selected">Hello Again</p> ]

（十八）add(expr|ele|html|obj[,con])

1.概述

把 add 匹配的选择器的元素添加到当前 jQuery 对象中
这个函数可以用于连接分别与两个表达式匹配的元素结果集。

2.参数

exp一个用于匹配元素的选择器字符串。
ele DOM元素。
html 片段添加到匹配的元素。
obj一个jqeruy对象增加到匹配的元素
con 作为待查找的 DOM 元素集、文档或 jQuery 对象。

3.示例

查询所有p和span

HTML 代码:

<p>Hello</p><span>Hello Again</span><div><div>

jQuery 代码:

$("p").add("span")

结果:

[ <p>Hello</p>, <span>Hello Again</span> ]

动态生成一个元素并加至匹配的元素中

HTML 代码:

<p>Hello</p>

jQuery 代码:

$("p").add("<span>Again</span>")

结果:

[ <p>Hello</p>, <span>Hello Again</span> ]

为匹配的元素加上一个或者多个元素

HTML 代码:

<p>Hello</p><p><span id="a">Hello Again</span></p>

jQuery 代码:

$("p").add(document.getElementById("a"))

结果:

[ <p>Hello</p>, <p><span id="a">Hello Again</span></p>, <span id="a">Hello Again</span> ]

七、jQuery的属性操作

（一）html([val|fn])

1.概述

它可以设置和获取起始标签和结束标签中的内容。跟 dom 属性 innerHTML 一样。

在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容。如果选择器匹配多于一个的元素，那么只有第一个匹配元素的 HTML 内容会被获取。

2.参数

val用于设定HTML内容的值
fn 此函数返回一个HTML字符串。可以接受两个参数，index为元素在集合中的索引位置，html为原先的HTML值。

3.示例

返回p元素的内容

jQuery 代码:

$('p').html();

设置所有 p 元素的内容

jQuery 代码:

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

使用函数来设置所有匹配元素的内容

HTML代码：

<p>Hello</p>
<p>world</p>

jQuery 代码:

$("p").html(function(n){
    return "这个 p 元素的 index 是：" + n;
});

结果：
在这里插入图片描述

（二）text([val|fn])

1.概述

它可以设置和获取起始标签和结束标签中的文本。跟 dom 属性 innerText 一样。

2.参数

val 用于设置元素内容的文本
fn 此函数返回一个字符串。可以接受两个参数，index为元素在集合中的索引位置，text为原先的text值。

3.示例

返回p元素的文本内容

jQuery 代码:

$("p").text();

设置所有 p 元素的文本内容

jQuery 代码:

$("p").text("Hello world!");

使用函数来设置所有匹配元素的文本内容

jQuery 代码:

$("p").text(function(n){
    return "这个 p 元素的 index 是：" + n;
});

（三）val([val|fn|arr])

1.概述

它可以设置和获取表单项的 value 属性值。跟 dom 属性 value 一样

2.参数

val要设置的值。
fn 此函数返回一个要设置的值。可以接受两个参数，index为元素在集合中的索引位置，text为原先的text值。
arr用于设置多个表单项的选中状态（check/select ）的值

3.示例

获取文本框中的值

jQuery 代码:

$("input").val();

设定文本框的值

jQuery 代码:

$("input").val("hello world!");

设定文本框的值

jQuery 代码:

$('input:text.items').val(function() {
  return this.value + ' ' + this.className;
});

设置多个表单项的选中状态

<!DOCTYPE html> 
<html lang="zh_CN"> 
<head> 
	<meta charset="UTF-8"> 
	<title>Title</title>
	<script type="text/javascript" src="script/jquery-1.7.2.js"></script> 
	<script type="text/javascript"> 
		$(function () { 
		/* // 批量操作单选 $(":radio").val(["radio2"]); 
		// 批量操作筛选框的选中状态 $(":checkbox").val(["checkbox3","checkbox2"]); 
		// 批量操作多选的下拉框选中状态 $("#multiple").val(["mul2","mul3","mul4"]); 
		// 操作单选的下拉框选中状态 $("#single").val(["sin2"]); 		
		*/
		$("#multiple,#single,:radio,:checkbox").val(["radio2","checkbox1","checkbox3","mul1","mul4","sin3"] ); 
		}); 
	</script> 
</head> 
<body> 
	 单选： 
	 <input name="radio" type="radio" value="radio1" />radio1 
	 <input name="radio" type="radio" value="radio2" />radio2 
	 <br/> 
	 多选：
	 <input name="checkbox" type="checkbox" value="checkbox1" />checkbox1 
	 <input name="checkbox" type="checkbox" value="checkbox2" />checkbox2 
	 <input name="checkbox" type="checkbox" value="checkbox3" />checkbox3 
	 <br/> 
	 下拉多选 ： 
	 <select id="multiple" multiple="multiple" size="4"> 
		 <option value="mul1">mul1</option> 
		 <option value="mul2">mul2</option> 
		 <option value="mul3">mul3</option> 
		 <option value="mul4">mul4</option> 
	 </select> 
	 <br/> 
	 下拉单选 ： 
	 <select id="single"> 
		 <option value="sin1">sin1</option> 
		 <option value="sin2">sin2</option> 
		 <option value="sin3">sin3</option> 
	 </select> 
 </body>
</html>

在这里插入图片描述

（四）attr(name|properties|key,value|fn)

1.概述

可以设置和获取属性的值，不推荐操作 checked、readOnly、selected、disabled 等属性（例如是unchecked，attr会返回undefined，这不是我们想要的值）

attr 方法还可以操作非标准的属性。比如自定义属性：abc

2.参数

name 属性名称
properties 作为属性的“名/值对”对象
key,value 属性名称，属性值
key,function(index, attr)
1.属性名称。
2.返回属性值的函数,第一个参数为当前元素的索引值，第二个参数为原先的属性值。

3.示例

返回文档中所有图像的src属性值

jQuery 代码:

$("img").attr("src");

为所有图像设置src和alt属性

jQuery 代码:

$("img").attr({ src: "test.jpg", alt: "Test Image" });

为所有图像设置src属性

jQuery 代码:

$("img").attr("src","test.jpg");

把src属性的值设置为title属性的值

jQuery 代码:

$("img").attr("title", function() { return this.src });

（五）prop(name|properties|key,value|fn)

1.概述

可以设置和获取属性的值，只推荐操作 checked、readOnly、selected、disabled 等属性（假如是uncheked，prop会返回false）

2.参数

name属性名称
properties作为属性的“名/值对”对象
key,value 属性名称，属性值
key,function(index, attr)
1.属性名称。
2.返回属性值的函数,第一个参数为当前元素的索引值，第二个参数为原先的属性值。

3.示例

选中复选框为true，没选中为false

jQuery 代码:

$("input[type='checkbox']").prop("checked");

禁用页面上的所有复选框

jQuery 代码:

$("input[type='checkbox']").prop({
  disabled: true
});

禁用和选中所有页面上的复选框

jQuery 代码:

$("input[type='checkbox']").prop("disabled", true);
$("input[type='checkbox']").prop("checked", true);

通过函数来设置所有页面上的复选框被选中

jQuery 代码:

$("input[type='checkbox']").prop("checked", function( i, val ) {
  return !val;
});

全选、全不选、反选

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Insert title here</title>
	<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
	<script type="text/javascript">
		$(function () {
		    // 给全选绑定单击事件
			$("#checkedAllBtn").click(function () {
		    	$(":checkbox").prop("checked",true);
			});

			// 给全不选绑定单击事件
			$("#checkedNoBtn").click(function () {
				$(":checkbox").prop("checked",false);
			});

			// 反选单击事件
			$("#checkedRevBtn").click(function () {
			// 查询全部的球类的复选框
				$(":checkbox[name='items']").each(function () {
				// 在 each 遍历的 function 函数中，有一个 this 对象。这个 this 对象是当前正在遍历到的 dom 对象
					this.checked = !this.checked;
				});
				// 要检查 是否满选
				// 获取全部的球类个数
				var allCount = $(":checkbox[name='items']").length;
				// 再获取选中的球类个数
				var checkedCount = $(":checkbox[name='items']:checked").length;
				// if (allCount == checkedCount) {
				// 		$("#checkedAllBox").prop("checked",true);
				// } else {
				// 		$("#checkedAllBox").prop("checked",false);
				// }
				$("#checkedAllBox").prop("checked",allCount == checkedCount);
			});

			// 【提交】按钮单击事件
			$("#sendBtn").click(function () {
			    // 获取选中的球类的复选框
				$(":checkbox[name='items']:checked").each(function () {
				    alert(this.value);
				});
			});

			// 给【全选/全不选】绑定单击事件
			$("#checkedAllBox").click(function () {
			    // 在事件的 function 函数中，有一个 this 对象，这个 this 对象是当前正在响应事件的 dom 对象
				$(":checkbox[name='items']").prop("checked",this.checked);//如果选中了全选，则this.checked=true
			});

			// 给全部球类绑定单击事件
			$(":checkbox[name='items']").click(function () {
			    // 要检查 是否满选
				// 获取全部的球类个数
				var allCount = $(":checkbox[name='items']").length;
				// 再获取选中的球类个数
				var checkedCount = $(":checkbox[name='items']:checked").length;
				$("#checkedAllBox").prop("checked",allCount == checkedCount);
			});
    	});
	</script>
</head>
<body>
	<form method="post" action="">
		你爱好的运动是？<input type="checkbox" id="checkedAllBox"/>全选/全不选
		<br/>
		<input type="checkbox" name="items" value="足球"/>足球
		<input type="checkbox" name="items" value="篮球"/>篮球
		<input type="checkbox" name="items" value="羽毛球"/>羽毛球
		<input type="checkbox" name="items" value="乒乓球"/>乒乓球
		<br/>
		<input type="button" id="checkedAllBtn" value="全 选"/>
		<input type="button" id="checkedNoBtn" value="全不选"/>
		<input type="button" id="checkedRevBtn" value="反 选"/>
		<input type="button" id="sendBtn" value="提 交"/>
	</form>
</body>
</html>

在这里插入图片描述

（六）removeAttr(name)

1.概述

从每一个匹配的元素中删除一个属性

1.6以下版本在IE6使用JQuery的removeAttr方法删除disabled是无效的。解决的方法就是使用$(“XX”).prop(“disabled”,false);
1.7版本在IE6下已支持删除disabled。

2.参数

name要删除的属性名

3.示例

将文档中图像的src属性删除

HTML 代码:

<img src="test.jpg"/>

jQuery 代码:

$("img").removeAttr("src");

结果:

[ <img /> ]

（七）removeProp(name)

1.概述

用来删除由.prop()方法设置的属性集

2.参数

name 要删除的属性名

3.示例

设置一个段落数字属性，然后将其删除

HTML 代码:

<input type="radio" checked="checked"/>

jQuery 代码:

$("input").removeProp("checked");

结果:

[ <input type="radio" /> ]

八、DOM的增删改

（一）内部插入

1.appendTo(content)

（1）概述

把所有匹配的元素追加到另一个指定的元素元素集合中。

实际上，使用这个方法是颠倒了常规的$(A).append(B)的操作，即A.appendTo(B) 不是把B追加到A中，而是把A追加到B中，成为最后一个子元素。

（2）参数

content用于被追加的内容

（3）示例

把所有段落追加到ID值为foo的元素中

HTML 代码:

<p>I would like to say: </p>
<div></div><div></div>

jQuery 代码:

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

结果:

<div><p>I would like to say: </p></div>
<div><p>I would like to say: </p></div>

从左到右，从右到左

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Insert title here</title>
	<style type="text/css"> select {
		width: 100px;
		height: 140px;
	}

	div {
		width: 130px;
		float: left;
		text-align: center;
	} 
	</style>
	<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
	<script type="text/javascript">
		// 页面加载完成
		$(function () {
    		// 第一个按钮 【选中添加到右边】
			$("button:eq(0)").click(function () {
			    $("select:eq(0) option:selected").appendTo($("select:eq(1)"));
			});
			// 第二个按钮 【全部添加到右边】
			$("button:eq(1)").click(function () {
			    $("select:eq(0) option").appendTo($("select:eq(1)"));
			});
			// 第三个按钮 【选中删除到左边】
			$("button:eq(2)").click(function () {
			    $("select:eq(1) option:selected").appendTo($("select:eq(0)"));
			});
			// 第四个按钮 【全部删除到左边】
			$("button:eq(3)").click(function () {
			    $("select:eq(1) option").appendTo($("select:eq(0)"));
			});
		});
	</script>
</head>
<body>
<div id="left">
	<select multiple="multiple" name="sel01">
		<option value="opt01">选项 1</option>
		<option value="opt02">选项 2</option>
		<option value="opt03">选项 3</option>
		<option value="opt04">选项 4</option>
		<option value="opt05">选项 5</option>
		<option value="opt06">选项 6</option>
		<option value="opt07">选项 7</option>
		<option value="opt08">选项 8</option>
	</select>
	<button>选中添加到右边</button>
	<button>全部添加到右边</button>
</div>
<div id="right">
	<select multiple="multiple" name="sel02">
	</select>
	<button>选中删除到左边</button>
	<button>全部删除到左边</button>
</div>
</body>
</html>

在这里插入图片描述

2.prependTo(content)

（1）概述

把所有匹配的元素前置到另一个、指定的元素元素集合中。

实际上，使用这个方法是颠倒了常规的$(A).prepend(B)的操作，即A.prependTo(B) 不是把B前置到A中，而是把A前置到B中，成为第一个子元素。

（2）参数

content用于匹配元素的jQuery表达式

（3）示例

把所有段落追加到ID值为foo的元素中

HTML 代码:

<p>I would like to say: </p><div id="foo"></div>

jQuery 代码:

$("p").prependTo("#foo");

结果:

<div id="foo"><p>I would like to say: </p></div>

（二）外部插入

1.insertAfter(content)

（1）概述

把所有匹配的元素插入到另一个、指定的元素元素集合的后面。

实际上，使用这个方法是颠倒了常规的$(A).after(B)的操作，即A.insertAfter(B)不是把B插入到A后面，而是把A插入到B后面，得到BA。

（2）参数

content 用于匹配元素的jQuery表达式

（3）示例

把所有段落插入到一个元素之后。与 $(“#foo”).after(“p”)相同

HTML 代码:

<p>I would like to say: </p><div id="foo">Hello</div>

jQuery 代码:

$("p").insertAfter("#foo");

结果:

<div id="foo">Hello</div><p>I would like to say: </p>

2.insertBefore(content)

（1）概述

把所有匹配的元素插入到另一个、指定的元素元素集合的前面。

实际上，使用这个方法是颠倒了常规的$(A).before(B)的操作，即A.insertBefore(B) 不是把B插入到A前面，而是把A插入到B前面，得到AB。

（2）参数

content 用于匹配元素的jQuery表达式

（3）示例

把所有段落插入到一个元素之前。与 $(“#foo”).before(“p”)相同

HTML 代码:

<div id="foo">Hello</div><p>I would like to say: </p>

jQuery 代码:

$("p").insertBefore("#foo");

结果:

<p>I would like to say: </p><div id="foo">Hello</div>

（三）替换

1.replaceWith(content|fn)

（1）概述

将所有匹配的元素替换成指定的HTML或DOM元素。
a.replaceWith(b) 用 b 替换掉 a

（2）参数

content 用于将匹配元素替换掉的内容。
fn 函数，返回THML字符串，用来替换的内容。

（3）示例

把所有的段落标记替换成加粗的标记

HTML 代码:

<p>Hello</p><p>cruel</p><p>World</p>

jQuery 代码:

$("p").replaceWith("<b>Paragraph. </b>");

结果:

<b>Paragraph. </b><b>Paragraph. </b><b>Paragraph. </b>

用第一段替换第三段，你可以发现他是移动到目标位置来替换，而不是复制一份来替换

HTML 代码:

<div class="container">
  <div class="inner first">Hello</div>
  <div class="inner second">And</div>
  <div class="inner third">Goodbye</div>
</div>

jQuery 代码:

$('.third').replaceWith($('.first'));

结果:

<div class="container">
  <div class="inner second">And</div>
  <div class="inner first">Hello</div>
</div>
1234

2.replaceAll(selector)

（1）概述

用匹配的元素替换掉所有 selector匹配到的元素
a.replaceAll(b) 用 a 替换掉所有 b

（2）参数

selector 选择器用于查找所要被替换的元素

（3）示例

把所有的段落标记替换成加粗标记

HTML 代码:

<p>Hello</p><p>cruel</p><p>World</p>

jQuery 代码:

$("<b>Paragraph. </b>").replaceAll("p");

结果:

<b>Paragraph. </b><b>Paragraph. </b><b>Paragraph. </b>

（四）删除

1.remove()

（1）概述

从DOM中删除所有匹配的元素。
a.remove(); 删除 a 标签

这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。

（2）示例

从DOM中把所有段落删除

HTML 代码:

<p>Hello</p> how are <p>you?</p>

jQuery 代码:

$("p").remove();

结果:

how are

从DOM中把带有hello类的段落删除

HTML 代码:

<p class="hello">Hello</p> how are <p>you?</p>

jQuery 代码:

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

结果:

how are <p>you?</p>

动态添加、删除表格记录

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Untitled Document</title>
	<style type="text/css">
		ul {
			list-style-type: none;
		}

		li {
			border-style: solid;
			border-width: 1px;
			padding: 5px;
			margin: 5px;
			background-color: #99ff99;
			float: left;
		}

		#employeeTable {
			border-spacing: 1px;
			background-color: black;
			margin: 80px auto 10px auto;
		}

		th,td {
			background-color: white;
		}

		#formDiv {
			width: 250px;
			border-style: solid;
			border-width: 1px;
			margin: 50px auto 10px auto;
			padding: 10px;
		}

		#formDiv input {
			width: 100%;
		}

		.word {
			width: 40px;
		}

		.inp {
			width: 200px;
		}
	</style>
	<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
	<script type="text/javascript">
		$(function () {
		    // 创建一个用于复用的删除的 function 函数
			var deleteFun = function(){
			    // 在事件响应的 function 函数中，有一个 this 对象。这个 this 对象是当前正在响应事件的 dom 对象。
				var $trObj = $(this).parent().parent();
				var name = $trObj.find("td:first").text();
                /* confirm 是 JavaScript 语言提供的一个确认提示框函数。你给它传什么，它就提示什么
                 * 当用户点击了确定，就返回 true。当用户点击了取消，就返回 false
                 */
				if( confirm("你确定要删除[" + name + "]吗？") ){
				    $trObj.remove();
				}
				// return false; 可以阻止 元素的默认行为。
				return false;
			};

			// 给【Submit】按钮绑定单击事件
			$("#addEmpButton").click(function () {
			    // 获取输入框，姓名，邮箱，工资的内容
				var name = $("#empName").val();
				var email = $("#email").val();
				var salary = $("#salary").val();

				// 创建一个行标签对象，添加到显示数据的表格中
				var $trObj = $("<tr>" +
					"<td>" + name + "</td>" +
					"<td>" + email + "</td>" +
					"<td>" + salary + "</td>" +
					"<td><a href=\"deleteEmp?id=002\">Delete</a></td>" +
					"</tr>");

				// 添加到显示数据的表格中
				$trObj.appendTo( $("#employeeTable"));

				// 给添加的行的 a 标签绑上事件
				$trObj.find("a").click( deleteFun );//如果写成deleteFun() 则是它的返回值
			});

			// 给删除的 a 标签绑定单击事件
			$("a").click( deleteFun );//如果写成deleteFun() 则是它的返回值
		});
	</script>
</head>
<body>
<table id="employeeTable">
	<tr>
		<th>Name</th>
		<th>Email</th>
		<th>Salary</th>
		<th>Operation</th>
	</tr>
	<tr>
		<td>Tom</td>
		<td>tom@tom.com</td>
		<td>5000</td>
		<td><a href="deleteEmp?id=001">Delete</a></td>
	</tr>
	<tr>
		<td>Jerry</td>
		<td>jerry@sohu.com</td>
		<td>8000</td>
		<td><a href="deleteEmp?id=002">Delete</a></td>
	</tr>
	<tr>
		<td>Bob</td>
		<td>bob@tom.com</td>
		<td>10000</td>
		<td><a href="deleteEmp?id=003">Delete</a></td>
	</tr>
</table>
<div id="formDiv"><h4>添加新员工</h4>
	<table>
		<tr>
			<td class="word">name:</td>
			<td class="inp"><input type="text" name="empName" id="empName"/></td>
		</tr>
		<tr>
			<td class="word">email:</td>
			<td class="inp"><input type="text" name="email" id="email"/></td>
		</tr>
		<tr>
			<td class="word">salary:</td>
			<td class="inp"><input type="text" name="salary" id="salary"/></td>
		</tr>
		<tr>
			<td colspan="2" align="center">
				<button id="addEmpButton" value="abc"> Submit</button>
			</td>
		</tr>
	</table>
</div>
</body>
</html>

在这里插入图片描述

2.empty()

（1）概述

删除匹配的元素集合中所有的子节点。
a.empty(); 清空 a 标签里的内容

（2）示例

把所有段落的子元素（包括文本节点）删除

HTML 代码:

<p>Hello, <span>Person</span> <a href="#">and person</a></p>

jQuery 代码:

$("p").empty();

结果:

<p></p>

九、CSS样式操作

（一）addClass(class|fn)

1.概述

为每个匹配的元素添加指定的类名

2.参数

class一个或多个要添加到元素中的CSS类名，请用空格分开
fn function(index, class)此函数必须返回一个或多个空格分隔的class名。接受两个参数，index参数为对象在这个集合中的索引值，class参数为这个对象原先的class属性值。

3.示例

为匹配的元素加上 ‘selected’ 类

jQuery 代码:

$("p").addClass("selected");
$("p").addClass("selected1 selected2");

给li加上不同的class

HTML 代码:

<ul>
      <li>Hello</li>
      <li>Hello</li>
      <li>Hello</li>
</ul>

jQuery 代码:

$('ul li:last').addClass(function() {
  return 'item-' + $(this).index();
});

（二）removeClass([class|fn])

1.概述

从所有匹配的元素中删除全部或者指定的类。

2.参数

class 一个或多个要删除的CSS类名，请用空格分开
fn function(index, class) 此函数必须返回一个或多个空格分隔的class名。接受两个参数，index参数为对象在这个集合中的索引值，class参数为这个对象原先的class属性值。

3.示例

从匹配的元素中删除 ‘selected’ 类

jQuery 代码:

$("p").removeClass("selected");

删除匹配元素的所有类

jQuery 代码:

$("p").removeClass();

删除最后一个元素上与前面重复的class

jQuery 代码:

$('li:last').removeClass(function() {
    return $(this).prev().attr('class');
});

（三）toggleClass(class|fn[,switch])

1.概述

有就删除，没有就添加样式。

2.参数

class CSS类名
class,switch
1.要切换的CSS类名.
2.用于决定元素是否包含class的布尔值。
switch用于决定元素是否包含class的布尔值。
function(index, class,switch)[, switch]
1.用来返回在匹配的元素集合中的每个元素上用来切换的样式类名的一个函数。接收元素的索引位置和元素旧的样式类作为参数。
2.一个用来判断样式类添加还是移除的 boolean 值。

3.示例

为匹配的元素切换 ‘selected’ 类

jQuery 代码:

$("p").toggleClass("selected");

每点击三下加上一次 ‘highlight’ 类

HTML 代码:

<strong>jQuery 代码:</strong>

jQuery 代码:

var count = 0;
$("p").click(function(){
   $(this).toggleClass("highlight", count++ % 3 == 0);
});

根据父元素来设置class属性

jQuery 代码:

$('div.foo').toggleClass(function() {
  if ($(this).parent().is('.bar') {
    return 'happy';
  } else {
    return 'sad';
  }
});

（四）offset([coordinates])

1.概述

获取和设置元素的坐标。

返回的对象包含两个整型属性：top 和 left。此方法只对可见元素有效。

2.参数

coordinates一个对象，必须包含top和left属性，作为元素的新坐标。这个参数也可以是一个返回一对坐标的函数，函数的第一个参数是元素的索引，第二个参数是当前的坐标。

3.示例

（1）获取第二段的偏移

HTML 代码:

<p>Hello</p><p>2nd Paragraph</p>

jQuery 代码:

var p = $("p:last");
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );

结果:

<p>Hello</p><p>left: 0, top: 35</p>

（2）设置第二段的偏移

HTML 代码:

<p>Hello</p><p>2nd Paragraph</p>

jQuery 代码:

$("p:last").offset({ top: 10, left: 30 });

十、jQuery动画

（一）基本动画

1.show([speed,[easing],[fn]])

（1）概述

显示隐藏的匹配元素

如果选择的元素是可见的，这个方法将不会改变任何东西。无论这个元素是通过hide()方法隐藏的还是在CSS里设置了display:none;，这个方法都将有效。

（2）参数

speed[,fn]
speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
fn:在动画完成时执行的函数，每个元素执行一次。
[speed],[easing],[fn]
speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn:在动画完成时执行的函数，每个元素执行一次。

（3）示例

显示所有段落

HTML 代码:

<p style="display: none">Hello</p>

jQuery 代码:

$("p").show()

用缓慢的动画将隐藏的段落显示出来，历时600毫秒

HTML 代码:

<p style="display: none">Hello</p>

jQuery 代码:

$("p").show("slow");

用迅速的动画将隐藏的段落显示出来，历时200毫秒。并在之后执行反馈

HTML 代码:

<p style="display: none">Hello</p>

jQuery 代码:

$("p").show("fast",function(){
   $(this).text("Animation Done!");
});

将隐藏的段落用将近4秒的时间显示出来，并在之后执行一个反馈

HTML 代码:

<p style="display: none">Hello</p>

jQuery 代码:

$("p").show(4000,function(){
   $(this).text("Animation Done...");
});

2.hide([speed,[easing],[fn]])

（1）概述

将可见的元素隐藏。

如果选择的元素是隐藏的，这个方法将不会改变任何东西。

（2）参数

speed[,fn]
speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
fn:在动画完成时执行的函数，每个元素执行一次。
[speed],[easing],[fn]
speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn:在动画完成时执行的函数，每个元素执行一次。

（3）示例

隐藏所有段落

jQuery 代码:

$("p").hide()

用600毫秒的时间将段落缓慢的隐藏

jQuery 代码:

$("p").hide("slow");

用200毫秒将段落迅速隐藏，之后弹出一个对话框。

jQuery 代码:

$("p").hide("fast",function(){
   alert("Animation Done.");
});

3.toggle([speed],[easing],[fn])

（1）概述

可见就隐藏，不可见就显示。

（2）参数

fn,fn2,[fn3,fn4,...] fn:第一数次点击时要执行的函数。
fn2:第二数次点击时要执行的函数。
fn3,fn4,…:更多次点击时要执行的函数。
[speed] [,fn]
speed: 隐藏/显示效果的速度。默认是 “0"毫秒。可能的值：slow，normal，fast。”
fn:在动画完成时执行的函数，每个元素执行一次。
[speed], [easing ], [fn ]
speed: 隐藏/显示效果的速度。默认是 “0"毫秒。可能的值：slow，normal，fast。”
easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn:在动画完成时执行的函数，每个元素执行一次。
switch
用于确定显示/隐藏的开关。如：true - 显示元素，false - 隐藏元素

（3）示例

对表格切换显示/隐藏

jQuery 代码:

$('td).toggle();

对表格的切换一个类

jQuery 代码:

$("td").toggle(
  function () {
    $(this).addClass("selected");
  },
  function () {
    $(this).removeClass("selected");
  }
);

用600毫秒的时间将段落缓慢的切换显示状态

jQuery 代码:

$("p").toggle("slow");

用200毫秒将段落迅速切换显示状态，之后弹出一个对话框

jQuery 代码:

$("p").toggle("fast",function(){
   alert("Animation Done.");
 });

如果这个参数为true ，那么匹配的元素将显示;如果false ，元素是隐藏的

jQuery 代码:

$('#foo').toggle(showOrHide);

//相当于
if (showOrHide) {
  $('#foo').show();
} else {
  $('#foo').hide();
}

动画品牌展示

需求：
1.点击按钮的时候，隐藏和显示卡西欧之后的品牌。
2.当显示全部内容的时候，按钮文本为“显示精简品牌” 然后，小三角形向上。所有品牌产品为默认颜色。
3.当只显示精简品牌的时候，要隐藏卡西欧之后的品牌，按钮文本为“显示全部品牌” 然后小三形向下。并且把索尼的品牌颜色改为红色（给 li 标签添加 promoted 样式即可）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>品牌展示练习</title>
	<style type="text/css">
	* {
		margin: 0;
		padding: 0;
	}

	body {
		font-size: 12px;
		text-align: center;
	}

	a {
		color: #04D;
		text-decoration: none;
	}

	a:hover {
		color: #F50;
		text-decoration: underline;
	}

	.SubCategoryBox {
		width: 600px;
		margin: 0 auto;
		text-align: center;
		margin-top: 40px;
	}

	.SubCategoryBox ul {
		list-style: none;
	}

	.SubCategoryBox ul li {
		display: block;
		float: left;
		width: 200px;
		line-height: 20px;
	}

	.showmore, .showless {
		clear: both;
		text-align: center;
		padding-top: 10px;
	}

	.showmore a, .showless a {
		display: block;
		width: 120px;
		margin: 0 auto;
		line-height: 24px;
		border: 1px solid #AAA;
	}

	.showmore a span {
		padding-left: 15px;
		background: url(img/down.gif) no-repeat 0 0;
	}

	.showless a span {
		padding-left: 15px;
		background: url(img/up.gif) no-repeat 0 0;
	}

	.promoted a {
		color: #F50;
	}
	</style>
	<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
	<script type="text/javascript">
		$(function () {
	    	// 基本初始状态
			$("li:gt(5):not(:last)").hide();
			// 给功能的按钮绑定单击事件
			$("div div a").click(function () {
		    	// 让某些品牌，显示，或隐藏
				$("li:gt(5):not(:last)").toggle();
				// 判断 品牌，当前是否可见
				if( $("li:gt(5):not(:last)").is(":hidden") ){
			    	// 品牌隐藏的状态 ：1 显示全部品牌
					$("div div a span").text("显示全部品牌");
					$("div div").removeClass();//把之前的角标样式去掉
					$("div div").addClass("showmore");//换成角标向下的样式
					// 去掉高亮
					$("li:contains('索尼')").removeClass("promoted");
				} else {
			    	// 品牌可见的状态：2 显示精简品牌
					$("div div a span").text("显示精简品牌");
					$("div div").removeClass();//把之前的角标样式去掉
					$("div div").addClass("showless");//换成角标向上的样式
					// 加高亮
					$("li:contains('索尼')").addClass("promoted");
    			}
				return false;
    		});
    	});
	</script>
</head>
<body>
<div class="SubCategoryBox">
	<ul>
		<li><a href="#">佳能</a><i>(30440) </i></li>
		<li><a href="#">索尼</a><i>(27220) </i></li>
		<li><a href="#">三星</a><i>(20808) </i></li>
		<li><a href="#">尼康</a><i>(17821) </i></li>
		<li><a href="#">松下</a><i>(12289) </i></li>
		<li><a href="#">卡西欧</a><i>(8242) </i></li>
		<li><a href="#">富士</a><i>(14894) </i></li>
		<li><a href="#">柯达</a><i>(9520) </i></li>
		<li><a href="#">宾得</a><i>(2195) </i></li>
		<li><a href="#">理光</a><i>(4114) </i></li>
		<li><a href="#">奥林巴斯</a><i>(12205) </i></li>
		<li><a href="#">明基</a><i>(1466) </i></li>
		<li><a href="#">爱国者</a><i>(3091) </i></li>
		<li><a href="#">其它品牌相机</a><i>(7275) </i></li>
	</ul>
	<div class="showmore"><a href="more.html"><span>显示全部品牌</span></a></div>
</div>
</body>
</html>

在这里插入图片描述

（二）淡入淡出动画

1.fadeIn([speed],[easing],[fn])

（1）概述

通过不透明度的变化来实现所有匹配元素的淡入效果（慢慢可见），并在动画完成后可选地触发一个回调函数。

这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

（2）参数

speed[,fn]
speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
fn:在动画完成时执行的函数，每个元素执行一次。
[speed],[easing],[fn]
speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn:在动画完成时执行的函数，每个元素执行一次。

（3）示例

用600毫秒缓慢的将段落淡入

jQuery 代码:

$("p").fadeIn("slow");

用200毫秒快速将段落淡入，之后弹出一个对话框

jQuery 代码:

("p").fadeIn("fast",function(){
   alert("Animation Done.");
 });

2.fadeOut([speed],[easing],[fn])

（1）概述

通过不透明度的变化来实现所有匹配元素的淡出（慢慢消失）效果，并在动画完成后可选地触发一个回调函数。

这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

（2）参数

speed[,fn]
speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
fn:在动画完成时执行的函数，每个元素执行一次。
[speed],[easing],[fn]
speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn:在动画完成时执行的函数，每个元素执行一次。

（3）示例

用600毫秒缓慢的将段落淡出

jQuery 代码:

$("p").fadeOut("slow");

用200毫秒快速将段落淡出，之后弹出一个对话框

jQuery 代码:

$("p").fadeOut("fast",function(){
   alert("Animation Done.");
 });

3.fadeTo([[speed],opacity,[easing],[fn]])

（1）概述

把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。

这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

（2）参数

speed,opacity,[fn]
speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
opacity:一个0至1之间表示透明度的数字，0 透明，1 完成可见，0.5 半透明。
fn:在动画完成时执行的函数，每个元素执行一次。
[speed],opacity,[easing],[fn]
speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
opacity:一个0至1之间表示透明度的数字，0 透明，1 完成可见，0.5 半透明。
easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn:在动画完成时执行的函数，每个元素执行一次。

（3）示例

用600毫秒缓慢的将段落的透明度调整到0.66，大约2/3的可见度

jQuery 代码:

$("p").fadeTo("slow", 0.66);

用200毫秒快速将段落的透明度调整到0.25，大约1/4的可见度，之后弹出一个对话框

jQuery 代码:

$("p").fadeTo("fast", 0.25, function(){
   alert("Animation Done.");
 });

4.fadeToggle([speed,[easing],[fn]])

（1）概述

淡入/淡出的切换，并在动画完成后可选地触发一个回调函数。

这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

（2）参数

speed[,fn]
speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
fn:在动画完成时执行的函数，每个元素执行一次。
[speed],[easing],[fn]
speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn:在动画完成时执行的函数，每个元素执行一次。

（3）示例

用600毫秒缓慢的将段落淡入

jQuery 代码:

$("p").fadeToggle("slow","linear");

用200毫秒快速将段落淡入，之后弹出一个对话框

jQuery 代码:

$("p").fadeToggle("fast",function(){
   alert("Animation Done.");
 });

十一、jQuery事件操作

（一）`$( function(){} );` 和`window.onload = function(){}` 的区别

他们分别是在什么时候触发？
1、页面加载完成之后是浏览器的内核解析完页面的标签创建好 DOM 对象之后$( function(){} );就会马上执行。
2、页面加载完成之后，除了要等浏览器内核解析完标签创建好 DOM 对象，还要等标签显示时需要的内容加载完成window.onload = function(){}才执行。
两者并存时，他们触发的顺序？
1、页面加载完成之后$( function(){} );先执行
2、页面加载完成之后window.onload = function(){} 后执行
假如各自写了多个，他们会执行几次？
1、页面加载完成之后，只会执行最后一次的window.onload = function(){}。
2、页面加载完成之后是把全部的$( function(){} );依次顺序全部执行。

（二）事件的冒泡

什么是事件的冒泡？
事件的冒泡是指，HTML中父子元素同时监听同一个事件。当触发子元素的事件的时候，同一个事件也被传递到了父元素的事件里去响应。
那么如何阻止事件冒泡呢？
在子元素事件函数体内，return false; 可以阻止事件的冒泡传递。

（三）jQuery 中的事件

1.click(fn)

它可以绑定单击事件，以及触发单击事件

2.mouseover(fn)

鼠标移入事件

3.mouseout(fn)

鼠标移出事件

4.mouseenter(fn)

当鼠标指针穿过（进入）被选元素时，会发生 mouseenter 事件。
与 mouseover 事件不同，只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件。

5.mouseleave(fn)

当鼠标指针离开被选元素时，会发生 mouseleave 事件。
与 mouseout 事件不同，只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。如果鼠标指针离开任何子元素，同样会触发 mouseout 事件。

案例****案例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Title</title>
    <script src="jquery-3.4.1.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("p").mouseenter(function(){
                $("p").css("background-color","red");
            });
            $("p").mouseleave(function(){
                $("p").css("background-color","lightgray");
            });
        });
    </script>
</head>
<body>

<p>哈哈哈哈哈哈</p>

</body>
</html>

鼠标放上来：
在这里插入图片描述
鼠标离开后：

6.keypress(fn)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Title</title>
    <script src="jquery-3.4.1.min.js">
    </script>
    <script>
        i=0;
        $(document).ready(function(){
            $("input").keypress(function(){
                $("span").text(i+=1);
            });
        });
    </script>
</head>
<body>

输入数字: <input type="text">
<p>按键盘的次数: <span>0</span></p>

</body>
</html>

在这里插入图片描述

7.change(fn)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Title</title>
    <script src="jquery-3.4.1.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("input").change(function(){
                alert("文本已被修改");
            });
        });
    </script>
</head>
<body>

<input type="text">
<p>在输入框写一些东西，然后按下回车键或点击输入框外部</p>

</body>
</html>

在这里插入图片描述

8.bind(type,[data],fn|false)

（1）概述

可以给元素一次性绑定一个或多个事件。

（2）参数

type,[data],function(eventObject)
type: 含有一个或多个事件类型的字符串，由空格分隔多个事件。比如"click"或"submit"，还可以是自定义事件名。
data:作为event.data属性值传递给事件对象的额外数据对象
fn:绑定到每个匹配元素的事件上面的处理函数
type,[data],false
type:含有一个或多个事件类型的字符串，由空格分隔多个事件。比如"click"或"submit"，还可以是自定义事件名。
data:作为event.data属性值传递给事件对象的额外数据对象
false: 将第三个参数设置为false会使默认的动作失效。

（3）示例

当每个段落被点击的时候，弹出其文本。

jQuery 代码:

$("p").bind("click", function(){
  alert( $(this).text() );
});

同时绑定多个事件类型

jQuery 代码:

$('#foo').bind('mouseenter mouseleave', function() {
  $(this).toggleClass('entered');
});

同时绑定多个事件类型/处理程序

jQuery 代码:

$("button").bind({
  click:function(){$("p").slideToggle();},
  mouseover:function(){$("body").css("background-color","red");},  
  mouseout:function(){$("body").css("background-color","#FFFFFF");}  
});

9.one()

为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。

在每个对象上，这个事件处理函数只会被执行一次。其他规则与bind()函数相同。这个事件处理函数会接收到一个事件对象，可以通过它来阻止（浏览器）默认的行为。如果既想取消默认的行为，又想阻止事件冒泡，这个事件处理函数必须返回false。

10.unbind(type[,fn])

（1）概述

跟 bind 方法相反的操作，解除事件的绑定

（2）参数

type[,fn]
type:删除元素的一个或多个事件,由空格分隔多个事件值
fn:要从每个匹配元素的事件中反绑定的事件处理函数

（3）示例

把所有段落的所有事件取消绑定

jQuery 代码:

$("p").unbind()

将段落的click事件取消绑定

jQuery 代码:

$("p").unbind( "click" )

删除特定函数的绑定，将函数作为第二个参数传入

jQuery 代码:

var foo = function () {
  // 处理某个事件的代码
};

$("p").bind("click", foo); // ... 当点击段落的时候会触发 foo 

$("p").unbind("click", foo); // ... 再也不会被触发 foo

11.live(type,fn)

也是用来绑定事件。它可以用来绑定选择器匹配的所有元素的事件。哪怕这个元素是后面动态创建出来的也有效

这个方法是基本是的 .bind() 方法的一个变体。使用 .bind() 时，选择器匹配的元素会附加一个事件处理函数，而以后再添加的元素则不会有。为此需要再使用一次 .bind() 才行。比如说

<body>
  <div class="clickme">Click here</div>
</body>

可以给这个元素绑定一个简单的click事件：

$('.clickme').bind('click', function() {
  alert("Bound handler called.");
});

当点击了元素，就会弹出一个警告框。然后，想象一下这之后有另一个元素添加进来了。

$('body').append('<div class="clickme">Another target</div>');

尽管这个新的元素也能够匹配选择器 “.clickme” ，但是由于这个元素是在调用 .bind() 之后添加的，所以点击这个元素不会有任何效果。

.live() 就提供了对应这种情况的方法。如果我们是这样绑定click事件的：

$('.clickme').live('click', function() {
  alert("Live handler called."); 
});

然后再添加一个新元素：

$('body').append('<div class="clickme">Another target</div>');

然后再点击新增的元素，他依然能够触发事件处理函数。

（四）事件对象

事件对象，是封装有触发的事件信息的一个 javascript 对象。

如何获取和使用 javascript 事件对象呢？
在给元素绑定事件的时候，在事件的 function( event ) 参数列表中添加一个参数，这个参数名，我们习惯取名为 event。这个 event 就是 javascript 传递参事件处理函数的事件对象。

方式1：原生 javascript 获取事件对象

window.onload = function () { 
	document.getElementById("areaDiv").onclick = function (event) { 
		console.log(event); 
	} 
}

方式2：jQuery 获取事件对象

$(function () { 
	$("#areaDiv").click(function (event) { 
		console.log(event); 
	}); 
});

方式3：使用 bind 同时对多个事件绑定同一个函数，获取当前事件对象

$("#areaDiv").bind("mouseover mouseout",function (event) { 
	if (event.type == "mouseover") { 
		console.log("鼠标移入"); 
	} else if (event.type == "mouseout") { 
		console.log("鼠标移出"); 
	} 
});