DOM动画效果基础入门

一、什么是DOM?

Document Object Model文档对象模型

当创建一个网页并把它加载到web浏览器中时,如果没有document(文档);

DOM根据你编写的网页文档创建一个文档对象

Javascipt语言里面的对象分为三类 :

1.用户定义对象(user-defined object) :有程序员自行创建的对象

2.内建对象(native object):内建在JavaScript语言对象里面的,比如说 Array Math 和Date

3.宿主对象(host object):有浏览器提供的对象(window对象)

window对象对应着浏览器窗口的本身。这个对象的属性和方法通常被统称为BOM(浏览器对象模型)BOM向程序员提供window.open()和window.Onload();

实例:你们在上网的时候看到各种弹出窗口的下拉框菜单,几乎都是有BOM的方法负责创建和处理

Var  Array= 【1、2、3、4】

我们现在想要把7这个数字放到  这个数组的后面

想要的是【1、2、3、4、7】

push()从后面推进去

实例:var arr = 【1、2、3、4】

想要的是把7放到这个数组里面

arr.push(7)

console.log(arr);

实例:

arr.unshift(10)放到数组的前面

console.log(arr)

实例:从后面删除

arr.pop()

console.log(arr)

实例:从前面删除

var aa = 【11、12、13】

var sum = aa。concat(arr)

var zoom = arr.concat(aa)

console.log(sum);

console.log(zoom);

把数组转换为字符串 join(作用将数组中的各个元素通过制定的分隔符进行连接成为一个字符串)

console.log(arr.join(“-”));

把字符串转换为数组

var txt = ”aa - bb -cc“

console.log(txt.split(”-“))

js是有哪几部分组成

核心 (ECMAScript) DOM BOM

ECMAAScipt 欧洲计算机制作商机构

DOM处理网页内容的方法和接口

BOM 与 浏览器交互的方法和接口

DOM树

标签 标记 元素 节点

有结构图 整个文档就是一个文档节点

每一个HTML的标签都是元素节点

标签中的文字则是文字节点

标签中的属性就是属性节点

getElementById 通过id访问节点

getElementByTagName()标签访问节点

GETElementByClassName()类名

时间: 2024-10-12 12:04:42

DOM动画效果基础入门的相关文章

动画效果-基础动画设置(改变大小,改变透明度,翻转,旋转,复原)

在可视化编程下 #import "BaseViewController.h" @interface BaseViewController () @property (weak, nonatomic) IBOutlet UIImageView *imageView; @end @implementation BaseViewController - (void)viewDidLoad { [super viewDidLoad]; } - (void)didReceiveMemoryWar

2015年最新Android基础入门教程目录(完结版)

2015年最新Android基础入门教程目录(完结版) 标签(空格分隔): Android基础入门教程 前言: 关于<2015年最新Android基础入门教程目录>终于在今天落下了帷幕,全套教程 共148节已编写完毕,附上目录,关于教程的由来,笔者的情况和自学心得,资源分享 以及一些疑问等可戳:<2015最新Android基础入门教程>完结散花~ 下面是本系列教程的完整目录: 第一章:环境搭建与开发相关(已完结 10/10) Android基础入门教程--1.1 背景相关与系统架构

Android基础入门教程——8.4.1 Android动画合集之帧动画

Android基础入门教程--8.4.1 Android动画合集之帧动画 标签(空格分隔): Android基础入门教程 本节引言: 从本节开始我们来探究Android中的动画,毕竟在APP中添加上一些动画,会让我们的应用变得 很炫,比如最简单的关开Activity,当然自定义控件动画肯定必不可少啦~而Android中的动画 分为三大类,逐帧动画(Frame)以及补间动画(Tween),还有Android 3.0以后引入的属性动画 (Property),而本节给大家带来的是第一种动画--逐帧动画

Android基础入门教程——8.3.12 Paint API之—— PathEffect(路径效果)

Android基础入门教程--8.3.12 Paint API之-- PathEffect(路径效果) 标签(空格分隔): Android基础入门教程 本节引言: 本节继续来学习Paint的API--PathEffect(路径效果),我们把画笔的sytle设置为Stroke,可以 绘制一个个由线构成的图形,而这些线偶尔会显得单调是吧,比如你想把这些先改成虚线,又 或者想让路径的转角变得圆滑等,那你就可以考虑使用这个PathEffect来实现了! 官方API文档:PathEffect 进去看文档,

web前端入门到实战:css3循环,模拟拼多多动画效果

模拟拼多多动画效果,最终效果图如下: 我们看一下实现过程. 主框架是vue开发,做成了一个动画组件,因为涉及到多个页面引用,最主要的实现是css3语法实现过程,并且要做到循环播放. 左边出来动画时间是0.5秒,停留3秒往上走,然后动画时间0.5秒,停留3秒后然后消失,消失动画时间0.5秒,总共的时间消耗是7.5秒.可以得到以下计算比例 如果大家对编程,web前端感兴趣,想要学习,打算深入了解这个行业的朋友,可以加下我们的前端学习扣qun : 784783012 ,不论你是学生还是想转行的朋友,我

【Android的从零单排开发日记】之入门篇(十六)——Android的动画效果

      什么是动画,动画的本质是通过连续不断地显示若干图像来产生“动”起来的效果.比如说一个移动的动画,就是在一定的时间段内,以恰当的速率(起码要12帧/秒以上,才会让人产生动起来的错觉)每隔若干时间在屏幕上更新一次位置.游戏中的动画效果也是由此而来.同样还有其他属性变更所引起的动画效果,从数学的角度来看,包括:(1)平移(2)旋转(3)缩放(4)透明度.当然这些属性可以组合起来使用,来达到更绚丽的画面.但是不论什么样的组合方式,我们都可以统一用Matirx运算来实现,从技术实现的角度来讲,

Jquery基础篇6___动画效果

最近由于太忙,总是没有时间写东西,不是有句古话说时间似海绵中的水,挤挤总会有的,但感觉当了程序员之后,总是在忙着写代码,忙着学新技术,时间本来就不够,想挤挤时间抽空写点东西,总是挤不出来.忙里偷得半日闲,有时间还是写写比较好.有时候感觉自己写的这些东西不是很多人都有吗,而且Jquery官网上写的要比自己好多了,但是写自己的东西总会有自己的理解,有自己的想法在其中,而且印象也比较深刻.学过Jquery的人,肯定会感觉自己当时候照着例子的时候会,真正要写大型的JS代码的时候,却总写不出来,而且过不了

基于Rebound制造绚丽的动画效果-入门篇

基于Rebound制造绚丽的动画效果-入门篇 Rebound是什么? Rebound是一个来自 Facebook 公司的 Java物理和动画库.Rebound spring 模型可用于创建动画,让你感觉很自然. Rebound的运作原理是什么? Rebound拥有两个参数:tension.friction. tension是张力,拉力. friction是摩擦力. 演示: tension:50,friction:1 rebound_t50_f1.gif 拉力为50时,摩擦为1.摩擦对拉力的损耗十

android动画效果编程基础--Android Animation

动画效果编程基础--Android Animation 动画类型 Android的animation由四种类型组成 XML中 alpha 渐变透明度动画效果 scale 渐变尺寸伸缩动画效果 translate 画面转换位置移动动画效果 rotate 画面旋转动画效果 JavaCode中 AlphaAnimation 渐变透明度动画效果 ScaleAnimation 渐变尺寸伸缩动画效果 TranslateAnimation 画面转换位置移动动画效果 RotateAnimation 画面旋转动画