jQuery wrap()
此方法將匹配元素集合中的每個元素周圍包裹一個HTML結構。
語法結構一:
[JavaScript] 純文字檢視 複製程式碼.wrap(wrappingElement)
引數解析:
wrappingElement:一個選擇器,元素,HTML字串,或jQuery物件指定的html結構環繞包裹的匹配元素。 當傳遞一個包含多個元素jQuery集合, 或選擇器匹配多個元素時, 第一元素將被使用。
jQuery1.0版本新增。
語法結構二:
[JavaScript] 純文字檢視 複製程式碼.wrap(function(index))
引數解析:
function:返回用於包裹匹配元素內容的函式。index:可選,當前元素在匹配元素集合中的索引(從0開始)。函式內的 this指向當前元素。
jQuery1.4版本新增。
程式碼例項:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> div { width:200px; height:200px; border:1px solid blue; margin-top:10px; } </style> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#bt").click(function () { var odiv = document.getElementById("ant"); $("p").wrap(odiv); }); }); </script> </head> <body> <p>螞蟻部落</p> <div id="ant"></div> <input type="button" id="bt" value="檢視演示" /> </body> </html>
在p元素外面再巢狀一層div元素。
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> div { width:200px; height:200px; border:1px solid blue; margin-top:10px; } </style> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#bt").click(function () { $("p").wrap("<div/>"); }); }); </script> </head> <body> <p>螞蟻部落</p> <div id="ant"></div> <input type="button" id="bt" value="檢視演示" /> </body> </html>
功能與上一個程式碼相同,無非是引數的型別不同而已。
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> div { width:200px; height:200px; border:1px solid blue; margin-top:10px; } </style> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#bt").click(function () { $("p").wrap(function () { return "<div/>"; }); }); }); </script> </head> <body> <p>螞蟻部落</p> <div id="ant"></div> <input type="button" id="bt" value="檢視演示" /> </body> </html>
通過回撥函式返回外層包裹的內容。
相關文章
- wrap devicedev
- Flutter Wrap & ChipFlutter
- Oracle Wrap ProcedureOracle
- tcp_wrapTCP
- Oracle工具——WRAPOracle
- CSS overflow-wrapCSS
- CSS flex-wrapCSSFlex
- oracle 9i wrap加密,需要指定edubug=wrap_new_sqlOracle加密SQL
- [CSS] text-wrap: balanceCSS
- CSS3 overflow-wrapCSSS3
- oracle程式碼加密 wrap方法Oracle加密
- CSS文字:word-wrap(轉)CSS
- oracle wrap加密包破解問題Oracle加密
- How to set word-wrap in VSCode?VSCode
- Flutter 佈局控制元件篇-->Wrap、FlowFlutter控制元件
- Flutter 佈局(九)- Flow、Table、Wrap詳解Flutter
- tolua之wrap檔案的原理與使用
- Oracle 儲存過程加密之wrap工具Oracle儲存過程加密
- nutz框架使用記錄之Cnd.wrap框架
- 使用Wrap加密,保護Oracle程式原始碼加密Oracle原始碼
- 關於ByteBuffer.wrap(new Byte[]);
- word-break 和 word-wrap 的區別
- word-wrap同word-break的區別
- Intellij IDEA 的 Soft-wrap 是什麼IntelliJIdea
- 區分 word-wrap/word-break/white-space
- 初略講解Flutter的Wrap和Flow(流式佈局)Flutter
- 用word-wrap解決文字溢位的問題
- 9201中文環境執行WRAP報錯kgepop
- jackson學習之四:WRAP_ROOT_VALUE(root物件)物件
- 徹底搞懂word-break、word-wrap、white-space
- 影片直播系統原始碼,flutter Wrap 自動換行元件原始碼Flutter元件
- 用wrap加密一個package異常的解決過程加密Package
- 直播平臺軟體開發,flutter Wrap 自動換行元件Flutter元件
- jQuery初探:自制jQueryjQuery
- 為什麼你的自定義View wrap_content不起作用?View
- 我的’jQuery’和jQueryjQuery
- 我的''jQuery''和jQueryjQuery
- 【Jquery】jquery 基本的動畫jQuery動畫