jQuery(插件)

这是本次jQuery插件的思维导图

继承（$.extend）

使用案例：

var s1 = {};//不必惊讶，这是一个空对象
var s2 = {"name":"大哥","sex":"妖"}
console.info(s1.name,s1.sex);
console.info(s2.name,s2.sex);
//开始继承
$.extend(s1,s2);//s1继承自s2
//继承后
console.info(s1.name,s1.sex);
console.info(s2.name,s2.sex);
 
//案例2:最大值,最小值
 $.extend({
     abcd:function(){//定义方法
   alert(123);
 },
 getMax:function(a,b){
  return a>b?a:b;
  },
  getMin:function(a,b){
  return a<b?a:b;
  }
});     
//调用类方法:
 var max = $.getMax(10,15);
console.info(max); 
console.info($.getMin(22,34));
 $.abcd();

对象（$.fn.extend）

使用案例：

     

      //1.3$.fn.extend()扩展jquery对象
         $.fn.extend({
     xx:function(){
      //遍历
      $(this).each(function(i,ck){//ck值每一个复选框
       ck.checked = true;//让其选中
      })
     },
     yy:function(){
      //遍历
      $(this).each(function(i,ck){//ck值每一个复选框
       ck.checked = false;//让其选中
      })
    })

许多都需要功能可能用到全选，一个一个写太麻烦，可以直接封装后用

全选效果的实现

使用案例：

js部分：         

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


 
    //复选框选中
    $("#qx").on("click",function(){
     //让其他复选框跟全选框保持一致
     // console.info($("#qx").prop("checked"));
           if($(this).is(":checked")){//说明全选框选中
      $(".aaa").xx();//让其他复选框选中
     }
     else{//有一个未选中全选框就不选中
      $(".aaa").yy();
     }
    })
    
    //完善全选
    //给所有其他复选框添加点击事件
    $(".aaa").click(function(){
     var f = true;
     //遍历
     $(".aaa").each(function(i,ck){//ck值每一个复选框
      if(ck.checked==false){
       //只要有任何一个未选中
       f = false;
      }
      //改变全选框的状态
      $("#qx").prop("checked",f);
     })
     
     
    }) 

body（身体）部分：

       

<h2>案例3：自定义插件全选功能</h2>
  <input type="button" value="全选" id="ok">
  <input type="button" value="取消全选" id="nook">
  <input type="checkbox" id="qx" />全选
  <input type="checkbox" class="aaa"  value="aaa" />aaa
  <input type="checkbox" class="aaa"  value="bbb" />bbb
  <input type="checkbox" class="aaa"  value="ccc" />ccc

插件表单验证：

需要另一个类库：jquery.validate.js

使用案例：

js部分：

    //案例4:表单验证(姓名，年龄，密码，确认密码，邮箱，网址)
    $("#myForm").validate({
     rules:{
      //字段规则部分
      // uname:"required";
      uname:{
       required:true,
       rangelength:[6,10]
      },
      upwd1:"required",
      upwd2:{
       required:true,
       equalTo:"#upwd1"
      },
      uemail:{
       required:true,
       email:true
      },
      uage:{
       required:true,
       range:[1,150]
      },
      uurl:{
       required:true,
       url:true
      }
     },
     messages:{
      //错误信息提示部分
      uname:{
       required:"用户名必填",
       rangelength:"长度要在6-10之间"
      },
      upwd1:"密码必填",
      upwd2:{
       required:"确认密码必填",
       equalTo:"两次密码不一致"
      },
      uemail:{
       required:"邮箱必填",
       email:"邮箱格式错误"
      },
      uage:{
       required:"年龄必填",
       range:"年龄在1-150岁之间"
      },
      uurl:{
       required:"网址必填",
       url:"网址输入错误"
      }
     }
    }) 

body部分：

<h2>案例4：Query validation 插件表单验证</h2>
  <form id="myFrom">
   用户名：<input type="text" name="uname" /><br />
   密码：<input type="text" name="upwd1" id="upwd1"/><br />
   确认密码：<input type="text" name="upwd2" /><br />
   邮箱：<input type="text" name="uemail" /><br />
   年龄：<input type="text" name="uage" /><br />
   网址：<input type="text" name="uurl" /><br />
   <input type="submit"  value="提交" />
  </form>

第三方插件
   1 表单验证
    1.1  查看API官方文档
    1.2  插件名：jQuery Validation
     1.3 使用步骤
    【1】.下载jQuery插件验证库： jquery.validate.js
    【2】.将类库引入页面
    【3】.两种方式使用验证 ① HTML标签属性方式；②JS方式【推荐
      验证及错误信息
         $("表单元素").validate({
                      rules:{
                     字段验证规则
                       }，
                       messages:{
                      字段错误信息
                       }
        })
       错误样式： 表格元素  label.error{ 样式}
注意：验证规则说明
    见jQueryValidate规则

 好了，今天的分享到此结束，本次的JQuery为分享告一段落，喜欢的可以点赞收藏哦