标签：
新建两个页面。一个叫做 ---- demo1.js-------
一个叫做 ----- demo1.html-----
代码分别如下
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <!--引入框架--> 7 <link href="resource/bootstrap/css/bootstrap.css" rel="stylesheet"> 8 <script src="resource/jQuery/jquery-1.11.3.js"></script> 9 <script src="resource/bootstrap/js/bootstrap.js"></script> 10 11 <!--引入自己的js--> 12 <script src="js/demo1.js"></script> 13 14 <style> 15 /*css选择器：class,id,标签,复合选择器*/ 16 </style> 17 </head> 18 <body> 19 20 <!-- //练习：实现table的隔行换色 --> 21 <table class="table"> 22 <tr> 23 <td>订单号</td> 24 <td>下单时间</td> 25 <td>总价</td> 26 <td>操作</td> 27 </tr> 28 29 <tr> 30 <td>111111</td> 31 <td>2015-5-5</td> 32 <td>200</td> 33 <td>付款</td> 34 </tr> 35 36 <tr> 37 <td>111111</td> 38 <td>2015-5-5</td> 39 <td>200</td> 40 <td>付款</td> 41 </tr> 42 43 <tr> 44 <td>111111</td> 45 <td>2015-5-5</td> 46 <td>200</td> 47 <td>付款</td> 48 </tr> 49 50 <tr> 51 <td>111111</td> 52 <td>2015-5-5</td> 53 <td>200</td> 54 <td>付款</td> 55 </tr> 56 57 <tr> 58 <td>111111</td> 59 <td>2015-5-5</td> 60 <td>200</td> 61 <td>付款</td> 62 </tr> 63 </table> 64 65 <hr/> 66 67 <!--打印九九乘法表，并用动画的形式显示出来(div)--> 68 <a href="" class="btn btn-danger">打印</a> 69 <br/> 70 <br/> 71 <div id="cfb"></div> 72 73 <!--//定义两个数组，一个存省份，一个市，实现两个下拉表的二级联动--> 74 <div id="xlb" style="width: 500px;height: 200px;background: cadetblue;margin:30px auto;padding:30px;"> 75 </div> 76 77 78 <!--//实现简单验证，错误信息显示在输入框后边，并有一定颜色提示--> 79 <div id="yz" style="width: 500px;height: 200px;background: cadetblue;margin:30px auto;padding:30px;"> 80 81 <form> 82 姓名：<input type="text" value="" name="xm"><br/> 83 <input type="button" name="tj" value="提交"> 84 </form> 85 86 </div> 87 88 89 90 <!--//实现checkbox多选，并输出选择得值--> 91 <div id="cb" style="width: 500px;background: rgba(95, 158, 160, 0.22);margin:30px auto;padding:30px;"> 92 <p class="text-right"> <a class="btn btn-danger" id="sc">删除</a> 93 </p> 94 <table class="table"> 95 <tr> 96 <td> 97 <input type="checkbox" value="" name="xzcb" >全选/全不选 98 </td> 99 <td> 100 学号 101 </td> 102 <td> 103 姓名 104 </td> 105 </tr> 106 107 <tr> 108 <td> 109 <input type="checkbox" value="1" name="xz"> 110 </td> 111 <td> 112 11111 113 </td> 114 <td> 115 张三 116 </td> 117 </tr> 118 119 <tr> 120 <td> 121 <input type="checkbox" value="2" name="xz"> 122 </td> 123 <td> 124 2222222 125 </td> 126 <td> 127 李四 128 </td> 129 </tr> 130 131 <tr> 132 <td> 133 <input type="checkbox" value="3" name="xz"> 134 </td> 135 <td> 136 3333333 137 </td> 138 <td> 139 王五 140 </td> 141 </tr> 142 </table> 143 <div id="info" class="bg-danger"></div> 144 145 146 147 148 </div> 149 150 </body> 151 </html>
1 /** 2 * Created by Administrator on 15-8-30. 3 */ 4 //使用js 5 /*window.onload=function(){ 6 alert(‘hello world!‘); 7 }*/ 8 /* 9 //使用jquery -jquery内置的一个全局对象。$(参数)：根据参数选择对象返回jquery对象 10 $(document).read(function(){ 11 $(".box").css("height","200").css("background","red").hide(5000).show(5000); 12 }) 13 */ 14 $(function(){ 15 //练习：实现table的隔行换色 16 //使用过滤器 17 /* $("table tr:even").css("background","red"); 18 $("table tr:odd").css("background","blue");*/ 19 20 var obj=$("table tr"); 21 obj.each(function(index,val) 22 { 23 if(index%2==0) 24 { 25 $(val).css("background","blue"); 26 } 27 else 28 { 29 $(val).css("background","pink"); 30 } 31 }) 32 33 34 /* $("table tr").each(function(i,v){ 35 alert(i+","+ v.tagName); 36 }) 37 */ 38 39 $("a").first().click(function(){ 40 var i=1; 41 var s=""; 42 for(i;i<=9;i++) 43 { 44 for(var j=1;j<=i;j++) 45 { 46 s+=j+"*"+i+"="+j*i+" "; 47 } 48 s+="<br/>"; 49 50 } 51 $("#cfb").html(s); 52 53 }) 54 55 //定义一个数组，遍历数组，赋值给下拉列表，呈现出来 56 var json=[ 57 {"value":"1","text":"apple"}, 58 {"value":"2","text":"orange"}, 59 {"value":"3","text":"banana"}, 60 {"value":"4","text":"watermelon"}, 61 {"value":"5","text":"pineapple"} 62 ]; 63 var s=""; 64 s=s+"<select>"; 65 $.each(json,function(idx,obj){ 66 67 s+="<option value="+obj.value+">"+obj.text+"</option>"; 68 69 }); 70 s=s+"</select>"; 71 $("#cfb").html(s); 72 73 //js定义数组var定义变量 74 var a1="a"; 75 var a2=["abc","abc","efg","广州",3]; 76 var a3=[ 77 ["北京","天津"], 78 ["南京","苏州","南通","常州"], 79 ["福州","福安"], 80 ["兰州","白银","定西","敦煌"] 81 ]; 82 var a4=[ 83 {"name":"张三","age":"18"}, 84 {"name":"李四","age":"20"}, 85 {"name":"小明","age":"50"}, 86 {"name":"小红","age":"30"}, 87 ]; 88 /* each(index(索引),value(值)),匿名函数的参数是占位符， 89 $.each(a4,function(index,value){ 90 alert("索引："+index+",值:"+value.name); 91 92 }) 93 */ 94 //两层each遍历 95 $.each(a3,function(i1,v1){ 96 $.each(v1,function(i2,v2){ 97 alert(v2); 98 }) 99 }) 100 101 //定义两个数组，一个存省份，一个市，实现链各个下拉表二级联动 102 //一位数组存储省份 103 var pro=["直辖市","江苏","福建","广东","甘肃"]; 104 //二维数组存储市 105 var city=[ 106 ["北京","天津","上海","重庆"], 107 ["南京","苏州","南通","常州"], 108 ["福州","福安","龙岩","南平"], 109 ["广州","潮阳","潮州","澄海"], 110 ["兰州","白银","定西","敦煌"] 111 112 ]; 113 jzpro(pro); 114 jzcity(city[0]); 115 //使用id找到select 116 $(‘#pro‘).change(function(){ 117 //dom操作 118 $("#city").remove();//删除自身的元素 119 jzcity(city[$(this).val()]); 120 }) 121 122 123 124 //从元素开始，使用$（选择符）得到元素 125 $("input[name=tj]").click(function(){ 126 var xm=$("input[name=xm]");//表单选择器.jquery建议将对象赋值给变量做缓冲 127 if(xm.val()=="") 128 { 129 if(xm.next().is("span")) 130 xm.next().remove(); 131 xm.after("<span style=‘color:red‘>请输入姓名!</span>"); 132 133 } 134 else 135 { 136 //提交 137 $("form:first").submit(); 138 } 139 }) 140 141 //实现checkbox多选。并输入选择的值 142 //实现多选attr\prop区别： 143 $("input[name=xzcb]").click(function(){ 144 //alert($(this).is(":checked")); 145 //alert($(this).prop(‘checked‘)); 146 if($(this).is(":checked")) 147 $("input[name=xz]").prop("checked",true); 148 else 149 $("input[name=xz]").prop("checked",false); 150 151 }) 152 $("#sc").click(function(){ 153 var v=""; 154 $("input[name=xz]").each(function(index,value){ 155 if($(value).prop("checked")) 156 v+=$(value).val()+","; 157 158 }) 159 $("#info").text("删除的元素为："+v) 160 }) 161 162 163 164 165 166 167 168 169 170 171 172 }) 173 //下拉列表 174 function jzpro(pro){ 175 var pros=""; 176 pros+="<select id=‘pro‘>"; 177 $.each(pro,function(idx,obj){ 178 pros+="<option value="+idx+">"+obj+"</option>"; 179 180 }); 181 pros+="</select>"; 182 $("#xlb").append(pros); 183 184 } 185 function jzcity(cityarray){ 186 var citys=""; 187 //初始化的时候，默认加载 188 citys+="<select id=‘city‘>"; 189 $.each(cityarray,function(idx,obj){ 190 citys+="<option value="+idx+">"+obj+"</option>"; 191 192 }); 193 citys+="</select>"; 194 //dom操作 195 $("#xlb").append(citys); 196 }
标签：
原文地址：http://www.cnblogs.com/zzzzw/p/4771750.html
