• 準備

所有jQuery方法都是由$開始的，通常稱作為 美元符號，或者簡稱為bling。

語法如下
<script>
$(document).ready(function(){

});
</script>

• jQuery 使用選擇器獲取HTML元素

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

添加按鈕回彈效果
$("button")來選中按鈕
用.addClass("animated bounce")給按鈕加CSS class。

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

• jQuery使用addClass()方法給元素加class

  • $(".well").addClass("animated shake");

• jQuery根據(jù)id屬性來獲取元素

  • 漸變隱藏效果
  • $("#target3").addClass("animated fadeOut");

• 三種選擇器

  • 元素選擇器：$("button")
  • class選擇器：$(".btn")
  • id選擇器：$("#target1")

• 使用jQUery刪除HTML元素的class

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

• 使用jQUery改變HTML元素的css樣式

  • 選擇器.css("屬性","值");
  • $("#target1").css("color","red");

• 使用jQUery設(shè)置元素不可用

  • $("#target1").prop("disabled",true);

• jQuery使用text()改變文本內(nèi)容

  • <em></em>[emphasize]標簽來重寫和強調(diào)標題文本
  • .text() 它只能改變文本但不能修改標記
  • $("#target4").html("<em>#target4</em>");

• 使用jQuery刪除一個html元素

  • $(#target4).remove();

• jQuery使用appendTo()移動html元素

  • 把元素從一個div里移到另外一個div里
  • $("#target2").appendTo("#right-well");

• jQuery使用clone()方法拷貝元素

  • 移動元素就是剪切，拷貝元素就是復制,所以應(yīng)該就是clone一個，然后移動過去。
  • $("#target5").clone().appendTo("#left-well");

• jQuery使用parent()操作父級元素

  • $("#target1").parent().css("background-color","red");

• jQuery使用children()操作子級元素

  • $("#right-well").children().css("color","orange");

• jQuery使用target:nth-child(n) CSS選擇器索引操作元素

  • :nth-child()按照順序索引是從1開始的
  • $(".target:nth-child(2)").addClass("animated bounce");

• jQuery使用選擇器操作j索引元素

  • jQuery里的索引是從0開始的
  • $(".target:even").addClass("animated shake");
  • $(".target:odd").addClass("animated shake");

• 使用jQuery修改整個頁面

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