jQuery之元素操作及事件綁定

1、操作元素之屬性：

　　①attr讀：(“selector”).attr(“屬性名”)；=>getAttribute(“屬性名”)；改：(“selector”).attr(“屬性名”)；=>getAttribute(“屬性名”)；改：(“selector”).attr(“屬性名”，值)；=>setAttribute(“屬性名”，值)；*（*無法存取不再開始標籤中存在的prop屬性；例：checked，selected，disabled）；

　　②prop讀：(“selector”).prop(“屬性名”);=>elem.屬性名；改：(“selector”) .prop(“屬性名稱”)；=>elem.屬性名；改：(“selector”).prop(“屬性名”，值)；

　　③移除屬性：$(“selector”).removeAttr( 「屬性名」)；=>removeAttribute(“屬性名”)；

2、操作元素之內容：

　　①html原文：讀：(「selector」).html()；=>elem.innerHTML；改：原文：讀：(「selector」).html()；=>elem.innerHTML；改： (“selector”).html()；=>elem.innerHTML；改：(“selector”).html(“html片段”)；=>elem.innerHTML=”html片段”；清空元素：$(“selector ”).empty()；=>elem.innerHTML=””；

　　②純文本：讀取：(“selector”).text()；=>elem.textContent/innerText；改：(“selector”). text()；=>elem.textContent/innerText；改：(“selector”).text(“文本”)；

　　③表單元素的value：讀取：(“selector”).val()；改：( “selector”).val()；改：(“selector”).val(值)；

3、操作元素之樣式：

　　①直接操作CSS屬性：(“selector”).css(“CSS屬性名”)；=>getComputedStyle()；(“selector”).css(“CSS屬性名”)；=>getComputedStyle()；(“selector”).css(“CSS屬性名”，值)；=> elem.style.CSS屬性名=值；同時修改多個屬性值：$(“selector”).css({屬性名1：值1，屬性名2：值2，…})；*（css（ ）能讀取所有屬性，但只能修改內聯樣式，屬性名須去橫線化駝峰）；

　　②修改class屬性：a、完整修改：(“selector”).attr(“class”,”類別名稱”)；b、追加：(“selector”).attr(“class”,”類別名稱”)；b、追加：(“selector”).addClass(“類別名稱”)；c、移除: (“selector”).removeClass(“類別名稱”)；d、清除：(“selector”).removeClass(“類別名稱”)；d、清除：(“selector”).attr(“class”,”” )；或(“selector”).removeClass()；e、判斷是否包含:(“selector”).removeClass()；e、判斷是否包含:(“selector”).hasClass(“類別名稱”)；f 、在有或沒有指定類別名稱之間切換：$(“selector”).toggleClass(”類別名稱“)；

4、遍歷節點：

　　①獲得父元素：$(“selector”).parent( );=>elem.parentNode;或elem.parentElement；

　　②獲得兄弟元素：下一個兄弟(“selector”).next([selector])；=>elem.nextElementSibling；前一個兄弟：(“selector” ).next([selector])；=>elem.nextElementSibling；前一個兄弟：(“selector”).prev([selector])；=>elem.previousElementSibling；其他兄弟：$(“selector”).siblings( [selector])；

　　③子元素：直接子元素：(“selector”).children([selector])；所有子代元素：(“selector”).children([selector])；所有子代元素：(“selector”).find(selector)；*（find()必須加selector）；

5、新增：

　　①建立節點：var elem=elem=(“完整html元素程式碼段”)；

建立節點：var elem=elem=(“完整html元素代碼段”)；

建立節點：var elem=elem=(“完整html元素代碼段”)；

　　②添加：追加到parent下所有子節點末尾：(parent).append((parent).append(elem)；作為parent的第一個子節點插入：(parent).prepend((parent).prepend( elem)；插入到child之後：(child).after((child).after(elem)；插入到child之前：       (child).before((child).before(elem)；

6、其它操作：

　　①刪除：$(要刪除的元素).remove()；

　　②替換：(old).replaceWith(新元素)；或(old).replaceWith(新元素)；或(新元素).replaceAll (old)；

　　③複製：var clone=clone=(“selector”).clone([true])；*（true：為深度克隆包含事件處理函數）；

7、事件綁定之bind：

　　①$(…).bind(“事件名”，fn)=>addEventListener；為同一元素的事件處理函數綁定多個函數物件；

　　②$(…).unbind（“事件名稱”， fn）=>removeEventListener；如果有可能移除事件處理函數，則綁定時必須用實名函數綁定，不能用匿名函數；重載：a、不帶任何參數：移除元素上所有事件處理函數綁定定；b、只帶一個事件名稱參數：移除元素上指定事件名稱綁定的所有函數物件；c、帶兩個參數：僅移除事件元素上指定事件名稱綁定的執行的函數物件；

8、事件綁定之delegate：

🎜　　①事件代理：讓指定父元素下所有符合要求的子元素都能使用事件處理函數（包括生成）；原理：利用事件冒泡：a、僅將事件處理函數綁定在父元素；b、獲得目標元素：e.target；c、僅響應符合條件的元素的事件；🎜

　　②事件代理使用：將事件綁定到parent上（利用冒泡），只有符合selector條件的元素才能響應事件；(parent).delegate(“selector”，“事件名”，function(e)e. target)；移除綁定：(parent).delegate(“selector”，“事件名”，function(e)e.target)；移除綁定：(parent).undelegate(“selector”,”事件名”，function(e){e.target})；

9、其它綁定：

　　①一次性事件：$(…).one(“事件名”，fn)；只能執行一次事件處理函數，執行後自動解除；

　　②將元素所有事件綁定到document：(…).live(“事件名”,fn)；(…).live(“事件名”,fn)；(…). die(“事件名稱”,fn);

　　③僅為一個元素綁定事件處理函數：$(“target”).on(“事件名稱”，fn)；

　　④利用冒泡：$(“ parent”).on(“事件名”，“selector”，fn)；解除綁定off；