前端基本功：JS（十一）动画封装(CSS样式获取、JSON遍历)

盒子 原来的位置 0 + 10 盒子现在的offsetLeft 10

|-5| = 5

这三个函数都是 数学函数

Math

比如说 consolelog(Mathceil(101)) 结果 是 2

consolelog(Mathceil(19)) 结果 2

consolelog(Mathceil(-13)) 结果 是 -1

比如说 consolelog(Mathfloor(101)) 结果 是 1

consolelog(Mathfloor(19)) 结果 1

consolelog(Mathfloor(-13)) 结果 是 -2

consolelog(Mathround(101)) 结果 是 1

consolelog(Mathround(19)) 结果 是 2

匀速动画的原理： 盒子本身的位置 + 步长

缓动动画的原理: 盒子本身的位置 + 步长 (不断变化的)

( 缺陷：只能水平方向！随后的“封装运动框架单个属性会进一步改进” )

我们访问得到css 属性，比较常用的有两种：

点语法可以得到 width 属性 和 top属性 带有单位的 。 100px

但是这个语法有非常大的 缺陷， 不变的。

后面的width 和 top 没有办法传递参数的。

var w = width;

boxstylew

最大的优点 ： 可以给属性传递参数

我们想要获得css 的样式， boxstyleleft 和 boxstylebackgorundColor

但是它只能得到 行内的样式。

但是我们工作最多用的是 内嵌式 或者 外链式 。

怎么办？

核心： 我们怎么才能得到内嵌或者外链的样式呢？

外部（使用<link>）和内嵌（使用<style>）样式表中的样式（ie和opera）

两个选项是必须的， 没有伪类 用 null 替代

我们这个元素里面的属性很多， left top width ===

我们想要某个属性， 就应该 返回该属性，所有继续封装 返回当前样式的 函数。

千万要记得 每个 的意思 ： 那是相当重要

flag在js中一般作为开关，进行判断。

等动画执行完毕再去执行的函数 回调函数

我们怎么知道动画就执行完毕了呢？

很简单 当定时器停止了。 动画就结束了

案例源码：

in运算符也是一个二元运算符，但是对运算符左右两个 *** 作数的要求比较严格。in运算符要求第1个（左边的） *** 作数必须是字符串类型或可以转换为字符串类型的其他类型，而第2个（右边的） *** 作数必须是数组或对象。只有第1个 *** 作数的值是第2个 *** 作数的属性名，才会返回true，否则返回false

案例源码：

链接： > 密码：7fv8

请参照 css3 伪类选择器；

:first-child

选择某个元素的第一个子元素（IE6不支持）

:last-child

选择某个元素的最后一个子元素

:first-of-type

[CSS3]选择一个上级元素下的第一个同类子元素

:last-of-type

[CSS3]选择一个上级元素的最后一个同类子元素

:only-child

[CSS3]选择的元素是它的父元素的唯一一个了元素（IE6-8不支持）

:only-of-type

[CSS3]选择一个元素是它的上级元素的唯一一个相同类型的子元素（IE6-8不支持）

:nth-child()

[CSS3]选择某个元素的一个或多个特定的子元素（IE6-8不支持）

:nth-last-child()

[CSS3]选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算（IE6-8不支持）

:nth-of-type()

[CSS3]选择指定的元素（IE6-8不支持）

:nth-last-of-type()

[CSS3]选择指定的元素，从元素的最后一个开始计算（IE6-8不支持）

CSS中常用的选择器：

（一）基本选择器（二）层次选择器（三）动态伪类选择器（四）目标伪类选择器

（五）ui状态伪类选择器（六）结构伪类选择器（七）属性选择器（八）伪元素

(一)基本选择器

1标签选择器：通过标签名获取元素 权重：0001

（此种选择器影响范围大，建议尽量应用在层级选择器中。）

2class选择器：通过 类名获取元素 权重：0010

（通过class类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。）

3id选择器：通过 # id名获取元素 权重：0100

（通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器。 ）

4 通配符选择器：获取到页面的所有元素

5群组选择器：用逗号隔开基本选择器，表示这些选择器都获取到

(二)层次/关系选择器

（主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。）

1包含选择器：用空格隔开基本选择器，表示后一个选择器是前面的后代

例：p a { color:red; }

2子代选择器：用>隔开基本选择器，表示后一个选择器是前面的子代

例：ul>li { line-style: none; }

3相邻兄弟选择器：E+F:表示获取到E后面的紧跟着的F元素（同级的）

例： a+a { }

4兄弟选择器：E~F:表示获取到E后面所有的同级的F元素

例： li~li { }

(三）动态伪类选择器

1 a:link 锚链接被访问前添加样式

2 a:visited 锚链接被访问后添加样式

3 e:hover 鼠标悬停在元素上添加样式

4 e:active 鼠标点击元素时添加样式

5 :focus 表单元素被聚焦时，添加样式

(四)目标伪类选择器

语法： 目标:target {属性：属性值} 被选中的目标添加样式

目标:target E子元素{属性：属性值} 被选中的目标里的E子元素添加样式

(五)ui状态伪类选择器

1 :enabled 可用的表单元素添加样式

2 :disabled 不可用的表单元素添加样式(disabled )

3 :checked+E 被选中的表单元素添加样式

(六)结构伪类选择器

1 E:first-child 获取到E元素，且要满足为其父元素的第一个孩子。

2 E:last-child 获取到E元素，且要满足为其父元素的最后一个孩子

3 E:nth-child(n) 获取到E元素，且要满足为其父元素的第n个孩子

n的用法：

(1)6n倍数 (2)even偶数/2n odd奇数/2n-1（如可用来选中奇偶行来实现 “隔行换色”）

(3) -n+5 选中1-5

(4)p:nth-child(-n+3):nth-child(n+2) 2-3个

4 E:nth-last-child(n) 获取到E元素，且要满足为其父元素的倒数第n个孩子

5 E:first-of-type 获取到E元素，且要满足为其父元素的第一个该类型的孩子

6 E:last-of-type 获取到E元素，且要满足为其父元素的最后一个该类型的孩子

7 E:nth-of-type(n) 获取到E元素，且要满足为其父元素的第n个该类型的孩子

8 E:nth-last-of-type(n)获取到E元素，且要满足为其父元素的倒数第n个该类型的孩子

9 E:empty 获取到空的E元素（注：连空格都不能有）

(七)属性选择器

1 E[attr] 拥0有attr属性的E元素添加样式 如div[class];

2 E[attr="val"] 拥有attr属性值 为 val的E元素添加样式 如p[class="ab"]

3 E[attr="val"] attr属性值 包含 val的E元素添加样式

如ul[class="c"] 指class类名中包含有c字母的E元素

4 E[attr^="val"] attr属性值以val 开头 的E元素添加样式

5 E[attr$="val"] attr属性值以val 结尾 的E元素添加样式

(八)伪元素

1 E::before给E元素添加第一个子元素 （前面）

2 E::after 给E元素添加最后一个子元素（后面）

3 E::first-letter给E元素第一个字添加样式

4 E::first-line给E元素第一行添加样式

5 E::selection 元素内容被选中时添加样式(火狐需要加前缀-moz-)

原生JS来 *** 作比较麻烦，每个浏览器 *** 作方法都不一样，如果是写在style属性里的CSS，可以这么 *** 作：

objstyletransform

如果是写在css里就要判断浏览器了，比较麻烦，推荐你用jQ吧，一句搞定：

objcss("transform")

css的focus伪类是选择拥有焦点的元素并匹配样式，也就是说它不是一种动作（让元素获得焦点），而是根据元素的状态（是否有焦点）来选择样式。

它们是可以一块用的，但并不是你想象的那样：

xxx:hover:focus {color:red}

这个的意思就是如果xxx拥有焦点则鼠标经过时使其文字颜色变为红色。

要想实现你要的功能，必须用js才能实现：

xxxonmouseover=function(){

thisfocus();

}

您好，使用原生js获取

一、getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值，

返回的是一个CSS样式声明对象 ， 只读， 此方法支持Firefox浏览器;

语法：var style=windowgetComputedStyle(“元素”，“伪类”);第一个参数是必须的，第二个为可选的。

二、currentStyle 是一款可以兼容IE浏览器的属性返回的是当前所有最终使用的CSS属性值，

利用elementCurrentStyleattribute可获取

其与getComputedStyle区别：1、 currentStyle不支持伪类样式获取；

2、currentStyle不支持现代浏览器，支持IE

原生JS中如何获取CSS属性中的值

这个选择器的伪类的字体应该是：font-family: FontAwesome;并且应该是4X版的，图标字体；可以去官网：fontawesome点io查看。

CSS伪类是用来添加一些选择器的特殊效果。

解释：在感觉上伪类可以是动态的，当用户和文档进行交互的时候一个元素可以获取或者失去一个伪类。例外的是":first-child"能通过文档树推断出来，":lang"在一些情况下也在从文档树中推断出来。

由此可以看出，它的功能和class有些类似，但它是基于文档之外的抽象，所以叫伪类。

扩展资料

伪类有：:first-child ，:link:，vistited，:hover:，:active，:focus，:lang，:right，:left，:first

CSS很多的建议并没有得到浏览器的支持，但有四个可以安全用在超链接上的伪类。

:link用在未访问的连接上。

:visited用在已经访问过的连接上。

:active用于获得焦点（比如，被点击）的连接上。

:hover 用于鼠标光标置于其上的连接。

尽管CSS给予绕开的控制权，用不同的颜色表示已经访问过的连接是一个很好的习惯，因为很多用户还是这样预期的。伪类（除了hover）不常用，恐怕也没有过去常用。因此，它没有过去那样有用了。但如果能收集常用用户的意见，你会发现应该使用它。

传统上，连接文本是蓝色的，已访问的连接是紫色的。也许，这是最有效、最有用的颜色。然而，伴随着CSS的广泛发展，这种颜色不会是平常的了，用户也不再假设连接必须是蓝色或紫色的。

参考资料来源：百度百科-伪类

css选择器有，标签名选择器，类选择器，ID选择器，后代选择器，群组选择器。

新建文件创建标记选择器。

效果。

创建类别选择器。

创建ID选择器。

效果。

附上源码。

以上就是关于前端基本功：JS（十一）动画封装(CSS样式获取、JSON遍历)全部的内容，包括:前端基本功：JS（十一）动画封装(CSS样式获取、JSON遍历)、css中如何获取dom元素、css有哪些选择器等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！