jQuery之插件
扩展插件
$.extend(object)：扩展jQuery的工具方法。
$.fn.extend(object)：扩展jQuery对象的方法。
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>扩展插件</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 type="text/javascript" src="../js/jquery.min.js"></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()：全反选 */ //得到最大最小值 var a = 1; var b = 2; var result_min = $.min(a, b); var result_max = $.max(a, b); console.log(result_min); console.log(result_max); //左trim，右trim var str = ' 悟空 '; console.log('|' + str + '|'); var resultStrLeft = $.leftTrim(str); console.log('|' + resultStrLeft + '|'); var resultStrRight = $.rightTrim(str); console.log('|' + resultStrRight + '|'); //全选 $('#checkedAllBtn').click(function () { $(':checkbox').checkAll(); }); //全不选 $('#checkedNoBtn').click(function () { $(':checkbox').unCheckAll(); }); //反选 $('#reverseCheckedBtn').click(function () { $(':checkbox').reverseCheck(); }); </script> </body> </html>
my_jQuery_plugin.js代码：
/* * 扩展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插件
说明：
基于jQuery编写的扩展库（http://plugins.jquery.com/）。
分类：
jqueryValidation：表单验证插件，参考菜鸟教程学习。
jqueryUI：界面插件（http://jqueryui.com/）。
laydate：时间插件（http://www.layui.com/laydate/）。
jQueryValidate示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQueryValidate测试</title> <style type="text/css"> .error { color: #F00; } </style> </head> <body> <!-- required: "This field is required.", remote: "Please fix this field.", email: "Please enter a valid email address.", url: "Please enter a valid URL.", date: "Please enter a valid date.", dateISO: "Please enter a valid date ( ISO ).", number: "Please enter a valid number.", digits: "Please enter only digits.", equalTo: "Please enter the same value again.", maxlength: $.validator.format( "Please enter no more than {0} characters." ), minlength: $.validator.format( "Please enter at least {0} characters." ), rangelength: $.validator.format( "Please enter a value between {0} and {1} characters long." ), range: $.validator.format( "Please enter a value between {0} and {1}." ), max: $.validator.format( "Please enter a value less than or equal to {0}." ), min: $.validator.format( "Please enter a value greater than or equal to {0}." ), step: $.validator.format( "Please enter a multiple of {0}." ) --> <form id="myForm" action="xxx"> <p>用户名(必须的, 最小2位): <input name="name" type="text" required minlength="2"></p> <p>密码(必须的, 6到8位): <input id="password" name="pwd" type="password" required minlength="6" maxlength="8"></p> <p>确认密码(与密码相同): <input name="pwd2" type="password" equalTo="#password"></p> <input class="submit" type="submit" value="提交"> </form> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript" src="../js/jquery.validate.js"></script> <script type="text/javascript"> /* * 声明式验证 */ $(function () { $('#myForm').validate({ messages: { name: { required: '用户名是必须的', minlength: '用户名的最小长度是2' }, pwd: { required: '密码是必须的', minlength: '密码的最小长度是6', maxlength: '密码的最大长度是8' }, pwd2: { equalTo: '确认密码必须与密码相同' } } }); }) </script> </body> </html>
jqueryUI示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQueryUI测试</title> <link rel="stylesheet" href="../js/jquery-ui.css"> </head> <body> <!-- 1.Accordion：手风琴效果 --> <h2>1. Accordion: 手风琴效果</h2> <div id="accordion"> <h3>First</h3> <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div> <h3>Second</h3> <div>Phasellus mattis tincidunt nibh.</div> <h3>Third</h3> <div>Nam dui erat, auctor a, dignissim quis.</div> </div> <!-- 2.Autocomplete：自动完成搜索输入框 --> <h2>2. Autocomplete: 自动完成搜索输入框</h2> <div> <input id="autocomplete" title="type "a""> </div> <!-- 3.Tabs：选项卡 --> <h2>3. Tabs: 选项卡</h2> <div id="tabs"> <ul> <li><a href="#tabs-1">First</a></li> <li><a href="#tabs-2">Second</a></li> <li><a href="#tabs-3">Third</a></li> </ul> <div id="tabs-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> <div id="tabs-2">Phasellus mattis tincidunt nibh. Cras orci urna, blandit id, pretium vel, aliquet ornare, felis. Maecenas scelerisque sem non nisl. Fusce sed lorem in enim dictum bibendum.</div> <div id="tabs-3">Nam dui erat, auctor a, dignissim quis, sollicitudin eu, felis. Pellentesque nisi urna, interdum eget, sagittis et, consequat vestibulum, lacus. Mauris porttitor ullamcorper augue.</div> </div> <script type="text/javascript" src="../js/jquery.min.js"></script> <script type="text/javascript" src="../js/jquery-ui.js"></script> <script type="text/javascript"> //1.Accordion：手风琴效果 $('#accordion').accordion(); //2.Autocomplete：自动完成搜索输入框 var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme" ]; $("#autocomplete").autocomplete({ source: availableTags }); //3.Tabs：选项卡 $('#tabs').tabs(); </script> </body> </html>
laydate示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>laydate测试</title> <style type="text/css"> li { list-style: none; } </style> <script type="text/javascript" src="laydate/laydate.js"></script> </head> <body> <input placeholder="请输入日期" class="laydate-icon" onclick="laydate()"> <br> <br> <input class="laydate-icon" id="demo" value="2014-6-25"> <script type="text/javascript"> laydate({ elem: '#demo' }) </script> <br> <br> 开始日：<li class="laydate-icon" id="start" style="width:200px; margin-right:10px;"></li> 结束日：<li class="laydate-icon" id="end" style="width:200px;"></li> <script type="text/javascript"> var start = { elem: '#start', format: 'YYYY/MM/DD hh:mm:ss', min: laydate.now(), //设定最小日期为当前日期 max: '2099-06-16 23:59:59', //最大日期 istime: true, istoday: false, choose: function (datas) { end.min = datas; //开始日选好后，重置结束日的最小日期 end.start = datas //将结束日的初始值设定为开始日 } }; var end = { elem: '#end', format: 'YYYY/MM/DD hh:mm:ss', min: laydate.now(), max: '2099-06-16 23:59:59', istime: true, istoday: false, choose: function (datas) { start.max = datas; //结束日选好后，重置开始日的最大日期 } }; laydate(start); laydate(end); </script> </body> </html>
