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完成制作网站 ...

随机推荐

python处理LINUX的PWD文档
用冒号分隔的哟. 此章后面讲的JSON,配置文件读取,原理应该一样吧,只是要用合适的包去处理吧. CSV文档是用CSV包处理的. 文档: root:x:0:0:root:/root:/bin/bash ...
h.264并行解码算法3D-Wave实现（基于多核共享内存系统）
3D-Wave算法是2D-Wave的扩展.3D-Wave相对于只在帧内并行的2D-Wave来说,多了帧间并行,不用等待前一帧完成解码后才开始下一帧的解码,而是只要宏块的帧间参考部分以及帧内依赖宏块解码 ...
Java 引用 WeakReference
Reference 是一个抽象类,而 SoftReference,WeakReference,PhantomReference 以及 FinalReference 都是继承它的具体类.接下来我们来分别 ...
【POJ】3630 Phone List
静态字典树. #include <cstdio> #include <cstring> #include <cstdlib> #define MAXN 10005 ...
【转】Eclipse中设置ButterKnife进行注解式开发步骤 -- 不错
原文网址:http://www.bubuko.com/infodetail-974262.html 最近在进行Android注解式开发的学习,正在尝试用ButterKnife.ButterKnife的 ...
android新建项目时出现appcompat_v7工程错误和红色感叹号
最近初学android,版本是22.6.0的话,每次创建一个项目就会出现一个appcompat_v7工程:然后我升级到最新的版本23.0.4之后,创建第一个项目,也会出现一个appcompat_v7工 ...
直接拿来用！最火的android开源项目(一)
不好意思尊重一下作者咯.详情见:csdn:http://www.csdn.net/article/2013-05-03/2815127-Android-open-source-projects
POJ1218
Problem C Time Limit : 2000/1000ms (Java/Other) Memory Limit : 20000/10000K (Java/Other) Total Su ...
HDOJ(HDU) 2521 反素数(因子个数~)
Problem Description 反素数就是满足对于任意i(0< i < x),都有g(i) < g(x),(g(x)是x的因子个数),则x为一个反素数.现在给你一个整数区间[ ...
LCD显示的一些基本概念以及DSI的一些clock解释
数字视频的基本概念源自于模拟视频.对于模拟视频我们可以这样理解:视频可以分解为若干个基本视点(像素),每个像素都有独立的色彩信息,在屏幕上依次将这些点用电子枪按照行和列打出来,就形成了一幅完整画面 ...

jquery几个常用的demo

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

随机推荐

热门专题