JavaScript一些常用的示例2-阿里云开发者社区

1.checkbox的学习

Checkbox的操作基本上就几种：选中，未选中，全选，取消全选，反选
<body>
<h3>关于checkbox的用法的例子</h3><br/>
<input id="c1" type="checkbox" name="option1" value="value1" checked="checked"/>Value1
<input id="c2" type="checkbox" name="option2" value="value2"/>Value2<br/>
<input id="c3" type="checkbox" name="option3" value="value3"/>Value3
     <input type="button" value="触发事件"/>
</body>
1. 操作一：判断一个checkbox是否处于选中状态
//方法一：
if($("#c1").is(":checked")) {
alert("方法一可以用！");
} else {
alert("方法一不可以用");
}
//方法二：
if($("#c2").attr("checked") == false) {
alert("方法二可以用！");
} else {
alert("方法二不可以用");
}
2. 操作二：让一个checkbox处于选中状态！
$("#c3").attr("checked","checked");
或者
$("#c3").attr("checked",true);
3. 操作三：取消一个checkbox的选中状态！
$("#c1").removeAttr("checked");
或者
$("#c1").attr("checked",false);
4. 操作四：获取checkbox的值！
var value1 = $("#c1").val();
或者
Var value2 = document.getElementById(“c2”).value;
<body>
<h3>下面我们来练习一下全选与反选的例子</h3>
<input class="son" type="checkbox" name="son" value="value1"/>
<input class="son" type="checkbox" name="son" value="value2"/>
<input class="son" type="checkbox" name="son" value="value3"/>
<input class="son" type="checkbox" name="son" value="value4"/>
<input class="son" type="checkbox" name="son" value="value5"/>
<input class="son" type="checkbox" name="son" value="value6"/><br/><br/>
<input id="father" type="checkbox" name="father" value="value7"/>全选
      
<input id="un" type="checkbox" name="option8" value="value8"/>反选
</body>
5. 操作五：全选
方法一：
$("#father").click(function(){
//获取父选框和子选框数组
var father = document.getElementById("father");
var sons = document.getElementsByName("son");
//设置子选框的选中状态和父相同
for(var i=0; i < sons.length; i++) {
sons[i].checked = father.checked;
}
});
方法二：
$("#father").click(function(){
var flag = $(this).attr("checked");
$("[name=son]:checkbox").each(function(){
$(this).attr("checked",flag);
});
});
6.通过每一个子复选框来判断全选的复选框是否应处于选中状态
方法一：
$(".son").click(function(){
var num=0;
var father = document.getElementById("father");
var sons = document.getElementsByName("son");
for(var i=0; i < sons.lenth; i++) {
if(sons[i].checked) {
num++;
}
}
if(num == sons.lenth) {
father.checked = true;
} else {
father.checked = false;
}
});
方法二：
$(".son").click(function(){
$("[name=son]:checkbox").each(function(){
if($(this).attr("checked") == false) {
$("#father").attr("checked",false);
}
});
});
7.反选：
$("#un").click(function(){
var num = 0;
var father = document.getElementById("father");
var sons = document.getElementsByName("son");
for(var i=0; i<sons.length; i++) {
sons[i].checked = !sons[i].checked;
if(sons[i].checked) {
num++;
}
}
if(num == sons.length) {
father.checked = true;
} else {
father.checked = false;
}
});

2.不同板块间的切换，如下面的

我们自己做的效果：

源码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gbk" />
<title></title>
<style type="text/css">
span{
width:150px;
height:50px;
line-height:50px;
background:#c3d9ff;
display:block;
text-align:center;
float:left; /*注意*/
cursor:pointer;
}
div{
width:450px;
height:300px;
background:#c3d9ff;
}
#s2,#d2{
background:#4096ee;
}
#s3,#d3{
background:#ff7400;
}
</style>
<script type="text/javascript">
function showDiv(num) {
document.getElementById("d"+num).style.display = "block";
for(var index=1; index <=3; index++) {
if(index != num) {
document.getElementById("d"+index).style.display = "none";
}
}
}
</script>
</head>
<body>
<span id="s1" onmouseover="showDiv(1)">财经新闻</span>
<span id="s2" onmouseover="showDiv(2)">体育新闻</span>
<span id="s3" onmouseover="showDiv(3)">娱乐新闻</span>
<div id="d1">xxx11111111xxxxx</div>
<div id="d2" style="display:none;">xxxxx22222222222xxxxxx</div>
<div id="d3" style="display:none;">xxxxxx333333333333xxxxxx</div>
</body>
</html>

3.弹出层

源码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=GBK" />
<title></title>
<style type="text/css">
#jobsList{
background:#ccc;
width:200px;
margin-top:-14px;
display:none;
}
#jobs{
width:200px;
height:10px;
}
</style>
<script type="text/javascript">
function show() {
var jobs = document.getElementById("jobs");
var left = jobs.offsetLeft -10; //纯数字。获取相对于浏览器的位置。
var top = jobs.offsetTop;
document.getElementById("jobsList").style.display="block";
document.getElementById("jobsList").style.marginLeft=left+"px"; //
}
function closeJobList() {
var jobs = document.getElementsByName("job");
//如何通过JS获得单选框中选项
var value = "";
for(var i=0; i<jobs.length; i++) {
if(jobs[i].checked) {
value = jobs[i].value;
break;
}
}
//将单选框中选中的值赋值给文本框
document.getElementById("jobs").value = value;
//将当前的弹出层隐藏
document.getElementById("jobsList").style.display="none";
}
</script>
</head>
<body>
<form action="" method="get">
请选择您的职业：<input type="text" id="jobs" onclick="show()"/>
</form>
<div id="jobsList">
<ul>
<li><input type="radio" name="job" value="律师"/>律师</li>
<li><input type="radio" name="job" value="教师"/>教师</li>
<li><input type="radio" name="job" value="司机"/>司机</li>
<input type="button" value="选择" onclick="closeJobList()"/>
</ul>
</div>
</body>
</html>

4.表单的验证

①submit的提交方式--注意submit提交方式的缺点：当我们禁用JS时，依然可以提交！！

源码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=GBK" />
<title>submit</title>
<style type="text/css">
div span{
width:80px;
height:20px;
border:1px solid #ccc;
display:block; /*注意：此处的作用是为了设置height:20px;*/
line-height:20px;
text-align:center;
float:left;
}
</style>
<script type="text/javascript">
/*验证表单*/
function checkForm() {
var name = document.getElementById("username").value;
var pwd = document.getElementById("password").value;
if(name.trim() == "") {
document.getElementById("username-msg").innerHTML = "用户名必须填写";
document.getElementById("username").focus(); //获得焦点
return false; //表示提交不成功！！
}
if(pwd.trim() == "") {
document.getElementById("password-msg").innerHTML = "密码必须填写";
document.getElementById("password").focus(); //获取焦点
return false; //表示提交不成功
}
return true ;//表示提交成功
}
/*清除提示信息*/
function clearMsg(msg) {
document.getElementById(msg).innerHTML = "";
}
/*密码强度的验证*/
function validatePassword(){
var pwd = document.getElementById("password").value.trim();
if(pwd.length == 0) {
document.getElementById("low").style.background = ""; /*注意：style.background的应用哦*/
document.getElementById("mid").style.background = "";
document.getElementById("hei").style.background = "";
} else if(pwd.length >= 1 && pwd.length < 6) {
document.getElementById("low").style.background = "red";
} else if(pwd.length >= 6 && pwd.length <10) {
document.getElementById("low").style.background = "blue";
document.getElementById("mid").style.background = "blue";
} else {
document.getElementById("low").style.background = "green";
document.getElementById("mid").style.background = "green";
document.getElementById("hei").style.background = "green";
}
}
</script>
</head>
<body>
<form id="myform" action="demo.jsp" method="post" onsubmit="return checkForm()">
UserName : <input type="text" name="username" id="username" onkeydown="clearMsg('username-mag')"/>
<span style="color:red;" id="username-msg"></span><br />
Password : <input type="password" name="password" id="password" onkeypress="validatePassword()" onkeydown="clearMsg('password-msg')"/>
<span style="color:red;" id="password-msg"></span><br />
<div>
<span id="low">弱</span>
<span id="mid">中</span>
<span id="hei">强</span>
</div>
<div>
<input type="submit" value="login"/>
</div>
</form>
</body>
</html>

②button的提交方式：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=GBK" />
<title>submit</title>
<style type="text/css">
div span{
width:80px;
height:20px;
border:1px solid #ccc;
display:block; /*注意：此处的作用是为了设置height:20px;*/
line-height:20px;
text-align:center;
float:left;
}
</style>
<script type="text/javascript">
/*验证表单*/
function checkForm() {
var name = document.getElementById("username").value;
var pwd = document.getElementById("password").value;
if(name.trim() == "") {
document.getElementById("username-msg").innerHTML = "用户名必须填写";
document.getElementById("username").focus(); //获得焦点
return false; //表示提交不成功！！
}
if(pwd.trim() == "") {
document.getElementById("password-msg").innerHTML = "密码必须填写";
document.getElementById("password").focus(); //获取焦点
return false; //表示提交不成功
}
//return true ;//表示提交成功
//因为从submit的提交方式换成了button。所以注释掉上面一行，换成下面的
document.getElementById("myform").submit();
}
/*清除提示信息*/
function clearMsg(msg) {
document.getElementById(msg).innerHTML = "";
}
/*密码强度的验证*/
function validatePassword(){
var pwd = document.getElementById("password").value.trim();
if(pwd.length == 0) {
document.getElementById("low").style.background = ""; /*注意：style.background的应用哦*/
document.getElementById("mid").style.background = "";
document.getElementById("hei").style.background = "";
} else if(pwd.length >= 1 && pwd.length < 6) {
document.getElementById("low").style.background = "red";
} else if(pwd.length >= 6 && pwd.length <10) {
document.getElementById("low").style.background = "blue";
document.getElementById("mid").style.background = "blue";
} else {
document.getElementById("low").style.background = "green";
document.getElementById("mid").style.background = "green";
document.getElementById("hei").style.background = "green";
}
}
</script>
</head>
<body>
<form id="myform" action="demo.jsp" method="post" >
UserName : <input type="text" name="username" id="username" onkeydown="clearMsg('username-mag')"/>
<span style="color:red;" id="username-msg"></span><br />
Password : <input type="password" name="password" id="password" onkeypress="validatePassword()" onkeydown="clearMsg('password-msg')"/>
<span style="color:red;" id="password-msg"></span><br />
<div>
<span id="low">弱</span>
<span id="mid">中</span>
<span id="hei">强</span>
</div>
<div>
<input type="button" value="login" onclick="checkForm()"/>
</div>
</form>
</body>
</html>

5.常用的触发事件：

onblur → 不管值有没有改变，失去焦点总会调用。

onchange → 值发生改变，失去焦点时去调用。（前提值发生改变）

onfocus → 获得焦点时去调用

onkeypress → 键盘按下弹起时触发

onkeydown → 键盘按下后触发

onkeyup → 键盘弹起时触发

onload → 见前面

onmouseover → 鼠标悬浮上面时

onclick → 点击时触发

6.JavaScript数组的学习，具体请参考API

<script type="text/javascript">
//javascript数组的学习→ 和java的数组差不多！eg.
var array = new Array(3);
array[0] = "hanchao";
array[1] = "cherry";
array[2] = "jerry";
for(var index=0; index < array.length; index++) {
alert(array[index]);
}
array.sort();//按字符顺序对数组进行排序
//增强for循环的使用(i依然是指数组的下标！！)
for(var i in array) {
alert("----"+array[i]);
document.write(array[i]+"<br/>");//表示向页面刷新内容
}
</script>

7.二级级联的一个demo:

了解下拉框控件select的一些属性：

-length:表示一个下拉框中有几个option

-value:表示<option value=" 值">中value的值

-options:所有的option放在一起可看作一个集合或数组叫options

-selectedIndex:您选中的option的索引，从 0 开始。

eg.

源码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=GBK" />
<title></title>
<script type="text/javascript">
function changeSelect() {
var index = document.getElementById("pp").selectedIndex -1;//减1是为了忽略第一个“--请选择品牌--”
document.getElementById("type").options.length = 1;//清空上一次选择的
var typeArray = new Array(); //当Array()括号里不写大小时，是想写多少写多少
//数组的值又是一个数组
typeArray[0] = ["A4","A6","A8","Q7"];
typeArray[1] = ["宝马1系","宝马3系","宝马5系","宝马7系"];
typeArray[2] = ["宝来","桑塔纳","朗逸"];
for(var i in typeArray[index]) {
var option = new Option(typeArray[index][i],typeArray[index][i]);
//说明：typeArray[index][i]分别代表的值！一个value的值（你看不见的），一个是你能看到的！
document.getElementById("type").options.add(option);//
}
}
</script>
</head>
<body>
请选择品牌：
<select name="pp" id="pp" onchange="changeSelect()">
<option value="0">--请选择品牌--</option>
<option value="1">奥迪</option>
<option value="2">宝马</option>
<option value="3">大众</option>
</select>
请选择系列：
<select name="" id="type">
<option value="">--请选择系列--</option>
</select>
</body>
</html>

写法二：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=GBK" />
<title></title>
<script type="text/javascript">
function changeSelect() {
var index = document.getElementById("pp").value;
document.getElementById("type").options.length = 1;//清空上一次选择的
var typeArray = new Array(); //当Array()括号里不写大小时，是想写多少写多少
//数组的值又是一个数组
typeArray['audi'] = ["A4","A6","A8","Q7"];
typeArray['bmw'] = ["宝马1系","宝马3系","宝马5系","宝马7系"];
typeArray['auto'] = ["宝来","桑塔纳","朗逸"];
for(var i in typeArray[index]) {
var option = new Option(typeArray[index][i],typeArray[index][i]);
//说明：typeArray[index][i]分别代表值！一个value的值（你看不见的），一个是你能看到的！
document.getElementById("type").options.add(option);//
}
}
</script>
</head>
<body>
请选择品牌：
<select name="pp" id="pp" onchange="changeSelect()">
<option value="0">--请选择品牌--</option>
<option value="auid">奥迪</option>
<option value="bmw">宝马</option>
<option value="auto">大众</option>
</select>
请选择系列：
<select name="" id="type">
<option value="">--请选择系列--</option>
</select>
</body>
</html>

本文转自韩立伟 51CTO博客，原文链接：http://blog.51cto.com/hanchaohan/929381，如需转载请自行联系原作者

JavaScript一些常用的示例2

热门文章

最新文章

相关课程

相关电子书

相关实验场景