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><!--  给浏览器解析，我这个文档是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>

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><!--  给浏览器解析，我这个文档是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>