Java全栈大数据学习笔记NO.11（JavaScript提升2）

一、节点操作

在 HTML DOM 中，所有事物都是节点，DOM 是被视为节点树的 HTML。

• replaceChild(new,old); 替换节点
• appendChild(); 追加节点，在父节点中追加子节点，按顺序放置在最后
• insertBefore(new,old); 插入节点，在old节点前插入new节点
  old.insertBefore(new,null); 在old节点后插入new节点

举例说明：将这三个节点操作方法放到一个程序中进行实验，对p标签进行操作

<div id="div1">
	<p>1</p>
	<p>2</p>
	<p>3</p>
	<p>4</p>
	<p>5</p>
</div>
<input type="button" value="替换节点" onclick="replaceNode()"/>
<input type="button" value="追加节点" onclick="appendNode()"/>
<input type="button" value="插入节点" onclick="insertNode()"/>
<script>
	var pArr = document.getElementsByTagName("p");
	var h1 = document.createElement("h1");
	h1.innerHTML = "h1";
	var div1 = document.getElementById("div1");
	
	//替换节点的方法
	function replaceNode(){
		div1.replaceChild(h1,pArr[3]);
	}
	//追加节点的方法
	function appendNode(){
		div1.appendChild(h1);
	}
	//插入节点的方法
	function insertNode(){
		//在old节点前插入new节点
		//div1.insertBefore(h1,pArr[2]);
		//在old节点后插入new节点
		pArr[1].insertBefore(h1,null);
	}
</script>

• .parentNode 查找父节点

• .childNodes 查找子节点，数组，且其中的文本、回车换行都会认为是子节点

• nodeName 节点名称

  • 元素节点：是标签名称
  • 属性节点：是属性名称
  • 文本节点的：永远是#text
  • 文档节点的：永远是#document

• nodeType 节点类型

  重要的节点类型

  元素类型	节点类型
  元素element	1
  属性attr	2
  文本text	3
  注释comments	8
  文档document	9

• nodeValue 节点的值

  • 对于文本节点，nodeValue属性包含文本
  • 对于属性节点，nodeValue属性包含属性值

  //获取p1的父节点
  var p1 = document.getElementById("p1");
  //打印p1的父节点
  console.log(p1.parentNode);
  //打印p1父节点的父节点
  console.log(p1.parentNode.parentNode);
  //打印p1的子节点，得到的是一个数组
  console.log(div1.childNodes);
  //打印p1子节点下标为0的节点名称
  console.log(div1.childNodes[0].nodeName);
  //打印p1子节点下标为1的节点类型
  console.log(div1.childNodes[1].nodeType);
  //打印p1子节点下标为0的节点的值
  console.log(div1.childNodes[0].nodeValue);
  

二、事件

事件：鼠标键盘触发引起的
之前用过的 onclick ：点击按钮后实现某种功能就是事件，还有许多其他事件（部分）

1. onclick 点击事件
2. ondblclick 鼠标双击
3. onload 载入/某个页面或图像被完成加载
4. onchange 内容改变
5. onblur 失去焦点
6. onkeypress 某个键盘的键被按下或按住
7. onkeyup 某个键被松开
8. onmouseout 鼠标从某元素移开
9. onmouseover 鼠标被移动到元素之上

• 绑定事件方式：有两种方式

  1. 事件=“函数名”
  2. 事件=“函数体”

  <!-- 事件="函数名" -->
  <button id="btn1" onclick="test1()">按钮1</button><br>
  <!-- 事件="函数体" -->
  <button id="btn2" onclick="alert('test2')">按钮2</button><br>
  

• 添加事件：addEventListener(event,function,useCapture);
  移除事件：removeEventListener(event,function,useCapture);

  • event是事件类型 click mouseover 没有on
  • function 事件执行的函数
  • useCapture 布尔值，指定事件是冒泡还是捕获。此参数可写可不写，默认为false
    冒泡和捕获是对于事件的，例如在div元素中有p元素，两个元素都有点击事件，当点击p元素时先触发哪个就是由第三个参数决定的，冒泡是首先处理内部的事件再处理外部，捕获则是先处理最外层再处理内部。

• onsubmit 可以实现校验

  如利用onsubmit实现表单的校验，如果用户名未被注册可以提交，否则不可以提交。onsubmit的值是true或false，true则可以提交。

  注：要想获得checkForm的返回值，得在函数前再加个return。

  <form action="04-事件的绑定和解除.html" method="get" onsubmit="return checkForm()">
  	USERNAME:<input type="text" id="input1"><br>
  	<input type="submit" value="提交"/>
  </form>
  

三、window对象常用方法

• 之前用的alert、prompt等方法其实就是window的内容，如

  window.alert("test"); //javascript中写
  var input = window.prompt("请输入一个数字");
  var flag = window.confirm("是否通过");
  

• 定时操作：window.setInterval(函数名,时间间隔) 单位毫秒，循环执行多次，也可以不加前面的window.

  setInterval(print,1000); //javascript中写
  var num = 1;
  function print(){
  	console.log(num++);
  }
  

• 停止操作：clearInterval(对象); 要先将对象赋值给一个变量

  var timeid;
  timeid = setInterval(setName,100);
  clearInterval(timeid);
  

• setTimeout(函数名,时间间隔) 开始执行设定的时间后，调用方法，只执行一次

四、正则表达式

正则表达式可以对账号密码等进行验证，查看是否符合规格，下面有几种表达方式：

• [abcde] 表示abcde其中的一个字符
• [^abc] 必须不是其中任何一个字符
• [a-z] 所有的小写字母 [A-Z]大写字母 [A-Za-z]所有字母
• [c-f] 从c到f
• [0-9] 一个数字
• [a-zA-Z0-9] 字母和数字
• [^a-z][^A-Z][^0-9] 非字母非数字
• [\u4e00-\u9fa5] 汉字

另一种方式

• \s 空白(空格，制表符，换行，换页，回车)
• \S 非空白
• \d 数字 相当于[0-9]
• \D 非数字
• \w 字母或数字 相当于[0-9a-zA-Z]
• \W 非字母或数字

表示匹配次数的元字符

• * 0次到多次
• + 1次到多次
• ? 0次或1次
• {n} 正好n次(n是数字)
• {n,} 至少n次
• {n,m} n次到m次

练习：

// 1.银行卡的六位数字密码校验
var reg = /^\d{6}$/;
var reg = /^[0-9]{6}$/
// 2.不能为空，多个纯小写字母组成
var reg = /^[a-z]+$/;
// 3.首字母为大写或小写，其余的为数字，总长度在5-8位之间
var reg = /^[a-zA-Z][0-9]{4,7}$/;
// 4.要求只能输入331或251，(|)表示或
var reg = /^(33|25)1$/;
// 5.座机号码前边为区号3-4位，第一位是0 中间有- 后边是7-8位数字
var reg = /^0[0-9]{2,3}-[0-9]{7,8}$/;
// 6.手机号，第一位1 第二位 3,4,5,7,8,9 后边的随意共11位
var reg = /^1[345789][0-9]{9}$/;
// 7.出生年月 19几几-月01-12-日01-31 假设每个月都有31天
var reg = /^(19|20)\d\d-(0[1-9]|1[012])-(0[1-9]|[12][0-9]|3[01])$/;
// 8.邮箱 有且仅有一个@和. @在.之前 且@不能使第一位 .也不能是最后一位 @和.不能相邻
var reg = /^.+@.+[.].+$/;
// 9.身份证号 前6位数字出生年月日8位 151617位随意 最后一位可以是数字或者x X
var reg = /^\d{6}(19|20)\d{2}(0[1-9]|1[012])(0[1-9]|[12][0-9]|3[01])\d{3}(\d|x|X)$/;

五、json对象

JSON：JavaScript Object Notation(JS对象表示法)，JSON 是存储和交换文本信息的语法，独立于语言和平台，前后端分离

语法：名称/值，如{name:value,name:value…}，name有双引号，value根据具体的值判断有无双引号
一般都是用{}创建对象，如：

var json1 = {"age":12,"bookname":"三国演义","flag":true};
console.log(json1.bookname);
		 	
var json2 = {
	"sites":[
		{"name":"菜鸟教程","url":"www.runoob.com"},
		{"name":"google","url":"www.google.com"},
		{"name":"微博","url":"www.weibo.com"}
	]
} 
console.log(json2.sites[2].url);

再实际应用中，后台给前端的数据是json格式的字符串，而不是json对象，所以要把字符串转换成对象。有两种方法

• JSON.parse

  var str = '{"stuname":"小明","age":12,"phone":"13566887777"}';
  var jsonObj = JSON.parse(str);
  console.log(jsonObj);
  

  

• eval 利用eval将字符串转换为对象 eval(’(’+str+’)’)，
  加小括号的原因：eval({json格式的代码块}) 大括号会认为是代码块，加上小括号才能识别出来，变成对象

  var str = '{"stuname":"小明","age":12,"phone":"13566887777"}';
  var obj2 = eval('('+str+')');
  console.log(obj2);
  

  
  eval 还有另一个功能，就是eval将字符串表达式进行运算获取结果

  console.log("1+1");
  console.log(eval("1+1"));
  

  

六、附加语法

• this 关键字：代表当前对象
  如下面程序，在点击按钮后会将整个input标签都传过去

  <input type="button" value="删除" onclick="deleteTr(this)">
  <script>
  	function deleteTr(obj){
  		console.log(obj);
  	}
  </script>
  

  

• .focus(); 落焦点，焦点保持
  如下面程序，即使鼠标点击其他空白区域，焦点仍然在input文本框内(其他程序不做记录，这里只记用法)

  document.getElementById("input1").focus();
  

• startsWith(); 一个一个比对，直到出现不一致则false
  如下面程序，两个文本框输入的密码直到出现第一个不一致才进行提示

  if(pwd1.startsWith(pwd2)){
  	document.getElementById("div1").innerHTML="";
  }
  else{
  	document.getElementById("div1").innerHTML="<font>两次密码不一致</font>";
  }
  

• .toString(n) 将变量转换成n进制，n可以是2-36之间的整数，若不写则默认是10进制

  var num=15; //小数也可以
  console.log(num.toString(16)); //打印结果为f
  

• CSS样式中的 display=“none”; 是令元素彻底消失，会影响布局；
  visibility=“hidden”; 使元素隐藏，元素所占位置不变，不会影响布局；