JS基础使用操作

浏览器运行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时，刷新页面