jQuery的事件(程式碼演示如何使用)
阿新 • • 發佈:2019-01-26
1、jQuery的事件有哪些?
javscript的事件:onClick,onmouseover
jquery的事件:click,mouseover
注意jQuery的事件比javascript的事件少一個on
1)滑鼠事件
click:單擊事件
//dbclick:雙擊事件
mouseover:滑鼠懸念(移入)
mouseout:滑鼠移出
<style>
.abc{
background-color: #aaa;
}
</style>
<script type="text/javascript">
$(function(){
$("#nav li").mouseover(function(){
$(this).addClass("abc");//當滑鼠移入li元素時新增樣式
}).mouseout(function(){
//$(this).removeClass() //當滑鼠移出時刪除所有樣式
$(this ).removeClass("abc") //當滑鼠移出時刪除指定樣式
});
});
</script>
<div id="nav">
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">服裝</a></li>
<li ><a href="#">電器</a></li>
<li><a href="#">團購</a></li>
<li><a href="#">線上瀏覽</a></li>
</ul>
</div>
2) 鍵盤事件
keydown:鍵盤按下事件
keypress:鍵盤按下並放開時觸發
keydown:鍵盤放開時觸發
<script type="text/javascript">
$(function(){
//按回車鍵自動登入(不用再點選登入按鈕)
$(document).keydown(function(event){
if(event.keyCode==13){
$("#actionForm").submit();
return true;
}
return false;
})
});
</script>
<form id="actionForm" action="../index.html">
登入名:<input id="txtLoginName" /><br />
密碼:<input type="password" />
<input type="button" value="登入" />
</form>
3) 表單事件
focus:獲得焦點時觸發
blur:失去焦點
select:文字選中時觸發
<script type="text/javascript">
$(function(){
//文字框獲得焦點時,將當前文字框的內容清空(值等於"請輸入登入名..")
//文字框失去焦點時,判斷內容是否為"請輸入登入名.."或是否為空,那麼將這個值"請輸入登入名.."設回到文字框
$("#txtLoginName").focus(function(){
if($(this).val()=='請輸入登入名...'){
$(this).val('');//清空內容
}
}).blur(function(){
if($(this).val().trim()==''){
$(this).val('請輸入登入名...');//清空內容
}
});
});
</script>
<form id="actionForm" action="../index.html">
登入名:<input id="txtLoginName" value="請輸入登入名..." /><br />
密碼:<input type="password" />
<input type="button" value="登入" />
</form>
4)其它事件
bind():繫結事件
unbind():移除繫結事件
<script type="text/javascript">
$(function(){
//繫結單個事件
// $("#btn1").bind('click',function(){
// alert("OK");
// });
//繫結多個事件
$("#btn1").bind({
mouseover:function(){
alert("滑鼠懸念");
},
mouseout:function(){
alert("滑鼠移出");
}
})
//解除繫結事件
$("#btn2").click(function(){
//$("#btn1").unbind("click");//解除繫結的單個事件
$("#btn1").unbind("mouseover mouseout");//解除多個繫結的事件,用空格分隔
//$("#btn1").unbind();//解除所有繫結的事件
});
});
</script>
<input type="button" id="btn1" value="點我" /><br />
<input type="button" id="btn2" value="解除繫結" />
hover():相當於mouseover和mouseout的組合
.abc{
background-color: #aaa;
}
</style>
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<script type="text/javascript">
$(function(){
// $("#nav li").mouseover(function(){
// $(this).addClass("abc");//當滑鼠移入li元素時新增樣式
// }).mouseout(function(){
// //$(this).removeClass() //當滑鼠移出時刪除所有樣式
// $(this).removeClass("abc") //當滑鼠移出時刪除指定樣式
// });
$("#nav li").hover(
function(){
$(this).addClass("abc");//當滑鼠移入li元素時新增樣式
},
function(){
$(this).removeClass("abc") //當滑鼠移出時刪除指定樣式
}
);
});
</script>
togger():
a) 滑鼠連續點選
b) 顯示和隱藏
<script type="text/javascript">
$(function(){
//點選當前頁面時顯示紅綠藍的背景色
$("body").toggle(
function(){
$(this).css("background-color","red");
},
function(){
$(this).css("background-color","green");
},
function(){
$(this).css("background-color","blue");
}
);
});
</script>
</head>
<body>
測試
</body>