js概述2

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
鼠标点击事件 onmousedown
window.event 有一个buttons属性
取值为1表示 左键被按下
取值为2表示 右键被按下
取值为4表示 中间滚轮被按下
光标移入事件(获得焦点) onfocus
失去焦点事件 onblur
值改变事件 onchange
键盘 onkeydown 按下按键时
onkeypress 按下按键时
onkeyup 松开按键时

   keydown先发生  >    onkeypress  再发生 > onkeyup 最后发生
   
   keyCode不区分大小写  keyCode区分大小写
   可以识别特殊字符     只能识别可打印字符

3. 事件对象

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

event.preventDefault(); // 阻止标签的默认行为
设计一个文本框，只能输入数字 (可以利用 event.preventDefault())

event.stopPropagation(); // 停止事件冒泡
事件冒泡就是指：在子标签上触发的一个事件，会沿着标签的包含关系，逐级向上传播

4. this

class A {
	private int a;
	public void test() {
		this.a = 33;
	}
}
A x1 = new A();
x1.test();

A x2 = new A();
x2.test();

在javascript中， this代表触发了事件的标签对象
例如

<input type="button" value="删除" onclick="del(this)">

这里的this就代表当前的input按钮

5. BOM

Browser object model

window 代表整个浏览器窗口对象
.alert(“提示的文字”); // 弹出对话框窗口
.confirm(“提示的文字”); // 弹出确认框窗口 如果点击了确定，返回true，点击了取消返回false
.setTimeout(函数名称, 毫秒值); // 延时执行一个函数
例如：
function delay() {
console.log(“ok”);
}
var n = window.setTimeout(delay, 10000); // 执行会返回一个数字
window.clearTimeout(n); // 根据setTimeout返回的数字，可以使用clearTimeout清除延时效果

.setInterval(函数名称, 毫秒值); // 根据时间间隔执行函数
.clearInterval() // 取消间隔执行

location 对浏览器地址栏的抽象
location.href 用来获取或改变地址栏的值
location.reload(); // 刷新页面

history.back(); // 上一个网页
history.forward(); // 下一个网页