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><!-- 給瀏覽器解析，我這個文檔是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將字符串轉換成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>
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><!-- 給瀏覽器解析，我這個文檔是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 // 將數據綁定到元素上 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>