DOM jquery表单验证 滚动菜单 jquery 扩展方法
一、表单验证
1.DOM
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .item{ width: 250px; height: 60px; position: relative; } .item input{ width: 200px; } .item span{ position: absolute; top: 20px; left: 0px; font-size: 8px; background-color: indianred; color: white; display: inline-block; width: 200px; } </style> </head> <body> <div> <form> <div class="item"> <input class="c1" type="text" name="username" label="用户名"/> <!--<span>用户名不能为空</span>--> </div> <div class="item"> <input class="c1" type="password" name="pwd" label="密码"/> <!--<span>密码不能为空</span>--> </div> <!--<input type="submit" value="提交" onclick="return CheckValid();" />--> <input type="submit" value="提交" /> </form> </div> <script src="jquery-1.12.4.js"></script> <script> $(function(){ }); $('form input').click(function(){ }); function CheckValid(){ // 找到form标签下的所有需要验证的标签 // $('form .c1') // $('form input[type="text"],form input[type="password"]') // 循环所有需要验证的标签，获取内容 $('form .item span').remove(); var flag = true; $('form .c1').each(function () { // 每一个元素执行次匿名函数 // this //console.log(this,$(this)); var val = $(this).val(); if(val.length<=0){ var label = $(this).attr('label'); var tag = document.createElement('span'); tag.innerText = label + "不能为空"; $(this).after(tag); flag = false; } }); return flag; } </script> </body> </html>
2.jquery表单验证：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .item{ width: 250px; height: 60px; position: relative; } .item input{ width: 200px; } .item span{ position: absolute; top: 20px; left: 0px; font-size: 8px; background-color: indianred; color: white; display: inline-block; width: 200px; } </style> </head> <body> <div> <form> <div class="item"> <input class="c1" type="text" name="username" label="用户名"/> <!--<span>用户名不能为空</span>--> </div> <div class="item"> <input class="c1" type="password" name="pwd" label="密码"/> <!--<span>密码不能为空</span>--> </div> <!--<input type="submit" value="提交" onclick="return CheckValid();" />--> <input type="submit" value="提交" /> </form> </div> <script src="jquery-1.12.4.js"></script> <script> $(function(){ // 当页面框架加载完成之后，自动执行 BindCheckValid(); }); function BindCheckValid(){ $('form :submit').click(function(){ // $('form .item span').remove(); var flag = true; $('form .c1').each(function () { // 每一个元素执行次匿名函数 // this //console.log(this,$(this)); var val = $(this).val(); if(val.length<=0){ var label = $(this).attr('label'); var tag = document.createElement('span'); tag.innerText = label + "不能为空"; $(this).after(tag); flag = false; return false; } }); return flag; }); } function CheckValid(){ // 找到form标签下的所有需要验证的标签 // $('form .c1') // $('form input[type="text"],form input[type="password"]') // 循环所有需要验证的标签，获取内容 $('form .item span').remove(); var flag = true; $('form .c1').each(function () { // 每一个元素执行次匿名函数 // this //console.log(this,$(this)); var val = $(this).val(); if(val.length<=0){ var label = $(this).attr('label'); var tag = document.createElement('span'); tag.innerText = label + "不能为空"; $(this).after(tag); flag = false; } }); return flag; } </script> </body> </html>
表单验证
显示效果：
二、jquery扩展方法
两种方式：
http://www.php100.com/manual/jquery/
第一种方式闭包：
js：extend1.js
a = function(jq){ jq.extend({ 'dalong1': function(arg){ console.log(arg); } }); function f1(){ } }; a(jQuery);
html调用
<script src="extend1.js"></script>
<script> $.dalong1('123'); </script>
第二种方式，自执行：
js：extend1.js
(function(jq){ jq.extend({ 'dalong1': function(arg){ console.log(arg); } }); function f1(){ } })(jQuery);
html调用
<script src="extend1.js"></script> <script> $.dalong1('123'); </script>
三、jquary表单验证做成扩展的方式使用
js：commons.js
/** * Created by alex on 2016/8/28. */ (function(jq){ function ErrorMessage(inp,message){ var tag = document.createElement('span'); tag.innerText = message; inp.after(tag); } jq.extend({ valid:function(form){ // #form1 $('#form1') jq(form).find(':submit').click(function(){ jq(form).find('.item span').remove(); var flag = true; jq(form).find(':text,:password').each(function(){ var require = $(this).attr('require'); if(require){ var val = $(this).val(); if(val.length<=0){ var label = $(this).attr('label'); ErrorMessage($(this),label + "不能为空"); flag = false; return false; } var minLen = $(this).attr('min-len'); if(minLen){ var minLenInt = parseInt(minLen); if(val.length<minLenInt){ var label = $(this).attr('label'); ErrorMessage($(this),label + "长度最小为"+ minLen); flag = false; return false; } //json.stringify() //JSON.parse() } var phone = $(this).attr('phone'); if(phone){ // 用户输入内容是否是手机格式 var phoneReg = /^1[3|5|8]\d{9}$/; if(!phoneReg.test(val)){ var label = $(this).attr('label'); ErrorMessage($(this),label + "格式错误"); flag = false; return false; } } // 1、html自定义标签属性 // 增加验证规则+错误提示 } // 每一个元素执行次匿名函数 // this //console.log(this,$(this)); /* var val = $(this).val(); if(val.length<=0){ var label = $(this).attr('label'); var tag = document.createElement('span'); tag.innerText = label + "不能为空"; $(this).after(tag); flag = false; return false; } */ }); return flag; }); } }); })(jQuery);
html调用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .item{ width: 250px; height: 60px; position: relative; } .item input{ width: 200px; } .item span{ position: absolute; top: 20px; left: 0px; font-size: 8px; background-color: indianred; color: white; display: inline-block; width: 200px; } </style> </head> <body> <div> <form id="form1"> <div class="item"> <input class="c1" type="text" name="username" label="用户名" require="true" min-len="6"/> </div> <div class="item"> <input class="c1" type="password" name="pwd" label="密码"/> </div> <div class="item"> <input class="c1" type="text" name="phone" label="手机" require="true" phone="true"/> </div> <input type="submit" value="提交" /> </form> </div> <script src="jquery-1.12.4.js"></script> <script src="commons.js"></script> <script> $(function(){ $.valid('#form1'); }); </script> </body> </html>
四、滚动菜单
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> body{ margin: 0px; } img { border: 0; } ul{ padding: 0; margin: 0; list-style: none; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .wrap{ width: 980px; margin: 0 auto; } .pg-header{ background-color: #303a40; -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2); -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2); box-shadow: 0 2px 5px rgba(0,0,0,.2); } .pg-header .logo{ float: left; padding:5px 10px 5px 0px; } .pg-header .logo img{ vertical-align: middle; width: 110px; height: 40px; } .pg-header .nav{ line-height: 50px; } .pg-header .nav ul li{ float: left; } .pg-header .nav ul li a{ display: block; color: #ccc; padding: 0 20px; text-decoration: none; font-size: 14px; } .pg-header .nav ul li a:hover{ color: #fff; background-color: #425a66; } .pg-body{ } .pg-body .catalog{ position: absolute; top:60px; width: 200px; background-color: #fafafa; bottom: 0px; } .pg-body .catalog.fixed{ position: fixed; top:10px; } .pg-body .catalog .catalog-item.active{ color: #fff; background-color: #425a66; } .pg-body .content{ position: absolute; top:60px; width: 700px; margin-left: 210px; background-color: #fafafa; overflow: auto; } .pg-body .content .section{ height: 500px; } </style> </head> <body> <div class="pg-header"> <div class="wrap clearfix"> <div class="logo"> <a href="#"> <img src=""> </a> </div> <div class="nav"> <ul> <li> <a href="#">首页</a> </li> <li> <a href="#">功能一</a> </li> <li> <a href="#">功能二</a> </li> </ul> </div> </div> </div> <div class="pg-body"> <div class="wrap"> <div class="catalog"> <div class="catalog-item" auto-to="function1"><a>第1张</a></div> <div class="catalog-item" auto-to="function2"><a>第2张</a></div> <div class="catalog-item" auto-to="function3"><a>第3张</a></div> </div> <div class="content"> <div menu="function1" class="section" style='background-color:green;'> <h1>第一章</h1> </div> <div menu="function2" class="section" style='background-color:yellow;'> <h1>第二章</h1> </div> <div menu="function3" class="section" style='background-color:red;'> <h1>第三章</h1> </div> </div> </div> </div> <script type="text/javascript" src="jquery-1.8.2.min.js"></script> <script type="text/javascript"> $(function(){ // 自动执行 Init(); }); function Init(){ $(window).scroll(function() { // 监听窗口滚动事件 // 获取滚动条高度 var scrollTop = $(window).scrollTop(); // 当滚动到50像素时，左侧带菜单固定 if(scrollTop > 50){ $('.catalog').addClass('fixed'); }else{ $('.catalog').children().removeClass('active'); $('.catalog').removeClass('fixed'); } // 循环所有的内容 $('.content').children().each(function(){ // 当前标签距离顶部高度 var offSet = $(this).offset(); // 高度，左边有多远 // offSet.top // offSet.left // 自身高度 var height = $(this).height(); //offSet<滚动高度<offSet+height // 当前内容位于用户阅览区 if(scrollTop>offSet.top && scrollTop< offSet.top + height){ // $(this) 当前内容标签 /* var target = $(this).attr('menu'); $('.catalog').find('div[auto-to="'+target+'"]').addClass('active').siblings().removeClass('active'); return false; */ var docHeight = $(document).height(); var winHeight = $(window).height(); // 如果，滚轮到达底部，则显示最后一个菜单 if(docHeight == winHeight+scrollTop) { $('.catalog').find('div:last-child').addClass('active').siblings().removeClass('active'); }else{ var target = $(this).attr('menu'); $('.catalog').find('div[auto-to="'+target+'"]').addClass('active').siblings().removeClass('active'); } return false; } }); }); } </script> </body> </html>
显示效果
五、正则
六、前端插件
fontawsome
1.以下三个插件 网站样式
easyui
http://www.jeasyui.net/
jqueryui
http://www.jqueryui.org.cn/
bootstrap 模板 alex常用
http://v3.bootcss.com/
-- 引入css
-- 引入jQuery（2.x，1.12）
-- 引入js
-- bootstrap模版
2图片相关插件
bxslider 图片轮转效果 类似flash
http://bxslider.com/
jquery.lazyload 延迟加载图片 滚动到页面 图片才加载
