1 jQuery 插件的网站
http://plugins.jquery.com/ 官网
http://www.jq22.com/ jQuery插件库
http://www.htmleaf.com/ jQuery 之家
2 经典jQuery插件
2.1 ### select2 下拉框搜索插件
官网 https://select2.org/
github https://github.com/select2/select2
用法
$(dom).select2()$(dom).select({ ?width:, ?data:, ?ajax:, ?....})
2.2 datetimepicker 时间日期插件
github https://github.com/xdan/datetimepicker
文档 https://xdsoft.net/jqplugins/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 全屏滚动插件
官网 https://alvarotrigo.com/fullPage/zh/
github https://github.com/alvarotrigo/fullpage.js/
用法
<!--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 图片懒加载
官网 https://appelsiini.net/projects/lazyload/
github https://github.com/tuupola/jquery_lazyload/tree/2.x
用法
$("#lazyWrapper img").lazyload()?
2.5 layer 弹窗插件
官网 http://layer.layui.com/?alone
github https://github.com/sentsin/layer/
用法
layer.alert()layer.confirm()layer.msg()layer.load()layer.tips()layer.colse()layer.open({ ?type: , ?title: , ?content: ??....})...?
2.6 nice validator 表单验证
官网 https://validator.niceue.com/
github https://github.com/niceue/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
官网 http://gsgd.co.uk/sandbox/jquery/easing/
github https://github.com/gdsmith/jquery.easing
用法
$(dom).hide(speed, easing, fn)?
3 自定义jQuery 插件
jQuery.fn.extend() 给jQueryDom扩展方法
$.fn.extend({ ?方法名:function(){}})//或者$.fn.方法名 = function(){}jQuery.extend() 给jQuery 对象本身扩展方法
$.extend({ ??方法名: function(){ ??}})?
4 jQuery UI
官网 https://jqueryui.com/
?
5 jQueryMobile
官网 https://jquerymobile.com/
教程 http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html
?
6 Sizzle
- 官网 https://sizzlejs.com/
7 Zepto
- 官网 http://zeptojs.com/
- 与jquery区别： https://www.zhihu.com/question/25379207
jQuery插件
原文地址：https://www.cnblogs.com/sui776265233/p/9534924.html