javascript的认识与理解
javascript也称JS,其主要用于写jsp页面事件触发的函数,基本格式为function f (参数列表){ 函数体},其中f为函数名,函数的参数列表可带参可不带参。
在JS中,所有的变量类型均可使用var类型接收,包括数组,整型,float(浮点型),char(字符型)等,其中的变量称为“弱变量”,而在java中的那类型变量为强变量。举例:var tem = 3;
同java中一样,在JS中,是严格区分大小写的。
JS中获取页面元素对象(DOM对象)的方法有三种:
1.根据ID获取,如 var username = document.getElementById("username");此时得到的为对象,若要取出其具体的数值,要调用其.value属性。
2.根据name值获取,得到的为对象数组,var userpwd = document.getElementsByName("userpwd");取出对象数组中的value属性值,用alert (userpwd[0].value);因为其为数组,所以带下标。
3.根据标签名来获取,得到的也为对象数组,var input = document.getElementsByTagName("input");取出对象数组的value属性方法同上。
补充:若要在取出的对象中直接赋值,用到innerHTML方法。
JS中的常见事件:onload,写在body体中,一进入JSP页面立即加载的方法。
onclick,点击事件。
onchange事件。
小技巧:写JS方法时,一般不一次性写完,而是在每创建一个方法的时候都进行alert,看方法是否被调用成功。
alert弹窗,不点确定程序不会继续往下执行,而console.log(1)会继续往下执行,并在控制台显示信息。
案例代码:全选特效
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>全选特效</title>
</head>
<script>
function change(){
//获取子选框对象,得到一个数组对象
var chs = document.getElementsByName("ch");
//获取全选框对象
var chall = document.getElementById("chall");
for (var i=0;i<chs.length;i++) {
//使子选框的状态同全选框的状态保持一致
chs[i].checked = chall.checked;
}
}
</script>
<body>
<table border="1" align="center">
<tr>
<td>
<input type="checkbox" id="chall" onchange="change()"/>全选
</td>
<td>用户名</td>
<td>密码</td>
</tr>
<tr>
<td>
<input type="checkbox" name="ch"/>
</td>
<td>aa</td>
<td>123</td>
</tr>
<tr>
<td>
<input type="checkbox" name="ch" />
</td>
<td>bb</td>
<td>234</td>
</tr>
<tr>
<td>
<input type="checkbox" name="ch"/>
</td>
<td>cc</td>
<td>345</td>
</tr>
<tr>
<td>
<input type="checkbox" name="ch" />
</td>
<td>dd</td>
<td>456</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>全选特效</title>
</head>
<script>
function change(){
//获取子选框对象,得到一个数组对象
var chs = document.getElementsByName("ch");
//获取全选框对象
var chall = document.getElementById("chall");
for (var i=0;i<chs.length;i++) {
//使子选框的状态同全选框的状态保持一致
chs[i].checked = chall.checked;
}
}
</script>
<body>
<table border="1" align="center">
<tr>
<td>
<input type="checkbox" id="chall" onchange="change()"/>全选
</td>
<td>用户名</td>
<td>密码</td>
</tr>
<tr>
<td>
<input type="checkbox" name="ch"/>
</td>
<td>aa</td>
<td>123</td>
</tr>
<tr>
<td>
<input type="checkbox" name="ch" />
</td>
<td>bb</td>
<td>234</td>
</tr>
<tr>
<td>
<input type="checkbox" name="ch"/>
</td>
<td>cc</td>
<td>345</td>
</tr>
<tr>
<td>
<input type="checkbox" name="ch" />
</td>
<td>dd</td>
<td>456</td>
</tr>
</table>
</body>
</html>
下拉菜单(省市级联)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>省市级连</title>
</head>
<script>
function sel(){
//创建数组
var citys =new Array();
citys["山西"] = ['大同','太原','阳泉'];
citys["河南"] = ['洛阳','郑州','开封'];
citys["北京"] = ['朝阳区','海淀区','昌平区'];
//获取下拉框的值(省份的值),并将city中的请选择清空
var pro = document.getElementById("province").value;
document.getElementById("city").options.length = 0;
//遍历省份下对应的城市
for (var i in citys[pro]) {
//将遍历得到的城市创建成option对象
var op = new Option(citys[pro][i],citys[pro][i]);
//将创建好的option对象放入city中
document.getElementById("city").options.add(op);
}
}
</script>
<body>
省份:<select onchange="sel()" id="province">
<option>请选择</option>
<option value="山西">山西</option>
<option value="河南">河南</option>
<option value="北京">北京</option>
</select>
城市:<select id="city">
<option>请选择</option>
</select>
<br/>
用户名<input onblur="check()" type="text" id="username"/>
<span id="sp"></span>
<script>
function check(){
var usernameObj = document.getElementById("username");
var username = usernameObj.value;
if(username==""){
document.getElementById("sp").innerHTML="<font color='red'>用户名不能为空!</font>";
usernameObj.focus();
}else{
document.getElementById("sp").innerHTML="";
}
}
</script>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>省市级连</title>
</head>
<script>
function sel(){
//创建数组
var citys =new Array();
citys["山西"] = ['大同','太原','阳泉'];
citys["河南"] = ['洛阳','郑州','开封'];
citys["北京"] = ['朝阳区','海淀区','昌平区'];
//获取下拉框的值(省份的值),并将city中的请选择清空
var pro = document.getElementById("province").value;
document.getElementById("city").options.length = 0;
//遍历省份下对应的城市
for (var i in citys[pro]) {
//将遍历得到的城市创建成option对象
var op = new Option(citys[pro][i],citys[pro][i]);
//将创建好的option对象放入city中
document.getElementById("city").options.add(op);
}
}
</script>
<body>
省份:<select onchange="sel()" id="province">
<option>请选择</option>
<option value="山西">山西</option>
<option value="河南">河南</option>
<option value="北京">北京</option>
</select>
城市:<select id="city">
<option>请选择</option>
</select>
<br/>
用户名<input onblur="check()" type="text" id="username"/>
<span id="sp"></span>
<script>
function check(){
var usernameObj = document.getElementById("username");
var username = usernameObj.value;
if(username==""){
document.getElementById("sp").innerHTML="<font color='red'>用户名不能为空!</font>";
usernameObj.focus();
}else{
document.getElementById("sp").innerHTML="";
}
}
</script>
</body>
</html>
轮播图
(JS一般可写在头部或者body体中,也可以从外部JS文件中引入,<script type="text/javascript"src="js/toggle.js" ></script>)
JS代码
targetPic = 1;
var ti;
function show(t) {
if(Number(t)){
targetPic = t;
}
clearTimeout(ti);
for (var i = 1; i < 5; i++) {
if (i == targetPic) {
document.getElementById('img' + i).style.display = "block";
} else {
document.getElementById('img' + i).style.display = "none";
}
}
if (targetPic < 4) {
targetPic++;
}else{
targetPic=1;
}
ti = setTimeout("show()","1000");
}
var ti;
function show(t) {
if(Number(t)){
targetPic = t;
}
clearTimeout(ti);
for (var i = 1; i < 5; i++) {
if (i == targetPic) {
document.getElementById('img' + i).style.display = "block";
} else {
document.getElementById('img' + i).style.display = "none";
}
}
if (targetPic < 4) {
targetPic++;
}else{
targetPic=1;
}
ti = setTimeout("show()","1000");
}
html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>togglePic</title>
</head>
<script type="text/javascript" src="js/toggle.js" ></script>
<style>
#d2{
position: absolute;
left: 635px;
top: 185px;
}
a:link{
font-size: 25px;
text-decoration: none;
color: red;
}
a:visited{
color: brown;
}
</style>
<body onload="show()">
<div align="center">
<p><img src="img/scroll1.jpg" width="400px" height="200px" id="img1"/></p>
<p><img src="img/scroll2.jpg" width="400px" height="200px" id="img2"/></p>
<p><img src="img/scroll3.jpg" width="400px" height="200px" id="img3"/></p>
<p><img src="img/scroll4.jpg" width="400px" height="200px" id="img4"/></p>
</div>
<div id="d2">
<a href="javascript:show(1)">1</a>
<a href="javascript:show(2)">2</a>
<a href="javascript:show(3)">3</a>
<a href="javascript:show(4)">4</a>
</div>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>togglePic</title>
</head>
<script type="text/javascript" src="js/toggle.js" ></script>
<style>
#d2{
position: absolute;
left: 635px;
top: 185px;
}
a:link{
font-size: 25px;
text-decoration: none;
color: red;
}
a:visited{
color: brown;
}
</style>
<body onload="show()">
<div align="center">
<p><img src="img/scroll1.jpg" width="400px" height="200px" id="img1"/></p>
<p><img src="img/scroll2.jpg" width="400px" height="200px" id="img2"/></p>
<p><img src="img/scroll3.jpg" width="400px" height="200px" id="img3"/></p>
<p><img src="img/scroll4.jpg" width="400px" height="200px" id="img4"/></p>
</div>
<div id="d2">
<a href="javascript:show(1)">1</a>
<a href="javascript:show(2)">2</a>
<a href="javascript:show(3)">3</a>
<a href="javascript:show(4)">4</a>
</div>
</body>
</html>