标签：jquer ... https var ons comm dso eve ams
http://www.jq22.com/ jQuery插件库
http://www.htmleaf.com/ jQuery 之家
用法
$(dom).select2()
$(dom).select({
width:,
data:,
ajax:,
....
})用法
//设置语言
$.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>
用法
<!--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>
用法
$("#lazyWrapper img").lazyload()
?
用法
layer.alert()
layer.confirm()
layer.msg()
layer.load()
layer.tips()
layer.colse()
layer.open({
type: ,
title: ,
content:
....
})
...
?
用法
$("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>
用法
$(dom).hide(speed, easing, fn)
?
jQuery.fn.extend() 给jQueryDom扩展方法
$.fn.extend({
方法名:function(){}
})
//或者
$.fn.方法名 = function(){
}
jQuery.extend() 给jQuery 对象本身扩展方法
$.extend({
方法名: function(){
}
})
?
标签：jquer ... https var ons comm dso eve ams
原文地址：https://www.cnblogs.com/sui776265233/p/9534924.html
