octopus的专栏

iframe的url可以前端任何地址，这样就可能出现漏洞，如果钓鱼网站通过js把src改成了危险地址，如果没有监控，就会有很大隐患。所以监控iframe的url变化就是必须要解决的问题了。第一印象的解决方案是通过setInterval轮询监控，貌似不太理想了，而且有延迟。千般搜索，终于找到了好的方法，可以通过H5新增的MutationObserver来解决，配合DOMAttrModified和onpropertychange来解决兼容性问题。废话少说，直接上代码。index.html代码

function fn1(){  //创建了一个数组  var fns = new Array();   //i这个变量是保存在fn1这个作用域中  for(var i=0;i    //数组中的值是一组函数    fns[i] = function(){       return i;     }   }  return fns;}var fs =

/** * 闭包的作用域 */fn1(); //fn1 能够执行，不会报错，对于通过function func_name()这种写法来定义的函数，永远都会被最先初始化。function fn1(){  console.log("fn1");}fn2(); //报错：fn2 is not a function/** *使用如下方式定义函数，不会被先执行，如果在

1.复选框的全选，全部选，反选2.表中记录的搜索3.textarea有固定的字符数---------------------------------------------------------1------------------------------------------------------------   吃  喝  玩  乐    

jquery中的事件和事件对象

1.基础动画2.渐变动画3.滑动动画4.自定义动画5.动画队列• jquery中的基础动画(略，见前面的课)a. show()显示b. hide()隐藏c. toggle()切换show/hide

jquery中DOM操作1.查找节点（略,前面课中已介绍）2.创建节点3.插入节点4.包裹节点5.删除节点6.复制节点7.替换节点8.遍历节点（略,前面课中已介绍）9.操作DOM节点属性

1.DOM筛选，遍历查找相关方法2.选择器中特殊符号的处理3.改写原生js例子      a.表格隔行变色      b.tab标签页4.选择器的优化准则(初级)

1.基本过滤选择器2.内容过滤选择器3.可见性选择器4.属性选择器5.子元素过滤选择器6.表单选择器 基本过滤选择器a. :fitst选取第一个元素b. :last选取最后一个元素c. :not()选取除指定之外的元素d. :even偶数选择器e. :odd奇数选择器f.

1.什么是jquery选择器2.jquery选择器的优势在哪里3.jquery选择器的种类 什么是jquery选择器jquery中的选择器完全继承了css1.0~2.0的风格，实现少部分css3选择器，如果对于CSS选择器非常了解，那么学习jquery选择器会非常简单。利用jquery选择器可以非常快速的找出你

• 1.jquery对象和DOM对象• 2.DOM对象和jquery对象的互相转换• 3.jquery与其它js库如何共存 一.jquery对象和DOM对象1.DOM对象1.1. DOM，文档对象模型，每一份DOM都可以表示成一棵树1.2. 从DOM树中可以看出各个元素之间的关系1.3. 可以用getElementById或者getElement

jquery简介Jquery是继prototype之后又一个优秀的Javascript框架。jquery凭借简洁的语法，出色的兼容性，小巧的体积迅速占领前端开发这一阵地。它极大地简化了js开发人员遍历html文档，操作DOM，处理事件，执行动画和开发ajax的操作。jquery的优势1.轻量级2.强大

/** * js实现继承： * 1.基于原型链的方式 * 2.基于伪造的方式 * 3.基于组合的方式 */一、基于原型链的方式function Parent(){  this.pv = "parent"; }Parent.prototype.showParentValue = function(){  console.log(this.pv); }

/** * 以下演示了通过原型的创建方式，使用基于原型的创建可以将属性和方法 * 设置为Person专有的，不能通过window来调用。 * 原型是javascript中的一个特殊对象，当一个函数创建之后，会随之就产生一个原型对象 * 当通过这个这个函数的构造函数创建了一个具体的对象之后，在这个具体的对象中，就会有一个属性指向原型 *///第一种状态

//当属性和方法特别多时，编写起来不是很方便，可以通过json的格式来编写//由于原型重写，而且没有通过Person.prototype来指定，此时的constructor不会再指向Person而是指向Object//如果constructor真的比较重要，可以在json中说明原型的指向function Person(){  }Person.prototype = {

基于原型的创建虽然可以有效地完成封装，但是依然存在如下问题：1.无法通过构造函数来设置属性值2.当属性中有引用类型变量时，可能存在变量值重复function Person(){}Person.prototype = {  constructor:Person,  name:"Leon",  age:30,  friends:["Ada","Chris"],

/** *在js中并不存在类，所以可以直接通过Object来创建对象，但是使用这种方式创建有一 *弊端：由于没有类的约束，无法实现对象的重复利用，并且没有一种规范约定，在操作时容易带来问题。 */var person = new Object();person.name = "octopus";person.age = 25;person.say = function(

(转)SQL优化原则一、问题的提出 　在应用系统开发初期，由于开发数据库数据比较少，对于查询SQL语句，复杂视图的的编写等体会不出SQL语句各种写法的性能优劣，但是如果将应用系统提交实际应用后，随着数据库中数据的增加，系统的响应速度就成为目前系统需要解决的最主要的问题之一。系统优化中一个很重要的方面就是SQL语句的优化。对于海量数据，劣质SQL语句和优质SQL语句之间的速度差别可以达到

JS中生成与解析JSONjs中生成json对象js中解析json字符串：1.eval("...")：  var a_id=eval(‘{"name":123}’）;  如果eval中的内容含有恶意脚本就麻烦了2.json_parse：  需要导入json_parse.js：            var t = jso

jquery中的ajax1. jqueryDOM.load()2. $.get()3. $.post()4. $.ajax()

正文从这开始~在一个Web项目中，注册，登录，修改用户信息，下订单等功能的实现都离不开提交表单。这篇文章就阐述了如何编写相对看着舒服的表单验证代码。假设我们正在编写一个注册的页面，在点击注册按钮之前，有如下几条校验逻辑。  所有选项不能为空  用户名长度不能少于6位 密码长度不能少于6位 手机号码必须符合格式 邮箱地址必须符合格式 注：为简...

一直都在看站友们的作品，今天也来给大家分享一个小的效果，第一次发还有点小紧张呢，语言表达能力不是很好，还请见谅…^先来个简单点的吧，上效果图刚开始在网上看到效果图的时候感觉好神奇，当我试着写出来的时候发现，哇！原来这么简单，我这脑袋瓜咋没反应过来呢，所以整理了下顺便简化了分享出来，希望对大家有帮助。<div class="demo"></div><...

var index = 0;if (isIOS()) { document.body.addEventListener('focusin', (e) => { //软键盘弹出的事件处理 index = index + 1; }); document.body.addEventListener('focusout', (e) =&gt...

const add = (...args) => {    let sum = args.reduce((pre, crt) => pre + crt);    const accu = (...args2) => {    sum += args2.reduce((pre, crt) => pre + crt);        return accu;    }    ...

局部属性和全局属性局部属性：有些元素能规定自己的属性，这种属性称为局部属性。 比如 link 元素，它具有的局部属性有 href、 rel、 hreflang、 media、 type、 sizes 这六个。 全局属性：可以用来配置所有元素共有的行为，这种属性称为全局属性，可以用在任何一个元素身上。1、accesskey 属性使用 accesskey 属性可以设定一个或

JavaScript 中的 this 指向问题有很多博客在解释，仍然有很多人问。上周我们的开发团队连续两个人遇到相关问题，所以我不得不将关于前端构建技术的交流会延长了半个时候讨论 this 的问题。与我们常见的很多语言不同，JavaScript 函数中的 this 指向并不是在函数定义的时候确定的，而是在调用的时候确定的。换句话说，函数的调用方式决定了 this 指向。

Meta基础知识：H5页面窗口自动调整到设备宽度，并禁止用户缩放页面//一、HTML页面结构// width    设置viewport宽度，为一个正整数，或字符串‘device-width’// height   设置viewport高度，一般设置了宽度，会自动解析出高度，可以不用设置// initial-scale    默认缩放比例，为一个数字，可以带小数// m

正处于前端入门阶段的我一直对前端中出现的innerHeight,availHeight,clientHeight,offsetLeft等与宽高有关的属性一知半解。所以趁着清明三天短假捋清这些属性。由于IE8以下的IE浏览器市场份额已逐年下降，所以对于IE浏览器，本文中将只考虑IE8及以上的版本，至于其他浏览器，也是以chrome兼容为主。与window对象相关的属性window对象表示浏览

69.你如何从浏览器的URL中获取查询字符串参数。以下函数把获取一个key的参数。 1 function parseQueryString ( name ){      name = name.replace(/[\[]/,"\\\[");      var regexS = "[\\?&]"+name+"=([^&#]*)";      var regex = new RegExp( r

前言本文是在GitHub上看到一个大牛总结的前端常见面试题，很多问题问的都很好，很经典、很有代表性。上面没有答案，我就整理了一下，从网上找了一些相关问题的答案。里面有一部分问题的答案我也没有进行考证，不少答案都来源于网络，或许会有疏漏之处，仅供大家参考哦！(还有一部分问题答案还未整理，大家也可以自己搜索一下答案)1.你能描述一下渐进增强和优雅降级之间的不同吗?优雅降级：Web站点在所有

构造函数内的方法与构造函数prototype属性上方法的对比本文的目的是让大家理解什么情况下把函数的方法写在JavaScript的构造函数上,什么时候把方法写在函数的prototype属性上;以及这样做的好处.为了阅读方便,我们约定一下:把方法写在构造函数内的情况我们简称为函数内方法,把方法写在prototype属性上的情况我们简称为prototype上的方法首先我们先了解

JavaScript来自一门健全的语言，所以你可能觉得JavaScript中的this和其他面向对象的语言如java的this一样，是指存储在实例属性中的值。事实并非如此，在JavaScript中，最好把this当成哈利波特中的博格特的背包，有着深不可测的魔力。 下面的部分是我希望我的同事在使用JavaScript的this的时候应当知道的。内容很多，是我学习好几年总结出来的。Ja

定义图片懒加载又称图片延时加载、惰性加载，即在用户需要使用图片的时候加载，这样可以减少请求，节省带宽，提高页面加载速度，相对的，也能减少服务器压力。 惰性加载是程序人性化的一种体现，提高用户体验，防止一次性加载大量数据，而是根据用户需要进行资源的请求。实现懒加载的难点在于确定某张图片是否是用户需要的资源，在浏览器中，用户需要的是可视区内的资源，因此我们只需要判断图片是否

作为前端人员，要找一个很顺手的编辑器真的不容易，以前我用同事推荐的netbeans，很好用，但是它主要是用于php开发，且软件太大，运行起来比较慢，后来又用前端开发的webStrom,也不错，很好用，他的历史记录等功能比较强大，但是还是有一个缺点，就是软件有点大，运行起来有点慢。我在我向大家推荐一款实用的前端开发神器，不但占地小，且插件很多，很强大。下面我向大家介绍一下它的安装及插件的使用方法

1.前端与程序员之间的数据约定2.处理不同种类数据的方法3.ajax执行时的提示4.ajax中的细节（编码和提交方式）

函数定义方式：1.function fun1(){alert("fun1");}  //函数就是一个非常特殊的对象，是一个Function的实例，其实在内存中存储的操作是通过一个键值对来存储的。2.由于函数是一个对象，所以可以通过如下方式定义var fun2 = fun1;  //通过函数拷贝给fun2完成赋值，但fun1、fun2这两个引用并没有指向同一个对象(虽然他们指向的对象的内

XML基础XML简介XML代表Extensible Markup Language（eXtensible Markup Language的缩写，意为可扩展的标记语言）。XML 被设计用来传输和存储数据。XML是一套定义语义标记的规则，这些标记将文档分成许多部件并对这些部件加以标识。它也是元标记语言，即定义了用于定义其他与特定领域有关的、语义的、结构化的标记语言的句法语言。XML特点

XSLT基础XSL 与 XSLTXSL 指扩展样式表语言（EXtensible Stylesheet Language）。它主要被用来对XML文档进行格式化,与CSS不同,XSL不仅仅是样式表语言XSL主要包括三个部分:XSLT 一种用于转换 XML 文档的语言。 它可以将一个XML文件转换成另一种格式的XML文件或XHTML文件.XPath 一种用于在 XML 文档中导航,定位元

body{ margin:0px; padding:0px; font-size:14px; overflow:hidden; text-align:center; } #container{ width:95%; margin-top: 10px;

表单大多数Web页面与用户之间的交互都发生在表单中，表单中有许多交互式HTML元素如：文本域，按钮，复选框，下拉列表等。从文档对象层次图中可以看到，表单是包含在文档中的，所以要访问表单，仍然需要通过document对象来访问Form对象表单就是指的form标签及其里面的内容，要获取一个表单对象，可以给某个form标签加个id属性，然后使用document.getElementById方