[置顶] JavaWeb初级学习 之 JQuery
1、JQuery 元素筛选
eq() 跟:eq选择器相同，同样是获取指定索引的元素first() 跟:first选择器相同，获取第一个元素
last() 跟:last选择器相同，获取最后一个元素
hasClass(class) 检查当前的元素是否含有某个特定的类，如果有，则返回true。这其实就是 is("." + class)。
filter(exp) 选出符合指定选择器的元素
is() 判断元素是否符合is里的选择器。只要有一个符合就返回true
has(exp) 保留符合给定选择器的元素
not(exp) 跟:not选择器相同，删除符合选择器的元素
children(exp) 获取 jquery对象中每一个元素的孩子元素（exp是用过过滤留下符合选择选择器的元素）
find() 查找所有符合给定选择器的后代元素
next() 获取jquery对象中每一个元素的同辈元素的相连的后面一个元素
nextAll() 查找当前元素的所有后面的同辈元素
nextUntil() 查找当前元素之后所有的同辈元素，直到遇到匹配的那个元素为止。
parent() 查找包含所有元素的唯一父元素
prev(exp) 查找jquery对象中每一个元素的前一个连接的同辈元素
prevAll() 查找jquery对象中每一个元素的前面所有的同辈元素
prevUnit(exp) 查找Jquery对象中每一个元素的前面元素，到exp选择器元素为止
siblings(exp) 查找JQuery对象中每一个元素的同辈元素，并且要符合给定的选择器
add() 把JQuery对象和add选择器中的jquery对象合并
addSelf() 就是把第一个JQuery对象添加到后面的查询结果中
end() 取消最后一次的查询操作。
JQuery的特点：
隐式迭代 $(“ul li”).css(“background-color”,”red”);链式操作 $(“span”).add(“div”).add(“#one”);
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>DOM查询</title>
<style type="text/css">
div, span, p {
width: 140px;
height: 140px;
margin: 5px;
background: #aaa;
border: #000 1px solid;
float: left;
font-size: 17px;
font-family: Verdana;
}
div.mini {
width: 55px;
height: 55px;
background-color: #aaa;
font-size: 12px;
}
div.hide {
display: none;
}
</style>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function anmateIt(){
$("#mover").slideToggle("slow", anmateIt);
}
anmateIt();
//(1)eq() 选择索引值为等于 3 的 div 元素
$("#btn1").click(function(){
$("div").eq(3).css("background-color","#bfa");
});
//(2)first()选择第一个 div 元素
$("#btn2").click(function(){
$("div").first().css("background-color","#bfa");
});
//(3)last()选择最后一个 div 元素
$("#btn3").click(function(){
//last() 选取最后一个元素
$("div").last().css("background-color","#bfa");
});
//(4)filter()在div中选择索引为偶数的
$("#btn4").click(function(){
//filter() 过滤 传入的是选择器字符串
$("div").filter(":even").css("background-color","#bfa");
});
//(5)is()判断#one是否为:empty或:parent
//is用来检测jq对象是否符合指定的选择器
$("#btn5").click(function(){
// alert( $("#one").is(":empty"));//.css("background-color","#bfa");
alert( $("#one").is(":parent") );
});
//(6)has()选择div中包含.mini的
$("#btn6").click(function(){
//has(selector) 选择器字符串 是否包含selector
$("div").has(".mini").css("background-color","#bfa");
});
//(7)not()选择div中class不为one的
$("#btn7").click(function(){
//not(selector) 选择不是selector的元素
$("div").not(".one").css("background-color","#bfa");
});
//(8)children()在body中选择所有class为one的div子元素
$("#btn8").click(function(){
//children() 选出所有的子元素
$("body").children("div.one").css("background-color","#bfa");
});
// children 是查找过滤 孩子元素
// find 是查找或过滤 后代元素 （包含孩子元素 和 孙子元素 ）
//(9)find()在body中选择所有class为mini的div元素
$("#btn9").click(function(){
//find() 选出所有的后代元素
$("body").find(".mini").css("background-color","#bfa");
});
//(10)next() #one的下一个div
$("#btn10").click(function(){
//next() 选择下一个兄弟元素
$("#one").next("div").css("background-color","#bfa");
});
//(11)nextAll() #one后面所有的span元素
$("#btn11").click(function(){
//nextAll() 选出后面所有的元素
$("#one").nextAll("span").css("background-color","#bfa");
});
//(12)nextUntil() #one和span之间的元素
$("#btn12").click(function(){
//
$("#one").nextUntil("span").css("background-color","#bfa")
});
//(13)parent() .mini的父元素
$("#btn13").click(function(){
$(".mini").parent().css("background-color","#bfa");
});
//(14)prev() #two的上一个div
$("#btn14").click(function(){
//prev()
$("#two").prev("div").css("background-color","#bfa")
});
//(15)prevAll() span前面所有的div
$("#btn15").click(function(){
//prevAll() 选出前面所有的元素
$("span").prevAll("div").css("background-color","#bfa")
});
//(16)prevUntil() span向前直到#one的元素
$("#btn16").click(function(){
//prevUntil(exp) 找到之前所有的兄弟元素直到找到exp停止
$("span").prevUntil("#one").css("background-color","#bfa")
});
//(17)siblings() #two的所有兄弟元素
$("#btn17").click(function(){
//siblings() 找到所有的兄弟元素，包括前面的和后面的
$("#two").siblings().css("background-color","#bfa")
});
//(18)add()选择所有的 span 元素和id为two的元素
$("#btn18").click(function(){
// $("span,#two,.mini,#one")
$("span").add("#two").add(".mini")
.add("#one").css("background-color","#bfa");
});
//19.andSelf()选出#two 下面的.mini的元素，并改变他们所有颜色
$("#btn19").click(function(){
//andSelf() 包括自己
$("#two").find(".mini").andSelf().css("background-color","#bfa");
});
//20.end()选出#two 下面的.mini的元素，改变变#two的颜色"
$("#btn20").click(function(){
//end() 回到上一步状态
$("#two").find(".mini").first().end().end().css("background-color","#bfa");
}); /**/
});
</script>
</head>
<body>
<input type="button" value="eq()选择索引值为等于 3 的 div 元素" id="btn1" />
<input type="button" value="first()选择第一个 div 元素" id="btn2" />
<input type="button" value="last()选择最后一个 div 元素" id="btn3" />
<input type="button" value="filter()在div中选择索引为偶数的" id="btn4" />
<input type="button" value="is()判断#one是否为:empty或:parent" id="btn5" />
<input type="button" value="has()选择div中包含.mini的" id="btn6" />
<input type="button" value="not()选择div中class不为one的" id="btn7" />
<input type="button" value="children()在body中选择所有class为one的div子元素" id="btn8" />
<input type="button" value="find()在body中选择所有class为mini的div后代元素" id="btn9" />
<input type="button" value="next()#one的下一个div" id="btn10" />
<input type="button" value="nextAll()#one后面所有的span元素" id="btn11" />
<input type="button" value="nextUntil()#one和span之间的元素" id="btn12" />
<input type="button" value="parent().mini的父元素" id="btn13" />
<input type="button" value="prev()#two的上一个div" id="btn14" />
<input type="button" value="prevAll()span前面所有的div" id="btn15" />
<input type="button" value="prevUntil()span向前直到#one的元素" id="btn16" />
<input type="button" value="siblings()#two的所有兄弟元素" id="btn17" />
<input type="button" value="add()选择所有的 span 元素和id为two的元素" id="btn18" />
<input type="button" value="andSelf()，选出#two 下面的.mini的元素，并改变他们所有颜色" id="btn19" />
<input type="button" value="end()，选出#two 下面的.mini的元素，改变变#two的颜色" id="btn20" />
<h3>基本选择器.</h3>
<br /><br />
文本框<input type="text" name="account" disabled="disabled" />
<br><br>
<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"><b>class为mini,title为other</b></div>
<div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini">class为mini</div>
<div class="mini"></div>
</div>
<div 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="span1">^^span元素 111^^</span>
<div>
包含input的type为"hidden"的div<input type="hidden" size="8">
</div>
<span id="span2">^^span元素 222^^</span>
<div id="mover">正在执行动画的div元素.</div>
</body>
</html>
2、JQuery 的属性操作
JQuery属性操作html() 相当于innerHTML 可以设置和获取 起始标签和结束标签中的内容
text() 相当于innerText 可以设置和获取标签中的文本内容
val() 获取 元素的当前值，或者设置元素的值，如果是设置复选框或者下拉列表被选中，一定要会用数组
attr() 设置、获取 属性的值
prop() 设置、获取属性的值（推荐在复选，单选，下拉列表选中的option 获取选中状态）
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
</script>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
// 查找input元素，并且name属性值为a的元素
// alert( $("input[name='a']").size() );
// 获取选中元素的当前值
// alert( $("input[name='a']").val() );
// 设置选中元素的值
// $("input[name='a']").val("羞羞的");
// alert( $(":checkbox").size() );
// 我希望同时设置 蓝球 和 足球被选中
// $(":checkbox").val(['篮球','足球']);
// 设置 第一个被选中
// $(":checkbox:first").attr("checked","checked");
// $(":checkbox:first").prop("checked",true);
// 获取复选框的checked属性值
// alert( $(":checkbox:first").attr("checked") ); // undefined
// alert( $(":checkbox:first").prop("checked") ); // false
// prop和attr都是操作属性的。但是当我们要操作单选，复选，下拉选中的时候，我们推荐使用prop方法去设置
// 获取div中的内容
// alert( $("div").html() );
// 获取div中的文本
// alert( $("div").text() );
// 设置div中的内容
// $("div").html("<p>111</p>");
// 它会设置 元素中的文本内容。哪怕里面包含html标签，也会转换成为文本
$("div").text("<p>111</p>");
})
})
</script>
</head>
<body>
<div><span>div中的span标签</span></div>
<button id="btn1">获取文本框的name值</button>
<form action="#" id="form1">
文本框:<input name="a" value="abc" type="text"/><br/>
多选框:<input type="checkbox" name="interest" value="篮球">篮球
<input type="checkbox" name="interest" value="足球">足球
<input type="checkbox" name="interest" value="乒乓">乒乓
<input type="checkbox" name="interest" value="御马">御马
</form>
</body>
</html>
3、JQuery 练习
1).隔行变色
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
//1. 点击所有的 p 节点, 能够弹出其对应的文本内容
/*
在jquery中，.click（function(){}） 是绑定 单击事件
// 在绑定的function中有一个this对象,这个this对象是当前触发 事件的dom对象
*/
$("p").click(function(){
//
alert("爱你爱你：" + this.innerHTML + "，不爱你");
});
//2. 使第二个 table 隔行变色
$("table:eq(1) tr:even").css("background-color", "#FF0000");
//3. 点击 button, 弹出 checkbox 被选中的个数
$("button").click(function(){
// 获取选中的复选框的个数
alert( $(":checked").length )
});
});
</script>
</head>
<body>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<table>
<tr>
<td>第一行</td><td>第一行</td>
</tr>
<tr>
<td>第一行</td><td>第一行</td>
</tr>
<tr>
<td>第一行</td><td>第一行</td>
</tr>
<tr>
<td>第一行</td><td>第一行</td>
</tr>
<tr>
<td>第一行</td><td>第一行</td>
</tr>
<tr>
<td>第一行</td><td>第一行</td>
</tr>
</table>
<br>
<hr>
<br>
<table>
<tr>
<td>第一行</td><td>第一行</td>
</tr>
<tr>
<td>第一行</td><td>第一行</td>
</tr>
<tr>
<td>第一行</td><td>第一行</td>
</tr>
<tr>
<td>第一行</td><td>第一行</td>
</tr>
<tr>
<td>第一行</td><td>第一行</td>
</tr>
<tr>
<td>第一行</td><td>第一行</td>
</tr>
</table>
<input type="checkbox" name="test" />
<input type="checkbox" name="test" />
<input type="checkbox" name="test" />
<input type="checkbox" name="test" />
<input type="checkbox" name="test" />
<input type="checkbox" name="test" />
<button>您选中的个数</button>
</body>
</html>
2).全选，全不选，反选
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
// 相当于window.onload功能
$(function(){
//全选事件
$("#checkedAllBtn").click(function(){
// 设置全部被选中
// $(":checkbox").prop("checked",true);
// $(":checkbox").attr("checked","checked");
/*
jquery中有一个each方法，它可以遍历操作每一个dom对象
在each中的function，有一个this对象，这个对象当前正遍历的dom对象
*/
$(":checkbox").each(function(){ //
this.checked = true;
});
});
// 全不选事件
$("#checkedNoBtn").click(function(){
// 查找所有的复选框对象
var $checkBoxObjs = $(":checkbox");
// 遍历每一个dom对象
for(var i = 0; i < $checkBoxObjs.size(); i++) {
// 把jquery对象中的元素转换成为dom对象
var checkBoxObj = $checkBoxObjs[i];
// 修改dom对象的checked属性
checkBoxObj.checked = false;
}
});
/*
反选事件
*/
$("#checkedRevBtn").click(function(){
// 1.先获取所有球类的checkbox复选框
$("input[name='items']").each(function(){
// 2.遍历 判断原来的元素是否被选中。如果原来选中，设置为不选中
// 如果原来不选中，设置为选中
this.checked = !this.checked;
});
/*
当设置返选操作之后，我们要判断一下，是否所有的球类都被选中
如果所有的球类都被选中，那么 全选的复选框也应该被选中
反之亦然
*/
// 获取选中的复选框个数
var checkedCount = $(":checked").size();
// 判断选个的数是否全部的球类的个数
if ( checkedCount == $("input[name='items']").length ) {
$("#checkedAllBox").prop("checked",true);
} else {
$("#checkedAllBox").prop("checked",false);
}
});
//提交按钮事件
$("#sendBtn").click(function(){
// 获取球类中选中的复选框对象
$("input[name='items']:checked").each(function(){
// this是dom对象
alert(this.value);
});
});
// 全选，全不选单击事件
$("#checkedAllBox").click(function(){
//先获取 全选，全不选对象是否被选 中
//如果被选 中设置所有球类都选中
// 反之亦然
// if ( this.checked ) {
// $("input[name='items']").prop("checked",true);
// } else {
// $("input[name='items']").prop("checked",false);
// }
$("input[name='items']").prop("checked", this.checked );
});
/*找到所有的球类。添加单击事件*/
$("input[name='items']").click(function(){
// if ( $("input[name='items']:checked").length == $("input[name='items']").length )
// {
// alert("全选" + $("input[name='items']:checked").length);
// $("#checkedAllBox").prop("checked" , true);
// } else {
// $("#checkedAllBox").prop("checked" , false);
// }
$("#checkedAllBox").prop("checked"
, ( $("input[name='items']:checked").length == $("input[name='items']").length ) );
});
});
</script>
</head>
<body>
<form method="post" action="">
你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选
<br />
<input type="checkbox" name="items" value="足球" />足球
<input type="checkbox" name="items" value="篮球" />篮球
<input type="checkbox" name="items" value="羽毛球" />羽毛球
<input type="checkbox" name="items" value="乒乓球" />乒乓球
<br />
<input type="button" id="checkedAllBtn" value="全 选" />
<input type="button" id="checkedNoBtn" value="全不选" />
<input type="button" id="checkedRevBtn" value="反 选" />
<input type="button" id="sendBtn" value="提 交" />
</form>
</body>
</html>
4、Dom的增删改
内部插入：append() a.append(b) 是把b添加到a的元素内 跟javascript的appendChild类似外部插入：
appendTo() a.appendTo(b) 把a添加到b元素中
prepend() a.prepend(b) 是把b添加到a元素内的起始位置
prependTo() a.prependTo(b) 是a添加到b元素内的起始位置
after() a.after(b) 是在a的后面插入b元素包裹：
before() a.before(b) 是把b元素加到a前面
insertAfter() a.inertAfter(b) 把a元素插入到b元素的后面
insertBefore() a.insertBefore(b) 把a元素插入到b元素的前面
wrap() a.wrap(b) 是用b去包裹每一个a中的元素替换:
unwrap() a.unwrap() 是将a的父元素去掉
wrapAll() a.wrapAll(b) 是将所获a的元素用同一个b元素去包裹起来
wrapInner() a.wrapInner(b) 是用b去包裹所有a元素的子元素或文本内容
replaceWith() a.replaceWith(b) 用b去替换a删除：
replaceAll() a.replaceAll(b) 是用a去替换所有的b
remove() a.remove() 是a将自己从html文档中移除
empty() a.empty() 是将a元素里的内容清空
Dom操作的练习代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
</script>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
// 查找input元素，并且name属性值为a的元素
// alert( $("input[name='a']").size() );
// 获取选中元素的当前值
// alert( $("input[name='a']").val() );
// 设置选中元素的值
// $("input[name='a']").val("羞羞的");
// alert( $(":checkbox").size() );
// 我希望同时设置 蓝球 和 足球被选中
// $(":checkbox").val(['篮球','足球']);
// 设置 第一个被选中
// $(":checkbox:first").attr("checked","checked");
// $(":checkbox:first").prop("checked",true);
// 获取复选框的checked属性值
// alert( $(":checkbox:first").attr("checked") ); // undefined
// alert( $(":checkbox:first").prop("checked") ); // false
// prop和attr都是操作属性的。但是当我们要操作单选，复选，下拉选中的时候，我们推荐使用prop方法去设置
// 获取div中的内容
// alert( $("div").html() );
// 获取div中的文本
// alert( $("div").text() );
// 设置div中的内容
// $("div").html("<p>111</p>");
// 它会设置 元素中的文本内容。哪怕里面包含html标签，也会转换成为文本
$("div").text("<p>111</p>");
})
})
</script>
</head>
<body>
<div><span>div中的span标签</span></div>
<button id="btn1">获取文本框的name值</button>
<form action="#" id="form1">
文本框:<input name="a" value="abc" type="text"/><br/>
多选框:<input type="checkbox" name="interest" value="篮球">篮球
<input type="checkbox" name="interest" value="足球">足球
<input type="checkbox" name="interest" value="乒乓">乒乓
<input type="checkbox" name="interest" value="御马">御马
</form>
</body>
</html>
5、JQuery练习二
1).JQuery表单选择器练习
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
// 在页面加载完成之后
$(function(){
//第一个按钮绑定事件
//使单选下拉框的'选择3号'被选中
$(":button:eq(0)").click(function(){
// "#single option:eq(2)是选择id为single的select元素下的option元素，只 取第三个
// $("#single option:eq(2)").prop("selected" , true);
// 设置下拉的值为第三个的值，同样可以设置3号被选中
$("#single").val(['s3']);
});
// 第二个按钮 绑定事件
//使多选下拉框选中的'选择2号'和'选择4号'被选中
$(":button:eq(1)").click(function(){
// 这种方式要先把原来的给取消选中
// $("#multiple option:selected").prop("selected" ,false);
// 然后再设置 2号和4号选 中
// $("#multiple option:eq(1),#multiple option:eq(3)").prop("selected",true);
// $("#multiple option:eq(1)").add("#multiple option:eq(3)").prop("selected",true);
// $("#multiple option:odd").prop("selected" ,true);
// 直接设置只有2号和4号被选中
$("#multiple").val(['x2','x4']);
});
//第三个按钮绑定 单击事件
//使多选框的'多选2'和'多选4'被选中
$(":button:eq(2)").click(function(){
$(":checkbox").val(['check2','check4']);
});
//第四个按钮单击事件
//使单选框的'单选2'被选中
$(":button:eq(3)").click(function(){
// :radio:eq(1)是查找单选框中第二个元素'单选2'的单选框
$(":radio:eq(1)").prop("checked",true);
});
// 第五个按钮的单击事件
//打印已经被选中的值
$(":button:eq(4)").click(function(){
//1.查找:checked被选中的 单选，复选，下拉列表选中的option
$(":checked").each(function(){
//2.遍历打开所有的值
// 在each遍历的function中有一个this对象，这个对象是当前遍历到的dom对象
alert(this.value);
});
});
});
</script>
</head>
<body>
<input type="button" value="使单选下拉框的'选择3号'被选中"/>
<input type="button" value="使多选下拉框选中的'选择2号'和'选择4号'被选中"/><br>
<input type="button" value="使多选框的'多选2'和'多选4'被选中"/>
<input type="button" value="使单选框的'单选2'被选中"/><br>
<input type="button" value="打印已经被选中的值"><br>
<br/>
<select id="single" name="singlecheck">
<option value="s1">选择1号</option>
<option value="s2">选择2号</option>
<option value="s3">选择3号</option>
</select>
<select id="multiple" multiple="multiple" name="multiplecheck" style="height:120px;">
<option selected="selected" value="x1">选择1号</option>
<option value="x2">选择2号</option>
<option value="x3">选择3号</option>
<option value="x4">选择4号</option>
<option selected="selected" value="x5">选择5号</option>
</select>
<br/><br/>
<input type="checkbox" name="c" value="check1"/> 多选1
<input type="checkbox" name="c" value="check2"/> 多选2
<input type="checkbox" name="c" value="check3"/> 多选3
<input type="checkbox" name="c" value="check4"/> 多选4
<br/>
<input type="radio" name="r" value="radio1"/> 单选1
<input type="radio" name="r" value="radio2"/> 单选2
<input type="radio" name="r" value="radio3"/> 单选3
</body>
</html>
2).从左到右，从右到左练习
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
select {
width: 100px;
height: 140px;
}
div {
width: 130px;
float: left;
text-align: center;
}
</style>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
// 先加页面加载完成之后的事件
$(function(){
// 选中添加到右边
$("button:eq(0)").click(function(){
//1.先把左边选中的option标签对象获取出来
// alert( $("select:eq(0) option:selected").length );
//2.把选中的添加到右边的select中
$("select:eq(0) option:checked").appendTo("select[name='sel02']");
});
// 全部添加到右边
$("button:eq(1)").click(function(){
// 1.先获取左边下拉列表中所有的option
// alert( $("select[name='sel01'] option").length );
// 2.添加到右边的下拉列表中
$("select[name='sel01'] option").appendTo("select[name='sel02']");
});
//右边选中的option删除到左边
$("button:eq(2)").click(function(){
// 获取右边选个的option
// alert( $("select[name='sel02'] option:selected").length );
// 把右边选中的option，添加到左边的select中
$("select[name='sel02'] option:selected").appendTo("select[name='sel01']");
});
// 全部删除到左边
$("button:eq(3)").click(function(){
// 1.先获取右边select中全部的option对象
var $selectedOptions = $("select[name='sel02'] option");
// 2.把选中的option对象添加到左边的select中
$selectedOptions.appendTo("select[name='sel01']");
});
});
</script>
</head>
<body>
<div id="left">
<select multiple="multiple" name="sel01">
<option value="opt01">选项1</option>
<option value="opt02">选项2</option>
<option value="opt03">选项3</option>
<option value="opt04">选项4</option>
<option value="opt05">选项5</option>
<option value="opt06">选项6</option>
<option value="opt07">选项7</option>
<option value="opt08">选项8</option>
</select>
<button>选中添加到右边</button>
<button>全部添加到右边</button>
</div>
<div id="rigth">
<select multiple="multiple" name="sel02">
</select>
<button>选中删除到左边</button>
<button>全部删除到左边</button>
</div>
</body>
</html>
3).动态添加、删除表格记录
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="styleB/css.css" />
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
// 在页面加载完成之后
$(function(){
// alert( $("a").length );
// 查找现有的a标签，绑定 单击事件
// 把a标签的单击事件，单独变成一个变量。这样只要变量的作用域可以访问，这个函数就可以使用
var aDeleteFunction = function(){
// 1.先通过a标签单击事件，中this属性，获取到td父元素
// 2.再通过td元素通过到tr行元素
// 3.通过行元素对象.remove()行对象，进行删除操作
// $(this).parent().parent().remove();
// 通过a标签对象获取到tr行对象
var $trObj = $(this).parent().parent();
// 通过tr对象查找后代的td元素，
// 并且first()只返回td元素的第一个。
var nameText = $trObj.find("td").first().html() ;
// 确认框提示框
// 它有一个返回值，当你确认确定的时候，返回true
// 当你点击取消的时候，返回false
var result = confirm("你确定要删除 " + nameText + " 吗？");
if (result) {
$trObj.remove();
} else {
}
// 取消默认行为
return false;
};
// 给页面上的a标签添加单击事件
$("a").click(aDeleteFunction);
// 给submit按钮绑定单击事件
$("#addEmpButton").click(function(){
//获取新员工的姓名
var nameText = $("#empName").val();
//获取新员工的姓名
var emailText = $("#email").val();
//获取新员工的姓名
var salaryText = $("#salary").val();
// alert("姓名：" + nameText + ",email:" + emailText + ",工资：" + salaryText);
// 创建一个新的行对象
var $newTrObj = $("<tr><td>" + nameText + "</td><td>" + emailText + "</td>" +
"<td>" + salaryText + "</td>" +
"<td><a href='javascript:void(0)'>Delete</a></td></tr>");
// 把新创建的行添加到table对象中
$newTrObj.appendTo("#employeeTable");
//查找所有的a标签，因为最后创建的tr中的a标签是最后一个a元素
$("a:last").click(aDeleteFunction);
// $newTrObj.find("a").click(function(){
// alert("我是A货");
// });
});
});
</script>
</head>
<body>
<table id="employeeTable">
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
<th> </th>
</tr>
<tr>
<td>Tom</td>
<td>[email protected]</td>
<td>5000</td>
<td><a href="deleteEmp?id=001">Delete</a></td>
</tr>
<tr>
<td>Jerry</td>
<td>[email protected]</td>
<td>8000</td>
<td><a href="deleteEmp?id=002">Delete</a></td>
</tr>
<tr>
<td>Bob</td>
<td>[email protected]</td>
<td>10000</td>
<td><a href="deleteEmp?id=003">Delete</a></td>
</tr>
</table>
<div id="formDiv">
<h4>添加新员工</h4>
<table>
<tr>
<td class="word">name: </td>
<td class="inp">
<input type="text" name="empName" id="empName" />
</td>
</tr>
<tr>
<td class="word">email: </td>
<td class="inp">
<input type="text" name="email" id="email" />
</td>
</tr>
<tr>
<td class="word">salary: </td>
<td class="inp">
<input type="text" name="salary" id="salary" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button id="addEmpButton" value="abc">
Submit
</button>
</td>
</tr>
</table>
</div>
</body>
</html>
6、CSS样式操作。
addClass() 可以给所有匹配的元素添加class，多个class值用空格分隔removeClass() 可以给所有匹配的元素移除class，多个class值用空格分隔
toggleClass() 如果指定的class存在就删除指定的class，不存在就添加
hasClass() 判断匹配的元素，是否存在指定的class，只要有一个存在就返回true否则返回false
css() 它可以获取或设置指定的css样式值
height() 它可以获取或设置元素的高度（PX为单位）
width() 它可以获取或设置元素的宽度（PX为单位）
offset() 它可以获取或设置元素的位置（top和left的值）
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
div{
width:100px;
height:260px;
}
div.whiteborder{
border: 2px white solid;
}
div.redDiv{
background-color: red;
}
div.blueBorder{
border: 5px blue solid;
}
</style>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
var $divEle = $('div:first');
$('#btn01').click(function(){
//addClass() - 向被选元素添加一个或多个类
$divEle.addClass("redDiv");
});
$('#btn02').click(function(){
//removeClass() - 从被选元素删除一个或多个类
$divEle.removeClass("redDiv");
});
$('#btn03').click(function(){
//hasClass() - 检查被选元素是否包含指定的 class
alert( $divEle.hasClass("redDiv") );
});
$('#btn04').click(function(){
//toggleClass() - 对被选元素进行添加/删除类的切换操作
$divEle.toggleClass("blueBorder");
});
$('#btn05').click(function(){
//css() - 设置或返回样式属性
// alert( $divEle.css("background-color") );
$divEle.css("background-color","#00FF00");
});
$('#btn06').click(function(){
//height() - 设置或返回匹配元素的高度。
// alert( $divEle.height() );
$divEle.height(10000);
});
$('#btn07').click(function(){
//width() - 设置或返回匹配元素的宽度。
$divEle.width(1000);
});
$('#btn08').click(function(){
//offset() - 返回第一个匹配元素相对于文档的位置。
// console.log( $divEle.offset() );
//offset传递参数就可以设置它的偏移量（top和left）
$divEle.offset({top:200,left:400});
});
})
</script>
</head>
<body>
<table align="center">
<tr>
<td>
<div class="border">
</div>
</td>
<td>
<div class="btn">
<input type="button" value="addClass()" id="btn01"/>
<input type="button" value="removeClass()" id="btn02"/>
<input type="button" value="hasClass()" id="btn03"/>
<input type="button" value="toggleClass()" id="btn04"/>
<input type="button" value="css()" id="btn05"/>
<input type="button" value="height()" id="btn06"/>
<input type="button" value="width()" id="btn07"/>
<input type="button" value="offset()" id="btn08"/>
</div>
</td>
</tr>
</table>
<br /> <br />
<br /> <br />
</body>
</html>
7、JQuery动画
Jquery的动画函数都可以传递时间和函数执行之后的回调函数基本动画 (修改元素的宽和高)
show() 指隐藏的元素显示出来，它可以传递一个时间，来设置这个显示的时间.还可以传递两个参数.一个时间,另一个是动画执行完后要执行的方法$(function() {
$("button").click(function() {
// show方法第一个参数是动画执行时间
// 第二个参数是动画执行完后要调用 的方法（也就是回调函数）
$("div").show(1000,function(){
alert("动画执行完成！");
});
});
});
hide() 它可以隐藏显示的元素,它可以传递两个参数,第一个参数是动画执行的时间.第二个参数是动画执行完后要调用的回调函数
$("button:last").click(function() {
$("div").hide("fast",function(){
alert("你看不见我，看不见我");
});
})
toggle() 它可以切换元素的可见性.如果元素可见设置为不可见,如果元素不可见,设置为可见
滑动动画 (修改元素的调试)
slideDown() 增加元素的高度,让元素显示出来
slideUp() 减少元素的高度,让元素隐藏起来
slideToggle() 通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。
淡入淡出动画(修改元素的透明度)
fadeIn() 通过修改元素的透明度来慢慢显示元素fadeOut() 通过修改元素的透明度来慢慢隐藏元素
fadeTo() 将元素的透明度按照给定的时间修改到指定的透明度
fadeToggle() 通过修改元素的透明度来淡入或者淡出元素
<!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="Demo/script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function() {
$("button:first").click(function() {
// show方法第一个参数是动画执行时间
// 第二个参数是动画执行完后要调用 的方法（也就是回调函数）
$("div").show(1000,function(){
alert("动画执行完成！");
});
});
$("button:eq(1)").click(function() {
// 隐藏元素，
$("div").hide("fast",function(){
alert("你看不见我，看不见我");
});
});
$("button:eq(2)").click(function() {
// 切换元素，如果元素可见，调用 hide() 如果元素不可见，调用 show()
$("div").toggle(1000);
});
$("button:eq(3)").click(function() {
//改变元素的高度，从上到下，显示元素
$("div").slideDown(1000,function(){
alert("slideDown aminate over！");
});
});
$("button:eq(4)").click(function() {
// 改变元素的高度，从下到上，隐藏元素
$("div").slideUp(1000);
});
$("button:eq(5)").click(function() {
// 切换调用 slideUp和slideDown方法，如果元素不可见，调用 slideDown
// 如果元素可见，调用 slideUp
$("div").slideToggle(1000,function(){
alert(1);
});
});
//
$("button:eq(6)").click(function() {
// 元素淡入
// 显示元素
$("div").fadeIn(1000);
});
//
$("button:eq(7)").click(function(){
// div元素淡出，隐藏
$("div").fadeOut(1000,function(){
alert("我消失了！");
});
});
//
$("button:eq(8)").click(function(){
// Math.random它可以产生一个0-1之间的随机函数
$("div").fadeTo(1000,Math.random());
// ,function(){
// alert("fadeTo over!");
// });
});
//
$("button:eq(9)").click(function(){
// Math.random它可以产生一个0-1之间的随机函数
$("div").fadeToggle(1000);
});
});
</script>
</head>
<body>
<button>show div</button>
<button>hide div</button>
<button>toggle div</button>
<button>slideDown div</button>
<button>slideUp div</button>
<button>slideToggle div</button>
<button>fadeIn div</button>
<button>fadeOut div</button>
<button>fadeTo div</button>
<button>fadeToggle div</button>
<div
style="border: 1px solid blue;height: 100px;width: 100px;background-color: red; display: none;">
我帅的不要不要的！
</div>
</body>
</html>
练习06、CSS_动画 品牌展示
需求：1.点击按钮的时候，隐藏和显示卡西欧之后的品牌。
2.当显示全部内容的时候，按钮文本为“显示精简品牌”然后，小三角形向上。所有品牌产品为默认颜色。
3.当只显示精简品牌的时候，要隐藏卡西欧之后的品牌，按钮文本为“显示全部品牌”然后小三形向下。并且把 佳能，尼康的品牌颜色改为红色（给li标签添加promoted样式即可）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>品牌展示练习</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-size: 12px;
text-align: center;
}
a {
color: #04D;
text-decoration: none;
}
a:hover {
color: #F50;
text-decoration: underline;
}
.SubCategoryBox {
width: 600px;
margin: 0 auto;
text-align: center;
margin-top: 40px;
}
.SubCategoryBox ul {
list-style: none;
}
.SubCategoryBox ul li {
display: block;
float: left;
width: 200px;
line-height: 20px;
}
.showmore , .showless{
clear: both;
text-align: center;
padding-top: 10px;
}
.showmore a , .showless a{
display: block;
width: 120px;
margin: 0 auto;
line-height: 24px;
border: 1px solid #AAA;
}
.showmore a span {
padding-left: 15px;
background: url(img/down.gif) no-repeat 0 0;
}
.showless a span {
padding-left: 15px;
background: url(img/up.gif) no-repeat 0 0;
}
.promoted a {
color: #F50;
}
</style>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function() {
// 1.点击按钮的时候，隐藏和显示卡西欧之后的品牌。
// alert( $("div>a").length );
// 添加一个变量来保存当前品牌是否是全部显示的状态
// true为显示全部的状态
// false为只显示精简品牌
var isShowAll = false;
// 查找div下的div，也就是需要去修改样式，可以改变小三角的div元素
var $div_div = $("div>div");
// 查找要修改的按钮的文本标签，也就是span标签
// div>a>span是找到点击后要修改的文本的span标签
var $div_a_span = $("div>a>span");
// 当按钮的文本为显示精简品牌的时候，小三角形需要向上
$div_a_span.html("显示精简品牌");
$div_div.addClass("showless");
$("li:contains('佳能'),li:contains('尼康')").addClass("promoted");
$("div>a").click(function(){
// $("li:gt(5):not(:last)")获取到的是卡西欧之后的品牌，不包含最后一个
// alert(isShowAll);
$("li:gt(5):not(:last)").toggle(isShowAll);
isShowAll = !isShowAll;
// 2.当显示全部内容的时候，按钮文本为“显示精简品牌”
// 然后，小三角形向上。所有品牌产品为默认颜色。
// 先把原来的class都删除掉
$div_div.removeClass();
if (isShowAll) {
$div_a_span.html("显示全部品牌");
// 当按钮的文本为显示全部品牌的时候，小三角形需要向下
$div_div.addClass("showmore");
// 3.当只显示精简品牌的时候，要隐藏卡西欧之后的品牌，按钮文本为“显示全部品牌”
// 然后小三形向下。并且把 佳能，尼康的品牌颜色改为红色（给li标签添加promoted样式即可）
$("li:contains('佳能'),li:contains('尼康')").removeClass("promoted");
} else {
$div_a_span.html("显示精简品牌");
// 当按钮的文本为显示精简品牌的时候，小三角形需要向上
$div_div.addClass("showless");
// 3.当只显示精简品牌的时候，要隐藏卡西欧之后的品牌，按钮文本为“显示全部品牌”
// 然后小三形向下。并且把 佳能，尼康的品牌颜色改为红色（给li标签添加promoted样式即可）
$("li:contains('佳能'),li:contains('尼康')").addClass("promoted");
}
return false;
});
});
</script>
</head>
<body>
<div class="SubCategoryBox">
<ul>
<li><a href="#">佳能</a><i>(30440) </i></li>
<li><a href="#">索尼</a><i>(27220) </i></li>
<li><a href="#">三星</a><i>(20808) </i></li>
<li><a href="#">尼康</a><i>(17821) </i></li>
<li><a href="#">松下</a><i>(12289) </i></li>
<li><a href="#">卡西欧</a><i>(8242) </i></li>
<li><a href="#">富士</a><i>(14894) </i></li>
<li><a href="#">柯达</a><i>(9520) </i></li>
<li><a href="#">宾得</a><i>(2195) </i></li>
<li><a href="#">理光</a><i>(4114) </i></li>
<li><a href="#">奥林巴斯</a><i>(12205) </i></li>
<li><a href="#">明基</a><i>(1466) </i></li>
<li><a href="#">爱国者</a><i>(3091) </i></li>
<li><a href="#">其它品牌相机</a><i>(7275) </i></li>
</ul>
<div class="showmore">
<a href="more.html"><span>显示全部品牌</span></a>
</div>
</div>
</body>
</html>
8、Query事件操作
$(function(){}); 和window.onload = function(){}的区别？
它们都是页面被加载完成之后!$(function(){
});
它的全写是
$(document).ready(function(){
});
document是用管理dom对象。它表示整个html文档
document ready 就是文档（dom对象）准备好之后
那么什么是document对象准备好之后呢？
1.就是所有的html标签被浏览器加载完成，
2.并且所有的Dom对象被创建好之后。
3.因为Document对象就是来用管理所有dom对象的。
4.所以$(document).ready(function(){}); 这个方法的意思，
5.就是浏览器把html页面加载完成，并把所有Dom对象都生成好之后。
而window.onload 方法，不仅仅是页面被加载完成之后。而且还是页面中所有元素数据得到之后。
他们分别是在什么时候触发？
- $(document).ready() 这个方法是在页面中所有的标签对象（dom对象）被创建好之后执行。
- window.onload事件，是页面中所有元素被加载完成之后执行。
他们触发的顺序？
先执行$(document).ready() 方法，也就是$(function(){}) ;
后执行window.onload事件
$(document).ready()它可以注册多个回调函数，个数不限，它们执行的顺序就是他们注册的顺序。
window.onload事件只会执行一次，如果多次赋值，它会被最后一次赋值覆盖。
<!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"></script>
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
/*
执行的顺序
jquery的$(document).ready(function(){}) 会比window.onload先执行。
$(document).ready() 这个执行的说明
$(document).ready(function(){})执行的时候，浏览器已经把html文件加载完成，
html中所有的标签对象（dom对象）就会被创建完成，并且整个document的树结构已经创建好。
document ready 就是document对象准备好之后
document的工作就是管理 dom对象
window.onload执行的说明
window.onload 事件的执行，也是在页面加载完成之后。
但是window.onload事件会等到页面中所有元素加载完成
$(document).ready()这个方法它可以添加多个回调函数（不限次数）
然后它们调用 的顺序 是它们注册 的顺序
*/
$(document).ready(function(){
alert("页面被加载完成之后！这是JQuery的");
});
//这是$(document).ready(function(){}) 的简写
$(function(){
alert("jquery页面加载完成之后2");
})
$(function(){
alert("jquery页面加载完成之后3");
})
$(function(){
alert("jquery页面加载完成之后4");
})
$(function(){
alert("jquery页面加载完成之后5");
})
// window.onload多次赋值会被最后一次赋值给覆盖
// window.onload事件只会执行一次
window.onload = function(){
alert("window.onload事件");
}
window.onload = function(){
alert("window.onload事件2");
}
</script>
</head>
<body>
<button>我是按钮</button>
<iframe src="http://www.baidu.com"></iframe>
<br/>
<img alt="图片找不到" width="100" height="100" src="http://www.baidu.com/1.jpg">
</body>
</html>
click() 它可以绑定单击事件（传递function的时候绑定），也可以触发单击事件（没有传递参数时候触发）
mouseover() 它可以绑定鼠标移入事件（传递function的时候绑定），也可以触发鼠标移入事件（没有传递的时候触发）
mouseout() 它可以绑定鼠标移出事件（传递function的时候绑定，也可以触发鼠标移出事件（没有传递的时候触发）
bind() 它可以给元素绑定事件，也可以在绑定的时候，同时绑定多个事件。
one() 它可以给元素绑定一次性的事件。事件在触发之后，自动取消绑定
live() 它可以给元素绑定事件。并且后面生成的元素只要跟前面的选择器匹配上，也会自动的生效前面绑定的事件。
unbind() unbind操作也bind相反，它可以取消事件。当传递一个事件名的时候，取消一个事件的绑定。当没有传递要取消的事件名的时候，取消元素所有的事件绑定。
<!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="Demo/script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
//绑定事件
$("button:first").click(function(){
// alert("按钮的单击事件");
// $("p").click(function(){
// alert("这是一个p");
// });
// // 绑定鼠标移入事件
// $("p").mouseover(function(){
// alert("mouseover");
// });
// // 绑定鼠标移出事件
// $("p").mouseout(function(){
// alert("鼠标，不要走，不要不要的！");
// });
// 绑定鼠标移入事件，移出事件
// $("p").mouseover(function(){
// alert("mouseover");
// }).mouseout(function(){
// alert("鼠标，不要走，不要不要的！");
// });
//bind绑定事件
// $("p").bind("click",function(){
// alert("这是bind方式绑定的click事件");
// });
// bind同时绑定多个事件
$("p").bind("click mouseout",function(){
alert("bind同时绑定click和mouseout事件");
});
//使用one方式为p元素绑定一次性的单击事件
//只触发一次之后，事件自动取消
// $("p").one("click",function(){
// alert("这是一次性的单击事件！");
// });
// live方法绑定事件，对后面匹配上的元素也自动的生效
// $("p").live("click",function(){
// alert("这是live绑定的单击事件！");
// });
// $("<p>这是新创建的段落p标签</p>").appendTo("body");
});
//触发事件
$("button:eq(1)").click(function(){
//触发p段落的单击事件
// $("p").click();
// $("p").mouseover();
// $("p").mouseout();
});
// 取消事件
$("button:eq(2)").click(function(){
//取消p段落的单击事件
// $("p").unbind("click");
// 同时取消所有事件
$("p").unbind();
});
});
</script>
</head>
<body>
<button>绑定事件</button>
<button>触发事件</button>
<button>取消事件</button>
<p style="border: 1px red solid;">这是段落</p>
</body>
</html
事件的冒泡
什么是事件的冒泡？事件的冒泡是指，父子元素同时监听同一个事件。当触发子元素的事件的时候，同一个事件也被传递到了父元素的事件里去响应。
那么如何阻止事件冒泡呢？
在事件函数体内，return false; 可以阻止事件的冒泡传递。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
font-size: 13px;
line-height: 130%;
padding: 60px;
}
#content{
width: 220px;
border: 1px solid #0050D0;
background: #96E555;
}
span{
width: 200px;
margin: 10px;
background: #666666;
cursor: pointer;
color: white;
display: block;
}
p{
width: 200px;
background: #888;
color: white;
height: 16px;
}
</style>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
/*
事件冒泡
取消事件的冒泡 ，只需要在事件响应的函数体内使用
return false语句即可取消事件的向上传递
*/
$("span").click(function(){
alert("我是span");
// 可以取消事件的向上传递
return false;
});
$("div:first").click(function(){
alert("我是div");
//取消单击事件的向上传递
return false;
});
$("body").click(function(){
alert("我是body");
});
})
</script>
</head>
<body>
<div id="content">
外层div元素
<span>内层span元素</span>
外层div元素
</div>
</body>
</html>
事件对象
事件对象，是封装有触发的事件信息的一个javascript对象。我们重点关心的是怎么拿到这个javascript的事件对象。以及使用。
如何获取呢javascript事件对象呢？
只需要我们在绑定的事件函数的参数列表中添加一个参数。参数的名称我们习惯取event.
比如：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
#areaDiv {
border: 1px solid black;
width: 300px;
height: 50px;
margin-bottom: 10px;
}
#showMsg {
border: 1px solid black;
width: 300px;
height: 20px;
}
</style>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
//2.JQuery代码获取 事件对象
// $("#areaDiv").click(function(event){
// alert("这是单击事件");
// console.log(event);
// });
//1.原生javascript获取 事件对象
// document.getElementById("showMsg").onclick = function(event){
// alert("这是原生的javascript 绑定的单击事件");
// console.log(event);
// }
//3.使用bind同时对多个事件绑定同一个函数。怎么获取当前操作是什么事件。
$("div:first").bind("click mouseout",function(event){
// event.type是事件的类型
// console这是JavaScript中一个用于测试的对象。log方法可以用来打印日记
console.log(event.type);
if (event.type == "click") {
console.log("这是单击事件");
} else if(event.type == "mouseout") {
console.log("这是鼠标移出事件");
}
});
});
</script>
</head>
<body>
<div id="areaDiv"></div>
<div id="showMsg"></div>
</body>
</html>
☆练习07 事件 图片跟随
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
body {
text-align: center;
}
#small {
margin-top: 150px;
}
#showBig {
position: absolute;
display: none;
}
</style>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
$("#small").bind("mouseover mouseout mousemove",function(event){
// 鼠标 移入事件，就让大的金条显示
var $showBig = $("#showBig");
var $showXY = $("#showXY");
if (event.type=="mouseover") {
// event.pageX 和event.pageY是事件响应时候的鼠标坐标
console.log( "x=" + event.pageX + ",y=" + event.pageY );
// 大图片显示
$showBig.show();
// 这是设置图片出现的位置
$showBig.offset({top: event.pageY, left: event.pageX});
} else if (event.type == "mouseout") {
$showBig.hide();
} else if (event.type == "mousemove") {
$showBig.show();
// event.pageX 和event.pageY是事件响应时候的鼠标坐标
// console.log( "x=" + event.pageX + ",y=" + event.pageY );
$showXY.html("x=" + event.pageX + ",y=" +event.pageY );
// 当鼠标移动 的时候，不停地更新图片的位置和鼠标同步
$showBig.offset({top:(event.pageY + 10), left: (event.pageX + 10)});
}
});
});
</script>
</head>
<body>
<div id="showXY"></div>
<br/>
<img id="small" src="img/small.jpg" />
<div id="showBig">
<img src="img/big.jpg">
</div>
</body>
</html>