jQuery事件和动画

鼠标事件：

• click - - - - - - - - - - - - - 点击
• mouseover - - - - - - - - -覆盖
• mouseout - - - - - - - - - 移除

键盘事件：

• keydown - - - - - - - - - - - -按下
• keyup - - - - - - - - - - - - -按下后松开
• keypress - - - - - - - - - - - -输入任意键

表单事件：

• focus - - - - - - - - - - - - - - -获得焦点
• blur - - - - - - - - - - - - - - -失去焦点

绑定事件：

• bind

移除事件：

• unbind([type],[fn])

鼠标悬停事件：

• hover

鼠标连续点击：

• toggle

---

动画：

• show - - - - - - - - - - - -显示
• hide - - - - - - - - - - - -隐藏
• toggle - - - - - - - - - - - -显示/隐藏
• fadeIn - - - - - - - - - - - -淡入
• fadeOut - - - - - - - - - - - -淡出
• slideDown - - - - - - - - - - - -收缩
• slidUp - - - - - - - - - - - - - - -伸张

---

---

1)鼠标事件：

<p>鼠标事件</p>

//鼠标点击
$("p").click(function(){
      $(this).css("background","red")
})

//鼠标覆盖
$("p").mousemove(function(){
      $(this).css("background","green")
})

//鼠标移开
$("p").mouseout(function(){
      $(this).css("background","white")
})

---

---

2)键盘事件：

<input>

$(document).keydown(function(){
     if(event.keyCode == "65")
     alert("A按下")
})

$(document).keyup(function(){
    if(event.keyCode == "66")
    alert("B松开")
})

//记录input框中输入的字母数
var i=0;
$(document).keypress(function(){
     i+=1;
     alert("输入字母数："+i);
})

---

---

3)表单事件：

<input>

//只能用来控制input的属性
$("input").focus(function(){
       $(this).css("background","plum");
}).blur(function(){
       $(this).css("background","white");
})

---

---

4)绑定事件：

<p>鼠标事件</p>

//类似实现伪类，通过"事件"：方法  来实现
$("p").bind({
            "mousemove":function(){
                $(this).css("background", "green")
            },"mouseout":function() {
                $(this).css("background", "white")
            },"click":function() {
                $(this).css("background", "red")
            }
})

---

---

5)移除事件：

 <p>鼠标事件</p>

            $("p").unbind("mouseout");//移除一事件

            $("p").unbind();//移除全部事件

---

---

6)鼠标悬停事件：

 <p>鼠标事件</p>

//hover来表示覆盖情况，连写的事件为移除情况
$("p").hover(function(){
            $(this).css("background", "green")
        },function(){
            $(this).css("background", "white")
        }
)

---

---

7)鼠标连续点击事件：

//通过添加function来确定点击的具体事件
$("p").toggle(
                function(){
                    $(this).css("background", "green")
                },function(){
                    $(this).css("background", "red")
                },function(){
                    $(this).css("background", "black")
                },function(){
                    $(this).css("background", "yellow")
                }
        )

---

---

---

8)动画：

$("p").hide(3000);//3000ms（可填slow,fast,normal）完全隐藏，高度、透明度都在变

$("p").show(3000);//3000ms完全显示，高度、透明度都在变

//toggle也可以用来多次点击隐藏和显示
$("button").click(function(){
            $("p").toggle();
})

//fadeOut淡出（改透明度），fadeIn淡入
$("button").click(function(){
            $("img").fadeOut(3000);
            $("img").fadeIn(3000);
})

//slideUp()元素逐渐缩短至隐藏，slideDown（）元素逐渐伸长至显示
 $("button").click(function(){
            $("img").slideUp(3000);
            $("img").slideDown(3000);
})