通过几个案例需求来了解Jquery
如何扩展方法
需求
给 $ 添加4个工具方法:
- min(a, b) : 返回较小的值
- max(c, d) : 返回较大的值
- leftTrim() : 去掉字符串左边的空格
- rightTrim() : 去掉字符串右边的空格
jQuery.extend()
jquery_plugin.js
(function(){
jQuery.extend({
min:function(a, b){
return a < b ? a : b;
},
max:function(c, d){
return c > d ? c : d;
},
leftTrim: function(str){
return str.replace(/^\s+/, '')
},
rightTrim:function(str){
return str.replace(/\s+$/, '')
}
})
})()
页面
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery_plugin.js"></script>
<script type="text/javascript">
console.log($.min(3, 5), $.max(3, 5))
var string = ' my atguigu '
console.log('-----' + $.leftTrim(string) + '-----')
console.log('-----' + $.rightTrim(string) + '-----')
</script>
给jQuery对象 添加3个功能方法:
$.fn.extend()
jquery_plugin.js
(function(){
$.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
})
}
})
})()
页面
<!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/jquery_plugin.js"></script>
<script type="text/javascript">
var $items = $(':checkbox[name=items]')
$('#checkedAllBtn').click(function () {
$items.checkAll()
})
$('#checkedNoBtn').click(function () {
$items.unCheckAll()
})
$('#reverseCheckedBtn').click(function () {
$items.reverseCheck()
})
</script>
</body>
</html>
JQ常用插件
- jquery-validation:表单验证插件
- jqueryUI: 是一组用户界面交互、特效、小部件及主题
- laydate:日期与时间组件