1.正则对象
1.1正则量词
-
a? 匹配前面的字符0次或者1次 a这个字符可有可无
// 1. a? 匹配前面的字符0次或者1次 a这个字符可有可无
var reg = /\d?/;// 匹配0-9之间的数字 这个数字可有可无
var str = "1web";
var str = "1we4b";
console.log(reg.test(str));// true
// 验证网址 \转义 让符号失去原本的意义
var reg = /https?:\/\/www\.baidu\.com/;// https可以 http也可以
var str = "https://www.baidu.com";
var str = "http://www.baidu.com";
console.log(reg.test(str));//true-
a* 匹配前面的字符0次或者多次 尽可能的多匹配
// 2.a* 匹配前面的字符0次或者多次 尽可能的多匹配
var reg = /a*/g;
var str = "aaaaa1aaaaaa1";
console.log(reg.exec(str));//"aaaaa"-
a+ 匹配前面的字符至少1次
// 3 a+ 匹配前面的字符至少1次
// 验证网址
var reg = /https?:\/\/www\.\w+\.com/;
var str = "https://www.jd.com";
var str = "http://www.12306.com";
var str = "http://www.taobao.com";
console.log(reg.test(str));//true1.2或和分组
-
或 |
// 或 |
var reg = /https?:\/\/www\.\w+\.com|net|org|cn/;
var str = "http://www.jd.cn";
var str = "http://www.jd.com";
var str = "http://www.a.com";
var str = "cn";//true 但是不是我们想要的效果 因为把 | 左右的式子当成了一个整体
console.log(reg.test(str));// true -
分组 ()
// 分组 ()
var reg = /https?:\/\/www\.\w+\.(com|net|org|cn)/;
var str = "cn";// false
var str = "http://www.baidu.com"
console.log(reg.test(str));1.3前瞻后顾
-
前瞻
-
前瞻
-
前瞻(?=a) 正向肯定预查 后面必须要跟a字符
-
-
// 前瞻(?=a) 正向肯定预查 后面必须要跟a字符
var str = "www36com34";
var reg = /\d(?=\d)/g;// 检测数字 数字后面必须跟数才满足条件
console.log(reg.exec(str));//3
console.log(reg.exec(str));//3 输出的是第二个3
console.log(reg.exec(str));//null-
负前瞻
-
负前瞻(?!a) 正向否定预查 后面不能跟a字符
-
// 负前瞻(?!a) 正向否定预查 后面不能跟a字符
var str = "www36com34";
var reg = /\d(?!\d)/g;// 检测数字 数字后面不能跟数字才满足条件
console.log(reg.exec(str));// 6
console.log(reg.exec(str));// 4
console.log(reg.exec(str));// null后顾
-
后顾
-
后顾(?<=a) 反向肯定预查 前面必须跟a字符
-
// 后顾(?<=a) 前面必须跟a字符
var str = "www36com34";
var reg = /(?<=\d)\d/g;// 检测数字 前面必须跟数字
console.log(reg.exec(str));// 6
console.log(reg.exec(str));// 4
console.log(reg.exec(str));// null-
负后顾
-
负后顾(?<!a) 反向否定预查 前面不能跟a字符
-
// 负后顾(?<!a) 前面不能跟a字符
var str = "www36com34";
var reg = /(?<!\d)\d/g; //检测数字 前面不能跟数字
console.log(reg.exec(str));//3
console.log(reg.exec(str));//3
console.log(reg.exec(str));//null2.DOM
2.1DOM简介
DOM 文档对象模型(document object model) 主要提供一些api方法来操作html文档
2.2DOM原理
-
DOM为了方便开发者操作html文档 对文档进行了抽象化处理 将html文档抽象化成一个树状结构,经过抽象之后 我们返现每一个标签都变成了树状结构中的一个节点 我们可以通过各种方法来获取节点，document就是一个对象 这个对象就是指html文档
2.3DOM获取元素
2.3.1get系列获取元素
-
document.getElementById("id名") 获取整个文档下的id名的元素 可以获取到一个
-
document.getElementsByTagName("标签名") 获取整个文档下该标签名的元素
-
document.getElementsByClassName("类型名") 获取整个文档下该类名的元素
2.3.2query系列获取元素
==不支持IE低版本==
-
querySelector
-
document.querySelector("css选择器") 在任意范围内 通过css选择器 获取该类型的元素集合中的第一个
-
// 1.获取元素
var list = document.querySelector("ul");// 获取整个文档下的里
console.log(list);
var list = document.querySelector(".box");
console.log(list);//<li class="box">这是第2个li标签</li>
// 只想获取wrap下的第一个li
var list = document.querySelector("#wrap li");
console.log(list);// <li>1</li>-
querySelectorAll
-
document.querySelectorAll("css选择器") 在任意范围内 通过css选择器 获取该类型的元素集合
-
// 2
var list = document.querySelectorAll("li");
console.log(list);//NodeList(9) [li.box, li.box, li.box, li, li, li, li, li, li]
var list = document.querySelectorAll("#wrap li");
console.log(list);// NodeList(3) [li, li, li]2.3.3get系列和query系列的区别
-
get动态获取元素 后续有添加或者删除元素 都能实时获取 get是支持ie低版本
-
query静态获取元素 后续有添加或者删除元素 不能实时获取 query是不支持ie低版本
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<button>添加</button>
<script>
// 1.get系列获取li
var getLi = document.getElementsByTagName("li");
console.log(getLi);//HTMLCollection(3)
// 2.query系列获取li
var queryLi = document.querySelectorAll("li");
console.log(queryLi);// NodeList(3)
// 3.给ul追加li标签
var btn = document.getElementsByTagName("button")[0];
var list = document.getElementsByTagName("ul")[0];
/*
get动态获取元素 后续有添加或者删除元素 都能实时获取 get是支持ie低版本
query静态获取元素 后续有添加或者删除元素 不能实时获取 query是不支持ie低版本
*/
btn.onclick = function(){
list.innerHTML+="<li>4</li>";
console.log(getLi,"get系列");//HTMLCollection(4) [li, li, li, li] 'get系列'
console.log(queryLi,"query系列");//NodeList(3) [li, li, li] 'query系列'
}
</script>2.4DOM获取节点
2.4.1 获取子节点
-
父元素.children
-
作用：获取子元素节点
-
// 1.父元素.children 获取子元素节点
var child1 = list.children;
console.log(child1);//HTMLCollection(5) [li, li, li, li, li]父元素.childNodes
-
作用：获取父元素下的所有子节点
// 2.父元素.childNodes 获取所有的节点
var child2 = list.childNodes;
console.log(child2);//获取的是所有的子节点(包括文本节点 注释节点 元素节点)-
==DOM中的节点分类==
-
元素节点 html文档所有标签抽象出来的都是元素节点
-
属性节点 标签的属性抽象出来是属性节点
-
文本节点 html文档中的文本内容抽象出来都是文本节点(包括空格和换行符)
-
注释节点 注释内容抽象出来是注释节点
-
-
==判断节点的类型==
-
语法 节点.nodeType
-
元素节点 1
-
属性节点 2
-
文本节点 3
-
注释节点 8
-
-
// 3.判断节点类型 节点.nodeType
var type = child2[3].nodeType;
console.log(type);//1 元素节点
var type = child2[0].nodeType;
console.log(type);//3 文本节点
var type = child2[1].nodeType;
console.log(type);//8 注释节点获取节点名称
-
语法：节点.nodeName
// 4.判断节点名称 节点.nodeName
var name = child2[0].nodeName;
console.log(name);// #text 文本节点
var name = child2[1].nodeName
console.log(name);//#comment 注释节点
var name = child2[7].nodeName
console.log(name);"DIV" //元素节点获取的标签名的大写获取或者设置节点内容
-
语法：获取 节点.nodeValue 设置 节点.nodeValue = 值
-
==注意：元素节点无法获取和设置内容 因为元素节点有自己的方法==
// 5.设置或者获取节点内容 获取 节点.nodeValue 设置 节点.nodeValue = 值
var value = child2[0].nodeValue;
console.log(value);// 213
var value = child2[1].nodeValue;
console.log(value);// 这是li标签
var value = child2[3].nodeValue;
console.log(value);// null 元素节点的文本内容 标签.innerHTML 标签.innerText
//设置
child2[0].nodeValue = "456";
child2[1].nodeValue = "456";2.4.2 获取父节点
-
子节点.parentNode
-
获取直接父元素
-
-
子节点.offsetParent
-
获取最近定位父元素 如果没有定位父元素则是获取body
-
var oSpan = document.querySelector("span");
// 1.获取直接父元素 子元素.parentNode
console.log(oSpan.parentNode);// p
// 2.获取最近定位父元素 如果没有定位父元素则是获取body
console.log(oSpan.offsetParent);// p2.5操作节点
2.5.1追加节点
==存在问题 ：innerHTML有覆盖原有内容的缺点 后续追加的内容会把原先的事件覆盖掉==
==解决方法 ：在原有的结构后面直接追加标签 追加节点就能解决这个问题==
-
创建节点
-
创建元素节点 document.createElement("节点名称")
-
创建文本节点 document.createTextNode(文本内容)
-
<script>
// 1.创建元素节点 document.createElement("节点名称")
var a = document.createElement("div");
console.log(a);
// 2.创建文本节点
var b = document.createTextNode("123");
console.log(b);
</script>-
追加节点
-
父元素.appendChild(要添加的子节点)
-
<script>
// 1.将文本节点追加到元素节点中
var a = document.createElement("div");//创建元素节点
var b = document.createTextNode("123");//创建文本节点
// 将文件节点追加到元素中
a.appendChild(b);
console.log(a);
// 将div显示在页面上
document.body.appendChild(a);
// 2.直接给元素节点设置内容
var a1 = document.createElement("li");
a1.innerHTML = "123";
console.log(a1);
// 将li追加到页面上
document.body.appendChild(a1);
</script>
287
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
