1、基本语法
-
定义变量:var 变量名=‘value’;
-
判断相等?
== :值是否相等?
===:类型和值是否相等 -
判断语句
if(条件){
满足条件做的事情
}else{
不满足条件做的事情
} -
for循环
for(var i = 0;i < count; i++){
循环做的事
} -
函数定义
function 函数名(形参1,形参2){
return 返回值;
} -
JavaScript事件:
onsubmit - - - - 提交事件
onclick - - - - 点击事件
onfocus - - - -聚焦事件
onblur - - - - 离焦事件
onchange - - - - 当对象内容改变时执行的内容
2、DOM(document object model)
document.getElementsByName - - -返回的是一个列表对象
document.getElementById - - -返回的是一个元素对象
document.createTextNode - - - -创建文本节点
document.createElement - - - - 创建子节点对象
NodeObj.appendChild - - - - 子节点对象的添加
innerHTML - - - - 当前标签对象里面嵌套的html信息
value - - - - 用户输入的信息值
src - - - - 获取图片的路径,通过赋值方式实现修改图片的路径
checked - - - - 判断当前多选框是否被选中
3、案例代码
用户登录校验
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function checkForm( ) {
//获取当前用户提交的用户名,默认情况下getElementsByName返回列表对象,value获取对象里面的值
var username = document.getElementsByName('username')[0].value;
// 判断用户名是否为空,如果是空,报错
if (username === ''){
// == '5' == 5 true 只比较值是否相等
// === '5' === 5 false 比较值和类型是否相等
alert("用户名为空");
}
// 判断密码的长度是否大于6,如果不大于6,进行报错
// var password = document.getElementsByName('password');
var password = document.getElementById('pwd').value;
var pwd_length = password.length;
if (pwd_length < 6){
alert("密码的长度小于6位")
}
}
</script>
</head>
<body>
<div>
<h1>用户登录</h1>
<!--
当提交登录信息时,执行函数checkForm实现用户的校验
事件类型:onsubmit
-->
<form action="#" method="get" onsubmit="return checkForm( )">
<input type="text" name="username" placeholder="用户名"><br>
<input type="password" name="password" placeholder="密码" id="pwd"><br>
<input type="submit" value="登录">
</form>
</div>
</body>
</html>
聚焦和离焦事件(用户登录校验改进版)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function showUserTips() {
var usertipObj = document.getElementById('usertips');
usertipObj.innerHTML = '<span style="color: gray">用户名长度应大于2</span>';
}
function checkUser() {
//获取当前用户提交的用户名,默认情况下getElementsByName返回列表对象,value获取对象里面的值
var username = document.getElementsByName('username')[0].value;
// 判断用户名是否为空,如果是空,报错
var usertipsObj = document.getElementById('usertips');
if (username.length <= 2){
usertipsObj.innerHTML = '<span style="color: red">用户名长度应大于2</span>';
}
else {
usertipsObj.innerHTML = '<span style="color:green">OK</span>'
}
}
</script>
</head>
<body>
<div>
<h1>用户登录</h1>
<form action="#" method="get" >
<!--onfocus聚焦事件,如果聚焦,执行函数showUserTips()-->
<input type="text" name="username" placeholder="用户名" id="user" onfocus="showUserTips()" onblur="checkUser()">
<span id="usertips"></span><br>
<input type="password" name="password" placeholder="密码" id="pwd"><br>
<input type="submit" value="登录">
</form>
</div>
</body>
</html>
基于onclick实现图片的切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var count = 1;
function changImg() {
count += 1;
//获取图像对象
var imgObj = document.getElementById('img');
imgObj.src = count + '.jpg';
if(count === 5){
count = 0;
}
}
</script>
</head>
<body>
<div>
<img src="1.jpg" id="img"><br>
<!--当用户点击按钮时,切换图片到下一个-->
<input type="submit" value="下一页" onclick="changImg()">
</div>
</body>
</html>
实现表格的全选和不全选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function checkAll() {
// 1、获取全选框对象
var checkAllEle = document.getElementById('checkAll');
// 2、获取当前的状态,如果返回的是true,则代表选中,否则未选中
// alert(checkAllEle.checked);
var checkOnes = document.getElementsByName('checkOne');
if (checkAllEle.checked) {
for (var i = 0; i < checkOnes.length; i++) {
checkOnes[i].checked = true;
}
} else {
for (var i = 0; i < checkOnes.length; i++) {
checkOnes[i].checked = false;
}
}
}
</script>
</head>
<body>
<table border="1px" style="color: aqua" width="600px" align="center">
<th style="text-align: center" colspan="5">
<input type="button" value="添加">
<input type="button" value="删除">
</th>
<tr>
<th><input type="checkbox" id="checkAll" onclick="checkAll()"></th>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr align="center">
<td><input type="checkbox" name="checkOne"></td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr align="center">
<td><input type="checkbox" name="checkOne"></td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr align="center">
<td><input type="checkbox" name="checkOne"></td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr align="center">
<td><input type="checkbox" name="checkOne"></td>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
</table>
</body>
</html>
动态添加城市
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function addCity(){
// 1. 获取添加的城市内容
var city = document.getElementById('city').value;
// 2.判断城市是否有值,有则添加到列表里面
if(city){
// 创建一个关于城市的文本节点
var textNode = document.createTextNode(city);
// 创建一个li元素节点
var liEleNode = document.createElement('li');
// 将城市信息添加到li标签里面<li>城市名称<li>
liEleNode.appendChild(textNode);
// 将城市列表标签添加到ul标签里面去
var ulEleNode = document.getElementById('city_ul');
ulEleNode.appendChild(liEleNode)
}else {
alert("城市为空");
}
}
</script>
</head>
<body>
<div class="content">
<form>
<input type="text" id="city" name="city" placeholder="请输入城市">
<input type="button" value="添加城市" onclick="addCity()">
</form>
<ul id="city_ul">
<li>西安</li>
<li>重庆</li>
<li>上海</li>
</ul>
</div>
</body>
</html>
省市信息二级联动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function changeCity() {
// 1.如何存储省份和城市之间的关系?
// provinces = [[]]
var provinces = new Array (3);
provinces[0] = new Array("西安","咸阳","宝鸡");
provinces[1] = new Array("太原","运城","大同");
provinces[2] = new Array("桂林","南宁");
// alert(provinces[0]);
// 2.获取用户选择的省份,返回的是value值
var choiceProvince = document.getElementById("province").value;
// alert(choiceProvince);
// 3. 遍历用户选择省份的所有城市
var citys = provinces[choiceProvince];
// alert(citys);
// 获取select节点对象
var selectCityNode = document.getElementById('city');
//清空select标签里面的所有内容
selectCityNode.length = 0;
// 将城市添加到select里面:
for(var i = 0;i < citys.length; i++){
// 创建城市的文本节点
var textNode = document.createTextNode(citys[i]);
// 创建option节点对象
var optEleNode = document.createElement('option');
//将文本节点添加到option节点中
optEleNode.appendChild(textNode);
selectCityNode.appendChild(optEleNode)
}
}
</script>
</head>
<body>
<div>
<form action="#" method="get">
<span>籍贯</span>
<!--当修改省份时,执行函数changeCity()函数-->
<select id="province" onchange="changeCity()">
<option>---选择省份---</option>
<option name="province" value="0">陕西</option>
<option name="province" value="1">山西</option>
<option name="province" value="2">广西</option>
</select>
<select id="city">
<option>---选择城市---</option>
</select>
</form>
</div>
</body>
</html>