web前端 JS基础（二）
正则表达式的简介
正则表达式用于定义一些字符串的规则，计算机可以根据正则表达式来检查一个字符串是否复合规则，获取将字符串中符合规则的内容提取出来
- 创建正则表达式：
var 变量=new RegExp(“正则表达式”，“匹配模式”）
正则表达式的一个方法:test()
用这个方法可以用来检查一个字符串是否符合正则表达式的规则，符合则返回true,不符合则返回false
var reg=new RegExp("a");//这个正则表达式用来检查一个字符串中是否含有a,严格区分大小写
var exp="a";
result=reg.test(exp)
console.log(typeof reg)//用typeof来检查返回一个object
console.log(result)
在构造函数中可以传递一个匹配模式作为第二个参数，有两个：i(忽略大小写)，g(全局匹配模式)
- 是用字面量来创建正则表达式（用字面量创建更加简单，而用构造函数创建更加灵活）
语法：var 变量=/正则表达式/匹配模式
| 表示一个或的意思和[]效果相同
var reg=/a|b/;//检查一个字符串中是否含有a或b也可以写出var reg=/[ab]/
console.log(reg.test("hbc"))
[a-z] 任意小写字母
[A-Z] 任意大写字母
[A-z] 任意字母
[^] 表示找不在方括号里的字符，如[^a-z]表示找除了小写字母的其他字符
检查一个字符串中是否含有abc或adc或aec:reg=/a[dbc]c]
字符串和正则相关的方法
- split():可以将一个字符串拆分为一个数组，该方法中可以传递一个正则表达式作为参数，这样该方法可以根据正则表达式去拆分字符串（不设置全局匹配也会全局匹配）
var str="1a2b3c4d5";
var result=str.split(/[a-z]/);
console.log(result);
- search():可以搜索字符串中是否含有指定内容，搜索到指定类容则会返回该内容第一次出现的索引，没搜索到则会返回-1。它也可以接受一个正则表达式作为参数，然后根据正则表达式去检索字符串。（只会查找第一个及使设置了全局匹配了也一样）
- match():根据正则表达式，从一个字符串中将符合条件的内容提取出来
var str="1a2b3c4d5e6f7gASD"
result=str.match(/[A-z]/);//默认情况下只会找到第一个符合要求的内容，然后停止检索
result2=str.match(/[A-z]/ig);//添加了全局匹配和忽略大小写(他们之间的位置可以交换)，可以将所有符合条件的内容都提取出来，并且忽略大小写。有了两个匹配模式能匹配到符合要求的所有内容
console.log(result);
console.log(result2);
.
。+
match():会将匹配到的内容封装到一个数组中返回
- replace():可以将字符串中的指定内容替换为新的内容
参数：1.被替换的内容可接受一个正则表达式作为参数，2.新的内容
var str="1a2b3c4d5e6f7gASD";
result=str.replace(/[A-z]/g, "@")//默认只替换一个，这里添加了全局匹配属性可以全匹配
console.log(result);
正则表达式语法
- 量词
通过量词可以设置一个内容出现的次数
var reg=/a{3}/;//这里｛n｝表示正好出现n次,例如这里表示寻找是否有出现3个连续的a.
var reg2=/ab{3}/;//量词只对他前面的一个内容起作用，例如这里如果要对ab都起作用则要写成(ab){3}.
var reg3=/ab{3}c/;//这里表示找a和c之间是否有三个b
var reg4=/ab{1,3}c/;//这里表示找b出现1到3次的情况，而{m,}表示寻找m次以上
var reg5=/ab+c/;//+表示至少一个的意思相当于{1,}
var reg6=/ab*c/;//*号表示0或多个，相当于{0,}。而？表示0或1多个，相当于{0,1}
console.log(reg.test("aaaql"))
- 检查一个字符串中是否以a开头
var reg=/^a/;//^表示开头,^后紧跟a表示检查字符串是否以a开头
var reg2=/a$/;//匹配结尾是a的
var reg3=/^a$/;//表示字符串只能是a。如果在正则表达式中同时使用^和$则要求字符串必须完全符合正则表达式
var reg4=/^a|a$/;//检查字符串是否以a开头或以a结尾
console.log(reg.test("caaaql"))
练习
检查一串数字是否符合手机号的规则
var ph=13567823812;
var p=/^1[3-9][0-9]{9}$/;//如果写成了^1[3-9][0-9]{9}或1[3-9][0-9]{9}$或1[3-9][0-9]{9}，则出现13567823812vdv,或aic13567823812,asu13567823812sd,这些情况也会显示ture
console.log(p.test(ph));
检查一个字符串里是否含有.
.表示任意字符
在正则表达式中使用\作为转义字符，用.表示.
var f="sodj.";
var d=/\./;//用\\表示\
console.log(d.test(f))
var f="sodj.\\";//在字符串中\也表示转义，要在字符串中表示\必须写成\\
var d=/\./;//用\\表示\
var h=/\\/;
console.log(d.test(f));
console.log(h.test(f));
注意：在使用构造函数时，由于他的参数是一个字符串，而\是字符串中的转义字符，如果要使用\则用\代替
var reg=new RegExp("\\.");//与 var d=/\./;表示的意义相同
var reg2=new RegExp("\\\\");//与var h=/\\/;表示的意义相同
console.log(reg.test("asdf."));
console.log(reg2.test("azxc\\"));
var reg=/\w/;//检查字符串中是否含有任意字母，数字，_即[A-z0-9]。\W表示除了字母,数字,_即[^A-z0-9]
var reg2=/\d/;//检查任意的数字0-9。\D表示[^0-9]
var reg3=/\s/;//空格，\S表示除了空格
var reg4=/\bchild\b/;//检查是否有单词边界（如果没\b写成var reg4=/child/，表示字符串中是否含有单词child，无论是否是一个对立单词。而加了\b则表示检查字符串中是否有一个对立单词child），\B表示除了单词边界
console.log(reg.test("asdf."));
去除字符串中的空格，用" "来替换空格
var str=" hell o ";
str=str.replace(/\s/g,"");//用/^\s*|\s*$/g 来匹配开头和结尾的空格。
console.log(str);
- 邮件的正则表达式
var w="1567723842@qq.com.cn"
// w{3,} (\.\w+)* @ [A-z0-9]+ (\.[A-z]{2,5}){1,2}
var emailReg=/\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}/;
console.log(emailReg.test(w))
DOM简介
- 全称Document Object Model文档对象模型
- JS通过DOM来对文档进行操作，只要理解了DOM就可以随心所欲的操作WEB界面
- 文档
文档表示的就是整个HTML网页文档 - 对象
对象表示将网页中的每一个部分都转化为一个对象 - 模型
使用模型来表示对象之间的关系，这样方便我们获取对象
节点 - 节点Node,是构成网页的最基本的组成部分，网页中的每一个部分都可以称为一个节点
- 比如：html标签，属性，文本，注释，整个文档等都是一个节点
- 虽然都是节点，但实际上他们的具体类型是不同的
- 比如：标签我们称为元素节点，属性我们称为属性节点，文本称为文本节点（HTML标签中的文本类容），文档称为文档节点（整个HTML文档）
- 节点的类型不同，属性和方法也都不尽相同
浏览器为我们提供文本节点 对象这个对象window属性，可以在页面直接使用，文档节点代表的是整个网页
<button id="we">一个按钮</button>
<script type="text/javascript">
var btn=document.getElementById("we")//通过id获取button对象
console.log(btn)
事件的简介
- 事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间（用户和浏览器之间的交互行为）
- JavaScript与HTML之间的交互是通过事件实现的
- 对于Web应用来说，有下面这些代表性的事件：点击某个元素，将鼠标移动到某个元素上方，按下键盘上某个键等等
我们可以在事件对应的属性中设置一些js代码，这样事件被触发时，这些代码将会执行，但这属于结构和行为耦合，不方便维护，不建议使用
如<button id="we" onclick="alert('循环');">一个按钮</button>
我们可以为对应的事件绑定处理函数的形式来相应事件，当事件被触发时对应的函数就会被调用
<button id="we">一个按钮</button>
<script type="text/javascript">
var btn=document.getElementById("we")//通过id获取button对象
btn.onclick=function(){alert("奥迪")}
console.log(btn)
</script>
像上面单击事件绑定的函数称为单击响应函数
文档的加载
浏览器加载一个页面时，是按照自下而上的顺序加载的
读取到一行就执行一行，如果将script标签写到页面的上边，在执行代码时，页面还没加载。页面没加载DOM对象也没有加载，会导致无法获取到DOM对象
将js代码编写到页面的下部分就是为了，可以在页面加载完毕以后在执行js代码
- onload事件会在整个页面加载完后再执行
为window绑定一个onload事件，该事件对应的响应函数将会在页面加载完成之后执行，这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了
<script type="text/javascript">
window.onload=function(){
var btn=document.getElementById("we")
btn.onclick=function(){
alert("算了吧")
}
}
</script>
</head>
<body>
<button id="we" onclick="alert('循环');">一个按钮</button>
DOM查询
获取元素节点
- 通过document对象调用
- getElementById() 通过id属性获取一个元素节点对象
- getElementsByTagName() 通过标签名获取一组元素节点对象，这个方法会给我们返回一个类数组对象，将所查询到的元素都封装到对象中
- getElementsByName() 通过name属性获取一组元素节点对象，也是类数组。
- innerHTML用于获取元素内部的HTML代码，对于自结束标签没有意义。如果要读取元素节点属性，直接使用元素.属性名
<script type="text/javascript">
window.onload=function(){
var btn=document.getElementById("we")
btn.onclick=function(){
alert(btn.innerHTML)}
}
</script>
<button id="we" onclick="alert('循环');">一个按钮</button>
例子：元素.id 元素.name 元素.value
注意class属性不能采用这种形式，读取class属性时需采用 元素.className
<script type="text/javascript">
window.onload=function(){
var btn=document.getElementById("we")
btn.onclick=function(){
alert(btn.id)}
}
</script>
- 图片切换练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin:0;padding:0;}
#outer{width:500px;margin:0 auto;background-color: aquamarine;text-align: center;}
</style>
<script type="text/javascript">
window.onload=function(){//在整个文档执行结束后执行这一块
var prew=document.getElementById("prew");
var next=document.getElementById("next");
var img=document.getElementsByTagName("img")[0];//该标签中只有一个元素节点对象
var noArr=["newProtect\\140005.png", "newProtect\\135907.png","newProtect\\mark_1.png","newProtect\\down.png"];//用数组来保存图片地址，方便多张图片的更改。注意整个源代码的图片斜线方向一致
var index=0;
var doce=document.getElementById("doce");
prew.onclick=function(){
index--;//随着点击的按键来改变图片
if(index<0){
index=noArr.length-1;
}
img.src=noArr[index];
doce.innerHTML="一共"+noArr.length+"张"+"现在是第"+(index+1)+"张";//添加图片张数提示，使张数的数量随着点击的按见改变
}
next.onclick=function(){
index++;
if(index>noArr.length-1){
index=0;//回到第一张
}
img.src=noArr[index];
doce.innerHTML="一共"+noArr.length+"张"+"现在是第"+(index+1)+"张";
}
}
</script>
</head>
<body>
<div id="outer">
<p id="doce"></p>
<img src="newProtect\\135907.png" alt="方向">
<button id="prew">上一张</button>
<button id="next">下一张</button>
</div>
</body>
</html>
获取元素节点的子节点
- 通过具体的元素节点调用
- getElementsByTagName() -方法，返回当前节点的指定标签名后代节点
- childNodes -属性，表示当前节点的所有子节点
var xi=city.childNodes;//childNodes属性会获取包括文本节点在内的所有节点，根据DOM标准标签间的空白也会被当成文本节点，注意在IE8及以下浏览器中将不会将空白文本当成子节点，所以该属性在IE8中会返回4个子元素，其他浏览器返回9个（可以用children属性来获取当前元素的所有子元素，不会再被空白部分影响） - firstChild -属性 表示当前节点的第一个子节点（包括空白文本节点，firstElementChild获取当前节点的第一个子元素不包括空白文本。但它不支持IE8及以下的浏览器，会出现兼容性问题）
- lastChild -属性表示当前节点的最后一个子节点，
获取父节点和兄弟节点
- 通过具体节点调用
- parentNode -属性，表示当前节点的父节点
myClick("btn",function(){
var bj=document.getElementById("bj");
var pa=bj.parentNode; alert(pa.innerHTML)})//创建的函数专门用来为指定元素绑定单击响应函数
}
</script>
</head>
<body>
<button onclick="" id="btn">点击</button>
<ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>天津</li>
<li>四川</li>
</ul>
</body>
innerText 该属性可以获取到元素内部的文本内容，和innerHTML类似，不同的是它会自动将HTML除去
alert(pa.innerText)
- previousSibling -属性，表示当前节点的前一个兄弟节点（也可能获取到空白的文本。previousElementSibling可获取前一个兄弟元素不包括空白，IE8及以下浏览器不支持）
- nextSibling -属性，表示当前节点的后一个兄弟节点
- 可以定义一个函数，专门用来为指定的元素绑定单击响应函数。参数：idStr:要绑定单击响应函数的对象的id属性值，fun:事件的回调函数，单击元素时该函数将会被触发
创建：
function myClick(idStr,fun){
var btn=document.getElementById(idStr);
btn.οnclick=fun;
}
调用：
myClick("btn",function(){
var city=document.getElementById("city");
var ci=city.getElementsByTagName("li");
for(var i=0;i<ci.length;i++){
alert(ci[i].innerHTML);
}})
}
全选练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload=function(){
//全选
var cea=document.getElementById("checkedAllBox")
var its=document.getElementsByName("items")
var che=document.getElementById("checkedAllBth")
che.onclick=function(){
for(var i=0;i<its.length;i++){
its[i].checked=true;
}
cea.checked=true;
}
//全不选
var noche=document.getElementById("checkedNoBtn")
noche.onclick=function(){
for(var i=0;i<its.length;i++){
its[i].checked=false;
}
cea.checked=false;
}
//反选
var rev=document.getElementById("checkedRevBtn")
rev.onclick=function(){
cea.checked=true;
for(var i=0;i<its.length;i++){
/* if(its[i].checked){
its[i].checked=false;
}else{
its[i].checked=true;
} */
its[i].checked=!its[i].checked;//和上面代码表表达的效果一样
if(!its[i].checked){
cea.checked=false;
}
}
}
//提交，提交后将选中的多选框的value属性值弹出
var sen=document.getElementById("sendBtn")
sen.onclick=function(){
for(var i=0;i<its.length;i++){
if(its[i].checked){
alert(its[i].value);
}
}
}
//全选/全不选
//var cea=document.getElementById("checkedAllBox");
cea.onclick=function(){
for(var i=0;i<its.length;i++){
//its[i].checked=cea.checked;
its[i].checked=this.checked//和上面代码显示的效果一样，在事件的响应函数中，响应函数是谁绑定的this就是谁
//its[i].checked=!its[i].checked;
}
}
//如果四个多选框全选中则，checkedAllBox也要选中，要是一个没选中则checkedAllBox不选中
for(var i=0;i<its.length;i++){
its[i].onclick=function(){
cea.checked=true;
for(var j=0;j<its.length;j++){
if(!its[j].checked){
cea.checked=false;
}
}
}
}
}
</script>
</head>
<body>
<form>
你爱好的运动是什么<input type="checkbox" id="checkedAllBox">全选/全不选
<br/>
<input type="checkbox" name="items" value="足球"/>足球
<input type="checkbox" name="items" value="篮球">篮球
<input type="checkbox" name="items" value="羽毛球">羽毛球
<input type="checkbox" name="items" value="乒乓球">乒乓球
<br/>
<input type="button" id="checkedAllBth" value="全选">
<input type="button" id="checkedNoBtn" value="全不选">
<input type="button" id="checkedRevBtn" value="反选">
<input type="button" id="sendBtn" value="提交">
</form>
</body>
</html>
dom查询的剩余方法
获取body标签
window.onload=function(){
var body=document.getElementsByTagName("body")[0];//获取body标签
//var body=document.body;和上面表达效果以样。在document中有一个属性body，它保存的是body的属性。
console.log(body);
}
document还有一个document.documentElement
var html=document.documentElement//保存的是html根标签
var all=document.all;//代表页面中的所有元素
// var body=document.getElementsByTagName("*");和上面表达的效果一样
for(var i=0;i<all.length;i++){
console.log(all[i]);
}
console.log(all.length)
var box=document.getElementsByClassName("box")//可以根据class属性值获取一组元素节点对象。但该方法不支持IE8及以下浏览器
console.log(box[0])
获取页面中所有div
var d=document.getElementsByTagName("div");//获取页面中的所有div
var di=document.querySelector(".i div")//需要一个选择器的字符串作为参数，可以根据一个css选择器来查询一个元素节点，虽然IE8中没有getElementsByClassName()但可以用querySelector()代替。该方法只会返回唯一的一个元素。如果满足条件的元素有多个，那么它只返回第一个
console.log(d.length)
console.log(di.innerHTML)
var div=document.querySelectorAll(".i div")//和querySelector用法类似，不同的是他会把符合条件的元素封装到一个数组中返回
console.log(div[0])
console.log(div.length)
673
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
