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>