FreeCodeCamp - jQuery

Learn how Script Tags and Document Ready Work

現(xiàn)在讓我們開始學(xué)習(xí)最流行的JavaScript庫jQuery吧，不用擔(dān)心JavaScript本身，我們稍后會(huì)提到它。

在開始學(xué)習(xí)使用jQuery之前，我們需要加一些代碼到HTML文件中。

首先在頁面頂端增加一行script元素，然后寫上結(jié)束符。

瀏覽器會(huì)運(yùn)行script 里所有的Javascript，包括jQuery。

在你的script里，添加這個(gè)方法:$(document).ready(function() {到你的script，接下來用});結(jié)束這個(gè)方法

接下來我們來學(xué)習(xí)如何寫方法，方法里面的代碼會(huì)被瀏覽器加載。

在沒有document ready function以前，你的代碼會(huì)在HTML沒有渲染完成就執(zhí)行，這樣會(huì)產(chǎn)生bug。

<script>
  $(document).ready(function() {});
</script>
<!-- 只更改這條注釋以上的代碼。 -->

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <h4>#left-well</h4>
      <div class="well" id="left-well">
        <button class="btn btn-default target" id="target1">#target1</button>
        <button class="btn btn-default target" id="target2">#target2</button>
        <button class="btn btn-default target" id="target3">#target3</button>
      </div>
    </div>
    <div class="col-xs-6">
      <h4>#right-well</h4>
      <div class="well" id="right-well">
        <button class="btn btn-default target" id="target4">#target4</button>
        <button class="btn btn-default target" id="target5">#target5</button>
        <button class="btn btn-default target" id="target6">#target6</button>
      </div>
    </div>
  </div>
</div>

Target HTML Elements with Selectors Using jQuery

現(xiàn)在我們已經(jīng)知道 document ready function的用法了.

現(xiàn)在讓我們開始寫第一個(gè)jQuery語句，所有jQuery方法都是由$開始的，通常稱作為 美元符號(hào)，或者簡(jiǎn)稱為bling。

jQuery通過選擇器來選擇一個(gè)元素的，然后操作元素做些改變。

舉個(gè)例子，要讓所有的按鈕做彈回效果，只要把這段代碼寫在document ready function里面就可以了。

$("button").addClass("animated bounce");

我們已經(jīng)在后臺(tái)為你引入了jQuery庫和Animate.css庫，這樣你就可以在編輯器里直接可以使用這兩個(gè)庫，進(jìn)而通過jQuery給button元素添加bounce回彈動(dòng)畫效果。

<script>
  $(document).ready(function() {
    $("button").addClass("animated bounce")
  });
</script>

<!-- 只更改這條注釋以上的代碼。 -->

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <h4>#left-well</h4>
      <div class="well" id="left-well">
        <button class="btn btn-default target" id="target1">#target1</button>
        <button class="btn btn-default target" id="target2">#target2</button>
        <button class="btn btn-default target" id="target3">#target3</button>
      </div>
    </div>
    <div class="col-xs-6">
      <h4>#right-well</h4>
      <div class="well" id="right-well">
        <button class="btn btn-default target" id="target4">#target4</button>
        <button class="btn btn-default target" id="target5">#target5</button>
        <button class="btn btn-default target" id="target6">#target6</button>
      </div>
    </div>
  </div>
</div>

Target Elements by Class Using jQuery

你看到我們是怎么給所有的按鈕做彈回效果了嗎？我們用 $("button")來選中按鈕，然后用.addClass("animated bounce")給按鈕加CSS class。

你只需要用jQuery的.addClass()方法，就可以給元素加class了。

首先，我們來使用$(".well")來獲取所有class為well的div元素。

仔細(xì)想想為什么需要在well前面添加.

然后使用jQuery的.addClass()方法添加2個(gè)class：animated、shake。

例如，你可以將下面的代碼寫在document ready function里：

$(".text-primary").addClass("animated shake");

上面的代碼給所有class為text-primary 的元素添加shake class。

<script>
  $(document).ready(function() {
    $("button").addClass("animated bounce");
    $(".well").addClass("animated shake");
  });
</script>

<!-- 只更改這條注釋以上的代碼。 -->

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <h4>#left-well</h4>
      <div class="well" id="left-well">
        <button class="btn btn-default target" id="target1">#target1</button>
        <button class="btn btn-default target" id="target2">#target2</button>
        <button class="btn btn-default target" id="target3">#target3</button>
      </div>
    </div>
    <div class="col-xs-6">
      <h4>#right-well</h4>
      <div class="well" id="right-well">
        <button class="btn btn-default target" id="target4">#target4</button>
        <button class="btn btn-default target" id="target5">#target5</button>
        <button class="btn btn-default target" id="target6">#target6</button>
      </div>
    </div>
  </div>
</div>

Target Elements by ID Using jQuery

你還可以根據(jù)id屬性來獲取元素

首先用$("#target3")來選擇id為target3的button元素。

注意，就像CSS一樣，在id的名字前加上 #。

然后使用jQuery的.addClass()方法來添加 animated和fadeOutclass.

例如：下面的代碼就是給id為target6的button元素添加fade out效果的：

$("#target6").addClass("animated fadeOut")

<script>
  $(document).ready(function() {
    $("button").addClass("animated bounce");
    $(".well").addClass("animated shake");
    $("#target3").addClass("fadeOut");
  });
</script>

<!-- 只更改這條注釋以上的代碼。 -->

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <h4>#left-well</h4>
      <div class="well" id="left-well">
        <button class="btn btn-default target" id="target1">#target1</button>
        <button class="btn btn-default target" id="target2">#target2</button>
        <button class="btn btn-default target" id="target3">#target3</button>
      </div>
    </div>
    <div class="col-xs-6">
      <h4>#right-well</h4>
      <div class="well" id="right-well">
        <button class="btn btn-default target" id="target4">#target4</button>
        <button class="btn btn-default target" id="target5">#target5</button>
        <button class="btn btn-default target" id="target6">#target6</button>
      </div>
    </div>
  </div>
</div>

Delete your jQuery Functions

這些動(dòng)畫效果一開始很cool，但是動(dòng)畫太多就有點(diǎn)喧賓奪主了。

在你的document ready function里刪掉那三條語句，只留document ready function。

<script>
  $(document).ready(function() {
 
  });
</script>

<!-- 只更改這條注釋以上的代碼。 -->

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <h4>#left-well</h4>
      <div class="well" id="left-well">
        <button class="btn btn-default target" id="target1">#target1</button>
        <button class="btn btn-default target" id="target2">#target2</button>
        <button class="btn btn-default target" id="target3">#target3</button>
      </div>
    </div>
    <div class="col-xs-6">
      <h4>#right-well</h4>
      <div class="well" id="right-well">
        <button class="btn btn-default target" id="target4">#target4</button>
        <button class="btn btn-default target" id="target5">#target5</button>
        <button class="btn btn-default target" id="target6">#target6</button>
      </div>
    </div>
  </div>
</div>

Target the same element with multiple jQuery Selectors

現(xiàn)在你已經(jīng)了解了3種選擇器：元素選擇器：$("button")、class選擇器：$(".btn")、id選擇器：$("#target1")。

盡管用.addClass()這種方式就可以加不同的class，不過還是讓我們嘗試用不同的方式給元素添加class吧。

用上面介紹的jQuery選擇器和addClass()方法：

給所有type為button的元素添加animated class。

給所有class為.btn的按鈕添加shake class。

給所有id為#target1的按鈕添加btn-primary class。

<script>
  $(document).ready(function() {
   $("button").addClass("animated");
   $(".btn").addClass("shake");
   $("#target1").addClass("btn-primary")
  });
</script>

<!-- 只更改這條注釋以上的代碼。 -->

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <h4>#left-well</h4>
      <div class="well" id="left-well">
        <button class="btn btn-default target" id="target1">#target1</button>
        <button class="btn btn-default target" id="target2">#target2</button>
        <button class="btn btn-default target" id="target3">#target3</button>
      </div>
    </div>
    <div class="col-xs-6">
      <h4>#right-well</h4>
      <div class="well" id="right-well">
        <button class="btn btn-default target" id="target4">#target4</button>
        <button class="btn btn-default target" id="target5">#target5</button>
        <button class="btn btn-default target" id="target6">#target6</button>
      </div>
    </div>
  </div>
</div>

Remove classes from an element with jQuery

你可以通過jQuery的addClass()方法給元素添加class,也可以通過jQueryremoveClass()方法去掉元素上的class。

像下面這樣：

$("#target2").removeClass("btn-default");

$("#target2").removeClass("btn-default");

來嘗試把所有button元素上的btn-default class移除掉。

<script>
  $(document).ready(function() {
    $("button").addClass("animated bounce");
    $(".well").addClass("animated shake");
    $("#target3").addClass("animated fadeOut");
    $("button").removeClass("btn-default");
  });
</script>

<!-- 只更改這條注釋以上的代碼。 -->

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <h4>#left-well</h4>
      <div class="well" id="left-well">
        <button class="btn btn-default target" id="target1">#target1</button>
        <button class="btn btn-default target" id="target2">#target2</button>
        <button class="btn btn-default target" id="target3">#target3</button>
      </div>
    </div>
    <div class="col-xs-6">
      <h4>#right-well</h4>
      <div class="well" id="right-well">
        <button class="btn btn-default target" id="target4">#target4</button>
        <button class="btn btn-default target" id="target5">#target5</button>
        <button class="btn btn-default target" id="target6">#target6</button>
      </div>
    </div>
  </div>
</div>

Change the CSS of an Element Using jQuery

我們可以通過jQuery來改變HTML元素的CSS樣式。

jQuery有一個(gè)叫做.css()的方法能讓你改變?cè)氐腃SS樣式。

我們是這樣來把顏色改變成藍(lán)色的:

$("#target1").css("color", "blue");

這跟通常的CSS語法有點(diǎn)不同，這里CSS的屬性和值是在引號(hào)內(nèi)的，并且用逗號(hào)分開。

把你的document ready function清空，

來嘗試把target1改變成紅色。

<script>
  $(document).ready(function() {
    $("button").addClass("animated bounce");
    $(".well").addClass("animated shake");
    $("#target3").addClass("animated fadeOut");
    $("button").removeClass("btn-default");
    $("#target1").css("color","red");
  });
</script>

<!-- 只更改這條注釋以上的代碼。 -->

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <h4>#left-well</h4>
      <div class="well" id="left-well">
        <button class="btn btn-default target" id="target1">#target1</button>
        <button class="btn btn-default target" id="target2">#target2</button>
        <button class="btn btn-default target" id="target3">#target3</button>
      </div>
    </div>
    <div class="col-xs-6">
      <h4>#right-well</h4>
      <div class="well" id="right-well">
        <button class="btn btn-default target" id="target4">#target4</button>
        <button class="btn btn-default target" id="target5">#target5</button>
        <button class="btn btn-default target" id="target6">#target6</button>
      </div>
    </div>
  </div>
</div>

Disable an Element Using jQuery

你還可以用jQuery改變除了CSS以外的屬性。比如，你可以讓按鈕變不可選。

當(dāng)你把按鈕設(shè)置成不可選以后，這會(huì)讓按鈕變灰并且不能點(diǎn)擊。

jQuery有一個(gè).prop()的方法讓你來調(diào)整元素的屬性.

我們是這樣來讓按鈕不可選的:

$("button").prop("disabled", true);

$("button").prop("disabled", true);

來嘗試讓 target1 按鈕不可選.

<script>
  $(document).ready(function() {
    $("#target1").css("color", "red");
    $("#target1").prop("disabled", true);
  });
</script>

<!-- 只更改這條注釋以上的代碼。 -->

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <h4>#left-well</h4>
      <div class="well" id="left-well">
        <button class="btn btn-default target" id="target1">#target1</button>
        <button class="btn btn-default target" id="target2">#target2</button>
        <button class="btn btn-default target" id="target3">#target3</button>
      </div>
    </div>
    <div class="col-xs-6">
      <h4>#right-well</h4>
      <div class="well" id="right-well">
        <button class="btn btn-default target" id="target4">#target4</button>
        <button class="btn btn-default target" id="target5">#target5</button>
        <button class="btn btn-default target" id="target6">#target6</button>
      </div>
    </div>
  </div>
</div>

Change Text Inside an Element Using jQuery

jQuery不僅可以改變?cè)亻_始標(biāo)記和結(jié)束標(biāo)記間的文本，甚至可以改變?cè)貥?biāo)記本身。

jQuery的.html()方法可以添加HTML標(biāo)簽和文字到元素，而元素之前的內(nèi)容都會(huì)被方法的內(nèi)容所替換掉。

我們是通過em[emphasize]標(biāo)簽來重寫和強(qiáng)調(diào)標(biāo)題文本的：

$("h3").html("<em>jQuery Playground</em>");

jQuery 還有一個(gè)類似的方法叫.text()，它只能改變文本但不能修改標(biāo)記。換句話說，這個(gè)方法只會(huì)把傳進(jìn)來的任何東西(包括標(biāo)記)當(dāng)成文本來顯示。

任務(wù)：強(qiáng)調(diào)id為target4按鈕里的文本。

<script>
  $(document).ready(function() {
    $("#target1").css("color", "red");
    $("#target4").html("<em>#target4</em>")
  });
</script>

<!-- 只更改這條注釋以上的代碼。 -->

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <h4>#left-well</h4>
      <div class="well" id="left-well">
        <button class="btn btn-default target" id="target1">#target1</button>
        <button class="btn btn-default target" id="target2">#target2</button>
        <button class="btn btn-default target" id="target3">#target3</button>
      </div>
    </div>
    <div class="col-xs-6">
      <h4>#right-well</h4>
      <div class="well" id="right-well">
        <button class="btn btn-default target" id="target4">#target4</button>
        <button class="btn btn-default target" id="target5">#target5</button>
        <button class="btn btn-default target" id="target6">#target6</button>
      </div>
    </div>
  </div>
</div>

Remove an Element Using jQuery

現(xiàn)在讓我們用jQuery來移除頁面上的HTML元素吧.

jQuery 有一個(gè).remove() 的方法可以移除HTML元素

試著使用.remove()方法來移除頁面上的target4元素吧.

<script>
  $(document).ready(function() {
    $("#target1").css("color", "red");
    $("#target1").prop("disabled", true);
    $("#target4").remove();
  });
</script>

<!-- 只更改這條注釋以上的代碼。 -->

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <h4>#left-well</h4>
      <div class="well" id="left-well">
        <button class="btn btn-default target" id="target1">#target1</button>
        <button class="btn btn-default target" id="target2">#target2</button>
        <button class="btn btn-default target" id="target3">#target3</button>
      </div>
    </div>
    <div class="col-xs-6">
      <h4>#right-well</h4>
      <div class="well" id="right-well">
        <button class="btn btn-default target" id="target4">#target4</button>
        <button class="btn btn-default target" id="target5">#target5</button>
        <button class="btn btn-default target" id="target6">#target6</button>
      </div>
    </div>
  </div>
</div>

Use appendTo to Move Elements with jQuery

現(xiàn)在讓我們嘗試把元素從一個(gè)div里移到另外一個(gè)div里。

jQuery有一個(gè)appendTo()方法可以把選中的元素加到其他元素中。

比如，你想讓target4從我們的從right-well移到left-well，我們可以這樣使用:

$("#target4").appendTo("#left-well");

來試著把target2元素從left-well移到right-well中。

<script>
  $(document).ready(function() {
    $("#target1").css("color", "red");
    $("#target1").prop("disabled", true);
    $("#target4").remove();
    $("#target2").appendTo("#right-well");
  });
</script>

<!-- 只更改這條注釋以上的代碼。 -->

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <h4>#left-well</h4>
      <div class="well" id="left-well">
        <button class="btn btn-default target" id="target1">#target1</button>
        <button class="btn btn-default target" id="target2">#target2</button>
        <button class="btn btn-default target" id="target3">#target3</button>
      </div>
    </div>
    <div class="col-xs-6">
      <h4>#right-well</h4>
      <div class="well" id="right-well">
        <button class="btn btn-default target" id="target4">#target4</button>
        <button class="btn btn-default target" id="target5">#target5</button>
        <button class="btn btn-default target" id="target6">#target6</button>
      </div>
    </div>
  </div>
</div>

Clone an Element Using jQuery

除了移動(dòng)元素，你還可以拷貝元素。簡(jiǎn)單理解：移動(dòng)元素就是剪切，拷貝元素就是復(fù)制。

jQuery的clone()方法可以拷貝元素。

比如，如果我想把target2從left-well拷貝到right-well，我們可以這樣寫:

$("#target2").clone().appendTo("#right-well");

你有沒有發(fā)現(xiàn)兩個(gè)jQuery方法合在一起使用了？這就叫方法鏈function chaining，使用起來很方便。

復(fù)制target5元素追加到left-well。

提示：當(dāng)你點(diǎn)擊run tests后left-well會(huì)有兩個(gè)#target5，千萬別以為這是bug。實(shí)際上是因?yàn)榫庉嬈髦械拇a會(huì)自動(dòng)執(zhí)行一次，點(diǎn)擊run后會(huì)再執(zhí)行一次，所以有兩個(gè)#target5。

<script>
  $(document).ready(function() {
    $("#target1").css("color", "red");
    $("#target1").prop("disabled", true);
    $("#target4").remove();
    $("#target2").appendTo("#right-well");
    $("#target5").clone().appendTo("#left-well");
  });
</script>

<!-- 只更改這條注釋以上的代碼。 -->

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <h4>#left-well</h4>
      <div class="well" id="left-well">
        <button class="btn btn-default target" id="target1">#target1</button>
        <button class="btn btn-default target" id="target2">#target2</button>
        <button class="btn btn-default target" id="target3">#target3</button>
      </div>
    </div>
    <div class="col-xs-6">
      <h4>#right-well</h4>
      <div class="well" id="right-well">
        <button class="btn btn-default target" id="target4">#target4</button>
        <button class="btn btn-default target" id="target5">#target5</button>
        <button class="btn btn-default target" id="target6">#target6</button>
      </div>
    </div>
  </div>
</div>

Target the Parent of an Element Using jQuery

每個(gè)HTML元素根據(jù)繼承屬性都有父parent元素。

舉個(gè)例子，h3 元素的父元素是 <div class="container-fluid">，<div class="container-fluid">的父元素是 body。

jQuery有一個(gè)方法叫parent()，它允許你訪問指定元素的父元素。

舉個(gè)例子：讓left-well 元素的父元素parent()的背景色變成藍(lán)色。

$("#left-well").parent().css("background-color", "blue")

試試讓#target1元素的父元素的背景色變成紅色。

<script>
  $(document).ready(function() {
    $("#target1").css("color", "red");
    $("#target1").prop("disabled", true);
    $("#target4").remove();
    $("#target2").appendTo("#right-well");
    $("#target5").clone().appendTo("#left-well");
    $("#target1").parent().css("background-color","red");
  });
</script>

<!-- 只更改這條注釋以上的代碼。 -->

<body>
  <div class="container-fluid">
    <h3 class="text-primary text-center">jQuery Playground</h3>
    <div class="row">
      <div class="col-xs-6">
        <h4>#left-well</h4>
        <div class="well" id="left-well">
          <button class="btn btn-default target" id="target1">#target1</button>
          <button class="btn btn-default target" id="target2">#target2</button>
          <button class="btn btn-default target" id="target3">#target3</button>
        </div>
      </div>
      <div class="col-xs-6">
        <h4>#right-well</h4>
        <div class="well" id="right-well">
          <button class="btn btn-default target" id="target4">#target4</button>
          <button class="btn btn-default target" id="target5">#target5</button>
          <button class="btn btn-default target" id="target6">#target6</button>
        </div>
      </div>
    </div>
  </div>
</body>

Target the Children of an Element Using jQuery

每個(gè)人都繼承了自己的父母的一些屬性，譬如：DNA、相貌、血型、體型等等，HTML也不例外。

許多HTML元素都有children(子元素)，每個(gè)子元素都從父元素那里繼承了一些屬性。

舉個(gè)例子，每個(gè)HTML元素都是 body 的子元素， 你的 "jQuery Playground" h3 元素是 <div class="container-fluid"> 的子元素。

jQuery有一個(gè)方法叫children()，它允許你訪問指定元素的子元素。

舉個(gè)例子：讓left-well 元素的子元素children()的文本顏色變成藍(lán)色。

$("#left-well").children().css("color", "blue")

任務(wù)：讓#right-well元素的所有子元素的文本顏色都變成橙色（orange）。

<script>
  $(document).ready(function() {
    $("#target1").css("color", "red");
    $("#target1").prop("disabled", true);
    $("#target4").remove();
    $("#target2").appendTo("#right-well");
    $("#target5").clone().appendTo("#left-well");
    $("#target1").parent().css("background-color", "red");
    $("#right-well").children().css("color","orange");
  });
</script>

<!-- 只更改這條注釋以上的代碼。 -->

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <h4>#left-well</h4>
      <div class="well" id="left-well">
        <button class="btn btn-default target" id="target1">#target1</button>
        <button class="btn btn-default target" id="target2">#target2</button>
        <button class="btn btn-default target" id="target3">#target3</button>
      </div>
    </div>
    <div class="col-xs-6">
      <h4>#right-well</h4>
      <div class="well" id="right-well">
        <button class="btn btn-default target" id="target4">#target4</button>
        <button class="btn btn-default target" id="target5">#target5</button>
        <button class="btn btn-default target" id="target6">#target6</button>
      </div>
    </div>
  </div>
</div>

Target a Specific Child of an Element Using jQuery

你已經(jīng)看到了當(dāng)用jQuery選擇器通過id屬性來選取元素的時(shí)候是多么方便，但是你不能總是寫這么整齊的id。

幸運(yùn)的是，jQuery有一些另外的技巧可以達(dá)到同樣的效果。

jQuery 用CSS選擇器來選取元素，target:nth-child(n)CSS選擇器允許你按照索引順序(從1開始)選擇目標(biāo)元素的所有子元素。

示例：你可以給目標(biāo)元素的第三個(gè)子元素添加bounce class。

$(".target:nth-child(3)").addClass("animated bounce");

任務(wù)：確保給目標(biāo)元素的第二個(gè)子元素添加animated和bounce class，你可以通過target class來選獲得目標(biāo)元素。

<script>
  $(document).ready(function() {
    $("#target1").css("color", "red");
    $("#target1").prop("disabled", true);
    $("#target4").remove();
    $("#target2").appendTo("#right-well");
    $("#target5").clone().appendTo("#left-well");
    $("#target1").parent().css("background-color", "red");
    $("#right-well").children().css("color", "orange");
    $(".target:nth-child(2)").addClass("animated bounce");
  });
</script>

<!-- 只更改這條注釋以上的代碼。 -->

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <h4>#left-well</h4>
      <div class="well" id="left-well">
        <button class="btn btn-default target" id="target1">#target1</button>
        <button class="btn btn-default target" id="target2">#target2</button>
        <button class="btn btn-default target" id="target3">#target3</button>
      </div>
    </div>
    <div class="col-xs-6">
      <h4>#right-well</h4>
      <div class="well" id="right-well">
        <button class="btn btn-default target" id="target4">#target4</button>
        <button class="btn btn-default target" id="target5">#target5</button>
        <button class="btn btn-default target" id="target6">#target6</button>
      </div>
    </div>
  </div>
</div>

Target Even Numbered Elements Using jQuery

示例：獲取class為target且索引為奇數(shù)的所有元素，并給他們添加class。

$(".target:odd").addClass("animated shake");

記住，jQuery里的索引是從0開始的，也就是說：:odd 選擇第2、4、6個(gè)元素，因?yàn)閠arget#2(索引為1)，target#4(索引為3)，target6(索引為5。

任務(wù)：獲取class為target且索引為偶數(shù)的所有元素，也就是target#1(索引為0)，target#3(索引為2)，target5(索引為4)，并給它們添加class animated 和 shake。

<script>
  $(document).ready(function() {
    $("#target1").css("color", "red");
    $("#target1").prop("disabled", true);
    $("#target4").remove();
    $("#target2").appendTo("#right-well");
    $("#target5").clone().appendTo("#left-well");
    $("#target1").parent().css("background-color", "red");
    $("#right-well").children().css("color", "orange");
    $("#left-well").children().css("color", "green");
    $(".target:nth-child(2)").addClass("animated bounce");
    $(".target:even").addClass("animated shake");
  });
</script>

<!-- 只更改這條注釋以上的代碼。 -->

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <h4>#left-well</h4>
      <div class="well" id="left-well">
        <button class="btn btn-default target" id="target1">#target1</button>
        <button class="btn btn-default target" id="target2">#target2</button>
        <button class="btn btn-default target" id="target3">#target3</button>
      </div>
    </div>
    <div class="col-xs-6">
      <h4>#right-well</h4>
      <div class="well" id="right-well">
        <button class="btn btn-default target" id="target4">#target4</button>
        <button class="btn btn-default target" id="target5">#target5</button>
        <button class="btn btn-default target" id="target6">#target6</button>
      </div>
    </div>
  </div>
</div>

Use jQuery to Modify the Entire Page

我們已經(jīng)玩了這么久的jQuery游樂場(chǎng)，是時(shí)候結(jié)束這一節(jié)了。

我們讓整個(gè)body都有淡出效果(fadeOut)： $("body").addClass("animated fadeOut");

讓我們做一些更為激動(dòng)人心的事情，給body添加class animated 和hinge 。

<script>
  $(document).ready(function() {
    $("#target1").css("color", "red");
    $("#target1").prop("disabled", true);
    $("#target4").remove();
    $("#target2").appendTo("#right-well");
    $("#target5").clone().appendTo("#left-well");
    $("#target1").parent().css("background-color", "red");
    $("#right-well").children().css("color", "orange");
    $("#left-well").children().css("color", "green");
    $(".target:nth-child(2)").addClass("animated bounce");
    $(".target:even").addClass("animated shake");
    $("body").addClass("animated hinge");
  });
</script>

<!-- 只更改這條注釋以上的代碼。 -->

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <h4>#left-well</h4>
      <div class="well" id="left-well">
        <button class="btn btn-default target" id="target1">#target1</button>
        <button class="btn btn-default target" id="target2">#target2</button>
        <button class="btn btn-default target" id="target3">#target3</button>
      </div>
    </div>
    <div class="col-xs-6">
      <h4>#right-well</h4>
      <div class="well" id="right-well">
        <button class="btn btn-default target" id="target4">#target4</button>
        <button class="btn btn-default target" id="target5">#target5</button>
        <button class="btn btn-default target" id="target6">#target6</button>
      </div>
    </div>
  </div>
</div>