JavaScript,早就听闻你的大名,初次见面,多多指教。
js的简介
1、js是什么
js是可以嵌入到html中,是 基于对象 和 事件驱动 的 脚本语言
特点:
(1)交互性:用于与用户之间的沟通
(2)安全性:js不能访问本地磁盘
(3)跨平台:浏览器中都具备js解析器
2、js能做什么
(1)js能动态的修改(增删)html和css的代码 (2)能动态的校验数据
Js思维导图
实验
1、邮箱校验
RegExp
创建方式:
var reg = new RegExp(pattern);
var reg = /^正则规则$/;
规则的写法:
[0-9]
[A-Z]
[a-z]
[A-z]
\d 代表数据
\D 非数字
\w 查找单词字符
\W 查找非单词字符
\s 查找空白字符
\S 查找非空白字符
n+ 出现至少一次
n* 出现0次或多次
n? 出现0次或1次
{5} 出现5
{2,8} 2到8次
方法:
test(str):检索字符串中指定的值。返回 true 或 false
需求:
校验邮箱:
var email = haohao_827@163.com
var reg = /^[A-z]+[A-z0-9_-]*\@[A-z0-9]+\.[A-z]+$/;
reg.test(email);
2、实现二级联动
onclick:点击事件
onchange:域内容被改变的事件
需求:实现二级联动
运行结果:
相关代码:
<!DOCTYPE html>
<html>
<head>
<title>MyHtml.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<select id="city">
<option value="bj">北京</option>
<option value="tj">天津</option>
<option value="sh">上海</option>
</select>
<select id="area">
<option >海淀</option>
<option >朝阳</option>
<option >东城</option>
</select>
</body>
<script type="text/javascript">
var select=document.getElementById("city");
select.onchange=function(){
var optionVal=select.value;
switch(optionVal){
case 'bj':
var area=document.getElementById("area");
area.innerHTML="<option>海淀</option><option>朝阳</option><option>东城</option>";
break;
case 'tj':
var area=document.getElementById("area");
area.innerHTML="<option>南开</option><option>西青</option><option>河西</option>";
break;
case 'sh':
var area=document.getElementById("area");
area.innerHTML="<option>浦东</option><option>杨浦</option>";
break;
}
};
</script>
</html>
3、onfocus, onblur
onfocus:获得焦点的事件
onblur:失去焦点的事件
需求: 当输入框获得焦点的时候,提示输入的内容格式
当输入框失去焦点的时候,提示输入有误
运行结果:
相关代码:
<!DOCTYPE html>
<html>
<head>
<title>MyHtml.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<label for="txt">name</label>
<input id="txt" type="text"/><span id="action"></span>
</body>
<script type="text/javascript">
var txt=document.getElementById("txt");
txt.onfocus=function(){
//友好提示
var span=document.getElementById("action");
span.innerHTML="用户名格式最小8位";
span.style.color="green";
};
txt.onblur=function(){
//错误提示
var span=document.getElementById("action");
span.innerHTML="对不起,格式不正确";
span.style.color="red";
}
</script>
</html>
4、onmouseover onmouseout
onmouseover:鼠标悬浮的事件
onmouseout:鼠标离开的事件
需求:div元素 鼠标移入变为绿色 移出恢复原色
运行结果:
<!DOCTYPE html>
<html>
<head>
<title>MyHtml.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
#d1{
background-color:pink;
width:200px;
height:200px;
text-align: center;
}
</style>
</head>
<body>
<div id="d1"></div>
</body>
<script type="text/javascript">
var div=document.getElementById("d1");
div.onmouseover=function(){
this.style.backgroundColor="green";
};
div.onmouseout=function(){
this.style.backgroundColor="pink";
};
</script>
</html>
5、定时器
定时器:
setTimeout(函数,毫秒值);
setTimeout(
function(){
alert("xx");
},
3000
);
clearTimeout(定时器的名称);
var timer;
var fn = function(){
alert("x");
timer = setTimeout(fn,2000);
};
var closer = function(){
clearTimeout(timer);
};
fn();
setInterval(函数,毫秒值);
clearInterval(定时器的名称)
var timer = setInterval(
function(){
alert("nihao");
},
2000
);
var closer = function(){
clearInterval(timer);
};
需求:注册后5秒钟跳转首页
运行结果:
相关代码:
恭喜您注册成功,<span id="second" style="color: red;">5</span>秒后跳转到首页,如果不跳转请<a href="../jsCore/demo10.html">点击这里</a>
<script type="text/javascript">
var time = 5;
var timer;
timer = setInterval(
function(){
var second = document.getElementById("second");
if(time>=1){
second.innerHTML = time;
time--;
}else{
clearInterval(timer);
location.href="../jsCore/demo10.html";
}
},
1000
);
</script>
6、全选 全不选 反选
js的dom
1、理解一下文档对象模型
html文件加载到内存之后会形成一颗dom树,根据这些节点对象可以进行脚本代码的动态修改
在dom树当中 一切皆为节点对象
2、dom方法和属性
运行结果:
相关代码:
<!DOCTYPE html>
<html>
<head>
<title>check.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
h1{
font-size:20px;
color:#000000;
margin:30px 0px 0px 270px;
text-align:left;
}
#menu1{
width:700px;
margin:20px auto 5px;
background-color:#F0F0F0;
text-align: right;
padding:7px 70px ;
}
#subject{
width:800px;
background-color:#fcfdef;
margin:5px auto 20px;
padding:20px;
}
input{
margin-left:100px;
width:50px;
border:1px solid #a4b4bd;
}
#jump{
text-align: center;
margin:20px;
}
#jump a{
text-decoration:none;
color:#9AAFE5;
border: 1px solid #9AAFE5;
padding:2px 6px;
}
#jump a:hover{
color:#2B66A5;
border: 1px solid #2B66A5;
}
#current{
background-color: blue;
}
</style>
</head>
<body >
<div id="page">
<h1>课程列表</h1>
<div id=menu1>
<input type="checkbox" name="checkItems" id="checkItems" value="全选/全不选">全选/全不选
</div>
<div id=subject>
<input type="checkbox" name="items" value="概率论">概率论<br><br>
<input type="checkbox" name="items" value="操作系统">操作系统<br><br>
<input type="checkbox" name="items" value="软件需求工程">软件需求工程<br><br>
<input type="checkbox" name="items" value="面向对象分析与设计(UML)">面向对象分析与设计(UML)<br><br>
<input type="checkbox" name="items" value="数据库">数据库<br><br>
<br><br>
<input type="button" name="check" id="checkAll" value="全选">
<input type="button" name="check" id="checkNo" value="全不选">
<input type="button" name="check" id="checkRevsern" value="反选">
<br><br><br><br>
<div id="jump">
<a href="#">上一页</a>
<a href="#" id="current">1</a>
<a href="#">2</a>
<a href="#">下一页</a>
</div>
</div>
</div>
</body>
<script language="JavaScript">
window.onload=function(){
/*<input type="button" name="check" id="checkAll" value="全选">*/
document.getElementById("checkAll").onclick=function(){
var items=document.getElementsByName("items");
for(var i=0;items!=null&&i<items.length;i++){
var item=items[i];
//使用setAttribute时,IE浏览器支持,火狐浏览器不支持
//item.setAttribute("checked","checked");
//火狐和IE浏览器都支持
item.checked=true;
}
}
/*<input type="button" name="check" id="checkNo" value="全不选">*/
document.getElementById("checkNo").onclick=function(){
var items=document.getElementsByName("items");
for(var i=0;items!=null&&i<items.length;i++){
var item=items[i];
//使用setAttribute时,IE浏览器支持,火狐浏览器不支持
//item.setAttribute("checked",null);
//火狐和IE浏览器都支持
item.checked=false;
}
}
/*<input type="button" name="check" id="checkRevsern" value="反选">*/
document.getElementById("checkRevsern").onclick=function(){
var items=document.getElementsByName("items");
for(var i=0;items!=null&&i<items.length;i++){
var item=items[i];
/* if(item.checked){
item.checked=false;
}
else{
item.checked=true;
} */
//简便写法
item.checked=!item.checked;
}
}
/*<input type="checkbox" name="checkItems" id="checkItems" value="全选/全不选">全选/全不选*/
document.getElementById("checkItems").onclick=function(){
/* 方法一
if(this.checked){
var items=document.getElementsByName("items");
for(var i=0;items!=null&&i<items.length;i++){
var item=items[i];
item.checked=true;
}
else{
var items=document.getElementsByName("items");
for(var i=0;items!=null&&i<items.length;i++){
var item=items[i];
item.checked=false;
} */
//方法二
var items=document.getElementsByName("items");
for(var i=0;items!=null&&i<items.length;i++){
var item=items[i];
item.checked=this.checked;
}
}
}
</script>
</html>
7、添加 删除联系人
用bom的相关属性和方法实现
运行结果:
相关代码:
<!DOCTYPE html>
<html>
<head>
<title>添加用户</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
#top{
width:500px;
margin:20px auto 20px;
background-color:#fcfdef;
padding:10px;
}
#boltom{
width:500px;
margin:20px auto 20px;
background-color:#E8F2FE;
padding:20px
}
</style>
</head>
<body >
<div id="top">
<h3>添加联系人</h3>
姓名
<input type="text" name="name" id="name"><br><br>
电话
<input type="text" name="tel" id="tel"><br><br>
邮箱
<input type="text" name="email" id="email"><br><br>
<button id="addUser">提交</button>
</div>
<div id="boltom">
<h3>通讯录信息</h3>
<table border="1" cellpadding="10" cellspacing=0 >
<tbody>
<tr>
<th>姓名</th>
<th>电话</th>
<th>邮箱</th>
<th> </th>
</tr>
<tr>
<td>小美</td>
<td>111111</td>
<td>11@qq.com</td>
<td><a href="deleteEmp?id=mei">Delete</a></td>
</tr>
<tr>
<td>小硕</td>
<td>2222222</td>
<td>22@qq.com</td>
<td><a href="deleteEmp?id=shuo">Delete</a></td>
</tr>
</tbody>
</table>
</div>
</body>
<script type="text/javascript">
window.onload=function(){
document.getElementById("addUser").onclick=function(){
//获取姓名、电话、邮箱
var name=document.getElementById("name").value;
var tel=document.getElementById("tel").value;
var email=document.getElementById("email").value;
//创建td,并添加文本内容
var tdName=document.createElement("td");
var tdNameText=document.createTextNode(name);
tdName.appendChild(tdNameText);
var tdTel=document.createElement("td");
var tdTelText=document.createTextNode(tel);
tdTel.appendChild(tdTelText);
var tdEmail=document.createElement("td");
var tdEmailText=document.createTextNode(email);
tdEmail.appendChild(tdEmailText);
var tdDelete=document.createElement("td");
var aE=document.createElement("a");
aE.setAttribute("href", "deleteEmp?id="+name);
var aEText=document.createTextNode("Delete");
aE.appendChild(aEText);
tdDelete.appendChild(aE);
//创建tr,将4个创建完成的td对象放置到tr中
var tr=document.createElement("tr");
tr.appendChild(tdName);
tr.appendChild(tdTel);
tr.appendChild(tdEmail);
tr.appendChild(tdDelete);
var tbody=document.getElementsByTagName("tbody");
tbody[0].appendChild(tr);
aE.onclick = function(){
return deleteTr(this);
}
}
//删除对应行的方法
function deleteTr(aE){
var name = aE.parentNode.parentNode.firstChild.firstChild.nodeValue;
var flag = window.confirm("您确定要删除【"+name+"】吗?");
if(flag){
//查找父节点(tbody)
var tbody = aE.parentNode.parentNode.parentNode;
//查找子节点(tr)
var tr = aE.parentNode.parentNode;
//删除tr
tbody.removeChild(tr);
}
return false;
}
}
</script>
</html>
8、添加 添加全部 移除 移除全部
用dom的相关方法实现
<!DOCTYPE html>
<html>
<head>
<title>list.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<style type="text/css">
body
{
font-family:"Courier";
font-size: 12px;
margin:0px 0px 0px 0px;
overflow-x:no;
overflow-y:no;
background-color: #B8D3F4;
}
td
{
font-size:12px;
}
.td3{background-color:#B8D3F4; text-align:center; line-height:20px;}
.button {
border: 1px ridge #ffffff;
line-height:18px;
height: 20px;
width: 45px;
padding-top: 0px;
background:#CBDAF7;
color:#000000;
font-size: 9pt;
font-family:"Courier";
}
</style></head>
<body>
<div style="border:1px dashed #E6E6E6;margin:150px 0px 0px 450px;width:450px;height:300px;background-color:#E6E6E6;">
<table width=100% height="169" border="0" align="left" cellpadding="0" cellspacing="0" style="margin:15px 0px 0px 15px;">
<tr>
<td width="128">
<!-- multiple 属性可设置或返回是否可有多个选项被选中。-->
<select style="width:150px" size="10" multiple="multiple" name="first" id="first" class="td3">
<option value="选项1">选项1</option>
<option value="选项2">选项2</option>
<option value="选项3">选项3</option>
<option value="选项4">选项4</option>
<option value="选项5">选项5</option>
<option value="选项6">选项6</option>
<option value="选项7">选项7</option>
<option value="选项8">选项8</option>
<option value="选项9">选项9</option>
</select>
</td>
<td width="69" valign="middle">
<input name="add" id="add" type="button" class="button" value="-->">
<input name="add_all" id="add_all" type="button" class="button" value="==>">
<input name="remove" id="remove" type="button" class="button" value="<--">
<input name="remove_all" id="remove_all" type="button" class="button" value="<==">
</td>
<td width="128" align="left">
<select style="width:150px" size="10" multiple="multiple"name="second" id="second" class="td3">
<option value="选项10">选项10</option>
</select>
</td>
</tr>
</table>
</div>
</body>
<script type="text/javascript">
window.onload=function(){
//将选中的option从左侧移到右侧<input name="add" id="add" type="button" class="button" value="-->">
document.getElementById("add").onclick=function(){
//获取左侧的select元素
var first =document.getElementById("first");
//获取左侧的select元素中的option
var firstOptions=first.getElementsByTagName("option");
//获取右侧的select元素
var second=document.getElementById("second");
//将JavaScript的数组长度固定
for(var i=firstOptions.length-1;i>=0;i--){
//说明左侧的option有被选中的值
if(first.selectedIndex!=-1){
//将左侧选中的option移到右侧
second.appendChild(firstOptions[first.selectedIndex]);
}
}
}
//将左侧全部的option(不管选中还是不选中)移动右侧<input name="add_all" id="add_all" type="button" class="button" value="==>">
document.getElementById("add_all").onclick=function(){
var first =document.getElementById("first");
var firstOptions=first.getElementsByTagName("option");
var second=document.getElementById("second");
var len=firstOptions.length;
for(var i=0;i<len;i++){
//将左侧全部option移到右侧
second.appendChild(firstOptions[0]);
}
}
//双击从左侧移动右侧(每次只能够移动一个值)<select name="first" size="10" multiple="multiple" class="td3" id="first">
document.getElementById("first").ondblclick = function(){
var first = document.getElementById("first");
var firstOptions = first.getElementsByTagName("option");
var second = document.getElementById("second");
second.appendChild(firstOptions[first.selectedIndex]);
}
//将选中的option从右侧移到左侧<input name="remove" id="remove" type="button" class="button" value="<--">
document.getElementById("remove").onclick=function(){
//获取右侧的select元素
var second=document.getElementById("second");
//获取右侧的select元素中的option
var secondOptions=second.getElementsByTagName("option");
//获取左侧的select元素
var first =document.getElementById("first");
//将JavaScript的数组长度固定
for(var i=secondOptions.length-1;i>=0;i--){
//说明右侧的option有被选中的值
if(second.selectedIndex!=-1){
//将左侧选中的option移到右侧
first.appendChild(secondOptions[second.selectedIndex]);
}
}
}
//将右侧全部的option(不管选中还是不选中)移动左侧<input name="remove_all" id="remove_all" type="button" class="button" value="<==">
document.getElementById("remove_all").onclick=function(){
var second=document.getElementById("second");
var secondOptions=second.getElementsByTagName("option");
var first =document.getElementById("first");
var len=secondOptions.length;
for(var i=0;i<len;i++){
//将右侧全部option移到右侧
first.appendChild(secondOptions[0]);
}
}
//双击从右侧移动左侧(每次只能够移动一个值)<select name="first" size="10" multiple="multiple" class="td3" id="second">
document.getElementById("second").ondblclick = function(){
var second=document.getElementById("second");
var secondOptions=second.getElementsByTagName("option");
var first =document.getElementById("first");
first.appendChild(secondOptions[second.selectedIndex]);
}
}
</script>
</html>
小编寄语:
JavaScript之路漫漫,我先骑着自行车,快速领略一下路上的风景~日后有机会,再故地重游,体会你别样的美~