day41_jQuery学习笔记_02
jQuery 学习回顾
jQuery 的语法：
$("选择器")
$(dom对象)
$("<a>点我啊</a></br>").replaceAll("p");
jQuery 的选择器：
基本：#id、element、.class、s1,s2,... 、*
层级：A B、A>B、A+B、A~B
基本过滤：:first、:last、:eq(index)、:gt(index)、:lt(index)、:even、:odd、:header、:animated、:focus
内容过滤：:contains(text)、:empty、:parent、:has(selector)
可见过滤：:visible、:hidden
属性：[attr]、[attr=val]、[attr!=val]、[attr^=val]、[attr$=val]、[attr*=val]、[attr=val][][]
子元素：:nth-child(index)、:first-child、:last-child、:only-child
表单过滤：:input、:text、:password、:radio、:checkbox、:file、:submit、:reset、:image、:button、:hidden
表单对象属性过滤：:enabled、:disabled、:checked、:selected
jQuery 的属性和CSS：
属性：attr()、removeAttr()
CSS类：addClass()、removeClass()、toggleClass()
HTML代码/文本/值：val()与val(...)、html()与html(...)、text()与text(...)
CSS：css(name, value)、css(name)、css(prop)
位置：offset()与offset(...) 格式：{"top":100, "left":100}
scrollTop()与scrollTop(...)、scrollLeft()与scrollLeft(...)
尺寸：width()与width(...)、height()与height(...)
jQuery 的文档处理：
内部插入：append()、prepend()、appendTo()、prependTo()
外部插入：after()、before()、insertAfter()、insertBefore()
删除：empty()、remove()、detach() --> 绑定数据：data()与data(...)
复制：clone(true)
替换：replaceWith()、replaceAll()
包裹：wrap()、wrapAll()、wrapInner()、unWrap()
jQuery 的文档处理的小案例
示例代码如下：
1.左右select选择.html
<!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="../js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// 左边
$("#left1").click(function() {
// 选中多个，只过第一个
$("#leftSelectId>option:selected:first").removeAttr("selected").appendTo("#rightSelectId");
});
$("#left2").click(function() {
// 选中几个，就过几个
$("#leftSelectId>option:selected").removeAttr("selected").appendTo("#rightSelectId"); // :selected 选择（指的是 下拉列表 select 标签中的 option 标签）
});
$("#left3").click(function() {
// 选中或者没选中，都过去
// $("#leftSelectId option").removeAttr("selected").appendTo("#rightSelectId"); // A B 获得A元素内部所有的B的后代元素。（爷孙）
$("#leftSelectId>option").removeAttr("selected").appendTo("#rightSelectId"); // A>B 获得A元素内部所有的B的子元素。（父子）
});
// 右边
$("input:eq(3)").click(function() {
// 选中多个，只过第一个
$("#rightSelectId>option:selected:first").removeAttr("selected").appendTo("#leftSelectId");
});
$("input:eq(4)").click(function() {
// 选中几个，就过几个
$("#rightSelectId>option:selected").removeAttr("selected").appendTo("#leftSelectId"); // :selected 选择（指的是 下拉列表 select 标签中的 option 标签）
});
$("input:eq(5)").click(function() {
// 选中或者没选中，都过去
// $("#leftSelectId option").removeAttr("selected").appendTo("#leftSelectId"); // A B 获得A元素内部所有的B的后代元素。（爷孙）
$("#rightSelectId>option").removeAttr("selected").appendTo("#leftSelectId"); // A>B 获得A元素内部所有的B的子元素。（父子）
});
});
</script>
<style type="text/css">
.textClass {
background-color: #ff0000;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<select id="leftSelectId" style="width:100px" multiple="multiple" size="10">
<option>刘备</option>
<option>关羽</option>
<option>张飞</option>
<option>诸葛亮</option>
</select>
</td>
<td>
<input id="left1" type="button" value=">" style="width:50px"/><br/>
<input id="left2" type="button" value=">>" style="width:50px"/><br/>
<input id="left3" type="button" value=">>>" style="width:50px"/><br/>
<input type="button" value="<" style="width:50px"/><br/>
<input type="button" value="<<" style="width:50px"/><br/>
<input type="button" value="<<<" style="width:50px"/><br/>
</td>
<td>
<select id="rightSelectId" style="width:100px" multiple="multiple" size="10">
</select>
</td>
</tr>
</table>
</body>
</html>
示例动图如下：
六、jQuery 的筛选
综述如下：
jQuery 的选择器可以的完成功能，jQuery 的筛选则提供功能相同的函数。
例如：
选择器 :first
筛选 first()
二者对比：
例如：
$("div:first") 直接获得第一个div，永远只能操作第一个div
$("div").first() 先获得所有的div，然后从所有的div中筛选出第一个，可以操作第一个div，也可以操作所有div
6.1、过滤
详解如下：
eq(index|-index) 类似 :eq()
index：正数，从头开始获得指定索引的元素。这个元素的位置是从0算起。即：0表示开始第一个
-index：负数，从尾开始获得指定索引的元素。从集合中的最后一个元素开始倒数。即：-1表示最后一个
first() 第一个 类似 :first
last() 最后一个 类似 :last
is() 判断，返回的是布尔值
hasClass(class) 判断是否是指定class。<xxx class="my"> 等价于 is("." + class)。返回的是布尔值
filter() 筛选出与指定表达式匹配的元素集合，从A、B、C中筛选出A、B来
not() 将指定内容删除，从A、B、C中删除A、B
-------------------------------------------------------
has() 是否有子元素
slice(start, end) 截取元素，[2,4) => 2,3 包前不包后
map(callback) 将jQuery对象 拆分成 jQuery对象数组，不怎么使用
示例代码如下：
01-过滤.html
<!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>01-筛选-过滤.html</title>
<!-- 引入jQuery -->
<script src="../js/jquery-1.8.3.js" type="text/javascript"></script>
<script src="./script/assist.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="./css/style.css"/>
<script type="text/javascript">
$(document).ready(function() {
// <input type="button" value="选择索引值等于3的div元素" id="btn1"/>
$("#btn1").click(function() {
$("div").eq(3).css("background-color", "#ff0");
// $("div").eq(-1).css("background-color", "#ff0").show(1000);
});
// <input type="button" value="选择第一个div元素" id="btn2"/>
$("#btn2").click(function() {
$("div").first().css("background-color", "#f0f");
});
// <input type="button" value="选择最后一个div元素" id="btn3"/>
$("#btn3").click(function() {
$("div").last().css("background-color", "#f0f").show(1000);
});
// <input type="button" value="id=one的div，class是否是one" id="btn4"/>
$("#btn4").click(function() {
alert($("div#one").hasClass("one")); // true
});
// <input type="button" value="选择class为none的所有div" id="btn5"/>
$("#btn5").click(function() {
// $("div.none").css("background-color", "#0ff").show(1000);
$("div").filter(".none").css("background-color", "#0ff").show(1000);
});
// <input type="button" value="class为hide的div，下一个兄弟是否是span" id="btn6"/>
$("#btn6").click(function() {
alert($("div.hide").next().is("span")); // true
});
// <input type="button" value="选择所有div中含有div的" id="btn7"/>
$("#btn7").click(function() {
$("div").has("div").css("background-color", "#00f");
});
// <input type="button" value="选择class为one的div，子元素中没有title属性的div" id="btn8"/>
// 换句话说：选择class为one的div，然后把有title属性的div过滤掉
$("#btn8").click(function() {
// 练习一：
// 选择class为one的div，子元素中没有title属性的div
$("div.one").not("[title]").css("background-color", "#0f0");
// 练习二：
// 选择class为one的div，子元素中没有title属性的 父div
// $("div.one").children().not("[title]").parent().css("background-color", "#0f0");
// 练习三：
// 选择class为one的div，子元素中都没有title属性的 父div
// 先把 “子元素中都有title属性的 父div” 过滤出来
// var $aa = $("div.one").children().filter("[title]").parent();
// 再将上面的过滤出来的东西删掉
// $("div.one").not($aa).css("background-color", "#0f0");
});
// <input type="button" value="选择索引号为3, 4的div" id="btn9"/> // [3, 4) 只有索引3
$("#btn9").click(function() {
$("div").slice(3, 4).css("background-color", "#f00");
});
});
</script>
</head>
<body>
<h3>筛选-过滤</h3>
<button id="reset">手动重置页面元素</button>
<input type="checkbox" id="isreset" checked="checked"/>
<label for="isreset">点击下列按钮时先自动重置页面</label>
<br/>
<br/>
<!-- 控制按钮 -->
<input type="button" value="选择索引值等于3的div元素" id="btn1"/>
<input type="button" value="选择第一个div元素" id="btn2"/>
<input type="button" value="选择最后一个div元素" id="btn3"/>
<input type="button" value="选择id=one的div，class是否是one" id="btn4"/>
<input type="button" value="选择class为none的所有div" id="btn5"/>
<input type="button" value="class为hide的div，下一个兄弟是否是span" id="btn6"/>
<input type="button" value="选择所有div中含有div的" id="btn7"/>
<input type="button" value="选择class为one的div，子元素中没有title属性的div" id="btn8"/>
<input type="button" value="选择索引号为3,4的div" id="btn9"/>
<br/>
<br/>
<!--文本隐藏域-->
<input type="hidden" value="hidden_1"/>
<input type="hidden" value="hidden_2"/>
<input type="hidden" value="hidden_3"/>
<input type="hidden" value="hidden_4"/>
<!-- 测试的元素 -->
<div class="one" id="one">
id为one,class为one的div
<div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test">
id为two,class为one,title为test的div
<div class="mini" title="other">class为mini,title为other</div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
class为one
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<span id="mover">正在执行动画的span元素</span>
</body>
</html>
示例动图如下：
6.2、查找
详解如下：
例如：
<A>
<B>
<C></C>
<D></D>
<E></E>
<F></F>
</B>
</A>
-------------------------------------------------------
B.children([...]) 获得所有的子元素。CDEF
A.find(D) 从指定的区域查询指定元素。D
D.next() 获得下一个兄弟。E
D.nextAll() 获得后面的所有兄弟。EF
E.prev() 获得上一个兄弟。D（prev = previous）
E.prevAll() 获得前面的所有兄弟。CD
E.siblings() 获得所有兄弟。CDF（siblings：兄弟姐妹）
E.parent() 获得父元素（不含自己）。B
E.parents() 获得所有的父元素（不含自己）。AB
E.closest(A) 向上获得指定的父元素（含自己），如果获得到了，就返回一个对象；如果没有获得到，就返回空的jQuery对象。
-------------------------------------------------------
C.nextUntil(E) 获得后面所有兄弟，直到指定条件位置为止。DE
F.prevUntil(D) 获得前面所有兄弟，直到指定条件位置为止。DE
-------------------------------------------------------
closest和parents的主要区别是：
1、前者从当前元素开始匹配寻找，后者从父元素开始匹配寻找；
2、前者逐级向上查找，直到发现匹配的元素后就停止了，后者一直向上查找直到根元素，然后把这些元素放进一个临时集合中，再用给定的选择器表达式去过滤；
3、前者返回0或1个元素，后者可能包含0个，1个，或者多个元素。
示例代码如下：
02-查找.html
<!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>02-查找.html</title>
<!-- 引入jQuery -->
<script src="../js/jquery-1.8.3.js" type="text/javascript"></script>
<script src="./script/assist.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="./css/style.css" />
<script type="text/javascript">
$(document).ready(function() {
// <input type="button" value="选择 id=two 的所有的子元素" id="btn1"/>
$("#btn1").click(function() {
$("#two").children().css("background-color", "#ff0");
// $("#two").children("[title='test']").css("background-color", "#ff0");
});
// <input type="button" value="选择 id=two 的子元素title=test 的元素 " id="btn2"/>
$("#btn2").click(function() {
$("#two").children("[title='test']").css("background-color", "#ff0");
});
// <input type="button" value="选择 id=two 的下一个兄弟" id="btn3"/>
$("#btn3").click(function() {
$("#two").next().css("background-color", "#f0f");
});
// <input type="button" value="选择 id=two 的后面的所有兄弟" id="btn4"/>
$("#btn4").click(function() {
$("#two").nextAll().css("background-color", "#0ff").show(1000);
});
// <input type="button" value="选择 id=two 的上一个兄弟" id="btn5"/>
$("#btn5").click(function() {
$("#two").prev().css("background-color", "#00f").show(1000);
});
// <input type="button" value="选择 id=two 的前面的所有兄弟" id="btn6"/>
$("#btn6").click(function() {
$("#two").prevAll().css("background-color", "#0f0").show(1000);
});
// <input type="button" value="选择 id=two 的所有兄弟" id="btn7"/>
$("#btn7").click(function() {
$("#two").siblings().css("background-color", "#f0f").show(1000);
});
// <input type="button" value="选择 id=two 的父元素" id="btn8"/>
$("#btn8").click(function() {
$("#two").parent().css("background-color", "#ff0");
});
// <input type="button" value="选择 title='tesst' 的父元素body元素" id="btn9"/>
$("#btn9").click(function() {
$("div[title='tesst']").closest("body").css("background-color", "#000");
});
});
</script>
</head>
......
示例动图如下：
6.3、串联
详解如下：
作用：将多条语句，改成一条。（得瑟代码）
A.add(B) 将A和B组合成一个对象 。类似：$("A, B")
andSelf() 将之前的对象添加到操作的集合中
A.children().andSelf()
A A的孩子 A的孩子和A
end() 回到最近的一个"破坏性"操作之前
A.children().children().end() .end()
A A的孩子 A的孙子 A的孩子 A
-------------------------------------------------------
contents() 获得所有的子节点（子节点包括：子元素 和 文本）
示例代码如下：
03-串联.html
<!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>03-串联.html</title>
<!-- 引入jQuery -->
<script src="../js/jquery-1.8.3.js" type="text/javascript"></script>
<script src="./script/assist.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="./css/style.css"/>
<script type="text/javascript">
$(document).ready(function() {
// <input type="button" value="选择 id=one和two 的div" id="btn1"/>
$("#btn1").click(function() {
$("#one").add('#two').css("background-color", "#ff0");
});
// <input type="button" value="选择id=one 的所有的孩子，以及one自己" id="btn2"/>
$("#btn2").click(function() {
$("#one").children().andSelf().css("background-color", "#f0f");
// $("#one").children().add("#one").css("background-color", "#f0f");
});
// <input type="button" value="选择id=one 的所有的孩子，设置颜色为红色，设置one自己为黄色" id="btn3"/>
$("#btn3").click(function() {
$("#one").children().css("background-color", "#f00").end().css("background-color", "#ff0");
// $("#one").children().css("background-color", "#f00").parent().css("background-color", "#ff0");
// $("#one").css("background-color", "#ff0").children().css("background-color", "#f00");
});
// <input type="button" value="打印id=two 的子节点个数" id="btn4"/>
$("#btn4").click(function() {
alert($("#two").contents().size());
// alert($("#two").contents().length);
});
});
</script>
</head>
......
示例动图如下：
6.4、筛选案例
示例代码如下：
2.QQ用户分组.html
<!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>筛选案例-QQ用户分组</title>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// 1、所有的分组的列表项默认都是隐藏的
// 2、分组<span>可以点击，控制其列表项的显示与隐藏
// 3、当前分组的列表项显示时，其他分组的列表项要隐藏
$("div").children("a").hide().prev("span").click(function() {
// $(this).nextAll("a").show().parent().siblings("div").find("a").hide();
$(this).nextAll("a").toggle().parent().siblings("div").find("a").hide();
});
});
</script>
<style type="text/css">
div * {
display: block;
width: 200px;
}
div span {
background-color: #0f0;
}
</style>
</head>
<body>
<div>
<span>追求中</span>
<a>志明</a>
<a>春娇</a>
</div>
<div>
<span>已交往</span>
<a>明郎</a>
<a>娇儿</a>
</div>
<div>
<span>分手了</span>
<a>张志明</a>
<a>余春娇</a>
</div>
</body>
</html>
示例动图如下：
七、jQuery 的事件
7.1、常见事件总结
示例代码如下：
1.常见事件.html
<!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>01-常见事件.html</title>
<style type="text/css">
#e02 {
border: 1px solid #000000;
height: 200px;
width: 200px;
}
</style>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#e01").blur(function() {
$("#textMsg").html("文本框失去焦点事件：blur");
}).focus(function() {
$("#textMsg").html("文本框获得焦点事件：focus，");
}).keydown(function() {
$("#textMsg").append("键盘按下事件：keydown，");
}).keypress(function(event) {
$("#textMsg").append("键盘按事件：keypress，");
}).keyup(function() {
$("#textMsg").append("键盘弹起事件：keyup，");
}).select(function(event) {
// 只支持谷歌
var sub = $(this).val().substring(event.target.selectionStart, event.target.selectionEnd);
$("#textMsg").html("文本框内容被选中事件：select，" + sub);
});
var i = 0;
$("#e02").mouseover(function() {
$("#divMsg").html("鼠标移入事件：mouseover");
}).mousemove(function() {
// $("#divMsg").html("鼠标移动事件：mousemove , " + i++);
}).mouseout(function() {
$("#divMsg").html("鼠标移出事件：mouseout");
}).mousedown(function() {
$("#divMsg").html("鼠标按下事件：mousedown");
}).mouseup(function() {
$("#divMsg").html("鼠标弹起事件：mouseup");
});
$("#e03").click(function() {
$("#buttonMsg").html("鼠标单击事件：click");
}).dblclick(function() {
$("#buttonMsg").html("鼠标双击事件：dblclick");
});
});
</script>
</head>
<body>
<input id="e01" type="text"/>
<span id="textMsg"></span>
<br/>
<hr/>
<div id="e02"></div>
<span id="divMsg"></span>
<br/>
<hr/>
<input id="e03" type="button" value="可以点击"/>
<span id="buttonMsg"></span>
<br/>
</body>
</html>
示例动图如下：
下面是jQuery 提供额外的事件，用于完善javascript缺失的事件
详解如下：
focusin 和 focusout
focusin 获得焦点。js中是：focus
focusin事件跟focus事件区别在于：它可以在父元素上检测子元素获取焦点的情况。
focusout 失去焦点。js中是：blur
focusout事件跟blur事件区别在于：它可以在父元素上检测子元素失去焦点的情况。
mouseenter 和 mouseleave
mouseenter 鼠标移入。js中是：mouseover
与 mouseover 事件不同，只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件。
mouseleave 鼠标移出。js中是：mouseout
与 mouseout 事件不同，只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。如果鼠标指针离开任何子元素，同样会触发 mouseout 事件。
示例代码如下：
2.focus和focusin.html
<!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>02-focus和focusin的区别.html</title>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// 示例：在js中，focus函数，父元素【不能检测】到子元素是否获得焦点
// $("#outerDiv").focus(function() {
// alert("outer");
// });
// 示例：在jQuery中，focusin函数， 父元素【可以检测】到子元素获得焦点
$("#outerDiv").focusin(function() {
alert("outer");
});
});
</script>
</head>
<body>
<div id="outerDiv" style="border:1px solid #f00;width:200px;height:200px">
<div id="innerDiv" style="border:1px solid #00f;width:100px;height:100px"></div>
</div>
<br/>
<span id="showSpan"></span>
</body>
</html>
示例代码如下：
3.mouseover和mouseenter.html
<!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>3-mouseover和mouseenter的区别.html</title>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var i= 0;
// js代码，当鼠标在父元素和子元素之间穿越时，将会触发父元素的事件
// $("#outerDiv").mouseover(function() {
// $("#showSpan").html(i++);
// });
// jQuery代码，当鼠标在父元素和子元素之间穿越时，将不会触发父元素的事件
$("#outerDiv").mouseenter(function() {
$("#showSpan").html(i++);
});
});
</script>
</head>
......
示例动图如下：
7.2、页面载入（加载）
详解如下：
方式1：使用标准api
$(document).ready(function() {
});
等效于
jQuery(document).ready(function() {
});
方式1原因图解：
方式2：简化版
$(function() {
});
等效于
jQuery(function() {
});
方式2原因图解：
示例代码如下：
4.ready.html
<!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>4-ready.html</title>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript">
// jQuery代码的页面加载可以使用多次
// 因为在jQuery中是队列形式存在的，一个一个的执行
$(function() {
alert("O(∩_∩)O哈哈~");
});
$(function() {
alert("O(∩_∩)O哈哈~O(∩_∩)O哈哈~");
});
// javaScript代码的页面加载只执行一次，后面的页面加载会覆盖前面的页面加载
// 因为在js中是先解析完，再加载
window.onload = function () {
alert("(*^▽^*)");
}
window.onload = function () {
alert("(*^▽^*)(*^▽^*)");
}
</script>
</head>
<body>
</body>
</html>
7.3、事件绑定
7.3.1、事件处理
详解如下：
bind(type, fn) 给当前对象绑定一个事件。例如：A.bind("click", function() {...}); 类似：A.click(function() {...});
unbind(type) 解绑bind所绑定的事件
one(type, fn) 给当前对象绑定一次事件。
-------------------------------------------------------
on(events, fn) 提供绑定事件处理程序所需的所有功能。即完成3个方法的功能：.bind()、.delegate()、和 .live()
off(events) 解绑
trigger(type) 在每一个匹配的元素上触发某类事件。这个函数也会导致浏览器同名的默认行为的执行。例如：A.trigger("submit"); 类似：A.submit();
triggerHandler(type) 在每一个匹配的元素上触发某类事件。但不会执行浏览器默认动作，也不会产生事件冒泡。
示例代码如下：
5.事件处理.html
<!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>5-事件处理.html</title>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function() {
// <input id="h01" type="button" value="1、只能点击一次，之后再点击失效"/>
$("#h01").one("click", function() {
alert("你只能爱我一个人！");
});
// <input id="h02" type="button" value="2、可以点击多次"/>
// jQuery 事件的别名，格式：事件.别名
$("#h02").bind("click.a", function() {
alert("你还爱着谁？");
});
$("#h02").bind("click.b", function() {
alert("你到底还爱着谁？？");
});
// <input id="h03" type="button" value="3、解绑2中指定的事件"/>
$("#h03").click(function() {
$("#h02").unbind("click.a"); // 使用jQuery事件的别名解绑想解绑的，因为jQuery事件默认是全解绑
});
// <input type="button" value="4、添加一个按钮，样式为myClass，且拥有相同的事件(觉醒血脉)" class="myClass"/>
$(".myClass").live("click", function() {
$("body").append("<input type='button' class='myClass' value='血脉觉醒了'/>")
});
// <input id="h05" type="button" value="5、解绑4(灭掉血脉)"/>
$("#h05").click(function() {
$(".myClass").die("click");
});
});
</script>
</head>
<body>
<input id="h01" type="button" value="1、只能点击一次，之后再点击失效"/>
<input id="h02" type="button" value="2、可以点击多次"/>
<input id="h03" type="button" value="3、解绑2中指定的事件"/>
<input type="button" value="4、添加一个按钮，样式为myClass，且拥有相同的事件(觉醒血脉)" class="myClass"/>
<input id="h05" type="button" value="5、解绑4(灭掉血脉)"/>
</body>
</html>
示例动图如下：
7.3.2、事件委派
详解如下：
live(type, fn) 绑定事件，之后我们动态添加同样的成员，也具有相同的事件。
die(type) 解绑事件
示例代码如下：
同上7.3.1中的代码
示例动图如下：
同上7.3.1中的动图
7.3.3、事件切换
详解如下：
hover(over, out)
鼠标的移入和移出，以前的写法：A.mouseover(fn).mouseout(fn);
简化版：A.hover(fn, fn);
toggle(fn, fn, fn, ...); 执行click事件，每点击一次执行一个fn
示例代码如下：
6.事件切换.html
<!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>6-事件切换.html</title>
<style type="text/css">
#e02{
border: 1px solid #000000;
height: 200px;
width: 200px;
}
</style>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function() {
$("#e01").toggle(function() {
alert("O(∩_∩)O哈哈~");
}, function() {
alert("(*^▽^*)嘿嘿-");
});
$("#e02").hover(function() {
$("#divMsg").html("over");
}, function() {
$("#divMsg").html("out");
});
});
</script>
</head>
<body>
<input id="e01" type="button" value="点我啊"/><span id="textMsg"></span><br/>
<hr/>
<div id="e02" ></div><span id="divMsg"></span><br/>
</body>
</html>
示例动图如下：
7.4、事件案例
示例代码如下：
1.文字提示.html
<!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>1-文字提示.html</title>
<!-- 引入jQuery -->
<script src="../js/jquery-1.8.3.js" type="text/javascript"></script>
<style type="text/css">
body {
margin: 0;
padding: 40px;
background: #fff;
font: 80% Arial, Helvetica, sans-serif;
color: #555;
line-height: 180%;
}
p {
clear: both;
margin: 0;
padding: .5em 0;
}
/* tooltip */
#tooltip {
position: absolute;
border: 1px solid #333;
background: #f7f5d1;
padding: 1px;
color: #333;
display: none;
}
</style>
<script type="text/javascript">
$(function() {
// 将自定义的提示，替换成自带的提示
$(".mytooltip").mouseover(function(event) {
// 1、先创建一个div，自定义的提示
var $new = $("<div id='tooltip'></div>");
// 获取当前对象绑定的数据
var title = $(this).data("mytitle");
if (!title) { // 第一次没有数据，就获取自带的提示
// 2、获得自带的提示
title = $(this).attr("title");
// 将自带的提示移除
$(this).removeAttr("title");
// 绑定数据(绑定自带的提示)
$(this).data("mytitle", title);
}
// 2、获得自带的提示
// var title = $(this).attr("title");
// 将自带的提示移除
// $(this).removeAttr("title");
// 3、设置提示
$new.html(title);
// 追加前，先定个位
$new.offset({"top" : event.pageY - 20, "left" : event.pageX + 5});
// 4、将定位后的新的div追加到body内部的后面，并显示自己
$new.appendTo("body").show();
}).mouseout(function() { // 鼠标移出删除
$("#tooltip").remove();
}).mousemove(function(event) { // 鼠标移动跟随
$("#tooltip").offset({"top" : event.pageY - 20, "left" : event.pageX + 5});
});
});
</script>
</head>
<body>
<p>
<a href="#" class="mytooltip" title="这是我的超链接提示1">提示1</a>
</p>
<p>
<a href="#" class="mytooltip" title="这是我的超链接提示2">提示2</a>
</p>
<!-- <div id="tooltip">xxxx</div> -->
</body>
</html>
示例动图如下：
2.图片提示(扩展).html
<!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>2-图片提示(扩展).html</title>
<!-- 引入jQuery -->
<script src="../js/jquery-1.8.3.js" type="text/javascript"></script>
<style type="text/css">
body {
margin: 0;
padding: 40px;
background: #fff;
font: 80% Arial, Helvetica, sans-serif;
color: #555;
line-height: 180%;
}
img {
border: none;
}
ul, li {
margin: 0;
padding: 0;
}
li {
list-style: none;
float: left;
display: inline;
margin-right: 10px;
border: 1px solid #AAAAAA;
}
/* tooltip */
#tooltip {
position: absolute;
border: 1px solid #ccc;
background: #333;
padding: 2px;
display: none;
color: #fff;
}
</style>
<script type="text/javascript">
$(function() {
var x = 10;
var y = 20;
var href;
$("a[class=tooltip]").mouseover(function(e) {
// 1、获取对应标签的自带提示
// var title = $("a[class=tooltip]").attr("title");
// this代表的是DOM对象(页面中的元素)
href = this.href;
// 删除自带提示
this.href = "";
// 2、创建标签用于自定义提示
var $div = $("<div id='tooltip'><img src='" + href + "'></img></div>");
// 3、将自定义提示的标签，添加到body标签下
$("body").append($div);
// 4、如何调整显示位置(相对鼠标的坐标值:e.pageX和e.pageY)
$("#tooltip").css({
"top" : e.pageY + y + "px",
"left" : e.pageX + x + "px"
}).show(1000);
}).mouseout(function() {
this.href = href;
$("#tooltip").remove();
}).mousemove(function(e) {
$("#tooltip").css({
"top" : e.pageY + y + "px",
"left" : e.pageX + x + "px"
});
});
});
</script>
</head>
<body>
<h3>有效果：</h3>
<ul>
<li>
<a href="images/apple_1_bigger.jpg" class="tooltip" title="苹果 iPod">
<img src="images/apple_1.jpg" alt="苹果 iPod"/>
</a>
</li>
<li>
<a href="images/apple_2_bigger.jpg" class="tooltip" title="苹果 iPod nano">
<img src="images/apple_2.jpg" alt="苹果 iPod nano"/>
</a>
</li>
<li>
<a href="images/apple_3_bigger.jpg" class="tooltip" title="苹果 iPhone">
<img src="images/apple_3.jpg" alt="苹果 iPhone"/>
</a>
</li>
<li>
<a href="images/apple_4_bigger.jpg" class="tooltip" title="苹果 Mac">
<img src="images/apple_4.jpg" alt="苹果 Mac"/>
</a>
</li>
</ul>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<h3>无效果：</h3>
<ul>
<li>
<a href="images/apple_1_bigger.jpg" title="苹果 iPod">
<img src="images/apple_1.jpg" alt="苹果 iPod"/>
</a>
</li>
<li>
<a href="images/apple_2_bigger.jpg" title="苹果 iPod nano">
<img src="images/apple_2.jpg" alt="苹果 iPod nano"/>
</a>
</li>
<li>
<a href="images/apple_3_bigger.jpg" title="苹果 iPhone">
<img src="images/apple_3.jpg" alt="苹果 iPhone"/>
</a>
</li>
<li>
<a href="images/apple_4_bigger.jpg" title="苹果 Mac">
<img src="images/apple_4.jpg" alt="苹果 Mac"/>
</a>
</li>
</ul>
</body>
</html>
示例动图如下：
八、jQuery 的效果|动画
8.1、基本效果|动画
详解如下：
作用：通过改变元素 高度和宽度 进行显示或隐藏
show(speed, fn) 显示
参数1：speed 速度。显示的时间，单位：毫秒。也有固定的字符串：("slow", "normal", or "fast")
参数2：fn 回调函数。动画效果完成之后的回调函数。
hide(speed, fn) 隐藏
toggle(speed, fn) 切换
8.2、滑动效果|动画
详解如下：
通过改变元素 高度 进行显示或隐藏
slideDown(speed, fn) 显示
slideUp(speed, fn) 隐藏
slideToggle(speed, fn) 切换
8.3、淡入淡出效果|动画
详解如下：
通过改变元素 透明度 进行显示或隐藏
fadeIn(speed, fn) 显示
fadeOut(speed, fn) 隐藏
fadeToggle(speed, fn) 切换
fadeTo(speed, opacity, fn) 指定透明度
参数2：opacity 透明度，一个0至1之间表示透明度的数字
8.4、效果|动画案例
示例代码如下：
效果案例.html
<!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>效果|动画案例.html</title>
<style type="text/css">
div {
border: 1px solid #000;
width: 110px;
height: 100px;
}
</style>
<!-- 导入js库 ，注意：使用src属性之后，标签体中不能写入内容-->
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#b1").click(function() {
$("#b1Div").toggle("1000");
});
$("#b2").click(function() {
$("#b2Div").slideToggle("slow");
});
$("#b3").click(function() {
$("#b3Div").fadeToggle(2000, function() {
alert("淡入/淡出效果完成了");
});
});
});
</script>
</head>
<body>
<input type="button" id="b1" value="显示/隐藏 b1Div"/>
<div id="b1Div"></div>
<br/>
<br/>
<input type="button" id="b2" value="滑出/滑入b2Div"/>
<div id="b2Div"></div>
<br/>
<br/>
<input type="button" id="b3" value="淡出/淡入b3Div"/>
<div id="b3Div" style="background-color: red;"></div>
</body>
</html>
示例动图如下：
九、jQuery 的ajax【掌握】
- 以前学习的ajax：异步请求，浏览器地址栏不改变，而页面进行局部的刷新。
- ajax 流程分析图如下：
- ajax环境搭建：
- 01、新建首页页面
- 02、给按钮绑定事件
- 03、编写servlet
- 04、未完待续……
- 01、新建首页页面
- jQuery 的ajax
详解如下：
第一层：$.ajax(...) 最底层的ajax请求，编写最复杂，完成功能最全的。
第二层：load()、$.get()、$.post() 开发中常用3个，$符号开头的叫全局函数，不是$开头的是普通函数，普通函数必须使用jQuery对象才能获得
第三层：$.getJSON()、$.getScript() 高级开发中用的
$.getJSON() 可以完成js的“跨域”请求。
域名：域名+端口+项目，js默认不能跨域请求的（即在A服务器上写了一个程序，在另B服务器上拿不到A服务器的数据）。
面试中会问到的：有没有解决js中的跨域问题？
$.getScript() 动态加载js文件。
之前使用标签 <script src="">加载页面时，会一并加载很多js文件，有的js文件我们暂时用不到，导致程序不够优化。
- 回调函数的参数，一共有三个参数，第一个参数是最重要的
- 使用JQuery的工具类，解析json
- jQuery.parseJSON(json)
- jQuery.parseJSON(json)
**9.1、load() 【3】 **
示例代码如下：
<!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>ajax示例</title>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function() {
// 给按钮绑定事件
$("input").click(function() {
// alert("a");
// 1.1、确定请求路径
var url = "/day41_02_jQuery/SendDataServlet";
// 1.2、确定请求参数，采用json
var params = {"username":"杰克", "password":"1234"};
/* 1、load() 普通函数 ，$符号开头的叫全局函数，不是$开头的是普通函数，普通函数必须使用jQuery对象才能获得
* * 格式：load(url, [data], [callback]) []中括号表示该项可以省略
* 参数1：url，请求路径
* 参数2：data，请求参数
* 参数3：callback，回调函数
*
* * 如果没有请求参数，则发送的GET请求
* * 如果有请求参数，则发送的POST请求。该POST请求不会出现中文乱码
* * 回调函数的参数，一共有三个参数，第一个参数是最重要的，掌握参数1即可
* 参数1：data，表示服务器响应的数据。
* load() 该函数永远获得的数据是字符串，如果需要使用该数据，必须将字符串 手动转换成 json对象。
*/
$(this).load(url, params, function() {
// load() 该函数永远获得的数据是字符串，如果需要使用该数据，必须将字符串 手动转换成 json对象。
var jsonData = eval("(" + data + ")");
alert(jsonData.message);
});
});
});
</script>
</head>
<body>
<input type="button" value="发送ajax"/>
</body>
</html>
**9.2、$get() 【2】 **
示例代码如下：
......
<script type="text/javascript">
$(function() {
// 给按钮绑定事件
$("input").click(function() {
// alert("a");
// 1.1、确定请求路径
var url = "/day41_02_jQuery/SendDataServlet";
// 1.2、确定请求参数，采用json
var params = {"username":"杰克", "password":"1234"};
/* 2、$.get() 全局函数，作用是：发送get请求
* * 格式：jQuery.get(url, [data], [callback], [type]) []中括号表示该项可以省略
* 参数1：url，请求路径
* 参数2：data，请求参数
* 参数3：callback，回调函数
* 参数4：type，返回的内容格式：xml, html, script, json, text, _default
*
* * GET请求不适合发送中文数据，因为请求的存在中文乱码
* 所以必须手动解码 new String(username.getBytes("ISO-8859-1"), "UTF-8");
*
* * 对于响应的数据，如果服务端使用的是：application/json;charset=UTF-8 ，那么jQuery会自动将字符串数据 转换成json对象。
* * 对于响应的数据，如果服务端使用的是：text/html;charset=UTF-8 ，那么回调函数获得的是字符串数据，需要手动进行转换。太麻烦，我们可以使用参数4
* 如果使用“参数4”，设置"json"，则jQuery会将字符串数据 转换成 json对象。
*/
$.get(url, params, function(data) {
alert(data);
}, "json");
});
});
</script>
......
**9.3、$post() 【1】 **
示例代码如下：
......
<script type="text/javascript">
$(function() {
// 给按钮绑定事件
$("input").click(function() {
// alert("a");
// 1.1、确定请求路径
var url = "/day41_02_jQuery/SendDataServlet";
// 1.2、确定请求参数，采用json
var params = {"username":"杰克", "password":"1234"};
/* 3、$.post() 全局函数，作用：发送post请求
* * 格式：jQuery.post(url, [data], [callback], [type])
* 同上
*/
$.post(url, params, function(data) {
alert(data);
}, "json");
});
});
</script>
......
**9.4、$ajax() 【4】 **
示例代码如下：
......
<script type="text/javascript">
$(function() {
// 给按钮绑定事件
$("input").click(function() {
// alert("a");
// 1.1、确定请求路径
var url = "/day41_02_jQuery/SendDataServlet";
// 1.2、确定请求参数，采用json
var params = {"username":"杰克", "password":"1234"};
/* 4、$.ajax() 底层功能是最强大的，有的公司使用，可以做出更炫的效果
* * 格式：jQuery.ajax(url,[settings])
* * 常用格式：jQuery.ajax([settings])
* 参数settings：设置所有的参数
* url:发送请求的地址
* data:发送到服务器的数据，即请求参数
* type:请求方式 ("POST" 或 "GET")
*
* success:请求成功的回调函数，success(data, textStatus, jqXHR)
* error:请求失败时调用此函数
*
* dataType:预期服务器返回的数据类型
* "xml": 返回 XML 文档，可用 jQuery 处理。
* "html": 返回纯文本 HTML 信息；包含的script标签会在插入dom时执行。
* "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了"cache"参数。
* 注意：在远程请求时(不在同一个域下)，所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)
* "json": 返回 JSON 数据 。
* "jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
* "text": 返回纯文本字符串
*/
$.ajax({
"url":url,
"data":params,
"type":"POST",
"success":function(data) {
alert(data);
},
"error":function() {
alert("服务器繁忙，请稍后重试");
},
"dataType":"json",
});
});
});
</script>
......
9.5、其他–表单序列化
详解如下：
serialize() 将表单中所有选中项拼凑成一个字符串
类似get请求参数，例如：username=jack&password=1234&gender=man&......
如下图所示：
详解如下：
serializeArray() 将表单中所有选中项拼凑一个json数组
返回的JSON对象是由一个对象数组组成的，其中每个对象包含一个或两个名值对——name参数和value参数（如果value不为空的话）。
如下图所示：
01
02
示例代码如下：
<!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="../js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// alert($("form").serialize());
alert($("form").serializeArray());
});
</script>
<style type="text/css">
.textClass {
background-color: #ff0000;
}
</style>
</head>
......
十、jQuery 的其他
10.1、事件冒泡
event.stopPropagation()
示例代码如下：
3.事件冒泡.html
<!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>3.事件冒泡.html</title>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// 事件冒泡：子元素的事件执行时，会一并触发父元素相同的事件，我们要阻止事件冒泡
$("#outerDiv").click(function() {
alert("outerDiv");
});
$("#innerDiv").click(function(event) {
alert("innerDiv");
// 方式1：使用return
// return false; // 默认是true
// 方式2：通过Event 对象提供的函数 event.stopPropagation() 阻止传播行为
event.stopPropagation();
});
});
</script>
</head>
<body>
<div id="outerDiv" style="border:1px solid #f00;width:200px;height:200px">
<div id="innerDiv" style="border:1px solid #00f;width:100px;height:100px"></div>
</div>
<br/>
<span id="showSpan"></span>
</body>
</html>
10.2、浏览器默认动作|行为
event.preventDefault();
示例代码如下：
4.浏览器的默认动作.html
<!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>4.浏览器的默认动作.html</title>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// a标签的默认行为href链接，我们想要阻止它
$("a").click(function(event) {
alert("欢迎来到黑泽明军的博客");
// 方式1：
return false;
// 方式2：
event.preventDefault();
});
});
</script>
</head>
<body>
<a href="https://www.cnblogs.com/chenmingjun">点我啊</a>
</body>
</html>
十一、ajax案例
11.1、动态加载1
示例代码如下：
动态加载1.html
<!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>ajax案例-动态加载1.html</title>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript">
// 鼠标往下移，内容就不断的加载
$(document).ready(function() {
var num = 1;
// 1、先创建10个dv
for (var i = 0; i < 10; i++) {
createDiv();
}
// 创建div的函数
function createDiv() {
var $div = $("<div class='createDiv'/>");
$div.html(num ++);
$("body").append($div);
}
// 2、给浏览器添加滚动事件
$(window).scroll(function() {
// 2.1、滚过的高度
var wt = $(this).scrollTop();
// 2.1、整个文档的高度
var dh = $(document).height();
// 2.1、窗口的高度
var wh = $(this).height();
// 3、当接近底部时，添加新的div
if (wt + wh + 100 > dh) {
createDiv();
// 发送ajax去填充数据
// ......
}
// 显示数据
$("#showDiv").html("wt:" + wt + ", dh:" + dh + ", wh:" + wh);
});
});
</script>
<style>
.createDiv {
border: 1px solid #999;
width: 400px;
height: 100px;
margin: 5px;
font-size: 50px;
}
#showDiv {
border: 1px solid #999;
width: 500px;
height: 30px;
position: fixed;
bottom: 0;
right: 100px;
}
</style>
</head>
<body>
<div id="showDiv"></div>
</body>
</html>
示例动图如下：
11.2、动态加载2
示例代码如下：
动态加载2.html
<!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>ajax案例-抽奖信息显示.html</title>
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// 1、先创建10个dv
for (var i = 0; i < 5; i++) {
createDiv();
}
// 创建div的函数
function createDiv() {
var $div = $("<div class='createDiv'/>");
$div.html(i+1);
$("body").append($div);
}
// 定时器
setInterval(showDiv, 100);
function showDiv() {
// 第一个div隐藏
$("div:first").slideUp(1000, function() {
// 把自己追加到最后
$(this).appendTo("body").slideDown(1000);
});
}
});
</script>
<style>
.createDiv {
border: 1px solid #999;
width: 400px;
height: 100px;
margin: 5px;
font-size: 50px;
}
</style>
</head>
<body>
</body>
</html>
示例动图如下：
版权声明：本文为chenmingjun原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。