一、jQuery獲取、設置HTML標簽的內容和屬性

tips：括號內無參則是獲取，有參則是設置

• 獲得內容 - text()、html() 以及 val()

  • text() - 設置或返回所選元素的文本內容
  • html() - 設置或返回所選元素的內容（包括 HTML 標記）
  • val() - 設置或返回表單字段的值

  testValue = $("#test").val();	// 獲取
  $("#test").val("newValue");	// 設置
  $("#test2").html("<b>Hello world!</b>");	// 設置html
  

  回調函數：回調函數有兩個參數：被選元素列表中當前元素的下標，以及原始（舊的）值。然后以函數新值返回你希望使用的字符串。

   $("#test1").text(function(i,origText){return "舊文本: " + origText + " 新文本: Hello world! (index: " + i + ")"; });
  

• 獲取屬性 - attr()，prop()

  url = $("#runoob").attr("href")	// 獲取href屬性（得到地址）
  $("#runoob").attr("href","www.baidu.com")	// 設置值
  $("#runoob").attr({"href":"www.baidu.com","title":"newTitle"})	// 同時設置多個屬性
  

  回調函數：有兩個參數：被選元素列表中當前元素的下標，以及原始（舊的）值。然后以函數新值返回你希望使用的字符串。

  $("#runoob").attr("href", function(i,origValue){return origValue + "/jquery"; });
  

  tips：attr與prop
  prop()函數的結果:
  1.如果有相應的屬性，返回指定屬性值。
  2.如果沒有相應的屬性，返回值是空字符串。
  attr()函數的結果:
  1.如果有相應的屬性，返回指定屬性值。
  2.如果沒有相應的屬性，返回值是 undefined。

  對于HTML元素本身就帶有的固有屬性，在處理時，使用prop方法。
  對于HTML元素我們自己自定義的DOM屬性，在處理時，使用 attr 方法。
  具有 true 和 false 兩個屬性的屬性，如 checked, selected 或者 disabled 使用prop()
  
  

二、增刪 HTML 的內容

• 增加

  append() - 在被選元素的結尾插入內容
  prepend() - 在被選元素的開頭插入內容
  after() - 在被選元素之后插入內容
  before() - 在被選元素之前插入內容

  tips：
  append/prepend 是在選擇元素內部嵌入。
  after/before 是在元素外面追加。

  JS實例：

  function appendText()
  {var txt1="<p>文本。</p>";              // 使用 HTML 標簽創建文本var txt2=$("<p></p>").text("文本。");  // 使用 jQuery 創建文本var txt3=document.createElement("p");txt3.innerHTML="文本。";               // 使用 DOM 創建文本 text with DOM$("body").append(txt1,txt2,txt3);        // 追加新元素
  }function afterText()
  {var txt1="<b>I </b>";                    // 使用 HTML 創建元素var txt2=$("<i></i>").text("love ");     // 使用 jQuery 創建元素var txt3=document.createElement("big");  // 使用 DOM 創建元素txt3.innerHTML="jQuery!";$("img").after(txt1,txt2,txt3);          // 在圖片后添加文本$("img").after([txt1,txt2,txt3]);        // 參數也可以是list
  }
  

• 刪除

  remove() - 刪除被選元素（及其子元素）
  empty() - 從被選元素中刪除子元素

  可選參數：選擇器

  $("#div1").remove();	
  $("#div1").empty();
  $("p").remove(".italic");	// 刪除 class="italic" 的所有 <p> 元素
  

三、操作CSS

addClass() - 向被選元素添加一個或多個類
removeClass() - 從被選元素刪除一個或多個類
toggleClass() - 對被選元素進行添加/刪除類的切換操作
css() - 設置或返回樣式屬性

• addClass 添加

  $("button").click(function(){$("div").addClass("important");	// 添加一個類$("h1,h2,p").addClass("blue");	// 給多個標簽添加一個類$("body div:first").addClass("important blue"); // 給標簽添加多個類
  });
  

• removeClass 刪除

  // 刪除多個標簽二的blue類
  $("h1,h2,p").removeClass("blue");	
  

• toggleClass 切換

  // 添加、刪除類的切換-若有則刪除，沒有則添加$("h1,h2,p").toggleClass("blue");
  

• css 獲取與設置

  css() 方法設置或返回被選元素的一個或多個樣式屬性。

  獲取：

  var backgroundColor = $("p").css("background-color");
  

  設置：

  $("p").css("background-color","yellow");
  // 設置多個屬性
  $("p").css({"background-color":"yellow","font-size":"200%"});
  

• 所有操作html、css方法參考 ☆

  菜鳥教程 - jQuery HTML / CSS 方法
  
  
  

四、操作元素和瀏覽器窗口的尺寸

width()			—— 設置或返回元素的寬度（不包括內邊距、邊框或外邊距）
height()		—— 設置或返回元素的高度（不包括內邊距、邊框或外邊距）innerWidth()	—— 返回元素的寬度（包括內邊距）
innerHeight()	—— 返回元素的高度（包括內邊距）outerWidth()	—— 返回元素的寬度（包括內邊距和邊框）
outerHeight()	—— 返回元素的高度（包括內邊距和邊框）

$("button").click(function(){var txt="";txt+="div 的寬度是: " + $("#div1").width() + "</br>";txt+="div 的高度是: " + $("#div1").height();$("#div1").html(txt);txt+="div 寬度，包含內邊距: " + $("#div2").innerWidth() + "</br>";txt+="div 高度，包含內邊距: " + $("#div2").innerHeight();$("#div2").html(txt);txt+="div 寬度，包含內邊距和邊框: " + $("#div3").outerWidth() + "</br>";txt+="div 高度，包含內邊距和邊框: " + $("#div3").outerHeight();$("#div3").html(txt);
});

tips：width() 獲取的是 css 設置的 width 減去 padding 和 border 的

五、遍歷DOM元素

三級關系：
父輩：父、祖父、曾祖父等等
同輩：同胞（擁有相同的父）
后代：子、孫、曾孫等等。

父輩查找

parent() —— 返回被選元素的直接父元素，只會向上一級對 DOM 樹進行遍歷
parents() —— 返回被選元素的所有祖先元素，它一路向上直到文檔的根元素 ()
parentsUntil() —— 返回介于兩個給定元素之間的所有祖先元素

$(document).ready(function(){// 返回每個 <span> 元素的直接父元素var spanParent = $("span").parent();spanParent.css("color","red");	// 將每個 <span> 元素的直接父元素顏色設置為紅色// 返回所有 <span> 元素的所有祖先$("span").parents();// 所有 <span> 元素的所有祖先，并且它是 <ul> 元素$("span").parents("ul");// 返回介于 <span> 與 <div> 元素之間的所有祖先元素$("span").parentsUntil("div");
});

同輩查找

siblings() —— 返回被選元素的所有同胞元素
next() —— 返回被選元素的下一個同胞元素，該方法只返回一個元素
nextAll() —— 返回被選元素的所有跟隨的同胞元素
nextUntil() —— 返回介于兩個給定參數之間的所有跟隨的同胞元素
prev() —— 同上，只不過是向上級遍歷
prevAll()
prevUntil()

$(document).ready(function(){// 返回 <h2> 的所有同胞元素$("h2").siblings();// 返回屬于 <h2> 的同胞元素的所有 <p> 元素$("h2").siblings("p");// 返回 <h2> 的下一個同胞元素$("h2").next();// 返回 <h2> 的所有跟隨的同胞元素$("h2").nextAll();// 返回介于 <h2> 與 <h6> 元素之間的所有同胞元素$("h2").nextUntil("h6");
});

后代查找

children() —— 返回被選元素的所有直接子元素，只會向下一級對 DOM 樹進行遍歷
find() —— 返回被選元素的后代元素，一路向下直到最后一個后代

$(document).ready(function(){// 返回每個 <div> 元素的所有直接子元素$("div").children();// 返回類名為 "1" 的所有 <p> 元素，并且它們是 <div> 的直接子元素$("div").children("p.1");// 返回屬于 <div> 后代的所有 <span> 元素$("div").find("span");// 返回 <div> 的所有后代$("div").find("*");
});

過濾查找

first() —— 返回被選元素的首個元素
last() —— 返回被選元素的最后一個元素
eq() —— 返回被選元素中帶有指定索引號的元素，索引號從 0 開始，因此首個元素的索引號是 0 而不是 1

$(document).ready(function(){// 選取首個 <div> 元素內部的第一個 <p> 元素$("div p").first();// 選擇最后一個 <div> 元素中的最后一個 <p> 元素$("div p").last();// 選取第二個 <p> 元素（索引號 1）$("p").eq(1);
});

filter() —— 允許你規定一個標準。不匹配這個標準的元素會被從集合中刪除，匹配的元素會被返回
not() —— 返回不匹配標準的所有元素，not() 方法與 filter() 相反

$(document).ready(function(){// 返回帶有類名 "url" 的所有 <p> 元素$("p").filter(".url");// 返回不帶有類名 "url" 的所有 <p> 元素$("p").not(".url");
});

tips：
$(“p”).last().css(“background-color”,“yellow”);
和
$(“p:last”).css(“background-color”,“yellow”);
效果一樣。

$(“p”).first().css(“background-color”,“yellow”);
和
$(“p:first”).ss(“background-color”,“yellow”);
效果一樣。

$(“p”).not(".url");
和
$(“p:not(.url)”);
效果一樣。

所有遍歷方法參考 ☆

菜鳥教程 - jQuery 遍歷 方法