HTML 學習筆記 JQuery（DOM 操作2）

2022-06-25 21:00:13 字數 4165 閱讀 5302

接著上一節的將，這一節從複製節點講起

繼續使用之前的例子 如果單擊元素後 需要在複製乙個元素，可以使用clone()方法完成。全部**如下

<


html


>


<


head


>


<


meta 


charset


="utf-8"


>


<


title


>


title


>


<


script 


src="../js/jquery-2.1.1.min.js"


>


script


>


head


>


<


body


>


<


p title


="選擇你喜歡的水果"


>你最喜歡的水果?


p>


<


ul>


<


li title


="蘋果"


>蘋果


li>


<


li title


="橘子"


>橘子


li>


<


li title


="菠蘿"


>菠蘿


li>


ul>


<


script


>$("


ul li


").click(


function


() )


script


>


body


>


html


>
複製節點後，被複製的新元素並不具備任何行為，如果需要新元素也具有複製功能 可以修改以上**成為下面的**

$("ul li").click(function() )
在clone()方法中傳入了乙個true 他的含義是複製元素的同時複製元素中所繫結的事件，因此該元素也同樣具有複製功能

如果替換某個節點，jquery提供了相應的方法 即replacewith()和replaceall()。

replacewith()方法的作用是將所有的匹配元素替換成指定的html或者dom元素。

例如將上例中的你最喜歡的水果？

替換一下

$("p").replacewith("<


strong


>你最喜歡的水果是什麼呢


strong


>");
也可以使用replaceall()來實現，該方法於replacewith()方法的作用相同，只是顛倒了replacewith()操作

$("p").replacewith("<


strong


>你最喜歡的水果是什麼呢


strong


>


");//下面的**和上面是一樣的


$("<


strong


>你最喜歡的水果是什麼呢


strong


>").replaceall("p");


注意 如果在替換之前 已經為元素繫結事件，替換後原先繫結的事件將會與被替換的元素一起消失 需要在新元素上重新繫結事件
如果要將某個節點用其他標記包裹起來，可以使用wrap(),該方法對於需要在文件中插入額外的結構化標記非常有用。而且他不會破壞原始文件的語義。

$("strong").wrap("<


b>一二


b>")
包裹節點 還有其他兩個方法

wrapall()

該方法用於將所有匹配的元素用乙個元素來包裹（匹配的所有元素放在一起被包裹一次），它不同於wrap()方法。wrap()方法是將所有的元素進行單獨包裹，就是每個匹配的元素都會被包裹一次。

<


p title


="選擇你喜歡的水果"


>你最喜歡的水果?


p>


<


p title


="選擇你最喜歡的水果"


>你的最愛


p>
執行一下**

$("p").wrap("<


b>


b>");
會變成一下效果

<


b><


p>你最喜歡的水果


p>


b>


<


b><


p>你的最愛


p>


b>
而使用wrapall()呢

$("p").wrapall("<


b>


b>");
是這樣的效果

<


b>


<


p title


="選擇你喜歡的水果"


>你最喜歡的水果?


p>


<


p title


="選擇你最喜歡的水果"


>你的最愛


p>


b>
wrapinner()方法

該方法是將每乙個匹配的元素的字內容(包括文字節點)用其他結構化的標記包裹起來

例如

$("p").wrapinner("")
執行後是這樣的

<


p title


="選擇你喜歡的水果"


><


b>你最喜歡的水果?


b>


p>
效果

1.獲取屬性和設定屬相

在jquery中使用attr()方法來獲取屬性 使用removeattr()來刪除屬性

//獲取屬性 移除屬性


alert($("p").attr("title"));


if ($("p").length > 0) 


alert($("p").attr("title") + "哈哈哈");//undefined哈哈哈哈


//設定屬性


$("p").attr("title","我是新的title");


alert($("p").attr("title"));//我是新的title
1.獲採樣式和設定樣式

html**如下

<


p class


="myclass"


title


="選擇你喜歡的水果"


>你最喜歡的水果?


p>
css 樣式表

<


style


>


.addstyle 


style


>
給p元素新增樣式

//給p元素新增樣式


$("p").addclass("addstyle");
效果

移除樣式

$("p").removeclass("addstyle");
效果

切換樣式

jquery中有一種方法toggle() **如下

$("p").toggle(function() ,function() );
toggle()方法此處的作用就是交替之行**3和**4兩個函式。在這種情況下toggle()方法主要是控制行為上的重複切換

此外jquery也提供了toggleclass()方法控制樣式上的重複切換 如果類名存在久刪除它 如果類名不存在就新增它.

對p元素進行操作

$("p").click(function())
當單擊p元素後 會變成這樣

<


p class


="myclass addstyle"


title


="選擇你喜歡的水果"


>你最喜歡的水果?


p>
在此點選會變成原來的樣子

<


p class


="myclass"


title


="選擇你喜歡的水果"


>你最喜歡的水果?


p>
就這樣不斷的切換

判斷是否還有某個樣式使用方法hasclass("yangshi");

HTML學習筆記

2004 9 9 星期四 陰 hello world 整個頁面分成三部分 1 一行包括html版本資訊的內容 2 報頭申明區域 3 頁面主要部分，包括頁面的實際內容。2.基本的html標記 答 1 headings 標題 2 paragraphs 段落 this is a paragraph 3 l...

HTML學習筆記

html 是一種超文字標記語言，它是由標籤組成的。html 中的資料都封裝在標籤中，通過對標籤中的屬性值的改變來實現對封裝內資料進行操作。html規範格式 首先要確定html 的 範圍 在該範圍中可以定義兩個部分，乙個是頭乙個是體。這中間寫網頁顯示的資料 標籤對資料進行封裝那麼就有開始標籤和結束標籤...

學習html筆記

簡介 基礎 1 html鏈結是通過標籤 來定義的.這是乙個鏈結 href是屬性 2 html 影象是通過標籤 屬性 html 元素可以設定 屬性 屬性可以在元素中新增 附加資訊about an element 屬性一般描述於 開始標籤 屬性總是以名稱 值對的形式出現，比如 name value th...