Day03-jS
javaScript概述
什么是javaScript：javaScript是一种直译式脚本语言。直接解释执行的语言。 什么是脚本语言？ . java源代码--->编译成.class文件 --->java虚拟机中才能执行 . 脚本语言：源码 ---->解释执行 . js由我们的浏览器解释执行
HTML：决定了页面的框架
CSS：用来美化我们的页面
JS:提供用户的交互，是灵魂
JS的组成:
ECMAScript : 核心部分 ,定义js的语法规范
DOM: document Object Model 文档对象模型 , 主要是用来管理页面的
BOM : Browser Object Model 浏览器对象模型, 前进,后退,页面刷新, 地址栏, 历史记录, 屏幕宽高
JS的语法
变量弱类型:var i = true
区分大小写 ， 语句结束之后的分号 可以有，也可以没有
要求写在script标签内
JS的数据类型
-
基本数据类型
- string
- number
- boolean
- undefine
- null
-
引用数据类型
- 对象， 内置对象
-
类型转换
- js内部自动转换
JS的运算符和语句
-
运算符和java一样
-
"===" 全等号: 值和类型都必须相等
-
== 值相等就可以了
-
语句和java大致一样
-
js中无逻辑单与和逻辑单或，函数不支持重载
-
null 属于Object类型。
-
NaN 不是一个数字，但是属于number类型。
var aa ="哈喽";alert(typeof(aa)); //这样赋值的就是String类型var v = new String();//直接new出来的就是Object类型alert(typeof(v));
-
- 案例：求偶数和
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
// document.write("哈喽");
var num =0;
for (var a =0;a<=100;a++) {
if (a%2==0) {
num+= a;
}
}
alert(num);
document.write(num)
</script>
</head>
<body>
</body>
</html>
JS的输出
- alert() 直接弹框
- document.write() 向页面输出
- console.log()向控制台输出
- innerHTML:向页面输出，可以改变内容
JS声明变量和函数
var 变量的名称 = 变量的值
var 函数的名称 = function(){
• }
• function 函数的名称(){
• }
JS的开发步骤
1. 确定事件
2. 通常事件都会出发一个函数
3. 函数里面通常都会去操作页面元素,做一些交互动作，弹框。修改页面，动态添加一些东西
选择器：
元素选择器: 元素的名称{}
• 类选择器: . 加类名{}
• ID选择器: #ID选择器{}
• 后代选择器: 选择器1 选择器2
• 子元素选择器: 选择器1 > 选择器2
• 选择器分组: 选择器1,选择器2,选择器3{}
• 属性选择器: 选择器[属性的名称='属性的值']
• 伪类选择器:选择器分组: 选择器1,选择器2,选择器3{}
属性选择器: 选择器[属性的名称='属性的值']
伪类选择器:
浮动:
-
适应于div块 左右排版
float 属性: left right
清除浮动:
clear 属性: both left right
盒子模型: 上右下左 padding 10px 20px 30px 40px 顺时针的方向
内边距: 控制的盒子内距离
边框: 盒子的边框
外边距: 控制盒子与盒子之间的距离
绝对定位: position : absolute; top: left
定时器
- setInterval("test()",3000) 每隔多少毫秒执行一次函数 循环函数
- setTimeout("test()",3000) 多少毫秒之后执行一次函数 一次性函数
- timerID 上面定时器调用之后
- clearInterval() 清除循环函数定时器
- clearTimeout() 清除一次性定时器 。一般不用
切换图片
img.src = "图片路径"
事件：文档加载完成的事件 onload事件
显示广告 ，隐藏广告 :调用display的功能。
var img =document.getElementById("id");
img.style.display = "block";
img.style.display = "none"
引入外部JS文件
<script src="js文件的路径" type="text/javascript"/>
//需要注意的是：当从外部引入后 script中再写js代码就不会生效。
内部引入 ：
直接在文件中任何位置：<script>在这里写js</script>
复选框中 checked = true ；代表选中状态
checked = false 代表未选中状态。
表单中常用的事件：
onfocus: 获取焦点事件
onblur : 失去焦点的事件
onkeyup: 按键抬起的事件
onclick: 单击事件
ondblclick: 双击事件
表格隔行换色,鼠标移入和移除要变色:
onmouseenter: 鼠标移入
onmouseout: 鼠标移出
onload: 文档加载完成事件
onsubmit: 提交
onchange: 下拉列表内容改变
checkbox.checked 选中状态
DOM的文档操作:
添加节点: appendChild
创建节点: document.createElement
创建文本节点: document.createTextNode()
点击事件
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
// 可以传参数
function fun1 (x) {
alert("我被单击了！！"+x);
}
function fun2 () {
alert("我被单机了！！哈哈哈");
}
function fun3 () {
alert("我被双击了！！哈哈哈");
}
</script>
</head>
<body>
<input type="button" value="点击" name="按钮" onclick="fun1(100),fun2()" />
<input type="button" value="双击" ondblclick="fun3()" />
</body>
</html>
#案例一 ，校验#
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../css/01.css" />
<script>
/*
1.确定事件：表单提交事件 onsubmit事件
2.事件所要触发的函数: checkForm
3. 函数中要执行一些程序
1. 函数中再创建一个方法统一判断用户名，密码，确认密码 是否为空，直接 调用这个函数。
*/
function checkForm(){
//校验用户名是否为空
var v1 = checkFormIsNull("username","用户名");
//校验密码是否为空
var v2 =checkFormIsNull("pwd","密码");
//校验确认密码是否为空
var v3 =checkFormIsNull("repwd","确认密码");
if(v2 && v3 ){
//获取密码的值
var pas = document.getElementById("pwd").value;
//获取确认密码的值
var repas = document.getElementById("repwd").value;
//判断是否一致
if(pas != repas){
alert("两次密码输入不一致！！");
return false;
}
}
var v4 = document.getElementById("email").value;
if(/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(v4)){
alert("邮箱验证通过");
}else{
alert("邮箱验证错误");
return false;
}
//要验证的四个有一个不对就错 。
return v1 && v2 && v3 && v4;
}
function checkFormIsNull(id,msg){
//验证用户名,密码，确认密码 是否为空
var ele =document.getElementById(id);
var val = ele.value;
if(val == ""){ //此处不能写null 。
alert(msg+"不能为空！！！");
return false;
}
return true;
}
</script>
</head>
<body>
<div id="divFormId">
<form onsubmit="return checkForm()" action="#" method="get">
<table width="500">
<tr>
<td colspan="3">
<font color="#3164af" size="5">会员注册</font> USER REGISTER
</td>
</tr>
<tr>
<td align="right">用户名</td>
<td colspan="2"><input type="text" id="username" name="username" size="50"/> </td>
</tr>
<tr>
<td align="right">密码</td>
<td colspan="2"><input type="password" id="pwd" name="pwd" size="50"/> </td>
</tr>
<tr>
<td align="right">确认密码</td>
<td colspan="2"><input type="password" id="repwd" name="repwd" size="50"/> </td>
</tr>
<tr>
<td align="right">Email</td>
<td colspan="2"><input type="text" id="email" name="email" size="50"/> </td>
</tr>
<tr>
<td align="right">姓名</td>
<td colspan="2"><input name="text" id="name" name="name" size="50"/> </td>
</tr>
<tr>
<td align="right">性别</td>
<td colspan="2">
<input type="radio" name="sex" value="man" checked="checked" />男
<input type="radio" name="sex" value="woman" />女
</td>
</tr>
<tr>
<td></td>
<td colspan="2">
<input type="image" src="/day03/img/submit.jpg" />
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
#案例二，隐藏广告 #
<html>
<head>
<!--页面刚加载完成后，先隐藏图片属性，两秒后显示，过两秒后再消失。-->
<meta charset="UTF-8">
<title></title>
<style>
.hmig{
display: none;
}
.sowImg{
display: block;
}
</style>
<script>
function showImg(){
//1.选中广告的这个图片
var obj = document.getElementById("pac");
//2.修改class的值。切换为块，显示状态
obj.className="sowImg";
//2秒后隐藏起来
setTimeout("hiddImg()",2000);
}
function hiddImg(){
var obj = document.getElementById("pac");
//2.修改class的值，使其切换成none值
obj.className="hmig";
}
</script>
</head>
<body onload="setTimeout('showImg()',2000)">
//选择一张图片作为广告。
<img src="../img/3.jpg" id="pac" class="hmig" width="100%"/>
</body>
</html>
隐藏广告的修改版本：
<!DOCTYPE html> <html> <head> <!--页面刚加载完成后，先隐藏图片属性，两秒后显示，过两秒后再消失。--> <meta charset="UTF-8"> <title></title> <style> .hmig{ display: none; /*display: block;*/ } </style> <script> function showImg(){ //1.选中广告的这个图片 var obj = document.getElementById("pac"); //2.修改class的值。切换为块，显示状态 obj.style.display="block"; //2秒后隐藏起来 setTimeout("hiddImg()",2000); } function hiddImg(){ var obj = document.getElementById("pac"); obj.style.display="none"; } </script> </head> <body onload="setTimeout('showImg()',2000)"> <img src="../img/3.jpg" id="pac" class="hmig" width="100%"/> </body> </html>
#案例三，轮播图#
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
var count =1;
function changeImg (){
//获取img元素
var img =document.getElementById("lbt");
//修改src的属性
img.src ="/day03/img/"+(++count)+ ".jpg";
//当count = 3时 归零
if(count ==3){
count =0;
}
}
</script>
</head>
<body onload="setInterval('changeImg()',2000)">
<img id="lbt" src="../../img/1.jpg" width="100%"/>
</body>
</html>
表单验证
表单验证是为了减轻负担，每次提交只有提交符合才能正确提交上去。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <link rel="stylesheet" type="text/css" href="../../css/01.css"/> 7 <script> 8 function checkForm(){
//每次验证需要先把span标签内容给清空 !!要不然会一直显示错误提示。。切记 9 var uele = document.getElementById("usernameMsg"); 10 var pele = document.getElementById("pwdMsg"); 11 var rele = document.getElementById("repwdMsg"); 12 uele.innerHTML=""; 13 pele.innerHTML=""; 14 rele.innerHTML=""; 15 //校验用户名是否为空 16 var v1 = checkFormIsNull("username","用户名"); 17 //校验密码是否为空 18 var v2 =checkFormIsNull("pwd","密码"); 19 //校验确认密码是否为空 20 var v3 =checkFormIsNull("repwd","确认密码"); 21 if(v2 && v3 ){ 22 //获取密码的值 23 var pas = document.getElementById("pwd").value; 24 //获取确认密码的值 25 var repas = document.getElementById("repwd").value; 26 //判断是否一致 27 if(pas != repas){ 28 //alert("两次密码输入不一致！！"); 29 var rele =document.getElementById("repwdMsg"); 30 rele.innerHTML="<font color='red'>两次密码输入不一致！！</font>" 31 return false; 32 } 33 } 34 var v4 = document.getElementById("email").value; 35 if(/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(v4)){ 36 }else{ 37 // alert("邮箱验证错误"); 38 var vu = document.getElementById("emailMsg"); 39 vu.innerHTML="<font color='red'>邮箱格式输入错误！！</font>" 40 return false; 41 } 42 return v1 && v2 && v3 && v4; 43 } 44 function checkFormIsNull(id,msg){ 45 //验证用户名,密码，确认密码 是否为空 46 var ele =document.getElementById(id); 47 var val = ele.value; 48 if(val == ""){ 49 //1.获取span的标签 50 var span = document.getElementById(id+"Msg"); 51 //2.设置内容体 52 span.innerHTML="<font color='red'>"+msg+"不能为空！！</font>" 53 return false; 54 } 55 return true; 56 } 57 </script> 58 </head> 59 <body> 60 <div id="divbg"> 61 <div class="divFormed"> 62 <form onsubmit="return checkForm()" action="#" method="get"> 63 <table width="500px"> 64 <tr> 65 <td colspan="3"> 66 <font color="#3164af" size="5">会员注册</font> USER REGISTER 67 </td> 68 </tr> 69 <tr> 70 <td align="right">用户名</td> 71 <td colspan="2"><input type="text" id="username" name="username" size="50"/> </td> 72 <td><span id="usernameMsg"></span></td> 73 </tr> 74 <tr> 75 <td align="right">密码</td> 76 <td colspan="2"><input type="password" id="pwd" name="pwd" size="50"/> </td> 77 <td><span id="pwdMsg"></span></td> 78 </tr> 79 <tr> 80 <td align="right">确认密码</td> 81 <td colspan="2"><input type="password" id="repwd" name="repwd" size="50"/> </td> 82 <td><span id="repwdMsg"></span></td> 83 </tr> 84 <tr> 85 <td align="right">Email</td> 86 <td colspan="2"><input type="text" id="email" name="email" size="50"/> </td> 87 <td><span id="emailMsg"></span></td> 88 </tr> 89 <tr> 90 <td align="right">姓名</td> 91 <td colspan="2"><input name="text" id="name" name="name" size="50"/> </td> 92 </tr> 93 <tr> 94 <td align="right">性别</td> 95 <td colspan="2"> 96 <input type="radio" name="sex" value="man" checked="checked" />男 97 <input type="radio" name="sex" value="woman" />女 98 </td> 99 </tr> 100 <tr> 101 <td></td> 102 <td colspan="2"> 103 <input type="image" src="../../img/submit.jpg" /> 104 </td> 105 </tr> 106 </table> 107 </form> 108 </div> 109 </div> 110 </body> 111 </html>
InnerHtml和InnerText的区别：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> function run1(){ var span1 = document.getElementById("sss"); alert(span1.innerHTML); //innerHTML 输出会全输出 alert(span1.innerText); //innerText 输出只输出文本内容。 } function run2(){ var span2 = document.getElementById("sss"); //innerText 只能设置普通的文本形式 span2.innerText="大家好，才是真的好！！！" //只有innerHTML 可以设置样式，字体等格式和html一样 span2.innerHTML="<font color='red'>你好啊</font>"; } </script> </head> <body> <span id="sss"> <font color="red">今天是8月12号！！</font> </span> <input type="button" onclick="run1()" value="获取span内容"/><br /> <input type="button" onclick="run2()" value="设置span内容"/> </body> </html>
隔行换色j加上全选，全不选，反选按钮
<!DOCTYPE html> <html> <head> <style> .sss{ background: lightseagreen; } </style> <meta charset="UTF-8"> <title></title> <script> function fun2() { //1.获取所有复选框对象 var arr = document.getElementsByClassName("itemSelect"); //2.将其状态改为选中。 for (var i =0;i<arr.length;i++) { arr[i].checked = true; } } function fun3() { //1.获取所有复选框对象 var arr = document.getElementsByClassName("itemSelect"); //2.将其状态改为全不选。 for (var i =0;i<arr.length;i++) { arr[i].checked = false; } } function fun4() { //1.获取所有复选框对象 var arr = document.getElementsByClassName("itemSelect"); //2.将其状态改为反选。 for (var i =0;i<arr.length;i++) { arr[i].checked = !arr[i].checked; // if (arr[i].checked ) { // arr[i].checked = false; // } else{ // arr[i].checked = true; // } } } function changeColor(){ //1.先获取所有的行 var line = document.getElementsByTagName("tr") //2.晒选出所有的偶数行 for(var i =1;i<line.length;i++){ if(i %2==0){ //2.将其背景颜色修改为蓝色 line[i].className="sss"; } } } </script> </head> <body onload="changeColor()"> <table border="1" cellpadding="0" cellspacing="0" width="80%"> <tr> <th> <input type="button" value="全选" onclick="fun2()"/> <input type="button" value="全不选" onclick="fun3()"/> <input type="button" value="反选" onclick="fun4()"/> </th> <th>序号</th> <th>商品名称</th> <th>商品描述</th> <th>操作</th> </tr> <tr> <td> <input type="checkbox" class="itemSelect"/> </td> <td>1</td> <td>手机数码</td> <td>手机数码商品信息</td> <td> <a href="#">修改</a> <a href="#">删除</a> </td> </tr> <tr class="sss"> <td> <input type="checkbox" class="itemSelect"/> </td> <td>2</td> <td>电脑办公</td> <td>电脑办公商品信息</td> <td> <a href="#">修改</a> <a href="#">删除</a> </td> </tr> <tr> <td> <input type="checkbox" class="itemSelect"/> </td> <td>3</td> <td>鞋靴箱包</td> <td>鞋靴箱包商品信息</td> <td> <a href="#">修改</a> <a href="#">删除</a> </td> </tr> <tr> <td> <input type="checkbox" class="itemSelect"/> </td> <td>4</td> <td>家居饰品</td> <td>家居饰品商品信息</td> <td> <a href="#">修改</a> <a href="#">删除</a> </td> </tr> </table> </body> </html>
省市二级联动：
主要掌握好 onchange :下拉列表内容改变 这个事件。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <script> // 定义二维数组,存储城市信息 var cities = new Array(); cities[0] = new Array("海淀区","昌平区","朝阳区"); cities[1] = new Array("郑州市","商丘市","开封市","洛阳市","平顶山市"); cities[2] = new Array("济南市","青岛市","烟台市","潍坊市","淄博市"); cities[3] = new Array("石家庄市","唐山市","邯郸市","廊坊市"); cities[4] = new Array("南京市","苏州市","扬州市","宿迁市"); function changeCity(val){ //val 是省份的下标 //根据下标再继续获取城市，再继续获取城市的对象 var arr = cities[val]; var city = document.getElementById("city"); //切记先清空城市这一栏的信息。要不然会一直叠加上个省份的城市 city.innerHTML="<option value=''>----请-选-择-市----</option>" for(var i =0;i<arr.length;i++){ //city.innerHTML=arr[i]; var temp ="<option>"+arr[i]+"</option>"; city.innerHTML +=temp; //追加，要不然会被最后一个覆盖。 } } </script> <body> <select id="province" onchange= "changeCity(this.value)" style="width:150px"> <option value="">----请-选-择-省----</option> <option value="0">北京</option> <option value="1">河南省</option> <option value="2">山东省</option> <option value="3">河北省</option> <option value="4">江苏省</option> </select> <select id="city" style="width:150px"> <option value="">----请-选-择-市----</option> </select> </body> </html>
