前端
半笙彷徨
追求自我,超越自我
展开
-
JS-上传多张图片-支持拖动设置顺序-跨域上传
功能1.上传多张图片,放弃传统input.file形式上传,自定义数组保存文件; 2.可一次性选择多张图片,可追加图片,图片可以预览; 3.可拖动图片,顺序默认从左0开始; 4.可删除单个图片,或清空所有图片; 5.跨域上传;html<!DOCTYPE html><html> <head>原创 2018-08-18 16:16:48 · 4497 阅读 · 2 评论 -
前端-表格英文单词不换行问题
当表格内容是英文单词时,默认不会换行 解决方法:给table设置table-layout: fixed;**table下的td设置**word-wrap: break-word;<!DOCTYPE html><html> <head> <meta charset="UTF-8"&原创 2018-08-18 16:44:50 · 1966 阅读 · 0 评论 -
HTML-保留输出标签
在HTML文件,如果要保留输出标签,应该把内容放置在<xmp>标签内; <xmp>定义:<xmp>标签之间的内容不会被当作文档内容解析,而会被用等宽字体直接呈现; <pre> 定义:pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。...原创 2018-08-19 14:51:54 · 1946 阅读 · 0 评论 -
JQ-ajax使用CORS-AnyWhere实现任意跨域请求
使用ajax发起请求,如果是跨域请求,浏览器会报以下“错误”:Failed to load https://example.com/: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘https://anfo.pl' is therefore not allowed...原创 2018-09-08 17:49:55 · 4205 阅读 · 3 评论 -
JQ-AJAX-传递参数给success回调方法-AJAX自定义属性
如果ajax方法在循环里面,但是又要传递参数给success回调方法,可以在AJAX自定义属性,然后直接在success方法中通过this调用即可。var sites = {"url1":"url1","url2":"url2",}for(var key in sites) { var site = key; $.ajax({ url: 'www.e...原创 2018-09-09 13:56:17 · 2197 阅读 · 0 评论 -
JQ-动态添加元素-click方法没有触发解决方法
如果动态添加DOM元素,并且新元素使用click方法绑定,则click方法不会触发,因为click只能绑定页面已存在的元素,如果要给动态添加的元素绑定方法,应该使用代理方法,如on()。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <titl...原创 2018-09-09 15:40:56 · 4575 阅读 · 0 评论 -
JQ-AJAX执行成功不执行success方法解决
使用ajax方法请求成功,回调方法执行的不是success(),而是error(),先看 代码:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head&am原创 2018-09-09 16:24:18 · 13798 阅读 · 2 评论 -
JQ-AJAX-简单实用loading效果
在AJAX请求前设置loading效果:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> .modal { display: none; positio原创 2018-09-22 14:33:43 · 2719 阅读 · 0 评论 -
Jquery-Ajax-“Uncaught TypeError: Illegal invocation”错误
先看下ajax请求:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> &l原创 2018-09-30 18:06:25 · 1508 阅读 · 0 评论 -
JQ-select触发选中option之change事件
使用JQ触发select的选中事件<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <select class=&q原创 2018-11-11 15:32:58 · 32233 阅读 · 0 评论 -
JS-selectize插件使用
Selectize是基于jQuery的input和select的结合。它的使用场景通常在标记,联系人列表,国家/地区选择器等。GitHub:https://github.com/selectize/selectize.js例子:<!DOCTYPE html><html> <head> <meta charset="UTF-8">...原创 2018-12-29 15:04:52 · 2957 阅读 · 0 评论 -
CSS-使用background实现四个角边框
使用background实现四个角边框。CSS.question_title_content { background: linear-gradient(to left, rgba(51, 51, 51, 1), rgba(51, 51, 51, 1)) left top no-repeat, linear-gradient(to bottom, rgba(51, 51, 51, ...原创 2018-12-25 16:26:14 · 6391 阅读 · 2 评论 -
JS-单页面模拟【前进】【后退】
模拟在单个页面,默认隐藏content2内容,点击Next,往浏览器添加一条历史记录,点击浏览器的【后退】按钮,显示回content1内容。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title>原创 2018-08-11 18:34:27 · 982 阅读 · 0 评论 -
JS-元素超过可视区域后固定在头部
使用 JS实现元素超过可视区域后固定在头部功能<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <style&a原创 2018-08-11 18:04:29 · 1776 阅读 · 0 评论 -
jquery_lazyload插件学习
在加载有很多图片的页面时,如果一开始就把图片加载完的话,会导致页面加载速度慢,而且有时用户并不会看完整个页面,所以一开始就加载完所有图片不太合理。有个JQuery插件可以实现图片的懒加载,就是先加载用户当前视图的图片,滑倒滚动条后再加载其他图片。jquery_lazyload插件的地址: https://github.com/tuupola/jquery_lazyload介绍下简单的用法:1.原创 2017-01-22 18:18:26 · 621 阅读 · 0 评论 -
使用FormData上传多个文件
由于项目中使用到,特此写个Demo html代码:<html><head> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script></head&am原创 2018-05-13 23:57:02 · 59634 阅读 · 6 评论 -
JQ-获取选中的Checkbox
使用JQuery获取选中的Checkbox:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="https原创 2018-07-14 14:22:00 · 820 阅读 · 0 评论 -
JS-FormData对象使用
前言FormData 对象用来保存key/value结构的数据,通常用于from传输数据,也可以独立于form使用,用来传输密钥数据。例子1.创建FormData对象var formData = new FormData();formData.append("username", "Groucho");formData.append("accountnum", 123..原创 2018-07-14 17:40:39 · 10407 阅读 · 0 评论 -
JS-获取当前URL的参数
链接:http://localhost:8080/test/upload?test1=1&test2=2 获取问号后面的参数//返回对象function getUrlVars() { var vars = {}; var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/g...原创 2018-07-14 18:12:54 · 1528 阅读 · 0 评论 -
JQ-$.each()方法使用
jQuery的$.each()函数是全局函数,用于循环遍历jQuery对象的每个元素,它对于多元素DOM操作,循环任意数组和对象属性非常有用。 除了这个函数之外,jQuery还提供了一个具有相同名称的辅助函数,可以在不事先选择或创建DOM元素的情况下调用它。语法$.each(object,[callback]);参数object :需要遍历的对象或数组。callback:每个...原创 2018-07-15 00:09:16 · 15404 阅读 · 0 评论 -
手机浏览器点击标签出现蓝色背景解决方法
给标签设置如下样式:-webkit-tap-highlight-color:transparent;原创 2018-08-11 14:09:34 · 1057 阅读 · 0 评论 -
去掉input自动填充的黄色背景
添加样式:<style type="text/css"> input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset; }</style>原创 2018-08-11 14:13:39 · 1543 阅读 · 0 评论 -
去掉双击页面内容的蓝色背景
添加如下样式:-moz-user-select: none; /*火狐*/-webkit-user-select: none; /*webkit浏览器*/-ms-user-select: none; /*IE10*/-khtml-user-select: none; /*早期浏览器*/user-select: none;...原创 2018-08-11 14:16:05 · 682 阅读 · 0 评论 -
HTML-视频高度自适应解决方法
使用开源video.js 项目地址:https://github.com/videojs/video.js 代码:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> &原创 2018-08-11 15:16:18 · 20720 阅读 · 4 评论 -
JS-实现秒表倒计时+缓存倒计时
实现秒表倒计时+缓存倒计时功能<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body>原创 2018-08-11 17:27:23 · 1093 阅读 · 0 评论 -
JS-计算两个日期天数差
JS-计算两个日期天数直差function days_between(date1, date2) { var date1_ms = date1.getTime() var date2_ms = date2.getTime() var timeDiff = Math.abs(date1_ms - date2_ms) return Math.ceil(time...原创 2018-08-11 17:30:39 · 2219 阅读 · 0 评论 -
CodeMirror插件的高度自适应问题
项目中需要使用代码编辑器插件,于是找到了CodeMirror,这个插件功能十分强大,官网地址: https://codemirror.net/把插件集成到项目中后发现,这个插件的默认高度是300px:但是需求是高度根据内容自适应,dmeo中有个resize的例子,效果如下:按照demo,我也添加了这个类样式,但是没效果,再搜一下资料,发现需要再添加一个类样式,如下: .CodeM原创 2017-01-12 16:21:39 · 15040 阅读 · 1 评论