Search
1
WordStyle:一款typecho后台美化插件
48.27w 阅
2
JOE 主题小王先森改版
11.86w 阅
3
Typecho 主题——Joe 使用文档
7k 阅
4
第三期全国中小学校党组织书记网络培训示范班学习心得
6.1k 阅
5
Word:一款专为文字创作而生的typecho主题
4.7k 阅
首页
分类
杂记
笔记
随记
页面
留言
归档
闲说
关于
推荐
极简主页
登 录
最新消息
I'M代代付
· 03-24
页面扁平了,好看~比如有技术,想让自己的博客怎么变就能怎么变,这不就是你的长处吗?这就是你的底气,是我想有却没有的~也是羡慕的~
Meteor
· 03-23
这首页跟我定制的有点像
南巷清风
· 03-23
文章不错。我是以 github 为主,然后 gitee 仓库手动点击镜像同步 github 仓库
老张博客
· 03-21
我也就是在这里找找东西,自己还没有仓库呢
南巷清风
· 03-19
很漂亮呀
Search
标签搜索
jQuery
小王先森
首页
栏目
杂记
笔记
随记
闲说
关于
页面
留言
归档
推荐
极简主页
登录
登 录
jQuery 判断输入框的值是否为空
一个虔诚的教书人、 web 前端爱好者。
jQuery 判断元素是否隐藏
564 人围观
经过学习我发现,判断元素是否隐藏的方式有很多,我觉得越简单越好。使用 css 属性值if($('div').css('display') == 'none'){ $('div').show() } else { $('div').hide() }使用 jQuery 选择器if($('div').is(':hidden')){ $('div').show() } else { $('div').hide() }使用 toggle() 函数$('div').toggle();
2021年04月07日
5
0
2.8k 人围观
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>效果
2021年04月06日
5
0
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 判断,点击非本区域或遮罩层时隐藏侧边栏
2021年04月01日
2
0
593 人围观
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>效果
2021年03月27日
2
0
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>
2021年03月25日
1
0
首页
闲说
归档
关于