![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端开发日记
jiang_mingyi
想专注于整个软件开发流程,现阶段有部分前端开发经验和少量的后端开发经验
展开
-
前端开发日记之点击悬浮框之外的地方隐藏悬浮框
本次遇见的问题是:在拒绝订单时,页面弹出了一个悬浮框用于输入拒绝理由。需要我做的是:弹出悬浮框时,点击页面其它位置时会将悬浮框隐藏。在此处贴出代码://拒绝弹出框在点击弹出框其它位置时,隐藏弹出框 $(document).on('click',function(e){ if($('.reason').css('display')=="none原创 2016-10-26 10:32:25 · 2409 阅读 · 0 评论 -
JQ 写带!important 的css样式
如下的写法,CSS不会生效,html也不会显示style$(".test").css("color","red !important");如下写法生效,html会显示:style=“color:red !important”$(".test").css("cssText","color:red !important");分析原因:个人理解,!important修饰是整句CSS代码如“color:re原创 2017-04-25 11:37:23 · 1803 阅读 · 0 评论 -
同时上传多个文件问题
需求描述:每件仪器会有附件,而且不止一个。我们需要在上传仪器的时候,提供上传附件的方法。 难点:前端同时保存多个文件比较麻烦而且比较容易出错,但是如果每上传一次,就保存一次数据库,会导致数据库里大量的无用文件(因为用户在上传文件之后不一定会上传此仪器,导致之前存在数据库里的文件变为了无用文件)。 解决方案:采用每上传一次文件就提交一次数据库,但是存入数据库里的文件打上所属用户和是否使用的标签,在原创 2017-06-06 15:26:22 · 1103 阅读 · 0 评论 -
base标签和JSP声明变量解决文件相对路径和绝对路径问题
先看需求:同一个项目需要给不同的客户部署,有的客户使用windows,有的客户使用Linux。使用windows的客户,其用户文件是保存在tomcat的相对路径下;使用Linux的客户,其用户文件是保存在一个绝对路径下。 问题:同一个文件的显示,相对路径能够显示,绝对路径也可以显示。 解决方案:采用html的base标签<base href="http://****/**/" />......原创 2017-05-22 14:25:39 · 1142 阅读 · 0 评论 -
页面向下滚动一定距离显示固定搜索框
如淘宝首页那样,页面滚动到一定距离时,显示头部的搜索框。 具体代码很简单://屏幕向下走多高的距离,出现little-logo $(window).scroll(function(){ if($(window).scrollTop() > 167){ $('.little-logo').show(); }else{原创 2017-06-30 17:39:42 · 4103 阅读 · 1 评论 -
datatable插件应用于tab切换出现表头错位问题
场景描述:有一个tab切换,共两个页面,每个页面里都有一个table,并且采用了datatable插件。 问题:有一个table在初始化的时候,头部布局混乱。如图: 原因所在:tab切换前,有一个页面的display是none,发现只要原来是block的都没有问题,只要是none就有问题。检查元素发现,datatable有一个div(类名为dataTables_scrollHeadInner原创 2017-06-14 10:16:46 · 8886 阅读 · 2 评论 -
清除echarts 实例
clear只是清除画布,而不会清除实例。其会保留点击事件等。 想在同一个dom中画多个实例,肯定需要先销毁前一个,才能画后一个。echarts.init(document.getElementById('echarts')).dispose();//销毁前一个实例var myEcharts = echarts.init(document.getElementById('echarts'));//原创 2017-07-21 16:18:32 · 18556 阅读 · 5 评论 -
datatables报Requested unknown...错误
首先,datatables.net/tn/4问题为什么会出现,原因有两个: 1、传入的data值为空; 2、传入的data数据结构和想要的不一样。 第二种好解决,只要我们把数据类型匹配好就行。但是第一种有一个地方比较坑,datatables在传入值为空的时候是有默认值得,会显示 “No data available in table”. 问题就出现在这里,项目里面有这样一个操作:$('#a原创 2017-07-20 10:12:56 · 1077 阅读 · 0 评论 -
js动态添加的按钮,其响应事件的添加
function a(){ var str = "<a class='delete'>删除</a>"; $div.append(str);//如此添加的事件,其click事件是不能绑定的 $('.delete').on('click' function(){ ... });//在此需要重新写一次,相当于给新添加的a绑定click事件}$('.del原创 2017-10-18 15:01:37 · 2260 阅读 · 0 评论 -
<i></i>为0*0时,显示背景
我们经常用来显示图标,但是i是内联元素,其width和height是根据内容来的,如果没有内容其就为0*0,因而就显示不了背景。 为此,我们需要使用css将内联元素变为块级元素: display:block原创 2017-10-23 10:01:56 · 545 阅读 · 0 评论 -
:hover 实际选择的是子元素的原因
先看下面代码的区别.myDiv :hover{//:hover前有空格 background: blue; } .myDiv:hover{//:hover前没有空格 background: blue; }第一种:hover选择的是.myDiv的所有子元素,而第二种选择的是.myDiv本身。 第一种会将.myDiv的所有子元素的背景设为blue; 第二种会将.myDiv原创 2017-10-24 17:52:15 · 2077 阅读 · 3 评论 -
清空input[type='file']的文本域
file是没有value的概念的,所以不能直接清除file的文本域。现在提供两种方法来解决这个问题。一、先移除,在插入。就是先移除原有的demo里的file控件,然后在插入一个新的file控件。二、利用form的reset方法。form的reset方法可以将已上传的文件删除,但是其他输入也会被清空。我们可以构建一个临时的form表单,将file控件放在这个临时的form表单里,然后在重置这个原创 2017-10-25 15:12:45 · 5515 阅读 · 0 评论 -
多张图片的左右切换特效,实现循环切换
一个页面同时要显示多个图片,并且需要实现这多个图片的循环切换。 贴代码:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"原创 2017-11-13 22:26:00 · 8937 阅读 · 1 评论 -
HTML<button>和<input type="button"> 的区别
一、定义和用法 标签定义的是一个按钮。在 button 元素内部,可以放置文本或图像。这是与使用 input 元素创建的按钮的不同之处。二者相比较, 控件提供了更为强大的功能和更丰富的内容。 与 标签之间的所有内容都是按钮的内容,其中包括任何可接受的正文内容,比如文本或多媒体内容。例如,我们可以在按钮中包括一个图像和相关的文本,用它们在按钮中创建一个吸引人的标记图像。转载 2017-05-24 15:04:07 · 468 阅读 · 0 评论 -
data属性在原生JS、jq attr()和jq data()的不同表现。
首先记录一下,data-* 其中*不能为空和不能含有大写字母。然后是如何获取data的值。页面是这么写的:<a href="#" id="a" data-test="123">123</a>1.原生js获取:document.getElementById("a").dataset.test。2.jq attr()获取$("#a").attr("data-test")。3.jq data原创 2017-03-20 17:19:43 · 8585 阅读 · 0 评论 -
前端开发日记之表单验证中的select、option标签
各种表单验证的框架在判断select是否选值时,判断的基本上都是option的value属性。而html代码中select的第一个option基本上都是“请选择”,但是在表单判定时“请选择”是没有选值的。所以请选择中的value一定要等于空值,不然表单验证的时候就认为select是选择了值得。本次遇到这种情况,我们的源码写的是请选择,所以验证一直有问题,表示呵呵哒。。。。原创 2016-10-12 09:38:33 · 3798 阅读 · 1 评论 -
前端开发日记之form表单name属性详解
我们知道,$("#Form").serialize(),提交的是表单里控件的value值,并且是根据form里面的name属性来获取这些value值的。今天,我们就来谈一谈form表单里的name属性可能给我们带来的困扰。大家看如下代码:我们发现当form表单的name值和我们的js函数重名时,js函数就无法调用,会提示“Uncaught TypeError: test原创 2016-09-09 15:52:49 · 7268 阅读 · 0 评论 -
前端开发日记之表单提交
$("#orderForm").serialize(),提交的是表单里控件的name属性,而不是ID。而控件的disabled属性一旦为设为了true,$("#orderForm").serialize()将不会提交此控件的value值。本次遇见的问题是:有一个单选radio,在订单预定其它时间段时,需要将除时间段的其它所有input设为只读。而我们将radio的readyonly的属性设为TRU原创 2016-06-27 10:21:59 · 344 阅读 · 0 评论 -
前端开发日记之a的使用
是css链接样式问题 a:link 你第一眼看见链接时候的颜色 a:visited 你已经点击过链接再看见这个链接时候的颜色 a:hover 鼠标放在链接上链接的颜色 a:active 鼠标点击链接的一瞬间链接的颜色原创 2016-07-06 14:26:32 · 281 阅读 · 0 评论 -
前端开发日记之选择器的使用
主要总结一下,选择器中空格的使用。选择器中的空格一个困扰了我好久,通过查询资料和测试,现在来总结一下。先看下面一段代码;test.html jmy can fly just do it test.css.a .b .c { background-color:blue;}a.e:原创 2016-07-07 10:09:12 · 273 阅读 · 0 评论 -
前端开发日记之浮动下拉列表的设计
许多网站的导航栏都有浮动的下拉框,根据hover事件来决定下拉框的显示与隐藏。如猎聘的头部导航栏:html: 已完成订单 导出已完成订单 $('.nav-title').hover(function(){ $('.order_export').show()原创 2016-07-22 16:38:42 · 1044 阅读 · 0 评论 -
前端开发日记之window.onload
大家先自己想一想已下代码会输出什么?<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <script type="text/javascript"> function abc(){ var ele = document.getElementById("a");原创 2016-12-05 12:01:28 · 532 阅读 · 1 评论 -
选择器 排除多个元素
$("input:not([class='a'],[name='b'])");原创 2017-03-01 10:18:22 · 926 阅读 · 0 评论 -
前端开发日记之cookie的学习
session是运行在服务器,而cookie运行在客服端。本次的需求是,用户登录的时候可以选择不同的角色登录,我们需要记录用户上一次选择登录的角色,以便在用户下一次登录时自动地选择用户上一次的登录角色。贴上cookie操作的代码//设置或添加cookie time为小时数function setCookie(name,value,time){ var str = name原创 2016-10-19 09:45:02 · 343 阅读 · 0 评论 -
bootstrap-fileinput 删除事件的添加
bootstrap fileinput 的详细应用请参见博文:http://blog.csdn.net/wuwenjinwuwenjin/article/details/49507595 本文,主要补充一下上传的每张图片的删除事件怎么添加。 删除事件的添加,与前端没什么鸟关系,主要是根据后台返回的数据,后台返回的数据必须符合固定的数据格式,才能添加为每张上传的图片。后台返回的数据格式如下:{原创 2017-02-21 17:53:45 · 14881 阅读 · 8 评论 -
jquery.validate file验证jpg图片的坑
之前写的验证:file: { accept: "JPG|PNG" },发现jpg图片一直验证不了,后来发现要这么写:file: { accept: "JPEG|PNG" },这个时候PNG,JPG和JPEG都是接受的,目前还不知道为什么,等待进一步的探索。。。 进一步的探索出来了: 我原创 2017-02-20 17:34:46 · 3241 阅读 · 1 评论 -
ajax自带this对象
本篇博文主要讲,自己在前端开发中遇见的一个坑。先上代码:$(".setFirst").click(function () { var key = $(this).data("key"); var url = $(this).data("url"); var b = this;//这里的b为".setFirst原创 2017-02-14 14:41:38 · 195 阅读 · 0 评论 -
hover失效问题
在用后台数据重新构建html也就是demo树时,重新构建出来的控件是没有任何绑定事件的。//hover事件对ajax中重构的控件无效$('.a').hover(function(){ $('.b').show(); },function(){ $('.b').hide();原创 2017-02-15 09:49:11 · 1906 阅读 · 0 评论 -
file的onChange事件的添加
给type为file的input直接添加onChange事件存在一个问题:在上传后一个文件后,事件失效。 原因:上传后一个文件后,元素input会被重构,给之前元素添加的响应事件自然就失效了。 解决方案:给其父元素添加事件监听。 html:&lt;div class="parent"&gt; &lt;input type="file" class="fi原创 2018-05-22 13:13:25 · 11820 阅读 · 1 评论