最新消息
标签搜索
jQuery 判断输入框的值是否为空
一个虔诚的教书人、 web 前端爱好者。
-
jQuery + CSS 实现侧边栏左侧滑入滑出动画 需求点击某个图标或文字时，从左侧滑入侧边栏，再次点击滑出。实现<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery + CSS 实现侧边栏左侧滑入滑出</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } #sidebar { position: fixed; height: 100%; width: 200px; left: -200px; background: #34be56; z-index: 9; } </style> </head> <body> <div class="nav">显示/隐藏</nav> <div id="sidebar"> <div>菜单1</div> <div>菜单2</div> <div>菜单3</div> <div>菜单4</div> </div> </body> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script> //isHiden只是返回部件的隐藏属性，并不能表示部件当前的真实状态。 isHiden = true; $(".nav").click(function () { if (isHiden) { $('#sidebar').animate({ left: '0' }).show();//菜单块向右移动 } else { $('#sidebar').animate({ left: '-200px' }); //菜单块向左移动 } isHiden = !isHiden; }) </script> </html>效果 -
jQuery 弹出层点击非本区域或遮罩层隐藏 576 人围观 扯一下闲话菜鸟想要实现一个效果，就要受尽很多折磨。今天花了几个小时都没实现，回家后又花了半小时，终于实现了。想要的效果点击一个按钮，弹出一个侧边菜单，同时显示一个遮罩层再次点击按钮，侧边栏和遮罩层隐藏弹出层的子元素不受影响实现过程css代码.proup { position: fixed; display: none; width: 100%; height: 100%; top: 0; left: 0; cursor: pointer; z-index: 7777; background: rgba(0,0,0,0.65); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }html代码<div class="btn"></div> <div class="proup"></div> <div class="menu"> <ul> <li></li> <li></li> <li></li> </ul> </div> jQuery 代码$('.btn').click(function(event) { event.stopPropagation(); $('.menu').toggle(); $('.proup').toggle(); }) $(document).click(function(event){ var _m = $('.menu'); if(!_m.is(event.target) && _m.has(event.target).length == 0){ $('.menu').hide(); $('.proup').hide(); } })实现原理使用 event.stopPropagation(); 取消事件冒泡；通过 !_m.is(event.target) && _m.has(event.target).length == 0 判断，点击非本区域或遮罩层时隐藏侧边栏
-
jQuery 文字超出高度后折叠 实现<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery 文字超出高度后折叠</title> <style> .container{ margin: 0 auto; width: 500px; border: green 1px solid; } .content{ position: relative; overflow: hidden; padding: 15px; } .more{ text-align: right; padding: 15px; } </style> </head> <body> <div class="container"> <div class="content"> 我以为要是唱的用心良苦，你就会对我义无反顾，我真的不会对你再爱一次，请你别再为我留太多的泪。也许这是真的不应该说，下一次我会给你更好的告别。 </div> <div class="more"></div> </div> </body> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $(function(){ let zxHeight = 30;//最小高度 let mrHeight = $('.content').height();//默认高度 if (mrHeight >= mrHeight){ $('.content').css('height',zxHeight + 'px'); $('.more').append('<a href="#">展开</a>'); $('.more a').click(function(){ let dqHeight = $('.content').height();//当前高度 if (dqHeight > zxHeight){ $('.content').animate({height:zxHeight},'normal'); $('.more a').text('展开'); } else { $('.content').animate({height:mrHeight},'normal'); $('.more a').text('折叠'); } return false; }); } }); </script> </html>效果
-
jQuery 判断输入框的值是否为空 632 人围观 需求分析我想要判断输入框的值是否为空，如果为空就弹框提示，并且返回焦距到输入框。实现<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <input type="text" id="inputValue" placeholder="请输入内容" /> <input type="button" value="提交" id="btn" /> </body> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $('#btn').click(function () { if ($('#inputValue').val() == '' || $.trim($('#inputValue').val() == '')) { $('#inputValue').focus() $('#inputValue').attr('placeholder', '内容不能为空') } }) </script> </html>
