文章目录
正则表达式语法
检查一个字符串中是否以a开头
- ^ 表示开头
- $ 表示结尾
var reg = /^a/;//表示开头
var reg = /a$/;//表示结尾
var reg = /^a$/;//只能出现一个a,才返回true
例1.判断手机号
var phoneStr="13465963214";
var phoneReg=/^1[3-9][0-9]{9}$/;
console.log(phoneReg.test(phoneStr));
例2.检查字符串中是否含有 .
- . 表示任意字符
- 在正则表达式中使用 \ 作为转义字符
- \ .表示 .
- \ \表示 \
- 注意：使用构造函数时，由于参数是个字符串而\是字符串的转义字符，如果要使用\则使用\ \来代替
var reg = /\./;
reg = new RegExp("\\.");
例3.创建一个正则表达式检查一个字符串中是否含有单词child
var reg = /\bchild\b/;
console.log(reg.test("hello,child"));//true
console.log(reg.test("hello,children"));//false
例4.去除掉字符串中的前后空格，用""(空符串)来代替空格
var str =" hello ";
str = str.replace(/\s/g , "");
//去除前边的空格
str = str.replace(/^\s*/ , "");
//去除结尾的空格
str = str.replace(/\s*$/ , "");
var str =" he llo ";
str = str.replace(/^\s*|\s*$/g , "");//去除开头和结尾的空格，中间的不去
邮件的正则（p90）
电子邮件
hello @abc.com.cn
-
任意的字母数字下划线 .任意的字母数字下划线@ 任意字母数字 .任意字母（2-5位）.任意字母（2位）
\w{3,} (\.\w+*) @ [A-z0-9] + (\.\[A-z]{2,5}){1,2}
var emaiReg=/^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/;
var email="135618828@qq.com";
console.log(emaiReg.test(email));
DOM简介（p91）
什么是 DOM？
DOM 是一项 W3C (World Wide Web Consortium) 标准。
-
DOM 定义了访问文档的标准：
-
“W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问、更新文档的内容、结构和样式。”
W3C DOM 标准被分为 3 个不同的部分：
- Core DOM - 所有文档类型的标准模型
- XML DOM - XML 文档的标准模型
- HTML DOM - HTML 文档的标准模型
节点
网页中每一个最基本的组成部分
- 文档节点：整个html文档
- 元素节点：HTML中的HTML标签
- 属性节点：元素的属性
- 文本节点：HTML标签中的文本内容
节点的属性
获取对象
例：
<body>
<button id="btn">我是一个按钮</button>
</body>
<script>
/*
浏览器已经为我们提供了文档节点对象，这个对象是window属性可以在页面中直接使用，文档节点代表的是整个网页
*/
// console.log(document);
//获取到button对象
var bb=document.getElementById("btn");
console.log(bb);
//修改按钮的文字
btn.innerHTML="I am button"
console.log(btn.innerHTML);
</script>
事件的简介（p92）
<body>
<!--
可以在事件对应的属性中设置一些js代码，
这样当事件被触发时，这些代码将会执行
这种写法叫做结构行为耦合，不方便维护
-->
<button id="btn" >我是一个按钮</button>
</body>
<script>
/*
事件就是用户和浏览器之间的交互行为
比如：点击按钮，鼠标移动，关闭窗口.....
*/
/*
可以为按钮的对应事件绑定处理函数的形式来响应事件
*/
//获取按钮对象
var btn=document.getElementById("btn");
/*
可以为按钮的对象事件绑定处理的函数形式来响应事件
*/
// 绑定一个单击事件
//像这种为单击事件绑定的函数，我们称为单击相应函数
btn.ondblclick=function(){
alert("你还点");
};
</script>
文档的加载（p93）
- 浏览器加载页面时，是按照自上向下的顺序
- 读取一行运行一行如果将script标签写到页面的上班，在代码执行的时候，页面还没有加载DOM对象，会导致无法获取到DOM对象
- onload事件会在整个页面加载完成时触发
- 为window绑定一个onload事件
- 该事件对应的响应函数会在页面加载完成之后执行，这样可以确保我们的代码执行时素有的DOM对象已经加载完毕了
<script>
window.onload=function(){
var btn = document.getElementById("btn");
btn.onclick = function () {
alert("hello");
};
}
</script>
<body>
<button id="btn">我是一个按钮</button>
</body>
dom查询（p94）
getElementById(),getElementsByTagName(),getElementsByName()
window.onload=function(){
var btn=document.getElementsByName("gender");
var btn2=document.getElementsByTagName("li");
}
图片的切换练习（p95）
<script>
window.onload=function(){
/*
点击按钮切换图片
*/
//获取两个按钮
var prev=document.getElementById("prev");
var next=document.getElementById("next");
/*
要切换图片就是要修改img标签的src属性
*/
//获取img标签
var img=document.getElementsByTagName("img")[0];
//创建一个数字来保存图片的路径
var imgArr=["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg"]
// 创建一个变量来保存正在显示图片的索引
var index=0;
//获取id为info的元素
var info=document.getElementById("info");
//设置提示文字
info.innerHTML="一共"+imgArr.length+"张图片,当前第"+(index+1)+"张";
//分别为两个按钮绑定单击响应函数
prev.onclick=function(){
//切换到上一张使索引-1
index--;
//判断index是否小于0
if(index<0){
index=imgArr.length-1;
}
img.src=imgArr[index];
info.innerHTML="一共"+imgArr.length+"张图片,当前第"+(index+1)+"张";
}
next.onclick=function(){
//切换到下一张使索引+1.
index++;
if(index>imgArr.length-1){
index=0;
}
//切换图片就是要修改img标签的src属性
img.src=imgArr[index];
info.innerHTML="一共"+imgArr.length+"张图片,当前第"+(index+1)+"张";
}
}
</script>
<style>
*{
margin:0;
padding: 0;
}
#outer{
width:350px;
margin: 50px auto ;
padding: 10px;
background-color: rgb(110, 57, 90);
/* 设置文本居中 */
text-align: center;
}
</style>
</head>
<body>
<div id ="outer">
<p id="info">一共5张图片</p>
<img src="1.jpg" alt="冰棍">
<button id="prev"><上一张</button>
<button id="next">下一张></button>
</div>
</body>
DOM查询（p96~p97）
全选练习（p98~p100）
<script>
window.onload=function(){
/*
全选按钮，点击按钮之后，4个多选框都被选中
*/
//************************1.checkedAllBtn*************
//为id为checkedAllBtn的按钮绑定一个单击响应函数
var checkedAllBtn=document.getElementById("checkedAllBtn");
var checkedAllbox=document.getElementById("checkedAllbox");
var items=document.getElementsByName("items");
checkedAllBtn.onclick=function(){
//获取4个多选框items
var items=document.getElementsByName("items");
// 遍历itmes
for(var i=0;i<items.length;i++){
//设置四个多选框变成选中状态
//通过多选框的checked属性可以来获取或设置多选框的状态
items[i].checked=true;
}
checkedAllbox.checked=true;
//将全选/全不选设置为选中
}
//***********2.checkedAllbox******************
var checkedNoBtn=document.getElementById("checkedNoBtn");
checkedNoBtn.onclick=function(){
//获取4个多选框items
var items=document.getElementsByName("items");
// 遍历itmes
for(var i=0;i<items.length;i++){
//设置四个多选框变成选中状态
//通过多选框的checked属性可以来获取或设置多选框的状态
items[i].checked=false;
}
checkedAllbox.checked=false;
}
//**********************3.checkedRevBtn*************************
var checkedRevBtn=document.getElementById("checkedRevBtn");
checkedRevBtn.onclick=function(){
var items=document.getElementsByName("items");
for(var i=0;i<items.length;i++){
if(items[i].checked==true){
items[i].checked=false;
}
else if(items[i].checked==false) {
items[i].checked=true;
}
}
//在反选时也要判断4个多选框是否选中
checkedAllbox.checked=true;
//判断4个多选框是否全选
//只要有一个没选中就不是全选
for(var j=0;j<items.length;j++){
if(!items[j].checked){
//一旦进入判断就不是全选状态
//将checkedAllbox设置为false
checkedAllbox.checked=false;
break;
}
}
}
//******4.sendBtn按钮，将所有选中的多选框弹出************************
// 为sendBtn绑定单击响应函数
var sendBtn=document.getElementById("sendBtn");
sendBtn.onclick=function(){
var items=document.getElementsByName("items");
for(var i=0;i<items.length;i++){
if(items[i].checked==true){
alert(items[i].value);
}
}
}
//************5.全选/全不选多选框*****************************
// 为checkedAllbox绑定一个单击响应函数
/*
在事件的响应函数中，函数时给谁绑定的this就是谁
*/
checkedAllbox.onclick=function(){
//设计多选框的选中状态
for(var i=0;i<items.length;i++){
items[i].checked=this.checked;
}
}
//************************6.items*********************
/*
如果四个多选框全都选中，checkedAllbox也选中
如果四个多选框都没有选中，checkedAllbox不选中
*/
//为四个多选框分别绑定单击响应函数
for(var i=0;i<items.length;i++){
items[i].onclick=function(){
//将checkedAllbox设置为选中状态
checkedAllbox.checked=true;
//判断4个多选框是否全选
//只要有一个没选中就不是全选
for(var j=0;j<items.length;j++){
if(!items[j].checked){
//一旦进入判断就不是全选状态
//将checkedAllbox设置为false
checkedAllbox.checked=false;
break;
}
}
};
}
}
</script>
<body>
<form method="post" action="">
你爱好的运动是？<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="checkedAllBtn" value="全 选">
<input type="button" id="checkedNoBtn" value="全不选">
<input type="button" id="checkedRevBtn" value="反 选">
<input type="button" id="sendBtn" value="提 交">
</form>
</body>
DOM剩余查询方法（p101）
1)获取body标签
1.在document中有一个属性body，它保存的是body的引用
var body = document.body;
2.document.documentElement保存的是html的根标签
var html = document.documentElement;
console.log(html);
2）document.all代表页面中所有的元素
var all = document.all;
for (var i = 0; i < all.length;i++){
console.log(all[i]);
}
3）根据元素的class属性值查询一组元节点对象
getElementByClassName()可以根据class属性值获取一组元素节点对象，但是该方法不支持IE8及以下的浏览器
var box1 = document.getElementsByClassName("box1");
4）document.querySelector()
- 需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点对象
- 虽然IE8中没有getElementsByClassName()但是可以使用querySelector()代替
- 使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么它只会返回第一个
var div = document.querySelector(".box1 div");
var box1 = document.querySelector(".box1");
console.log(div);
console.log(box1);
<body>
<div class="box1">
<div>我是一个div</div>
</div>
</body>
5)document.querySelectorAll()
- 该方法和querySelector()用法类似，不同的是它会将符合条件的元素封装到一个数组中返回
- 即使符合条件的元素只有一个，它也会返回数组
var box1 = document.querySelectorAll(".box1");
console.log(box1);
DOM增删改（p102）
1）document.createElement()
可以用于创建一个元素节点对象，它需要一个标签名作为参数，将会根据该标签名创建元素节点对象，并将创建好的对象作为返回值返回
var li = document.createElement("li");
console.log(li);
2）document.createTextNode()
- 可以用来创建一个文本节点对象
- 需要一个文本内容来作为一个参数，将会根据该内容创建文本节点，并将新的内容返回
var Text = document.createTextNode("广州");
console.log(Text );
3）appendChild()
- 向一个父节点中添加一个新的子节点
- 用法：父节点.appendChild(子节点);
li.appendChild(Text);
console.log(li);
4）insertBefore()
- 可以在指定的子节点前插入新的字节点
- 语法：父节点.insertBefore(新节点，旧节点)；
var city = document.getElementById("city");
city.insertBefore(li,bj);
5）replaceChild()
- 可以使用指定的子节点替换已有的子节点
- 语法：父节点.replaceChild(新节点，旧节点)；
6）removeChild()
- 可以删除一个子节点
- 语法：父节点.removeChild(子节点);
- 如果不知道父节点，可使用 子节点.parentNode.removeChild(子节点);
7）使用innerHTML也可以完成DOM的增删改的相关操作；一般我们两种形式一起使用
<script>
window.onload = function() {
//创建一个"广州"节点,添加到#city下
myClick("btn01",function(){
//创建广州节点 <li>广州</li>
//创建li元素节点
var li = document.createElement("li");
//创建广州文本节点
var gzText = document.createTextNode("广州");
//将gzText设置为li的子节点
li.appendChild(gzText);
//获取id为city的节点
var city = document.getElementById("city");
//将广州添加到city下
city.appendChild(li);
});
//将"广州"节点插入到#bj前面
myClick("btn02",function(){
//创建一个广州
var li = document.createElement("li");
var gzText = document.createTextNode("广州");
li.appendChild(gzText);
//获取id为bj的节点
var bj = document.getElementById("bj");
//获取city
var city = document.getElementById("city");
city.insertBefore(li , bj);
});
//使用"广州"节点替换#bj节点
myClick("btn03",function(){
//创建一个广州
var li = document.createElement("li");
var gzText = document.createTextNode("广州");
li.appendChild(gzText);
//获取id为bj的节点
var bj = document.getElementById("bj");
//获取city
var city = document.getElementById("city");
city.replaceChild(li , bj);
});
//删除#bj节点
myClick("btn04",function(){
//获取id为bj的节点
var bj = document.getElementById("bj");
//获取city
var city = document.getElementById("city");
bj.parentNode.removeChild(bj);
});
//读取#city内的HTML代码
myClick("btn05",function(){
//获取city
var city = document.getElementById("city");
alert(city.innerHTML);
});
//设置#bj内的HTML代码
myClick("btn06" , function(){
//获取bj
var bj = document.getElementById("bj");
bj.innerHTML = "昌平";
});
myClick("btn07",function(){
//向city中添加广州
var city = document.getElementById("city");
//创建一个li
var li = document.createElement("li");
//向li中设置文本
li.innerHTML = "广州";
//将li添加到city中
city.appendChild(li);
});
};
function myClick(idStr, fun) {
var btn = document.getElementById(idStr);
btn.onclick = fun;
}
</script>
<body>
<div id="total">
<div class="inner">
<p>
你喜欢哪个城市?
</p>
<ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
</div>
</div>
<div id="btnList">
<div><button id="btn01">创建一个"广州"节点,添加到#city下</button></div>
<div><button id="btn02">将"广州"节点插入到#bj前面</button></div>
<div><button id="btn03">使用"广州"节点替换#bj节点</button></div>
<div><button id="btn04">删除#bj节点</button></div>
<div><button id="btn05">读取#city内的HTML代码</button></div>
<div><button id="btn06">设置#bj内的HTML代码</button></div>
<div><button id="btn07">创建一个"广州"节点,添加到#city下</button></div>
</div>
</body>
206
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
