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对象添加到指定元素中去

 <!DOCTYPE html><!--  给浏览器解析，我这个文档是html文档 -->

 <html>

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <meta name="description" content="" />

     <meta name="Keywords" content="" />

     <title></title>

     <script type="text/javascript" src="../js/test.js"></script>

     <script type="text/javascript" src="../js/jquery-1.4.3.js"></script>

     <!-- <link rel="shortcut icon" href="../img/study04.ico"> -->

     <style type="text/css">

         * {

             margin: 0px;

             padding: 0px;

         }

         #parent {

             width: 300px;

             height: 300px;

             background-color: skyblue;

         }

     </style>

     <script type="text/javascript">

         $(function() {

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

             var box = $(str); // 利用jQuery将字符串转换成jQuery对象

             console.log(box); // 打印转换过来的jQuery对象

             console.log(box.html());   // 获取转化过来的jQuery对象中的内容

             $("#parent").append(box);   // 将转换过来的jQuery对象添加到指定元素中去

         });

     </script>

 </head>

 <body>

     <div id="parent">

     </div>

 </body>

 </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　　之前绑定好的数据的名称

 <!DOCTYPE html><!--  给浏览器解析，我这个文档是html文档 -->

 <html>

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <meta name="description" content="" />

     <meta name="Keywords" content="" />

     <title></title>

     <script type="text/javascript" src="../js/test.js"></script>

     <script type="text/javascript" src="../js/jquery-1.4.3.js"></script>

     <!-- <link rel="shortcut icon" href="../img/study04.ico"> -->

     <style type="text/css">

         * {

             margin: 0px;

             padding: 0px;

         }

         #parent {

             width: 300px;

             height: 300px;

             background-color: skyblue;

         }

     </style>

     <script type="text/javascript">

         $(function() {

             // 将数据绑定到元素上

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

             $("#box01").data("gender", "Male");

             // 获取之前给元素绑定的数据

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

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

         });

     </script>

 </head>

 <body>

     <div id="box01">

     </div>

 </body>

 </html>