jQuery 10その他のいくつかの使い方
13488 ワード
次のコードがあります.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="JScript/jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#btn").click(function () {
alert($("input[name=gender]:checked").val());
});
$("input[name=gender]").click(
function () {
$("input[name=gender]").val(" ");
alert($(this).val());
});
$(":radio[name=gender]:checked").click(
function () {
// $("input[name=gender]").val(" ");
alert($(this).val());
});
});
</script>
</head>
<body>
<input type="button" id="btn" value="GetCheckedValue"/>
<input type="radio" name="gender" value=" " checked="checked" />
<input type="radio" name="gender" value=" " checked="checked" />
<input type="radio" name="gender" value=" " checked="checked" />
</body>
</html>jQueryにはhover(fn 1,fn 2)関数があり、fn 1はマウスが入ったイベントを表し、fn 2はマウスが離れたイベントを示す.
次のように書くことができます.
$("#id").hover(function(){},function(){});
また、匿名関数を使用する場合、function()のカッコにパラメータeを入力すると、イベントの方向を制御するためにイベントのコピーが渡されます.
divにpがあり、pにbuttonがあり、それぞれdiv.p.buttonがclickイベントを書くと、buttonのclickイベントが先に実行され、pのclickイベント、divイベントになります.これが我々が言うバブルイベントであり,pとdivがclickイベントを実行しないようにstopPropagation()を実行すればよい.すなわち$("#btn").click(function(e){alert(“私をクリックしました.”);e.stopPropagation();});イベントパラメータeはイベントオブジェクトである.
もう1つはデフォルトの動作$(「a」)を阻止することである.click(function(e){e.preventDefault();})、preventDefaultは、eventに相当する実行を終了することを表す.returnvalue=false;
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="JScript/jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#link1").click(function (e) {
alert(e.toString());
e.preventDefault();
})
$("#btn").click(function (e) {
e.preventDefault();
});
});
</script>
</head>
<body>
<a href="http://www.sina.com" id="link1">sina</a>
<input type="submit" id="btn" />
</body>
</html>その他のプロパティ:pageX、pageY、tagart:clientX、clientY、thisに相当します.
画像をマウスとともに走らせるには:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="JScript/jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$(document).mousemove(function (e) {
$("#div1").css("left", e.pageX).css("top", e.pageY);
});
});
</script>
</head>
<body>
<div id="div1" style="position:absolute">
<img src="imgs/dragon_fly.ico"/>
</div>
</body>
</html>またwhickはマウスのどのキーを表し、それぞれ左、中、右キーである.
AltKey,ctrlKey,shiftKeyはそれぞれキーボード上のaltctrlshiftキーを表す.
keyCode:キーボードの別名を表します.charCodeはASCコードを表す.
bind()は、$("#btn")のようなバインドイベントを表す.bind("click",function(){}); btnのclickにイベントを特定します.
unbind()は、$("#btn")のようなイベントを除去する.unbind("click");
one():一度だけのイベントで、これからは使いません.
show()、hide()メソッドは、要素を表示または非表示にします.その後、表示時間を追加できます.アニメーションで、デフォルトはfast、normal、lowの3種類で、200ミリ秒と定義されています.次のようになります.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="JScript/jquery-1.9.1.js" type="text/javascript"></script>
<title></title>
<script type="text/javascript">
$(function () {
$(":button[value=show]").click(function () {
$("#div1").show(2000);
});
$(":button[value=hide]").click(function () {
$("#div1").hide(1000);
});
});
</script>
</head>
<body>
<div id="div1">
</div>
<input type="button" id="show" value="show" />
<input type="button" id="hide" value="hide" />
</body>
</html>