我们可以扩展jquery，自定义方法，在使用的时候可以直接调用
需求：
1. 给 $ 添加4个工具方法:
* min(a, b) : 返回较小的值
* max(c, d) : 返回较大的值
* leftTrim() : 去掉字符串左边的空格
* rightTrim() : 去掉字符串右边的空格
2. 给jQuery对象 添加3个功能方法:
* checkAll() : 全选
* unCheckAll() : 全不选
* reverseCheck() : 全反选
my_jQuery-plugin.js：
/* 需求： 1. 给 $ 添加4个工具方法: * min(a, b) : 返回较小的值 * max(c, d) : 返回较大的值 * leftTrim() : 去掉字符串左边的空格 * rightTrim() : 去掉字符串右边的空格 2. 给jQuery对象 添加3个功能方法: * checkAll() : 全选 * unCheckAll() : 全不选 * reverseCheck() : 全反选 */ (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 }) } }) })()
使用：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <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 type="text/javascript" src="js/my_jQuery-plugin.js"></script> <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) + '-----') //$items为jquery的对象 var $items = $(':checkbox[name=items]') $('#checkedAllBtn').click(function () { $items.checkAll() }) $('#checkedNoBtn').click(function () { $items.unCheckAll() }) $('#reverseCheckedBtn').click(function () { $items.reverseCheck() }) </script> </body> </html>