for in语句，flex布局，Math对象，筛选选择器，属性操作（复习知识）

for …in语句

1. 用for…in遍历数组: 循环变量x是数组的下标

2. 用for…in遍历js对象: 循环变量x是json的成员—属性与方法名

以任意顺序遍历一个对象的可枚举属性。对于每个不同的属性，语句都会被执行。

语法：

for (variable in object) {...}

参数：

• variable

在每次迭代时,将不同的属性名分配给变量。

• object

被迭代其枚举属性的对象。

---

flex布局

1. flex-direction

决定主轴的方向（即项目的排列方向）

flex-direction: row | row-reverse | column | column-reverse;

row（默认值）：主轴为水平方向，起点在左端。

row-reverse：主轴为水平方向，起点在右端。

column：主轴为垂直方向，起点在上沿。

column-reverse：主轴为垂直方向，起点在下沿。

2. flex-wrap

默认情况下，项目都排在一条线（又称”轴线”）上。

flex-wrap属性定义，如果一条轴线排不下，如何换行。

3. align-self

定义flex子项单独在侧轴（纵轴）方向上的对齐方式。

align-self: auto | stretch | center | flex-start | flex-end | baseline

| initial | inherit

4. justify-content

定义项目在主轴上对齐方式

注：这里是元素的对齐，区别于刚刚的方向

• flex-start（默认值）：左对齐

• flex-end：右对齐

• center：靠着主轴 居中对齐

• space-between：两端对齐，项目之间的间隔都相等。

• space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

• space-evenly 平均对齐，不靠着容器壁，剩余空间平分

5. align-items

项目在交叉轴上对齐方式「单轴」

flex-start：交叉轴的起点对齐。

flex-end：交叉轴的终点对齐。

center：交叉轴的中点对齐。

baseline: 项目的第一行文字的基线对齐。

stretch（默认值）伸展：如果项目未设置高度或设为auto，将占满整个容器的高度。

Math对象方法

• Random() 方法可返回介于 0（包含） ~ 1（不包含） 之间的一个随机数。

function getRndInteger(min, max) {
return Math.floor(Math.random() * (max - min) ) + min;
}

• Math.random() 与 Math.floor() 一起使用用于返回随机整数。

Math.floor(Math.random() * 10);	// 返回 0 至 9 之间的数

方法	描述
abs(x)	返回 x 的绝对值
acos(x)	返回 x 的反余弦值，以弧度计
asin(x)	返回 x 的反正弦值，以弧度计
atan(x)	以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。
atan2(y,x)	返回从 x 轴到点 (x,y) 的角度
ceil(x)	对 x 进行上舍入
cos(x)	返回 x 的余弦
exp(x)	返回 Ex 的值
floor(x)	对 x 进行下舍入
log(x)	返回 x 的自然对数（底为e）
max(x,y,z,…,n)	返回最高值
min(x,y,z,…,n)	返回最低值
pow(x,y)	返回 x 的 y 次幂
random()	返回 0 ~ 1 之间的随机数
round(x)	把 x 四舍五入为最接近的整数
sin(x)	返回 x（x 以角度计）的正弦
sqrt(x)	返回 x 的平方根
tan(x)	返回角的正切

<hr/

筛选选择器

:first获取第一个li元素	$(“li:first”)
:last获取最后一个li元素	$(“li:last”)
:eq(index)获取索引号为2的li元素	$(“li:eq(2)”)
:odd获取li元素中索引号为奇数的元素	$(“li:odd”)
:even获取li元素中索引号为偶数的元素	$(“li:even”)

筛选方法

语法	用法
parent()查找父级元素	$(“li”).parent();
children(selector)最近一级的亲儿子	$(“li”).children(“li”);
find（selector）相当于$(“ul li”)后代选择器	$(“ul”).find(“li”);
silblings(selector)查找 兄弟节点，不包括自身	$(“.first”).siblings(“li”);
eq(index)筛选指定索引号的元素	$(“.first”).eq(2)

属性操作

（1）prop（）

获取属性值、修改属性值

<a href="https://www.baidu.com/" title="百度"></a>
    <script>
        $(function() {
            console.log($("a").prop("href"));
            $("a").prop("title", "知道")
})
</script>

（2）attr（）和removeAttr()

attr() 获取自定义属性值、修改自定义属性值

<a href="https://www.baidu.com/" title="零零" index="4"></a>
    <script>
        $(function() {
           // console.log($("a").attr("index"));
            $("a").attr("index", "5")    })

removeAttr() 方法从被选元素中移除属性。

例：

<a href="#" title="零零" index="4" style="color:red">百度</a>
    <script>
        $(function() {
        $("a").removeAttr("style");
    })
</script>

order排序

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

order排序的规则: 从小到大的排序, 越小的显示在越前面, 越大的显示在越后面