JavaScript高级技术总结
正则表达式
正则表达式的作用
正则表达式的作用： 匹配字符串的一种规则，正则表达式的作用主要是用于匹配字符串的
需求： 校验手机号
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style type="text/css"></style> 7 <script type="text/javascript"> 8 9 function checkTel(input){ 10 //得到用户输入的手机号 11 var content = input.value; 12 //编写正则表达式去校验手机号 13 var reg = /^1[34578]\d{9}$/; 14 var span = document.getElementById("telSpan"); 15 if(reg.test(content)){ 16 //设置span的标签体内容 17 span.innerHTML = "<font style='color:greenyellow'>正确</font>"; 18 }else{ 19 span.innerHTML = "<font style='color:red'>错误</font>"; 20 } 21 } 22 23 </script> 24 </head> 25 <body> 26 27 手机号:<input type="text"id="tel"onblur="checkTel(this)"/><span id="telSpan"></span> 28 </body> 29 </html>
正则表达式的创建方式
方式一
var reg = /正则表达式/[模式];
方式二
var reg = new RegExp("正则表达式", "匹配模式");
var reg = /正则表达式/匹配模式;
正则表达式语法
正则表达式的语法
BOM编程
BOM概念
BOM：Browser Object Model 浏览器对象模型
BOM编程的作用
JavaScript使用了很多对象描述了浏览器的各部分信息，我们可以通过这些内置对象操作浏览器的行为。
常用的BOM对象
window对象
window对象的概念
window代表了当前浏览器的窗口
对话框的方法
计时方法
修改标签内容方法
location对象
1.1.1 location对象概念
代表浏览器的地址栏对象
location对象常用的属性
location常用的方法
代码演示
history对象
作用
history 代表了浏览器的历史浏览记录。
常用的方法
DOM编程（重点）
DOM编程概念
Document Object Model 文档对象模型，用于操作网页中html元素
DOM编程的作用
一个html页面被加载到浏览器的时候，浏览器会为每一个html标签都会创建一个对应的对象进行描述 ，然后网页上显示的内容其实就是这些html标签对应的对象的属性信息，如果我们想改变页面显示的内容，那么就应该拿到这些对象，改变对象的属性信息，从而控制页面的显示效果。
根据标签的属性找节点方法
代码演示
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>根据标签的属性找元素</title> 6 <script type="text/javascript"> 7 /* 8 通过属性找节点： 9 document.getElementById(“id”) 通过id属性到唯一的元素 , 如果页面上有多个同名的id，则得到第1个元素 10 document.getElementsByTagName (“标签名”) 通过标签名字得到一组标签，返回一个数组 11 12 document.getElementsByName(“name”) 通过name属性得到一组标签，返回一个数组 13 document.getElementsByClassName("类名") 通过类名得到一组标签，返回一个数组 14 */ 15 window.onload = function () { 16 17 //演示了getElementsByTagName方法。 18 var b2 = document.getElementById("b2"); 19 b2.onclick = function(){ 20 var aNodes = document.getElementsByTagName("a"); //根据标签名找标签对象，返回的是一个数组 21 for(var index= 0 ; index<aNodes.length ; index++){ 22 var aNode = aNodes[index]; 23 aNode.href = "http://www.itcast.cn"; 24 } 25 } 26 27 //演示getElementsByName方法 28 var b3 = document.getElementById("b3"); 29 b3.onclick = function(){ 30 //根据name找标签节点 31 var divs = document.getElementsByName("one"); 32 //遍历设置值 33 for(var index = 0; index<divs.length ; index++){ 34 var div = divs[index]; 35 div.innerHTML = "我是div"+index; 36 } 37 38 } 39 40 41 //演示getElementsByClassName方法 42 var b4 = document.getElementById("b4"); 43 b4.onclick = function(){ 44 //根据name找标签节点 45 var divs = document.getElementsByClassName("two") 46 //遍历设置值 47 for(var index = 0; index<divs.length ; index++){ 48 var div = divs[index]; 49 div.innerHTML = "我是div"+index; 50 } 51 52 } 53 54 55 56 57 } 58 59 60 61 </script> 62 </head> 63 <body> 64 <input type="button"value="(通过标签名)给a链接添加地址"id="b2"/> 65 <input type="button"value="(通过name属性)给div设值"id="b3"/> 66 <input type="button"value="(通过类名)给div设值"id="b4"/> 67 <hr/> 68 <a>123</a><br/> 69 <a>123</a><br/> 70 <a>123</a><br/> 71 <hr/> 72 <div name="one"></div> 73 <div name="one"></div> 74 <div name="one"></div> 75 <hr/> 76 <div class="two"></div> 77 <div class="two"></div> 78 <div class="two"></div> 79 </body> 80 </html>
根据节点的关系找节点
节点的类型
节点通用的属性
凡是节点都会具备以下两个属性
节点与节点之间的关系
增删改节点
通过js代码修改css样式
修改css的方式
方式一：通过style属性操作
元素.style.样式名 = "样式值";
方式二： 通过className操作
元素.className = "类名";
