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)