新建两个页面。一个叫做 ---- 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 }
时间： 2024-10-13 10:10:35