一.DOM入门
1.DOM:(Document Object Model)
简介:基于文档对象模型编程,当html页面被浏览器解析运行的时候,浏览器内置js引擎经过每一个标签在解析过程中被封装成标签对象(节点对象),形成一种树状结构!就是通过获得标签对象来改变标签对象的一些特有属性,从而达到js的某种效果.
那么,由此得出我们所说的document代表整个HTML文档
2.js中获取标签对象
1)方式一:可以通过查询节点关系获取标签对象
特有属性:
parentNode:父节点(父标签对象)
childNodes:所有子节点
firstChild:第一个子节点;
lastChild:最后一个子节点;
nextSibling:下一个兄弟元素;
previousSibling:上一个兄弟节点
2)方式二:
使用document方法来获取标签对象;(开发中常用方式)
第一步: 建立事件源
用户名:<input type="text" id="username" calss="user" name="name" palceholder="请输入用户名" οnblur="getUserName()" />
第三步: 绑定事件监听器
οnblur="getUserName()"
<script>
//第二步:建立事件监听器
function getUserName(){
// 1)方式一:在标签中给定ID属性值,必须唯一(推荐使用)
document.getElementById(ID属性值) 获取标签对象
var username = document.getElementById("username");
alert(username.value);
// 2)方式二:通过calss属性来获取标签对象
document.getElementsByClassName("class属性值")[0]; 获取标签对象
var usename = document.getElementsByClassName("user")[0];
alert(username.value);
// 3)方式三:通过name属性来获取标签对象;
document.getElementsByName("name属性值")[0];
alert("用户名是:"+document.getElementsByName("name")[0].value);
// 4)方式四:通过标签名获取标签对象
document.getElementsByTagName("同名标签名")[0];
var username=document.getElementsByTagName(input)[0];
}
</script>
3.js中常见事件分类
1)单击事件
第一步:建立事件源
<input type="button" value="单击我" οnclick="testClick()(事件监听器)"/>
第三步:绑定监听器:
οnclick="testClick()
(事件监听器)"
第二步:创建事件监听器
<script>
function testClick(){
//跳转新的页面
//使用window窗口对象下面地址栏对象location
//方式一:location的href属性,重新载入一个地址;
location.href(/*新的地址,如*/"www.baidu.com"/*或者是本地其他地址如adv.html*/);
//方式二:使用window窗口对象下的open方法
//window.open("新的地址",打开方式);
如:window.open("adv.html",_blank);
//方式三:展开确认对话框confirm()方法,此方法会弹出对话框,可以进行判断,进入下一步操作;
如:var flag = window.confim("你忍心删除吗?");
if(flag){
alert(删除了...);
}else{
alert("取消删除...");
}
}
</script>
2)双击事件
第一步:建立事件源
<input type="button" value="双击我" οndblclick="testDbclick()" /><br/>
第三步:绑定事件监听器:
ondbclick="testDbclick()
(事件监听器)
"
第二步:建立事件监听器
<script>
function testDbclick(){
alert("触发双击点击事件");
}
</script>
双击事件中任然可以使用window窗口对象下面,完成自己想要完成的操作;
3)失去焦点事件
onblur
第一步:建立事件源
用户名:<input type="text" id="username" value="请输入用户名" οnblur="testBlur()"><span id="spanTip"></span>
第三步:绑定事件源
οnblur="testBlur()(事件监听器)"
第二步:建立事件监听器
<script>
function testBlur(){
//获取文本框输入的内容
var username = document.getElementById("username").value;
//获取id="spanTip"所在的span标签对象;
var span = document.getElementById("spanTip");
//进行判断:如果用户名不是"小樊",提示错误信息,应该给span对象设置文本
if(username!="小樊"){
//不可用
span.innerHTML="对不起,不可用".fontcolor("red");
}else{
//可用
span.innerHTML="√".fontcolor("green");
}
}
</script>
4)获取焦点事件onfocus
第一步:建立事件源
用户名:<input type="text" id="username" value="请输入用名" οnfοcus="testFocus()" /><span id="spanTip"></span>
第三步:绑定事件οnfοcus="testFocus()
(事件监听器)
"
第二步:建立事件监听器
<script>
function testFocus(){
//将文本内容清空
var username = document.getElementById("username");
username.value="";
}
</script>
5)选项卡发生的变化事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>03_02选项卡发生的变化事件</title>
</head>
<body>
//第一步:建立选项卡发生事件
籍贯:
<script>
<option value="请选择">请选择</option>
<option value="陕西省">陕西省</option>
<option value="山西省">山西省</option>
<option value="广东省">广东省</option>
</script>
<select id="city">
<!-- 选择省份之后显示其要选择的城市 -->
<!-- <option value="城市名称">城市名称</option> -->
</select>
</body>
<script>
//第二步:测试选项卡发生事件
function testChange(){
//获取id="province"的select标签对象同时获取其选择内容
var province=document.getElementById("province").value;
// 获取id=city的select标签对象
var city = document.getElementById("city");
//在每次省份判断前需要将其他省份城市清空
city.innerHTML="";
//判断省份,获得城市
if(province=="陕西省"){
//创建一个数组,陕西省的城市
var arr = ["西安市","榆林市","神木市","宝鸡市","咸阳市"];
//遍历
for(var i=0;i<arr.length;i++){
//arr[i]每个城市名
//设置id="city"的select标签对象中的内容
city.innerHTML+="<option value="+arr[i]+">"+arr[i]+"</option>";
}
}
if(province=="山西省"){
//创建一个数组,山西省的城市
var arr = ["太原市","运城市","临汾市","永济市","忻州市"];
//遍历
for(var i=0;i<arr.length;i++){
//arr[i]每个城市名
//设置id="city"的select标签对象中的内容
city.innerHTML+="<option value="+arr[i]+">"+arr[i]+"</option>";
}
}
if(province=="广东省"){
//创建一个数组,广东省的城市
var arr = ["深圳市","珠海市","东莞市","佛山市","惠州市"];
//遍历
for(var i=0;i<arr.length;i++){
//arr[i]每个城市名
//设置id="city"的select标签对象中的内容
city.innerHTML+="<option value="+arr[i]+">"+arr[i]+"</option>";
}
}
}
</script>
</html>
6)鼠标经过事件(onmouseover)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="div1" οnmοuseοver="testOver()">
<img src="img/20201228121025_ef826.jpg" width="200px" height="200px"/> // 将你所要显示的照片也就是.jpg文件放在img中,通过src属性导入.
</div>
</body>
<script>
function testOver(){
// setTimeout("任务函数",毫秒值);表示经过这个毫秒值之后执行一次任务;
setTime(opeHtml()",5000);
}
funtion openHtml(){
location.href="adv.html" ;
//其中adv是外部一个网页,可以制作也可以引用其他网页地址;
}
</script>
</html>
7)鼠标移出事件(onmouseout)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
鼠标移出事件(onmouseout)
-->
<div id="div1" οnmοuseοut="testOut()">
<img src="img/20201228121025_ef826.jpg" width="200px" height="200px"/>
// 将你所要显示的照片也就是.jpg文件放在img中,通过src属性导入.
</div>
</div>
</body>
<script>
function testOut(){
alert("鼠标移出触发事件");
}
</script>
</html>
二.正则表达式
1.简介:
搜索引擎能够识别的语法
2.相关语法:
1)数量相关语法
①x:代表任意字符;
②x+:代表字符出现一次或者多次;
③x*:代表字符出现0次或者多次;
④x?:代表字符出现0次或者一次;
2)范围相关语法
①x{n}:表示x字符恰好出现n次;
②x{n,}:表示x字符至少出现n次;
③x{n,m}:表示x字符至少出现n次,但不超过m次;
3 )匹配相关字符
① x[a-z]:表示x字符可以使a-z任意一个小写字母;
②x[0-9]:x字符是一个数字字符;
③ x[A-Za-z0-9_]:表示x字符可以使任意的大小写字母或者数字或_;
正则表达式:有一个函数test("接收用户输入的文本框的内容字符串")匹配是否成功
创建一个正则规则:
语法格式:var 正则对象名=/书写正则语法/; 不完全匹配(会出现安全漏洞)
正则对象名.test(字符串),true,匹配成功;false,匹配失败;
注意:在Java语言中和javascript中,如果要完全匹配,必须加入便捷匹配器
^:以...开头;
$:以...结尾;
var 正则表达式对象 = /^正则语法$/;
<script>
var reg=/^[0-9]{2}$/;
//创建一个字符串
var str="asd123ms";
if(reg.test(str)){
alert("条件成立");
}else{
alert("条件不成立");
}
</script>
1.简介:
需要每一个表单相同时满足正则的规则,才能进行注册提交到服务器中!
举例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>08_表单校验</title>
<!-- 正则规则
用户名:4-14位的数字或者字母(不区分大小写)组成
密码:6-10位的数字或者英文大小字母组成
确认密码和密码一致
邮箱:满足邮箱的格式
数字或者字母@数字或者字母.com/.cm/.com.cn
919081924@qq.com
@163.com
对于.这个字符需要\.转义; @Istone.com.cn
-->
</head>
<body>
<!-- form表单一个时间:onsubmit:表单是否能够提交成功!
携带值为true,能够提交成功;
false,提交失败 -->
<form action="server.html" method="get" οnsubmit="return checkAll()">
<div class="list">
用户名:<input type="text" palceholder="请输入用户名" id="username" οnblur="tsetUserName()" /><span id="usernameTip"></span><br/>
密  码:<input type="password" id="psw" palceholder="请输入密码" οnblur="testPassword()" /><span id="pswTip"></span><br/>
确认密码:<input type="password" id="repsw" palceholder="请再次再次密码" οnblur="testRepsw()"/><span id="repswTip"></span><br/>
邮  箱:<input type="text" id="email" palceholder="请输入邮箱" οnblur="testEmail()"/><span id="emailTip"></span><br/>
<input type="submit" value="注册"/>
</div>
</form>
</body>
<script>
//校验用户名
function tsetUserName(){
// 1)获取id="username"的input标签对象和其内容;
var username = document.getElementById("username").value;
// 2)定义用户名正则规则用户名:4-14位的数字或者字母(不区分大小写)组成
var reg = /^[A-Za-z0-9]{4,14}$/;
// 3)获取 id="usernameTip"的span标签对象
var span = document.getElementById( "usernameTip");
//4)判断
if(reg.test(username)){
//成立
span.innerHTML="√".fontcolor("green");
return true;
}else{
//不成立
span.innerHTML="×".fontcolor("red");
return false;
}
}
//校验密码
function testPassword(){
//1)获取id="psw" 的input标签对象及其内容
var psw = document.getElementById("psw" ).value;
// 2)定义密码的正则规则:6-10位的数字或者英文大小字母组成
var reg = /^[A-Za-z0-9]{6,10}$/ ;
// 3)获得id="pswTip"的span标签对象
var span = document.getElementById("pswTip");
//4)判断
if(reg.test(psw)){
//成立
span.innerHTML="√".fontcolor("green");
return true;
}else{
//不成立
span.innerHTML="×".fontcolor("red");
return false;
}
}
//校验确认密码
function testRepsw(){
// 1)获得再次确认密码的内容
var repsw = document.getElementById("repsw").value;
// 2)获取密码值
var psw = document.getElementById("psw").value;
// 3)获取id="repswTip"span标签对象;
var span = document.getElementById("repswTip");
//4)判断
if(repsw==psw){
//成立
span.innerHTML="√".fontcolor("green");
return true;
}else{
//不成立
span.innerHTML="×".fontcolor("red");
return false;
}
}
//校验邮箱
function testEmail(){
// 1)获取id="email"的input标签对象以及内容;
var email =document.getElementById("email").value;
// 2)定义邮箱正则规则:数字或者字母@数字或者字母.com/.cm/.com.cn
var reg = /^[A-Za-z0-9]+@[A-Za-z0-9]+(\.[a-z]{2,3}){1,2}$/;
// 3)获取id="emailTip"的span标签;
var span = document.getElementById("emailTip");
// 4)判断
if(reg.test(email)){
//成立
span.innerHTML="√".fontcolor("green");
return true;
}else{
//不成立
span.innerHTML="×".fontcolor("red");
return false;
}
}
// 将所有的表单项条件都满足,才能注册
function checkAll(){
if(testEmail() &&testRepsw()&&testPassword()&&tsetUserName()){
return true;
}else{
return false;
}
}
</script>
</html>
1198
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
