014_包裹元素
1. wrap()方法
1.1. wrap(wrapper)方法把每一個匹配元素分別放置在html元素中(一個匹配元素對應一個html父元素)。
1.2. 語法
$(selector).wrap(wrapper)1.3. 參數
1.4. 使用函數來包裹元素
1.4.1. wrap(function(index, origHtml))方法使用函數把所有匹配元素中指定下標的元素放置在html元素中。
1.4.2. 語法
$(selector).wrap(function(index, origHtml))1.4.3. 參數
1.5. wrap()方法使用已有的元素包裹匹配元素, 會復制已有元素副本來包裹匹配元素, 已有元素不動。
2. unwrap()方法
2.1. unwrap()方法刪除每一個匹配元素的父元素。
2.2. 語法
$(selector).unwrap()2.3. 例子
2.3.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>wrap包裹元素和unwrap每一個匹配元素的父元素</title><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){$('#btn1').click(function(){$('p').wrap('<div style="background-color: red; width: 600px; height: 120px;"></div>');});$('#btn2').click(function(){$('p').unwrap();});$('#btn3').click(function(){$('p').wrap(function(index, origHtml){return $('h2');});});});</script><style type="text/css">p {background-color: pink;padding-left: 50px; width: 500px;height: 100px;}</style></head><body><h2 style="background-color: green; width: 600px; height: 180px;">wrap包裹元素和unwrap每一個匹配元素的父元素</h2><p>wrap(wrapper)方法把每一個匹配元素分別放置在html元素中(一個匹配元素對應一個html父元素)。</p><p>wrap(function(index, origHtml))方法使用函數把所有匹配元素中指定下標的元素放置在html元素中。</p><br /><button id="btn1">包裹元素</button> <button id="btn2">刪除被選元素的父元素</button><button id="btn3">使用函數來包裹元素</button></body> </html>2.3.2. 運行效果圖
2.3.3. 點擊包裹元素按鈕
2.3.4. 點擊刪除被選元素的父元素按鈕
2.3.5. 點擊使用函數來包裹元素按鈕
3. wrapAll()方法
3.1. wrapAll(wrapper)方法在指定的html元素中放置所有匹配元素。
3.2. 語法
$(selector).wrapAll(wrapper)3.3. 參數
3.4. 例子
3.4.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>wrapAll包裹所有匹配元素</title><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){$('#btn1').click(function(index, origHtml){$('p').wrapAll('<div style="background-color: red; width: 600px; height: 150px;"></div>');});$('#btn2').click(function(index, origHtml){$('p').wrapAll($('h2'));});});</script><style type="text/css">p {background-color: pink; width: 500px;}</style></head><body><h2 style="background-color: red; width: 600px; height: 180px;">wrapAll包裹所有匹配元素</h2><p>wrapAll(wrapper)方法在指定的html元素中放置所有匹配元素。</p><p>語法: $(selector).wrapAll(wrapper)</p><br /><br /><button id="btn1">包裹所有匹配元素</button> <button id="btn2">已有元素包裹</button></body> </html>3.4.2. 運行效果圖
3.4.3. 點擊包裹所有匹配元素按鈕
3.4.4. 重新運行, 點擊已有元素包裹按鈕
4. wrapInner()方法
4.1. wrapInner(wrapper)方法使用指定的html元素, 來包裹每一個匹配元素中的所有內容(inner html)。
4.2. 語法
$(selector).wrapInner(wrapper)4.3. 參數
4.4. 使用函數包裹內容
4.4.1. wrapInner(function(index, origHtml))方法使用函數, 來規定指定的html元素, 包裹所有匹配元素中指定下標元素的所有內容(inner html)。
4.4.2. 語法
$(selector).wrapInner(function(index, origHtml))4.4.3. 參數
4.4. 例子
4.4.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>wrapInner包裹內容</title><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){$('#btn1').click(function(){$('p').wrapInner('<span></span>');});$('#btn2').click(function(){$('p').wrapInner(function(index, origHtml){if(index == 0) return '<span style="background-color: green;"></span>';});});});</script><style type="text/css">p {background-color: pink;padding-left: 50px; width: 500px;height: 80px;}span {background-color: red;}</style></head><body><p>wrapInner(wrapper)方法使用指定的html元素, 來包裹每一個匹配元素中的所有內容(inner html)。</p><p>wrapInner(function(index, origHtml))方法使用函數, 來規定指定的html元素, 包裹所有匹配元素中指定下標元素的所有內容(inner html)。</p><button id="btn1">包裹內容</button> <button id="btn2">使用函數包裹內容</button></body> </html>4.4.2.?運行效果圖
4.4.3.?點擊包裹內容按鈕
4.4.4.?點擊使用函數包裹內容按鈕
《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀總結
- 上一篇： 013_替换元素
- 下一篇： 004_JavaScript版本