浏览器运行JS代码有先后顺序,从上往下依次执行。
JS代码基本编写样式
<script type="text/javascript">
//JS代码内容
</script>
通过JS代码向页面添加内容:document.write( " This is " );
页面弹窗提示:window.alert( "This is alert" );// 句中 “window.” 可省略
向页面控制台输出信息:console.log("This is log"); //console.info( "This is info" )
定义变量:var str="Hello"; var str=3; var str=false;、
JS函数
显示函数定义 :函数定义方式:function(){} //定义在<script></script>中
隐式函数定义 : var data=function(){} //调用方式 data();
function test(a,b){
alert("content");
}
test();
test(2,3);
test("I","Miss","You");
//调用函数时,可以传递多余或少于该形式参数个数的实际参数
//js函数中存在一个内置对象“ arguments”
// " arguments "是一个数组,这个数组会把调用函数是传递的实际参数依次存入该数组中
JS对象
JS 中只有对象,没有类的概念
//JS中对象的定义
var tom={name:"Tom",age:18,bir:"1997-8-1"};
//获取对象的属性
tom.name;
//修改属性的值
tom.name="张三";//属性存在进行修改 不存在则进行添加
//JS中对象的定义
var tom={
name:"Tom",
age:18,
bir:"1997-8-1",
getName:function(){
return this.name;
}
};
//调用
tom.getName();
JS遍历
遍历格式:for(当前遍历属性别名 in 遍历对象){}
JS数组
//JS中的数组长度不固定 类型任意
var str=["Tom","李四",12,"2019",true];
str.sort(); //数组按照字典顺序排序
//int 类型数组排序
function sortNum(a,b){
return a-b;
}
str.sort(sortNum);
str.push(true); //向数组末尾添加元素
Str.pop(); //删除数组末尾的一个元素,长度-1
delete str[2]; //删除指定下标元素 长度不变
JS事件
事件模型三要素:1:事件源(模型元素),2:事件(动作),3:事件处理程序(监听器)
鼠标相关操作
onclick();//鼠标点击事件
ondblclick();//鼠标双击事件
onmuouseover();//鼠标移入事件
onmouseout();//鼠标移出事件
body相关事件
onload //页面加载完毕后触发该事件
onunload //窗口离开时触发
onscroll //页面滚动时触发
onresize //页面缩放
form表单相关事件
onblur //当前元素失去焦点
onchange //当前元素失去焦点,并且值改变
onfocus //当前元素获取焦点时
onsubmit //表单提交时
键盘相关事件
onKeyDown //按键按下触发事件
onKeyUp //按键弹起时触发的事件
innerHtml(获取html格式代码),innerText(获取文本内容)
嵌套内的元素进行操作事件时,会出现事件冒泡情况,解决办法:οnclick=(event); function alertNum(e){e.canceBubble();}
DOM
document Object model文档对象模型
概念:浏览器将html文档加载进内存,封装成一颗“文档树”,HTML里的所有标签都被封装成“标签对象“成为”文档树“上的一个节点,父标签对子标签对象拥有所有的操作权限。
document.createElement(“标签名”);//创建一个新的标签
parentTag.appendChild(newTag); //将新创建的标签添加到当前标签内容中的末尾
parentTag.removeChild(childtag); //从父标签对象中删除当前子标签
tag.parentNode //获取当前标签的父标签对象
tag.childNodes //获取当前标签的所有子节点
tag.firstChild //获取当前标签的第一个子节点
tag.nextSibling //获取当前标签的下一个同级标签
tag.previousSibling //获取当前标签的上一个同级标签
tag.type="设置标签的类型“;
var boolean=window.confirm("确认删除该信息?”);
var str = window.prompt(“提示输入框”);
tag.onclick=function(){}
定时器
window.setTimeout(function(){},time) //在time 毫秒后,执行function 函数
var initTimec = window.setInterval(function(){},time); //周期定时器,每隔time毫秒后,执行function函数
clearInterval(initTime); //清除定时器
其他
window.localhost.href="url" ; //路径跳转
var newPage=window.open("网络地址“): //在新的页面中访问该地址
newPage.close(); //关闭当前打开的窗口
localhost.reload(true); //刷新当前页面
================ History ============================
history.back(); //返回到上一个页面
history.forward(); //前进
history.go(num); //num为负数时表示后退,为正数时表示为前进 ,为0时,刷新页面