jquery几个常用的demo

　　新建两个页面。一个叫做 ---- demo1.js-------

一个叫做 ----- demo1.html-----

代码分别如下

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title></title>

     <!--引入框架-->

     <link href="resource/bootstrap/css/bootstrap.css" rel="stylesheet">

     <script src="resource/jQuery/jquery-1.11.3.js"></script>

     <script src="resource/bootstrap/js/bootstrap.js"></script>

     <!--引入自己的js-->

     <script src="js/demo1.js"></script>

     <style>

         /*css选择器：class,id,标签,复合选择器*/

     </style>

 </head>

 <body>

 <!-- //练习：实现table的隔行换色 -->

 <table class="table">

     <tr>

         <td>订单号</td>

         <td>下单时间</td>

         <td>总价</td>

         <td>操作</td>

     </tr>

     <tr>

         <td>111111</td>

         <td>2015-5-5</td>

         <td>200</td>

         <td>付款</td>

     </tr>

     <tr>

         <td>111111</td>

         <td>2015-5-5</td>

         <td>200</td>

         <td>付款</td>

     </tr>

     <tr>

         <td>111111</td>

         <td>2015-5-5</td>

         <td>200</td>

         <td>付款</td>

     </tr>

     <tr>

         <td>111111</td>

         <td>2015-5-5</td>

         <td>200</td>

         <td>付款</td>

     </tr>

     <tr>

         <td>111111</td>

         <td>2015-5-5</td>

         <td>200</td>

         <td>付款</td>

     </tr>

 </table>

 <hr/>

 <!--打印九九乘法表，并用动画的形式显示出来(div)-->

 <a href="" class="btn btn-danger">打印</a>

 <br/>

 <br/>

 <div id="cfb"></div>

 <!--//定义两个数组，一个存省份，一个市，实现两个下拉表的二级联动-->

 <div id="xlb" style="width: 500px;height: 200px;background: cadetblue;margin:30px auto;padding:30px;">

     </div>

 <!--//实现简单验证，错误信息显示在输入框后边，并有一定颜色提示-->

 <div  id="yz" style="width: 500px;height: 200px;background: cadetblue;margin:30px auto;padding:30px;">

     <form>

         姓名：<input type="text" value="" name="xm"><br/>

         <input type="button" name="tj" value="提交">

     </form>

 </div>

 <!--//实现checkbox多选，并输出选择得值-->

 <div  id="cb" style="width: 500px;background: rgba(95, 158, 160, 0.22);margin:30px auto;padding:30px;">

     <p class="text-right"> <a class="btn btn-danger" id="sc">删除</a>

     </p>

     <table class="table">

         <tr>

             <td>

                 <input type="checkbox" value="" name="xzcb" >全选/全不选

             </td>

             <td>

                 学号

             </td>

             <td>

                 姓名

             </td>

         </tr>

         <tr>

             <td>

                 <input type="checkbox" value="1" name="xz">

             </td>

             <td>

                 11111

             </td>

             <td>

                 张三

             </td>

         </tr>

         <tr>

             <td>

                 <input type="checkbox" value="2" name="xz">

             </td>

             <td>

                 2222222

             </td>

             <td>

                 李四

             </td>

         </tr>

         <tr>

             <td>

                 <input type="checkbox" value="3" name="xz">

             </td>

             <td>

                 3333333

             </td>

             <td>

                 王五

             </td>

         </tr>

     </table>

     <div id="info" class="bg-danger"></div>

 </div>

 </body>

 </html>

 /**

  * Created by Administrator on 15-8-30.

  */

 //使用js

 /*window.onload=function(){

     alert('hello world!');

 }*/

 /*

 //使用jquery -jquery内置的一个全局对象。$(参数)：根据参数选择对象返回jquery对象

 $(document).read(function(){

     $(".box").css("height","200").css("background","red").hide(5000).show(5000);

 })

 */

 $(function(){

     //练习：实现table的隔行换色

     //使用过滤器

  /*   $("table tr:even").css("background","red");

     $("table tr:odd").css("background","blue");*/

     var obj=$("table tr");

     obj.each(function(index,val)

     {

         if(index%2==0)

         {

             $(val).css("background","blue");

         }

         else

         {

             $(val).css("background","pink");

         }

     })

   /*  $("table tr").each(function(i,v){

         alert(i+","+ v.tagName);

     })

 */

     $("a").first().click(function(){

         var i=1;

         var s="";

         for(i;i<=9;i++)

         {

             for(var j=1;j<=i;j++)

             {

                 s+=j+"*"+i+"="+j*i+"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";

             }

             s+="<br/>";

         }

         $("#cfb").html(s);

     })

     //定义一个数组，遍历数组，赋值给下拉列表，呈现出来

     var json=[

         {"value":"1","text":"apple"},

         {"value":"2","text":"orange"},

         {"value":"3","text":"banana"},

         {"value":"4","text":"watermelon"},

         {"value":"5","text":"pineapple"}

     ];

     var s="";

     s=s+"<select>";

     $.each(json,function(idx,obj){

         s+="<option value="+obj.value+">"+obj.text+"</option>";

     });

     s=s+"</select>";

       $("#cfb").html(s);

     //js定义数组var定义变量

     var a1="a";

     var a2=["abc","abc","efg","广州",3];

     var a3=[

         ["北京","天津"],

         ["南京","苏州","南通","常州"],

         ["福州","福安"],

         ["兰州","白银","定西","敦煌"]

     ];

     var a4=[

         {"name":"张三","age":"18"},

         {"name":"李四","age":"20"},

         {"name":"小明","age":"50"},

         {"name":"小红","age":"30"},

         ];

    /* each(index(索引),value(值)),匿名函数的参数是占位符，

      $.each(a4,function(index,value){

      alert("索引："+index+",值:"+value.name);

      })

      */

     //两层each遍历

     $.each(a3,function(i1,v1){

         $.each(v1,function(i2,v2){

             alert(v2);

         })

     })

     //定义两个数组，一个存省份，一个市，实现链各个下拉表二级联动

     //一位数组存储省份

     var pro=["直辖市","江苏","福建","广东","甘肃"];

     //二维数组存储市

     var city=[

         ["北京","天津","上海","重庆"],

         ["南京","苏州","南通","常州"],

         ["福州","福安","龙岩","南平"],

         ["广州","潮阳","潮州","澄海"],

         ["兰州","白银","定西","敦煌"]

     ];

     jzpro(pro);

     jzcity(city[0]);

     //使用id找到select

     $('#pro').change(function(){

         //dom操作

         $("#city").remove();//删除自身的元素

         jzcity(city[$(this).val()]);

     })

     //从元素开始，使用$（选择符）得到元素

     $("input[name=tj]").click(function(){

         var xm=$("input[name=xm]");//表单选择器.jquery建议将对象赋值给变量做缓冲

         if(xm.val()=="")

         {

             if(xm.next().is("span"))

               xm.next().remove();

             xm.after("<span style='color:red'>请输入姓名!</span>");

         }

         else

         {

             //提交

             $("form:first").submit();

         }

     })

     //实现checkbox多选。并输入选择的值

     //实现多选attr\prop区别：

     $("input[name=xzcb]").click(function(){

        //alert($(this).is(":checked"));

        //alert($(this).prop('checked'));

         if($(this).is(":checked"))

           $("input[name=xz]").prop("checked",true);

         else

           $("input[name=xz]").prop("checked",false);

     })

     $("#sc").click(function(){

         var v="";

         $("input[name=xz]").each(function(index,value){

             if($(value).prop("checked"))

                  v+=$(value).val()+",";

             })

         $("#info").text("删除的元素为："+v)

     })

 })

 //下拉列表

 function jzpro(pro){

     var pros="";

     pros+="<select id='pro'>";

     $.each(pro,function(idx,obj){

         pros+="<option value="+idx+">"+obj+"</option>";

     });

     pros+="</select>";

     $("#xlb").append(pros);

 }

 function jzcity(cityarray){

     var citys="";

     //初始化的时候，默认加载

     citys+="<select id='city'>";

     $.each(cityarray,function(idx,obj){

         citys+="<option value="+idx+">"+obj+"</option>";

     });

     citys+="</select>";

     //dom操作

     $("#xlb").append(citys);

 }

jquery几个常用的demo的更多相关文章

jQuery 的选择器常用的元素查找方法
jQuery 的选择器常用的元素查找方法基本选择器: $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myE ...
jQuery中的常用内容总结(一)
jQuery中的常用内容总结(一) 前言不好意思(✿◠‿◠),由于回家看病以及处理一些其它事情耽搁了,不然这篇博客本该上上周或者上周写的:同时闲谈几句:在这里建议各位开发的童鞋,如果有疾病尽快治 ...
jQuery中的常用内容总结(三)
jQuery中的常用内容总结(三) 转载请注明地址:http://www.cnblogs.com/funnyzpc/p/7571998.html 内容提要选择器(第一节) 选择器的扩展方法(第一节) ...
jQuery中的常用内容总结(二)
jQuery中的常用内容总结(二) 转载请注明地址: http://www.cnblogs.com/funnyzpc/p/7571993.html 前言距离上次博客更新已经有二十来天了(●′ω`●) ...
jQuery之基础核心（demo)
jQuery之基础核心作者的热门手记 jQuery之基础核心(demo) 本文主要简单的介绍下jQuery一些基础核心,大致了解jQuery使用模式.适用于有HTML.CSS.javas ...
jquery倒计时按钮常用于验证码倒计时
<!doctype html><html><head> <meta charset="utf-8"> <title>jq ...
jQuery ajax解析xml文件demo
解析xml文件,然后将城市列表还原到下拉列表框中:当选择下拉列表框时,在对应的文本框中显示该城市信息. 前端代码: <!doctype html> <html> <hea ...
jquery中最常用的API有哪些
jquery中最常用的API有哪些一.总结一句话总结:取html的方法,class相关的方法,val相关的方法,data相关的方法,attr相关的方法 1.jQuery Object Access ...
从零开始学习jQuery (十) jQueryUI常用功能实战
一.摘要本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍. 本文是实战篇. 使用jQueryUI完成制作网站 ...

随机推荐

ios6,ios7,ios7.1下设置UISearchbar的背景色
ios系统升级到7.1后,原来在7.0下显示正常的UISearchbar现在又出现问题了.究其原因,是由于UISearchbar的subview又做修改了. float version = [[[ U ...
在线浏览pdf文件，pdfobject的简单使用
该js插件,官网有详细的使用教程(网址:http://www.pdfobject.com/examples/).打开里面的例子后,查看新打开页面,打开并查看该页面的源代码. 需要的材料: 1.PDFo ...
php的ob实现页面静态化
php页面静态化的原理,用最少的代码解释页面静态化如何应用:在插入或更新数据到数据库时,就执行一下代码是一种比较好的方法.比如:php执行add()方法时(就是插入数据时) //开启缓存 Ob_st ...
hdu 2289 Cup (二分法)
http://acm.hdu.edu.cn/showproblem.php?pid=2289 二分法解题. 这个题很恶心...一开始测试样例都不能过,这个π一开始取3.1415926结果是99.999 ...
Java中类Exchaner浅析
Exchaner用于实现两个人之间的数据交换,每个人在完成一定的事物后想与对方交换数据,第一个先拿出数据的人将一直等待第二个人拿着数据到来时,才能彼此交换数据. 张孝祥老师在讲解Exchaner时的比 ...
IP分片和TCP分片 MTU和MSS(转)
IP分片和TCP分片 MTU和MSS(转) 访问原文:http://blog.csdn.net/keyouan2008/article/details/5843388 1,MTU(Maximum Tr ...
【转】Linux下svn的常用工作流程
原文网址:http://www.cnblogs.com/cobbliu/archive/2011/07/08/2389011.html 上篇文章在ubuntu和redhat5.5上搭建好了svnser ...
【转】windows常用消息大全（系统消息、通告消息、用户消息）
原文网址:http://blog.csdn.net/nupt123456789/article/details/7370562 附录A Windows 常用消息大全表A-1 Windows消息分布 ...
Linux驱动的两种加载方式过程分析
一.概念简述在Linux下可以通过两种方式加载驱动程序:静态加载和动态加载. 静态加载就是把驱动程序直接编译进内核,系统启动后可以直接调用.静态加载的缺点是调试起来比较麻烦,每次修改一个地方都要重新 ...
Delphi实现WebService带身份认证的数据传输
WebService使得不同开发工具开发出来的程序可以在网络连通的环境下相互通信,它最大的特点就是标准化(基于XML的一系列标准)带来的跨平台.跨开发工具的通用性,基于HTTP带来的畅通无阻的能力(跨 ...

jquery几个常用的demo

jquery几个常用的demo的更多相关文章

随机推荐

热门专题