for in语句,flex布局,Math对象,筛选选择器,属性操作(复习知识)

简介: 用for…in遍历数组: 循环变量x是数组的下标用for…in遍历js对象: 循环变量x是json的成员—属性与方法名以任意顺序遍历一个对象的可枚举属性。对于每个不同的属性,语句都会被执行。

for ...in语句

  1. 用for...in遍历数组: 循环变量x是数组的下标
  2. 用for...in遍历js对象: 循环变量x是json的成员---属性与方法名

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

语法:

for (variable in object) {...}

参数:

  • variable

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

  • object

被迭代其枚举属性的对象。
<hr/>

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排序的规则: 从小到大的排序, 越小的显示在越前面, 越大的显示在越后面

目录
相关文章
|
4月前
|
设计模式 容器
13.HarmonyOS流式卡片列表实现指南:Flex多行布局详解
在现代移动应用开发中,流式卡片列表是一种常见且实用的UI设计模式。它能够自适应屏幕宽度,在有限空间内高效展示多个内容项。本教程将详细讲解如何使用HarmonyOS的ArkUI框架中的Flex组件实现一个灵活的流式卡片列表,重点关注多行布局与对齐策略的应用。
103 2
|
4月前
|
开发者 UED 容器
07.精通HarmonyOS Flex对齐:从基础到高级布局技巧(上)
在HarmonyOS Next的ArkUI框架中,Flex容器提供了强大而灵活的对齐系统,使开发者能够精确控制子元素在容器中的排列方式。掌握这些对齐技术,是构建专业级用户界面的关键。
122 0
|
4月前
|
UED 容器
5.HarmonyOS Next开发宝典:掌握Flex布局的艺术
Flex布局(弹性布局)是HarmonyOS Next中最强大的布局方式之一,它提供了一种更加高效、灵活的方式来对容器中的子元素进行排列、对齐和分配空间。无论是简单的居中显示,还是复杂的自适应界面,Flex布局都能轻松应对。
143 0
|
4月前
|
UED 容器
10.HarmonyOS Next布局进阶:嵌套Flex容器与空间分配策略
在HarmonyOS Next的ArkUI框架中,Flex布局是构建用户界面的核心技术之一。通过嵌套使用Flex容器,我们可以创建复杂而灵活的界面结构,满足各种应用场景的需求。本教程将深入探讨如何在HarmonyOS Next中使用嵌套Flex容器实现复杂布局,以及如何合理分配和控制空间。
111 0
|
7月前
|
开发者 容器
鸿蒙开发:弹性布局Flex
在实际的开发中,需要掌握主轴与交叉轴的关系、换行规则及子元素属性,同时注意性能与兼容性问题,还有一点,Flex组件在渲染时存在二次布局过程,因此在对性能有严格要求的场景下建议使用Column、Row代替。
175 10
鸿蒙开发:弹性布局Flex
|
11月前
|
容器
Bootstrap5 Flex(弹性)布局4
排序:.order 类可设置弹性子元素的排序,范围从 .order-1 至 .order-12,数字越小优先级越高。外边距:.ms-auto 和 .me-auto 分别用于设置子元素的右侧和左侧外边距为 auto。包裹:.flex-nowrap(默认)、.flex-wrap 和 .flex-wrap-reverse 用于控制弹性容器中的子元素是否换行及换行方向。
|
11月前
Bootstrap5 Flex(弹性)布局2
介绍Flex布局的水平和垂直方向控制。`.flex-row`使子元素水平排列,默认左对齐;`.flex-row-reverse`则右对齐。`.flex-column`让子元素垂直排列;`.flex-column-reverse`则反向排列。示例展示了不同类的效果,通过改变类名实现布局调整。
|
10月前
|
容器
Bootstrap5 Flex(弹性)布局6
使用 `.align-self-*` 类可控制指定子元素的对齐方式,包括 `.align-self-start`, `.align-self-end`, `.align-self-center`, `.align-self-baseline`, 和 `.align-self-stretch`。示例代码展示了如何在一个弹性布局中应用这些类,以实现不同设备上的响应式设计。
|
10月前
Bootstrap5 Flex(弹性)布局5
使用 .align-content-* 控制多行子元素在垂直方向上的堆叠方式,如 .align-content-start、.align-content-center 等。对于单行子元素,使用 .align-items-* 控制对齐,例如 .align-items-start、.align-items-center 等。示例代码展示了不同对齐效果的应用。
|
11月前
Bootstrap5 Flex(弹性)布局3
`.justify-content-*` 类用于调整弹性子元素的对齐方式,支持 start、end、center、between、around 等值。`.flex-fill` 类使所有子元素等宽,而 `.flex-grow-1` 则让指定子元素占据剩余空间。这些类在布局设计中非常实用。