十分鐘全面了解JQuery文檔操作,新手及面試必讀

1 插入

1.1 append()

//在被選中元素的結(jié)尾(仍然在內(nèi)部)插入指定內(nèi)容
$("#myDiv").append("<b>42du.cn</b>");

1.2 appendTo()

//插入指定內(nèi)容到被選中元素的結(jié)尾(仍然在內(nèi)部)
$("<b>42du.cn</b>").appendTo($("#myDiv"));

1.3 prepend()

//在被選中元素的開頭(仍然在內(nèi)部)插入指定內(nèi)容
$("#myDiv").prepend("<b>42du.cn</b>");

1.4 prependTo()

//插入指定內(nèi)容到被選中元素的開頭(仍然在內(nèi)部)
$("<b>42du.cn</b>").prependTo($("#myDiv"));

1.5 before()

//在被選中元素之前插入指定內(nèi)容(外部)
$("#myDiv").before("<div>42du.cn</div>");

1.6 insertBefore()

//插入指定內(nèi)容到被選中元素之前(外部)
$("<div>42du.cn</div>").insertBefore($("#myDiv"));

1.7 after()

//在被選中元素之后插入指定內(nèi)容(外部)
$("#myDiv").after("<div>42du.cn</div>");

1.8 insertAfter()

//插入指定內(nèi)容到被選中元素之后(外部)
$("<div>42du.cn</div>").insertAfter($("#myDiv"));

2 類操作

2.1 addClass()

//向被選中元素添加一個或多個類
$("#myDiv").addClass("red");

2.2 hasClass()

//檢查被選中元素是否包含指定的類
$("#myDiv").hasClass("red");

2.3 removeClass()

//從被選元素移除一個或多個類
$("#myDiv").removeClass("red");

2.4 toggleClass()

//先檢查選中元素是否包含指定的類,如果不存在則添加,如果存在則刪除
$("#myDiv").toggleClass("red");

3 屬性操作

3.1 attr()

//取得被選中元素的屬性值
$("#myDiv").attr("class");
//設(shè)置被選中元素的屬性值
$("#myDiv").attr("class","red");

3.2 removeAttr()

//從被選中元素移除屬性
$("#myDiv").removeAttr("class");

4 包裹

4.1 wrap()

//把被選中元素放置在指定的HTML內(nèi)容或元素中,語法:$(selector).wrap(wrapper)
//在id為myDiv的元素外面包裹一個新的div元素
$("#myDiv").wrap("<div id='parent'></div>");

4.2 unwrap()

//刪除被選中元素的父元素
$("#myDiv").unwrap();

4.3 wrapAll()

//在指定的HTML內(nèi)容或元素中放置所有被選中元素
//用<div>包裹所有段落
$("p").wrapAll("<div></div>")

4.4 wrapInner()

//使用指定的HTML內(nèi)容或元素,來包裹每個被選元素中的所有內(nèi)容
$("#myDiv").wrapInner("<b></b>");

5 克隆

5.1 clone()

//生成被選元素的副本,包含子節(jié)點、文本和屬性
//復制每個p元素,然后追加到div元素中
$("#myDiv").append($("p").clone());

6 移除

6.1 detach()

//移除選中元素,包括所有文本和子節(jié)點,會返回選中元素,并保留綁定事件及附加數(shù)據(jù)
$("myDiv").detach();

6.2 remove()

//移除選中元素,包括所有文本和子節(jié)點,會返回選中元素,不保留綁定事件及附加數(shù)據(jù)
$("myDiv").remove();

6.3 empty()

//移除選中元素的所有文本和子節(jié)點
$("myDiv").empty();

7 其它

7.1 html()

//取得被選中元素的內(nèi)容(inner HTML)
$("#myDiv").html();
//設(shè)置被選中元素的內(nèi)容(inner HTML)
$("#myDiv").html("Hello <b>42du.cn</b>");

7.2 text()

//取得被選中元素的文本內(nèi)容
$("#myDiv").text();
//設(shè)置被選中元素的文本內(nèi)容
$("#myDiv").text("Hello <b>42du.cn</b>");

7.3 val()

//取得被選中元素的值
$("#username").val();
//設(shè)置被選中元素的值
$("#username").val("毛三胖");

8 總結(jié)

本文全面的總結(jié)JQuery文檔操作的基本方法,希望對大家有所幫助。另本人菜鳥一枚,如有錯誤,請評論指正。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 1.JQuery 基礎(chǔ) 改變web開發(fā)人員創(chuàng)造搞交互性界面的方式。設(shè)計者無需花費時間糾纏JS復雜的高級特性。 1....
    LaBaby_閱讀 1,274評論 0 1
  • 一、樣式篇 第1章 初識jQuery (1)環(huán)境搭建 進入官方網(wǎng)站獲取最新的版本 http://jquery.co...
    凜0_0閱讀 3,675評論 0 44
  • 本系列適合作為JQ的復習文檔。 本章主要參考來源:綠葉學習網(wǎng) - jQuery入門教程 3 DOM操作 DOM,“...
    琉木_閱讀 330評論 0 0
  • 1.JQuery 基礎(chǔ) 改變web開發(fā)人員創(chuàng)造搞交互性界面的方式。設(shè)計者無需花費時間糾纏JS復雜的高級特性。 1....
    LaBaby_閱讀 1,505評論 0 2
  • 我不想我不想不想長大,長大以后世界就沒童話。小時候,聽著這首歌沒什么多大的感覺,沒想到多年后再聽這首歌,眼角隱隱有...
    阿鹿姑娘閱讀 815評論 4 4

友情鏈接更多精彩內(nèi)容