Create a Bootstrap Headline

現(xiàn)在宗挥，讓我們從頭開始練習(xí)我們的HTML, CSS 和 Bootstrap 技術(shù)。

我們將會搭建一個 jQuery playground蛤吓，它也即將在我們接下來的 jQuery 課程中被投入使用糠赦。

首先拙泽，創(chuàng)建一個 h3 元素顾瞻，并且包含文本內(nèi)容 jQuery Playground 。

在 h3 元素中設(shè)置 Bootstrap 的 class 屬性 text-primary 為其上色退渗，同時增加 Bootstrap 的 class 屬性 text-center 使文本居中顯示会油。

<h3 class="text-primary  text-center">jQuery playground</h3>

House our page within a Bootstrap Container Fluid Div

現(xiàn)在讓我們確保頁面里所有的內(nèi)容都是響應(yīng)式的古毛。

讓我們將 h3 元素放置于一個class屬性為 container-fluid 的 div 元素中稻薇。

Create a Bootstrap Row

現(xiàn)在將要為我們的內(nèi)聯(lián)元素創(chuàng)建一個 Bootstrap 行塞椎。

在 h3 標(biāo)簽下創(chuàng)建一個 div 元素，并且?guī)в?class 屬性 row 蹬敲。

Split your Bootstrap Row

既然我們已經(jīng)有了一個 Bootstrap 行伴嗡，讓我們來把它分成兩欄來放置我們的元素吧从铲。

在你的行內(nèi)添加兩個 div 元素，每個都具有 col-xs-6 class 屬性泣懊。

Create Bootstrap Wells

Bootstrap 有一個 class 屬性叫做 well馍刮，它的作用是為設(shè)定的列創(chuàng)造出一種視覺上的深度感（一種視覺上的效果窃蹋，動手寫代碼體會一下）警没。

Well 是一種會引起內(nèi)容凹陷顯示或插圖效果的容器 <div>。為了創(chuàng)建 Well亡脸，只需要簡單地把內(nèi)容放在帶有 class .well 的 <div> 中即可浅碾。

【案例】
在你的每一個class為col-xs-6的div 元素中都嵌入一個帶有 well class 屬性的 div 元素及穗。

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
       <div class="well"></div>
    </div>
    <div class="col-xs-6">
       <div class="well"></div>
    </div>
  </div>
</div>

【圖樣】

Add Elements within your Bootstrap Wells

現(xiàn)在我們已經(jīng)在行內(nèi)的每一列都嵌套了好幾層 div 元素了。這已經(jīng)足夠了⊥薇現(xiàn)在讓我們添加 button 元素吧购裙。

在每一個 well div 元素下放置三個 button 元素躏率。

Apply the Default Bootstrap Button Style

Bootstrap 還有一種屬于按鈕的 class 屬性叫做 btn-default 薇芝。

為你的每一個 button 元素增加兩個 class 屬性: btn 和 btn-default 。

http://www.jb51.net/web/249439.html

Create a Class to Target with jQuery Selectors

并不是每一個 class 屬性都是用于 CSS 的。 有些時候我們創(chuàng)建一些 class 只是為了更方便地在jQuery中選中這些元素。

例如路幸，為你的每一個 button 都添加 target class简肴。

Add ID Attributes to Bootstrap Elements

回憶一下砰识，我們除了可以給元素增加 class 屬性移层，還可以給你的每個元素增添一個 id 屬性观话。

每一個指定元素的 id 都是唯一的频蛔，并且在每個頁面中只能使用一次。

現(xiàn)在給我們每個包含 class well 的 div 元素一個唯一的 id瀑粥。

記住狞换，你可以像這樣賦予一個元素 id：

<div class="well" id="center-well">

例如本案例給左邊的 well 賦予 id left-well修噪。給右邊的 well 賦予 id right-well路媚。

Label Bootstrap Wells

讓我們?yōu)槲覀兊?wells 都標(biāo)上它們的 id 吧整慎。

在 left-well 之上裤园，class為 col-xs-6 的 div 元素里面，添加一個文本為 #left-well 的 h4元素丈氓。

在 right-well 之上万俗，class為 col-xs-6 的 div 元素里面，添加一個文本為 #right-well 的 h4元素嚎研。

Give Each Element a Unique ID

我們也可以使用jQuery并通過每個按鈕各自唯一的 id 來標(biāo)識出它們临扮。

給你的每一個按鈕一個唯一的 id 杆勇，以 target1 為開始蚜退，target6 為結(jié)束彪笼。

確保 target1 到 target3 在 #left-well 之中配猫，target4 到 target6 則在 #right-well 之中。

Label Bootstrap Buttons

正如我們標(biāo)注了每個 wells捆交， 我們同樣想要標(biāo)注每一個按鈕品追。

為你的每個 button 元素選擇與其 id 選擇器相同的文本。

Use Comments to Clarify Code

當(dāng)我們開始使用jQuery银还，我們將修改HTML元素洁墙，但是實(shí)際上我們并不是直接在 HTML 文本中修改热监。

我們必須確保讓每個人都知道，他們不應(yīng)該直接修改此頁面上這些代碼幽崩。

記住慌申，你可以在 為結(jié)束的地方進(jìn)行評論注釋理郑。(像這樣您炉， )

請在你的 HTML 頂部加如下一段注釋：Only change code above this line. 赚爵。

jQuery

Learn how Script Tags and Document Ready Work

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

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

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

瀏覽器會運(yùn)行script 里所有的Javascript火俄，包括jQuery瓜客。

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

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

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

<script>
  $(document).ready(function() {

  });
</script>

<!-- Only change code above this line. -->

<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

蔚袍，通常稱作為 美元符號配名，或者簡稱為bling渠脉。

jQuery通過選擇器來選擇一個元素的芋膘，然后操作元素做些改變为朋。

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

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

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

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

Target Elements by Class Using jQuery

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

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

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

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

然后使用jQuery的.addClass()方法添加2個class：animated细卧、shake贪庙。

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

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

[案例練習(xí)]給所有class為text-primary 的元素添加shake class。

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

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")

Delete your jQuery Functions

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

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

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收叶。

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

[注意]：是animated不是animate

Remove classes from an element with jQuery

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

像下面這樣：

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

Change the CSS of an Element Using jQuery

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

jQuery有一個叫做.css()的方法能讓你改變元素的CSS樣式判没。

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

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

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

Disable an Element Using jQuery

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

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

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

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

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

Change Text Inside an Element Using jQuery

jQuery不僅可以改變元素開始標(biāo)記和結(jié)束標(biāo)記間的文本魂毁，甚至可以改變元素標(biāo)記本身玻佩。

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

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

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

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

Remove an Element Using jQuery

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

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

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

 $("#target4").remove();

Use appendTo to Move Elements with jQuery

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

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

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

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

Clone an Element Using jQuery

除了移動元素铆农，你還可以拷貝元素牺氨。簡單理解：移動元素就是剪切，拷貝元素就是復(fù)制墩剖。

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

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

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

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

Target the Parent of an Element Using jQuery

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

<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>

舉個例子，h3 元素的父元素是 <div class="container-fluid">土至，<div class="container-fluid">的父元素是 body购对。

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

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

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

Target the Children of an Element Using jQuery

每個人都繼承了自己的父母的一些屬性，譬如：DNA楷扬、相貌解幽、血型、體型等等烘苹，HTML也不例外躲株。

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

【舉個例子】每個HTML元素都是 body 的子元素徘溢， 你的 "jQuery Playground" h3 元素是 <div class="container-fluid"> 的子元素。

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

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

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

Target a Specific Child of an Element Using jQuery

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

幸運(yùn)的是，jQuery有一些另外的技巧可以達(dá)到同樣的效果助被。
jQuery 用CSS選擇器來選取元素剖张，target:nth-child(n) CSS選擇器允許你按照索引順序（【注意】：從1開始)選擇目標(biāo)元素的所有子元素切诀。

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

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

Target Even Numbered Elements Using jQuery

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

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

記住，jQuery里的索引是從0開始的顾犹，也就是說：:odd 選擇第2倒庵、4、6個元素炫刷，因?yàn)閠arget#2(索引為1)擎宝，target#4(索引為3)，target6(索引為5)浑玛。

【備注】：奇數(shù)為odd绍申，偶數(shù)為even

Use jQuery to Modify the Entire Page

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

我們讓整個body都有淡出效果(fadeOut)：

$("body").addClass("animated fadeOut");

讓我們做一些更為激動人心的事情极阅，給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 fadeOut");
    $("body").addClass("animated hinge");
  });
</script>

<!-- Only change code above this line. -->

<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>

animated hinge.gif