前端小知识
文章平均质量分 50
肖肖肖丽珠
学习学习。写博客是为了积累和总结。如果写的有错欢迎大家指正点拨。努力成为技术小牛~~加油
展开
-
前端性能优化
前端性能优化 构建优化 webpack打包优化 代码按需加载 通过es6的module方法实现tree shaking 将hash替换为chunkhash实现缓存优化 请求优化 减少资源体积和数量 服务器开启gzip 小图标进行雪碧图、base64、字体图标等方式加载 代码压缩 域名分片(多域名) 减...原创 2022-04-06 11:41:57 · 1143 阅读 · 0 评论 -
总结的前端知识
ie6能识别*,+,_ _只有IE6 *+只有IE7ie7能识别*,+,*+火狐两个都不能识别但是识别!importantIE6~IE10都认识"\9"<!--[if IE]--><!--[endif]-->*color:red;_color:red;color:red\9color:!important;1几个图片img在一起会出现边距。设置float:left;或者display:inline-block;2设置了padding之后火狐的...原创 2021-12-15 17:56:39 · 2081 阅读 · 0 评论 -
一维数组根据某个参数变成二维的
function arrayTwo(arr){ var map1 = {}; while(arr.length) { let current = arr.pop(); // 会影响原数组 map1[current.tlnum] = map1[current.tlnum] || []; map1...原创 2021-09-15 15:59:31 · 154 阅读 · 0 评论 -
Using target=“_blank“ without rel=“noreferrer“ is a security risk:
<a href="https://github.com/reactjs" target="_blank"> <img src="https://avatars.githubusercontent.com/u/6412038?v=3" style={{width: '100px'}}/> </a>报错提示:使用 target="_blank"的时候没有带上rel="noreferrer...原创 2021-09-13 10:35:26 · 1927 阅读 · 0 评论 -
一维数组根据某个属性值变成二维的
//一维数组根据tlnum变成二维的var arr=[{name:"lalalala";tlnum:1},{name:"wewew";tlnum:1},{name:"122323";tlnum:2},]; function arrayTwo(arr){ var map1 = {}; while(arr.length) { ...原创 2021-04-20 16:09:57 · 285 阅读 · 0 评论 -
padStart()。padEnd()
ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度,会在头部或尾部补全。padStart()用于头部补全,padEnd()用于尾部补全。padStart()和padEnd()一共接受两个参数,第一个参数用来指定字符串的最小长度,第二个参数是用来补全的字符串。如果省略第二个参数,默认使用空格补全长度。在年月日的格式化不满足两位自动在前面补0 的时候会用到formatDate(date){ const nDate=new Date(date); ...原创 2020-12-01 14:29:26 · 198 阅读 · 0 评论 -
导致的页面出现了空白。但是页面中全局搜索并没有。怎么解决
页面中莫名其妙的有一长条的空白。查找一下并不是padding和margin。在浏览器里查看发现有个在这个空白的位置,删除了这个空白行就没了。但是全局搜索页面并没有找到。原来这个是页面的编码是UTF-8 + BOM。这种编码方式一般会在windows操作系统中出现,比如WINDOWS自带的记事本等软件,在保存一个以UTF-8编码的文件时,会在文件开始的地方插入三个不可见的字符(0xEF 0xBB 0xBF,即BOM)。它是一串隐藏的字符,用于...原创 2020-10-31 14:36:01 · 354 阅读 · 0 评论 -
select option里面的下拉根据实际情况显示隐藏。写display:none为什么不隐藏呢?
题型,我想让复合题。根据接口给的数据判断是隐藏还是显示<select name="questiontype" lay-verify="" data-role="questiontypelist" lay-filter ='Tsquestiontype'> <option value="">题型</opti...原创 2020-03-11 11:09:27 · 1258 阅读 · 0 评论 -
模拟键盘
手机端上不想要手机自带的键盘?平板端不想手动点击键盘?想要使用一个模拟的键盘。在一些点餐收款时经常用到。方法也是很简单的,就是先把键盘上需要的内容,比如1 2 3。。。9 0 + - = x这些按键都是button,并且点击的时候都会有个函数。然后在这些函数里面操作就可以啦。并且要注意1.如果现在是0,你再输入0,就只能显示一个0你再输入非0,这个0就不显示啦原创 2017-04-20 11:50:21 · 340 阅读 · 0 评论 -
js中关于打印的一些知识
1.普通打印整页打,window.print()css设置打印时的页面样式.@media print{.noprint{display:none;}//把不想打印的部分class设置为noprint}这个打印按钮在打印的时候不显示原创 2017-02-17 16:36:00 · 524 阅读 · 0 评论 -
官网中如果引入公共的头部导航
1,把公共的导航的部分写在一个html里面,然后用iframe在每个需要的页面引入但是这个可能导致的一个问题是,他有固定的高度,如果屏幕大小改变,太小时换行。这个导航就可能出现滚动条了。影响美观而且这个效果还不是我们想要的。2,把公共的导航的部分写在一个html里面,然后把这个html的内容转化为js,在需要导航的地方通过引入就可以啦。可以百度查找把html原创 2017-02-15 14:54:11 · 785 阅读 · 0 评论 -
便于搜索引擎搜索的meta设置
原创 2017-05-02 16:21:53 · 826 阅读 · 0 评论 -
js数组操作大全(pop,push,unshift,splice,shift方法)
pop 最后删除var a = [1,2,3,4,5];a.pop(); //a:[1,2,3,4] push 最后添加var a = [1,2,3,4,5]; a.push(6,7); //1,2,3,4,5,6,7shift 开头删除var a = [1,2,3,4,5]; a.shift(); /原创 2017-02-18 17:37:51 · 3259 阅读 · 3 评论 -
jquery自己写插件
(function($){ $.fn.extend({ "函数名":function(自定义参数){ //这里写插件代码 } }); })(jQuery); 使用:$("#id").函数名();原创 2017-05-02 18:06:30 · 519 阅读 · 0 评论 -
jquery中attr和prop的区别,tab和click的区别,js中的call和apply方法的区别.
jquery中attr和prop的区别在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?它们两个之间有什么区别?这些问题就出现了。关于它们两个的区别对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。上面的描述也许有点模糊,举几个例子就知道了。百度这个原创 2017-04-17 11:36:20 · 1145 阅读 · 0 评论 -
微信JS-SDK说明文档的使用
注意: * 1. 所有的JS接口只能在公众号绑定的域名下调用,公众号开发者需要先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。 * 2. 如果发现在 Android 不能分享自定义内容,请到官网下载最新的包覆盖安装,Android 自定义分享接口需升级至 6.0.2.58 版本及以上。 * 3. 完整 JS-SDK 文档地址:http://mp.weixi原创 2017-04-20 16:57:10 · 1216 阅读 · 0 评论 -
保留两位小数
保留两位小数。1,四舍五入后保留两位小数 2.4556.toFixed(2) ---2.462,直接截取两个小数不四舍五入 var toDecimal2 = function(x) { var str = "" + x; if(str == null || str == "0") return "0.00"; if(str.indexOf('.'原创 2017-05-03 15:56:39 · 2065 阅读 · 0 评论 -
Web前端开发笔试题集锦之Javascript篇
首先,要必须要清楚了解一些JS的基础功能,如(怎样添加、移除、移动、复制、创建和查找节点,怎样使用事件以及IE和DOM事件模型之间存在哪些主要差别,什么是闭包,什么是Ajax以及json的使用等。其次,需要熟悉一些前端框架,如bootstrap以及一些基于服务端js(如Node.js),或学习下最热的前端框架Angular.js,这些东西能让你的前端之路上一个大台阶。再次,熟悉一些转载 2017-05-03 18:08:32 · 557 阅读 · 0 评论 -
获取当前位置城市
点击按钮获取您当前坐标(可能需要比较长的时间获取):点我var x=document.getElementById("demo");function getLocation(){ if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosit原创 2017-05-04 17:54:02 · 589 阅读 · 0 评论 -
页面加载时显示一个loading的图片或者动画或者提示信息
写在body的下面第一句。文字:正在载入,请稍候…… 。图片 设置一下图片的样式,让他放在屏幕的中间。所有内容的上面.loadingdiv { position: relative; margin-top: 1原创 2017-05-04 10:46:08 · 18948 阅读 · 1 评论 -
五角星评分,利用背景图片,雪碧图来写的
http://blog.csdn.net/qq_33769914/article/details/52526924这个是用mui写的,星星的图片是利用字体图标加进去的,可以改变他的大小和颜色。但是如果我们希望使用自己设计的星星呢?样式是这样的,点击时是下面的样式。我们利用background-position:x,y; 定位显示是否选中状态以及background-repeat:repeat-x;...原创 2017-05-05 15:17:46 · 2673 阅读 · 0 评论 -
页面点击其他地方时进行某些操作
点击其他地方把我隐藏js内容$(document).bind("click",function(){ if($(this).attr("class")!="div"){$(".div").hide(); } X这样写是错的啊!!你使用document捆绑的所以这个this指的是document。你如果想要得到你点击的那个元素。你要写成$(event.srcElem原创 2017-04-24 10:33:43 · 630 阅读 · 0 评论 -
输入表单输入完一个后按住enter光标自动跳到下一个表单
$.enterfocus = function (selector, callback) { //按住enter键可以自动换到下一行的input var boxArray = [].slice.call(document.querySelectorAll(selector)); for (var index in boxArray) {原创 2017-04-25 11:29:45 · 5378 阅读 · 0 评论 -
mui单页面指定显示的是单页面的那个页面,获取地址栏参数
如果两个页面都要跳转到同一个单页面(这个单页面是提交订单和收货地址在一个单页面),但是显示的不同。比如点外卖时,下单后显示的是提交订单且可以编辑选择收货地址。而我的地址就直接跳过订单页面进入收货地址页面。需要注意的是mui的单页面的一段代码//初始化单页view var viewApi = mui('#app').view({ def原创 2017-04-07 18:22:47 · 4376 阅读 · 0 评论 -
js获取地址栏参数
页面在跳转的时候可以给他添加参数,使用?分割?id=form_home">页面跳转function GetQueryString(name){ var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg);原创 2017-05-08 11:50:50 · 349 阅读 · 0 评论 -
mui.prompt怎么指定弹出框输入内容是input的类型,原始的type=text,
增加第六个参数mui.prompt("text","defaluttext","title",['确定',‘取消’],function(){},'div');document.querySelector('.mui-popup-input input').type='tel';比如:var btnArray=['取消','打赏']; mui.prompt("原创 2017-05-08 10:41:10 · 10263 阅读 · 1 评论 -
侧滑菜单,cookie 的使用在刷新以后依然保持原来的展开或者收缩样式。
侧滑菜单,在刷新以后依然保持原来的展开或者收缩样式。把这个展开还是收缩的状态保存到cookie里面就好啦侧滑菜单里面的每个li$(“.sidebar-menu li”).click(function () {var page = $(this).attr(‘id’);// 设置cookie把现在选择的那个列的id值存起来$.cookie(‘page’, page, {path:原创 2017-03-06 15:44:55 · 965 阅读 · 0 评论 -
倒计时到0停止,用在手机获取验证码的倒计时
<input type="text" placeholder="填写验证码" class="check1 "/><button class="verify" onclick="settime(this);return false;">获取验证码</button> var countdown=120;functio原创 2016-07-27 21:48:34 · 604 阅读 · 0 评论 -
根据地址获取经纬度
参考:http://www.it165.net/pro/html/201407/17289.html 地址: 经度: 纬度: //返回的json数据格原创 2017-05-31 18:41:38 · 1176 阅读 · 0 评论 -
微信内置浏览器 长按识别二维码 的问题与解决方案
首先要注意:在微信里面只有img写的图片才可能识别二维码。而你写的background-image是识别不出来的。1,在iOS 微信6.2.2识别的二维码的区域向上偏移了64px这64px是微信内置浏览器标题栏+系统标题栏二维码大到一定程度就没有“识别上移”的诡异现象了,大概是二维码大小在400px 以上的时候就没有。解决:1.通过img增加pa原创 2017-06-16 15:00:46 · 12611 阅读 · 0 评论 -
vue过滤器和函数的比较
这是过滤器,使用方法是 {{db.time | dateShort1}}Vue.filter('dateShort1', function (d) { if (typeof (d) != "object") d = new Date(d * 1000); return (d.getFullYear() + "-" + ultZeroize(d.getMon原创 2017-06-14 17:59:44 · 2056 阅读 · 0 评论 -
字符串转为数字。字符串转为数组。
字符串转为数字:var a="12.3456";1/ a-0 后面减去02/ ~~a 取反再取反3/ parseInt(a)4/+ a前面写加号转为整型数字,parseInt(a) ---12浮点型数字,parseFloat(a) ----12.3456还有一种是 str-0或者 str*1。利用js的弱类型的特点把字符串转为数字。...原创 2017-04-20 11:26:42 · 4006 阅读 · 0 评论 -
mui对话框
mui.alert("内容", "标题", "按钮内容",function(){},[,'div']); 可选参数,代表是否使用h5绘制的对话框,也就是对话框样式是否可以修改,如果有这个选项,你就可以这一句的下面修改它的样式啦,document.querySelector('.mui-popup-input input').type='password'document.querySele原创 2017-05-08 14:41:39 · 2327 阅读 · 0 评论 -
mui单选框。单选框在一行
单选框(radio)横着的单选框性别 男 女 单选框换个样式性别 男 女 图标左对齐radioradiodisabled radio图标右对齐radioradiodisabled radio列表模式的单选框Item 1Item 2Item 3原创 2017-06-19 15:02:52 · 17674 阅读 · 0 评论 -
h5的离线存储怎么使用原理是什么
h5的离线存储怎么使用原理是什么用户没有联网的时候也可以访问站点和应用。用户联网时更新缓存的文件。H5的离线存储基于新建一个.appcache的缓存机制。通过这个文件的解析清单离线存储资源。这样处于离线的状态的时候还是可以看到缓存的内容。原创 2017-06-28 15:41:35 · 4896 阅读 · 1 评论 -
跨域问题和解决
什么是跨域?跨域,指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对JavaScript施加的安全限制。访问不同域名,接口,端口里的内容比如:http://www.123.com/index.html 调用 http://www.123.com/server.php (非跨域)http://www.123.com/index.html原创 2017-06-29 10:28:18 · 468 阅读 · 0 评论 -
vue中的单选框选中值和最后传给后台值不一样,怎么获取
vue中的单选框选中值和最后传给后台值不一样:这句话的意思是如果我选择男女,显示的也是男女,但是我I需要给后台的就是id。可能男的id=0,女的id=1;这时我们应该怎么办呢?去个最基础的例子div id="example-4" class="demo"> input type="radio" id="one" value="One" v-model="picked">原创 2017-06-20 14:12:47 · 11180 阅读 · 0 评论 -
会员中心上传头像时的,上传图片并剪切
可以在我的资源下载:http://download.csdn.net/detail/qq_33769914/9875716(会员中心上传头像时的,上传图片并剪切)似乎没有压缩,只在本地看的话还是好的,但是上传给服务器可能就没有加载完就上传了。所以用的时候还是考虑一下我引入5个js却隐藏了3个,原因是.// 这个upimg.js是我把上面三个js放在一起了,这样占得内存少一点原创 2017-06-20 17:42:49 · 470 阅读 · 0 评论 -
行内元素,块级元素,void空元素
行内元素:a、b、span、img、input、strong、select、label、em、button、textarea块级元素:div、ul、li、dl、dt、dd、p、h1-h6、blockquotevoid空元素:即系没有内容的HTML元素,例如:br、meta、hr、link、input、img原创 2017-06-30 09:46:00 · 405 阅读 · 0 评论 -
js动态设置页面的字体大小
var html=document.documentElement; html.style.fontSize=html.clientWidth/20+'px'原创 2017-06-22 18:33:42 · 7169 阅读 · 0 评论