JQuery攻略（四）事件

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery</title>
    <link href="css/css.css" rel="stylesheet" type="text/css" />
    <script src="script/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="script/js.js" type="text/javascript"></script>
</head>
<body>
    <span class="buttons bold">Bold</span> 
    <span class="buttons italic">Italic</span>
</body>
</html>

使用bind()方法爲按鈕添加單擊事件

$(document).ready(function () {
    //bold click事件
    $(".bold").bind("click", function () {
        alert("You clicked the bold button!");
    });
    //bold click事件
    $(".italic").bind("click", function () {
        alert("You clicked the italic button!");
    });
});

如今要把單擊事件添加到button，並非單獨爲每個按鈕綁定添加點擊事件

$(document).ready(function () {
    $(".buttons").bind("click", function () {
        alert("You clicked the " + $(this).text() + " button");
    });
});

不使用bind()方法也能夠直接爲指定的任何元素添加事件

$(document).ready(function () {
    //bold click事件
    $(".bold").click(function () {
        alert("You clicked the bold button!");
    });
    //bold click事件
    $(".italic").click(function () {
        alert("You clicked the italic button!");
    });
});

利用事件對象的目標屬性

事件對象包含事件細節，JavaScript把事件對象自動發送到事件處理函數。事件對象的其中一個屬性稱爲(target)目標，利用這個屬性咱們能夠知道在哪一個元素上發生了事件。

$(document).ready(function () {
    $(".buttons").click(function (event) { //event 事件對象
        var target = $(event.target); //event.target ==> span.buttons（classname）
        if (target.is(".bold")) { //是否有bold的class
            alert("You clicked the bold button.");
        }
        if (target.is(".italic")) {
            alert("You clicked the italic button.");
        }
    });
});

注：若是一個元素上有多個classname的話，event.target只取第一個

雙擊事件的綁定，和也上面同樣，只是把click關鍵字換成dblclick

$(document).ready(function () {
    //bold dblclick事件
    $(".bold").bind("dblclick", function () {
        alert("You clicked the bold button!");
    });
    //bold dblclick事件
    $(".italic").bind("dblclick", function () {
        alert("You clicked the italic button!");
    });
});

在這一段，主要用到了

事件的綁定方法bind(eventType ， data ，hanlder) 將事件附加到指定的元素上

單擊事件的綁定click(handler)

雙擊事件的綁定dblclick(handler)

1.2事件的自動觸發

有的時候，事件的觸發，須要自動式的，而不是手動點擊或者其餘操做觸發，這個時候就要用到trigger()方法了。

$(document).ready(function () {
    $(".buttons").bind("click", function () {
        alert("You clicked the " + $(this).text() + " button");
    });

    $(".bold").trigger("click"); //觸發
});

觸發事件的方法trigger(eventType) eventType爲字符串類型

1.3點擊以後禁用按鈕

有的時候，咱們但願事件只觸發一次，好比提交按鈕被點擊一次以後，咱們想要禁用該按鈕。

$(document).ready(function () {
    $(".buttons").bind("click", function () {
        alert("You clicked the " + $(this).text() + " button");
        $(this).unbind("click"); //刪除click單擊事件
    });
});

unbind()從指定的元素中刪除先前綁定的事件處理函數

unbind()

unbind(eventType)

unbind(eventType,handler)

若是不傳入任何參數，全部的事件將被刪除

另外一種方法 使用one方法

當點擊 p 元素時，增長該元素的文本大小

<body>
<p>這是一個段落。</p>
<p>這是另外一個段落。</p>
<p>請點擊 p 元素增長其內容的文本大小。每一個 p 元素只會觸發一次改事件。</p>
</body>

$(document).ready(function(){
  $("p").one("click",function(){
    $(this).animate({fontSize:"+=6px"});
  });
});

one() 方法爲被選元素附加一個或多個事件處理程序，並規定當事件發生時運行的函數。

當使用 one() 方法時，每一個元素只能運行一次事件處理器函數。

one(event,data,function)
event   必需。規定添加到元素的一個或多個事件。由空格分隔多個事件。必須是有效的事件。
data   可選。規定傳遞到函數的額外數據。
function   必需。規定當事件發生時運行的函數。

1.4鼠標事件

鼠標除了單擊雙擊事件，還有懸浮

mouseup() 鼠標擡起時候觸發，不分鼠標左右鍵，和click不一樣的是，click只能是左鍵點擊觸發

$(document).ready(function () {
    $(".buttons").bind("mouseup", function () {
        alert("You clicked the " + $(this).text() + " button");
    });
});

mousedown() 鼠標按下時候觸發，不分鼠標左右鍵，和click不一樣的是，click只能是左鍵點擊觸發

$(document).ready(function () {
    $(".buttons").bind("mousedown", function () {
        alert("You clicked the " + $(this).text() + " button");
    });
});

mouseover() 鼠標指針進入特定區域，觸發

$(document).ready(function () {
    $(".buttons").bind("mouseover", function () {
        alert("You get in the " + $(this).text() + " button  area.");
    });
});

mouseout() 鼠標指針離開特定區域，觸發

$(document).ready(function () {
    $(".buttons").bind("mouseout", function () {
        alert("You get out the " + $(this).text() + " button  area.");
    });
});

判斷左右鼠標鍵的點擊

假如，一個頁面上有一個按鈕，鼠標左鍵右鍵分別作不一樣的事，若是判斷鼠標的左右鍵呢。利用事件對象屬性。

$(document).ready(function () {
    $(".buttons").mousedown(function (event) {
        var theKey = event.button;
        if (theKey == 0) {
            alert("左鍵")
        } else if (theKey == 1) {
            alert("滾輪點擊");
        }
        else {
            alert("右鍵");
        }
    });
});

顯示鼠標指針的屏幕座標

$(document).ready(function () {
    $(".div").mousedown(function (event) {
        var xpoint = event.screenX; //橫座標
        var ypoint = event.screenY; //縱座標
        $("p").html("X座標：" + xpoint + "<br/>Y座標：" + ypoint);
    });
});

文字顯示動態突出

當鼠標在一行中的某個，某幾個字體上滑過的時候，突出字忽然加大，移走時候回覆原來大小。

$(document).ready(function () {
    $("span").mouseover(function () { //到達匹配元素的上方，改變css樣式
        $(this).css({
            'font-weight': 'bold',
            'font-size': 'large'
        });
    });
    $("span").mouseout(function () { //鼠標離開，css樣式還原
        $(this).css({
            'font-weight': 'normal',
            'font-size': 'inherit'
        });
    });
});

主要方法是css() , 用於將css屬性直接應用到HTML元素

css(property,value)

還有一個常常應用到圖片上的效果，當鼠標放在圖片上，圖片加大，移出後還原

$(document).ready(function () {
    $(".img").mouseover(function () {
        $(this).css("height", function () { return $(this).height() + 50 });
        $(this).css("width", function () { return $(this).width() + 50 });
    });

    $(".img").mouseout(function () {
        $(this).css("height", function () { return $(this).height() - 50 });
        $(this).css("width", function () { return $(this).width() - 50 });
    });
});

或者能夠換一個寫法，使用hover、addClass、removeClass

hover(handler1,handler2) 把兩個事件附加到指定元素，一個處理鼠標指針進入，一個處理鼠標指針離開元素時觸發

$(document).ready(function () {
    $(".img").hover(mouseover, mouseout);

    function mouseover() {
        $(this).css("height", function () { return $(this).height() + 50 });
        $(this).css("width", function () { return $(this).width() + 50 });
    }

    function mouseout() {
        $(this).css("height", function () { return $(this).height() - 50 });
        $(this).css("width", function () { return $(this).width() - 50 });
    }
});

$(document).ready(function () {
    $(".img").hover(mouseover, mouseout);

    function mouseover() {
        $(this).addClass("imgAdd");
    }

    function mouseout() {
        $(this).removeClass("imgAdd");
    }
});

圖片設置透明度

$(document).ready(function () {
    $(".img").css("opacity", 0.2); //設置透明度

    $(".img").mouseover(function () { //放大
        $(".img").css("opacity", 1.0); //清晰
        $(this).css("height", function () { return $(this).height() + 50 });
        $(this).css("width", function () { return $(this).width() + 50 });
    });

    $(".img").mouseout(function () { //還原
        $(".img").css("opacity", 0.2);
        $(this).css("height", function () { return $(this).height() - 50 });
        $(this).css("width", function () { return $(this).width() - 50 });
    });
});

1.5焦點事件

元素獲得失去焦點的時候觸發

$(document).ready(function () {
    $(".input").focus(function () { //獲得焦點
        $("p").html("請填寫。");
    });

    $(".input").blur(function () { //失去焦點
        $("p").html("");
    });
});

1.6CSS的操做

以前的 css(property,value)、addClass("className")、removeClass("className")都是對css的操做

還有一個toggleClass()方法，利用toggleClass()方法刪除或應用一個css類，若是指定元素已經應用了這個css類，使用toggleClass()方法將會把它刪除，若是沒有應用，那麼將爲指定的元素應用css類

$(document).ready(function () {
    $("#click").click(function () {
        $("#set").toggleClass("red");
    });
});

html

<span id="click" class="buttons">Click</span> 
<span id="set" class="buttons">Set</span>

css

.buttons
{
    width: 100px;
    float: left;
    text-align: center;
    margin: 5px;
    border: 2px solid;
}
.red
{
    background-color: Red;
}

與之差很少的一個方法是toggle()此方法爲指定的元素附加兩個事件處理函數。第一個事件在事件偶數次發生時執行，而第二個事件處理函數在事件在奇數數次發生執行，從0開始計數。

toggle(handler1,handler2)

如此，上面切換樣式的方法可改爲

$(document).ready(function () {
    $("#set").toggle(function () {
        $("#set").addClass("red");
    },
    function () {
        $("#set").removeClass("red");
    });
});

樣式的切換

    <span id="bold" class="buttons">bold</span> 
    <span id="italic" class="buttons">italic</span>
    <br /><br />
    <div> This is a test！
    </div>

$(document).ready(function () {
    //鼠標懸浮
    $(".buttons").hover(function () {
        $(this).addClass("sethover");
    }, function () {
        $(this).removeClass("sethover");
    });

    //bold
    $("#bold").click(function () {
        $("div").addClass("bold");
        $("div").removeClass("italic");
    });

    //italic
    $("#italic").click(function () {
        $("div").addClass("italic");
        $("div").removeClass("bold");
    });
});

樣式切換，氣泡對話框

css

.buttons
{
    width: 100px;
    float: left;
    text-align: center;
    margin: 5px;
    border: 2px solid;
}
.hover1
{
    width:200px;
    height:100px;
    color: Red;
    background-image: url(../image/3.png);
    background-repeat: no-repeat;
    background-position: bottom;
}

html

<body>
    <span id="bold" class="buttons">bold</span> 
    <span id="italic" class="buttons">italic</span>
    <span class="hover1"></span>
</body>

$(document).ready(function () {
    //鼠標懸浮
    $(".buttons").hover(function (event) {
        $(this).addClass("hover1");
        var txt = $(this).text();
        $("<span class='showtip'><br/><br/>This is " + txt + " menu<span>").appendTo($(this));
    }, function () {
        $(this).removeClass("hover1");
        $(".showtip").remove();
    });
});

1.7元素建立

在一個元素前，或後插入另外的元素，能夠用到after、before、append、appendTo、prepend、prependTo(更多方法與區別)，移除能夠用remove()方法.

after、before 同等級插入，無嵌套關係
after例子：
$("p").after("<p> Hello world!</p> ");

<p>標杆</p>
<p> Hello world!</p>

before例子
<p> Hello world!</p>
<p>標杆</p>

append、appendTo 有嵌套 後面開始
$("p").append("<b>Hello world!</b>");向匹配p元素集合中的每一個元素結尾插入由參數指定的內容,會嵌套在內部<p><b>Hello world!</b></p>
$("<b>Hello world!</b>").appendTo("p");向目標結尾插入匹配元素集合中的每一個元素。會嵌套在內部,與append只是語法不同。


prepend、prependTo 有嵌套 前面開始
$("p").prepend('<h2>插入元素h2</h2>');向匹配元素集合中的每一個元素開頭插入由參數指定的內容。插入的元素爲<p>的下級
$('<h2>插入元素h2</h2>').prependTo("p");向目標開頭插入匹配元素集合中的每一個元素。插入的元素爲<p>的下級

$(document).ready(function () {
    $("#add").click(function () {
        $("div").prepend("<p>this is a test p .</p>");
    });

    $("#remove").click(function () {
        $("p").remove();
    });
});

建立「返回頂部」鏈接

若是一篇文章很長，想回到頂部，老是要滑動鼠標滾軸，或按home鍵盤，太麻煩，咱們須要頁面上有一個圖片或文字直接點擊到頭部。

html

<body>
    <p>
        是樹的不挽留，仍是葉的無情；是時間的摧殘，仍是風的誘惑。<br />
        <br />
        葉終歸仍是毅然絕然的離開了樹的懷抱，投奔向了它早已心有所屬的大天然，可等到它被天然摧殘的面目全非再無昔日的生機時，是否會懷念曾經留在樹懷抱時的美好。<br />
        --題。<br />
    </p>
    <p>
        塵世中，每一次的轉身均可能是一生，每一次的別離均可能是永遠，每一次的錯過均可能是過去。<br />
        因此，我很珍惜每一次偶遇的美妙，每一次重逢的喜悅，每一次機會的把握。<br />
    </p>
    <p>
        愛，曾經歡喜地來到過個人世界，但最終卻又無情的離我而去。<br />
        有人說過&ldquo;愛情裏，傷的最深的永遠是那個不肯放手的人&rdquo;。<br />
        確實，最初幾年，之前的點滴依舊會清晰的出如今個人腦海。<br />
        在每次通過那相遇的地點時，在孤身一人漫步在夕陽下時，在每次從外回家時，都會想起那個曾經深愛過的你。<br />
    </p>
    <p>
        心，傷過一次，便懼怕再次受傷，以致於時隔幾年都不敢再去觸碰愛的邊緣，只想孤獨的靜待緣分的到來。<br />
    </p>
    <p>
        大學畢業，來了外地工做，曾有不少人都問我，你咋跑那麼遠的地方來上班。<br />
        我當時都笑着回答說：&ldquo;在家鄉呆久了，出來逛逛，看看大海看看雪。<br />
        &rdquo;可有誰知道，在表面微笑的內在裏，這實際上是一個懦弱與逃避的謊話，逃避那個曾經的傷城，想離那個地方越遠越好，無論去哪兒只要不在那個城，想靠時間和空間來淡化那段已逝去的初戀情懷。<br />
    </p>
    <p>
        張嘉佳說的好，初戀永遠是一我的的兵荒馬亂，老是承諾的不少，實現的卻不多。<br />
        咱們面對面越走越遠，肩並肩悄然失散。<br />
        記得有段時間，每次接到你的電話，或是不當心聽到關於你的消息，心都會蕩起無聲的漣漪，思緒老是會隨着你那動人的聲音回到過去，回到那個有你的年歲。<br />
    </p>
    <p>
        我彷彿又看到那頭長髮在風中微微蕩起，那副紅色鏡框的眼鏡依舊調皮的橫躺在你微高的鼻樑上，那櫻桃般的小嘴在你瓜子型的臉蛋上略微的鼓起，那會說話的大眼睛俏皮的盯着我&hellip;&hellip;</p>
    <p>
        可現實老是這麼殘酷，回憶的思緒也是那麼的虛無縹緲，都頂不過電話那頭你的聲音。<br />
        你說有事，晚會兒再聊，因而通話很快便結束了。<br />
        我把平時設置成靜音的手機又調成了很長一段時間都未曾聽到的鬧鈴，但是次日仍是換成了靜音&hellip;</p>
    <p>
        一輩子中，碰見的人不少，住在內心的卻不多。<br />
        可總有那麼少數的人，讓你碰見，就得用一輩子的時間去忘記。<br />
        我想對大多數人來講，那我的應該就是初戀吧。<br />
    </p>
    <p>
        時間最是公正與無情，不過也是最有效的療傷藥，就算是那顆曾已千瘡百孔的心，它都能治癒。<br />
        時至今日我終於不在像當初那般想起那個曾經的你就心痛，只是將它當成美好的回憶藏在內心最深處，讓它與青春做伴。<br />
        或者說將有你的時光像釀酒通常封存，深埋地底，待多年之後再細細品嚐。<br />
    </p>
    <p>
        我很感謝你曾經來到過個人世界，在我最青春年少時。<br />
        如今我已行走在青春的末端，正慢慢的變得成熟，穩重，再不像之前那般浮躁，心有不平便拔劍四起。<br />
        這樣寫，有點顯老。<br />
        呵，不過成長的途中，老就老點吧。<br />
    </p>
    <p>
        一段情，一塵往事，漸行漸遠；一我的，一段青春，且行且惜。<br />
    </p>
    <p>
        末了，祝你我各自的將來安好。<br />
        祝天下有情人總成眷屬！</p>
    <p>
        謹以此文，獻給本身快要走完的青春。<br />
    </p>
</body>

View Code

$(document).ready(function () {
    $("<a href='#topofpage'>Return to top</a>").insertAfter('p');
    $("<a name='topofpage'></a>").prependTo('body');
});

在這裏主要是應用到了insertAfter()方法，把匹配的元素插入到另外一個指定的元素集合的後面。與insertBefore()函數對應。同等級不包含

1.8動畫隱藏和展現

「更多」鏈接的顯示與隱藏

css

.sethover
{
    /*background-color: cyan;*/    
    cursor: pointer;
}

html

<body>
    <div>
        是樹的不挽留.....<span class="readMore">ReadMore</span></div>
    <div class="divShow">
        <p>
            是樹的不挽留，仍是葉的無情；是時間的摧殘，仍是風的誘惑。<br />
            <br />
            葉終歸仍是毅然絕然的離開了樹的懷抱，投奔向了它早已心有所屬的大天然，可等到它被天然摧殘的面目全非再無昔日的生機時，是否會懷念曾經留在樹懷抱時的美好。<br />
            --題。<br />
        </p>
        <p>
            塵世中，每一次的轉身均可能是一生，每一次的別離均可能是永遠，每一次的錯過均可能是過去。<br />
            因此，我很珍惜每一次偶遇的美妙，每一次重逢的喜悅，每一次機會的把握。<br />
        </p>
        <p>
            愛，曾經歡喜地來到過個人世界，但最終卻又無情的離我而去。<br />
            有人說過&ldquo;愛情裏，傷的最深的永遠是那個不肯放手的人&rdquo;。<br />
            確實，最初幾年，之前的點滴依舊會清晰的出如今個人腦海。<br />
            在每次通過那相遇的地點時，在孤身一人漫步在夕陽下時，在每次從外回家時，都會想起那個曾經深愛過的你。<br />
        </p>
        <p>
            心，傷過一次，便懼怕再次受傷，以致於時隔幾年都不敢再去觸碰愛的邊緣，只想孤獨的靜待緣分的到來。<br />
        </p>
        <p>
            大學畢業，來了外地工做，曾有不少人都問我，你咋跑那麼遠的地方來上班。<br />
            我當時都笑着回答說：&ldquo;在家鄉呆久了，出來逛逛，看看大海看看雪。<br />
            &rdquo;可有誰知道，在表面微笑的內在裏，這實際上是一個懦弱與逃避的謊話，逃避那個曾經的傷城，想離那個地方越遠越好，無論去哪兒只要不在那個城，想靠時間和空間來淡化那段已逝去的初戀情懷。<br />
        </p>
        <p>
            張嘉佳說的好，初戀永遠是一我的的兵荒馬亂，老是承諾的不少，實現的卻不多。<br />
            咱們面對面越走越遠，肩並肩悄然失散。<br />
            記得有段時間，每次接到你的電話，或是不當心聽到關於你的消息，心都會蕩起無聲的漣漪，思緒老是會隨着你那動人的聲音回到過去，回到那個有你的年歲。<br />
        </p>
        <p>
            我彷彿又看到那頭長髮在風中微微蕩起，那副紅色鏡框的眼鏡依舊調皮的橫躺在你微高的鼻樑上，那櫻桃般的小嘴在你瓜子型的臉蛋上略微的鼓起，那會說話的大眼睛俏皮的盯着我&hellip;&hellip;</p>
        <p>
            可現實老是這麼殘酷，回憶的思緒也是那麼的虛無縹緲，都頂不過電話那頭你的聲音。<br />
            你說有事，晚會兒再聊，因而通話很快便結束了。<br />
            我把平時設置成靜音的手機又調成了很長一段時間都未曾聽到的鬧鈴，但是次日仍是換成了靜音&hellip;</p>
        <p>
            一輩子中，碰見的人不少，住在內心的卻不多。<br />
            可總有那麼少數的人，讓你碰見，就得用一輩子的時間去忘記。<br />
            我想對大多數人來講，那我的應該就是初戀吧。<br />
        </p>
        <p>
            時間最是公正與無情，不過也是最有效的療傷藥，就算是那顆曾已千瘡百孔的心，它都能治癒。<br />
            時至今日我終於不在像當初那般想起那個曾經的你就心痛，只是將它當成美好的回憶藏在內心最深處，讓它與青春做伴。<br />
            或者說將有你的時光像釀酒通常封存，深埋地底，待多年之後再細細品嚐。<br />
        </p>
        <p>
            我很感謝你曾經來到過個人世界，在我最青春年少時。<br />
            如今我已行走在青春的末端，正慢慢的變得成熟，穩重，再不像之前那般浮躁，心有不平便拔劍四起。<br />
            這樣寫，有點顯老。<br />
            呵，不過成長的途中，老就老點吧。<br />
        </p>
        <p>
            一段情，一塵往事，漸行漸遠；一我的，一段青春，且行且惜。<br />
        </p>
        <p>
            末了，祝你我各自的將來安好。<br />
            祝天下有情人總成眷屬！</p>
        <p>
            謹以此文，獻給本身快要走完的青春。<br />
        </p>
    </div>

View Code

$(document).ready(function () {
    //懸浮
    $(".readMore").hover(
    function () {
        $(this).addClass("sethover");
    },
    function () {
        $(this).removeClass("sethover");
    }
    );

    //隱藏和顯示
    $(".readMore").toggle(function () {
        $(".divShow").show("show");
    }, function () {
        $(".divShow").hide("show");
    });
    
});

這裏主要是用到了show()和hide()方法,

show()使指定的隱藏元素可見 show(speed,callback),speed 以毫秒爲單位，也可使用指定的字符串 'slow'=600ms , 'normal' =400ms ,'fast' =200ms,若是省略，默認的就是normal

callback 回調，當動畫完成時調用的函數

hide(speed,callback)做用功能和show()相反.

還有兩個漸顯，漸隱的方法是 fadeIn(speed,callback) 和fadeOut(speed,callback),它們是改變字體透明度而實現的。

1.9效果

文本滑動效果

html

<body>
   <p id="message1">jQuery is an pen source project</p>
   <p id="message2">jQuery is an pen source project</p>
</body>

$(document).ready(function () {
    $("p#message1").css({ "border": "2px solid", "text-align": "center", "font-weight": "bold" }).hide().click(function () {
        $(this).slideUp("slow"); //消失
        $("p#message2").slideDown("slow"); //滑動顯示
    });
    $("p#message2").css({ "backgroundColor": "#f00", "color": "#fff", "text-align": "center", "font-weight": "bold" }).click(function () {
        $(this).slideUp("slow"); //消失
        $("p#message1").slideDown("slow"); //滑動顯示
    });
});

首先利用css()方法，給message一、message2添加了不一樣的樣式，而後將其中一個隱藏，再爲每一個p標籤添加點擊事件，利用slideUp()、和slideDown()。

slideDown(speed，callback) 以滑動效果來逐漸顯示選定元素。
speed 指定動畫的持續時間，能夠指定字符串fast、normal、slow或者毫秒，毫秒越大，動畫持續越長。
callback是動畫完成後調用的函數。

slideUp(speed，callback) 以活動效果逐漸使選定元素消失不可見。

圖像滾動效果
首先，將img的position設置爲relative

img
{
    position: relative;
}

而後利用animate()方法使它移動，移動到距左邊距600px的地方

$(document).ready(function () {
    //點擊圖片，圖片想右邊移動600px距離
    $("img").click(function () {
        $(this).animate({ left: 600 }, "slow");
    });
});

animate() 根據指定的css屬性和使用緩和參數來控制自定義動畫

animate(properties,speed,easing,callback)

properties css 屬性 {left:300}

speed 動畫持續時間 slow、normal、fast 、xxms

easing （緩和）是一個函數（可選），控制動畫隨着時間如何進行。它須要一個插件。有兩個緩和函數：linear（線性），swing（擺動）。默認swing。

callback 回調

點擊橫移，再回去

自動

$(document).ready(function () {
    //點擊圖片
    $("img").click(function () {
        $(this).animate({ left: 600 }, "slow", function () {
            $(this).animate({ left: 0 }, "slow");
        }); //圖片向右邊移動600px距離,以後回到原來位置      
    });
});

點擊

$(document).ready(function () {
    //點擊圖片，圖片向右邊移動600px距離，再點擊回到原位
    $("img").toggle(function () {
        $(this).animate({ left: 600 }, "fast");
    }, function () {
        $(this).animate({ left: 0 }, "slow");
    });
});

移動後隱藏

$(document).ready(function () {
    //點擊圖片，圖片向右邊移動600px距離
    $("img").click(function () {
        $(this).animate({ left: 600 }, "slow");
        $(this).slideUp("slow"); //移動後隱藏
    });
});

移動後淡出

$(document).ready(function () {
    //點擊圖片
    $("img").click(function () {
        $(this).animate({ left: 600 }, "slow"); //圖片向右邊移動600px距離
        $(this).fadeTo("slow", 0.2); //移動後下降透明度
        //$(this).fadeOut("slow"); //移動後談出 等於 $(this).fadeTo("slow", 0);
    });
});

fadeTo() 和 fadeOut() 做用都是同樣的，都是控制圖片的談出，不過fadeTo()比fadeOut的好處是，前者能夠控制透明度，然後者直接將透明度設置了0

fadeTo(speed,opacity,callback) 調整選定元素的不透明度

speed 持續時間，時間越大持續越久
opacity 透明度數值介於 0 -1

使圖像一邊滾一邊變大

$(document).ready(function () {
    //點擊圖片
    $("img").toggle(
    function () {
        $(this).animate({ left: 1100, height: $(this).height() * 2, width: $(this).width() * 2 }, "slow");
    },
    function () {
        $(this).animate({ left: 0, height: 100, width: 100 }, "slow");
    });
});

使圖像滾動到右側在向左滾動

$(document).ready(function () {
    //點擊圖片
    $("img").click(
    function () {
        $(this).animate({ left: 1200 }, "slow", function () { //向右邊慢慢滑動1200px
            $(this).fadeTo("slow", 0); //淡出
            $(this).fadeTo("slow", 1); //淡入
            $(this).animate({ left: 0 }, "slow"); //回到起始位置
        });
    });
});

1.10 鍵盤輸入控制

監控鍵盤事件 keypress()、keydown()、keyup()

html

<body>
    <input type="text" class="infobox" />
    <p></p>
</body>

$(document).ready(function () {
    $(".infobox").keypress(function (event) { //鍵盤按下事件
        $("p").text(String.fromCharCode(event.keyCode)); //字符 FF沒反應...
        //$("p").text(event.charCode); //ASCII 
    });
});

keypress()和keydown()的區別：

若是用戶反覆按任意鍵，按下而後保持按下狀態，keydown()事件只執行一次，而keypress()事件則是每插入一個字符就執行一次（keydown()的持續時間更長一些）

此外，修改Shift鍵、Ctrl鍵等爲keydown()所識別，而這些修改鍵不會觸發keypress()事件。

1.11防止事件冒泡

什麼是事件冒泡？看代碼。

html

<body>
    <div>
        Div Element
        <p>
            Paragraph Element <span>Span Element</span>
        </p>
    </div>
</body>

$(document).ready(function () {
    $("div").click(function () {
        alert("You click the div element");
    });
    $("p").click(function () {
        alert("You click the paragraph element");
    });
    $("span").click(function () {
        alert("You click the span element");
    });
});

三個元素嵌套 <div<p<span ,三個元素都附加了點擊事件，

當點擊span時，首先彈出警告框的是「You click the span element 」、再「You click the paragraph element」而後「You click the div element」

當點擊p標籤元素時候，彈框的是「You click the paragraph element」而後「You click the div element」

當點擊div元素時候，彈框的是「You click the div element」

當任何元素上發生事件時，事件處理機制首先檢查該元素是否附加了事件方法（以及事件處理函數）。若是是，就執行（附加的事件方法的）事件處理函數的語句。在此以後，事件處理機制繼續檢查該元素的親節點，看是否附加了事件方法，若是是，也會執行其事件處理函數，直到DOM根節點。

利用事件屬性，稍做修改

$(document).ready(function () {
    $("div").click(function (event) {
        var target = $(event.target);
        if (target.is("div")) {
            alert("You click the div element");
        }
        else if (target.is("p")) {
            alert("You click the paragraph element");
        }
        else if (target.is("span")) {
            alert("You click the span element");
        }
    });

});

小結

此篇記錄了各類不一樣鼠標事件和鍵盤事件（單擊、雙擊、按鍵keypress等），幾種文字圖片效果（淡入，淡出，上滑、下滑等）最後總結一下因此用到的事件和方法。

1.bind() 綁定事件 --click、dblclick...

$(".bold").bind("click", function () {
        alert("You clicked the bold button!");
    });

2.event 事件對象 function (event){...}

3.trigger(eventType)方法觸發事件

$(".bold").trigger("click"); //觸發

4.unbind()方法從指定的元素中刪除先前綁定的事件處理函數

$(this).unbind("click"); //刪除click單擊事件

CSS處理方法
5.css(property,value)方法將css屬性直接應用到HTML元素

 $(this).css({
            'font-weight': 'normal',
            'font-size': 'inherit'
        });

$(".img").css("opacity", 0.2); //設置透明度

6.addClass("className")

7.removeClass("className")

8.toggleClass()方法刪除或應用一個css類

9.toggle()方法爲指定的元素附加兩個事件處理函數。

10.元素建立:after、before、append、appendTo、prepend、prependTo...

動畫效果
show()和hide()顯示與隱藏
fadeIn(speed,callback) 和fadeOut(speed,callback)漸隱和漸顯
fadeTo(speed,opacity,callback) 調整選定元素的不透明度
slideDown(speed，callback) 以滑動效果來逐漸顯示選定元素
slideUp(speed，callback) 以活動效果逐漸使選定元素消失不可見。
animate(properties,speed,easing,callback)根據指定的css屬性和使用緩和參數來控制自定義動畫

鼠標事件
mousedown() 鼠標按下時候觸發，不分鼠標左右鍵，和click不一樣的是，click只能是左鍵點擊觸發
mouseover() 鼠標指針進入特定區域，觸發
mouseout() 鼠標指針離開特定區域，觸發
hover(handler1,handler2) 把兩個事件附加到指定元素，一個處理鼠標指針進入，一個處理鼠標指針離開元素時觸發

鍵盤事件
keypress()、keydown()、keyup()