Fork me on GitHub

jquery几个常用的demo

　　新建两个页面。一个叫做  ---- 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+"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";
 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 }

 

posted @ 2015-08-30 21:47  ZZZZW  阅读(334)  评论(0)  编辑  收藏  举报
AmazingCounters.com