Css补充
- css动画实现效果
- 通过animation实现动态效果(调用依然在css中实现)
步骤:通过声明关键帧,再调用关键帧
效果:达到从100px到500px的动画效果
声明关键帧时from….to…(即从什么状态到什么状态)
- Javascript(实现网页于用户实现动态交互的效果)
效果:当鼠标放在那,它会自动出现列表
还有这个计时的效果,实现网页与用户之间的互动效果,只有js可以实现
2.javascript属于解释性语音
而解释性语言与编译性语言的区别是编译性语言是要让电脑看得懂你的语音,它才会运行,例如java语音,它内部有一个编译器,它会将java文件编译成字节码文件,最后将其发在虚拟机上运行,它就是你说完了,我再全部进行翻译,而解释性语音则是你说一个它翻译一个,边运行边翻译,也好比如地图软件,你定位哪里它就显示哪里,而非全部地点都显示出来
学js就学三大块 核心语法,DOM, BOM
3.javascript组成
Js的功能:可以操作浏览器,可以操作html内容,可以操作CSS
- javascript语法
<script> </script> (写在<body>里面)
<script> </script>标签一般放在<body>标签最后,因为js属于解释性语音,边运行边解释,假若前面有东西要运行话则可先运行。
- javaScript核心语法
a.变量
String 属于强类型,在创建容器之前必须给我指定你是什么类型的;
而Var属于弱类型,var name = ‘张三’表示声明一个空间,里面存有信息,不管你什么类型,双引号或者单引号引起来的,那它就是字符串
b.数据类型
判断是true还是false;
===恒等于的意思,显示false
==仅仅是数值等于,显示true;
Alert()与console.log()的区别
Alert()只能输出string,而console.log()可以打印任何类型的数据;
用户循环遍历数组
Console.log() 指的是输出的意思,方便调试JavaScript用的
Var arr = new Array(“李雷”, “韩梅梅”) 指创建一个数组里面装有李雷,韩梅梅
增添if函数
循环的第二种写法,for in 用in作为下标
var i in arr的意思是将arr里面的元素赋予给i(相当于增强for循环)
switch演示
函数
函数分为系统函数和自定义函数
- 常用的系统函数·
ParseInt将字符串转化成数字的前提是字符串里面的内容是必须是数字,内容不能含有字母
isNaN判断其参数是否是非数字,是数字显示false,不是数字显示true
就算加了双引号,也还是显示false,因为isNaN判断的是内容是否是非数字
- 自定义函数
关键字:function
注意:
常用事件
鼠标移入事件
鼠标按下事件
点击事件
总结:js基础包括变量、数据类型、String、数组常用方法、系统函数、自定义函数、函数的调用
学完这些基础,开始学习BOM
BOM
BOM解释:就是一个模型,规定了js如何操作浏览器
1.window(BOM的核心)
Window.location 实现跳转页面
点击后
Window常用的方法
其中setTimeout()和setInterval()很重要
SetTimeout() 即是延迟器,精确到毫秒
过了五秒后变成下面这样,显示出“我是延迟器”
SetTimeout()的作用相当于一个闹钟,到了某个点后,它会给予你提示
SetInterval() 定时器,每隔多少秒就显示一次
每隔两秒钟左边数字都会+1
终极实现效果
例如小米官网左边定时器的效果,用setInterval实现此效果,每隔一秒钟减1,来实现此倒计时
3.history对象
history常用方法
History.back()
后退后
History.back()相当于浏览器向左后退的箭头
History.forward()就相当于浏览器向右前进的箭头
History.go(1)==History.forward()
History.go(-1)==History.back();
Document演示
1.通过document来获取节点,通过节点对象来修改对应的html的值和样式
在document.getElementsByTagName中,div相当于一个数组,所以在写代码时要指定哪一个数组
而document.getElementById,ID是可以唯一确定的值,而标签div不能唯一被确定,所以除document.getElementById不用贴数组外,其他的基本都要贴数组上去
2.根据层次关系来获取子节点
4.创建和插入节点
通过操作节点对象在html里面添加元素
作业
在此基础上完成下列要求
我的:
正确答案:
复习:1.js分为三大块,包括系统语法,BOM,DOM
系统语法学了变量,数据类型,函数(包括系统函数,自定义函数)
自定义函数的关键字function 函数名(a,b){ };
2.利用onclick来触发函数(即利用事件来触发方法);
3.采用的事件(onclick,onmouseover,onchange);
4.BOM:js操作浏览器的模型
BOM包括window,document,history,location;
Window.location=url作页面跳转;
- 延迟器,定时器
Settimeout(funtion(),时间);setinterval(function(),时间)但setinterval可重复调用
- History.forward()= history.go(1)
- DOM
Dom模型将html划分为不同的节点;
节点包括
元素节点:html中所有的标签
属性节点:html中所有的属性就是属性节点
文本节点:html中所有的文本
- 父子关系:标签内的节点是标签外节点的子节点
- Js如何改变html的内容和样式的?
通过获取他的节点对象(或者说通过dom对象改变节点)
获取节点==》改变html;
- 获取节点有哪些方式
- 通过document获取
- 通过节点关系获取(eg:getfirstchild)
当通过document获取时getelementbyId和其他的不同之处是什么?
Byid是唯一的,用其他的话可能会重复,人家获取的是一个数组,所以用的时候你要指明数组里面的哪一个;