jQuery插件

小亮yayaya

2024-06-30 帮助4人

1.插件

   1.自定义插件
       ①$.extend
           【作用1】对象继承： $.extend(对象1，对象2)---->对象1继承对象2

           【作用2】扩展jQuery类方法：$.extend( {方法名：function(){ 方法体 } } )
注意多个方法之间用逗号隔开

       ②$.fn.extend
           【作用】扩展jQuery对象方法：$.fn.extend( {方法名：function(){ 方法体 } } )
注意多个方法之间用逗号隔开

   2.第三方插件
       ①表单验证
           插件名：jQuery Validation
           ②使用步骤
               【1】.下载jQuery插件验证库
                   jquery.validate.js
               【2】.将类库引入页面
               【3】.两种方式使用验证：
               ①HTML标签属性方式
                   ②JS方式【推荐】
                       ①验证及错误信息：
                           $("表单元素").validate({
                           rules:{
                          字段验证规则
                              }，
                           messages:{
                           字段错误信息
                               }
                               })

                       ②错误样式：
                           表格元素 label.error{
                           样式
                           }
           ③验证规则说明
               见jQueryValidate规则.png

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 设置错误信息的方式 */
#formRegister label{
color:red;
}
</style>
<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></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();
*
* $.each(); 类方法
* $("#oDiv").show() 对象方法
*
* $("#oDiv").each(); 可以的
*/
$(function() {
/* 一、自定义插件 */
// $.extend(); $.fn.extend();
//1.1 $.extend()实现对象继承
//案例1：两个对象的继承
// 定义一个人类对象，属性：name，sex
// var person = {"name":"东方不败","sex":"女"};
// var stu = {};
// console.log($.type(stu));
// console.log(stu);
// // 通过$.extend()；为stu继承person中的所有属性
// $.extend(stu,person);
// console.log(stu);
// 涉及到三个参数
// 第一个参数的对象会继承后面所有对象的属性。
// var person = {"name":"东方不败","sex":"女"};
// var stu = {"age":18};
// var wjq = {};
// console.log(person);
// console.log(stu);
// console.log(wjq);
// console.log("------------------");
// $.extend(wjq,stu,person);
// console.log(person);
// console.log(stu);
// console.log(wjq);
//1.2 $.extend()扩展jQuery类方法
$.extend({
// 此处可以通过键值对的形式创建jQuery的类方法将来可以通过$直接调用
"sb":function(){
console.log("这是我自定义的类方法");
},
"nb":function(){
console.log(123);
}
});
// $.sb();
// $.nb();$.extend();
//案例2：求最大值(最小值)
$.extend({
// arguments参数类似一个数组，存储参数的个数
// 扩展求最大值的类方法
"myMax1":function(a,b){
return a>b?a:b;
},
"myMax2":function(){
// console.log(arguments.length);
// 打擂台的思想
var max = arguments[0];//假设这个arguments数组中的第一个值为最大值
// console.log(arguments[0]);
for(var i = 0;i<arguments.length;i ){
if(max < arguments[i]){
max = arguments[i];
}
}
return max;
},
"myMin":function(){
// console.log(arguments.length);
// 打擂台的思想
var min = arguments[0];//假设这个arguments数组中的第一个值为最大值
// console.log(arguments[0]);
for(var i = 0;i<arguments.length;i ){
if(min > arguments[i]){
min = arguments[i];
}
}
return min;
}
});
// console.log($.myMax2(12,2,3,56));
// console.log($.myMax2(1));
// console.log($.myMax2());
// console.log($.myMax2(1,2,3,4,5,6,6,7));
// console.log($.myMin(22,3,2));
//1.3 $.fn.extend()扩展jQuery对象方法
//案例3：实现全选效果
$.fn.extend({
// 扩展jQuery对象方法
"mydemo":function(){
console.log("这是jQuery对象方法");
// alert(123);
}
})
// 如何调用jQuery对象方法
// $.fn.extend() 存储在加载函数内作用域
// $.fn.mydemo();
// console.log($("#oDiv").mydemo());
$.fn.extend({
// 全选的对象方法
"demo1":function(){
// 在对象方法中，$(this)代表将来谁调用了，就代表谁
// console.log($(this));
// $(this).each(function(){
// $(this).prop("checked",true);
// });
// jQuery的特性中有一个隐式迭代器
$(this).prop("checked",true);
},
"demo2":function(){
$(this).prop("checked",false);
}
});
$("#checkall").click(function(){
// 通过获取到复选框然后调用对象方法demo1 设置所有复选框选中
$("input:checkbox").demo1();
});
$("#qxcheckall").click(function(){
// 通过获取到复选框然后调用对象方法demo1 设置所有复选框选中
$("input:checkbox").demo2();
});
})
/* 二、第三方插件:表单验证插件 */
//案例4：表单验证(用户名、密码、确认密码、年龄、邮箱、网址url)
$(function(){
// 获取表单标签调用插件激活的方法
$("#formRegister").validate({
// 插件的使用：2个模块，规则模块，错误信息模块
rules:{
// 账号必须有，不能为空
username:{
required:true,
minlength:10
},
email:{
required:true,
email:true
}
},
// 编写自定义错误信息
messages:{
// 账号必须有，不能为空
username:{
required:"账号不能为空",
minlength:"账号必须10以上"
},
email:{
required:"必填",
email:"邮箱格式不正确"
}
}
});
});
</script>
</head>
<body>
<button id = "oDiv">按钮</button>
<h2>案例3:自定义插件实现全选功能</h2>
<button id="checkall">全选</button>
<button id="qxcheckall">取消全选</button>
<input type="checkbox" value = "1">1
<input type="checkbox" value = "2">2
<input type="checkbox" value = "3">3
<input type="checkbox" value = "4">4
<input type="checkbox" value = "5">5
<h2>案例4:使用jQuery validation插件完成表单验证</h2>
<form id="formRegister" action="index.html" method = "get">
账号：<input type="text" name = "username">
<br>
密码 <input type="password" name = "password"/>
<br>
邮箱 <input type="text" name = "email">
<br>
<input type="date">
<br>
<input type="submit" value = "注册">
</form>
</body>
</html>

学新通

这篇好文章是转载于：学新通技术网

jQuery插件

1.插件

photoshop保存的图片太大微信发不了怎么办

word里面弄一个表格后上面的标题会跑到下面怎么办

photoshop扩展功能面板显示灰色怎么办

《学习通》视频自动暂停处理方法

TikTok加速器哪个好免费的TK加速器推荐

Android 11 保存文件到外部存储，并分享文件

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

微信运动停用后别人还能看到步数吗

excel打印预览压线压字怎么办