本文介绍: 大家好,今天是jQuery插件知识的分享,今天的知识有点少,分享完这个后,就会分享JavaWeb的知识,慢慢期待吧!一、自定义插件1.1.1 $.extend()实现对象继承先看案例:(注:所有的案例,博主源代码中都调用了外部js,另起了script)案例1:两个对象的继承$(function(){ var s1={};var s2={“name“:”aa“,”sex“:”男”}//继承前console.info(s1.name,s1.sex);console.info(s2
大家好,今天是jQuery插件知识的分享,今天的知识有点少,分享完这个后,就会分享JavaWeb的知识,慢慢期待吧!
一、自定义插件
1.1.1 $.extend()实现对象继承
先看案例:(注:所有的案例,博主源代码中都调用了外部js,另起了script)
案例1:两个对象的继承
$(function(){
var s1={};
var s2={"name":"aa","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);
})
1.1.2 $.extend()扩展jQuery类方法
$(function(){
$.extend({
abcd:function(){
alert(1234);
},
getMax:function(a,b){
return a>b?a:b;
},
getMin:function(a,b){
return a<b?a:b;
}
});
//调用类方法
var max=$.getMax(10,56);
console.info(max);
console.info($.getMin(22,34));
$.abcd()
)}
1.2.1 $.fn.extend()扩展jQuery对象方法
$(function(){
$.fn.extend({
xx:function(){
//遍历
$(this).each(function(i,ck){//ck指的是每一个复选框
ck.checked=true;//让其选中
})
},
yy:function(){
//遍历
$(this).each(function(i,ck){//ck指的每一个复选框
ck.checked=false;//让其选中
})
}
})
)}
(注意上面那个$fn.extend里面的方法xx那段不要注掉哦)
$("#ok").click(function(){
$(".aaa").xx();
})
$("#nook").click(function(){
$(".aaa").yy();
})
//复选框实现全选
/* $("#qx").on("click",function(){
//让其他复选框的状态跟全选框保持一致
// console.info($("#qx").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);
}) */
//body部分代码如下:
<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="躺着上网课很心累" />躺着听网课很心累
<input type="checkbox"class="aaa" value="疫情隔离心很闷" />疫情隔离心很闷
<input type="checkbox"class="aaa" value="整个人都很烦怎么办" />整个人都很烦怎么办
</body>
还有个是点击全选复选框,其他复选框跟全选复选框保持一致被选中的状态
二、第三方插件:表单验证插件
比较实用
大家可以参考
访问 https://jqueryvalidation.org/ 下载最新版的jQuery Validate插件就可以了
接下来就看案例吧!
案例4:表单验证(用户名、密码、确认密码、年龄、邮箱、网址url)
/* 二、第三方插件:表单验证插件 */
//案例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位之间"
}
}
})
知识总结图:
原文地址:https://blog.csdn.net/weixin_63531940/article/details/123670598
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_45716.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。