代码改变世界

比较javascript中的appendChild()和jquery中的append() 才知道什么叫jqery真牛

2015-11-30 21:25  小兵故事  阅读(3288)  评论(0)    收藏  举报 
 1 <!doctype html>
 2 <html>
 3     <head>
 4         <!--声明当前页面编码集（中文编码《gbk,gb2312》,国际编码《utf-8》）-->
 5         <meta http-equiv="Content-Type" content="text/html";charset="utf-8">
 6     
 7         <title>HTML模版</title>
 8         <meta name="keywords" content="关键词，关键词">
 9         <meta name="description" content="">
10         <style type="text/css">
11                *{margin:10 auto;padding:0}
12         </style>
13         <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
14         <script type="text/javascript">
15             var ci1=['省1','省2','省3','省4'];
16             window.onload=function(){
17                 createCity1();
18             }
19             function createCity1(){
20                 var city1=document.getElementById('city1');
21                 //创建标签,创建标签必须是参数必须是标签名
22                 var op=document.createElement("option");
23                 op.innerHTML="请选择省份"
24                 city1.appendChild(op);
25         //        city1.appendChild("<option>请选择省份</option>");这样写是错的
26 
27                 for(var i=0;i<ci1.length;i++){
28         //        for(var i in cil){   //用这种可能会出现浏览器不兼容
29                        var op_in=document.createElement("option");
30                     op_in.innerHTML=ci1[i];
31                     city1.appendChild(op_in)
32                 }
33             }
34             $(function(){
35                 //这里就体现了jquery的强大，append方法是直接在对象后面添加content，再进行编绎。这个很牛，
36              $("#city2").append("<option>请选择省份</option>");
37              for(var i=0;i<ci1.length;i++){
38                      $("#city2").append("<option>"+ci1[i]+"</option>");
39                  }
40             })
41         //    createCity1();
42         </script>
43     </head>
44  <body>
45     <select id="city1"></select>
46     <select id="city2"></select>
47  
48  
49  </body>
50 
51 </html>