jQuery中的DOM操作學習筆記

2021-07-12 07:37:09 字數 3578 閱讀 2085

首先構建乙個網頁，因為每張網頁都能用dom表示出來，每乙份dom都可以看作乙個dom樹。

//省略其他**


title = "選擇你最喜歡的水果">你最喜歡的水果是？p>


title="蘋果">蘋果li>


title="橘子">橘子li>


title="菠蘿">菠蘿li>


//省略其他**
var


$li = $("ul li:eq(1)"); // 獲取ul裡第二個節點


var$li_txt = $li.text(); //獲取元素的文字內容
使用attr()獲取各種屬性的值，引數可以是乙個也可以是兩個，當乙個時，是要查詢的屬性名字。

var


$para = $("p");


var$p_txt = $para.attr("title"); //獲取元素節點屬性title
$(html)方法會根據傳入的html標記字串，建立乙個dom物件，並將這個dom物件包裝成乙個jquery物件後返回。

var $li = $(


""); //建立元素


$(
var $li = $(


"香蕉");


$(
建立屬性節點與建立文字節點類似，也是直接在建立節點時一起建立。

var $li = $(


"香蕉");


$(
(「a

」).a

ppen

d(「b

」)的顛

倒，將a

追加到b

。pre

pend

(),向

每個匹配

的元素內

部前置內

容。prepend(),向每個匹配的元素內部前置內容。(「p」).prepend(「你好「)，結果：

你好我想

prependto(),顛倒prepend()。

after(),在每個匹配的元素之後插入內容。$(「p」).after(「「),結果：

。

insertafter(),顛倒after()。

before()，在每個匹配的元素之前插入內容。

insertbefore()，顛倒before()。

這些插入節點的方法不僅能將新建立的dom元素插入到文件中，也能對原來的dom元素進行移動。

remove()，刪除所有的匹配元素，該節點的所有後代節點全部被刪除，返回值是乙個指向已被刪除的節點的引用，因此以後可以繼續使用。

var $li = $(


"ul li:eq(1)").remove(); //獲取第二個li節點，將他從網頁中刪除


$("ul li").remove("li[title!=菠蘿]")； //將title不等於菠蘿的li元素刪除
detach()，也是從dom中去掉所有匹配的元素，但需要注意的是，這個方法不會把匹配的元素從jquery物件中刪除，因而可以在將來再使用這些匹配的元素。

$("ul li").click(function


())var $li = $("ul li:eq(1)").detach();
empty()，清空節點，他能清空元素中的所有後代節點，是清空元素裡的所有內容。

$(ul li).click(function


())
在clone（）中傳入乙個引數true，表示複製元素的同時複製元素所繫結的事件。

replacewith(),將所有匹配的元素都替換成指定的html或者dom。

replaceall()，顛倒的replacewith()。

注意：如果元素已經繫結了事件，替換之後原先繫結的事件將會消失。

wrap()，將某個節點用其他標記包裹起來。

$("strong").wrap("


b>"); //


strong>


b>


strong>


b>
wrapall()，將所有匹配的元素用乙個元素來包裹，如果被包裹的元素間有其他元素，其他元素會被放到包裹元素之後。wrap()是將所有元素單獨包裹。

$("strong").wrapall("


b>"); //


strong>


strong>


b>
wrapinner()，將每乙個匹配元素的子元素（包括文字節點）用其他結構化的標記包裹起來。

$(


"p").attr("title","one"); //設定單個的屬性值


$("p").attr(); //設定多個屬性
removeattr(),刪除屬性。

$(


"p").addclass("another"); //給p元素追加「another」類，不會覆蓋原來的class屬性，變為兩個屬性值
css有如下兩條規則：

（1）、如果給乙個元素新增多個class值，那麼久相當於合併了他們的樣式；

（2）、如果有不同的class設定了同一樣式屬性，則後者覆蓋前者。

$(


"p").removeclass("high"); //移除p元素中值為high的class


$("p").remove("high another"); //移除多個class名


$("p").remove(); //移除p元素的所有class


$togglebtn.toggle(function


()，function


())
如果元素原來是顯示的，則隱藏他；如果元素原來是隱藏的，則顯示他。

hasclass()，判斷元素中是否含有某個class，如果有則返回true，否則返回false。

1、html()，讀取或設定某個元素的html內容，類似於innerhtml屬性；

2、text()，讀取或設定某個元素中的文字內容，類似於innertext屬性；

3、val()，獲取和設定元素的值，類似於value屬性。

$("#address").focus(function


()});


$("address").blur(function


()});
val()能使select、checkbox、radio相應的選項被選中。

childern()，獲取匹配元素的子元素集合（不考慮其他後代元素）；

next()，獲取匹配元素後面緊臨的同輩元素；

prev()，獲取匹配元素前面緊鄰的同輩元素；

siblings()，取得匹配元素前後所有的同輩元素；

closest()，取得最近的匹配元素，首先檢查當前元素是否匹配，如果匹配則直接返回元素本身，如果不匹配則向上查詢父元素，逐級向上直到找到匹配選擇器的元素。如果什麼都沒都沒找到，返回乙個空jquery物件。

jQuery中的DOM操作

三 jquery中的dom操作 3.2.1 查詢節點 1.查詢元素節點 var li ul li eq 1 獲取裡第2個節點 var li text li.text 獲取第二個元素節點的文字內容 2.查詢屬性節點 var para p 獲取節點 var p text para.attr title ...

jQuery中的DOM操作

jquery中的dom操作 dom分為3個部分，dom core html dom,css dom 1,查詢節點 查詢元素節點可以用 選擇器，find 和children 方法。查詢屬性節點可以用attr 方法,也可以用 的屬性過濾選擇器 eg div tittle 2,建立節點 3，插入節點 3....

jQuery中的DOM操作

dom操作又叫節點操作,標籤操作,元素操作 再選中元素的裡邊的最後邊 叫做建立乙個元素,jquery物件 其實就是在原有標籤的基礎上做了一些改造 prepend div prepend div prepend 生成乙個jquery物件p prependto 給div裡邊的最前邊加乙個p標籤 prep...