您好,登錄后才能下訂單哦!
今天我們就談談jquery中的事件和簡單動畫吧,它們畢竟基礎是進階華麗的根本!!
1.事件
1.window事件
ready 準備就緒
2.鼠標事件
方法 執行時機
click(fn) 單擊鼠標
$(document).ready(function(){ $("dd>img").click(function(){ $("dt>img").show(); });
mouseover(fn) 鼠標指針移過時
mouseout(fn) 鼠標指針移出時
$("#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() 產生可打印的字符時
$(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("確認要提交么???"); } }); });
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等基礎事件,此外,還可以是自定義事件
[data] 作為event.data屬性值傳遞給事件對象的額外數據對象,該參數不是必需的
fn 用來綁定處理函數
unbind([type],[fn]) (移除)
type 主要包括blur,focus,click,mouseout等基礎事件,此外,還可以自定義事件
fn 用來解除綁定的處理函數
$(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:可選。規定元素從隱藏(顯示)到可見(不可見)的速度
callback :可選。show函數執行完了之后,要執行的函數
$(function(){ $("p:visible").hide(100); }); //$("p:hidden").show(100);
2.改變元素的透明度
$(function(){ $("input").click(function(){ $("img").fadeOut(100); //淺出 //$("img").fadeIn(100); 淡入 }); })
3.改變元素的高度
$(function(){ $("h3").click(function(){ // $(".txt").slideup(); $(".txt").slideDown(); }); });
以上就是本文的全部內容,希望本文的內容對大家的學習或者工作能帶來一定的幫助,同時也希望多多支持億速云!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。