JS基础

JS

1. 什么是JS

HTML是网页的结构，CSS是网页的外观，而JavaScript是页面的行为。

JavaScript是一种嵌入到HTML页面中的脚本语言，由浏览器一边解释一边执行。
单纯的HTML页面是静态的（只供浏览），而JavaScript的出现，把静态的页面转换成支持用户交互并响应相应事件的动态页面。

2. JS数据类型

2.1 基本数据类型：

数字，字符串， 布尔值， null， undefined

2.2复杂数据类型

//html网页中使用js格式
<script>
    js代码
</script>

1）数组

   var array = new Array();
   var array = [1,2,3,4];
   访问元素  array[下标]

    for(var i = 0; i < array.length; i++) {
       array[i]
    }
   .push(值); .pop();
   .unshift(值);  .shift();
   .splice(下标, 个数);
   .sort(); // 对数组进行排序，但会把元素视为字符串类型
   .sort( (a,b)=>{ a - b } );

2）对象

   var obj = new Object();
   var obj = {name:"值", age:17};
   obj.sex = "男";
   delete obj.sex;

3）函数

   function 函数名(形参名1, 形参名2, ... 形参名n) {
       return     // js中函数没有重载特性，同名函数只能有一个，后定义的会覆盖先定义的
   }

4）日期

   var date = new Date();
   var date = new Date(毫秒值);
   .getFullYear();
   .getMonth();

5）正则表达式

   var reg = /正则表达式/;
   // [0-9] [a-zA-Z]
   // ? , +, *, {m,n}
   reg.test("目标字符串"); // true, false
   字符串对象.replace(reg , "替换内容");

3. F12控制台窗口

3.1 用js、html进行网页编程

3.1.1 查找元素

    document.getElementById  //根据ID查找元素，ID值唯一
    document.getElementsByTagName  //根据标签名查找多个元素
    父元素.getElementsByTagName  //根据标签名查找从属于该父元素的子元素

通过选择器查找

    document.querySelector("选择器");  //查找与选择器匹配的第一个标签
    document.querySelectorAll("选择器");  //查找与选择器匹配的所有标签

3.1.2 修改元素

    元素.innerTest;  //修改内容，赋值时将字符串当做普通文本原样输出
    元素.innerHTML;  //修改内容，赋值时将字符串当做HTML代码解析后输出
    元素.属性名="新属性值";  //修改属性
    元素.className="新class值";  //修改class属性
    元素.style.具体样式名="新值"；  //修改样式（推荐使用class属性修改样式）

3.1.3 删除元素

    父元素.removeChild(子元素);  //从父元素中删除子元素

3.1.4 新增元素

    父元素.appendChild(子元素);  //建立元素的父子关系
    document.createElement("元素");  //创建新的元素

3.2 DOM事件

事件类型
鼠标单击事件 onclick
鼠标双击事件 ondblclick
鼠标移入事件 onmouseover
鼠标移出事件 onmouseout
鼠标点击事件 onmousedown
window.event 有一个buttons属性
取值为1表示左键被按下
取值为2表示右键被按下
取值为4表示中间滚轮被按下
光标移入事件（获得焦点） onfocus
失去焦点事件 onblur
值改变事件 onchange
键盘录入事件 onkeydown 按下按键时，先发生，keyCode 不区分大小写，且可以识别特殊字符
onkeypress 按下按键时，再发生，keyCode 区分大小写，但只能识别可打印字符
onkeyup 松开按键时，最后发生

3.3 事件对象

window.event
当事件发生时所有跟事件相关联的信息可以简写为event

    event.preventDefault();  //阻止标签的默认行为
    event.stopPropagation();  //停止事件冒泡

3.4 this对象

javascript中this代表触发了该事件的对象

    <input type="button" value="删除" onclick="del(this)">
    //this代表当前input按钮

3.5 浏览器对象模型(BOM)

Browser object model

    //window代表整个浏览器窗口的对象
    .alert("提示的文字");  //弹出对话窗口
    .confirm("提示的文字");  //弹出确认框窗口，若单击确定则返回true，单击取消返回false
    .setTimeout(函数名，毫秒值);  //延时执行一个函数
    window.clearTimeout(setTimeout的返回值);  //清除延时效果
    .setInterval(函数名，毫秒值);  //按间隔执行一个函数
    window.clearInterval();  //取消间隔效果

    //location 对浏览器地址栏的抽象
    location.href;  //用来获取或改变地址栏的值
    location.reload();  //刷新页面
    history.back();  //返回上一页
    history.forward();  //前往下一页