jQuery ---- 插件
一、自定义插件
案例1：两个对象的继承
1.1 $.extend()实现对象继承
var s1={};
// var s2={"name":"小小","age":20};
// 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);
案例2：求最大值(最小值)
1.2 $.extend()扩展jQuery类方法
方法：
$.extend({
// abcd:function(){
// alert(2);
// },
// getMax:function(a,b){
// return a>b?a:b;
// },
// getMin:function(){
// return a<b?a:b;
// }
// });
最后调用类方法(必须接收或者大打印)
var max=$.getMax(12,34);
console.info(max);
// $.abcd();
1.3 $.fn.extend()扩展jQuery对象方法
定义方法：$.fn.extend({xx:function(){//方法名//遍历$(this).each(function(i,ck){//ck每一个复选框 ,this指代调用方法的人即三个复选框ck.checked=true;//让其选中})},yy:function(){//遍历$(this).each(function(i,ck){//ck每一个复选框ck.checked=false;//让其选中})}})案例3：实现全选效果
1.按钮实现全选：
1.按钮实现全选调用方法$("#ok").click(function(){$(".aaa").xx();}),$("#not").click(function(){$(".aaa").yy();})2.复选框实现全选
2.复选框实现全选$("#qx").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);
})
二、第三方插件:使用jQuery validation插件完成表单
案例4：表单验证(用户名、密码、确认密码、年龄、邮箱、网址url)
required：必填
$("#myForm").validate({
rules:{
//规则部分
uname:{
required:true,
rangelength:[6,10]//长度6-10之间
},
upwd1:"required",
upwd2:{
required:true,
equalTo:"#upwd1"
},
uemail:{
required:true,
email:true
},
uage:{
required:true,
range:[1,150]//1-150
},
uurl:{
required:true,
url:true
}
},
messages:{
//信息提示部分
uname:{
required:"用户名必填",
rangelength:"用户名长度必须在6-10之间"
},
upwd1:"密码必填",
upwd2:{
required:"新密码必填",
equalTo:"#upwd1"
},
uemail:{
required:"邮箱必填",
email:"邮箱格式不正确"
},
uage:{
required:"年龄必填",
range:"年龄要在1-150之间"//1-150
},
uurl:{
required:"网址必填",
url:"网址格式不正确"
}
}
})
GoodGoodStudy,dayDayUp!
jQuery ---- 插件相关推荐
- jQuery插件thickbox在ie下垂直居中问题
jQuery 插件 thickbox 3.1 在ie下总不能垂直居中,按"http://jamazon.co.uk/web/2008/03/17/thickbox-31-ie7-positi ...
- 自己开发开源jquery插件--给jquery.treeview加上checkbox
很多时候需要把树状的数据显示除来,比如分类,中国省份.城市信息,等,因此这方面的javascript插件也有很多.比如性能优异的jquery.treeview和国人开发的功能强大的zTree. 我最近 ...
- 推荐两款简单好用的图片放大jquery插件
一.zoomfiy.js 推荐可以从这里下载 使用说明: 使用该jquery 插件 引入该插件的js:zoomfiy.js 或 min 引入该插件的css:zoomfiy.css 或 min 前后顺序 ...
- 动感效果的TAB选项卡 jquery 插件
动感效果的TAB选项卡 jquery 插件 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...
- 【JQUBAR1.1】jQuery 插件发布
[JQUBAR1.1]jQuery 插件发布 JQUBAR1.1 简介 2010-11-22在博客园发布了柱状图JQUBar1.0 jQuery 插件.现将该插件升级为1.1版本. 1.1版本修复了部 ...
- 240个jquery插件
240个jquery插件 http://www.kollermedia.at/archive/2007/11/21/the-ultimate-jquery-plugin-list/ File uplo ...
- 基于Jquery插件Uploadify实现实时显示进度条上传图片
网址:http://www.jb51.net/article/83811.htm 这篇文章主要介绍了基于Jquery插件Uploadify实现实时显示进度条上传图片的相关资料,感兴趣的小伙伴们可以参考 ...
- 51 jQuery插件库
技术交流QQ群:1027579432,欢迎你的加入! 欢迎关注我的微信公众号:CurryCoder的程序人生 1.jQuery插件 jQuery功能比较有限,想要更复杂的特效功能,可以借助于jQuer ...
- 开源炫酷css轮播图 可直接引入html文件使用 含注释 jQuery插件
开源炫酷css轮播图 可直接引入html文件使用 含注释 jQuery插件 1.轮播图样式 上图: 请访问:这里!! 查看轮播图效果. 2.如何在html里面引用 文件的目录路径为: 需要轮播图插件的 ...
- jquery插件制作
jquery插件丰富,很多都是很好用的,最近学习了一下如何制作jquery插件,发现jquery插件制作其实很简单,这里介绍一下. jquery插件的基本格式: (function($){$.fn.t ...
最新文章
- 八皇后时间复杂度_LeetCode46：全排列（八皇后）
- spring基于注解的IOC以及IoC的案例——概念
- 【dlib opencv - detector landmark】 ubuntu上针对dlib-hog和opencv haar人脸检测与landmar-68在不同平台上运行时间实验结果汇总
- 山海伏妖录java_山海伏妖录攻略大全 剧情结局加点妖兽大全
- React+Webpack快速上手指南
- linux如何进入opt目录,Linux 程序安装目录 /opt 目录和 /usr/local 目录
- CentOS7.5安装Tigervnc-server
- Python源码保护
- 新买的电脑 Windows10/Windows11即将过期怎么办
- webpack 拾翠：充分利用 CommonsChunkPlugin()
- Spring Boot入门-快速搭建网页
- Windows下安装Redis及可视化工具
- fusion 360自定义螺纹配置文件下载以及安装方法
- PDF 转成 一张图片
- 第二证券|两大板块掀涨停潮，有个股猛拉20cm！这只港股复牌一度暴跌
- Phpyun人才系统6.4_6.5零工市场开源代码小程序上架步骤更新流程
- OUC软件工程实验四：猫狗大战
- java面试准备及技巧分享
- PMP 报名有什么条件？容易满足吗？
- 安装mini-ndn v0.1.1