05 HTML字符串转换成jQuery对象、绑定数据到元素上
?
1 要求
將一段 HTML腳本 封裝成一個字符串，將這個字符串轉(zhuǎn)換成一個jQuery對象；然后將這個jQuery對象添加到指定的元素中去
2 步驟
定義字符串
var str = '<div id="box01">hello world</div>'; //定義一個字符串
利用jQuery框架將字符串轉(zhuǎn)換成jQuery對象
var box = $(str); // 利用jQuery將字符串轉(zhuǎn)換成jQuery對象
打印輸出轉(zhuǎn)換得到的結果，判斷是否轉(zhuǎn)換成功
console.log(box); // 打印轉(zhuǎn)換過來的jQuery對象
獲取轉(zhuǎn)換過來的jQuery對象中的內(nèi)容
console.log(box.html()); ? // 獲取轉(zhuǎn)化過來的jQuery對象中的內(nèi)容
將裝換過來的jQuery對象添加到指定的元素中去
$("#parent").append(box); ? // 將轉(zhuǎn)換過來的jQuery對象添加到指定元素中去
1 <!DOCTYPE html><!-- 給瀏覽器解析，我這個文檔是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 <!-- <link rel="shortcut icon" href="../img/study04.ico"> --> 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將字符串轉(zhuǎn)換成jQuery對象 29 console.log(box); // 打印轉(zhuǎn)換過來的jQuery對象 30 console.log(box.html()); // 獲取轉(zhuǎn)化過來的jQuery對象中的內(nèi)容 31 $("#parent").append(box); // 將轉(zhuǎn)換過來的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代碼執(zhí)行順序
直接寫的js代碼按照順序執(zhí)行
綁定的js代碼事件觸發(fā)時執(zhí)行
$(funcgion(）{})； 這里面的js代碼是在body加載完成后才執(zhí)行
?
4 綁定數(shù)據(jù)到元素
4.1 要求：將某些數(shù)據(jù)綁定到指定元素
4.2 實現(xiàn)：利用jQuery對象的data方法
$("#box01").data("name", "warrior");?
name 綁定數(shù)據(jù)的名稱
warrior 被綁定的數(shù)據(jù)
console.log($("#box01").data("name"));
name 之前綁定好的數(shù)據(jù)的名稱
1 <!DOCTYPE html><!-- 給瀏覽器解析，我這個文檔是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 <!-- <link rel="shortcut icon" href="../img/study04.ico"> --> 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 // 將數(shù)據(jù)綁定到元素上 28 $("#box01").data("name", "warrior"); 29 $("#box01").data("gender", "Male"); 30 31 // 獲取之前給元素綁定的數(shù)據(jù) 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?
轉(zhuǎn)載于:https://www.cnblogs.com/NeverCtrl-C/p/6956536.html
總結
以上是生活随笔為你收集整理的05 HTML字符串转换成jQuery对象、绑定数据到元素上的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 盛事通如何绑定银行卡
- 下一篇： 前端HTML介绍