扩展插件
原创wg_iGBFcBFB 博主文章分类:Jquery ©著作权
©著作权归作者所有:来自51CTO博客作者wg_iGBFcBFB的原创作品,请联系作者获取转载授权,否则将追究法律责任
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 扩展插件</title>
<style type="text/css">
* {
margin: 0px;
}
.div1 {
position: absolute;
width: 100px;
height: 100px;
top: 50px;
left: 10px;
background: red;
}
</style>
</head>
<body>
<input type="checkbox" name="items" value="足球"/>足球
<input type="checkbox" name="items" value="篮球"/>篮球
<input type="checkbox" name="items" value="羽毛球"/>羽毛球
<input type="checkbox" name="items" value="乒乓球"/>乒乓球
<br/>
<input type="button" id="checkedAllBtn" value="全 选"/>
<input type="button" id="checkedNoBtn" value="全不选"/>
<input type="button" id="reverseCheckedBtn" value="反选"/>
<!--
1. 扩展jQuery的工具方法
$.extend(object)
2. 扩展jQuery对象的方法
$.fn.extend(object)
-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script src="js/my_jQuery_plugin.js" type="text/javascript"></script>
<script type="text/javascript">
/*
需求:
1. 给 $ 添加4个工具方法:
* min(a, b) : 返回较小的值
* max(c, d) : 返回较大的值
* leftTrim() : 去掉字符串左边的空格
* rightTrim() : 去掉字符串右边的空格
2. 给jQuery对象 添加3个功能方法:
* checkAll() : 全选
* unCheckAll() : 全不选
* reverseCheck() : 全反选
*/
// 1. 给 $ 添加4个工具方法:
// * min(a, b) : 返回较小的值
// * max(c, d) : 返回较大的值
// * leftTrim() : 去掉字符串左边的空格
// * rightTrim() : 去掉字符串右边的空格
// 2. 给jQuery对象 添加3个功能方法:
// * checkAll() : 全选
// * unCheckAll() : 全不选
// * reverseCheck() : 全反选
console.log($.min(3,9));
console.log($.max(3,9));
var str = ' at eric ';
console.log('---'+$.leftTrim(str));
console.log('---'+$.rightTrim(str)+'---');
$('#checkedAllBtn').click(function(){
// this 指向当前调用的 jquery 对象
$(':checkbox').checkAll();
})
$('#checkedNoBtn').click(function(){
$(':checkbox').unCheckAll();
})
$('#reverseCheckedBtn').click(function(){
$(':checkbox').reverseCheck()
})
</script>
</body>
</html>
/*
扩展jQuery的工具方法 : $.extend(object)
min(a, b) : 返回较小的值
max(c, d) : 返回较大的值
leftTrim() : 去掉字符串左边的空格
rightTrim() : 去掉字符串右边的空格
*/
//正则
/*
^ 匹配字符串开始
\s 匹配空格
+ 匹配一次或者多次
$ 匹配字符串的末尾
*/
//扩展$
$.extend({
min:function(a,b){
return a>b ? b:a;
},
max:function(a,b){
return a>b ? a:b;
},
leftTrim:function($str){
return str.replace(/^\s+/,'')
},
rightTrim:function(str){
return str.replace(/\s+$/,'')
}
})
//扩展 $('#id').XXXXX
//$.fn.extend(object)
// checkAll() : 全选
// unCheckAll() : 全不选
// reverseCheck() : 全反选
$.fn.extend({
checkAll:function(){
this.prop('checked',true);
},
unCheckAll:function(){
this.prop('checked', false);
},
reverseCheck:function(){
this.each(function(){
this.checked = !this.checked;
})
}
})
上一篇:淡入淡出 滑动 显示与隐藏
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
vim 扩展插件安装
Linux 的文本编辑器 vim 功能不仅强大,还支持安装各种插件,但是插件的安装一直是让小伙伴们头疼的问题。下面uscd
vim linux bash github git -
etc 配置docker 转发
如何使用docker部署disconf服务应用包下载操作系统docker & docker-composedockerdocker-compose应用包目录服务启动参考链接 应用包下载由于disconf服务部署时所依赖的基础软件环境较多,在服务器上逐个安装对应的依赖环境会让管理工作变得复杂,这里介绍通过docker来部署disconf,让服务部署变得更加简单和快捷。在部署之前需要准备di
etc 配置docker 转发 docker disconf docker-compose centos