03_jQuery 事件和动画
一、事件
页面载入
ready(fn)
当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。
简单地说，这个方法纯粹是对向window.load事件注册事件的替代方法。通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数，而99.99%的JavaScript函数都需要在那一刻执行。
有一个参数－－对jQuery函数的引用－－会传递到这个ready事件处理函数中。可以给这个参数任意起一个名字，并因此可以不再担心命名冲突而放心地使用$别名。
请确保在 <body> 元素的onload事件中没有注册函数，否则不会触发+$(document).ready()事件。
可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照（代码中的）先后顺序依次执行。
示例代码：
<script>
// 在DOM加载完成时运行的代码，可以这样写：
$(document).ready(function(){
// 在这里写你的代码...
});
// 使用 $(document).ready() 的简写，同时内部的 jQuery 代码依然使用 $ 作为别名，而不管全局的 $ 为何。
$(function($) {
// 你可以在这里继续使用$作为别名...
});
</script>
事件处理
on(eve,[sel],[data],fn)1.7+
在选择元素上绑定一个或多个事件的事件处理函数。
on()方法绑定事件处理程序到当前选定的jQuery对象中的元素。在jQuery 1.7中，.on()方法 提供绑定事件处理程序所需的所有功能。帮助从旧的jQuery事件方法转换，see .bind(), .delegate(), 和 .live(). 要删除的.on()绑定的事件，请参阅.off()。要附加一个事件，只运行一次，然后删除自己， 请参阅.one()
参数：
events,[selector],[data],fn：
events:一个或多个用空格分隔的事件类型和可选的命名空间，如"click"或"keydown.myPlugin" 。
selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的< null或省略，当它到达选定的元素，事件总是触发。
data:当一个事件被触发时要传递event.data给事件处理函数。
fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。
示例代码：
<script>
// 在点击时显示一个段落的文本:
$("p").on("click", function(){
alert( $(this).text() );
});
// 将数据传递给事件处理程序，这里通过名称指定:
function myHandler(event) {
alert(event.data.foo);
}
$("p").on("click", {foo: "bar"}, myHandler)
// 取消表单提交动作，并通过返回false防止事件冒泡:
$("form").on("submit", false)
// 使用. preventdefault()取消默认操作。
$("form").on("submit", function(event) {
event.preventDefault();
});
// 使用. stoppropagation()在不阻止表单提交的情况下阻止提交事件冒泡。
$("form").on("submit", function(event) {
event.stopPropagation();
});
</script>
off(eve,[sel],[fn])1.7+
在选择元素上移除一个或多个事件的事件处理函数。
off() 方法移除用.on()绑定的事件处理程序。
参数：
events,[selector],[fn]：
events:一个或多个空格分隔的事件类型和可选的命名空间，或仅仅是命名空间，比如"click", "keydown.myPlugin", 或者 ".myPlugin".
selector:一个最初传递到.on()事件处理程序附加的选择器。
fn:事件处理程序函数以前附加事件上，或特殊值false.
示例代码：
<script>
// 从所有段落中删除所有事件处理程序:
$("p").off()
// 从所有段落中删除所有委托的单击处理程序:
$("p").off( "click", "**" )
</script>
bind(type,[data],fn)
为每个匹配元素的特定事件绑定事件处理函数。
参数：
type,[data],function(eventObject)：
type: 含有一个或多个事件类型的字符串，由空格分隔多个事件。比如"click"或"submit"，还可以是自定义事件名。
data:作为event.data属性值传递给事件对象的额外数据对象
fn:绑定到每个匹配元素的事件上面的处理函数
type,[data],false:
false: 将第三个参数设置为false会使默认的动作失效。
events:
一个或多个事件类型的字符串和函数的数据映射来执行他们。
示例代码：
<script>
// 当每个段落被点击的时候，弹出其文本。
$("p").bind("click", function(){
alert( $(this).text() );
});
// 同时绑定多个事件类型
$('#foo').bind('mouseenter mouseleave', function() {
$(this).toggleClass('entered');
});
// 同时绑定多个事件类型/处理程序
$("button").bind({
click: function () {
$("p").slideToggle();
},
mouseover: function () {
$("body").css("background-color", "red");
},
mouseout: function () {
$("body").css("background-color", "#FFFFFF");
}
});
// 你可以在事件处理之前传递一些附加的数据。
function handler(event) {
alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler)
// 通过返回false来取消默认的行为并阻止事件起泡。
$("form").bind("submit", function() { return false; })
// 通过使用 preventDefault() 方法只取消默认的行为。
$("form").bind("submit", function(event){
event.preventDefault();
});
// 通过使用 stopPropagation() 方法只阻止一个事件起泡。
$("form").bind("submit", function(event){
event.stopPropagation();
});
</script>
one(type,[data],fn)
为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。
在每个对象上，这个事件处理函数只会被执行一次。其他规则与bind()函数相同。这个事件处理函数会接收到一个事件对象，可以通过它来阻止（浏览器）默认的行为。如果既想取消默认的行为，又想阻止事件起泡，这个事件处理函数必须返回false。
多数情况下，可以把事件处理函数定义为匿名函数（见示例一）。在不可能定义匿名函数的情况下，可以传递一个可选的数据对象作为第二个参数（而事件处理函数则作为第三个参数），见示例二。
参数：
type,[data],fn：
type:添加到元素的一个或多个事件。由空格分隔多个事件。必须是有效的事件。
data:将要传递给事件处理函数的数据映射
fn:每当事件触发时执行的函数。
示例代码：
<script>
// 当所有段落被第一次点击的时候，显示所有其文本。
$("p").one("click", function(){
alert( $(this).text() );
});
</script>
trigger(type,[data])
在每一个匹配的元素上触发某类事件。
这个函数也会导致浏览器同名的默认行为的执行
所有触发的事件现在会冒泡到DOM树上了。举例来说，如果你在一个段落p上触发一个事件，他首先会在这个元素上触发，其次到父元素，在到父元素的父元素，直到触发到document对象。这个事件对象有一个 .target 属性指向最开始触发这个事件的元素。你可以用 stopPropagation() 来阻止事件冒泡，或者在事件处理函数中返回false即可。
参数：
type,[data]：
type:一个事件对象或者要触发的事件类型
data:传递给事件处理函数的附加参数
示例代码：
<script>
// 提交第一个表单，但不用submit()
$("form:first").trigger("submit")
// 给一个事件传递参数
$("p").click(function (event, a, b) {
// 一个普通的点击事件时，a和b是undefined类型
// 如果用下面的语句触发，那么a指向"foo",而b指向"bar"
console.log(a + " " + b)
}).trigger("click", ["foo", "bar"]);
// 下面的代码可以显示一个"Hello World"
$("p").bind("myEvent", function (event, message1, message2) {
alert(message1 + ' ' + message2);
});
$("p").trigger("myEvent", ["Hello","World!"]);
</script>
triggerHandler(type, [data])
这个特别的方法将会触发指定的事件类型上所有绑定的处理函数。但不会执行浏览器默认动作，也不会产生事件冒泡。
这个方法的行为表现与trigger类似，但有以下三个主要区别：
第一，他不会触发浏览器默认事件。
第二，只触发jQuery对象集合中第一个元素的事件处理函数。
第三，这个方法的返回的是事件处理函数的返回值，而不是据有可链性的jQuery对象。此外，如果最开始的jQuery对象集合为空，则这个方法返回 undefined 。
参数：
type,[data]：
type:要触发的事件类型
data:传递给事件处理函数的附加参数
示例代码：
<button id="old">.trigger("focus")</button>
<button id="new">.triggerHandler("focus")</button><br /><br />
<input type="text" value="To Be Focused" />
<script>
// 如果你对一个focus事件执行了 .triggerHandler() ，浏览器默认动作将不会被触发，只会触发你绑定的动作。
$("#old").click(function () {
$("input").trigger("focus");
});
$("#new").click(function () {
$("input").triggerHandler("focus");
});
$("input").focus(function () {
$("<span>Focused!</span>").appendTo("body").fadeOut(1000);
});
</script>
unbind(t,[d|f])
bind()的反向操作，从每一个匹配的元素中删除绑定的事件。
如果没有参数，则删除所有绑定的事件。
你可以将你用bind()注册的自定义事件取消绑定。
如果提供了事件类型作为参数，则只删除该类型的绑定事件。
如果把在绑定时传递的处理函数作为第二个参数，则只有这个特定的事件处理函数会被删除。
参数：
type,[fn]：
type:删除元素的一个或多个事件,由空格分隔多个事件值。
fn:要从每个匹配元素的事件中反绑定的事件处理函数
type,false：
type:删除元素的一个或多个事件,由空格分隔多个事件值
false:设置为false会使默认的动作失效。
eventObj：
事件对象。这个 eventObj 参数来自事件绑定函数
示例代码：
<script>
// 把所有段落的所有事件取消绑定
$("p").unbind()
// 将段落的click事件取消绑定
$("p").unbind( "click" )
// 删除特定函数的绑定，将函数作为第二个参数传入
var foo = function () {
// 处理某个事件的代码
};
$("p").bind("click", foo); // ... 当点击段落的时候会触发 foo
$("p").unbind("click", foo); // ... 再也不会被触发 foo
</script>
事件委派
delegate(s,[t],[d],fn)
指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。
使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。
参数：
selector,[type],fn：
selector:选择器字符串，用于过滤器触发事件的元素。
type:附加到元素的一个或多个事件。 由空格分隔多个事件值。必须是有效的事件。
fn:当事件发生时运行的函数
selector,[type],[data],fn：
data:传递到函数的额外数据
selector,events：
events:一个或多个事件类型的字符串和函数的数据映射来执行他们。
示例代码：
<div style="background-color:red">
<p>这是一个段落。</p>
<button>请点击这里</button>
</div>
<script>
// 当点击鼠标时，隐藏或显示 p 元素：
$("div").delegate("button","click",function(){
$("p").slideToggle();
});
</script>
undelegate([s,[t],fn])
删除由 delegate() 方法添加的一个或多个事件处理程序。
参数：
selector,[type],fn：
selector:需要删除事件处理程序的选择器。
type:需要删除处理函数的一个或多个事件类型。 由空格分隔多个事件值。必须是有效的事件。
fn:要删除的具体事件处理函数。
selector,events：
selector:需要删除事件处理程序的选择器。
events:一个或多个事件类型的字符串和函数的数据映射来执行他们。
示例代码：
<script>
// 从p元素删除由 delegate() 方法添加的所有事件处理器：
$("p").undelegate();
// 从p元素删除由 delegate() 方法添加的所有click事件处理器：
$("p").undelegate( "click" )
</script>
事件切换
hover([over,]out)
一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。
当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。而且，会伴随着对鼠标是否仍然处在特定元素中的检测（例如，处在div中的图像），如果是，则会继续保持“悬停”状态，而不触发移出事件（修正了使用mouseout事件的一个常见错误）。
参数：
over,out：
over:鼠标移到元素上要触发的函数
out:鼠标移出元素要触发的函数
示例代码：
<script>
// over,out 描述:鼠标悬停的表格加上特定的类
$("td").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);
// out 描述:hover()方法通过绑定变量"handlerInOut"来切换方法。
$("td").bind("mouseenter mouseleave",handlerInOut);
$("td").hover(handlerInOut);
</script>
事件
blur([[data],fn])
当元素失去焦点时触发 blur 事件。
这个函数会调用执行绑定到blur事件的所有函数，包括浏览器的默认行为。可以通过返回false来防止触发浏览器的默认行为。blur事件会在元素失去焦点的时候触发，既可以是鼠标行为，也可以是按tab键离开的
change([[data],fn])
当元素的值发生改变时，会发生 change 事件。
该事件仅适用于文本域（text field），以及 textarea 和 select 元素。当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，该事件会在元素失去焦点时发生。
click([[data],fn])
触发每一个匹配元素的click事件。
这个函数会调用执行绑定到click事件的所有函数。
dblclick([[data],fn])
当双击元素时，会发生 dblclick 事件。
当鼠标指针停留在元素上方，然后按下并松开鼠标左键时，就会发生一次 click。在很短的时间内发生两次 click，即是一次 double click 事件。提示：如果把 dblclick 和 click 事件应用于同一元素，可能会产生问题。
error([[data],fn])
当元素遇到错误（没有正确载入）时，发生 error 事件。
这个函数会调用所有绑定到error事件上的函数，包括在对应元素上的浏览器默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。error事件通常可以在元素由于点击或者tab导航失去焦点时触发。
对于error事件，没有一个公众的标准。在大多数浏览器中，当页面的JavaScript发生错误时，window对象会触发error事件;当图像的src属性无效时，比如文件不存在或者图像数据错误时，也会触发图像对象的error事件。
focus([[data],fn])
当元素获得焦点时，触发 focus 事件。
可以通过鼠标点击或者键盘上的TAB导航触发。这将触发所有绑定的focus函数，注意，某些对象不支持focus方法。
focusin([data],fn)
当元素获得焦点时，触发 focusin 事件。
focusin事件跟focus事件区别在于，他可以在父元素上检测子元素获取焦点的情况。
focusout([data],fn)
当元素失去焦点时触发 focusout 事件。
focusout事件跟blur事件区别在于，他可以在父元素上检测子元素失去焦点的情况。
keydown([[data],fn])
当键盘或按钮被按下时，发生 keydown 事件。
注释：如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生。
keypress([[data],fn])
当键盘或按钮被按下时，发生 keypress 事件。
keypress 事件与 keydown 事件类似。当按钮被按下时，会发生该事件。它发生在当前获得焦点的元素上。 不过，与 keydown 事件不同，每插入一个字符，就会发生 keypress 事件。注释：如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生。
keyup([[data],fn])
当按钮被松开时，发生 keyup 事件。它发生在当前获得焦点的元素上。
注释：如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生。
mousedown([[data],fn])
当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。
mousedown 与 click 事件不同，mousedown 事件仅需要按键被按下，而不需要松开即可发生。
mouseenter([[data],fn])
当鼠标指针穿过元素时，会发生 mouseenter 事件。该事件大多数时候会与mouseleave 事件一起使用。
与 mouseover 事件不同，只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件。
mouseleave([[data],fn])
当鼠标指针离开元素时，会发生 mouseleave 事件。该事件大多数时候会与mouseenter 事件一起使用。
与 mouseout 事件不同，只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。如果鼠标指针离开任何子元素，同样会触发 mouseout 事件。
mousemove([[data],fn])
当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件。
mousemove事件处理函数会被传递一个变量——事件对象，其.clientX 和 .clientY 属性代表鼠标的坐标
mouseout([[data],fn])
当鼠标指针从元素上移开时，发生 mouseout 事件。
该事件大多数时候会与 mouseover 事件一起使用。
注释：与 mouseleave 事件不同，不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。请看下面例子的演示。
mouseover([[data],fn])
当鼠标指针位于元素上方时，会发生 mouseover 事件。
该事件大多数时候会与 mouseout 事件一起使用。
注释：与 mouseenter 事件不同，不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。请看下面例子的演示。
mouseup([[data],fn])
当在元素上放松鼠标按钮时，会发生 mouseup 事件。
与 click 事件不同，mouseup 事件仅需要放松按钮。当鼠标指针位于元素上方时，放松鼠标按钮就会触发该事件。
resize([[data],fn])
当调整浏览器窗口的大小时，发生 resize 事件。
scroll([[data],fn])
当用户滚动指定的元素时，会发生 scroll 事件。
scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）。
select([[data],fn])
当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。
这个函数会调用执行绑定到select事件的所有函数，包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。
submit([[data],fn])
当提交表单时，会发生 submit 事件。
该事件只适用于表单元素。
unload([[data],fn])
在当用户离开页面时，会发生 unload 事件。
具体来说，当发生以下情况时，会发出 unload 事件：
点击某个离开页面的链接
在地址栏中键入了新的 URL
使用前进或后退按钮
关闭浏览器
重新加载页面
参数：
fn：
在每一个匹配元素的blur事件中绑定的处理函数。
[data],fn：
data:可传入data供函数fn处理。
fn:在每一个匹配元素的blur事件中绑定的处理函数。
示例代码：
<script>
// 触发所有段落的blur事件
$("p").blur();
// 任何段落失去焦点时弹出一个 "Hello World!"在每一个匹配元素的blur事件中绑定的处理函数。
$("p").blur( function () { alert("Hello World!"); } );
// 给所有的文本框增加输入验证
$("input[type='text']").change( function() {
// 这里可以写些验证代码
});
// 触发页面内所有段落的点击事件
$("p").click();
// 将页面内所有段落点击后隐藏。
$("p").click( function () { $(this).hide(); });
// 给页面上每个段落的双击事件绑上 "Hello World!" 警告框
$("p").dblclick( function () { alert("Hello World!"); });
// 在服务器端记录JavaScript错误日志:
$(window).error(function(msg, url, line){
jQuery.post("js_error_log.php", { msg: msg, url: url, line: line });
});
// 隐藏JavaScript错误:
$(window).error(function(){
return true;
});
// 当页面加载后将 id 为 'login' 的元素设置焦点:
$(document).ready(function(){
$("#login").focus();
});
// 使人无法使用文本框:
$("input[type=text]").focus(function(){
this.blur();
});
// 获得焦点后会触发动画:
$("p").focusin(function() {
$(this).find("span").css('display','inline').fadeOut(1000);
});
// 失去焦点后会触发动画:
$("p").focusout(function() {
$(this).find("span").css('display','inline').fadeOut(1000);
});
// 在页面内对键盘按键做出回应，可以使用如下代码:
$(window).keydown(function(event){
switch(event.keyCode) {
// ...
// 不同的按键可以做不同的事情
// 不同的浏览器的keycode不同
// 更多详细信息: http://unixpapa.com/js/key.html
// ...
}
});
// 计算在输入域中的按键次数：
$("input").keydown(function(){ $("span").text(i+=1);});
// 当按下按键时，改变文本域的颜色：
$("input").keyup(function(){
$("input").css("background-color","#D6D6FF");
});
// 当按下鼠标按钮时，隐藏或显示元素：
$("button").mousedown(function(){
$("p").slideToggle();
});
// 当鼠标指针进入（穿过）元素时，改变元素的背景色：
$("p").mouseenter(function(){
$("p").css("background-color","yellow");
});
// 当鼠标指针离开元素时，改变元素的背景色：
$("p").mouseleave(function(){
$("p").css("background-color","#E9E9E4");
});
// 获得鼠标指针在页面中的位置：
$(document).mousemove(function(e){
$("span").text(e.pageX + ", " + e.pageY);
});
// 当鼠标从元素上移开时，改变元素的背景色：
$("p").mouseout(function(){
$("p").css("background-color","#E9E9E4");
});
// 当鼠标指针位于元素上方时时，改变元素的背景色：
$("p").mouseover(function(){
$("p").css("background-color","yellow");
});
// 当松开鼠标按钮时，隐藏或显示元素：
$("button").mouseup(function(){
$("p").slideToggle();
});
// 让人每次改变页面窗口的大小时很郁闷的方法:
$(window).resize(function(){
alert("Stop it!");
});
// 当页面滚动条变化时，执行的函数:
$(window).scroll( function() { /* ...do something... */ } );
// 触发所有input元素的select事件:
$("input").select();
// 当文本框中文本被选中时执行的函数:
$(":text").select( function () { /* ...do something... */ } );
// 提交本页的第一个表单:
$("form:first").submit();
// 如果你要阻止表单提交:
$("form").submit( function () {
return false;
} );
// 页面卸载的时候弹出一个警告框:
$(window).unload( function () { alert("Bye now!"); } );
</script>
事件对象
eve.currentTarget
在事件冒泡阶段中的当前DOM元素
eve.data
当前执行的处理器被绑定的时候，包含可选的数据传递给jQuery.fn.bind
eve.delegateTarget1.7+
当currently-called的jQuery事件处理程序附加元素。
此属性是最经常有用是通过过.delegate() 或.on()附加委派的事件，事件处理程序附加在正在处理的元素的祖先上。
对于非授权的事件处理程序，直接连接到一个元素，event.delegateTarget 总是等价于event.currentTarget.
eve.isDefaultPrevented()
根据事件对象中是否调用过 event.preventDefault() 方法来返回一个布尔值。
eve.isImmediatePropag...()
根据事件对象中是否调用过 event.stopImmediatePropagation() 方法来返回一个布尔值。
eve.isPropagationStopped()
根据事件对象中是否调用过 event.stopPropagation() 方法来返回一个布尔值。
eve.namespace
当事件被触发时此属性包含指定的命名空间。
eve.pageX
鼠标相对于文档的左边缘的位置。
eve.pageY
鼠标相对于文档的上边缘的位置
eve.preventDefault()
阻止默认事件行为的触发。
例如，在执行这个方法后，如果点击一个锚点，就不会让浏览器跳转到新的 URL 去了。我们可以用 event.isDefaultPrevented() 来确定这个方法是否(在那个事件对象上)调用过了。
eve.relatedTarget
在事件中涉及的其它任何DOM元素。
对于 mouseout 事件，它指向被进入的元素；对于 mousein 事件，它指向被离开的元素。
eve.result
这个属性包含了当前事件事件最后触发的那个处理函数的返回值，除非值是 undefined 。
eve.stopImmediatePro...()
阻止剩余的事件处理函数执行并且防止事件冒泡到DOM树上。
eve.stopPropagation()
防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数。
eve.target
最初触发事件的DOM元素。
eve.timeStamp
这个属性返回事件触发时距离1970年1月1日的毫秒数。
这可以很方便的检测某个jQuery函数的性能。
eve.type
返回事件类型
eve.which
针对键盘和鼠标事件，这个属性能确定你到底按的是哪个键或按钮。
event.which 将 event.keyCode 和 event.charCode 标准化了。推荐用 event.which 来监视键盘输入。
注：
stopPropagation与stopImmediatePropagation的区别：
https://blog.csdn.net/weixin_42420703/article/details/104585427
示例代码：
<button>display event.namespace</button>
<p></p>
<script>
// currentTarget的匹配`this`关键字。
$("p").click(function(event) {
alert( event.currentTarget === this ); // true
});
// 获取绑定的数据
$("a").each(function(i) {
$(this).bind('click', {index:i}, function(e){
alert('my index is ' + e.data.index);
});
});
// 当单击任何box类中的按钮时，将box的背景颜色更改为红色。
$(".box").on("click", "button", function (event) {
$(event.delegateTarget).css("background-color", "red");
});
// 检测 event.preventDefault() 是否被调用过。
$("a").click(function(event){
alert( event.isDefaultPrevented() ); // false
event.preventDefault();
alert( event.isDefaultPrevented() ); // true
});
// 检测 event.stopImmediatePropagation() 是否被调用过。
$("button").click(function(event) {
immediatePropStopped(event);
event.stopImmediatePropagation();
immediatePropStopped(event);
});
// 确定事件在命名空间中使用。
$("p").bind("test.something", function (event) {
alert(event.namespace);
});
$("button").click(function (event) {
$("p").trigger("test.something");
});
// 显示鼠标相对于文件的左侧和顶部边缘的位置
$(document).bind('mousemove',function(e){
$("#log").text("e.pageX: " + e.pageX + ", e.pageY: " + e.pageY);
});
// 在鼠标离开锚时，提醒输入的元素类型。
$("a").mouseout(function (event) {
alert(event.relatedTarget.nodeName); // "BODY"
});
// 显示前一个事件处理函数的返回值。
$("button").click(function(event) { return "hey"; });
$("button").click(function(event) {
$("p").html( event.result );
});
// 阻止调用其它事件处理函数。
$("p").click(function (event) {
event.stopImmediatePropagation();
});
$("p").click(function (event) {
// This function won't be executed
$(this).css("background-color", "#f00");
});
$("div").click(function (event) {
// This function will be executed
$(this).css("background-color", "#f00");
});
// 灭掉click事件的冒泡。
$("p").click(function(event){
event.stopPropagation(); // do something
});
</script>
<input id="whichkey" value="type something">
<div id="log"></div>
<script>
$('#whichkey').bind('keydown',function(e){
$('#log').html(e.type + ': ' + e.which ); });
</script>
二、动画方法
jQuery动画是什么？
jQuery提供的一组网页中常见的动画效果，这些动画是标准的、有规律的效果；同时还提供给我们了自定义动画的功能。
基本动画
show([s,[e],[fn]])
显示隐藏的匹配元素。
这个就是 'show( speed, [callback] )' 无动画的版本。如果选择的元素是可见的，这个方法将不会改变任何东西。无论这个元素是通过hide()方法隐藏的还是在CSS里设置了display:none;，这个方法都将有效。
参数：
speed[,fn]：
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
fn:在动画完成时执行的函数，每个元素执行一次。
[speed],[easing],[fn]：
easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
示例代码：
<p style="display: none">Hello</p>
<script>
// 显示所有段落
$("p").show()
// 用缓慢的动画将隐藏的段落显示出来，历时600毫秒。
$("p").show("slow");
// 用迅速的动画将隐藏的段落显示出来，历时200毫秒。并在之后执行反馈！
$("p").show("fast",function(){
$(this).text("Animation Done!");
});
// 将隐藏的段落用将近4秒的时间显示出来。。。并在之后执行一个反馈。。。
$("p").show(4000,function(){
$(this).text("Animation Done...");
});
</script>
hide([s,[e],[fn]])
隐藏显示的元素
这个就是 'hide( speed, [callback] )' 的无动画版。如果选择的元素是隐藏的，这个方法将不会改变任何东西。
参数同上
示例代码：
<script>
// 隐藏所有段落
$("p").hide()
// 用600毫秒的时间将段落缓慢的隐藏
$("p").hide("slow");
// 用200毫秒将段落迅速隐藏，之后弹出一个对话框。
$("p").hide("fast",function(){
alert("Animation Done.");
});
</script>
滑动动画
slideDown([s],[e],[fn])
通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。
这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来。在jQuery 1.3中，上下的padding和margin也会有动画，效果更流畅。
参数同上
示例代码：
<script>
// 以滑动方式显示隐藏的 <p> 元素：
$(".btn2").click(function(){
$("p").slideDown();
});
// 用600毫秒缓慢的将段落滑下
$("p").slideDown("slow");
// 用200毫秒快速将段落滑下，之后弹出一个对话框
$("p").slideDown("fast",function(){
alert("Animation Done.");
});
</script>
slideUp([s,[e],[fn]])
通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。
这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏起来。在jQuery 1.3中，上下的padding和margin也会有动画，效果更流畅。
参数同上
示例代码：
<script>
// 用600毫秒缓慢的将段落滑上
$("p").slideUp("slow");
// 用200毫秒快速将段落滑上，之后弹出一个对话框
$("p").slideUp("fast",function(){
alert("Animation Done.");
});
</script>
slideToggle([s],[e],[fn])
通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。
这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏或显示。在jQuery 1.3中，上下的padding和margin也会有动画，效果更流畅。
参数同上
示例代码：
<script>
// 用600毫秒缓慢的将段落滑上或滑下
$("p").slideToggle("slow");
// 用200毫秒快速将段落滑上或滑下，之后弹出一个对话框
$("p").slideToggle("fast",function(){
alert("Animation Done.");
});
</script>
淡入淡出动画
fadeIn([s],[e],[fn])
通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
参数同上
示例代码：
<script>
// 用600毫秒缓慢的将段落淡入
$("p").fadeIn("slow");
// 用200毫秒快速将段落淡入，之后弹出一个对话框
("p").fadeIn("fast",function(){
alert("Animation Done.");
});
</script>
fadeOut([s],[e],[fn])
通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
参数同上
示例代码：
<script>
// 用600毫秒缓慢的将段落淡出
$("p").fadeOut("slow");
// 用200毫秒快速将段落淡出，之后弹出一个对话框
$("p").fadeOut("fast",function(){
alert("Animation Done.");
});
</script>
fadeTo([[s],o,[e],[fn]])
把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
参数：
opacity：
opacity:一个0至1之间表示透明度的数字。
其他参数同上
示例代码：
<script>
// 使用淡入效果来显示一个隐藏的 <p> 元素：
$(".btn2").click(function(){
$("p").fadeIn();
});
// 用600毫秒缓慢的将段落的透明度调整到0.66，大约2/3的可见度
$("p").fadeTo("slow", 0.66);
// 用200毫秒快速将段落的透明度调整到0.25，大约1/4的可见度，之后弹出一个对话框
$("p").fadeTo("fast", 0.25, function(){
alert("Animation Done.");
});
</script>
fadeToggle([s,[e],[fn]])
通过不透明度的变化来开关所有匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数。
这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
参数同上
示例代码：
<script>
// 用600毫秒缓慢的将段落淡入
$("p").fadeToggle("slow","linear");
// 用200毫秒快速将段落淡入，之后弹出一个对话框
$("p").fadeToggle("fast",function(){
alert("Animation Done.");
});
</script>
<div id="log"></div>
<script>
function fn() {
$(this).fadeToggle(1000, fn);
}
$('#log').fadeToggle(1000, fn)
</script>
jQuery动画使用方法总结：
自定义动画
animate(p,[s],[e],[fn])1.8*
用于创建自定义动画的函数。
这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性（如“height”、“top”或“opacity”）。注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left.
而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值，样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值，则会为该属性调用默认的动画形式。
在 jQuery 1.2 中，你可以使用 em 和 % 单位。另外，在 jQuery 1.2 中，你可以通过在属性值前面指定 "<em>+=</em>" 或 "<em>-=</em>" 来让元素做相对运动。
jQuery 1.3中，如果duration设为0则直接完成动画。而在以前版本中则会执行默认动画。
jQuery 1.8中，当你使用CSS属性在css()或animate()中，我们将根据浏览器自动加上前缀(在适当的时候)，比如("user-select", "none"); 在Chrome/Safari浏览器中我们将设置为"-webkit-user-select", Firefox会使用"-moz-user-select", IE10将使用"-ms-user-select".
参数：
params,[speed],[easing],[fn]：
params:一组包含作为动画属性和终值的样式属性和及其值的集合
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".
fn:在动画完成时执行的函数，每个元素执行一次。
params,options：
params::一组包含作为动画属性和终值的样式属性和及其值的集合
options:动画的额外选项。如：speed - 设置动画的速度,easing - 规定要使用的 easing 函数,callback - 规定动画完成之后要执行的函数,step - 规定动画的每一步完成之后要执行的函数,queue - 布尔值。指示是否在效果队列中放置动画。如果为 false，则动画将立即开始,specialEasing - 来自 styles 参数的一个或多个 CSS 属性的映射，以及它们的对应 easing 函数
示例代码：
<button id="go"> Run</button>
<div id="block">Hello!</div>
<script>
// 点击按钮后div元素的几个不同属性一同变化
// 在一个动画中同时应用三种类型的效果
$("#go").click(function(){
$("#block").animate({
width: "90%",
height: "100%",
fontSize: "10em",
borderWidth: 10
}, 1000 );
});
</script>
<button id="left">«</button> <button id="right">»</button>
<div class="block"></div>
<script>
// 让指定元素左右移动
$("#right").click(function(){
$(".block").animate({left: '+50px'}, "slow");
});
$("#left").click(function(){
$(".block").animate({left: '-50px'}, "slow");
});
// 更神奇的是
// 让指定元素左右移动
$("#right").click(function () {
$(".block").animate({
left: '+=50px'
}, "slow");
});
$("#left").click(function () {
$(".block").animate({
left: '-=50px'
}, "slow");
});
</script>
stop([c],[j])1.7*
停止所有在指定元素上正在运行的动画。
如果队列中有等待执行的动画(并且clearQueue没有设为true)，他们将被马上执行
参数：
[clearQueue],[gotoEnd]：
clearQueue:如果设置成true，则清空队列。可以立即结束动画。
gotoEnd:让当前正在执行的动画立即完成，并且重设show和hide的原始样式，调用回调函数等。
[queue],[clearQueue],[jumpToEnd]：
queue:用来停止动画的队列名称
clearQueue:如果设置成true，则清空队列。可以立即结束动画。
jumpToEnd:如果设置成true，则完成队列。可以立即完成动画。
示例代码：
<button id="go">Go</button> <button id="stop">STOP!</button>
<div class="block"></div>
<script>
// 点击Go之后开始动画,点Stop之后会在当前位置停下来
// 开始动画
$("#go").click(function () {
$(".block").animate({
left: '+200px'
}, 5000).animate({
top: '+200px'
}, 5000);
});
// 当点击按钮后停止动画
$("#stop").click(function () {
$(".block").stop(true, true);
});
</script>
delay(d,[q])
设置一个延时来推迟执行队列中之后的项目。
jQuery 1.4新增。用于将队列中的函数延时执行。他既可以推迟动画队列的执行，也可以用于自定义队列。
参数：
duration,[queueName]
duration:延时时间，单位：毫秒
queueName:队列名词，默认是Fx，动画队列。
示例代码：
<div id="foo /">
<script>
// 在.slideUp() 和 .fadeIn()之间延时800毫秒。
$('#foo').slideUp(300).delay(800).fadeIn(400);
</script>
finish([queue])1.9+
停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画。
当.finish()在一个元素上被调用，立即停止当前正在运行的动画和所有排队的动画（如果有的话），并且他们的CSS属性设置为它们的目标值（所有动画的目标值）。所有排队的动画将被删除。
.finish()方法和.stop(true, true)很相似，.stop(true, true)将清除队列，并且目前的动画跳转到其最终值。但是，不同的是，.finish() 会导致所有排队的动画的CSS属性跳转到他们的最终值。
示例代码：
<button id="go">Go</button> <button id="stop">STOP!</button>
<div class="block"></div>
<script>
// 点击Go之后开始动画,点Stop之后会在当前位置停下来
// 开始动画
$("#go").click(function () {
$(".block").animate({
left: '+200px'
}, 5000).animate({
top: '+200px'
}, 5000);
});
// 当点击按钮后停止动画
$("#stop").click(function () {
$(".block").finish();
});
</script>
动画支持的属性：
http://www.w3school.com.cn/jquery/effect_animate.asp
设置
jQuery.fx.off
关闭页面上所有的动画。
把这个属性设置为true可以立即关闭所有动画(所有效果会立即执行完毕)。有些情况下可能需要这样，比如：
你在配置比较低的电脑上使用jQuery。
你的一些用户由于动画效果而遇到了 可访问性问题（http://www.jdeegan.phlegethon.org/turn_off_animation.html）
当把这个属性设成false之后，可以重新开启所有动画。
示例代码：
// 执行一个禁用的动画
jQuery.fx.off = true;
$("input").click(function(){
$("div").toggle("slow");
});
jQuery.fx.interval
设置动画的显示帧速。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 50px;
height: 30px;
margin: 5px;
float: left;
background: green;
}
</style>
</head>
<body>
<script src="jquery.js"></script>
<p><input type="button" value="Run" /></p>
<div></div>
<script>
jQuery.fx.interval = 100;
$("input").click(function () {
$("div").toggle(3000);
});
</script>
</body>
</html>
三、插件机制
jQuery 虽然功能强大，但是也不是面面俱到，jQuery就是通过插件的方式，来扩展它的功能。当需要某个插件时，可以引入插件即可。
插件的使用步骤：1.引入jQuery。2.在jQuery.js 后方再引入插件。
但是要注意：jQuery插件所依赖的jQuery版本。
插件的制作原理
jQuery.fn.extend(object)
扩展 jQuery 元素集来提供新的方法（通常用来制作插件）。
参数：
object：
用来扩充 jQuery 对象。
示例代码：
<button id="btn1" type="button">全选</button>
<button id="btn2" type="button">全不选</button>
<button id="btn3" type="button">反选</button>
<input type="checkbox" name="" id="">足球
<input type="checkbox" name="" id="">篮球
<input type="checkbox" name="" id="">羽毛球
<input type="checkbox" name="" id="">乒乓球
<script>
// 增加三个插件方法。
jQuery.fn.extend({
check: function () {
return this.each(function () {
this.checked = true;
});
},
uncheck: function () {
return this.each(function () {
this.checked = false;
});
},
invert: function () {
return this.each(function (i, val) {
this.checked = !this.checked;
});
}
});
// 全选
$("#btn1").click(function () {
$("input:checkbox").check();
})
// 全不选
$("#btn2").click(function () {
$("input:checkbox").uncheck();
})
// 反选
$("#btn3").click(function () {
$("input:checkbox").invert();
})
</script>
jQuery.extend(object)
扩展jQuery对象本身。
示例代码：
<script>
jQuery.extend({
min: function (a, b) {
return a < b ? a : b;
},
max: function (a, b) {
return a > b ? a : b;
},
setColor: function (e, color) {
e.css("background", color)
}
});
jQuery.setColor($("div"), "red")
</script>
插件推荐
网站：jQ22， 懒人之家， 站长之家
常用网页特效插件推荐:
弹出层： layer
轮播图： swiper
图表插件： echart
表单验证： Validate
四、多库共存
noConflict([extreme])
运行这个函数将变量$的控制权让渡给第一个实现它的那个库。
这有助于确保jQuery不会与其他库的$对象发生冲突。 在运行这个函数后，就只能使用jQuery变量访问jQuery对象。例如，在要用到$("div p")的地方，就必须换成jQuery("div p")。 '''注意:'''这个函数必须在你导入jQuery文件之后，并且在导入另一个导致冲突的库'''之前'''使用。当然也应当在其他冲突的库被使用之前，除非jQuery是最后一个导入的。
示例代码：
<script>
// 将$引用的对象映射回原始的对象。
jQuery.noConflict();
// 使用 jQuery
jQuery("div p").hide();
// 使用其他库的 $()
$("content").style.display = 'none';
</script>
<script>
// 创建一个新的别名用以在接下来的库中使用jQuery对象。
var j = jQuery.noConflict();
// 基于 jQuery 的代码
j("div p").hide();
// 基于其他库的 $() 代码
$("content").style.display = 'none';
</script>
<script>
// 完全将 jQuery 移到一个新的命名空间。
var dom = {};
dom.query = jQuery.noConflict(true);
// 新 jQuery 的代码
dom.query("div p").hide();
// 另一个库 $() 的代码
$("content").style.display = 'none';
// 另一个版本 jQuery 的代码
jQuery("div > p").hide();
</script>
五、jQuery案例
全选和反选案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
}
.tab {
margin: 0 auto;
width: 500px;
}
.tab td,
.tab th {
border: 1px solid #ccc;
padding: 5px 10px;
text-align: center;
}
.tab th {
background: #0066CC;
color: #fff;
}
</style>
<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<table class="tab">
<thead id="thead">
<tr>
<th>
<input type="checkbox" id="topcheck" />
</th>
<th>
专业
</th>
<th>
姓名
</th>
<th>
学号
</th>
<th>
操作
</th>
</tr>
</thead>
<tbody id="tbody">
<tr>
<td>
<input type="checkbox" />
</td>
<td>
前端专业
</td>
<td>
张三
</td>
<td>
1001
</td>
<td>
<button>修改</button>
<button class="btn_del">删除</button>
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>
前端专业
</td>
<td>
李四
</td>
<td>
1002
</td>
<td>
<button>修改</button>
<button class="btn_del">删除</button>
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>
UI专业
</td>
<td>
王武
</td>
<td>
1003
</td>
<td>
<button>修改</button>
<button class="btn_del">删除</button>
</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$(function () {
var topcheck = $("#topcheck");
var botchecks = $("#tbody input:checkbox");
//点击topcheck后，让后续的复选框和topcheck的checked值一样
topcheck.on("click", function () {
var v = topcheck.prop("checked");
botchecks.prop("checked", v);
})
//点击任何一个小弟后，只有一种所有小弟数量和选中小弟数量相同的情况下老大是选中，否则老大都是不被选中的
botchecks.on("click", function () {
//判断所有小弟数量和选中小弟数量是否相同，并返回结果
var bool = $("#tbody input:checkbox").length == $("#tbody input:checked").length;
topcheck.prop("checked", bool);
})
})
//总结：
//1.过滤器 :checkbox :checked
//2. prop()的应用
//3. 全选和反选的思路逻辑
</script>
</body>
</html>
手风琴菜单案例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
ul {
list-style: none
}
* {
margin: 0;
padding: 0;
}
div {
width: 1200px;
height:300px;
margin: 50px auto;
border: 1px solid red;
overflow: hidden;
}
div img{
width:800px;
}
div li {
width: 100px;
float: left;
}
div li:last-child{
width: 800px;
}
div ul {
width: 1200px;
}
</style>
<script src="jquery-1.12.2.js"></script>
<script>
$(function () {
$("#box>ul>li").click(function () {
//当前的li的所有的兄弟元素li的宽度设置一下
$(this).siblings("li").css("width","100px");
$(this).css("width","800px");
});
});
</script>
</head>
<body>
<div id="box">
<ul>
<li><img src="images/1.jpg"/></li>
<li><img src="images/2.jpg"/></li>
<li><img src="images/3.jpg"/></li>
<li><img src="images/4.jpg"/></li>
<li><img src="images/5.jpg"/></li>
</ul>
</div>
</body>
</html>
突出显示图片案例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
body {
background: #000;
}
.wrap {
margin: 100px auto 0;
width: 630px;
height: 394px;
padding: 10px 0 0 10px;
background: #000;
overflow: hidden;
border: 1px solid #fff;
}
.wrap li {
float: left;
margin: 0 10px 10px 0;
}
.wrap img {
display: block;
border: 0;
}
</style>
<script src="jquery-1.12.2.js"></script>
<script>
$(function () {
//鼠标进入的时候,当前的li的透明度为1,其他的li标签透明度,0.5
$(".wrap>ul>li").mouseover(function () {
//当前的li的兄弟元素的透明度变暗
$(this).siblings("li").css("opacity",0.5);
$(this).css("opacity",1);
});
$(".wrap").mouseout(function () {
//.find()方法,针对当前的元素找里面的一些其他的元素
$(this).find("li").css("opacity",1);
});
});
</script>
</head>
<body>
<div class="wrap">
<ul>
<li><a href="#"><img src="images/01.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/02.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/03.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/04.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/05.jpg" alt=""/></a></li>
<li><a href="#"><img src="images/06.jpg" alt=""/></a></li>
</ul>
</div>
</body>
</html>
下拉菜单案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery.min.js"></script>
<style>
/*不要写*{padding:0;margin:0} */
div,img,p{
padding: 0;
margin: 0;
}
.bgDiv{
width: 183px;
height: 550px;
background: url("gm_q/customer.jpg");
position: relative;
}
.imgDiv{
width: 183px;
text-align: center;
position: absolute;
top: 180px;
}
.imgDiv p{
color: orangered;
line-height: 28px;
font-weight: bold;
font-size: 14px;
}
/*img后面的div都要隐藏*/
.imgDiv>div{
display: none;
}
/*imgDiv里面的所有图片都有一个点击效果*/
.imgDiv>img{
cursor: pointer;
}
</style>
</head>
<body>
<div id="bgDiv" class="bgDiv">
<!--在bgDiv里面嵌套小div用来存储图片-->
<!--我们定义div是为了更好来定义布局位置-->
<!--四张图片都在div里面存储,那么我们只需要定义div的位置即可-->
<!--每个img下面都有一个与之对应的内容,我们把这些内容也都定义在div中-->
<!--也就是说,每个img下面都有一个div来存储内容-->
<div id="imgDiv" class="imgDiv">
<img src="gm_q/reg.jpg" alt="">
<!--在这里定义p段落,是为了更好的设置文字的间距-->
<div>
<p>点击注册</p>
<p>认证中心</p>
</div>
<img src="gm_q/buy.jpg" alt="">
<div>
<p>咨询</p>
<p>投诉</p>
<p>举报</p>
<p>退款</p>
</div>
<img src="gm_q/sale.jpg" alt="">
<div>
<p>安全中心</p>
<p>物流中心</p>
<p>资金流动</p>
<p>纠纷处理</p>
</div>
<img src="gm_q/person.jpg" alt="">
<div>
<p>修改资料</p>
<p>帐号申诉</p>
</div>
</div>
</div>
<script>
//点击img标签,显示后面的div
$("#imgDiv>img").click(function(){
//点击哪个img,哪个img标签之后的div就显示
//把元素节点转换为jQuery对象
//$(this).next("div") 点击图片之后的div元素
//$(this).next("div").slideToggle(300).siblings() 触发div的所有兄弟元素
$(this).next("div").slideToggle(300).siblings("div").slideUp(300);
})
</script>
</body>
</html>
评分案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>五角星评分案例</title>
<style>
* {
padding: 0;
margin: 0;
}
.comment {
font-size: 40px;
color: yellow;
}
.comment li {
float: left;
}
ul {
list-style: none;
}
</style>
<script src="jquery.js"></script>
<script>
$(function () {
$(".comment>li").mouseover(function () {
$(this).text("★").prevAll("li").text("★").end().nextAll("li").text("☆");
}).mouseout(function () {
$(".comment").find("li").text("☆");
$(".comment>li[index=1]").text("★").prevAll("li").text("★")
}).click(function () {
$(this).attr("index", "1").siblings("li").removeAttr("index");
});
});
</script>
</head>
<body>
<ul class="comment">
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
<li>☆</li>
</ul>
</body>
</html>
滑动轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery.min.js"></script>
<style>
div,ul,ol,li,img{
padding: 0;
margin: 0;
}
#slideDiv{
width: 512px;
height: 384px;
border: 3px solid black;
position: relative;
overflow: hidden;
}
/*所有的li列表符号去除*/
ul li{
list-style-type: none;
float: left;
}
/*ul里面有5张图片*/
ul{
width: 2560px;
position: absolute;
left: 0;
}
ol li{
display: inline-block;
background: black;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
user-select: none;
cursor: pointer;
font-size: 12px;
color: red;
font-weight: bold;
}
ol{
position: absolute;
right: 10px;
bottom: 10px;
}
.selected{
background: #B8F2EE;
}
</style>
</head>
<body>
<div id="slideDiv">
<ul id="slideUl">
<li><img src="sliderImg/1.jpg" alt=""></li>
<li><img src="sliderImg/2.jpg" alt=""></li>
<li><img src="sliderImg/3.jpg" alt=""></li>
<li><img src="sliderImg/4.jpg" alt=""></li>
<li><img src="sliderImg/5.jpg" alt=""></li>
</ul>
<ol id="slideOl">
<li class="selected">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
</div>
<script>
//图片都在ul里面,我们想要实现图片的滚动,那么其实就是ul的位置的变化
/*
left
* 1.jpg 0
* 2.jpg -512px
* 3.jpg -1024px
* ...
* left值: li下标*-512
* */
//自动轮播的实现
//每个3秒变化一张图片
var num1 = 0; //控制li下标的变化
var num2 = 0; //控制ul的滚动距离
var intervalId = setInterval(slideFun,2000)
function slideFun(){
//0 0
//1 -512
if(num1 == 4){
//把第一张地位在ul的后面
$("#slideUl li").eq(0).css({
position:"relative",
left:2560
})
num1 = 0;
}else{
num1++;
}
num2++; //控制滚动距离
$("#slideUl").animate({
left:-num2*512
},500,function(){
//如果li下标已经变为0,那么表示ul要回归原位
if(num1 == 0){
$("#slideUl li").eq(0).css("position","static");
$("#slideUl").css("left","0px");
num2 = 0;
}
})
//改变li的变化
$("#slideOl li").eq(num1).addClass("selected").siblings("li").removeClass("selected");
}
//手动轮播
//鼠标移入哪里ol li,显示对应的图片
$("#slideOl li").mouseover(function(){
$(this).addClass("selected").siblings("li").removeClass("selected");
var liIndex = $(this).index();
$("#slideUl").animate({
left:-liIndex*512
})
num1 = liIndex;
num2 = liIndex;
})
$("#slideDiv").hover(function(){
clearInterval(intervalId)
},function(){
intervalId = setInterval(slideFun,2000)
})
</script>
</body>
</html>
