js

js如何复制一个对象?

夙愿已清 提交于 2020-03-23 18:30:20
方法一: 把原来对象的属性遍历一遍,赋给一个新的对象。 //深复制对象方法 var cloneObj = function (obj) { var newObj = {}; if (obj instanceof Array) { newObj = []; } for (var key in obj) { var val = obj[key]; //newObj[key] = typeof val === 'object' ? arguments.callee(val) : val; //arguments.callee 在哪一个函数中运行,它就代表哪个函数, 一般用在匿名函数中。 newObj[key] = typeof val === 'object' ? cloneObj(val): val; } return newObj; }; //测试 var obj = {a:function(){console.log(this.b.c)},b:{c:1}},//设置一个对象 newObj = cloneObj(obj);//复制对象 newObj.b.c=2;//给新对象赋新值 obj.a();//1,不受影响 newObj.a();//2 方法二: 1). 先将对象变为字符串,然后再变为json对象,防止对象的指针指向问题,为深拷贝 2). undefined 和

Js深度克隆解析

北城以北 提交于 2020-03-23 18:29:59
Js克隆(clone),就是数据拷贝,包括基础类型的数据和引用类型的数据,而深度克隆(deepClone)就是针对引用类型,如数组和对象。 两种拷贝的区别在于:浅拷贝时,拷贝出的对象指向原对象的地址,当其值发生改变时,原对象的值也发生改变;          深度拷贝,拷贝出的对象指向一个新的地址,当其值发生改变时,原对象的值不受影响。 下面列出深度拷贝的代码及其详细注释: var obj = {//待拷贝的对象 name:"abc", age:"123", card:['visa','master'], wife:{ name:"bcd", son:{ name:"aaa" } }, a:function(){} } function deepclone(origin , target){ var target = target || {}, tostr = Object.prototype.toString,//使用Object.prototype.toString.call方法进行对象和数组的区分,所以先将其进行存储以便使用 arr = '[object Array]'; for(var prop in origin){ if(origin.hasOwnProperty(prop)){//防止拷贝的对象从原对象的原型上取值 if(origin[prop] !== "null"

JS截取字符串常用方法

我的未来我决定 提交于 2020-03-23 18:27:29
reference:http://www.jb51.net/article/42482.htm 使用 substring()或者slice() 函数:split() 功能:使用一个指定的分隔符把一个字符串分割存储到数组 例子: str=”jpg|bmp|gif|ico|png”; arr=theString.split(”|”); //arr是一个包含字符值”jpg”、”bmp”、”gif”、”ico”和”png”的数组 函数:Join() 功能:使用您选择的分隔符将一个数组合并为一个字符串 例子: var delimitedString=myArray.join(delimiter); var myList=new Array(”jpg”,”bmp”,”gif”,”ico”,”png”); var portableList=myList.join(”|”); //结果是jpg|bmp|gif|ico|png 函数:substring() 功能:字符串截取,substring 方法用于提取字符串中介于两个指定下标之间的字符。 语法 :stringObject.substring(start,stop) 参数 描述 start 必需。一个非负的整数,规定要提取的子串的第一个字符在 stringObject 中的位置。 stop 可选。一个非负的整数,比要提取的子串的最后一个字符在

JS弹出窗口Window.Open详解

心已入冬 提交于 2020-03-23 17:31:32
一、window.open()支持环境: JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+ 二、基本语法: window.open(pageURL,name,parameters) 其中: pageURL 为子窗口路径 name 为子窗口句柄 parameters 为窗口参数(各参数用逗号分隔) 三、示例: <SCRIPT> <!-- window.open ('page.html','newwindow','height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no') //写成一行 --> </SCRIPT> 脚本运行后,page.html将在新窗体newwindow中打开,宽为100,高为400,距屏顶0象素,屏左0象素,无工具条,无菜单条,无滚动条,不可调整大小,无地址栏,无状态栏。请对照。 上例中涉及的为常用的几个参数,除此以外还有很多其他参数,请见四。 四、各项参数 其中yes/no也可使用1/0;pixel value为具体的数值,单位象素。 参数 | 取值范围 | 说明 alwaysLowered | yes/no | 指定窗口隐藏在所有窗口之后 alwaysRaised

跨域详解

♀尐吖头ヾ 提交于 2020-03-23 16:17:53
https://segmentfault.com/a/1190000011145364 什么是跨域? 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的。 广义的跨域: 1.) 资源跳转: A链接、重定向、表单提交 2.) 资源嵌入: <link>、<script>、<img>、<frame>等dom标签,还有样式中background:url()、@font-face()等文件外链 3.) 脚本请求: js发起的ajax请求、dom和js对象的跨域操作等 其实我们通常所说的跨域是狭义的,是由浏览器同源策略限制的一类请求场景。 什么是同源策略? 同源策略/SOP(Same origin policy)是一种约定,由Netscape公司1995年引入浏览器,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个ip地址,也非同源。 同源策略限制以下几种行为: 1.) Cookie、LocalStorage 和 IndexDB 无法读取 2.) DOM 和 Js对象无法获得 3.) AJAX 请求不能发送 常见跨域场景 URL 说明 是否允许通信 http://www.domain.com/a.js http://www.domain.com/b.js

移动h5开发资源整理

吃可爱长大的小学妹 提交于 2020-03-23 13:40:53
移动h5开发资源整理 这2年来,移动h5开发逐渐成为一种主流,也不断趋向于成熟。硬件和浏览器的不断更新,曾经的浏览器兼容也不再是开发者的噩梦。 接触h5开发一年多,从最初的新手到现在,陆陆续续遇到过很多坑。这里把想到的一些经验与资源罗列出来,给刚入h5的同学带来一些帮助。该文章会持续更新。 内容比较多,可以点击下方『悬浮菜单按钮』进行选择需要阅读的章节。 基础知识 新手建议看看下面的在线教程。 html,css,JavaScript,jQuery在线教程: w3school在线教程: http://www.w3school.com.cn/ 菜鸟教程: http://www.runoob.com/ 参考手册: jQuery: http://hemin.cn/jq/ css: http://css.doyoe.com/ h5页面基本组成 meta viewport模板 以上支持响应式布局设计。 有用的js类库 jQuery 这个必须学会的。 在线教程: http://www.w3school.com.cn/jquery/index.asp 在线手册: http://hemin.cn/jq/ Zepto Zepto和jQuery基本是一样的,只是由于其体积更小,适合移动端使用。 如果你会用jquery,那么你也会用zepto。注意,zepto并没有实现jQuery的所有功能

js实现选中文字 分享功能

牧云@^-^@ 提交于 2020-03-23 12:44:38
<!doctype html> <html> <head> <meta charset="utf-8"> <title>分享</title> <style> ::selection { background-color:#FDC4ED; } ::-webkit-selection { background-color:#FDC4ED; } ::-moz-selection { background-color:#FDC4ED; } #box { width:600px; margin:20px auto; } #share { width:26px; height:26px; position:absolute; cursor:pointer; display:none; } </style> </head> <body> <div id="box"> <h2>CSS布局的未来</h2> <p>大家都知道,css有着奇妙的特性,然而让人失望的是,css对基本页面布局上的支持有所欠缺。但是这种情况正在得到改变,更多的动态页面正是由css所支持的,正如peter gasston所说的。</p> <p>在这里,我能够保证在数年之后,css3必定能够引领潮流。一揽子的前端工具正在应运而生,方便为我们带来rounded corners圆角,gradients渐变,opacity透明度

js页面文字选中后分享实现

眉间皱痕 提交于 2020-03-23 12:43:45
var $sinaMiniBlogShare = function(eleShare, eleContainer) { var eleTitle = document.getElementsByTagName("title")[0]; eleContainer = eleContainer || document; var funGetSelectTxt = function() { var txt = ""; if(document.selection) { txt = document.selection.createRange().text; // IE } else { txt = document.getSelection(); } return txt.toString(); }; eleContainer.onmouseup = function(e) { e = e || window.event; var txt = funGetSelectTxt(), sh = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0; var left = (e.clientX - 40 < 0) ? e.clientX + 20 : e.clientX -

原生JS实现栈结构

扶醉桌前 提交于 2020-03-23 12:12:47
1. 前言 栈,是一种遵从后进先出(LIFO,Later-In-First-Out)原则的有序集合。新添加的元素都保存在栈的一端,称作栈顶,另一端叫做栈底。在栈中,新元素都靠近栈顶,旧元素都靠近栈底。 2. 功能说明 push(value):添加一个新元素到栈顶 pop():移除栈顶的元素,同时返回该元素 peek():获取栈顶的元素 isEmpty():判断栈是否为空。是返回true,否返回fallse clear():清空栈里的元素 size():获取栈里元素的个数 3. 代码实现 首先,先创建一个类表示栈,并且初始化一个空数组,用来保存栈里的元素 class Stack { constructor() { this.items = []; }; } 接着,在这个栈类中实现所需要的功能: class Stack { constructor() { this.items = []; }; push(value) { this.items.push(value); }; pop() { return this.items.pop(); }; peek() { return this.items[this.items.length - 1]; }; isEmpty() { return this.items.length === 0; }; clear() { return this

js学习总结----DOM获取元素的方法(8个)

送分小仙女□ 提交于 2020-03-23 12:11:33
DOM:document object model 文档对象模型 DOM就是描述整个html页面中节点关系的图谱,可以如下图理解 在DOM中,提供了很多的获取元素的方法和之间关系的属性以及操作这些元素的方法。 1、获取页面中元素的方法   1)、 document.getElementById('元素的ID') 在整个文档中,通过元素的ID获取到这个元素对象(获取的是一个元素)     注意:如果页面中的id重复了,那么这个方法默认只获得第一个元素       在ie6、7中,会把表单元素(input)的name属性值当做ID来使用       在ie6、7中,不区分ID的大小写       项目实战注意:不要让表单元素的name和其他元素的id重复,不要用id的大小写来区分我们的不同元素       如果没有获取到,返回的 结果为null       我们可以直接的用元素的id来代表当前元素对象(不推荐)   2)、通过元素的标签名,来获取一组元素(有几个获取几个)      document.getElementsByTagName('元素的标签名') 在整个文档中,通过元素的标签名获取一组元素。获取的是一个对象数据类型结果,并且是一个类数组(以数字作为索引,索引从0开始,逐级递增,索引代表的是当前对应的某一个元素,有一个叫做length的属性代表获取的个数)