javascript 浏览器脚本语言

  1. 基本数据类型：数字，字符串， 布尔值， null， undefined

  2. 复杂数据类型： 数组 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 } );

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

    函数 function 函数名(形参名1, 形参名2, ... 形参名n) { return }

    函数名(实参1, ... 实参 n)

    js中函数没有重载特性，同名函数只能有一个，后定义的会覆盖前面定义的

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

    正则表达式 var reg = /正则表达式/;

    [0-9] [a-zA-Z] ? , +, *, {m,n}

    reg.test("目标字符串"); // true, false

    字符串对象.replace(reg , "替换内容");

  3. html网页中使用js <script> js代码 </script> F12 控制台窗口 ========================================================

1.js配合html实现网页编程

DOM API (用js来操作html的一套api) document 文档 Object 对象 Model 模型 可以把整个html视为一个树状结构，html中的每个标签都是树上的一个节点 document |- html |-head |-meta |-title |-style |-script |-body |-p |-form |-table |-ul

1.1 查找元素

document.getElementById(标签id值); // 在设计id时要避免重复，id的取值应当唯一 document.getElementsByTagName(标签名字); // 根据标签的名字查找多个元素 父元素.getElementsByTagName(标签名字); // 查找从属于此父元素的所有与标签名称符合的子标签, 缩小了查找范围

通过选择器语法进行查找 #id， .class值, 元素

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

1.2 修改

修改内容 .innerText 在赋值时，把字符串当做普通文本处理，如果字符串中包含了html标签，那么这些标签会照原样输出 .innerHTML 在赋值时，把字符串当做html代码处理，会解析html标签再显示 修改属性 .属性名 = "新值"; 修改样式 .className="新class" // 对应访问class属性 (推荐使用class属性修改样式) .style.具体样式名="新值"; // 注意style 优先级较高，会覆盖其它样式

1.3 删除

父元素.removeChild(子元素);

1.4 新增

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

2. DOM事件

2. 事件类型

鼠标单击事件 onclick 鼠标双击事件 ondblclick 鼠标移入事件 onmouseover 鼠标移出事件 onmouseout
光标移入事件(获得焦点) onfocus 失去焦点事件 onblur 值改变事件 onchange 键盘 onkeydown 按下按键时 onkeypress 按下按键时 onkeyup 松开按键时