工作中jQuery常用实例-主要功能总结整理
来源：互联网 发布：ubuntu zip命令 编辑：程序博客网 时间：2024/06/05 16:57
1、jQuery鼠标经过选项卡内容切换代码
引入jQuery库，
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
主要代码jQuery代码：
<script type="text/javascript">$('.o-m .ul-o li').hover(function () {var linum = $(this).index()$('.o-m .ul-t li').eq(linum).stop().show().siblings().hide()})$(function () {var slip = $('.li-mask');var a = $('.o-m .ul-o li:first');//初始化滑块slip.css({'top': parseInt(a.position().top) + 'px'});$('.o-m .ul-o li').mouseenter(function () {//显示滑块if (slip.css('display') == 'none') {slip.show();};//移动滑块slip.stop().animate({top: parseInt($(this).position().top) + 'px'}, 300);});});</script>HTML部分：
<div class="o-m"><div class="ul-o"><ul><li class="li-o"><span></span><p>2014年5月</p><div class="clear"></div><b></b></li><li class="li-t"><span></span><p>2015年6月</p><div class="clear"></div><b></b></li><li class="li-s"><span></span><p>2016年7月</p><div class="clear"></div><b></b></li><li class="li-f"><span></span><p>2017年8月</p><div class="clear"></div><b></b></li><li class="li-w"><span></span><p>2018年9月</p><div class="clear"></div><b></b></li><li class="li-l"><span></span><p>2019年10月</p><div class="clear"></div><b></b></li><div class="li-mask"></div></ul></div><div class="ul-t"><li style="display:block"><div class="li-top"><h5>2014年5月</h5><p>强大视觉冲击力提升网站形象实力，极具销售力的产品展示突出卖点，吸引眼球打动客户；</p><div class="li-a"><a>专业的官网</a><a>产品展示</a><a>文章展示</a><a>地图位置</a><a>走马灯</a><a>全屏浮动</a><a>视频</a><a>多种图文特效</a></div><div class="li-img"><img src="img/n-qyjz-40.gif" /></div></div></li><li><div class="li-top"><h5>2015年6月</h5><p>PC端+手机端全网搜索引擎SEO优化，提升网站排名引流量，更多客户找到您，<br />强大推广方式+超强营销工具，扩大客流量、订单量</p><div class="li-a"><a>PC+手机端</a><a>SEO优化</a><a>一键分享传播</a><a>抢红包</a><a>朋友助力</a><a>众筹</a><a>好友赞助</a><a>一元夺宝</a></div><div class="li-img"><img src="img/n-qyjz-47.gif" /></div></div></li><li><div class="li-top"><h5>2015年6月</h5><p>全新"分销加盟+三级返佣"模式体系，无限发展下游，让您的分销商满天下；</p><div class="li-a"><a>精美分销店铺</a><a>自选分销产品</a><a>一键分销</a><a>无限下级</a><a>分销商管理</a><a>佣金管理</a><a>推广文案管理</a></div><div class="li-img"><img src="img/n-qyjz-48.gif" /></div></div></li><li><div class="li-top"><h5>2015年6月</h5><p>方便的客服沟通工具，实时互动咨询，快速提升询盘率和成交转化率，变流量为销量；</p><div class="li-a"><a>多种热门客服工具</a><a>微客服</a><a>在线留言板</a></div><div class="li-img"><img src="img/n-qyjz-49.gif" /></div></div></li><li><div class="li-top"><h5>2015年6月</h5><p>强大的商品管理，团购、秒杀等电商功能促进高销量，方便快捷的购物车及支付方式促成交，流量、业绩统计分析尽在掌握中；</p><div class="li-a"><a>产品管理</a><a>订单管理</a><a>物流配送管理</a><a>数据统计分析</a><a>团购</a><a>秒杀</a><a>砍价</a><br /><a>购物车</a><a>多种在线支付</a><a>扫码支付</a></div><div class="li-img"><img src="img/n-qyjz-50.gif" /></div></div></li><li><div class="li-top"><h5>2015年6月</h5><p>客户管理、维系、关怀全方位，结合高效互动营销工具，深度挖掘新老客户潜力价值，刺激客户持续消费 </p><div class="li-a"><span>客户管理：</span><a>会员管理</a><a>会员卡</a><a>会员预约</a><a>积分管理</a><a>优惠券</a><br /><span>客户关怀：</span><a>签到</a><a>生日积分</a><a>充值</a><a>开卡</a><a>消费赠送</a><a>贺卡</a><br /><span>抽奖互动：</span><a>大转盘</a><a>刮刮卡</a><a>砸金蛋</a><a>摇一摇</a><a>微现场</a><br /><span>提升服务：</span><a>调研</a><a>投票</a></div><div class="li-img"><img src="img/n-qyjz-51.gif" /></div></div></li></div><div class="clear"></div></div>实现的效果图：
2、jQuery注册页面
引入jQuery库
<script src="libs/jquery-1.12.4.min.js" type="text/javascript"></script>
主要的实现功能代码片段
$(function(){var stuList = getStuList();//设置传送信息：学生的集合 //聚焦失焦input$('input').eq(0).focus(function(){if($(this).val().length==0){$(this).parent().next("div").text("支持中文，字母，数字，'-'，'_'的多种组合");}})$('input').eq(1).focus(function(){if($(this).val().length==0){ $(this).parent().next("div").text("建议使用字母、数字和符号两种以上的组合，6-20个字符");}})$('input').eq(2).focus(function(){if($(this).val().length==0){$(this).parent().next("div").text("请再次输入密码");}})$('input').eq(3).focus(function(){if($(this).val().length==0){$(this).parent().next("div").text("验证完后，你可以使用该手机登陆和找回密码");}})$('input').eq(4).focus(function(){if($(this).val().length==0){$(this).parent().next().next("div").text("看不清？点击图片更换验证码");}})//input各种判断//用户名：$('input').eq(0).blur(function(){if($(this).val().length==0){$(this).parent().next("div").text("");$(this).parent().next("div").css("color",'#ccc');}else if($(this).val().length>0 && $(this).val().length<4){$(this).parent().next("div").text("长度只能在4-20个字符之间");$(this).parent().next("div").css("color",'red');}else if($(this).val().length>=4&& !isNaN($(this).val())){$(this).parent().next("div").text("用户名不能为纯数字");$(this).parent().next("div").css("color",'red');}else{for(var m=0;m<stuList.length;m++){if($(this).val()==stuList[m].name){$(this).parent().next("div").text("该用户名已被注册");$(this).parent().next("div").css("color",'red');return;}}$(this).parent().next("div").text("");}})//密码$('input').eq(1).blur(function(){if($(this).val().length==0){$(this).parent().next("div").text("");$(this).parent().next("div").css("color",'#ccc');}else if($(this).val().length>0 && $(this).val().length<6){$(this).parent().next("div").text("长度只能在6-20个字符之间");$(this).parent().next("div").css("color",'red');}else{$(this).parent().next("div").text("");}})//确认密码$('input').eq(2).blur(function(){if($(this).val().length==0){$(this).parent().next("div").text("");$(this).parent().next("div").css("color",'#ccc');}else if($(this).val()!=$('input').eq(1).val()){$(this).parent().next("div").text("两次密码不匹配");$(this).parent().next("div").css("color",'red');}else{$(this).parent().next("div").text("");}})//手机号$('input').eq(3).blur(function(){if($(this).val().length==0){$(this).parent().next("div").text("");$(this).parent().next("div").css("color",'#ccc');}else if($(this).val().substr(0,3)!=138&&$(this).val().substr(0,3)!=189&&$(this).val().substr(0,3)!=139&&$(this).val().substr(0,3)!=158&&$(this).val().substr(0,3)!=188&&$(this).val().substr(0,3)!=157||$(this).val().length!=11){$(this).parent().next("div").text("手机号格式不正确");$(this).parent().next("div").css("color",'red');}else{$(this).parent().next("div").text("");}})// 验证码// 验证码刷新function code(){var str="qwertyuiopasdfghjklzxcvbnm1234567890QWERTYUIOPLKJHGFDSAZXCVBNM";var str1=0;for(var i=0; i<4;i++){str1+=str.charAt(Math.floor(Math.random()*62)) }str1=str1.substring(1)$("#code").text(str1);}code();$("#code").click(code);//验证码验证$('input').eq(4).blur(function(){if($(this).val().length==0){$(this).parent().next().next("div").text("");$(this).parent().next().next("div").css("color",'#ccc');}else if($(this).val().toUpperCase()!=$("#code").text().toUpperCase()){$(this).parent().next().next("div").text("验证码不正确");$(this).parent().next().next("div").css("color",'red');}else{$(this).parent().next().next("div").text("");}})//提交按钮$("#submit_btn").click(function(e){for(var j=0 ;j<5;j++){if($('input').eq(j).val().length==0){$('input').eq(j).focus();if(j==4){$('input').eq(j).parent().next().next("div").text("此处不能为空");$('input').eq(j).parent().next().next("div").css("color",'red');e.preventDefault();return;}$('input').eq(j).parent().next(".tips").text("此处不能为空");$('input').eq(j).parent().next(".tips").css("color",'red');e.preventDefault();return;}}//协议if($("#xieyi")[0].checked){//向变量stuList数组添加一个数值，数值内部格式Student(name,password,tel,id)//发送用户信息stuList.push(new Student($('input').eq(0).val(),$('input').eq(1).val(),$('input').eq(3).val(),stuList.length+1)); localStorage.setItem('stuList',JSON.stringify(stuList)); alert("注册成功");window.open("userlist.html","_blank");}else{$("#xieyi").next().next().next(".tips").text("请勾选协议");$("#xieyi").next().next().next(".tips").css("color",'red');e.preventDefault();return;}})// 建立构造函数，构造学生信息模板function Student(name,password,tel,id){ this.name = name; this.password = password; this.tel = tel; this.id = id; }//获取之前所有已经注册的用户集合function getStuList(){ var list = localStorage.getItem('stuList'); if(list != null){ return JSON.parse(list); }else{ return new Array(); }}})html部分
<section><form action=""><div class="register-box"><label for="username" class="username_label">用 户 名<input maxlength="20" type="text" placeholder="您的用户名和登录名"></label><div class="tips"></div></div><div class="register-box"><label for="username" class="other_label">设 置 密 码<input maxlength="20" type="password" placeholder="建议至少使用两种字符组合"></label><div class="tips"></div></div><div class="register-box"><label for="username" class="other_label">确 认 密 码<input maxlength="20" type="password" placeholder="请再次输入密码"></label><div class="tips"></div></div><div class="register-box"><label for="username" class="other_label"><span>中国 0086∨</span><input class="phone" maxlength="20" type="text" placeholder="建议使用常用手机"></label><div class="tips"></div></div><div class="register-box"><label for="username" class="other_label">验 证 码<input maxlength="20" type="text" placeholder="请输入验证码"></label><span id="code"></span><div class="tips"></div></div><div class="arguement"><input type="checkbox" id="xieyi">阅读并同意<a href="#">《用户注册协议》</a><a href="#">《隐私政策》</a><div class="tips"></div></div><div class="submit_btn"><button type="submit" id="submit_btn">立 即 注 册</button></div></form></section>
实现的效果图：
3、jQuery Banner图片旋转切
引入jQuery库
<script src="js/jquery-1.7.2.min.js"></script>主要的实现功能代码：
<script> $(function () { /*图片位置数据*/ var datas = [ {'z-index': 6, opacity: 1, width: 760, height: 330, top: 40, left: 0}, {'z-index': 4, opacity: 0.6, width: 560, height: 243, top:80, left: -225}, {'z-index': 3, opacity: 0.4, width: 480, height: 203, top: -10, left: -170}, {'z-index': 2, opacity: 0.2, width: 620, height: 269, top: -60, left: 110}, {'z-index': 3, opacity: 0.4, width: 480, height: 203, top: -10, left: 430}, {'z-index': 4, opacity: 0.6, width: 560, height: 243, top: 80, left: 420}, ] move(); function move() { /*图片分布*/ for (var i = 0; i < datas.length; i++) { var data = datas[i]; $('#slide ul li').eq(i).css('z-index',data['z-index']); $('#slide ul li').eq(i).stop().animate(data, 1200); } } /*左箭头事件*/ $('.prev').on('click', function () { var last = datas.pop(); datas.unshift(last); move(); }) /*右箭头事件处理函数*/ function nextYewu(){ var first = datas.shift(); datas.push(first); move(); } /*右箭头事件*/ $('.next').on('click', nextYewu); /*自动播放*/ var timer = setInterval(function(){ nextYewu(); },5000); /*鼠标进入slide显示箭头,清除自动播放*/ $('#slide').on({ mouseenter: function () { $('.arrow').css('display', 'block'); clearInterval(timer); }, mouseleave: function () { $('.arrow').css('display', 'none'); /*鼠标离开时自动播放*/ clearInterval(timer); timer = setInterval(function(){ nextYewu(); },5000) } }) })</script>html部分：
<div class="teachers_banner"> <div class="container clearfix teachers_b"> <div class="slide" id="slide"> <ul> <li> <img src="images/teacher01.jpg" alt="林奇涵" title=""> </li> <li> <img src="images/teacher02.jpg" alt="易星晨" title=""> </li> <li> <img src="images/teacher03.jpg" alt="曾海阳" title=""> </li> <li> <img src="images/teacher04.jpg" alt="狄俊祺" title=""> </li> <li> <img src="images/teacher05.jpg" alt="仲颖鸣" title="" /> </li> <li> <img src="images/teacher06.jpg" alt="徐晓磊" title="" /> </li> </ul> <div class="arrow"> <div class="prev"><</div> <div class="next">></div> </div> </div> </div></div>
实现的效果图：
4、jQuery手风琴下拉菜单
引入jQuery库
<script type="text/javascript" src="js/jquery.min.js"></script>
主要实现的jQuery代码：
<script type="text/javascript">$(".list_dt").on("click",function () {$('.list_dd').stop();$(this).siblings("dt").removeAttr("id");if($(this).attr("id")=="open"){$(this).removeAttr("id").siblings("dd").slideUp();}else{$(this).attr("id","open").next().slideDown().siblings("dd").slideUp();}});</script>主要的html部分：
<dl class="list_dl"><dt class="list_dt"><span class="_after"></span><p>选择器</p><i class="list_dt_icon"></i></dt><dd class="list_dd"><ul><li class="list_li">#id</li><li class="list_li">element</li></ul></dd><dt class="list_dt"><span class="_after"></span><p>属性</p><i class="list_dt_icon"></i></dt><dd class="list_dd"><ul><li class="list_li">attr</li><li class="list_li">removeAttr</li></ul></dd><dt class="list_dt"><span class="_after"></span><p>文档处理</p><i class="list_dt_icon"></i></dt><dd class="list_dd"><ul><li class="list_li">append</li><li class="list_li">appendTo</li></ul></dd><dt class="list_dt"><span class="_after"></span><p>事件</p><i class="list_dt_icon"></i></dt><dd class="list_dd"><ul><li class="list_li">ready</li><li class="list_li">on</li></ul></dd><dt class="list_dt"><span class="_after"></span><p>AJAX</p><i class="list_dt_icon"></i></dt><dd class="list_dd"><ul><li class="list_li">$.ajax</li><li class="list_li">$.get</li></ul></dd><dt class="list_dt"><span class="_after"></span><p>效果</p><i class="list_dt_icon"></i></dt><dd class="list_dd"><ul><li class="list_li">show</li></ul></dd></dl>
实现的效果图：
5、倒计时
引入jQuery库
<script src="js/jquery-1.8.3.min.js"></script> <script src="js/jquery.lwtCountdown-1.0.js"></script>
主要实现工作的代码：
<script language="javascript" type="text/javascript">jQuery(document).ready(function() {$('#countdown').countDown({targetDate: {'day': 1,'month': 1,'year': 2018,'hour': 11,'min': 0,'sec': 0}});$('#email_field').focus(email_focus).blur(email_blur);$('#subscribe_form').bind('submit', function() { return false; });}); </script>html部分主要的代码：
<div class="container"><div class="timer-box"><h5>Our site will be launched soon. We will be up and running in:</h5><div id="countdown"> <div class="dash weeks_dash"> <span class="dash_title">周</span> <div class="digit">0</div> <div class="digit">0</div> </div> <div class="dash days_dash"> <span class="dash_title">天</span> <div class="digit">0</div> <div class="digit">0</div> </div> <div class="dash hours_dash"> <span class="dash_title">小时</span> <div class="digit">0</div> <div class="digit">0</div> </div> <div class="dash minutes_dash"> <span class="dash_title">分</span> <div class="digit">0</div> <div class="digit">0</div> </div> <div class="dash seconds_dash"> <span class="dash_title">秒</span> <div class="digit">0</div> <div class="digit">0</div> </div></div> <!-- end of countdown --></div><!--/timer-box--></div>
效果图：
阅读全文
0 0
- 工作中jQuery常用实例-主要功能总结整理
- 工作中boostrap常用实例-主要功能总结
- jquery实例以及常用jQuery主要功能实现
- jquery 操作工作中总结
- 工作中遇到jquery/javascript整理
- 工作中常用的linux操作整理
- jquery中常用的一些知识整理
- 工作常用加密整理
- 工作中常用的Linux命令总结
- 工作中常用Linux命令总结
- 工作中常用的正则表达式总结
- 工作中常用 Git 命令的总结
- idea工作中常用的快捷键总结
- css工作中常用的效果总结
- jQuery基础整理+实例
- jquery操作字符串常用方法总结及工作代码
- jquery操作字符串常用方法总结及工作代码
- 常用JQuery插件整理
- Window Store打包支持多语言
- 作为一个程序员需要学多少技能？
- TensorFlow基础用法入门教程
- EAGAIN、EWOULDBLOCK、EINTR与非阻塞 长连接
- 二分查找
- 工作中jQuery常用实例-主要功能总结整理
- 【java】Collection过滤
- 在工具类静态方法调用@Autowired注入的bean方法
- 极光推送
- java 学习--kotlin的安装配置
- cuda win10安装
- 使用webpack构建本地服务器,实现自动刷新
- 智能硬件安全问题凸显 海云安护航个人信息安全
- 【面向JS--数组遍历】
