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

随机推荐

Debug和Release之本质区别
转自Debug和Release之本质区别 Debug 和 Release 编译方式的本质区别 Debug 通常称为调试版本,它包含调试信息,并且不作任何优化,便于程序员调试程序.Release 称为发 ...
windows下NGINX和PHP配合（FASTCGI）
昨天测试了TOMCAT,今天考查了NGINX. 按网上说的作,比较简单. http://www.cnblogs.com/huayangmeng/archive/2011/06/15/2081337.h ...
编写自己的C语言头文件
一些初学C语言的人,不知道头文件(*.h文件)原来还可以自己写的.只知道调用系统库函数时,要使用#include语句将某些头文件包含进去.其实,头文件跟.C文件一样,是可以自己写的.头文件是一种文本 ...
android实现json数据的解析和把数据转换成json格式的字符串
利用android sdk里面的 JSONObject和JSONArray把集合或者普通数据,转换成json格式的字符串 JSONObject和JSONArray解析json格式的字符串为集合或者一般 ...
div 背景色设置_DIV背景颜色设置
DIV 背景色设置篇-div背景颜色设置篇一.div标签内直接设置背景颜色 - TOP <div style="background:#000; color:#FFF&quo ...
bzoj1954 poj3764
对于xor有一个非常重要的性质A xor B xor B=A 并且满足交换律和结合律这道题是求无根树上最长的xor路径我们知道,无根树的题目我们都是要想办法转化为有根树来处理当我们确定了一个根,根到每 ...
POJ1664
Problem B Time Limit : 2000/1000ms (Java/Other) Memory Limit : 20000/10000K (Java/Other) Total Su ...
一个Tomcat及一个ip，绑定不同的域名，各个域名访问各自不同应用程序的配置方法
http://nickandmiles.blog.163.com/blog/static/23422123201110151492166/ 条件是:这样一种实际情况是,就一台服务器,当公网的IP地址也 ...
crawler4j：轻量级多线程网络爬虫
crawler4j是Java实现的开源网络爬虫.提供了简单易用的接口,可以在几分钟内创建一个多线程网络爬虫. 安装使用Maven 使用最新版本的crawler4j,在pom.xml中添加如下片段: ...
构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（38）-Easyui-accordion+tree漂亮的菜单导航
原文:构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(38)-Easyui-accordion+tree漂亮的菜单导航系列目录本节主要知识点是easyui ...

jquery几个常用的demo

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

随机推荐

热门专题