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>


CSS3边框border-radius

一、官方解释

设置或检索对象使用圆角边框。提供2个参数,2个参数以“/”分隔,每个参数允许设置1~4个参数值,第1个参数表示水平半径,第2个参数表示垂直半径,如第2个参数省略,则默认等于第1个参数。

水平半径:如果提供全部四个参数值,将按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的顺序作用于四个角。

如果只提供一个,将用于全部的于四个角。

如果提供两个,第一个用于上左(top-left)、下右(bottom-right),第二个用于上右(top-right)、下左(bottom-left)。

如果提供三个,第一个用于上左(top-left),第二个用于上右(top-right)、下左(bottom-left),第三个用于下右(bottom-right)。

垂直半径也遵循以上4点。

对应的脚本特性为borderRadius。

二、例子

2.1 四个参数值

<div style="width: 100px;height: 100px;border:50px solid red;border-radius: 50px;"></div>
<div style="width: 100px;height: 100px;border:50px solid red;border-radius: 100px;"></div>
<div style="width: 100px;height: 100px;border:50px solid red;border-radius: 50px 100px;"></div>
<div style="width: 100px;height: 100px;border:50px solid red;border-radius: 10px 30px 50px 100px;"></div>

所以border-radius里面的参数应该代表的是四个角上圆的半径。

2.2 百分比

<div style="width: 100px;height: 100px;border:50px solid red;border-radius: 25%;"></div>
<div style="width: 100px;height: 100px;border:50px solid red;border-radius: 50%;"></div>

2.3 水平半径/垂直半径

<div style="width: 100px;height: 200px;border:50px solid red;border-radius: 100px/150px;"></div>
<div style="width: 100px;height: 200px;border:50px solid red;border-radius: 200px/300px;"></div>
<div style="width: 100px;height: 200px;border:50px solid red;border-radius: 200px/200px;"></div>

这里的半径全等于本身宽度(width/2)+半径宽度(border-width/2)即为一个椭圆。另外半径最多渲染宽度(width/2)+半径宽度(border-width/2)的值,超过的按比例值来算。

Python练习题-for循环练习

一、说明

这是个单纯用for 循环画出来的图片,主要部分是显示你对循环的理解。在具有不同行数的字符重复模式的行中,使用嵌套的for循环表示行和字符模式。这项任务的另一个重要组成部分是使用一个常数来概括程序的任务,这个常量可以更改以调整图形的大小。如果您的大小常数被更改为其他的值,程序会显示你期望输出的文件。

图片1.png

二、我的代码/2017-06-25

想了挺久的,不知道怎么实现才好,用了非常笨的办法。看看算法这些东西,还是前端和业务逻辑那些东西简单。

def printForSomething(L):
    m = range(0,8)
    n = [' ','/','*','\\','+','=','|','.']
    b = [' ','\\','*','/','+','=','|','.']
    result = L
    str = ''
    for x in result:
        str = str + n[x]
    result.reverse()
    for y in result:
        str = str + b[y]
    print(str)
printForSomething([0,0,0,0,0,1,2])
printForSomething([0,0,0,0,1,1,2])
printForSomething([0,0,0,1,1,1,2])
printForSomething([0,0,1,1,1,1,2])
printForSomething([0,1,1,1,1,1,2])

三、我的代码/2017-06-27

同事给了思路后自己练习了下。用for循环理解行和列。

num = 6
for i in range(1,num): #分为5行
    for j in range(1,7-i): #前5行
        print(' ',end=' ')
    for j in range(1,i+1): #'/' 1->5依次排开
        print('/',end=' ')
    print('**',end=' ') #固定在中间的两个'*'
    for j in range(1,i+1): #'\' 1->5依次排开
        print('\\',end=' ')
    for j in range(1,7-i): #后5行
        print(' ',end=' ')
    print('') #为了换行

CSS3选择器:nth-child与:nth-of-type区别

一、:nth-child

1.1 说明

:nth-child(n)选择器匹配属于其父元素的第N个子元素,不论元素的类型。n可以是数字、关键词或公式。

注意:如果第N个子元素与选择的元素类型不同则样式无效!

1.2 示例

<style>
div>p:nth-child(2){
    color:red;
}
</style>
<div>
    <p>我是第1个段落</p>
    <p>我是第2个段落</p><!--符合条件:1、是<p>元素,2、父元素<div>的第二个元素。这里被选择,会变成红色。-->
    <p>我是第3个段落</p>
</div>
<div>
    <p>我是第1个段落</p>
    <span>我是第1个文本</span><!--不符合条件:不是<p>元素,没有被选择-->
    <p>我是第2个段落</p>
</div>

1.3 改进

如果想让上面第二个<span>生效的可以去除子元素<p>的选择,写一个父元素<div>加一个空格,以防止:nth-child不生效。

<style>
div :nth-child(2){ //div+空格,只根据父元素选择
    color:red;
}
</style>
<div>
    <p>我是第1个段落</p>
    <span>我是第1个文本</span><!--符合条件-->
    <p>我是第2个段落</p>
</div>

二、:nth-of-type

2.1 说明

:nth-of-type(n)选择器匹配属于父元素的特定类型的第N个子元素的每个元素。n可以是数字、关键词或公式。

2.2 示例

<style>
div>p:nth-of-type(2){
    color:red;
}
</style>
<div>
    <p>我是第1个段落</p>
    <p>我是第2个段落</p><!--符合条件:1、是特定元素类型<p>,2、是父元素<div>的第二个<p>元素。这里被选择,会变成红色-->
    <p>我是第3个段落</p>
</div>
<div>
    <p>我是第1个段落</p>
    <blockquote>第1个引用</blockquote>
    <p>我是第2个段落</p><!--符合条件:1、是特定元素类型<p>,2、是父元素<div>的第二个<p>元素。这里被选择,会变成红色-->
    <p>我是第3个段落</p>
</div>

JavaScript事件onblur与onfocus区别

一、onblur

1.1 说明

onblur属性在元素失去焦点时触发,onblur常用于表单验证代码(例如用户离开表单字段)。

1.2 示例

<input type="text" name="" id="" onblur="javascript:alert('onblur');">

二、onfocus

2.1 说明

onfocus属性在元素获得焦点时触发,onfocus常用于<input>、<select>以及<a>。

2.2 示例

<!--点击后因为不断onfocus会不断弹出,可以直接关闭浏览器标签页终止-->
<input type="text" name="" id="" onfocus="javascript:alert('onfocus');">