jQuery05

<!DOCTYPE html>

<html>

 <head>

插件

  <meta charset="utf-8" />

  <title></title>

  <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>

  <script src="" type="text/javascript" charset="utf-8"></script>

  <script type="text/javascript">

   

   // jQuerry第五次课

   // 区分java的类方法以及对象方法

   // --类(静态)方法:六DBHelper.getCon()

   //--对象方法:stuDao sd=new StuDao;sd.addStu();

   

   

   

   $(function(){

    //一·自定义插件

    //1.1$.extend()实现对象继承

    /* //案例1 两个对象的继承

    var s1={};

    var s2={"name":"大炮","age":38};

    console.info("继承前:"+s1.name,s1.age);

    console.info("继承前:"+s2.name,s2.age);

    

    //开始继承

    $.extend(s1,s2);//s1继承s2

    console.info("继承后:"+s1.name,s1.age);

    console.info("继承后:"+s2.name,s2.age); */

    

    // 1.2 $.extend()扩展jQuery类方法

    //案例 求最大值(最小值)

    /* $.extend({

     abcd:function(){

      alert(1234);

     },

     getMax:function(a,b){

      return a>b?a:b;

     },

     getMin:function(a,b){

      return a<b?a:b;

     }

    }); */

    

    // $.abcd();

    

    

// var max= $.getMax(10,40);

// console.info(max);

    

    // console.info($.getMin(10,30));

    

    // 1.3$.fn.extend()扩展jQuery对象方法

    /* $.fn.extend({

     xx.Function(){

      $(this).each(function(i,ck){//下标,ck指每一个复选框

       ck.checked=true;

      })

     }

    })

    //取消全选方法

    $.fn.extend({

     yy.Function(){

      $(this).each(function(i,ck){//下标,ck指每一个复选框

       ck.checked=false;

      })

     }

    })

    

    //案例3:实现全选效果

    //用按钮实现

    //全选

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

     $(".aaa").xx();

    })

    //取消全选

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

     $(".aaa").yy();

    })

    //用复选框实现

    $("#qx").on("click",function(){

     //判断全选框是否选中

     // if$(this).prop("checked")){

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

      $(".aaa").xx();

     }

     else{

      $(".aaa").yy();

     }

    })

    

    //给其他复选框添加点击事件

    $(".aaa").click(function(){

     $(".aaa").each(function(i,ck){//ck指每一个复选框

      if(ck.checked==false){

       f=false;

      }

     })

     $("#qx").prop("checked",f);

    })

     */

    

    

    // 二.第三方插件:表单验证插件,

    

    //案例4 表单验证 (用户名.密码.确认密码.年龄.邮箱.网址url)

    $("#myForm").validate({

     rules:{

      uname:{

       required:true,

       rangelength:[6,10]

      },

      upwd1:"required",

      upwd2:{

       required:true,

       equalTo:"#upwd1"

      },

      uage{

       required:true,

       email:[1,140]

      },

     },

     messages:{

      

     }

    })

    

    

    

   })

  </script>

 </head>

 <body>

  <h2>案例3:自定义插件实现全选功能</h2>

  <input type="button" name="" id="ok" value="全选" />

  <input type="button" name="" id="nook" value="取消全选" />

  <input type="checkbox" name="" id="qx" value="全选" />

  <input type="checkbox" name="" class="aaa" value="看美女" />看美女

  <input type="checkbox" name="" class="aaa" value="打王者" />打王者

  <input type="checkbox" name="" class="aaa" value="上网课" />上网课

  <h2>案例4 使用jQuery validation插件完成表单验证</h2>

  

  <form id="myFom">

   用户名<input type="text" name="uname" id="" value="" /><br>

   密码<input type="text" name="upwd1" id="upwd1" value="" /><br>

   确认密码<input type="text" name="upwd2" id="" value="" /><br>

   邮箱<input type="text" name="uemail" id="" value="" /><br>

   年龄<input type="text" name="uage" id="" value="" /><br>

   网址<input type="text" name="uurl" id="" value="" /><br>

   <input type="submit" name="" id="" value="提交" />

  </form>

  

  

  

 </body>

</html>

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值