jQuery before()
此方法在匹配元素集合中的每個元素前面(外部)插入指定內容,作為其兄弟節點。
語法結構一:
[JavaScript] 純文字檢視 複製程式碼.before(content [, content ])
引數解析:
(1).content:要被插入的內容,可以是DOM元素,文字節點,元素和文字節點的陣列,HTML字串,或者jQuery物件。
(2).content:可選,要被插入的內容,可以是DOM元素,文字節點,元素和文字節點的陣列,HTML字串,或者jQuery物件。
jQuery1.0版本新增。
語法結構二:
[] 純文字檢視 複製程式碼.before(function(index, oldHtml))
引數解析:
function:返回被插入內容的函式。index:可選,當前元素在匹配元素集合中的索引,oldHtml:可選,當前元素原來的HTML內容。函式中的this指向當前元素。
jQuery1.10版本新增。
程式碼例項:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> div{ height: 150px; width: 150px; background-color: green; margin-top:10px; } p { height:150px; width:150px; background-color:#ccc; margin-top:10px; } </style> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#bt").click(function () { $("div").before($("p")); }) }) </script> </head> <body> <div></div> <p></p> <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{ height: 150px; width: 150px; background-color: green; margin-top:10px; } p { height:150px; width:150px; background-color:#ccc; margin-top:10px; } </style> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#bt").click(function () { $("div").before($("p")); }) }) </script> </head> <body> <div></div> <div></div> <p></p> <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{ height: 150px; width: 150px; background-color: green; margin-top:10px; } p { height:150px; width:150px; background-color:#ccc; margin-top:10px; } </style> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#bt").click(function () { $("div").before($("p"), $("span")); }) }) </script> </head> <body> <div></div> <p></p> <span>螞蟻部落</span> <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{ height: 150px; width: 150px; background-color: green; margin-top:10px; } p { height:150px; width:150px; background-color:#ccc; margin-top:10px; } </style> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#bt").click(function () { $("div").before(function () { return $("p") }); }) }) </script> </head> <body> <div></div> <p></p> <input type="button" id="bt" value="檢視演示" /> </body> </html>
通過回撥函式返回要被插入的內容。
相關文章
- jQuery insertBefore()jQuery
- jquery中append、prepend, before和after方法的區別jQueryAPP
- [CSS] 偽元素和偽類,::before 和 :before 區別CSS
- JavaScript insertBefore()JavaScript
- javascript beforeprint事件JavaScript事件
- Before的翻譯
- JUnit4 中@AfterClass @BeforeClass @after @before的區別對比
- CSS 巧用 :before和:afterCSS
- CSS巧用:before和:afterCSS
- css偽元素(before與after)CSS
- 偽元素 before 和 after 初探
- javascript onbeforeunload事件用法JavaScript事件
- 理解偽元素 :before 和 :after
- Get n days before now
- Java中單元測試中:@BeforeClass,@Before,@Test,@After,@AfterClass中的問題詳解Java
- before-after-hook鉤子函式Hook函式
- CSS E::before 偽元素選擇符CSS
- Webpack之before快速建立介面(框架快速使用)Web框架
- Java併發(2)- 聊聊happens-beforeJavaAPP
- Vue路由鉤子 afterEach beforeEach區別Vue路由
- css當中:before和:after選擇器CSS
- ::after和::before 要配合content屬性
- $.ajax的beforeSend,success, complete,error例子Error
- android動畫 fillBefore 和 fillAfter的用法Android動畫
- BEFORE觸發器修正資料錯誤觸發器
- QWidget: Must construct a QApplication before a QPaintDeviceStructAPPAIdev
- jQuery初探:自制jQueryjQuery
- flask 中的before_request 與 after_requFlask
- CSS-選擇器15-:before與:afterCSS
- js如何控制css偽元素內容(before,after)JSCSS
- css中的:before與:after的簡單使用CSS
- 【Python】UnboundLocalError: local variable 'l' referenced before assignmentPythonError
- idea之【Before launch】選項的含義Idea
- 我的’jQuery’和jQueryjQuery
- 我的''jQuery''和jQueryjQuery
- 【Jquery】jquery 基本的動畫jQuery動畫
- 【Jquery】jquery 自定義動畫jQuery動畫
- 瞭解css中偽元素 before和after的用法CSS