1扩展插件
理解：$是函数，可以当对象使用（也称jQuery对象），$（）返回的是一个新对象
1.1扩展jQuery函数对象的方法 $.extend(object)
$.extend({
xxx: fuction () {} // this是$
})
$.xxx()
1.2扩展jQuery对象的方法 $.fn.extend(object)
$.fn.extend({
xxx: function(){} // this是jQuery对象
})
$obj.xxx()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>25_扩展插件</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="反选"/>
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript" src="js/my_jQuery-plugin.js"></script>
//这句一定要在jQuery库引入之后写
<script type="text/javascript">
/*
需求：
1. 给 $ 添加4个工具方法:
* min(a, b) : 返回较小的值
* max(c, d) : 返回较大的值
* leftTrim() : 去掉字符串左边的空格
* rightTrim() : 去掉字符串右边的空格
2. 给jQuery对象 添加3个功能方法:
* checkAll() : 全选
* unCheckAll() : 全不选
* reverseCheck() : 全反选
*/
console.log($.min(3, 5), $.max(3, 5))
var string = ' my atguigu '
console.log('-----' + $.leftTrim(string) + '-----')
console.log('-----' + $.rightTrim(string) + '-----')
var $items = $(':checkbox[name=items]')
$('#checkedAllBtn').click(function () {
$items.checkAll()
})
$('#checkedNoBtn').click(function () {
$items.unCheckAll()
})
$('#reverseCheckedBtn').click(function () {
$items.reverseCheck()
})
</script>
</body>
</html>
|
my_jQuery-plugin.js
(function () {
// 扩展$的方法
$.extend({
min: function (a, b) {
return a < b ? a : b
},
max: function (a, b) {
return a > b ? a : b
},
leftTrim: function (str) {
return str.replace(/^s+/, '')
},
rightTrim: function (str) {
return str.replace(/s+$/, '')
}
})
// 扩展jQuery对象的方法
$.fn.extend({
checkAll: function () {
this.prop('checked', true) // this是jQuery对象
},
unCheckAll: function () {
this.prop('checked', false)
},
reverseCheck: function () {
// this是jQuery对象
this.each(function () {
// this是dom元素
this.checked = !this.checked
})
}
})
})()
|
2 jQuery插件
1）理解
基于jQuery编写的扩展库
http://plugins.jquery.com/
2）常用的jQuery插件
①jquery-validation表单验证插件，参考"菜鸟教程"学习
使用方法：
①下载，引入
jquery-1.11.1.js
jquery.validate.js
messages_zh.js
②定义验证
直接在标签中指定
js编码指定
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript">
/*
声明式验证: 程序员只需要声明各种验证规则, 可以自定义验证错误信息
*/
//对此表单开户验证
$('#myForm').validate({
messages: {
username: {
required: '用户名是必须的',
minlength: '用户名至少为6位'
},
pwd1: {
required: '密码是必须的',
minlength: '密码至少为6位',
maxlength: '密码最多8位'
},
pwd2: {
equalTo: '必须与密码相同'
}
}
})
</script>
|
②jquery UI
http://jqueryui.com/ 官网可以查看各种效果
UI（user interface 用户接口（界面））
// 1. Accordion: 手风琴（类似之前的折叠菜单）
$('#accordion').accordion()
// 2. Autocomplete: 自动搜索匹配
$( "#autocomplete" ).autocomplete({
source: dataSource // 数据源
});
// 3. Tabs: 选项卡
$('#tabs').tabs()
③laydate 日期控件
http://www.layui.com/laydate/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/laydate.js"></script>
</head>
<body>
<input placeholder="请输入日期" class="laydate-icon" onclick="laydate()">
<input class="laydate-icon" id="demo" value="2014-6-25更新">
<script type="text/javascript">
;!function(){
laydate.skin('molv');
laydate({
elem: '#demo'
})
}()
</script>
<div id="test1" class="laydate-icon"></div>
<script>
laydate({ // 配置对象
elem: '#test1',
format: 'YYYY/MM', // 分隔符可以任意定义，该例子表示只显示年月
festival: true, //显示节日
choose: function(datas){ //选择日期完毕的回调
alert('得到：'+datas);
}
});
</script>
<div id="hello3" class="laydate-icon"></div>
<script>
laydate({
elem: '#hello3',
min: laydate.now(-1), //-1代表昨天，-2代表前天，以此类推
max: laydate.now(+1) //+1代表明天，+2代表后天，以此类推
});
</script>
</body>
</html>
|