JavaScript初学笔记（记录自学）
什么是JavaScript ？
js简单的页面校验
<script>
function cheakForm(){
// var input1 = document.getElementById("111");
// var input2 = input1.value;
// if(input2.length >= 6){
// return true;
// }
// else{
// alert("用户名太短！");
// }
// return false;
//
//邮箱的校验
var email = document.getElementById("email");
var Uemail = email.value;
if(/^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/.test(Uemail)){
alert("校验成功");
}
else{
alert("校验失败");
return false;
}
return true;
}
</script>
</head>
<body>
<form action="../../02-网站注册页面/网站注册页面.html" onsubmit="return cheakForm()">
用户名：<input type="text" id="111" /><br />
邮箱：<input type="text" id="email" /><br />
<input type="submit" value="提交" />
</form>
</body>
运行结果
点击之后
自动轮播图片之
切换图片
<script>
function changeImg(){
var img = document.getElementById("1001");
img.src = "../img/1-161104143944.gif";
}
</script>
</head>
<body>
<input type="button" value="点击切换" onclick="changeImg()"/>
<br />
<img src="../img/222.jpg" id="1001"/>
</body>
运行结果
点击之后
自动轮播图片之
定时器
<script>
function test(){
console.log("setInterval被调用了");
}
var timerID;
function startDingshiqi(){
timerID = setInterval("test()",3000);
}
function stopDingshiqi(){
cleraInterval(timerID);
}
</script>
</head>
<body>
<input type="button" value="开启定时器" onclick="startDingshiqi()"/>
<input type="button" value="关闭定时器" onclick="stopDingshiqi()"/>
</body>
运行结果
调出Console控制台之后，点开启定时器
图片自动轮播案例
步骤分析
<script>
var index = 0;
function changeImg(){
var img = document.getElementById("2333");
var curindex = index%3+1;//能得到 1 2 3
img.src = "../img/"+curindex+".jpg";
index = index + 1;
}
function init(){
setInterval("changeImg()",1500);
}
</script>
</head>
<body onload="init()">
<img src="../img/1.jpg" width="100%" id="2333" />
</body>
运行结果
点开之后，首先是
1.5秒之后
又1.5秒之后
完成了图片轮播
显示和隐藏图片
<script>
function hideImg(){
var img = document.getElementById("img1");
img.style.display = "none";
}
function showImg(){
var img = document.getElementById("img1");
img.style.display = "block";
}
</script>
</head>
<body>
<input type="button" value="隐藏" onclick="hideImg()"/>
<input type="button" value="显示" onclick="showImg()"/><br />
<img src="../img/1-161104143944.gif" id="img1" />
</body>
运行结果
点击隐藏之后
再点击显示
综合案例：定时弹出广告
步骤分析
<script>
function hideAD(){
var img = document.getElementById("1001");
img.style.display = "none";
}
function showAD(){
var img = document.getElementById("1001");
img.style.display = "block";
setTimeout("hideAD()",2500);
}
function init(){
setTimeout("showAD()",2500);
}
</script>
</head>
<body onload="init()">
<img id="1001" src="../img/1-161104143944.gif" width="100%" style="display: none ; "/>
</body>
运行结果
2.5.秒之后
再2.5.秒之后
表单校验的改进版本
需求
代码
<script>
function showTips(spanID,msg){
var span = document.getElementById(spanID);
span.innerHTML = msg;
}
function cheakUsername(){
var uValue = document.getElementById("username").value;
var span = document.getElementById("span_username");
if(uValue.length < 6){
span.innerHTML = "<font color = 'red' size = '2'>对不起，太短</font>";
}
else{
span.innerHTML = "<font color = 'red' size = '2'>输入的用户名可使用</font>";
}
}
//校验密码
function cheakPassword(){
var uValue = document.getElementById("password").value;
var span = document.getElementById("span_password");
if(uValue.length < 6){
span.innerHTML = "<font color = 'red' size = '2'>对不起，密码太短</font>";
}
else{
span.innerHTML = "<font color = 'red' size = '2'>输入的密码可使用</font>";
}
}
</script>
</head>
<body>
<form action="../02-网站定时弹出广告/显示和隐藏.html" >
用户名：<input type="text" id="username" onfocus="showTips('span_username','用户名长度不能小于六') " onblur="cheakUsername()" onkeyup="cheakUsername()"/><span id="span_username"></span><br />
密码：<input type="password" id="password" onfocus="showTips('span_password','密码长度不能小于六') " onblur="cheakPassword()" onkeyup="cheakPassword()"/><span id="span_password"></span><br />
确认密码：<input type="password" id="repassword" /><br />
邮箱：<input type="text" id="email" /><br />
手机号：<input type="text" id="text" /><br />
<input type="submit" value="提交" />
</form>
运行结果
当光标点击 用户名的框时，
当输入时
当输入完时
其他项和用户名项大同小异，就不一一展示了。
这样就达到了更好的用户体验。
表单校验的流程步骤
表格的隔行换色+全选，全不选
原因
全选全不选的步骤分析
代码
<script>
function init(){
//得到表格
var tab = document.getElementById("tab");
//得到行,再遍历行
var rows = tab.rows;
for(var i=0;i<rows.length;i++){
var row = rows[i];
if(i%2==0){
row.bgColor = "yellow";
}
else{
row.bgColor = "red";
}
}
}
function checkAll(){
//首先该获得第一个checkbox
var check1 = document.getElementById("sb");
//再获得这个checkbox的状态
var checked = check1.checked;
//获得所有的checkbox
var checks = document.getElementsByName("checkyou");
//遍历并修改状态
for(var i=0;i<checks.length;i++){
var checkyou = checks[i];
checkyou.checked = checked;
}
}
</script>
</head>
<body onload="init()">
<table border="1px " width="600px" id="tab">
<tr>
<td>
<input type="checkbox" onclick="checkAll()" id="sb" />
</td>
<td>分类ID</td>
<td>分类名称</td>
<td>分类商品</td>
<td>分类描述</td>
<td>操作</td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkyou" />
</td>
<td>1</td>
<td>手机数码</td>
<td>华为,小米,尼康</td>
<td>黑马数码产品质量最好</td>
<td>
<a href="#">修改</a>|<a href="#">删除</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkyou" />
</td>
<td>2</td>
<td>成人用品</td>
<td>充气的</td>
<td>这里面的充气电动硅胶的</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkyou" />
</td>
<td>3</td>
<td>电脑办公</td>
<td>联想,小米</td>
<td>笔记本特卖</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkyou" />
</td>
<td>4</td>
<td>馋嘴零食</td>
<td>辣条,麻花,黄瓜</td>
<td>年货</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkyou" />
</td>
<td>5</td>
<td>床上用品</td>
<td>床单,被套,四件套</td>
<td>都是套子</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
</table>
运行结果
当点击第一个checkbox时，
再点击时
达到了全选 全不选的功能
对DOM操作的分析，DOM树
DOM操作的实例代码
需求
代码
<script>
function dianwo(){
//找到目标元素
var div = document.getElementById("div1");
//添加元素<p></p>
var p =document.createElement("p");
//添加文本 文本内容
var textNode = document.createTextNode("我被创建好了");
//文本进去到元素里面 <p>文本内容</p>
p.appendChild(textNode);
//元素p接到元素div后面
div.appendChild(p);
}
</script>
</head>
<body>
<input type="button" value="点我添加内容" onclick="dianwo()"/>
<div id="div1">
</div>
</body>
运行结果
点击一次之后
多点击几次
省市联动案例
准备时的代码
接下里的步骤分析
完整代码
<!-- 1. 确定事件: onchange
2. 函数: selectProvince()
3. 函数里面要搞事情了
得到当前操作元素
得到当前选中的是那一个省份
从数组中取出对应的城市信息
动态创建城市元素节点
添加到城市select中 -->
<script>
/*
准备工作 : 准备数据
*/
var provinces = [
["深圳市", "东莞市", "惠州市", "广州市"],
["长沙市", "岳阳市", "株洲市", "湘潭市"],
["厦门市", "福州市", "漳州市", "泉州市"]
];
/*
1. 确定事件: onchange
2. 函数: selectProvince()
3. 函数里面要搞事情了
得到当前操作元素
得到当前选中的是那一个省份
从数组中取出对应的城市信息
动态创建城市元素节点
添加到城市select中
*/
function selectProvince() {
var province = document.getElementById("province");
//得到当前选中的是哪个省份
//alert(province.value);
var value = province.value;
//从数组中取出对应的城市信息
var cities = provinces[value];
var citySelect = document.getElementById("city");
//清空select中的option
citySelect.options.length = 0;
for (var i = 0; i < cities.length; i++) {
// alert(cities[i]);
var cityText = cities[i];
//动态创建城市元素节点 <option>东莞市</option>
//创建option节点
var option1 = document.createElement("option"); // <option></option>
//创建城市文本节点
var textNode = document.createTextNode(cityText); // 东莞市
//将option节点和文本内容关联起来
option1.appendChild(textNode); //<option>东莞市</option>
// 添加到城市select中
citySelect.appendChild(option1);
}
}
</script>
</head>
<body>
<!--选择省份-->
<select onchange="selectProvince()" id="province">
<option value="-1">--请选择--</option>
<option value="0">广东省</option>
<option value="1">湖南省</option>
<option value="2">福建省</option>
</select>
<!--选择城市-->
<select id="city"></select>
</body>
运行结果
当点击了“请选择”，选择了湖南省时
接下来
大于号> ： >
小于号< ： <
multiple属性 可使下拉选项变成如下所示的上下选项
商品左右选择的案例
步骤分析
代码
<!--
步骤分析
1. 确定事件: 点击事件 :onclick事件
2. 事件要触发函数 selectOne
3. selectOne要做一些操作
(将左边选中的元素移动到右边的select中)
1. 获取左边Select中被选中的元素
2. 将选中的元素添加到右边的Select中就可以
-->
<script>
function selectOne(){
// 1. 获取左边Select中被选中的元素
var leftSelect = document.getElementById("leftSelect");
var options = leftSelect.options;
var rightSelect = document.getElementById("rightSelect");
//遍历找出被选中的option
for(var i=0;i<options.length;i++){
var option1 = options[i];
if(option1.selected){
// 2. 将选中的元素添加到右边的Select中就可以
rightSelect.appendChild(option1);
}
}
}
</script>
</head>
<body>
<table border="1px" width="400px">
<tr>
<td>分类名称</td>
<td>
<input type="text" value="手机数码"/>
</td>
</tr>
<tr>
<td>分类描述</td>
<td>
<input type="text" value="这里面都是手机数码"/>
</td>
</tr>
<tr>
<td>分类商品</td>
<td>
<!-- 左边 -->
<div style="float: left;">
已有商品<br />
<select multiple="multiple" id="leftSelect" ondblclick="selectOne()">
<option>华为</option>
<option>黑莓</option>
<option>小米</option>
<option>OPPO</option>
</select>
<br />
<a href="#" onclick="selectOne()"> >></a><br />
<a href="#"> >>> </a>
</div>
<!-- 右边 -->
<div style="float: right;">
未有商品<br />
<select multiple="multiple" id="rightSelect">
<option>苹果</option>
<option>谷歌</option>
<option>vive</option>
<option>HTC</option>
</select>
<br />
<a href="#"> <<</a><br />
<a href="#"> <<<</a>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="提交"/>
</td>
</tr>
</table>
</body>
运行结果
当点击黑莓，再点右移时
黑莓就从已有商品移动到了未有商品
另外
ondbclick事件能使双击完成上述功能