欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jQuery事件與動畫基礎詳解

 更新時間：2017年02月23日 09:00:05   作者：瞿亮  
本文主要介紹了jQuery事件與動畫的基礎知識，具有很好的參考價值，下面跟著小編一起來看下吧

今天我們就談談jquery中的事件和簡單動畫吧，它們畢竟基礎是進階華麗的根本??！

1.事件

1.window事件

ready   準備就緒

2.鼠標事件

方法                        執(zhí)行時機

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屬性值傳遞給事件對象的額外數(shù)據(jù)對象，該參數(shù)不是必需的

fn         用來綁定處理函數(shù)

unbind（[type],[fn]）    (移除)

type    主要包括blur，focus,click,mouseout等基礎事件，此外，還可以自定義事件

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();
 });
});

以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

相關文章

最新評論