jQuery中的節(jié)點操作
1.查找節(jié)點
通過jQuery選擇器來完成
jQuery 選擇器允許對 HTML 元素組或單個元素進行操作。
jQuery 選擇器基于元素的 id、類、類型、屬性、屬性值等"查找"（或選擇）HTML 元素。 它基于已經(jīng)存在的 CSS 選擇器，除此之外，它還有一些自定義的選擇器。
jQuery 中所有選擇器都以美元符號開頭：$()
- 基本選擇器
$("#test") //選擇id值為test的元素，id值是唯一的所以返回單個元素。
$("div") //選擇所有的div標簽元素，返回div元素數(shù)組
$(".myclass") //選擇使用myclass類的css的所有元素
$("*") //選取所有元素
$("#test,div,.myclass") //選取多個元素。
- 層次選擇器
$("div span") //選取<div>里的所有<span>元素
$("div >span") //選取<div>元素下元素名是<span>的子元素
$("#one +div") //選取id為one的元素的下一個<div>同輩元素 等同于$("#one").next("div")
$("#one~div") //選取id為one的元素的元素后面的所有<div>同輩元素 等同于$("#one").nextAll("div")
$("#one").siblings("div") //獲取id為one的元素的所有<div>同輩元素（不管前后）
$("#one").prev("div") //獲取id為one的元素的前面緊鄰的同輩<div>元素
所以獲取元素范圍大小順序依次為：
$("#one").siblings("div")>$("#one~div")>$("#one +div")
或是
$("#one").siblings("div")>$("#one").nextAll("div")>$("#one").next("div")
一些其他選擇器：
- 基本過濾選擇器
$("div:first") //選取所有<div>元素中第1個<div>元素
$("div:last") //選取所有<div>元素中最后一個<div>元素
$("input:not(.myClass)") //選取class不是myClass的<input>元素
$("input:even") //選取索引是偶數(shù)的<input>元素(索引從0開始)
$("input:odd") //選取索引是基數(shù)的<input>元素(索引從0開始)
$("input:eq(2)") //選取索引等于2的<input>元素
$("input:gt(4)") //選取索引大于4的<input>元素
$("input:lt(4)") //選取索引小于4的<input>元素
$(":header") //過濾掉所有標題元素，例如：h1、h2、h3等
$("div:animated") //選取正在執(zhí)行動畫的<div>元素
$(":focus") //選取當前獲取焦點的元素
- 內(nèi)容過濾選擇器
$("div:contains('Name')") //選取所有<div>中含有'Name'文本的元素
$("div:empty") //選取不包含子元素（包括文本元素）的<div>空元素
$("div:has(p)") //選取所有含有<p>元素的<div>元素
$("div:parent") //選取擁有子元素的（包括文本元素）<div>元素
- 可見性過濾選擇器
$("div:hidden") //選取所有不可見的<div>元素
$("div:visible") //選取所有可見的<div>元素
- 屬性過濾選擇器
$("div[id]") //選取所有擁有屬性id的元素
$("input[name='test']") //選取所有的name屬性等于'test'的<input>元素
$("input[name!='test']") //選取所有的name屬性不等于'test'的<input>元素
$("input[name^='news']") //選取所有的name屬性以'news'開頭的<input>元素
$("input[name$='news']") //選取所有的name屬性以'news'結尾的<input>元素
$("input[name*='news']") //選取所有的name屬性包含'news'的<input>元素
$("div[title|='en']") //選取屬性title等于'en'或以'en'為前綴(該字符串后跟一個連字符'-')的<div>元素
$("div[title~='en']") //選取屬性title用空格分隔的值中包含字符en的<div>元素
$("div[id][title$='test']") //選取擁有屬性id,并且屬性title以'test'結束的<div>元素
- 子元素過濾選擇器
$("div .one:nth-child(2)") //選取class為'one'的<div>父元素下的第2個子元素
$("div span:first-child") //選取每個<div>中的第1個<span>元素
$("div span:last-child") //選取每個<div>中的最后一個<span>元素
$("div button:only-child") //在<div>中選取是唯一子元素的<button>元素
- 表單對象屬性過濾選擇器
$("#form1 :enabled") //選取id為'form1'的表單內(nèi)所有可用元素
$("#form2 :disabled") //選取id為'form2'的表單內(nèi)所有不可用元素
$("input :checked") //選取所有被選中的<input>元素
$("select option:selected") //選取所有的select 的子元素中被選中的元素
- 表單選擇器
$(":input") //選取所有<input>,<textarea>,<select> 和 <button>元素
$(":text") //選取所有的單行文本框
$(":password") //選取所有的密碼框
$(":radio") //選取所有單的選框
$(":checkbox") //選取所有的多選框
$(":submit") //選取所有的提交按鈕
$(":image") //選取所有的圖像按鈕
$(":reset") //選取所有的重置按鈕
$(":button") //選取所有的按鈕
$(":file") //選取所有的上傳域
$(":hidden") //選取所有不可見元素
2. 創(chuàng)建節(jié)點
例：創(chuàng)建三個<span>標簽
var span1 = $("<span></span>");
var span2 = $("<span>具有文本內(nèi)容的節(jié)點</span>");
var span3 = $("<span title='屬性節(jié)點'></span>");
3.插入節(jié)點
// $A.append(B) 將B追加到A的末尾處，作為它的最后一個子元素
// $A.appendTo(B) 將A追加到B的末尾，作為它的最后一個子元素
// prepend()
$A.prependTo(B)
//將A追加到B的前面，作為它的第一個子元素
$A.after(B)
//在A之后追加B，作為它的兄弟元素
$A.insertAfter(B)
//在B之后追加A，作為它的兄弟元素
$A.before(B)
//在A之前追加B，作為它的兄弟元素
$A.insertBefore(B)
//在B之前追加A，作為它的兄弟元素
4.刪除節(jié)點
remove([selector])
//從DOM中刪除所有匹配的元素，返回值是一個指向已經(jīng)被刪除的節(jié)點的引用，可以在以后再使用這些元素。
//該方法會移除元素，同時也會移除元素內(nèi)部的一切，包括綁定的事件及與該元素相關的jQuery數(shù)據(jù)。
detach([selector])
//與remove()類似，但是detach()保存所有jQuery數(shù)據(jù)和被移走的元素的相關聯(lián)事件。
empty()
//無參數(shù)。從DOM中清空集合中匹配元素的所有的子節(jié)點。
5.復制節(jié)點
$("#id").clone(false);
//該方法返回的是一個節(jié)點的引用，參數(shù)默認為false，為淺復制；
//參數(shù)是true,為深復制，含義是：復制元素的同時復制元素中所綁定的事件。
6.替換節(jié)點
replaceWith(newContent);
//用新內(nèi)容替換集合中所有匹配的元素，并且返回被刪除的元素的集合。
//該方法會刪除與節(jié)點相關聯(lián)的所有數(shù)據(jù)和事件處理程序。
replaceAll(target);
//用集合的匹配元素替換每個目標元素。顛倒了replaceWith()操作效果。
