本文實例講述了JQuery包裹DOM節點的方法。分享給大家供大家參考。具體分析如下:
如果要將某個節點用其他標記包裹起來,JQuery提供了相應的方法,即wrap(),該方法對於需要在文檔中插入額外的結構化標記非常有用,而且它不會破壞原始文檔的語義。
wrap()
得到的結果如下:
<strong> <li id="li_1" title="PHP编程">简单易懂的PHP编程</li> </strong>
包裹節點操作還有其他兩個方法,即wrapAll()和wrapInner()。
wrapAll()方法
該方法會將所有符合的元素用一個元素來包裹。它不同於wrap()方法,wrap()方法是將所有的元素進行單獨的包裹。 JQuery程式碼如下:
使用wrapAll()方法包覆後的HTML是這樣的:
<strong> <li class="li_2" title="C编程">简单易懂的C编程</li> <li class="li_2" title="JavaScript编程">简单易懂的JavaScript编程</li> </strong>
wrapInner()方法
該方法將每一個匹配的元素的子內容(包括文字節點)用其他結構化的標記包裹起來。
運行程式碼後,發現標籤內的內容被一對
<li id="li_4" title="JQuery"> <strong>简单易懂的JQuery编程</strong> </li>
本例的JQuery程式碼如下:
<script type="text/javascript"> //<![CDATA[ $(function(){ $("#btn_1").click(function(){ //用<strong>元素把<li>元素包裹起来 $("#li_1").wrap("<strong></strong>"); }) $("#btn_2").click(function(){ $(".li_2").wrapAll("<strong></strong>"); }) $("#btn_3").click(function(){ $("#li_4").wrapInner("<strong></strong>"); }) }); //]]> </script>
希望本文所述對大家的jQuery程式設計有所幫助。