[外门弟子]JS-1|2018年05月19日的日报-技能树.IT修真院

发表于： 2018-05-19 23:42:18

1 724

今天出去玩了，看了场电影，复仇者联盟很好看。

今天完成的事情：

1. css 任务十二【护工页面】

明天的计划：

1.完成任务十二

2.学习 js高级程序第六章

遇到的问题：

收获：

1.看师姐直播讲表单，flex 的应用。

之前的布局大部分都是流性布局（一个个排下去),需要通过定位position,float 去布局。

flex 布局中文叫弹性布局，这种布局方式更加方便，干净。

1.1 弹性布局的特点

(1)任何元素都可以设置成 flex 布局，包括行内元素。

(2)webkit 内核得加上 -webkit- 前缀（没验证过不加）

.box{

display: -webkit-flex; /* Safari */

display: flex;

}

(3) 设置成 flex 布局后，子元素的属性 float ,clear, vertical-align 都会失效

1.2 flex布局的概念

设置成 flex 布局后，元素就成为 flex container (flex 盒子)

子元素就成为 flex-item(项目)

坐标轴，主轴是 main axis 交叉轴是 cross axis

子元素默认沿着谁主轴从左到右排列

1.3 flex 盒子的属性

flex-direction 设置主轴的走向（默认是从左到右，可以设置从上到下，从下到上）

flex-wrap 设置项目在空间不够的时候轴换行方式。

flex-flow 是 flex-direction 和 flex-wrap 的合并简写。

justify-content 项目在主轴上的对齐方式（左对齐，居中对齐）

align-items 项目在交叉轴上的对齐方式有点像(vertical-align)

align-content 多根轴线的对齐方式

1.4 子元素项目的属性

order 设置子元素的排列顺序，默认位0 ，值越小，越靠前。

flex-grow 放大比列

flex-shrink 缩小比例

flex-basis 占据的空间

flex 这是 flex-grow flex-shrink 和 flex-basis 的简写该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

align-self 允许单个项目有与其他项目不一样的对齐方式

2.js 引用类型

基本包装类，单体内置对象

String 类型

split(separator ，howmany ) 方法

如果 separator 是包含子表达式的正则表达式，那么返回的数组中包括与这些子表达式匹配的字串（但不包括与整个正则表达式匹配的文本）。

replace 方法

1.字符方法

str="123"
str.charAt(2);//3  
str[2];//3
str.charCodeAt();//3的字符编码 51

2.字符串操作方法

基础字符串创建新字符的方法：

slice()
substr()
substring()

都接受一个或两个参数。

第一个参数指定字符串的开始位置，第二个表示字符串到哪里结束。

slice() 和 substring() 第二个参数指定的是字符串最后一个字符后面的位置

substr() 指的则是返回字符个数。

如果没有给这些方法传递第二个参数，则将字符串的长度作为结束位置。

与 concat() 的方法一样，这三个方法不会修改字符串本身的值。

str="01234567";
str.slice(0,3);//"0123";
str.substring(0,3);//"0123"
str.substr(0,3);//012
alert(str);//"01234567"

在传递给这些方法的参数是负值的情况下，它们的行为就不尽相同了。

slice() 会将传入的负值与字符串的长度相加
substr() 将负的第一个参数加上字符串的长度,第二个参数转换为0
substring() 方法会把所有负值都转换为0

3.字符串位置方法

indexOf() lastIndexOf()

这两个方法都是从一个字符串中搜索给定的字符串，然后返回字符串的位置，如果找不到就返回-1

在使用第二个参数的情况下，可以通过循环调用 indexOf() 来找到所有匹配的子字符串。

var str="012345678";
var positons=[];
var pos=str.indexOf("0");
while(pos>-1){
    positons.push(pos);
    str.indexOf("0",pos+1);
}

4.trim() 方法

这个方法会创建字符串的副本，删除前置及后缀的所有空格，然后返回结果。

手写代码为：

/**
 * 删除左右两端的空格
 */
String.prototype.trim=function(){
    return this.replace(/(^\s*)|(\s*$)/g,'');
};

5.字符串大小写转换方法

toLowerCase() 转为小写

toUpperCase() 转为大写

6.字符串的模式匹配方法

(1) match() 方法

stringObject.match(searchvalue) 或者 stringObject.match(regexp)

如果没有匹配到任何文本，则返回null。

(2) search() 方法

返回的是字符串中第一个匹配项的索引,如果没有匹配到任何文本，则返回-1

如果传入的是字符串，那么和index方法好像是一样的。但传入regexp对象就比较强大了。

(3)replace() 方法

//replace() 方法的第二个参数也可以是一个函数。在只有一个匹配项（即与模式匹配的字符串）的情况下，会向这个函数传递三个参数：模式的匹配项、模式匹配项在字符串中的位置和原始字符串。

这个函数应该返回一个字符串，表示应该被替换的匹配项。

(4)split()

1.split分割的字符串如果没有找到分隔符，会返回一个1长度的数组还是null;

var str="abcd";
console.log((str.split(',')).length);1

//会返回一个长度为1的数组，数组的唯一一项就是字符串本身。

2.split的第一个参数如果是包含子表达式的正则表达式，那么返回的数组中，包括与这些子表达式匹配的字符串(但不包括与整个正则表示式匹配的文本)

7.localeCompare() 方法

8.fromCharCode()

返回列表

【任务11】 [外门弟子]JS-1 | 2018年05月19日 的日报 中品

今天出去玩了，看了场电影，复仇者联盟很好看。

今天完成的事情：

明天的计划：

遇到的问题：

收获：

评论

分享到

【任务11】 [外门弟子]JS-1 | 2018年05月19日的日报中品