一、JQuery基本介绍
二、Jquery特点
1.快速获取文档元素
jQuery的选择机制构建于Css的选择器，它提供了快速查询DOM文档中元素的能力，而且大大强化了JavaScript中获取页面元素的方式。
2.提供漂亮的页面动态效果
jQuery中内置了一系列的动画效果，可以开发出非常漂亮的网页，许多网站都使用jQuery的内置的效果，比如淡入淡出、元素移除等动态特效。
3.创建AJAX无刷新网页
AJAX是异步的JavaScript和XML的简称，可以开发出非常灵敏无刷新的网页，特别是开发服务器端网页时，比如PHP网站，需要往返地与服务器通信，如果不使用AJAX，每次数据更新不得不重新刷新网页，而使用AJAX特效后，可以对页面进行局部刷新，提供动态的效果。
4.提供对JavaScript语言的增强
jQuery提供了对基本JavaScript结构的增强，比如元素迭代和数组处理等操作。
5.增强的事件处理
jQuery提供了各种页面事件，它可以避免程序员在HTML中添加太多事件处理代码，最重要的是，它的事件处理器消除了各种浏览器兼容性问题。
6.更改网页内容
jQuery可以修改网页中的内容，比如更改网页的文本、插入或者翻转网页图像，jQuery简化了原本使用JavaScript代码需要处理的方式。
三、Jquery基础核心
1.Jquery版本
1.xxx 1.8 1.9 1.11(项目用的较多)
2.xxx 临时版本 后期不再维护 不支持低版本浏览器
3.xxx 不支持低版本浏览器
2.Jquery使用步骤
2.1 在web目录下复制粘贴jquery的包
链接：https://pan.baidu.com/s/1T0vu5Q-rJryfijpCitg5eA
提取码：h0qc
2.2 在页面中引入jquery文件
<script src="js/jquery-3.2.1.min.js"></script>
2.2 通过jquery去操作页面
3.JS对象和JQuery对象的区别
1.Js中通过document获取的元素对象是HTMLDOM对象
2.JQuery获取的对象不是DOM对象，我们往往把JQuery获取出来的对象称之为JQuery对象
3.JQuery本质上是一个数组（伪数组），数组中的元素就是DOM对象
4.Jquery入口函数和window.onload的区别
Jquery入口函数可以执行多个，但是window.onload只能执行一个
5.JS对象和JQuery对象的相互转换
1.为什么需要转换？？
原因：通过docunment获取的dom对象和通过jquery获取的jquery对象，他们之间的方法和属性不能相互通用
<div id="div1"></div>
var div1 = document.getElementById("div1")//js对象
var $div1=$("#div1")//jq对象
2.$(div1)//js dom对象转换成jq对象
3.$div1[0];//jq对象转换成js dom对象
$div1.get(0);//jq对象转换成js dom对象
6.jquery文档
链接：https://pan.baidu.com/s/1zBewnf2PBsyIC5U0bfaQpw
提取码：9qol
四、选择器的学习
1.基本选择器一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.2.1.min.js"></script>
<script>
$(function () {
/*获取id为div1的元素，把元素内的字体颜色换成红色*/
/*id选择器*/
$("#btn1").click(function () {
$("#div1").css("color","red")
})
/*修改所有div元素里面的字体颜色为红色*/
/*元素选择器*/
$("#btn2").click(function () {
$("div").css("color","red")
})
/*类选择器*/
$("#btn3").click(function () {
$(".inner").css("color","red")
})
/*通配选择器*/
$("#btn4").click(function () {
$("*").css("color","red")
})
/*并集选择器*/
$("#btn5").click(function () {
$("#div1,#div5").css("color","red")
})
/*层级选择器 获取div2下面的div*/
$("#btn6").click(function () {
$("#div2 div").css("color","red")
})
})
</script>
</head>
<style>
.outer{
border: blue solid 1px;
height: 200px;
width: 200px;
float: left;
}
.inner{
border: red solid 1px;
height: 100px;
width: 100px;
}
</style>
<body>
<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>
<button id="btn3">按钮3</button>
<button id="btn4">按钮4</button>
<button id="btn5">按钮5</button>
<button id="btn6">按钮6</button>
<div id="div1" class="outer">div1</div>
<div id="div2" class="outer">
<div class="inner">
divinner
</div>
div2
</div>
<div id="div3" class="outer">div3</div>
<div id="div4" class="outer">div4</div>
<div id="div5" class="outer">div5</div>
</body>
</html>
2.属性选择器
[attribute]
概述:匹配包含给定属性的元素。注意，在jQuery 1.3中，前导的@符号已经被废除！如果想要兼容最新版本，只需要简单去掉@符号即可。
参数:attributeStringV1.0属性名
描述:查找所有含有 id 属性的 div 元素
HTML 代码:
<div>
<p>Hello!</p>
</div>
<div id="test2"></div>
jQuery 代码:$("div[id]")
结果:[ <div id="test2"></div> ]
[attribute=value]
概述:匹配给定的属性是某个特定值的元素
参数:attributeStringV1.0属性名
value StringV1.0属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时，用以避免冲突。
描述:查找所有 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']").attr("checked", true);
[attribute!=value]
概述:匹配所有不含有指定的属性，或者属性不等于特定值的元素。
此选择器等价于:not([attr=value])<br>要匹配含有特定属性但不等于特定值的元素，请使用[attr]:not([attr=value])
参数:attributeStringV1.0属性名
value StringV1.0属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时，用以避免冲突。
描述:查找所有 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']").attr("checked", true);
[attribute^=value]
概述:匹配给定的属性是以某些值开始的元素
参数:attributeStringV1.0属性名
value StringV1.0属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时，用以避免冲突。
描述:查找所有 name 以 'news' 开始的 input 元素
HTML 代码:
<input name="newsletter" />
<input name="milkman" />
<input name="newsboy" />
jQuery 代码:$("input[name^='news']")
结果:[ <input name="newsletter" />, <input name="newsboy" /> ]
[selector1][selector2][selectorN]---复合属性选择器，需要同时满足多个条件时使用。
参数:selector1Selector属性选择器selector2Selector另一个属性选择器，用以进一步缩小范围selectorNSelector任意多个属性选择器
描述:找到所有含有 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" /> ]
3.表单选择器
:input---匹配所有 input, textarea, select 和 button 元素
描述:查找所有的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>,
]
:text---匹配所有的单行文本框
描述:查找所有文本框
HTML 代码:
<form>
<input type="text" />
<input type="checkbox" />
<input type="radio" />
<input type="image" />
<input type="file" />
<input type="submit" />
<input type="reset" />
<input type="password" />
<input type="button" />
<select><option/></select>
<textarea></textarea>
<button></button>
</form>
jQuery 代码:$(":text")
结果:[ <input type="text" /> ]
4.基本选择器二
: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> ]
: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> ]
: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> ]
: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> ]
:eq(index)---匹配一个给定索引值的元素
参数:indexNumberV1.0从 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> ]
:gt(index)---匹配所有大于给定索引值的元素
参数:indexNumberV1.0从 0 开始计数
描述:查找第二第三行，即索引值是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> ]
:lt(index)---匹配所有小于给定索引值的元素
参数:indexNumberV1.0从 0 开始计数
描述:查找第一第二行，即索引值是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> ]
5.内容选择器
:contains(text)---匹配包含给定文本的元素
参数:textStringV1.1.4一个用以查找的字符串
描述:查找所有包含 "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> ]
: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> ]
6.表单对象选择器
:disabled---匹配所有不可用元素
描述:查找所有不可用的input元素
HTML 代码:
<form>
<input name="email" disabled="disabled" />
<input name="id" />
</form>
jQuery 代码:$("input:disabled")
结果:[ <input name="email" disabled="disabled" /> ]
: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> ]
:checked---匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)
描述:查找所有选中的复选框元素
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")
五、文档处理
1.内部插入
append(content|fn)---向每个匹配的元素内部追加内容。
这个操作与对指定的元素执行appendChild方法，将它们添加到文档中的情况类似。
参数:contentString, Element, jQueryV1.0要追加到目标中的内容
function(index, html)FunctionV1.4返回一个HTML字符串，用于追加到每一个匹配元素的里边。接受两个参数，index参数为对象在这个集合中的索引值，html参数为这个对象原先的html值。
描述:向所有段落中追加一些HTML标记。
HTML 代码:
<p>I would like to say: </p>
jQuery 代码:$("p").append("<b>Hello</b>");
结果:[ <p>I would like to say: <b>Hello</b></p> ]
appendTo(content)---把所有匹配的元素追加到另一个指定的元素元素集合中。
实际上，使用这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。
在jQuery 1.3.2中，appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法成为一个破坏性操作，返回值是所有被追加的内容，而不仅仅是先前所选中的元素。所以，要选择先前选中的元素，需要使用end()方法，参见例二。
参数:contentString用于被追加的内容
描述:把所有段落追加到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>
prepend(content)---向每个匹配的元素内部前置内容。这是向所有匹配元素内部的开始处插入内容的最佳方式。
参数:contentString, Element, jQueryV1.0要插入到目标元素内部前端的内容
function(index, html)FunctionV1.4返回一个HTML字符串，用于追加到每一个匹配元素的里边。接受两个参数，index参数为对象在这个集合中的索引值，html参数为这个对象原先的html值。
描述:向所有段落中前置一些HTML标记代码。
HTML 代码:
<p>I would like to say: </p>
jQuery 代码:$("p").prepend("<b>Hello</b>");
结果:[ <p><b>Hello</b>I would like to say: </p> ]
prependTo(content)---把所有匹配的元素前置到另一个、指定的元素元素集合中。
实际上，使用这个方法是颠倒了常规的$(A).prepend(B)的操作，即不是把B前置到A中，而是把A前置到B中。
在jQuery 1.3.2中，appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法成为一个破坏性操作，要选择先前选中的元素，需要使用end()方法，参见 appendTo 方法的例二。
参数:contentString用于匹配元素的jQuery表达式
描述:把所有段落追加到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>
2.外部插入
after(content|fn)---在每个匹配的元素之后插入内容。
参数:contentString, Element, jQueryV1.0插入到每个目标后的内容
functionFunctionV1.4函数必须返回一个html字符串。
描述:在所有段落之后插入一些HTML标记代码。
HTML 代码:
<p>I would like to say: </p>
jQuery 代码:$("p").after("<b>Hello</b>");
结果:<p>I would like to say: </p><b>Hello</b>
before(content|fn)---在每个匹配的元素之前插入内容。
参数：contentString, Element, jQueryV1.0插入到每个目标后的内容
functionFunctionV1.4函数必须返回一个html字符串。
描述:在所有段落之前插入一些HTML标记代码。
HTML 代码:
<p>I would like to say: </p>
jQuery 代码:$("p").before("<b>Hello</b>");
结果:[ <b>Hello</b><p>I would like to say: </p> ]
3.删除文档
empty()---删除匹配的元素集合中所有的子节点。
描述:把所有段落的子元素（包括文本节点）删除
HTML 代码:
<p>Hello, <span>Person</span> <a href="#">and person</a></p>
jQuery 代码:$("p").empty();
结果:<p></p>
remove([expr])---从DOM中删除所有匹配的元素。
这个方法不会把匹配的元素从jQuery对象中删除，因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外，其他的比如绑定的事件，附加的数据等都会被移除。
参数:exprStringV1.0用于筛选元素的jQuery表达式
描述:从DOM中把所有段落删除
HTML 代码:
<p>Hello</p> how are <p>you?</p>
jQuery 代码:$("p").remove();
结果:how are
4.复制文档
clone([Even[,deepEven]])---克隆匹配的DOM元素并且选中这些克隆的副本。
在想把DOM文档中元素的副本添加到其他位置时这个函数非常有用。
参数EventsBooleanV1.0一个布尔值（true 或者 false）指示事件处理函数是否会被复制。V1.5以上版本默认值是：false
Events[,deepEvents]Boolean,BooleanV1.51:一个布尔值（true 或者 false）指示事件处理函数是否会被复制。
2:一个布尔值，指示是否对事件处理程序和克隆的元素的所有子元素的数据应该被复制。
描述:克隆所有b元素（并选中这些克隆的副本），然后将它们前置到所有段落中。
HTML 代码:
<b>Hello</b><p>, how are you?</p>
jQuery 代码:$("b").clone().prependTo("p");
结果:<b>Hello</b><p><b>Hello</b>, how are you?</p>
六、事件处理
1.事件处理
on(events,[selector],[data],fn)---在选择元素上绑定一个或多个事件的事件处理函数
$("p").on("click", function(){
alert( $(this).text() );
});
off(events,[selector],[fn])---在选择元素上移除一个或多个事件的事件处理函数。
$("p").off()
$("p").off( "click", "**" )
bind(type,[data],fn)---为每个匹配元素的特定事件绑定事件处理函数。
描述:当每个段落被点击的时候，弹出其文本。
jQuery 代码:
$("p").bind("click", function(){
alert($(this).text() );
});
2.事件切换
hover([over,]out)
概述:一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。
当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。而且，会伴随着对鼠标是否仍然处在特定元素中的检测（例如，处在div中的图像），如果是，则会继续保持“悬停”状态，而不触发移出事件（修正了使用mouseout事件的一个常见错误）。
参数:over,outFunction,FunctionV1.0over:鼠标移到元素上要触发的函数
out:鼠标移出元素要触发的函数
outObjectV1.4当鼠标移到元素上或移出元素时触发执行的事件函数
鼠标悬停的表格加上特定的类
jQuery 代码:
$("td").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);
描述:hovre()方法通过绑定变量"handlerInOut"来切换方法。
jQuery 代码:
$("td").bind("mouseenter mouseleave",handlerInOut);
$("td").hover(handlerInOut);
toggle([speed],[easing],[fn])
概述:用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。
如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
参数:fn,fn2,[fn3,fn4,...]Function,....V1.0fn:第一数次点击时要执行的函数。
fn2:第二数次点击时要执行的函数。fn3,fn4,...:更多次点击时要执行的函数。[speed] [,fn]String,FunctionV1.0speed: 隐藏/显示 效果的速度。默认是 "0"毫秒。可能的值：slow，normal，fast。"fn:在动画完成时执行的函数，每个元素执行一次。
[speed], [easing ], [fn ] String,String,FunctionV1.4.3speed: 隐藏/显示 效果的速度。默认是 "0"毫秒。可能的值：slow，normal，fast。"
easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn:在动画完成时执行的函数，每个元素执行一次。
switch BooleanV1.3用于确定显示/隐藏的开关。如：true - 显示元素，false - 隐藏元素
无参数描述:对表格切换显示/隐藏
jQuery 代码:
$('td).toggle();
描述:对表格的切换一个类
jQuery 代码:
$("td").toggle(
function () {
$(this).addClass("selected");
},
function () {
$(this).removeClass("selected");
}
);
3.事件
blur([[data],fn])---触发每一个匹配元素的blur事件。
这个函数会调用执行绑定到blur事件的所有函数，包括浏览器的默认行为。可以通过返回false来防止触发浏览器的默认行为。blur事件会在元素失去焦点的时候触发，既可以是鼠标行为，也可以是按tab键离开的
参数:fnFunctionV1.0在每一个匹配元素的blur事件中绑定的处理函数。
[data],fnString,FunctionV1.4.3data:blur([Data], fn) 可传入data供函数fn处理。
fn:在每一个匹配元素的blur事件中绑定的处理函数。
描述:触发所有段落的blur事件
jQuery 代码:
$("p").blur();
描述:任何段落失去焦点时弹出一个 "Hello World!"在每一个匹配元素的blur事件中绑定的处理函数。
jQuery 代码:
$("p").blur( function () {
alert("Hello World!"); }
);
change([[data],fn])---触发每个匹配元素的change事件
这个函数会调用执行绑定到change事件的所有函数，包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。change事件会在元素失去焦点的时候触发，也会当其值在获得焦点后改变时触发。
参数:fnFunctionV1.0在每一个匹配元素的change事件中绑定的处理函数。
[data],fnString,FunctionV1.4.3data:change([Data], fn) 可传入data供函数fn处理。
fn:在每一个匹配元素的change事件中绑定的处理函数。
描述:触发被选元素的 change 事件。
jQuery 代码:
$(selector).change();
描述:给所有的文本框增加输入验证
jQuery 代码:
$("input[type='text']").change( function() {
// 这里可以写些验证代码
});
click([[data],fn])---触发每一个匹配元素的click事件。
这个函数会调用执行绑定到click事件的所有函数。
参数:fnFunctionV1.0在每一个匹配元素的click事件中绑定的处理函数。
[data],fnString,FunctionV1.4.3data:click([Data], fn) 可传入data供函数fn处理。
fn:在每一个匹配元素的click事件中绑定的处理函数。
描述:触发页面内所有段落的点击事件
jQuery 代码:
$("p").click();
描述:将页面内所有段落点击后隐藏。
jQuery 代码:
$("p").click( function () {
$(this).hide();
});
focus([[data],fn])
概述:触发每一个匹配元素的focus事件。
可以通过鼠标点击或者键盘上的TAB导航触发。这将触发所有绑定的focus函数，注意，某些对象不支持focus方法。
参数:fnFunctionV1.0在每一个匹配元素的focus事件中绑定的处理函数。
[data],fnString,FunctionV1.4.3data:focus([Data], fn) 可传入data供函数fn处理。
fn:在每一个匹配元素的focus事件中绑定的处理函数。
描述:当页面加载后将 id 为 'login' 的元素设置焦点:
jQuery 代码:
$(document).ready(function(){
$("#login").focus();
});
描述:使人无法使用文本框:
jQuery 代码:
$("input[type=text]").focus(function(){
this.blur();
});
mouseover([[data],fn])---在每一个匹配元素的mouseover事件中绑定一个处理函数。
mouseover事件会在鼠标移入对象时触发
参数：fnFunctionV1.0在每一个匹配元素的mouseover事件中绑定的处理函数。
[data],fnString,FunctionV1.4.3data:mouseover([Data], fn) 可传入data供函数fn处理。
fn:在每一个匹配元素的mouseover事件中绑定的处理函数。
描述:当鼠标指针位于元素上方时时，改变元素的背景色：
jQuery 代码:
$("p").mouseover(function(){
$("p").css("background-color","yellow");
});
mouseenter([[data],fn])---当鼠标指针穿过元素时，会发生 mouseenter 事件。该事件大多数时候会与mouseleave 事件一起使用。
与 mouseover 事件不同，只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件。
参数:fnFunctionV1.0在每一个匹配元素的mouseenter事件中绑定的处理函数。
[data],fnString,FunctionV1.4.3data:mouseenter([Data], fn) 可传入data供函数fn处理。
fn:在每一个匹配元素的mouseenter事件中绑定的处理函数。
描述:当鼠标指针进入（穿过）元素时，改变元素的背景色：
jQuery 代码:
$("p").mouseenter(function(){
$("p").css("background-color","yellow");
});
scroll([[data],fn])---在每一个匹配元素的scroll事件中绑定一个处理函数。当滚动条发生变化时触发
参数:fnFunctionV1.0在每一个匹配元素的scroll事件中绑定的处理函数。
[data],fnString,FunctionV1.4.3data:scroll([Data], fn) 可传入data供函数fn处理。
fn:在每一个匹配元素的scroll事件中绑定的处理函数。
描述:当页面滚动条变化时，执行的函数:
jQuery 代码:
$(window).scroll( function() { /* ...do something... */ } );
select([[data],fn])---触发每一个匹配元素的select事件
这个函数会调用执行绑定到select事件的所有函数，包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。
参数:fnFunctionV1.0在每一个匹配元素的select事件中绑定的处理函数。
[data],fnString,FunctionV1.4.3data:select([Data], fn) 可传入data供函数fn处理。
fn:在每一个匹配元素的select事件中绑定的处理函数。
描述:触发所有input元素的select事件:
jQuery 代码:
$("input").select();
submit([[data],fn])---触发每一个匹配元素的submit事件。
这个函数会调用执行绑定到submit事件的所有函数，包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。
参数:fnFunctionV1.0在每一个匹配元素的submit事件中绑定的处理函数。
[data],fnString,FunctionV1.4.3data:submit([Data], fn) 可传入data供函数fn处理。
fn:在每一个匹配元素的submit事件中绑定的处理函数。
描述:提交本页的第一个表单:
jQuery 代码:
$("form:first").submit();
描述:如果你要阻止表单提交:
jQuery 代码:
$("form").submit( function () {
return false;
} );
七、动画效果
show([speed,[easing],[fn]])---显示隐藏的匹配元素。
这个就是 'show( speed, [callback] )' 无动画的版本。如果选择的元素是可见的，这个方法将不会改变任何东西。无论这个元素是通过hide()方法隐藏的还是在CSS里设置了display:none;，这个方法都将有效。
参数speed[,fn]Number/String,FunctionV1.0speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
fn:在动画完成时执行的函数，每个元素执行一次。
[speed],[easing],[fn]Number/String,String,FunctionV1.4.3speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn:在动画完成时执行的函数，每个元素执行一次。
描述:将隐藏的段落用将近4秒的时间显示出来。。。并在之后执行一个反馈。。。
HTML 代码:
<p style="display: none">Hello</p>
jQuery 代码:
$("p").show(4000,function(){
$(this).text("Animation Done...");
});
hide([speed,[easing],[fn]])---隐藏显示的元素
这个就是 'hide( speed, [callback] )' 的无动画版。如果选择的元素是隐藏的，这个方法将不会改变任何东西。
参数:speed[,fn]Number/String,FunctionV1.0speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
fn:在动画完成时执行的函数，每个元素执行一次。
[speed],[easing],[fn]Number/String,String,FunctionV1.4.3speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn:在动画完成时执行的函数，每个元素执行一次。
描述:隐藏所有段落
jQuery 代码:
$("p").hide()
描述:用600毫秒的时间将段落缓慢的隐藏
jQuery 代码:
$("p").hide("slow");
描述:用200毫秒将段落迅速隐藏，之后弹出一个对话框。
jQuery 代码:
$("p").hide("fast",function(){
alert("Animation Done.");
});
toggle([speed],[easing],[fn])---用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。
如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
参数：fn,fn2,[fn3,fn4,...]Function,....V1.0fn:第一数次点击时要执行的函数。
fn2:第二数次点击时要执行的函数。
fn3,fn4,...:更多次点击时要执行的函数。
[speed] [,fn]String,FunctionV1.0speed: 隐藏/显示 效果的速度。默认是 "0"毫秒。可能的值：slow，normal，fast。"
fn:在动画完成时执行的函数，每个元素执行一次。
[speed], [easing ], [fn ] String,String,FunctionV1.4.3speed: 隐藏/显示 效果的速度。默认是 "0"毫秒。可能的值：slow，normal，fast。"
easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
fn:在动画完成时执行的函数，每个元素执行一次。
switch BooleanV1.3用于确定显示/隐藏的开关。如：true - 显示元素，false - 隐藏元素
无参数描述:对表格切换显示/隐藏
jQuery 代码:
$('td).toggle();
描述:对表格的切换一个类
jQuery 代码:
$("td").toggle(
function () {
$(this).addClass("selected");
},
function () {
$(this).removeClass("selected");
}
);
1.基本效果演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.2.1.min.js"></script>
<script>
$(function () {
/*动画效果演示*/
$("#btn1").click(function () {
$("#div1").show(3000,"linear",function () {
alert("展示完毕")
});
})
$("#btn2").click(function () {
$("#div1").hide(3000,"linear",function () {
alert("隐藏完毕")
});
})
})
</script>
</head>
<style>
div{
background-color: lawngreen;
width: 100%;
height: 500px;
}
</style>
<body>
<div id="div1"></div>
<button id="btn1">显示动画效果</button>
<button id="btn2">隐藏广告</button>
</body>
</html>
八、属性操作
attr(name|properties|key,value|fn)设置或返回被选元素的属性值。
参数:nameStringV1.0属性名称
properties MapV1.0作为属性的“名/值对”对象
key,value String,ObjectV1.0属性名称，属性值
key,function(index, attr) String,FunctionV1.11:属性名称。
2:返回属性值的函数,第一个参数为当前元素的索引值，第二个参数为原先的属性值。
描述:返回文档中所有图像的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 });
removeAttr(name)---从每一个匹配的元素中删除一个属性
1.6以下版本在IE6使用JQuery的removeAttr方法删除disabled是无效的。解决的方法就是使用$("XX").prop("disabled",false);
1.7版本在IE6下已支持删除disabled。
参数:nameStringV1.0要删除的属性名
描述:将文档中图像的src属性删除
HTML 代码:
<img src="test.jpg"/>
jQuery 代码:$("img").removeAttr("src");
结果:[ <img /> ]
prop(name|properties|key,value|fn)---获取在匹配的元素集中的第一个元素的属性值。
随着一些内置属性的DOM元素或window对象，如果试图将删除该属性，浏览器可能会产生错误。jQuery第一次分配undefined值的属性，而忽略了浏览器生成的任何错误
参数:name StringV1.6属性名称
properties MapV1.6作为属性的“名/值对”对象
key,value String,ObjectV1.6属性名称，属性值
key,function(index, attr) String,FunctionV1.61:属性名称。
2:返回属性值的函数,第一个参数为当前元素的索引值，第二个参数为原先的属性值。
描述:选中复选框为true，没选中为false
jQuery 代码:
$("input[type='checkbox']").prop("checked");
描述:禁用页面上的所有复选框。
jQuery 代码:
$("input[type='checkbox']").prop({
disabled: true
});
描述:禁用和选中所有页面上的复选框。
jQuery 代码:
$("input[type='checkbox']").prop("disabled", false);
$("input[type='checkbox']").prop("checked", true);
描述:通过函数来设置所有页面上的复选框被选中。
jQuery 代码:
$("input[type='checkbox']").prop("checked", function( i, val ) {
return !val;
});
removeProp(name)---用来删除由.prop()方法设置的属性集
随着一些内置属性的DOM元素或window对象，如果试图将删除该属性，浏览器可能会产生错误。jQuery第一次分配undefined值的属性，而忽略了浏览器生成的任何错误
参数:propertyNameStringV1.6要删除的属性名
描述:设置一个段落数字属性，然后将其删除。
HTML 代码:
<p> </p>
jQuery 代码:var $para = $("p");
$para.prop("luggageCode", 1234);
$para.append("The secret luggage code is: ", String($para.prop("luggageCode")), ". ");
$para.removeProp("luggageCode");
$para.append("Now the secret luggage code is: ", String($para.prop("luggageCode")), ". ");
结果:The secret luggage code is: 1234. Now the secret luggage code is: undefined.
addClass(class|fn)---为每个匹配的元素添加指定的类名。
参数:classStringV1.0一个或多个要添加到元素中的CSS类名，请用空格分开
function(index, class)FunctionV1.4此函数必须返回一个或多个空格分隔的class名。接受两个参数，index参数为对象在这个集合中的索引值，class参数为这个对象原先的class属性值。
描述:为匹配的元素加上 '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])---从所有匹配的元素中删除全部或者指定的类。
参数:class StringV1.0一个或多个要删除的CSS类名，请用空格分开
function(index, class) FunctionV1.4此函数必须返回一个或多个空格分隔的class名。接受两个参数，index参数为对象在这个集合中的索引值，class参数为这个对象原先的class属性值。
参数class 描述:从匹配的元素中删除 'selected' 类
jQuery 代码:
$("p").removeClass("selected");
toggleClass(class|fn[,sw])---如果存在（不存在）就删除（添加）一个类。
参数：classStringV1.0CSS类名
class,switchString,BooleanV1.31:要切换的CSS类名.
2:用于决定元素是否包含class的布尔值。
switchBooleanV1.4用于决定元素是否包含class的布尔值。
function(index, class,switch)[, switch] Function,BooleanV1.41:用来返回在匹配的元素集合中的每个元素上用来切换的样式类名的一个函数。接收元素的索引位置和元素旧的样式类作为参数。
2: 一个用来判断样式类添加还是移除的 boolean 值。
描述:为匹配的元素切换 'selected' 类
jQuery 代码:
$("p").toggleClass("selected");
html([val|fn])---取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。
在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容。 如果选择器匹配多于一个的元素，那么只有第一个匹配元素的 HTML 内容会被获取。
参数:valStringV1.0用于设定HTML内容的值
function(index, html)FunctionV1.4此函数返回一个HTML字符串。接受两个参数，index为元素在集合中的索引位置，html为原先的HTML值。
描述:返回p元素的内容。
jQuery 代码:
$('p').html();
描述:设置所有 p 元素的内容
jQuery 代码:
$("p").html("Hello <b>world</b>!");
描述:使用函数来设置所有匹配元素的内容。
jQuery 代码:
$("p").html(function(n){
return "这个 p 元素的 index 是：" + n;
});
text([val|fn])---取得所有匹配元素的内容。
结果是由所有匹配元素包含的文本内容组合起来的文本。这个方法对HTML和XML文档都有效。
参数:valStringV1.0用于设置元素内容的文本
function(index, text)FunctionV1.4此函数返回一个字符串。接受两个参数，index为元素在集合中的索引位置，text为原先的text值。
描述:返回p元素的文本内容。
jQuery 代码:
$('p').text();
描述:设置所有 p 元素的文本内容
jQuery 代码:
$("p").text("Hello world!");
描述:使用函数来设置所有匹配元素的文本内容。
jQuery 代码:
$("p").text(function(n){
return "这个 p 元素的 index 是：" + n;
});
val([val|fn|arr])---获得匹配元素的当前值。
在 jQuery 1.2 中,可以返回任意元素的值了。包括select。如果多选，将返回一个数组，其包含所选的值。
参数:valStringV1.0要设置的值。
function(index, value)FunctionV1.4此函数返回一个要设置的值。接受两个参数，index为元素在集合中的索引位置，text为原先的text值。
arrayArray<String>V1.0用于 check/select 的值
描述:获取文本框中的值
jQuery 代码:
$("input").val();
描述:设定文本框的值
jQuery 代码:
$("input").val("hello world!");
描述:设定文本框的值
jQuery 代码:
$('input:text.items').val(function() {
return this.value + ' ' + this.className;
});
描述:设定一个select和一个多选的select的值
HTML 代码:
<select id="single">
<option>Single</option>
<option>Single2</option>
</select>
<select id="multiple" multiple="multiple">
<option selected="selected">Multiple</option>
<option>Multiple2</option>
<option selected="selected">Multiple3</option>
</select><br/>
<input type="checkbox" value="check1"/> check1
<input type="checkbox" value="check2"/> check2
<input type="radio" value="radio1"/> radio1
<input type="radio" value="radio2"/> radio2
jQuery 代码:
$("#single").val("Single2");
$("#multiple").val(["Multiple2", "Multiple3"]);
$("input").val(["check2", "radio1"]);
九、元素遍历的方式
