jquery 節點 詳細操作

2021-10-06 18:48:04 字數 4015 閱讀 2534

jquery 物件與原生物件的區別和相互轉換

// aa:原生物件

var aa = document.getelementbyid("aa");
// bb:jquery物件

var bb = $("#bb")
// 將原生物件用乙個$符號和小括號包裹起來,就轉為jq物件了

var bb = $(bb);
// 在 jq物件後面加乙個中括號,在括號裡面加下標,就轉為了原生物件

var bb = bb[0]
jq選擇器得到的就是jq物件, jq物件可以呼叫jq庫裡面的方法。

原生js獲取的物件就是原生物件,原生物件能使用原生物件的屬性和方法。

原生物件和jq物件可以相互轉換,雙向的。

節點包括哪些:根節點  元素節點 、 文字節點 、 屬性節點 注釋節點 主要是操作:元素節點 文字節點 屬性節點

查詢節點,只需要通過$("選擇器") 就可以輕鬆獲取

列入:

$("p").text(); //獲取純文字

$("p").html(); //獲取p標籤中html**

建立節點:html節點一般就包括節點本身(元素節點)節點的屬性、節點內部的文字、節點內部的子節點、

$(function());

動態新建元素不新增到文件中沒有實際意義,將新建的節點插入到文件中有多個辦法:如下:

兄弟前後關係:after() 、insertafter() 、before() 、insertbefore()

父子關係

向乙個元素的內部的尾部追加內容,容器在前,內容在後,沒有to

例如:該方法查詢ul元素,然後向ul中新增新建的 li 元素

向乙個元素的內部的尾部追加內容,內容在前,容器在後,有to。

列入:該方法新建元素li 然後把li新增到查詢到的ul元素中

向乙個元素的內部的前面新增內容,容器在前,內容在後,沒有to。

prepend()方法將每匹配的元素內部前置要新增的元素,方法如下:

$("target").prepend(element)
列如:

$("ul")prepend("芒果");
該方法將查詢元素ul然後將新建的li元素作為ul子節點,且作為ul的第乙個子節點插入到ul中

向乙個元素的內部的前面新增內容,內容在前,容器在後,有to。

prependto()方法將元素新增到每乙個匹配內容前置,方法如下:

$(element).prependto();
列如:

$("西瓜").prependto("ul");
該方法將新建的元素li插入到查詢到的ul元素中作為ul的第乙個位元組元素

after()方法向匹配的元素後面新增元素,新新增的元素作為目標元素後的緊鄰的兄弟元素。

方法如下:

$(target).after(element);

列如:

$("p").after("新建元素");
方法將查詢節點p,然後把新建的元素新增到span節點後面作為p的兄弟節點

insertafter()方法將新建的元素插入到查詢到的目標元素後,作為目標元素的兄弟節點

方法如下:

$(element).insertafter(target);

列如:

$("insertafter操作

").insertafter("span");

方法將新建的p元素新增到查詢到目標元素span後面,作為目標元素後面的第乙個兄弟節點

before()方法在每乙個匹配的元素之前插入,作為匹配元素的前乙個兄弟節點

方法如下:

$("p").before(element);

列如:

$("p").before("下面是段落");
before方法查詢每個元素p,將新建的span元素插入到元素p之前。作為p的前乙個兄弟節點

insertbefore()方法將新建元素新增到目標元素前,作為目標元素的前乙個兄弟節點

方法如下:

$(element).insertbefore(target);

例如:

$("錨").insertbefore("ul");
insertbefore()新建a元素,將新建的a元素新增到元素ul前,作為ul的前乙個兄弟節點

增加元素的方法前4個是新增到元素內部,後四個是新增到元素外部的操作,有這些方法可以完成任何形式的元素新增

如果想要刪除文件中的某個元素jquery提供了兩種刪除節點的方式:remove()和empty();

remove()方法刪除所有匹配的元素,傳入的引數用於篩選元素,該方法能刪除元素中所有子節點,當匹配的幾點及後代被刪除後,該方法返回值是指向被刪除節點的引用,因此可以使用該引用,再使用這些被刪除的元素。

方法如下:

$(element).remove();

列如:

var span = $("span").remove();

var span.insertafter("ul"); //移除後,原來繫結的事件就沒有了

該示例中先刪除所有的span元素,把刪除後的元素使用$span接收,把刪除後的元素新增到ul後面,作為ul的兄弟節點,該操作相當於將所有的span元素以及後代元素移到ul後面

empty()方法嚴格來講並不是刪除元素,該方法只是清空節點,它能清空元素中的所有子節點,

方法如下:

$(element).empry();

列如:

$("ul li:eq(0)").empty();

//該示例使用 empty() 方法清空ul中第乙個li的文字值

//刪除和清空節點

刪除和清空節點

刪除和清空節點久長時

刪除和清空節點

刪除和清空節點

刪除和清空節點

var mybox;

$("#btnopt").click(function()

});var mybox1;

$("#btnclear").click(function()

})

$(element).clone(); 複製節點方法能夠複製節點元素,並且能夠根據引數決定是否複製節點元素的行為

方法如下:$(element).clone(true);

列如:

//該方法複製ul的第乙個 li 元素,true 引數決定複製時也複製元素行為,當不能複製行為時沒有引數

$("ul li:eq(0)").clone(true);

$(element).repalcewith()

$(element).repalceall()

使用replacewith方法將後面的元素替換前面的元素,包括內容都替換了

replaceall方法使用前面的元素替換後面的所有元素 方法如下:

$(oldelement).replacewith(newelement);

$(newelement).repalceall(oldelement);

例1

:該方法使用strong

元素替換p

元素。

$("p").replacewith("我要加粗");

例2

:該例使用h3

元素替換所有的strong

元素。

$("").repalceall("strong");

jQuery節點操作

動態建立元素 建立出來的元素是乙個jquery物件 1 完整的標籤 動態建立元素 模擬js中的document.createlement 只不過這個方式裡面放的是完整的標籤 例如 建立乙個li標籤 2 html 完整的標籤 新增元素 作用 在被選元素內部的最後乙個子元素 或內容 後面插入內容 存在 ...

jQuery 節點操作

首先建立節點 var button1 建立了乙個按鈕節點 img remove img title 這是建立的節點 刪除 title 這是建立的節點 的img節點 img eq 0 remove 刪除索引為0的img節點 插入節點 p1 after pstr 在節點p1的後面插入pstr節點 p1 ...

jQuery節點操作

jquery節點操作 建立節點 var a baidu 新增節點 a.新增到子元素的最後面 常用 在 div 的內部最後追加乙個 p b.新增到子元素的最前面 div prepend p 在 div 的內部最前面新增乙個 p p prependto div 在 div 的內部最前面新增乙個 p 可以...