1.扩展jQuery工具
给 jQuery工具 添加4个工具方法:
min(a, b) : 返回较小的值 max(c, d) : 返回较大的值 leftTrim() : 去掉字符串左边的空格 rightTrim() : 去掉字符串右边的空格
如何实现呢?请参考以下代码:
// 扩展jQuery工具的方法 $.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工具的方法 console.log($.min(3, 5)); console.log($.max(3, 5)); console.log('-----' + $.leftTrim(' hello ') + '-----'); console.log('-----' + $.rightTrim(' hello ') + '-----');
2.扩展jQuery对象
给 jQuery对象 添加3个功能方法:
checkAll() : 全选 unCheckAll() : 全不选 reverseCheck() : 全反选
如何实现呢?请参考以下代码:
// 扩展jQuery对象的方法 $.fn.extend({ checkAll: function () { this.prop('checked', true); }, unCheckAll: function () { this.prop('checked', false); }, reverseCheck: function () { this.each(function () { this.checked = !this.checked; }); } });
<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="全反选"/>
// 测试扩展jQuery对象的方法 var $items = $(':checkbox[name=items]'); $('#checkedAllBtn').click(function () { $items.checkAll(); }); $('#checkedNoBtn').click(function () { $items.unCheckAll(); }); $('#reverseCheckedBtn').click(function () { $items.reverseCheck(); });