标签内部写代码,放在head和body里都可以。
一对标签可以加无限制个。
输出document.write();
可以输出标签,例如document.write("
标签h1
");分号可加可不加
执行顺序是顺序执行
单行注释://
多行注释:/**/
数据类型:
字符串string
数字number
布尔Boolean
数组Array,定义方式:var a = [1,3,4],或者var a = new Array();此时数组大小是未定义的。
对象Object
空null
未定义
可以通过赋值为null的方式清除变量
运算符
算数运算符
+,-,,/,%,++,--
赋值运算符
=,+=,-+,=,/=,%=
字符串拼接
+,字符串和其他类型拼接,自动把其他类型转换为字符串,包括布尔类型
比较运算符
==,返回布尔类型,值相同就为true,类型可以不相同
===,必须类型和值都相同才为true
逻辑运算符
&&
||
!取反
条件运算符【三目运算符】
判断条件?为真的结果:为假的结果
i>5?"i大于5":"i小于5"
条件语句
if else
if(i>10){
document.write("Yes");
}
switch
switch(i){
case 1:
document.write("是1");
break;
case 2:
document.write("是2");
break;
defualt:
document.write("不满足");
break;
循环
for
for(;;)
for in
var j = ['4',34,'hi',3434]
for(i in j)
{
document.write(i);
while&do while
函数
定义
function 函数名(){
函数体;
}
对大小写敏感,function必须是小写
调用
1、
2、HTML中调用
带参数的函数
局部变量和全局变量
声明在函数之外,或者在函数内部不用var声明,[例如在函数内部,m=10,则调用完此函数后,m就是全局变量了]任何地方都可以使用;
声明在函数内部,只有在函数内部可以使用。
异常处理
异常捕获
try{
发生异常的代码块;
}catch(err){
错误信息处理;
}
function demo(){
try{alert(str);}
catch (err){
alert(err);}
}
throw语句
事件
//这里的this指向当前的函数
DOM
Document Object Model
DOM操作HTML元素、HTML属性、CSS,事件
DOM操作HTML
1、改变HTML输出流
注意不要在文档加载完成之后使用document.write(),这会覆盖该文档。
2、寻找元素
id,getElementById("id_name")
标签
geElementByTagName("tag_name")
会找到第一个
3、改变HTML内容
使用innerHTML
getElementByTagName("div").innerHTML="None";
4、改变HTML属性:
使用attribute,例如a的href属性,和img的src属性
DOM操作CSS
语法:document.getElementById(id).style.property=new style
DOM EventListener
背景:通过改一个函数名称,就需要改相对应的调用其函数的名称,如果代码量大的话会很麻烦。
因此,使用句柄。
document.getElementById(id).addEventListener("动作",function_name)
使用句柄,不会覆盖,而是会顺序执行。
removeEventListener用法同add,会移除前面已经存在的句柄。
Javascript事件
事件流
1、描述的是在页面接受的顺序;
2、事件冒泡:
由最具体的元素接收,然后逐级向上传播至最不具体的元素的节点包括文档
button --> div -->body -->html
3、事件捕获:
从最不具体的节点接收事件,而最具体的节点应该是最后接收事件
html -- > body --> div --> button
事件处理
1、直接添加到HTML结构中
2、DOM0级事件处理
把一个函数值赋值给一个事件处理程序属性
此时点击按钮只会出现第二个,第一个被覆盖了。
3、DOM2级事件处理
addEventListener("事件名","事件处理函数","布尔值");
true:事件捕获
false:事件冒泡
removeEventListener();
这里不会覆盖
4、IE事件处理程序【版本<=8】
attachEvent
detachEvent
对于兼容性的问题,可以通过判断
var btn = document.getElementById("btn");
if(btn.addEventListener){
btn.addEventListener("click",demo);
}else if(btn.attachEvent){
btn.attachEvent("onclick",demo);
}else{btn.onclick=demo();
function demo()
{
alert("hello")
};
事件对象
1、事件对象
在触发DOM事件的时候都会产生一个对象
2、对象事件event:
** type:获取事件类型**
target:获取事件目标
stopPropagation():阻止事件冒泡
preventDefault():阻止事件默认行为
例如阻止a标签的点击链接跳转
内置对象
对象
JavaScript张所有事物都是对象
每个对象带有属性和方法
JavaScript允许自定义对象
自定义对象
1、定义并创建对象实例;
Hi there
It's Me
Yes
2、使用函数定义对象,然后创建新的对象实例
Hi there
It's Me
Yes
内置对象
String对象
处理已有的字符串,单引号双引号均可以。
常用属性及方法:
长度:str.length
索引:str.indexOf("指定字符串"),-1表示不存在
内容匹配:str.match("字符串")
替换:str.replace("原字符串","新字符串")
大小写转换:toUpperCase()/toLowerCase()
字符串转为数组:str.split("分隔符")
Date对象
用于处理日期和时间
var date = new Date();
常用方法:
date.getFullYear()获取年份
date.getTime()获取毫秒
date.setFullYear(yyyy-mm-dd)设置具体日期
getHours() 小时
getMinites()分钟
getSeconds()秒
Array对象
concat
不会改变连接前后的值
a=[1,2]
b=[3,4]
c=a.concat(b)//c为[1,2,3,4]
sort
会改变顺序
a=['t','b','l']
a.sort()//为['b','l','t']
push()
会添加到原数组中
a=[1,2]
a.push(3);//此时a为[1,2,3]
reverse()
会改变原数组的排序
a=[1,2,3]
a.reverse()
Math对象
执行常见的算术任务
Math.round()
Math.random()
结合parseInt可以取到1~10的随机整数值:
parseInt(Math.random()*10)
Math.max()
Math.max(1,5,6,3,12)结果是12
Math.min()
Math.abs()
Javascript DOM对象控制HTML
getElemensByName
getElemensByName("name")存储的是一个数组
getElemensByTagName与getElemensByName用法一致
getAttribute("attr_name")
获取节点对象的指定属性名称
Hi there
It's Me
Yes
setAttribute("属性名","属性值")
childNodes()
子节点获取的是一个对象列表
parentNode()
父节点只能有一个。
createEement()
var body = document.body;
var input = document.createElement("input");//创建节点类型
inpute.type="button";//节点的类型
input.value="按钮";//新建节点的名称
body.appendChild(input);//body添加目标子节点
inserBefore()
插入节点
var div = document.getElementById('div')
var body = document.body;
var input = document.createElement("input");//创建节点类型
var node = document.getElementById('2');
input.type="button";//节点的类型
input.value="按钮";//新建节点的名称
div.insertBefore(input,node);//div添加目标子节点,在node之前
offsetHeight不包含滚动条
var width = document.body.offsetwidth||document.documentElement.offsetwidth//这里的||是兼容性的写法
var height = document.body.offsetheight||document.documentElement.offsetheight
scrollHeight包含滚动条
浏览器对象对象
window对象
window对象是BOM的核心,window对象值当前的浏览器窗口;
所有JavaScript全局对象、函数以及变量均自动成为window对象的成员;
全局变量是window对象的属性
全局函数是window对象的方法
甚至HTML DOM的document也是window对象的属性之一,因为document是全局的,因此使用时省略了前面的window.
window尺寸
window.innerHeight - 浏览器窗口内部高度
window.innerWidth - 浏览器窗口内部宽度
window方法
常用方法:
window.open(路径,名称,样式) 打开新窗口
window.close() 关闭当前窗口
计时器
1、计时事件:
通过使用JavaScript,可以在一个设定的时间间隔之后来执行代码,而不是函数被调用后立即执行;
2、计时方法:
a、setInterval(function(){function_name},interval_value) - (这里为啥是函数里调函数呢,是因为不调的话就只会执行一次)间隔指定的毫秒数不停的执行指定的代码【这里有点疑问,即便是我设置间隔值为0一样执行】
clearInterval() 方法用于停止setInterval()方法执行的函数代码
It's Me
b、setTimeout() - 暂停指定的毫秒数后执行指定的代码;
clearTimeout() 方法用于停止执行setTimeout()方法的函数代码
It's Me
History对象
window.history 对象包含浏览器的历史url集合
history.back() 与浏览器点击后退按钮功能相同
history.forward() 与浏览器点击前进按钮功能相同;
history.go() 进入历史中的某个页面,进入上一个页面,需要给的值是-1,即history.go(-1)此功能可以结合是否正确登录判断之后应该跳转的页面。【这个还需要再学习】
Location对象
window.location对象 用于获得当前页面的地址(url),并把浏览器重定向到新的页面。
Location对象的属性:
location.hostname 返回web主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回web主机的端口
location.protocal 返回使用的web协议
location.href 返回当前页面的url
location.assign() 加载新的文档,可以在括号内填写地址,使用onclick事件调用
Screen对象
window.screen 对象包含有关用户屏幕的信息
screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度
screen.height - 屏幕高度
screen.width - 屏幕宽度
JS瀑布流效果 - 布局
js里的第十集,每太看明白,可能太累了,下次继续看