1 jQuery 插件的网站
-
http://www.jq22.com/ jQuery插件库
-
http://www.htmleaf.com/ jQuery 之家
2 经典jQuery插件
2.1 select2 下拉框搜索插件
-
用法
$(dom).select2() $(dom).select({ width:, data:, ajax:, .... })
2.2 datetimepicker 时间日期插件
-
用法
//设置语言 $.datetimepicker.setLocale('zh'); //调用插件 $(dom).datetimepicker({ datepicker:, timepicker:, format:"Y-m-d H:i", value:， .... })
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery插件</title> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" /> <link rel="stylesheet" href="../jquery.datetimepicker.css"> <style> select { width:200px; } </style> </head> <body> <h1>jquery插件</h1> <hr> <label for="#">请选择您的籍贯</label> <select name="" id="jiguan"> <option value="1">上海</option> <option value="1">北京</option> <option value="1">新疆</option> <option value="1">台湾</option> <option value="1">香港</option> <option value="1">澳门</option> <option value="1">西藏</option> <option value="1">火星</option> <option value="1">云南</option> <option value="1">福建</option> <option value="1">辽宁</option> <option value="1">吉林</option> <option value="1">黑龙江</option> <option value="1">黑龙江</option> </select> <hr> <label for="birthDay">请输入您的生日：</label> <input type="text" id="birthDay"> <script src="../jquery.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script> <script src="../jquery.datetimepicker.full.js"></script> <script> $(function(){ $('#jiguan').select2(); //时间日期插件 $.datetimepicker.setLocale('zh'); $('#birthDay').datetimepicker({ format:"Y-m-d H:i" }); }) </script> </body> </html>
2.3 fullpage 全屏滚动插件
-
用法
<!--HTML部分--> <div id="fullpage> <div class="section"></div> <div class="section"> <div class="slide"></div> <div class="slide"></div> <div class="slide"></div> </div> <div class="section"></div> <div class="section"></div> </div> 自定义的导航 卸载包裹元素的外面 <!--JS部分--> <script> $("#fullpage").fullpage({ navigation: true, sectionsColor: [] ..... }) </script>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>全屏滚动</title> <link href="https://cdn.bootcss.com/fullPage.js/2.9.7/jquery.fullpage.css" rel="stylesheet"> <style> .slide { color: #fff; font-size:100px; text-align: center; } </style> </head> <body> <!--HTML部分--> <div id="fullpage"> <div class="section"> <h2>Page1</h2> </div> <div class="section"> <div class="slide">A</div> <div class="slide">B</div> <div class="slide">C</div> </div> <div class="section"> <h2>Page3</h2> </div> <div class="section"> <h2>Page4</h2> </div> </div> <script src="../jquery-3.3.1.js"></script> <script src="https://cdn.bootcss.com/fullPage.js/2.9.7/jquery.fullpage.js"></script> <script> $('#fullpage').fullpage({ navigation: true, sectionsColor: ['red', 'green','purple', 'orange'] }); </script> </body> </html>
2.4 lazyload 图片懒加载
-
用法
$("#lazyWrapper img").lazyload()
2.5 layer 弹窗插件
-
用法
layer.alert() layer.confirm() layer.msg() layer.load() layer.tips() layer.colse() layer.open({ type: , title: , content: .... }) ...
2.6 nice validator 表单验证
-
用法
$("form").validator({ })
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单验证</title> <style> input { width: 300px; border:1px solid #ccc; padding:10px; font-size:16px; } button { width: 322px; border:1px solid #ccc; background:#f5f5f5; line-height: 40px; cursor: pointer; font-size:16px; } td.success { color:green; } td.error { color:red; } </style> </head> <body> <h1>注册</h1> <hr> <form action="user.php" id="myForm"> <table> <tr> <td>用户名：</td> <td><input type="text" name="username" id="usernameInput"></td> <td></td> </tr> <tr> <td>邮箱：</td> <td><input type="text" name="email" id="emailInput"></td> <td></td> </tr> <tr> <td>密码：</td> <td><input type="password" name="pwd" id="pwdInput"></td> <td></td> </tr> <tr> <td>确认密码：</td> <td><input type="password" name="repwd" id="repwdInput"></td> <td></td> </tr> <tr> <td></td> <td> <button>注 册</button> </td> <td></td> </tr> </table> </form> <script src="../jquery-3.3.1.js"></script> <script> //表单验证 $(function(){ //用户名验证事件 $('#usernameInput').on('blur', checkUsername); //邮箱验证事件 $('#emailInput').on('blur', checkEmail); //密码验证事件 $('#pwdInput').on('blur', checkPwd); //确认密码 验证 $('#repwdInput').on('blur', checkRepwd); //表单提交事件 $('#myForm').on('submit', function(){ return checkUsername() && checkEmail() && checkPwd() && checkRepwd(); }); //验证 用户名 function checkUsername(){ //获取 用户输入的内容 var value = $('#usernameInput').val(); //验证 用户输入是否合法 4~12位 数字/字母/下划线 if (value.search(/^\w{4,12}$/) === -1) { $('#usernameInput').parent().next().text('用户名不合法 必须是4~12位数字、字母、下划线').attr('class', 'error') return false; } else { $('#usernameInput').parent().next().text('用户名可用').attr('class', 'success') return true; } } //验证邮箱 // abcc@12.com sdf-sdf@1243.com sdfasdf@123.com.cn // www.niho.中国 function checkEmail() { //获取用户的输入 var value = $('#emailInput').val(); //验证 if (value.search(/^[\w-]+@[\w-]+(\..+){1,3}$/) === -1) { $('#emailInput').parent().next().text('邮箱不合法').attr('class', 'error'); return false; } else { $('#emailInput').parent().next().text('邮箱可用').attr('class', 'success'); return true; } } //验证密码 6-18位 function checkPwd(){ //获取用户输入 var value = $('#pwdInput').val(); //验证 if (value.length < 6 || value.length > 18) { $('#pwdInput').parent().next().text('密码必须是6到18位').attr('class', 'error'); return false; } else { $('#pwdInput').parent().next().text('密码可用').attr('class', 'success'); return true; } } //确认密码 function checkRepwd() { //获取用户输入和上一次密码 var pwd = $('#pwdInput').val(); var repwd = $('#repwdInput').val(); //验证 if (pwd !== repwd) { $('#repwdInput').parent().next().text('两次密码不一致').attr('class', 'error'); return false; } else { $('#repwdInput').parent().next().text('两次密码一致').attr('class', 'success'); return true; } } }) </script> </body> </html>
2.7 jQuery-easing
-
用法
$(dom).hide(speed, easing, fn)
3 自定义jQuery 插件
jQuery.fn.extend() 给jQueryDom扩展方法
$.fn.extend({
方法名:function(){}
})
//或者
$.fn.方法名 = function(){ } jQuery.extend() 给jQuery 对象本身扩展方法
$.extend({
方法名: function(){
}
})
1665
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
