jquery使用案例
Posted FuZZ
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery使用案例相关的知识，希望对你有一定的参考价值。
表单验证
Dom实现表单验证
通过在form标签的submit上绑定一个onclick事件，用户点击事，触发这个事件，执行Checkvalid()函数进行对表单中的元素值验证，验证通过之后，继续让submit之行自己的事件，post表单内容到服务器，如果验证不通过，则返回false，终止submit继续提交
- 代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .iterm { width: 250px; height: 60px; position: relative; } .iterm input { width: 200px; } .iterm span { position: absolute; top: 20px; left: 0px; background-color: red; font-size: 8px; color: white; display: inline-block; width: 202px; } </style> </head> <body> <div> <form> <div class="iterm"> <input class="c1" type="text" name="username" lable="用户名"/> <!--<span>用户名不能为空</span>--> </div> <div class="iterm"> <input class="c1" type="password" name="password" lable="密码" /> <!--<span>密码不能为空</span>--> </div> <input type="submit" name="提交"> </form> </div> </body> <script src="jquery-1.12.4.js"></script> <script> $(function() { //当页面框架加载完成之后，自动执行 BindCheckvalid(); }); function BindCheckvalid() { $(\'form input[type="submit"]\').click(function () { //点击submit，执行下面内容 var flag = true; $(\'form .iterm span\').remove(); // 清空之前出现的错误提示 $(\'form .c1\').each(function() { //每一个元素执行匿名函数 //this 循环的当前元素 var val = $(this).val(); if (val.length <= 0){ var name = $(this).attr(\'lable\'); var tag = document.createElement(\'span\'); tag.innerText = name + \'不能为空\'; $(this).after(tag); flag = false; return flag; //只要有一个验证不合法，终止验证 }; }); return false; }); }; </script> </html>
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="commons1.js"></script> <script> $(function(){ $.valid(\'#form1\'); }); </script> </body> </html>
- js代码
/** * Created by fuzj on 2016/9/3. */ (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);
滚动菜单
<!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:26个jQuery代码片段使用技巧