jQuery replaceWith()方法
關於此replaceWith()方法的基本概念用法可以參閱jQuery replaceWith()一章節。
下面再來通過程式碼例項演示一下它的一些用法。
程式碼例項:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#bt").click(function(){ $("p").replaceWith("<div>div元素</div>"); }) }) </script> </head> <body> <p>p元素</p> <p>p元素</p> <p>p元素</p> <input type="button" id="bt" value="檢視效果"/> </body> </html>
上面的程式碼replaceWith()方法的基本用法,非常的簡單,沒必要多做介紹。可能在實際應用中還會遇到這樣的類似情況,比如一些雙語的頁面,也可以實現此方法實現相關的替換功能。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script type="text/javascript"> var trans={ '螞蟻部落':'softwhy.com', '地址':'address' }; $(document).ready(function(){ $("#bt").click(function(){ $("div").each(function(index,element){ $(this).replaceWith("<div>"+trans[$(this).html()]+"</div>"); }); }) }) </script> </head> <body> <div>螞蟻部落</div> <div>地址</div> <input type="button" id="bt" value="檢視效果"/> </body> </html>
上面的程式碼實現了基本的翻譯功能,非常的簡單這裡就不多介紹了。
相關文章
- jQuery replaceWith()jQuery
- jQuery原始碼解析之replaceWith()/unwrap()jQuery原始碼
- jQuery方法wrapAll()jQuery
- jQuery 事件方法jQuery事件
- jQuery 效果方法jQuery
- jQuery AJAX 方法jQuery
- jQuery Callback 方法jQuery
- jQuery css() 方法jQueryCSS
- jquery filter()方法jQueryFilter
- jQuery css()方法jQueryCSS
- jQuery position()方法jQuery
- jQuery 篩選方法jQuery
- jQuery HTML / CSS 方法jQueryHTMLCSS
- jQuery 遍歷方法jQuery
- jQuery 雜項方法jQuery
- jQuery 動畫 - animate() 方法jQuery動畫
- jQuery效果-animate()方法jQuery
- Jquery--工具方法jQuery
- jQuery ajax - serializeArray() 方法jQuery
- jquery中on方法原理分析jQuery
- jQuery Validate optional()方法jQuery
- JQuery常用方法一覽jQuery
- jQuery – AJAX load() 方法jQuery
- jquery方法操作iframe元素jQuery
- jQuery datatable 使用方法jQuery
- jQuery遍歷-slice()方法jQuery
- Jquery datatables 使用方法jQuery
- jQuery .click()方法傳參jQuery
- jquery工具方法總結jQuery
- jQuery方法原始碼定位簡單方法jQuery原始碼
- JQuery基本知識彙總;JQuery常用方法;淺入瞭解JQueryjQuery
- jQuery原始碼閱讀(十)---jQuery靜態方法分析jQuery原始碼
- jQuery Mobile中jQuery.mobile.changePage方法使用詳解jQuery
- jQuery中過濾方法slice()方法如何使用?jQuery
- jQuery如何使用過濾not()方法jQuery
- jQuery之empty()與remove()方法jQueryREM
- jQuery – AJAX get() 和 post() 方法jQuery
- jQuery 動作/方法連結jQuery