一、处理表单元素的值
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="#" οnclick="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="#" οnclick="listener();"><p>1.绑定监听事件</p></a> <a href="#" οnclick="one();"><p>2.one()方法,触发一次之后就失效(自动删除)</p></a> <input type="button" value="3.移除事件监听函数" οnclick="removeListener();"> </body> </html>
3.传递事件对象
属性/方法 | 说明 |
altKey | 按下Alt键则为true,否则为false |
ctrlKey | 按下Ctrl键则为true,否则为false |
keyCode | 对于keyup和keydown事件,返回按键的值(即“a”和“A”的值是一样的,都是65) |
pageX,pageY | 鼠标指针在客户端区域的坐标,不包括工具栏、滚动条等 |
relatedTarget | 鼠标事件中鼠标指针所进入或离开的元素 |
screenX,screenY | 鼠标指针相对于整个计算机屏幕的坐标值 |
shiftKey | 按下Shift键则为true,否则为false |
target | 引起事件的元素/对象 |
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>