jQuery控制页面（二）
一、处理表单元素的值
? 1、val()方法，可以获取表单元素中被选中项的value值，如果没有设置value值则获取其显示的文本值，在处理<select>时，用val()可以直接获取value值，而不需要考虑是单选下拉菜单还是多选下拉菜单。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>val()方法</title><style type="text/css"><!--select, p, span{font-size:13px;font-family:Arial, Helvetica, sans-serif;}--></style><script language="javascript" src="jquery.min.js"></script><script language="javascript">function displayVals(){//直接获取选中项的value值var singleValues = $("#constellation1").val();var multipleValues = $("#constellation2").val() || [];//因为存在不选的情况$("span").html("<b>Single:</b> " + singleValues + "<br><b>Multiple:</b> " + multipleValues.join(", "));}$(function(){//当修改选中项时调用$("select").change(displayVals); displayVals();});//2.设置表单元素的值function setVal(){$("input[type=button]").click(function(){var buttonValue = $(this).val();$("input[type=text]").val(buttonValue);});}</script></head><body><span></span><br><form method="post" name="myForm1"><p><select id="constellation1"><option value="Aries">白羊</option><option value="Taurus">金牛</option><option value="Gemini">双子</option><option value="Cancer">巨蟹</option><option value="Leo">狮子</option><option value="Virgo">处女</option><option value="Libra">天秤</option><option value="Scorpio">天蝎</option><option value="Sagittarius">射手</option><option value="Capricorn">摩羯</option><option value="Aquarius">水瓶</option><option value="Pisces">双鱼</option></select><select id="constellation2" multiple="multiple" style="height:120px;"><option value="Aries">白羊</option><option value="Taurus">金牛</option><option value="Gemini">双子</option><option value="Cancer">巨蟹</option><option value="Leo">狮子</option><option value="Virgo">处女</option><option value="Libra">天秤</option><option value="Scorpio">天蝎</option><option value="Sagittarius">射手</option><option value="Capricorn">摩羯</option><option value="Aquarius">水瓶</option><option value="Pisces">双鱼</option></select></p></form><p><input type="button" value="Feed"><input type="button" value="the"><input type="button" value="Input"></p><p><input type="text" value="click a button"></p><a href="#" onclick="setVal();"><p>2.设置表单元素的值</p></a></body></html>?二、处理页面中的事件
? 1、绑定事件监听
??? bind()方法的通用语法为：bind(eventType,[data],Listener)，其中eventType为事件的类型，可以是blur，focus,load,resize,scroll,unload,click,dblclick,mousedown,mouseup,mousemove,mouseover,
mouseout,mouseenter,mouseleave,change,select,submit,keydown,keypress,keyup,error。data为可选参数，用来传递一些特殊的数据供监听函数使用，而Listener为事件监听函数。对于多个事件类型，可以同时添加在eventType中，事件之间用空格分离。
$("p").bind("mouseenter mouseleave",function(){ $(this).toggleClass("over");});?? 一些特殊的事件类型可以直接利用事件名称作为绑定函数，如
$("p").click(function(){ .......});?? 其通用语法为：eventTypeName(fn);可以使用eventTypeName包括blur,focus,load,resize,scroll,unload,click,dblclick,mousedown,mouseup,mousemove,mouseover,mouseout,
change,select,submit,keydown,keypress,keyup,error等。
? （2）one()方法，该方法绑定的事件触发了一次之后会自动删除，不再生效。
? 2.移除事件监听
??? unbind()方法，移除事件监听
??? $("div").unbind();移除<div>标记的所有事件。
??? $("p").unbind("click");删除<p>标记的所有单击事件。
??? $("p").unbind("click",fn);移除某个指定事件。
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>bind()</title><style type="text/css"><!--img{border:1px solid #000000;}div{border:1px solid #000000;background:#fffd77;height:50px; width:50px;padding:8px; margin:5px;text-align:center;font-size:13px;font-family:Arial, Helvetica, sans-serif;float:left;}--></style><script language="javascript" src="jquery.min.js"></script><script language="javascript">//1.绑定监听事件function listener(){$("img").bind("click",fn = function(){$(document.body).append("<div>点击事件1</div>");}).bind("click",function(){$(document.body).append("<div>点击事件2</div>");}).bind("click",function(){$(document.body).append("<div> 点击事件3</div>");});}//2.one()方法，触发一次之后就失效（自动删除）function one(){for(var i = 0; i < 10; i++)$(document.body).append("<div>Chick<br>Me!</div>");var count = 1;$("div").one("click",function(){$(this).css({background:"#8f0000", color:"#FFFFFF"}).html("Clicked!<br>" + (count++));});}//3.移除事件监听函数function removeListener(){$("img").unbind("click",fn);}</script></head><body><img src="11.jpg"><a href="#" onclick="listener();"><p>1.绑定监听事件</p></a><a href="#" onclick="one();"><p>2.one()方法，触发一次之后就失效（自动删除）</p></a><input type="button" value="3.移除事件监听函数" onclick="removeListener();"> </body></html>?3.传递事件对象
?
属性/方法说明altKey按下Alt键则为true，否则为falsectrlKey按下Ctrl键则为true，否则为falsekeyCode对于keyup和keydown事件，返回按键的值（即“a”和“A”的值是一样的，都是65）pageX，pageY鼠标指针在客户端区域的坐标，不包括工具栏、滚动条等relatedTarget鼠标事件中鼠标指针所进入或离开的元素screenX，screenY鼠标指针相对于整个计算机屏幕的坐标值shiftKey按下Shift键则为true，否则为falsetarget引起事件的元素/对象type事件的名称，如click、mouseover等which键盘事件中为按键的Unicode值，鼠标事件中代表按键的值（1为左键、2为中键、3为右键）stopPropagation()阻止事件向上冒泡preventDefault()阻止事件的默认行为?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>事件对象</title><style type="text/css"><!--body{font-family:Arial, Helvetica, sans-serif;font-size:14px;margin:0px; padding:5px;}p{background:#ffe476;margin:0px; padding:5px;}--></style><script language="javascript" src="jquery.min.js"></script><script language="javascript">$(function(){$("p").bind("click",function(e){var sPage = "(" + e.pageX + "," + e.pageY + ")";var sScreen = "(" + e.screenX + "," + e.screenY + ")";$("span").html("<br>Page:" + sPage + "<br>Screen:" + sScreen);});});</script></head><body><p>Click Me!</p><span></span></body></html>?4.触发事件
??? trigger(eventType)方法来实现事件的触发，其中参数eventType为合法的事件类型，例如click、submit等。对于特殊的事件类型，如blur、change、click、focus、select和submit等还可以直接以事件名称作为触发函数 $("input:eq(0)").click();
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>事件触发</title><style type="text/css"><!--input{font-family:Arial, Helvetica, sans-serif;font-size:13px;margin:0px; padding:4px;border:1px solid #002b83;}div{font-family:Arial, Helvetica, sans-serif;font-size:12px; margin:2px;}--></style><script language="javascript" src="jquery.min.js"></script><script language="javascript">function Counter(oSpan){var iNum = parseInt(oSpan.text());//获取span中本身的值oSpan.text(iNum + 1);//点击次数加1}$(function(){$("input:eq(0)").click(function(){Counter($("span:first"));});$("input:eq(1)").click(function(){Counter($("span:last"));$("input:eq(0)").trigger("click");//触发按钮1的点击事件});});</script></head><body><input type="button" value="Button 1"><input type="button" value="Button 2"><br><br> <div>按钮1点击次数：<span>0</span></div> <div>按钮2点击次数：<span>0</span></div></body></html>?5.实现单击事件的动态交替
??? toggle()方法，该方法接受两个参数，这两个参数均为监听函数
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>toggle()</title><style type="text/css"><!--body{/* 设置背景图片，以突出透明度的效果 */background:url(bg1.jpg);margin:20px; padding:0px;}img{border:1px solid #FFFFFF;}--></style><script language="javascript" src="jquery.min.js"></script><script language="javascript">$(function(){$("img").toggle(function(oEvent){$(oEvent.target).css("opacity","0.5");},function(oEvent){$(oEvent.target).css("opacity","1.0");});});</script></head><body><img src="07.jpg"></body></html>?6.实现感应鼠标
??? hover(over,out)方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>hover()方法</title><style type="text/css"><!--body{/* 设置背景图片，以突出透明度的效果 */background:url(bg1.jpg);margin:20px; padding:0px;}img{border:1px solid #FFFFFF;}--></style><script language="javascript" src="jquery.min.js"></script><script language="javascript">$(function(){$("img").hover(function(oEvent){//第一个函数相当于mouseover事件监听$(oEvent.target).css("opacity","0.5");},function(oEvent){//第二个函数相当于mouseover事件监听$(oEvent.target).css("opacity","1.0");});});</script></head><body><img src="12.jpg"></body></html>??