首頁 > web前端 > js教程 > 主體

jQuery之元素操作及事件綁定

高洛峰
發布: 2016-11-05 16:42:11
原創
861 人瀏覽過

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;


相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!