jQuery插件扩展与多库共存
查看扩展写法
1、工具类扩展
2、对象方法扩展
/*
扩展jQuery的工具方法 : $.extend(object)
min(a, b) : 返回较小的值
max(c, d) : 返回较大的值
leftTrim() : 去掉字符串左边的空格
rightTrim() : 去掉字符串右边的空格
*/
//正则
/*
^ 匹配字符串开始
\s 匹配空格
+ 匹配一次或者多次
$ 匹配字符串的末尾
*/
//扩展$
$.extend({
min: function (a, b) {
return (a < b) ? a : b
},
max: function (a, b) {
return (a > b) ? a : b
},
leftTrim: function (strToBeTrimed) {
return strToBeTrimed.replace(/^\s+/, ‘‘)
},
rightTrim: function (strToBeTrimed) {
return strToBeTrimed.replace(/\s+$/, ‘‘)
}
})
//扩展 $(‘#id‘).XXXXX
//$.fn.extend(object)
// checkAll() : 全选
// unCheckAll() : 全不选
// reverseCheck() : 全反选
$.fn.extend({
checkAll: function () {
// console.log(‘checkAll‘)
this.prop(‘checked‘, true)
},
unCheckAll: function () {
this.prop(‘checked‘, false)
},
reverseCheck: function () {
this.each(function () {
this.checked = !this.checked
})
}
})其他库也使用$标识时，jQuery可以释放$使用权
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>26_多库共存</title>
<style type="text/css">
* {
margin: 0px;
}
.div1 {
position: absolute;
width: 100px;
height: 100px;
top: 50px;
left: 10px;
background: red;
}
</style>
</head>
<body>
<!--
问题 : 如果有2个库都有$, 就存在冲突
解决 : jQuery库可以释放$的使用权, 让另一个库可以正常使用, 此时jQuery库只能使用jQuery了
API : jQuery.noConflict()
-->
<script src="js/myLib.js" type="text/javascript"></script>
<script src="js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//释放$的使用权,让另一个库可以正常使用
jQuery.noConflict()
//使用的是myLib.js中的$
$()
//使用jQuery
jQuery(function () {
jQuery(‘body‘)
})
</script>
</body>
</html>