javascript 相关知识
巩固基础,高楼起!
微微暖风
这个作者很懒,什么都没留下…
展开
-
ES6-ES12常用语法汇总(下篇)
includes传入元素,如果数组中能找到此元素,则返回true,否则返回falseconst includeArr = [1,2,3,'小明','科比']const isKobe = includeArr.includes('科比')console.log(iskobe) // true跟indexOf很像,但还是有区别的const arr = [1,2,NaN]console.log(arr.indexOf(NaN)) // -1 indexOf找不到NaNconsole.lo.原创 2021-09-02 21:42:23 · 482 阅读 · 0 评论 -
ES6-ES12常用语法汇总(上篇)
let和constlet,const和var的区别. var有变量提升,有初始化提升,值可变. let有变量提升,没有初始化提升,值可变. const有变量提升,没有初始化提升,值不可变。但如果是定义对象,则属性可变,属性值也可修改。. 暂时性死区问题说明:其实let和const是有变量提升的,但是没有初始化提升var name = "林心如"function fn () { console.log(name) let name = 'sunshin_lin'}fn () //.原创 2021-08-16 21:33:29 · 648 阅读 · 0 评论 -
移动端适配 rem布局 方法封装
(function (doc, win) { var de = doc.documentElement, re = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () {var cw = de.clientWidth; if (!cw) return; de.style.fontSi原创 2017-11-30 16:25:12 · 284 阅读 · 0 评论 -
pc 图片上传
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>文件上传</title> <style type="text/css"> label{ di原创 2018-07-03 10:23:53 · 1125 阅读 · 0 评论 -
动态显示倒计时
1、html部分<span id="target"></span>2、js部分// 为简化。每月默认为30天; function getTimeString() { var start = new Date(); var end = new Date(start.getFullYear() + 1, 0, 1); var elapse = Math.floor((end原创 2016-09-12 22:35:48 · 514 阅读 · 0 评论 -
pc、移动端 自适应布局方案
1、PC端做一个PC端的网页,设计图是1920X1080的. 要在常见屏上显示正常(比例正确可) 1280X720 1366X768 1440X900 1920X1080使用了以下几种方案1.内容在一屏内显示的,采用了(内容框)上下左右居中的办法,里面的内容绝对于这个内容框定位.这样一来,在不同大小屏中,内容总是在中间,看起来较正常2.长,宽,LEFT,TOP,RIGHT,BOTTOM都采用了R转载 2017-09-21 15:56:43 · 9878 阅读 · 0 评论 -
返回顶部代码编写
1、html部分<a class = "top" href = "javascript:;"> ⬆ </a>2、css部分 .top{ width:100px; height:100px; background:#666; color:#fff; text-align:center; line-height:100px; display:no原创 2016-09-12 16:30:47 · 233 阅读 · 0 评论 -
ES6 核心内容学习总结
ECMAScript6的特点 ES6即ES2015增添了许多必要的特性,例如模块和类,块级作用域,常量与变量…还有很多便利的功能如:箭头的功能和简单的字符串拼接等。其实ES6的某些”新”的特点并不是真的新,只是试图简化语法,这样就无需使用老式的方法编写代码,让我们编程更容易。 浏览器的支持程度 http://kangax.github.io/compat-table/es6/,可以通过Babe...原创 2018-04-21 23:03:09 · 374 阅读 · 0 评论 -
分享下载
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name=&qu原创 2018-08-31 15:37:47 · 273 阅读 · 0 评论 -
使用rem适配不同屏幕的移动设备
rem:是指相对于根元素(即html元素)的字体大小的单位。是CSS3新增的一个相 对单位,使用rem为元素设定字体大小时,相对大小对比的是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前,除了IE8及更早版本外,所有浏览器均已支持rem。对...转载 2018-05-30 10:12:27 · 818 阅读 · 0 评论 -
html之储存
1、html的存储的介质分类:1.cache 通常我们把它叫做缓存,保存在内存里。2.磁盘文件存储。3.数据库存储。4.内存存储。2、cookiesh5之前都是用cookies进行存储的,利用cookie的存储特点: 1.http请求头上会带着。 2.大小为4k。 3.主domain污染。 3、目前的几种储存方式:1.本地存储: localStorage原创 2016-09-05 19:26:56 · 484 阅读 · 0 评论 -
forEach、filter、map、some、every、find、findIndex、reduce间的区别
forEach、filter、map、some、every、find、findIndex、reduce间的区别前言 从最开始学的for循环遍历方法,到后来层出不穷的各种遍历方法,其实最大的区别就是应用场景的不同。 我们最需要记住的就是,什么情况下用哪一种方法比较合适。从挑土豆开始 这里有一堆土豆,如果换成代码,可以表示如下 var potatos = [ {id:'1...原创 2019-06-19 11:15:57 · 344 阅读 · 0 评论 -
利用ES6 编写更好的条件语句
使用 Array.includes 来处理多个条件 请看下面的列子: // condition function test(fruit) { if (fruit == 'apple' || fruit == 'strawberry') { console.log('red'); } } 上面的列子看起来似乎没有什么问题。但是,如果我们还有更多的红色水果呢?是否要...原创 2018-11-02 15:05:05 · 1284 阅读 · 1 评论 -
ES6 完全使用手册
let和const 默认使用cont ,只有当确实需要改变变量的值的时候才使用let// eg:var foo = 'bar' // bad let foo = 'bar' // good const foo = 'bar' // better 模板字符串1> 模板字符串// eg:const foo = 'this is a'+ exa...转载 2018-11-28 16:13:44 · 820 阅读 · 0 评论 -
公共ajax简单封装
1、封装AJAX函数function nativeAjax(option,success,error){ // 定义domain,方便环境切换 var domain='https://' + window.location.host + '/'; var url=domain+option.urlStr; var type=option.ajaxType; v原创 2017-09-15 09:46:31 · 225 阅读 · 0 评论 -
小程序 ajax 数据请求封装
1、创建一个文件js代码如下var requestHandler = { params: {}, API_URL: '', token: '', success: function (res) { // success }, fail: function () { // fail },}//GET请求 function GET(request原创 2017-11-24 10:23:53 · 3029 阅读 · 0 评论 -
移动端上拉加载更多效果
移动端上拉加载更多代码 js $(window).scroll(function () { if ($(document).scrollTop() >= $(document).height() - $(window).height() - 20) { // 20代表的是 上拉距离底部的距离为多少时触发加载更多数据事件; // 大括号内 需要填写你要原创 2018-01-29 15:07:37 · 232 阅读 · 0 评论 -
前端工具方法总结
/** * 邮箱 * @param {*} s */export const isEmail = (s) => { return /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(s)}/** * 手机号码 * @param {*} s */export const isMobile = (s) => { return /^1[0-9]{10}$/.test(s)}原创 2020-05-26 16:23:33 · 790 阅读 · 0 评论 -
封装模板
/** * Created by Eden on 2017/4/15. */var Common = { temp: { mask: '<div class="mask divMask"></div>', formAlert: '<div class="poup divPoup"><div class="poup-alert tran">{{msg}}</转载 2017-09-23 13:14:17 · 373 阅读 · 0 评论 -
使用return注意点
在javascript函数体内部的语句在执行时,一旦执行到return时,函数就执行完毕,并将结果返回。但是在javascript引擎有一个在行末自动添加分号的机制,这可能让你栽到return语句的一个大坑:function foo(){ return {name:"foo"};} foo(); // {name:"foo"};如果把return 语句拆成两行:function fo原创 2016-09-11 14:20:40 · 293 阅读 · 0 评论 -
移动端 多图上传
代码如下<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, user-scalable=n原创 2017-12-12 15:19:32 · 906 阅读 · 2 评论 -
ajax详解
1、ajax (Asynchronous Javascript And XML) 谈到ajax技术的,我们关注最多的毫无疑问就是提升了用户的体验。而要正真想要去了解ajax的出现和原理还用明白下面的两个概,即什么是同步,什么是异步?2、同步和异步同步的概念来源于操作系统:不同进程为协同完成某项工作而在先后次序上调整(通过阻塞、唤醒等方式)。同步强调的是顺序性,谁先谁后;异步则不存在这种顺序性转载 2016-08-24 17:43:15 · 199 阅读 · 0 评论 -
数组方法之----reverse() 和 sort()
1、reverse();reverse()方法会反转数组项的顺序。 例如: var values = [1,2,3,6,7]; values.reverse(); console.log(values) // [7,6,3,2,1];2、sort();默认情况下,sort()方法按升序排列数组项-----即最小的值位于最前面,最大的值排列原创 2016-09-05 14:08:27 · 3147 阅读 · 0 评论 -
详解iframe
1、iframe的介绍 iframe在布局、无刷新网页等方面有很重要的地方。虽然现在很流行div布局,但是有时依然会用到iframe布局。在2005年人们开始使用ajax进行无刷新,但是在一些特效情况下还得使用iframe;特别是在flash动画内嵌套html时,使用的更多。 iframe即内联框架。对于外围的页面,iframe是一个普通的元素,对于iframe里面的内容,又是一个五脏原创 2016-08-29 21:20:22 · 844 阅读 · 0 评论 -
架构,框架,模式,模块、组件、插件的含义和区别
架构、框架、模式、模块、组件、插件、控件、中间件的含义和区别。经常看到这些概念,但是有些含糊,花点儿功夫整理一下,结果还是有些地方理解的不透彻,先将整理的内容写下来,以供交流。左侧英文栏中有些单词被分成了两半,放到了两行中,看的时候需要注意。欢迎各路大虾、大牛、大神拍砖警醒,油锤灌顶~~~术语英文解释中文解释软件架构a转载 2016-09-07 13:51:02 · 7911 阅读 · 0 评论 -
前端 跨域问题 详解
1、什么是跨域 跨域请求,简单说就是从一个域访问另一个域下的数据或资源。受同源策略限制,javascript不能跨域,那么什么是同源策略? 同源策略:它会阻止从一个域上加载的脚本去获取或者操作另一个域上的文档属性。也就是说,受到请求的url的域必须与当期web页面的域相同。这说明浏览器隔离来自不同源的内容,以防止他们之间的操作。那么为何要使用同源策略呢? 同源策略的好处:答案就原创 2016-08-26 22:10:44 · 601 阅读 · 0 评论 -
仿写jquery
1、html部分<div id ="div1"> <div class="aa"> <div class="sdd"></div> <div class="ddd"></div> </div><div> 2、script 部分// 1.类(class)选择器的辅助函数; function findClass(obj,cla原创 2016-08-28 19:20:11 · 496 阅读 · 0 评论 -
数组去重的几种封装方法
1、遍历数组法: 此方法缺点: IE8以下不支持 indexOFfunction unique(array){ var n = []; for(var i =0; i<array.length; i++){ if(n.indexOf(array[i])==-1){ n.push(array[i]); } }原创 2016-08-31 16:33:09 · 1718 阅读 · 0 评论 -
javascript和jquery的克隆
1、javascript 的浅拷贝和深拷贝1.js的浅拷贝(浅克隆); 例子: var test = { a:"1",b:"2"}; var test2 = test // 即完成拷贝; test2.a = 10; console.log(test2.a) // 10; console.log(t原创 2016-08-30 23:02:28 · 283 阅读 · 0 评论 -
同源策略
原创 2016-08-26 22:13:03 · 363 阅读 · 0 评论 -
常用 javascript 方法 总结
1、深拷贝方式2,利用json对象转化为字符串的方法var clone2 = function(v) { return ( JSON.parse(JSON.stringify(v)) );}2、深拷贝方式一: 递归拷贝var clone = function(obj) { var newObj = obj.constructor === Array ? [...原创 2018-08-17 14:17:06 · 225 阅读 · 0 评论 -
判断一个变量是否为数组的几种方法
1、方法一: instanceof操作符;var arr =[1,2,3];console.log(arr instanceof Array); //true;2.对象的 constructor 属性;var arr =[1,2,3];console.log(arr.constructor===Array); //true;3.Array.isArray(); 此方法须考虑兼容性var原创 2016-08-31 13:00:50 · 1501 阅读 · 0 评论 -
获取一堆name相同的标签,点击弹出显示第几个标签
本题主要考察闭包的用法有三种解法1. html部分; <li>111</li> <li>222</li> <li>333</li> <li>444</li> <li>555</li>2. javascript部分; 2.1第一种写法;自定义属性法 var lis = docume原创 2016-08-31 12:32:09 · 865 阅读 · 0 评论 -
JavaScript 中构造函数的继承
今天要介绍的是,对象之间的”继承”的五种方法。 比如,现在有一个”动物”对象的构造函数。 function Animal(){ this.species = "动物"; }还有一个”猫”对象的构造函数。 function Cat(name,color){ this.name = name; this.color = color; }怎样才能使”猫”继承”动物”呢原创 2016-09-20 10:50:53 · 306 阅读 · 0 评论 -
前端 伪数组详解
1.符合以下条件的对象成为伪数组;a.具有length属性;b.按索引方式储存数据;c.不具有数组的push,pop等方法;如: function 内的 arguments;var fakeArray01 = {0:'a',1:'b',length:2};//这是一个标准的有伪数组对象2.伪数组的实现;var fakeArray01 = {a:'a',b:'b',length:2};//没有原创 2016-08-31 14:42:58 · 3262 阅读 · 0 评论