目錄：

• 三步實(shí)現(xiàn)jQuery方式處理事件
• $(document).ready()與window.onload
• this和$(this)
• 常用的hover()和toggle()
• 通過點(diǎn)擊文章標(biāo)題展開、隱藏新聞內(nèi)容

三步實(shí)現(xiàn)jQuery方式處理事件

發(fā)生在Web頁(yè)面的每一件事情都可以稱為事件，為了使Web頁(yè)面具有交互性，我們采用的方法是通過編寫程序來響應(yīng)事件。

例如，鼠標(biāo)移動(dòng)到導(dǎo)航欄時(shí)顯示帥氣的下拉菜單；鼠標(biāo)點(diǎn)擊標(biāo)題時(shí)展開段落內(nèi)容；用鍵盤來控制JavaScript動(dòng)畫等。我們?cè)谖哪?huì)給一個(gè)簡(jiǎn)單又酷炫的示例。

jQuery極大增強(qiáng)并擴(kuò)展了基本事件的處理機(jī)制，同時(shí)也讓我們從惱人的兼容性問題中大大地解放。更好的消息是，jQuery進(jìn)行事件處理更加簡(jiǎn)單易用，廢話不多說，我們下面看如何用三步進(jìn)行jQuery的事件處理。

• 1、選擇元素
• 2、為元素分配事件
• 3、為事件傳遞函數(shù)

選擇元素

用戶在Web頁(yè)面中通常是和頁(yè)面的元素進(jìn)行交互的，比如點(diǎn)擊某個(gè)按鈕，移動(dòng)到某個(gè)div，點(diǎn)擊鏈接等等。當(dāng)分配事件的時(shí)候，我們第一步要做的就是選擇該元素。

jQuery支持使用css選擇器來選擇我們想要操作的頁(yè)面部分，例如：

$('#id-name')      //通過id選擇器
$('.class-name')   //通過類選擇器
$('a')             //通過元素選擇器

為元素分配事件

在選擇一個(gè)元素之后，接下來就是為該元素分配指定的事件，事件的種類很多。例如當(dāng)我們的鼠標(biāo)移動(dòng)到某個(gè)<a>鏈接上時(shí)：

$('a').mouseover()

當(dāng)我們點(diǎn)擊id為button1的按鈕時(shí)：

$('#button1').click()

為事件傳遞函數(shù)

第二步只是指定了元素的某個(gè)事件，但是當(dāng)該事件觸發(fā)時(shí)具體做什么我們還沒有指定。這一步就是為事件指定處理函數(shù)，即當(dāng)事件觸發(fā)時(shí)，執(zhí)行該函數(shù)的操作。

比如，當(dāng)我們鼠標(biāo)移動(dòng)到導(dǎo)航欄時(shí)，顯示隱藏的id為submenu的子菜單：

$('#mainmenu').mouseover(function(){
    $('#submenu').show();
  }
);

上面是使用傳入匿名函數(shù)作為參數(shù)的方法，當(dāng)然我們也可以傳遞之前定義好的函數(shù)名，以上代碼可以重寫如下：

function showSubmenu(){
  $('#submenu').show();
}
$('#mainmenu').mouseover(showSubmenu);

這里需要注意，在將函數(shù)名指定為事件處理參數(shù)時(shí)，是沒有圓括號(hào)的。不知大家還記不記得，如果我們傳入帶圓括號(hào)的函數(shù)，那么該函數(shù)會(huì)立即執(zhí)行，傳入的參數(shù)實(shí)際上是該函數(shù)執(zhí)行的結(jié)果。而沒有圓括號(hào)，傳入的是函數(shù)的引用。

$(document).ready()與window.onload

當(dāng)文檔完全下載到瀏覽器時(shí)，會(huì)觸發(fā)window.onload事件，此時(shí)，頁(yè)面上全部元素對(duì)于JavaScript而言都是可操作的。(document).ready()與之類似，但是有著微妙的差別。(document).ready()會(huì)在頁(yè)面DOM準(zhǔn)備就緒的時(shí)候就可以使用了。當(dāng)頁(yè)面需要加載較多的資源的時(shí)候這種差異便會(huì)體現(xiàn)出來。

比如我們?cè)诩虞d相冊(cè)類的界面的時(shí)候，使用window.onload要等到每一幅圖片都加載完畢才會(huì)觸發(fā)該事件，這通常需要數(shù)秒的時(shí)間。如果在這之前用戶進(jìn)行了某種頁(yè)面的操作，這些結(jié)果都是不可預(yù)料的。但是使用$(document).ready()會(huì)在DOM樹解析完成時(shí)即可，也就是說頁(yè)面會(huì)“更早地準(zhǔn)備好”。

通常情況下$(document).ready()是一個(gè)更好的方法，作為jQuery初學(xué)者只需要知道每次把需要執(zhí)行的代碼放在以下片段即可：

$(document).ready(function() {

}); // end ready
1
2
3
1
2
3

由于$(document).ready()十分常用，可以簡(jiǎn)寫為以下形式：

$(function(){

});
1
2
3
1
2
3

但是(document).ready()這種寫法會(huì)更清楚地表明(document).ready()是在document的jQuery對(duì)象上調(diào)用.ready()方法的代碼過程。初學(xué)者沒太大必要做這樣的簡(jiǎn)化。

this和$(this)

this幾乎是在所有語(yǔ)言中都隨處可見的一個(gè)關(guān)鍵字，它的含義也萬(wàn)變不離其宗。在jQuery中，this引用正在調(diào)用匿名函數(shù)的元素。比如說：

$('#button1').click(function(){
  $(this).val("OK!");
});
1
2
3
1
2
3

上面的代碼中的this就是對(duì)id為button1的按鈕元素的引用。

$(this)則是this引用元素對(duì)應(yīng)的jQuery對(duì)象，在jQuery中，對(duì)元素的操作是通過對(duì)應(yīng)的jQuery對(duì)象實(shí)現(xiàn)的。this的使用十分常見，后面我們會(huì)舉例說明。

常用的hover()和toggle()

hover()

在鼠標(biāo)事件中，mouseover和mouseout事件通常組合使用。例如，當(dāng)光標(biāo)移動(dòng)到某menu上，出現(xiàn)一個(gè)下拉菜單，移出時(shí)隱藏該下拉菜單。這樣的組合十分常見，jQuery提供了一種簡(jiǎn)單的方式——hover()。

hover()接收2個(gè)函數(shù)作為參數(shù)，第一個(gè)函數(shù)表示當(dāng)鼠標(biāo)移動(dòng)到該位置時(shí)執(zhí)行的操作，第二個(gè)函數(shù)表示鼠標(biāo)離開時(shí)所要執(zhí)行的操作。我們以上面的menu操作為例，當(dāng)鼠標(biāo)移動(dòng)到menu按鈕時(shí)，彈出下拉菜單，移出時(shí)，隱藏下來菜單：

$('#menu').hover(
  function(){
    $('#submenu').show();
  },
  function(){
    $('#submenu').hide();
  }
);
1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8

該事件可以用以下圖示表示：

toggle()

toggle()與hover()的用法十分相似，它接收若干個(gè)函數(shù)作為參數(shù)。第一次點(diǎn)擊時(shí)執(zhí)行第一個(gè)函數(shù)，第二次點(diǎn)擊時(shí)執(zhí)行第二個(gè)函數(shù)……，當(dāng)執(zhí)行到最后一個(gè)函數(shù)的時(shí)候，循環(huán)回第一個(gè)函數(shù)。

我們常用的是傳入2個(gè)函數(shù)作為參數(shù)，比如第一次點(diǎn)擊某個(gè)標(biāo)題，顯示段落內(nèi)容，再次點(diǎn)擊隱藏段落內(nèi)容：

$('.h2').hover(
  function(){
    $(this).next(.content).show();
  },
  function(){
    $(this).next(.content).hide();
  }
);
1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8

通過點(diǎn)擊文章標(biāo)題展開、隱藏新聞內(nèi)容

很多時(shí)候，我們希望在某個(gè)頁(yè)面中只顯示文章的標(biāo)題，這樣我們就能快速找到自己感興趣的部分。當(dāng)找到我們的目標(biāo)文章的時(shí)候，在本地展開而不是請(qǐng)求鏈接到另一個(gè)頁(yè)面會(huì)明顯地提升用戶體驗(yàn)，這里，我們就用以上介紹的方法實(shí)現(xiàn)這樣一個(gè)有趣的功能。

1、將以下代碼復(fù)制的文本編輯工具，不妨保存為test1.html：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>A Simple eg.</title>
<script src="jquery-1.7.2.min.js"></script>
<style type="text/css">
html, body{
    background-color: #666;
}
h1 {
    font-size: 32px;
    color: white;
    text-shadow: 1px 1px 1px rgba(0,0,0,.75);
    border-bottom: solid 1px rgba(255,255,255,.5);
    margin-bottom: 0.75em;
}
h2 {
    background: url(open.png) no-repeat 0 11px;
    padding: 10px 0 0 25px;
    cursor: pointer;
}
h2.close {
    background-image: url(close.png);
}
p {
    font-size: 18px;
    color: white;
    font-family: 'ColaborateLightRegular', Arial, sans-serif;
    line-height: 125%;
    margin-bottom: 10px;
}
</style>
<script>
$(document).ready(function() {

}); // end ready
</script>
</head>
<body>
<body>
<div class="header">
    <p class="logo">Easy <i>&</i> News</p>
</div>
<div class="content">
<h1>Lately News</h1>
<h2>Warriors without Curry still beat Rockets in Game 2</h2>
      <div class="details">
        <p>As Stephen Curry emphatically waved his arms to ignite the crowd and coached from the bench when he could do little else, Klay Thompson and the Golden State Warriors’ supporting cast picked up the slack for their absent NBA MVP to hold off the Houston Rockets115-106 on Monday night and take a 2-0 lead in their playoff series. Thompson scored 34 points and dished out five assists for the defending champions, playing without Curry because of an injured right ankle. Curry cut short his pregame warmup routine after appearing to be in discomfort as he was shooting while putting little pressure on the tender ankle.</p>
      </div>
<h2>Liverpool boss Jurgen Klopp: Win over Borussia Dortmund like Istanbul 2005 final</h2>
      <div class="details">
        <p>The Reds, who needed to score three goals in the last 33 minutes, won 4-3 at Anfield and 5-4 on aggregate thanks to Dejan Lovren’s stoppage-time header."I reminded the players about Liverpool being 3-0 down in the Champions League final to AC Milan," he said. "I know this is a place for big football moments. It was special."Liverpool won their fifth European Cup in Istanbul in 2005 after trailing Milan by three goals at half-time.Dortmund scored through Henrikh Mkhitaryan and Pierre-Emerick Aubameyang inside the first nine minutes and, after Divock Origi pulled one back for Liverpool, Marco Reus put the German side 4-2 up on aggregate.</p>
      </div>
<h2>Kobe Bryant: Don’t want Jazz to take it easy at all in my final game</h2>
      <div class="details">
        <p>The next time Lakers icon Kobe Bryant appears on the Staples Center court, it will be for the final game of his NBA career.Has Bryant looked forward to that final game, April 13 against the Utah Jazz, and imagined what it will be like?"I try not to do it too much," Bryant said Wednesday night, "and just make yourself emotional."</p>
      </div>
</div>
</body>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

不要在意這段代碼有多長(zhǎng)，其中大段的只不過是新聞內(nèi)容而已，接下來我們要做的準(zhǔn)備工作是把代碼中需要包含的open.png+close.png+jquery-1.7.2.min.js下載到和test.1.html相同目錄中。

好了，雙擊test1.html在瀏覽器中預(yù)覽效果如下：

接下來就是我們大顯身手的時(shí)候了，首先在以上代碼的36行添加以下代碼：

$('.details').hide();

這樣我們的新聞內(nèi)容就會(huì)隱藏起來：

然后給新聞標(biāo)題添加我們上面介紹的toggle()事件。第一次點(diǎn)擊新聞標(biāo)題，讓內(nèi)容顯示，再次點(diǎn)擊，內(nèi)容隱藏，在$('.details').hide();后面添加以下代碼：

$('.content h2').toggle(
  function(){
    $(this).next('.details').fadeIn();
  },
  function(){
    $(this).next('.details').fadeOut();
  }
);
1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8

保存再次加載test1.html，會(huì)發(fā)現(xiàn)當(dāng)我們點(diǎn)擊文章標(biāo)題的時(shí)候，會(huì)淡入新聞內(nèi)容，再次點(diǎn)擊新聞內(nèi)容淡出。是不是一個(gè)簡(jiǎn)單有不失帥氣的效果？

接下來，為了更加美觀，還記得我們上面下載的open.png和close.png嗎？我們希望當(dāng)新聞?wù)归_時(shí)，+號(hào)變?yōu)?號(hào)，隱藏時(shí)又變回+號(hào)。十分簡(jiǎn)單，代碼中已經(jīng)準(zhǔn)備好了這樣的效果：

h2.close {
    background-image: url(close.png);
}
1
2
3
1
2
3

我們只需要在新聞?wù)归_的時(shí)候，給標(biāo)題添加一個(gè)close的class即可。在新聞關(guān)閉時(shí)刪除該class：

$('.content h2').toggle(
  function(){
    $(this).next('.details').fadeIn();
    $(this).addClass('close');
  },
  function(){
    $(this).next('.details').fadeOut();
    $(this).removeClass('close');
  }
);
1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10

點(diǎn)擊標(biāo)題，文章展開，+號(hào)變?yōu)?，再次點(diǎn)擊，新聞隱藏，-號(hào)變回+，大功告成。

我們可以看到使用jQuery進(jìn)行事件響應(yīng)不論從效率、效果來看，都有明顯的提高。當(dāng)然這只是學(xué)習(xí)的初步體驗(yàn)，深入學(xué)習(xí)會(huì)讓我們的代碼更有質(zhì)量。