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 可以...