jquery插件、表单验证、对象继承、全选效果

最新推荐文章于 2024-03-14 07:00:00 发布

习惯过了头121

最新推荐文章于 2024-03-14 07:00:00 发布

阅读量62

点赞数

分类专栏： JAVA 文章标签： jquery

本文链接：https://blog.csdn.net/m0_68332494/article/details/123719111

版权

JAVA 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <style type="text/css">
           #myForm label.error{
               color:red;
               font-size:14px;
           }
       </style>
       
       <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
       
       <script src="js/jquery.validate.js" type="text/javascript" charset="utf-8"></script>
       <script type="text/javascript">

           /* jQuery第五次课☞插件 */
           /*
           * 区分java的类方法以及对象方法
           *    --类(静态)方法：例如DBHelper.getCon()
           *    --对象方法：StuDao sd = new StuDao(); sd.addStu();
           */

           $(function(){
               /* 一、自定义插件 */
               //1.1 $.extend()实现对象继承
               //案例1：两个对象的继承
               /* var s1={};
               var s2={"name":"大炮","age":"38"};
               consoloe.info("继承前:"+s1.name,s1.age);
               console.info("继承前:"+s2.name,s2.age); */
               //开始继承
               // $.extend(s1,s2);//s1继承s2
               // consoloe.info("继承后:"+s1.name,s1.age);
               // console.info("继承后:"+s2.name,s2.age);
               //1.2 $.extend()扩展jQuery类方法
               //案例2：求最大值(最小值)
               /* $.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,50));

               //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;
                       })
                       }
               }) */
               //案例3：实现全选效果
               // $("#ok").click(function(){
               //    $(".aaa").xx();
               // })
               // $("#nook").click(function(){
               //    $(".aaa").yy();
               // })
               //用全选框实现
               // $("#qx").on("click",function(){
                   //判断全选框是否选中
                   //console.info($(this).prop("checked"));
               //   if($(this).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);//改变全选框的状态
               }) */

               /* 二、第三方插件:表单验证插件 */
               //案例4：表单验证(用户名、密码、确认密码、年龄、邮箱、网址url)
               $("#myForm").validate({
                   rules:{
                       //表单字段规则
                       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:"required",
                       upwd2:{
                           required:"密码必填",
                           equalTo:"确认密码必须与密码一致"
                       },
                       uemail:{
                           required:"email必填",
                           email:"请输入正确的email"
                       },
                       uage:{
                           required:"年龄必填",
                           range:"年龄必须在1到150之间"
                       },
                       uurl:{
                           required:"网址必填",
                           url:"请输入正确的网址"
                       }
                   }
               });





           })

       </script>
   </head>
   <body>
       <h2>案例3:自定义插件实现全选功能</h2>
       <input type="button" value="全选" id="ok"/>
       <input type="button" value="取消全选" id="nook"/>
       <input type="checkbox" id="qx"/>全选
       <input type="checkbox" value="看美女" class="aaa" />看美女
       <input type="checkbox" value="打王者" class="aaa" />打王者
       <input type="checkbox" value="打豆豆" class="aaa" />打豆豆

       <h2>案例4:使用jQuery validation插件完成表单验证</h2>
       <from id="myForm">
           用户名:<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>
   </body>
</html>