當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

05 HTML字符串转换成jQuery对象、绑定数据到元素上

發布時間：2023/12/2 HTML 25 豆豆

生活随笔收集整理的這篇文章主要介紹了 05 HTML字符串转换成jQuery对象、绑定数据到元素上小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1 要求

　　將一段 HTML腳本封裝成一個字符串，將這個字符串轉換成一個jQuery對象；然后將這個jQuery對象添加到指定的元素中去

2 步驟

　　定義字符串

　　　　var str = '<div id="box01">hello world</div>'; //定義一個字符串

　　利用jQuery框架將字符串轉換成jQuery對象

　　　　var box = $(str); // 利用jQuery將字符串轉換成jQuery對象

　　打印輸出轉換得到的結果，判斷是否轉換成功

　　　　console.log(box); // 打印轉換過來的jQuery對象

　　獲取轉換過來的jQuery對象中的內容

　　　　console.log(box.html()); ? // 獲取轉化過來的jQuery對象中的內容

　　將裝換過來的jQuery對象添加到指定的元素中去

　　　　$("#parent").append(box); ? // 將轉換過來的jQuery對象添加到指定元素中去

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <meta name="description" content="" /> 6 <meta name="Keywords" content="" /> 7 <title></title> 8 9 <script type="text/javascript" src="../js/test.js"></script> 10 <script type="text/javascript" src="../js/jquery-1.4.3.js"></script> 11 12  13 <style type="text/css"> 14 * { 15 margin: 0px; 16 padding: 0px; 17 } 18 19 #parent { 20 width: 300px; 21 height: 300px; 22 background-color: skyblue; 23 } 24 </style> 25 <script type="text/javascript"> 26 $(function() { 27 var str = '<div id="box01">hello world</div>'; //定義一個字符串 28 var box = $(str); // 利用jQuery將字符串轉換成jQuery對象 29 console.log(box); // 打印轉換過來的jQuery對象 30 console.log(box.html()); // 獲取轉化過來的jQuery對象中的內容 31 $("#parent").append(box); // 將轉換過來的jQuery對象添加到指定元素中去 32 }); 33 </script> 34 </head> 35 36 <body> 37 <div id="parent"> 38 39 </div> 40 41 </body> 42 </html> View Code

3 js代碼執行順序

　　直接寫的js代碼按照順序執行

　　綁定的js代碼事件觸發時執行

　　$(funcgion(）{})；這里面的js代碼是在body加載完成后才執行

4 綁定數據到元素

　　4.1 要求：將某些數據綁定到指定元素

　　4.2 實現：利用jQuery對象的data方法

　　　　$("#box01").data("name", "warrior");?

　　　　　　name　　綁定數據的名稱

　　　　　　warrior　　被綁定的數據

　　　　console.log($("#box01").data("name"));

　　　　　　name　　之前綁定好的數據的名稱

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <meta name="description" content="" /> 6 <meta name="Keywords" content="" /> 7 <title></title> 8 9 <script type="text/javascript" src="../js/test.js"></script> 10 <script type="text/javascript" src="../js/jquery-1.4.3.js"></script> 11 12  13 <style type="text/css"> 14 * { 15 margin: 0px; 16 padding: 0px; 17 } 18 19 #parent { 20 width: 300px; 21 height: 300px; 22 background-color: skyblue; 23 } 24 </style> 25 <script type="text/javascript"> 26 $(function() { 27 // 將數據綁定到元素上 28 $("#box01").data("name", "warrior"); 29 $("#box01").data("gender", "Male"); 30 31 // 獲取之前給元素綁定的數據 32 console.log($("#box01").data("name")); 33 console.log($("#box01").data("gender")); 34 }); 35 </script> 36 </head> 37 38 <body> 39 <div id="box01"> 40 41 </div> 42 43 </body> 44 </html> View Code

轉載于:https://www.cnblogs.com/NeverCtrl-C/p/6956536.html

總結

以上是生活随笔為你收集整理的05 HTML字符串转换成jQuery对象、绑定数据到元素上的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：盛事通如何绑定银行卡
下一篇：安卓欢迎界面和activity之间的跳转