JavaScript创建对象

一、原型”__proto__”

//__proto__
var Mazey1 = {
    name: 'Mazey1',
    say: function(){
        console.log('Hi, i\'m ' + this.name + '!');
    }
};
var Cherrie1 = {
    name: 'Cherrie1'
};
Cherrie1.__proto__ = Mazey1;
Cherrie1.say(); //Hi, i'm Cherrie1!

低版本IE不支持,不推荐使用。

二、方法”Object.create()”

//Object.create
var Mazey2 = {
    name: 'Mazey2',
    say: function(){
        console.log('Hi, i\'m ' + this.name + '!');
    }
};
function createMazey(name){
    var m = Object.create(Mazey2);
    m.name = name;
    return m;
}
var Cherrie2 = createMazey('Cherrie2');
Cherrie2.say(); //Hi, i'm Cherrie2!

三、构造函数”function”

//function
function Mazey3(name){
    this.name = name;
    this.say = function(){
        console.log('Hi, i\'m ' + this.name + '!');
    }
}
var Cherrie3 = new Mazey3('Cherrie3');
Cherrie3.say(); //Hi, i'm Cherrie3!

四、构造函数”function” – 多个对象共用方法

//function 多个对象共用say
function Mazey4(name){
    this.name = name;
}
Mazey4.prototype.say = function(){
    console.log('Hi, i\'m ' + this.name + '!');
}
var Cherrie4 = new Mazey4('Cherrie4');
Cherrie4.say(); //Hi, i'm Cherrie4!
var Luna4 = new Mazey4('Luna4');
Luna4.say(); //Hi, i'm Luna4!

节省内存,推荐使用。

五、类的继承/call/2017-07-28

//类1
function Mazey(name){
    this.name = name;
    this.say = function(){
        console.log('Hi, i\'m ' + this.name + '.');
    };
}
//用原型继承不了方法
Mazey.prototype = {
    run: function(){
        console.log(this.name + 'is running.');
    }
};
var Cherrie = new Mazey('Cherrie');
Cherrie.say(); //Hi, i'm Cherrie.
Cherrie.run(); //Cherrieis running.

//类2 继承类1 call
function Baby(name){
    Mazey.call(this, name);
    this.eat = function(){
        console.log(this.name + ' eats rice.');
    };
}
LittleBaby = new Baby('Baby');
LittleBaby.say(); //Hi, i'm Baby.
LittleBaby.eat(); //Baby eats rice.
LittleBaby.run(); //Uncaught TypeError: LittleBaby.run is not a function

原始类的原型”prototype”继承不了,把不需要继承的方法属性放在原型里面。

六、类的继承/ECMAScript6/2017-08-03

//类1
class Mazey {
    constructor(name, age){
        this.name = name;
        this.age = age;
    }
    say(){
        console.log(`My name is ${this.name}, i'm ${this.age}.`);
    }
    info(){
        return `${this.name}, ${this.age}`;
    }
}
var m1 = new Mazey('mazey', 18);
m1.say(); //My name is mazey, i'm 18.
//类2
class Cherrie extends Mazey {
    constructor(name, age, sex){
        super(name, age); //super一定要放在this前面,等于 Mazey.call(this, name, age)
        this.sex = sex;
    }
    say(){
        super.say();
        console.log(`I am a ${this.sex}(${this.age}).`)
    }
    moreInfo(){
        console.log(`${super.info()}, ${this.sex}`); //super.info() => Mazey.info.call(this)
    }
}
var c1 = new Cherrie('cherrie', 17, 'girl');
c1.say(); //My name is cherrie, i'm 17. I am a girl(17).
c1.moreInfo(); //cherrie, 17, girl

七、通过函数实例类/2017-08-10

可传入任意组{key: value}对象,只取需要的值,没有则使用默认值。

//定义类
function Person(obj) {
    this.name = obj.name || 'anonymous';
    this.age = obj.age || 0;
}
//定义类共享内存的方法
Person.prototype.say = function () {
    console.log(`My name is ${this.name}, i'm ${this.age}.`);
};
//通过函数创建实例
function newPerson (obj) {
    return new Person(obj || {});
}
//正常传值
var mazey = newPerson({ //自动获取name和age
    name: 'mazeyqian',
    age: '19'
});
mazey.say(); //My name is mazeyqian, i'm 19.
//只传一个
var cherrie = newPerson({
    name: 'cherrie'
});
cherrie.say(); //My name is cherrie, i'm 0.
//不传值
var someone = newPerson(); //若不传值,则使用默认值
someone.say(); //My name is anonymous, i'm 0.
//传不相关值
var test = newPerson({
    sex: 'boy'
});
test.say(); //My name is anonymous, i'm 0.

JavaScript点击事件/一个按钮触发另一个按钮

给按钮2添加点击事件click触发按钮1的点击事件,就算给按钮1添加样式display: none;visibility: hidden;隐藏起来也能触发。

<button type="button" id="btn1" onclick="alert('我是按钮1的弹框')" >按钮1</button>
<button type="button" id="btn2">按钮2</button>
<script type="text/javascript">
    const BTN1 = document.getElementById('btn1');
    const BTN2 = document.getElementById('btn2');
    //给按钮2添加点击事件
    BTN2.addEventListener('click', () => {
        BTN1.onclick(); //按钮2点击后触发按钮1的onclick
        //BTN1.click(); //按钮2点击后触发按钮1的click 效果一样
    });
</script>

JavaScript闭包理解

一、JavaScript闭包理解/2017-07-19

<script>
    function a(){
        var i = 0;
        var b = function(){
            console.log(i++);
        }
        return b;
    }
    var c = a();
    setInterval('c()', 500); //0 1 2 3 4 5...
</script>

作用域/闭包理解/2017-08-03

<script>
function a(j){
    var i = j;
    var b = function(){
        console.log(i);
    }
    //i++;
    return b;
}
var c = a(0);
c(); //0
a(1); //i值不管怎么变,c里面的i已经锁死了。
c(); //0
c(); //0
</script>

二、JavaScript闭包理解/2017-08-03

<div>
    <a rel="nofollow" class="mazey-example-a1">Click</a>
    <a rel="nofollow" class="mazey-example-a1">Click</a>
    <a rel="nofollow" class="mazey-example-a1">Click</a>
    <a rel="nofollow" class="mazey-example-a1">Click</a>
    <a rel="nofollow" class="mazey-example-a1">Click</a>
    <a rel="nofollow" class="mazey-example-a1">Click</a>
    <a rel="nofollow" class="mazey-example-a1">Click</a>
    <a rel="nofollow" class="mazey-example-a1">Click</a>
    <a rel="nofollow" class="mazey-example-a1">Click</a>
    <a rel="nofollow" class="mazey-example-a1">Click</a>
</div>
<script type="text/javascript">
var domEles = document.getElementsByClassName('mazey-example-a1');
//正确写法 返回 0 1 2 3...
for (var i = 0, max = domEles.length; i < max; i++) {
    (function(i){ //传入的i被锁定了,与外面的i作用域不一样。
        //debugger;
        domEles[i].addEventListener('click', function () {
            alert(i);
        });
    }(i)); //传入i
}
//错误写法 返回 10
for (var i = 0, max = domEles.length; i < max; i++) {
    domEles[i].addEventListener('click', function () {
        alert(i);
    });
}
</script>

示例: 检查长度/2017-08-08

长度: <input type="text" value="" name="textLen">
<script type="text/javascript">
(function(){
	var textLen = document.getElementsByName('textLen')[0];
	(function(obj){
		obj.addEventListener('blur', function(){
			if(obj.value.length > 20){
				console.log('长度不能超过20位!');
			}
		});
	}(textLen)); //这里的 textLen 与外面的同名 textLen 互不影响.
}());
</script>

三、JavaScript闭包理解/2017-08-08

(function(){
    var data = [];
    for (var i = 0; i < 3; i++){
        data[i] = (function(j){
            return function(){
                console.log(j);
            }
        }(i));
    }
    data[0](); //0
    data[1](); //1
    data[2](); //2
}());

JavaScript邮箱验证-正则验证

一、RegExp

1.1 创建RegExp对象

new RegExp("必选,正则表达式","可选,匹配模式g,i,m")

1.2 RegExp对象的方法

  • test:检索字符串中的指定值,返回True或False。
  • exec:检索字符串中的指定值,返回找到的值,没有则null。
  • complie:用于改变正则表达式,或增删匹配模式。
1.2.1 test()
var r1 = new RegExp('world');
console.log(r1.test('Hello, world!')); //true
console.log(r1.test('Hello, World!')); //false
var r2 = new RegExp('world', 'i'); //大小写不敏感
console.log(r2.test('Hello, World!')); //true
var r3 = new RegExp(/world/i); //简写
console.log(r3.test('Hello, World!')); //true
1.2.2 exec()
var r1 = new RegExp('world');
console.log(r1.exec('Hello, world!')); //['world']
console.log(r1.exec('Hello, World!')); //null
var r2 = new RegExp('world', 'i'); //大小写不敏感
console.log(r2.exec('Hello, World!')); //['world']
var r3 = new RegExp(/world/i); //简写
console.log(r3.exec('Hello, World!')); //['world']
var r4 = new RegExp('o');
console.log(r4.exec('Hello, World!')); //['o']
var r5 = new RegExp('o', 'gi');
console.log(r5.exec('Hello, WOrld!')); //['o']
console.log(r5.lastIndex); //5 匹配文本的第一个字符的位置,o为4,下一个位置为5
console.log(r5.exec('Hello, WOrld!')); //['O'] 匹配完第一个o后调用继续匹配
console.log(r5.lastIndex); //9
console.log(r5.exec('Hello, WOrld!')); //null 匹配不到返回null
console.log(r5.lastIndex); //0 lastIndex重置为0
1.2.3 complie()
var r1 = new RegExp('world');
console.log(r1.exec('Hello, world!')); //['world']
r1.compile('o');
console.log(r1.exec('Hello, World!')); //['o']
r1.compile('m');
console.log(r1.exec('Hello, World!')); //null
var r2 = new RegExp('world');
console.log(r2.test('Hello, world!')); //true
r2.compile('mazey');
console.log(r2.test('Hello, world!')); //false

二、正则表达式

  • ^$:表示匹配值的开始和结尾。
  • +:1+,一个或更多。
  • *:0+,零个或更多。
  • ?:0/1,零个或一个。
  • {1,2}:1<=length<=2,长度。
  • ():表示一个表达式的组。
  • []:匹配的字符范围,我理解为一个块,很多块放在一个组()里面。

三、示例

<form action="">
输入:<input type="text" name="mazey" id="mazey" placeholder="请输入邮箱">
<input type="button" value="验证" onclick="check();">
</form>
<script>
function check(){
    var reg = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"); //正则表达式
    var obj = document.getElementById("mazey"); //要验证的对象
    if(obj.value === ""){ //输入不能为空
        alert("输入不能为空!");
        return false;
    }else if(!reg.test(obj.value)){ //正则验证不通过,格式不对
        alert("验证不通过!");
        return false;
    }else{
        alert("通过!");
        return true;
    }
}
</script>

ECMAScript6箭头函数ArrowFunction”=>”

一、说明

ECMAScript6可以用箭头”=>”定义函数。x => x * x(x) => {return x * x;}与匿名函数function(x){return x * x;}相等。

二、示例

2.1 没有参数的箭头函数

var f = () => 9;
console.log(f()); //9

2.2 一个参数的箭头函数

var f = x => x * x;
console.log(f(3)); //9
var f = x => {return x * x;};
console.log(f(3)); //9
var f = (x) => x * x;
console.log(f(3)); //9
var f = (x) => {return x * x;};
console.log(f(3)); //9

2.3 两个或更多参数的箭头函数

var f = (x, y) => x * y;
console.log(f(2, 3)); //6
var f = (x, y , ...more) => {
    var multiply = x * y;
    for(var i = 0; i < more.length; i++){
        multiply *= more[i];
    }
    return multiply;
};
console.log(f(2, 3, 4, 5)); //120

2.4 map/reduce应用

var f = [1, 2, 3].map(x => x * x);
console.log(f); //[1, 4, 9]
var f = [1, 2, 3].reduce((x, y) => x + y);
console.log(f); //6

三、this作用域/返回对象

3.1 this作用域

箭头函数中的this总是指向外层作用域,即使在内层函数里面,所以可以不用写var that = this;

var obj = {
    name: 'mazey',
    f: function(){
        var myName = () => this.name; //这里的this指向obj
        return myName();
    }
};
console.log(obj.f()); //mazey

3.2 返回对象

因为对象和块的冲突问题,箭头函数返回一个如{name:'mazey'}的对象必需用()括起来。

var f = () => {name:'mazey'};
console.log(f()); //undefined
var f = () => ({name:'mazey'});
console.log(f()); //{name: "mazey"}

四、练习代码

<script>
var f = () => 9;
console.log(f()); //9
var f = x => x * x;
console.log(f(3)); //9
var f = x => {return x * x;};
console.log(f(3)); //9
var f = (x) => x * x;
console.log(f(3)); //9
var f = (x) => {return x * x;};
console.log(f(3)); //9
var f = (x, y) => x * y;
console.log(f(2, 3)); //6
var f = (x, y , ...more) => {
    var multiply = x * y;
    for(var i = 0; i < more.length; i++){
        multiply *= more[i];
    }
    return multiply;
};
console.log(f(2, 3, 4, 5)); //120
var f = [1, 2, 3].map(x => x * x);
console.log(f); //[1, 4, 9]
var f = [1, 2, 3].reduce((x, y) => x + y);
console.log(f); //6
var obj = {
    name: 'mazey',
    f: function(){
        var myName = () => this.name; //这里的this指向obj
        return myName();
    }
};
console.log(obj.f()); //mazey
var f = () => {name:'mazey'};
console.log(f()); //undefined
var f = () => ({name:'mazey'});
console.log(f()); //{name: "mazey"}
</script>

CSS伪类选择器active模拟JavaScript点击事件

一、说明

设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式。

IE7及更早浏览器只支持a元素的:active,从IE8开始支持其它元素的:active。

另:如果需要给超链接定义:访问前,鼠标悬停,当前被点击,已访问这4种伪类效果,而又没有按照一致的书写顺序,不同的浏览器可能会有不同的表现。超链接的4种状态,需要有特定的书写顺序才能生效。注意,a:hover必须位于a:link和a:visited之后,a:active必须位于a:hover之后。可靠的顺序是:l(link)ov(visited)e h(hover)a(active)te,即用喜欢(love)和讨厌(hate)两个词来概括。Link

二、示例

<style>
    .active-example{
        width:100px;
        height: 100px;
        transition: all 1s ease-in-out;
        background: red;
    }
    .active-example:active{
        border-radius:50%;
        background: blue;
    }
</style>
<div class="active-example"></div>

理解CSS3属性transition

一、说明

1.1 定义和用法

transition 属性是一个简写属性,用于设置四个过渡属性:

  • transition-property:规定设置过渡效果的CSS属性的名称。
  • transition-duration:规定完成过渡效果需要多少秒或毫秒。
  • transition-timing-function:规定速度效果的速度曲线。
  • transition-delay:定义过渡效果何时开始。

1.2 语法

transition: property duration timing-function delay;

1.3 transition-timing-function

1.3.1 语法

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-
bezier(n,n,n,n);

1.3.2 说明
  • linear:规定以相同速度开始至结束的过渡效果(等于cubic-bezier(0,0,1,1))。
  • ease:规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。
  • ease-in:规定以慢速开始的过渡效果(等于cubic-bezier(0.42,0,1,1))。
  • ease-out:规定以慢速结束的过渡效果(等于cubic-bezier(0,0,0.58,1))。
  • ease-in-out:规定以慢速开始和结束的过渡效果(等于cubic-bezier(0.42,0,0.58,1))。
  • cubic-bezier(n,n,n,n):在cubic-bezier函数中定义自己的值。可能的值是0至1之间的数值。

二、示例

<style>
    .transition-example{
        width: 500px;
        height: 370px;
        background: #ccc;
        padding: 10px 0;
    }
    .transition-example:hover>div{
        margin-left: 90%;
        transform: rotate(360deg);
        border-radius: 5px;
    }
    .transition-example>div{
        width: 50px;
        height: 50px;
        text-align: center;
        margin: 10px 0;
        background-color: blue;
        color: #fff;
    }
    .linear{
        transition: all 5s linear;
    }
    .ease{
        transition: all 5s ease;
    }
    .ease-in{
        transition: all 5s ease-in;
    }
    .ease-out{
        transition: all 5s ease-out;
    }
    .ease-in-out{
        transition: all 5s ease-in-out;
    }
    .cubic-bezier{
        transition: all 5s cubic-bezier(0.42,0,0.58,1);
    }
    
</style>
<div class="transition-example">
    <div class="linear">linear</div>
    <div class="ease">ease</div>
    <div class="ease-in">ease-in</div>
    <div class="ease-out">ease-out</div>
    <div class="ease-in-out">ease-in-out</div>
    <div class="cubic-bezier">cubic-bezier</div>
</div>
linear
ease
ease-in
ease-out
ease-in-out
cubic-bezier

SQLServer中exists和except用法

一、exists

1.1 说明

EXISTS(包括 NOT EXISTS)子句的返回值是一个BOOL值。EXISTS内部有一个子查询语句(SELECT … FROM…),我将其称为EXIST的内查询语句。其内查询语句返回一个结果集。EXISTS子句根据其内查询语句的结果集空或者非空,返回一个布尔值。Link

exists:强调的是是否返回结果集,不要求知道返回什么,比如:select name from student where sex = ‘m’ and mark exists(select 1 from grade where …) ,只要exists引导的子句有结果集返回,那么exists这个条件就算成立了,大家注意返回的字段始终为1,如果改成“select 2 from grade where …”,那么返回的字段就是2,这个数字没有意义。所以exists子句不在乎返回什么,而是在乎是不是有结果集返回。EXISTS = IN,意思相同不过语法上有点点区别,好像使用IN效率要差点,应该是不会执行索引的原因。Link

相对于inner join,exists性能要好一些,当她找到第一个符合条件的记录时,就会立即停止搜索返回TRUE。

1.2 示例

--EXISTS
--SQL:
select name from family_member
where group_level > 0
and exists(select 1 from family_grade where family_member.name = family_grade.name
and grade > 90)
--result:
name
cherrie
--NOT EXISTS
--SQL:
select name from family_member
where group_level > 0
and not exists(select 1 from family_grade where family_member.name = family_grade.name
and grade > 90)
--result:
name
mazey
rabbit

1.3 intersect/2017-07-21

intersect的作用与exists类似。

--intersect
--SQL:
select name from family_member where group_level > 0
intersect
select name from family_grade where grade > 90
--result:
name
cherrie

二、except

2.1 说明

查询结果上EXCEPT = NOT EXISTS,INTERSECT = EXISTS,但是EXCEPT / INTERSECT的「查询开销」会比NOT EXISTS / EXISTS大很多。

except自动去重复,not in / not exists不会。

SQLServer中exists和except用法

2.2 示例

--except
--SQL:
select name from family_member
where group_level > 0
except(select name from family_grade)
--result:
name
rabbit
--NOT EXISTS
--SQL:
select name from family_member
where group_level > 0
and not exists(select name from family_grade where family_member.name = family_grade.name)
--result:
name
rabbit
rabbit

三、测试数据

其中验证except去重复功能时在family_member中新增一个rabbit。

-- ----------------------------
-- Table structure for family_grade
-- ----------------------------
DROP TABLE [mazeytop].[family_grade]
GO
CREATE TABLE [mazeytop].[family_grade] (
[id] int NOT NULL ,
[name] varchar(20) NULL ,
[grade] int NULL 
)


GO

-- ----------------------------
-- Records of family_grade
-- ----------------------------
INSERT INTO [mazeytop].[family_grade] ([id], [name], [grade]) VALUES (N'1', N'mazey', N'70')
GO
GO
INSERT INTO [mazeytop].[family_grade] ([id], [name], [grade]) VALUES (N'2', N'cherrie', N'93')
GO
GO

-- ----------------------------
-- Table structure for family_member
-- ----------------------------
DROP TABLE [mazeytop].[family_member]
GO
CREATE TABLE [mazeytop].[family_member] (
[id] int NOT NULL ,
[name] varchar(20) NULL ,
[sex] varchar(20) NULL ,
[age] int NULL ,
[group_level] int NULL 
)


GO

-- ----------------------------
-- Records of family_member
-- ----------------------------
INSERT INTO [mazeytop].[family_member] ([id], [name], [sex], [age], [group_level]) VALUES (N'1', N'mazey', N'male', N'23', N'1')
GO
GO
INSERT INTO [mazeytop].[family_member] ([id], [name], [sex], [age], [group_level]) VALUES (N'2', N'cherrie', N'female', N'22', N'2')
GO
GO
INSERT INTO [mazeytop].[family_member] ([id], [name], [sex], [age], [group_level]) VALUES (N'3', N'rabbit', N'female', N'15', N'3')
GO
GO
INSERT INTO [mazeytop].[family_member] ([id], [name], [sex], [age], [group_level]) VALUES (N'4', N'rabbit', N'female', N'15', N'3')
GO
GO

-- ----------------------------
-- Table structure for family_part
-- ----------------------------
DROP TABLE [mazeytop].[family_part]
GO
CREATE TABLE [mazeytop].[family_part] (
[id] int NOT NULL ,
[group] int NULL ,
[group_name] varchar(20) NULL 
)


GO

-- ----------------------------
-- Records of family_part
-- ----------------------------
INSERT INTO [mazeytop].[family_part] ([id], [group], [group_name]) VALUES (N'1', N'1', N'父亲')
GO
GO
INSERT INTO [mazeytop].[family_part] ([id], [group], [group_name]) VALUES (N'2', N'2', N'母亲')
GO
GO
INSERT INTO [mazeytop].[family_part] ([id], [group], [group_name]) VALUES (N'3', N'3', N'女儿')
GO
GO

-- ----------------------------
-- Indexes structure for table family_grade
-- ----------------------------

-- ----------------------------
-- Primary Key structure for table family_grade
-- ----------------------------
ALTER TABLE [mazeytop].[family_grade] ADD PRIMARY KEY ([id])
GO

-- ----------------------------
-- Indexes structure for table family_member
-- ----------------------------

-- ----------------------------
-- Primary Key structure for table family_member
-- ----------------------------
ALTER TABLE [mazeytop].[family_member] ADD PRIMARY KEY ([id])
GO

-- ----------------------------
-- Indexes structure for table family_part
-- ----------------------------

-- ----------------------------
-- Primary Key structure for table family_part
-- ----------------------------
ALTER TABLE [mazeytop].[family_part] ADD PRIMARY KEY ([id])
GO

JavaScript跳出iframe框架

一、window.top

top属性返回最顶层的先辈窗口。

该属性返回对一个顶级窗口的只读引用。如果窗口本身就是一个顶级窗口,top属性存放对窗口自身的引用。如果窗口是一个框架,那么top属性引用包含框架的顶层窗口。

二、window.self

self属性可返回对窗口自身的只读引用。等价于Window属性。

三、window.location

window.location(MDN)对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。

3.1 示例

window.location = 'http://www.mazey.net/'; //网站将跳转到后面的网址

3.2 属性

  • location.hostname返回web主机的域名
  • location.pathname返回当前页面的路径和文件名
  • location.port返回web主机的端口(80或443)
  • location.protocol返回所使用的web协议(http://或https://)

四、iframe示例

<h1>iframe 1</h1>
<button type="button" id="self">Show Self</button>
<button type="button" id="selflocation">Show Self Location</button>
<button type="button" id="selfhref">Show Self Href</button>

<button type="button" id="top">Show Top</button>
<button type="button" id="toplocation">Show Top Location</button>
<button type="button" id="tophref">Show Top Href</button>

<button type="button" id="replace">Replace Me To Whole Page</button>

<script>
document.getElementById('self').addEventListener('click', function(){
    alert(window.self);
});
document.getElementById('selflocation').addEventListener('click', function(){
    alert(window.self.location);
});
document.getElementById('selfhref').addEventListener('click', function(){
    alert(window.self.location.href);
});

document.getElementById('top').addEventListener('click', function(){
    alert(window.top);
});
document.getElementById('toplocation').addEventListener('click', function(){
    alert(window.top.location);
});
document.getElementById('tophref').addEventListener('click', function(){
    alert(window.top.location.href);
});

document.getElementById('replace').addEventListener('click', function(){
    if(window.top !== window.self){
        window.top.location.href = window.self.location.href;
        console.log('You replace successfully!');
    }else{
        console.log('You don\'t need replace, i\'m top!');
    }
});
</script>


五、总结

若想页面跳出iframe在里面加上下面这段代码即可。

if(window.top !== window.self){ //若自身窗口不等于顶层窗口
    window.top.location.href = window.self.location.href; //顶层窗口跳转到自身窗口
}

JavaScript通过preventDefault()使input[type=text]禁止输入但保留光标

一、说明

取消事件的默认动作。

该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作)。例如,如果 type 属性是 “submit”,在事件传播的任意阶段可以调用任意的事件句柄,通过调用该方法,可以阻止提交表单。注意,如果 Event 对象的 cancelable 属性是 fasle,那么就没有默认动作,或者不能阻止默认动作。无论哪种情况,调用该方法都没有作用。

二、语法

event.preventDefault()

三、示例

3.1 阻止<a>元素跳转

<a href="http://www.mazey.net/baby/blog" target="_blank" id="a-prevent">点击我看会不会跳转</a>
<script>
document.getElementById('a-prevent').addEventListener('click',function(e){
    var eObj = e || window.event;
    eObj.preventDefault();
});
</script>

点击我看会不会跳转

另外可以通过return false;来阻止a元素跳转事件。

<script>
    function preventGO(){
        return false;
    }
</script>
<a href="http://www.mazey.net/baby/blog/" onclick="return false;">点击我看会不会跳转1</a><br />
<a href="http://www.mazey.net/baby/blog/" onclick="preventGO();">点击我看会不会跳转2</a><br />
<a href="http://www.mazey.net/baby/blog/" onclick="return preventGO();">点击我看会不会跳转3</a>

点击我看会不会跳转1
点击我看会不会跳转2
点击我看会不会跳转3

3.2 禁止<input>元素键盘输入

<input type="text" id="input-prevent" placeholder="试试能不能输入" />
<script>
document.getElementById('input-prevent').addEventListener('keypress',function(e){
    var eObj = e || window.event;
    eObj.preventDefault();
});
</script>