jQuery事件與動畫基礎(chǔ)詳解
今天我們就談?wù)刯query中的事件和簡單動畫吧,它們畢竟基礎(chǔ)是進(jìn)階華麗的根本??!
1.事件
1.window事件
ready 準(zhǔn)備就緒
2.鼠標(biāo)事件
方法 執(zhí)行時機
click(fn) 單擊鼠標(biāo)
$(document).ready(function(){
$("dd>img").click(function(){
$("dt>img").show();
});
mouseover(fn) 鼠標(biāo)指針移過時
mouseout(fn) 鼠標(biāo)指針移出時
$("#nav .navsBox ul li").mouseover(function(){
$(this).addClass("onbg"); //為該元素添加類樣式.onbg
}).mouseout(function(){
$(this).removeClass("onbg");//為該元素移除類樣式.onbg
});
hover()
$(".top").hover(function(){
$(this).addClass('bgreen');
},function(){
$(this).removeClass('bgreen');
});
3.鍵盤事件
keydown() 按下鍵盤時
keyup() 釋放按鍵時
keypress() 產(chǎn)生可打印的字符時
$(function(){
$("[type=password]").keyup(function(){
$("#e").append("keyup");
}).keydown(function(){
$("#e").append("keydown");
}).keypress(function(){
$("#e").append("keypress");
});
$(document).keydown(function(event){
if(event.keyCode=="13"){
alert("確認(rèn)要提交么???");
}
});
});
4.表單事件
focus() 獲得焦點
blur() 失去焦點
$(function(){
$("input").focus(function(){
$(this).next().css("color","red");
//alert("1123");
});
$("input").blur(function(){
$(this).next().css("color","");
});
});
綁定事件與移除事件
bind(type,[data],fn) (綁定)
type 主要包括blur,focus,click,mouseout等基礎(chǔ)事件,此外,還可以是自定義事件
[data] 作為event.data屬性值傳遞給事件對象的額外數(shù)據(jù)對象,該參數(shù)不是必需的
fn 用來綁定處理函數(shù)
unbind([type],[fn]) (移除)
type 主要包括blur,focus,click,mouseout等基礎(chǔ)事件,此外,還可以自定義事件
fn 用來解除綁定的處理函數(shù)
$(function(){
$("li").bind({
mouseover:function(){
$(this).css("background-color","green");
},mouseout:function(){
$(this).css("background-color","");
}
});
$("li").unbind();
});
2.動畫
1.控制元素顯示與隱藏 $(selector).show([speed],[callback])
$(selector).hide([speed],[callback])
speed:可選。規(guī)定元素從隱藏(顯示)到可見(不可見)的速度
callback :可選。show函數(shù)執(zhí)行完了之后,要執(zhí)行的函數(shù)
$(function(){
$("p:visible").hide(100);
});
//$("p:hidden").show(100);
2.改變元素的透明度
$(function(){
$("input").click(function(){
$("img").fadeOut(100); //淺出
//$("img").fadeIn(100); 淡入
});
})
3.改變元素的高度
$(function(){
$("h2").click(function(){
// $(".txt").slideup();
$(".txt").slideDown();
});
});
以上就是本文的全部內(nèi)容,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,同時也希望多多支持腳本之家!
相關(guān)文章
jQuery.query.js 取參數(shù)的兩點問題分析
最近在項目中使用jQuery.query.js這個插件進(jìn)行頁面間URL傳值,遇到如下兩點問題2012-08-08
淺談jquery fullpage 插件增加頭部和版權(quán)的方法
下面小編就為大家分享一篇淺談jquery fullpage 插件增加頭部和版權(quán)的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看2018-03-03
分享十五款 jQuery 社交網(wǎng)絡(luò)分享插件
這篇文章主要介紹了分享十五款 jQuery 社交網(wǎng)絡(luò)分享插件,需要的朋友可以參考下2015-05-05
jQuery實現(xiàn)等比例縮放大圖片讓大圖片自適應(yīng)頁面布局
遇到大圖片將頁面容器“撐破”的情況在進(jìn)行頁面布局時會經(jīng)常遇到吧,在本文將為大家講述使用jQuery實現(xiàn)按比例縮放大圖片,讓大圖片自適應(yīng)頁面布局2013-10-10
基于jQuery中ajax的相關(guān)方法匯總(必看篇)
下面小編就為大家?guī)硪黄诨趈Query中ajax的相關(guān)方法匯總。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-11-11

