JS的基本使用(2)
浏览数：24 /
时间：2015年06月09日
1、
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<head>
<style>
ul {
list-style-type: none;
}
ul li {
float: left;
width: 120px;
height: 40px;
border: 1px solid black;
margin-left: 20px;
text-align: center;
cursor: pointer;
}
</style>
<script type="text/javascript">
/*
单击项显示特定颜色，其他项显示同一颜色。
实现思路 ：
先把父元素下的所有子元素的原色设置成同一颜色，
然后再修改特定子元素的颜色
*/
function doAction(id){
var obj = document.getElementById(‘u1‘);
var arr = obj.getElementsByTagName(‘li‘);
for(var i = 0 ; i < arr.length ; ++i){
arr[i].style.backgroundColor=‘#ff88ee‘;//style.backgroundColor编译器没有提示
}
var obj1 = document.getElementById(id);
obj1.style.backgroundColor=‘red‘;
}
</script>
</head>
<body style="font-size: 30px;">
<ul id="u1">
<!-- 内联样式-->
<li style="background-color: #ff88ee;" id="l1"
onclick="doAction(‘l1‘);">
选项一
</li>
<li style="background-color: #ff88ee;" id="l2"
onclick="doAction(‘l2‘);">
选项二
</li>
<li style="background-color: #ff88ee;" id="l3"
onclick="doAction(‘l3‘);">
选项三
</li>
</ul>
</body>
</html>2、
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<style type="text/css">
#d1{
width: 400px;
height: 250px;
background-color: #FFE4B5;
margin: 40px auto;
}
#d1_head{
color: white;
font-size: 20px;
font-family: "Arial";
height: 24px;
background-color: blue;
}
#d1_content{
padding-left: 30px;
padding-top: 30px;
}
.s1{
color: red;
font-style: italic;
}
.s2{
border: 2px dotted blue;
}
</style>
<script type="text/javascript">
/*
用户名不能为空
*/
function check_username(){
var usernameObj = document.getElementById(‘username‘);
var usernameMsgObj = document.getElementById(‘username_msg‘);
usernameObj.className = ‘‘;//这两行的作用在于每次进行处理之前先清空之前的效果. 如用户第二次输入合法
usernameMsgObj.innerHTML = ‘‘;
if(usernameObj.value.length == 0){
usernameMsgObj.innerHTML = ‘用户名不能为空‘;
usernameObj.className = ‘s2‘;
}
}
</script>
</head>
<body>
<div id="d1">
<div id="d1_head">注册</div>
<div id="d1_content">
<form>
<table>
<tr>
<td>用户名</td>
<td>
<input id="username" name="username" onblur="check_username()"/>
<span id="username_msg" class="s1" ></span>
</td>
</tr>
<tr>
<td>密码</td>
<td>
<input id="pwd" name="pwd" />
<span id="pwd_msg" class="s1" ></span>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="确认"/>
<input type="reset" value="重置"/>
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>3、
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<style type="text/css">
#d1{
width: 400px;
height: 250px;
background-color: #FFE4B5;
margin: 40px auto;
}
#d1_head{
color: white;
font-size: 20px;
font-family: "Arial";
height: 24px;
background-color: blue;
}
#d1_content{
padding-left: 30px;
padding-top: 30px;
}
.s1{
color: red;
font-style: italic;
}
.s2{
border: 2px dotted blue;
}
</style>
<script type="text/javascript">
/*
禁止浏览器的默认行为(数据不规范则不能提交)
*/
function check_username(){
var usernameObj = document.getElementById(‘username‘);
var usernameMsgObj = document.getElementById(‘username_msg‘);
usernameObj.className = ‘‘;//这两行的作用在于每次进行处理之前先清空之前的效果. 如用户第二次输入合法
usernameMsgObj.innerHTML = ‘‘;
if(usernameObj.value.length == 0){
usernameMsgObj.innerHTML = ‘用户名不能为空‘;
usernameObj.className = ‘s2‘;
return false;
}
return true;
}
function check_form(){
var flag = check_username();
return flag;
}
</script>
</head>
<body>
<div id="d1">
<div id="d1_head">注册</div>
<div id="d1_content">
<form onsubmit="return check_form()">
<table>
<tr>
<td>用户名</td>
<td>
<input id="username" name="username" onblur="check_username()"/>
<span id="username_msg" class="s1" ></span>
</td>
</tr>
<tr>
<td>密码</td>
<td>
<input id="pwd" name="pwd" />
<span id="pwd_msg" class="s1" ></span>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="确认"/>
<input type="reset" value="重置"/>
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>4、
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<style type="text/css">
#d1{
width: 400px;
height: 250px;
background-color: #FFE4B5;
margin: 40px auto;
}
#d1_head{
color: white;
font-size: 20px;
font-family: "Arial";
height: 24px;
background-color: blue;
}
#d1_content{
padding-left: 30px;
padding-top: 30px;
}
.s1{
color: red;
font-style: italic;
}
.s2{
border: 2px dotted blue;
}
</style>
<script type="text/javascript">
/*
禁止浏览器的默认行为(数据不规范则不能提交)
*/
function check_username(){
var usernameObj = document.getElementById(‘username‘);
var usernameMsgObj = document.getElementById(‘username_msg‘);
usernameObj.className = ‘‘;//这两行的作用在于每次进行处理之前先清空之前的效果. 如用户第二次输入合法
usernameMsgObj.innerHTML = ‘‘;
if(usernameObj.value.length == 0){
usernameMsgObj.innerHTML = ‘用户名不能为空‘;
usernameObj.className = ‘s2‘;
return false;
}
return true;
}
/*
正则表达式在JS中的使用
*/
function check_pwd(){
var pwdObj = document.getElementById(‘pwd‘);
var pwdMsgObj = document.getElementById(‘pwd_msg‘);
pwdObj.className = ‘‘;
pwdMsgObj.innerHTML = ‘‘;
var reg = /^\d{6}$/
if(!reg.test(pwdObj.value)){
pwdObj.className = ‘s2‘;
pwdMsgObj.innerHTML = ‘密码必须是6位数字‘;
return false;
}
return true;
}
function check_form(){
var flag = check_username() && check_pwd();
return flag;
}
</script>
</head>
<body>
<div id="d1">
<div id="d1_head">注册</div>
<div id="d1_content">
<form onsubmit="return check_form()">
<table>
<tr>
<td>用户名</td>
<td>
<input id="username" name="username" onblur="check_username()"/>
<span id="username_msg" class="s1" ></span>
</td>
</tr>
<tr>
<td>密码</td>
<td>
<input id="pwd" name="pwd" onblur="check_pwd()"/>
<span id="pwd_msg" class="s1"></span>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="确认"/>
<input type="reset" value="重置"/>
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>5、
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<script type="text/javascript">
/*
创建节点与添加节点(1)
*/
function f5(){
var obj = document.createElement(‘div‘);
obj.innerHTML = ‘I love 章泽天‘;
var buttonObj = document.getElementById(‘bu1‘);
buttonObj.appendChild(obj);
}
</script>
</head>
<body style="font-size: 30px;" id="b1">
<input id="bu1" type="button" value="Click" onclick="f5()"/>
</body>
</html>6、
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<style type="text/css">
.tips{
width:200px;
height: 80px;
background-color: red;
}
</style>
<script type="text/javascript">
/*
创建节点与添加节点(2)
*/
function f6(){
var divObj = document.createElement(‘div‘);
divObj.className=‘tips‘;
divObj.innerHTML=‘章泽天 LOVE ME‘;
var bodyObj = document.getElementById(‘b1‘);
var buttonObj = document.getElementById(‘bu1‘);
bodyObj.insertBefore(divObj,buttonObj);
}
</script>
</head>
<body style="font-size: 30px;" id="b1">
<input id="bu1" type="button" value="Click" onclick="f6()"/>
</body>
</html>7、
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<style type="text/css">
.tips{
width:200px;
height: 80px;
background-color: red;
}
</style>
<script src="myjs.js"></script>
<script type="text/javascript">
/*
引入外部的JS
*/
function f6(){
var divObj = document.createElement(‘div‘);
divObj.className=‘tips‘;
divObj.innerHTML=‘章泽天 LOVE ME‘;
var bodyObj = $(‘b1‘);
var buttonObj = $(‘bu1‘);
bodyObj.insertBefore(divObj,buttonObj);
}
</script>
</head>
<body style="font-size: 30px;" id="b1">
<input id="bu1" type="button" value="Click" onclick="f6()"/>
</body>
</html>8、
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<style type="text/css">
#d1{
width: 400px;
height: 250px;
background-color: #FFE4B5;
margin: 40px auto;
}
#d1_head{
color: white;
font-size: 20px;
font-family: "Arial";
height: 24px;
background-color: blue;
}
#d1_content{
padding-left: 30px;
padding-top: 30px;
}
.s1{
color: red;
font-style: italic;
}
.s2{
border: 2px dotted blue;
}
</style>
<script src="prototype-1.6.0.3.js"></script>
<script type="text/javascript">
/*
用户名不能为空(使用prototype实现)
*/
function check_username(){
var usernameObj = $(‘username‘);
var usernameMsgObj = $(‘username_msg‘);
usernameObj.className = ‘‘;
usernameMsgObj.innerHTML = ‘‘;
if($F(‘username‘).strip().length == 0){
usernameMsgObj.innerHTML = ‘用户名不能为空‘;
usernameObj.className = ‘s2‘;
}
}
</script>
</head>
<body>
<div id="d1">
<div id="d1_head">注册</div>
<div id="d1_content">
<form>
<table>
<tr>
<td>用户名</td>
<td>
<input id="username" name="username" onblur="check_username()"/>
<span id="username_msg" class="s1" ></span>
</td>
</tr>
<tr>
<td>密码</td>
<td>
<input id="pwd" name="pwd" />
<span id="pwd_msg" class="s1" ></span>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="确认"/>
<input type="reset" value="重置"/>
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>9、
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<script type="text/javascript">
/*
创建节点与添加节点:练习
*/
function f9(){
var aObj = document.getElementById(‘a1‘);
var divObj = document.createElement(‘div‘);
divObj.innerHTML=‘章泽天也喜欢黄俊东‘;
aObj.appendChild(divObj);
}
</script>
</head>
<body style="font-size: 30px;" id="b1">
<a href="javascript:;" onclick="f9()" id="a1">我喜欢章泽天</a>
</body>
</html>10、
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<style type="text/css">
#d1{
width: 400px;
height: 250px;
background-color: #FFE4B5;
margin: 40px auto;
}
#d1_head{
color: white;
font-size: 20px;
font-family: "Arial";
height: 24px;
background-color: blue;
}
#d1_content{
padding-left: 30px;
padding-top: 30px;
}
.s1{
color: red;
font-style: italic;
}
.s2{
border: 2px dotted blue;
}
</style>
<script src="prototype-1.6.0.3.js"></script>
<script type="text/javascript">
/*
练习一: 使用prototype进行表单验证
*/
/*
禁止浏览器的默认行为(数据不规范则不能提交)
*/
function check_username(){
var usernameObj = document.getElementById(‘username‘);
var usernameMsgObj = document.getElementById(‘username_msg‘);
usernameObj.className = ‘‘;//这两行的作用在于每次进行处理之前先清空之前的效果. 如用户第二次输入合法
usernameMsgObj.innerHTML = ‘‘;
if(usernameObj.value.length == 0){
usernameMsgObj.innerHTML = ‘用户名不能为空‘;
usernameObj.className = ‘s2‘;
return false;
}
return true;
}
/*
正则表达式在JS中的使用
*/
function check_pwd(){
var pwdObj = document.getElementById(‘pwd‘);
var pwdMsgObj = document.getElementById(‘pwd_msg‘);
pwdObj.className = ‘‘;
pwdMsgObj.innerHTML = ‘‘;
var reg = /^\d{6}$/
if(!reg.test(pwdObj.value)){
pwdObj.className = ‘s2‘;
pwdMsgObj.innerHTML = ‘密码必须是6位数字‘;
return false;
}
return true;
}
function check_repwd(){
$(‘repwd‘).className = ‘‘;
$(‘repwd_msg‘).innerHTML = ‘‘;
if(!($F(‘pwd‘) == $F(‘repwd‘))){
$(‘repwd‘).className = ‘s2‘;
$(‘repwd_msg‘).innerHTML = ‘两次密码要一致‘;
return false;
}
return true;
}
function check_idcard(){
$(‘idcard‘).className = ‘‘;
$(‘idcard_msg‘).innerHTML = ‘‘;
var reg = /^\d{15}$|^\d{17}([0-9]|X|x)$/;
if(!reg.test($F(‘idcard‘))){
$(‘idcard‘).className = ‘s2‘;
$(‘idcard_msg‘).innerHTML = ‘身份证的格式不正确‘;
return false;
}
return true;
}
function check_form(){
var flag = check_username() && check_pwd() && check_repwd() && check_idcard();
return flag;
}
</script>
</head>
<body>
<div id="d1">
<div id="d1_head">注册</div>
<div id="d1_content">
<form onsubmit="return check_form()">
<table>
<tr>
<td>用户名</td>
<td>
<input id="username" name="username" onblur="check_username()"/>
<span id="username_msg" class="s1" ></span>
</td>
</tr>
<tr>
<td>密码</td>
<td>
<input id="pwd" name="pwd" onblur="check_pwd()"/>
<span id="pwd_msg" class="s1"></span>
</td>
</tr>
<tr>
<td>密码确认</td>
<td>
<input id="repwd" name="repwd" onblur="check_repwd()"/>
<span id="repwd_msg" class="s1"></span>
</td>
</tr>
<tr>
<td>身份证号码</td>
<td>
<input id="idcard" name="idcard" onblur="check_idcard()"/>
<span id="idcard_msg" class="s1"></span>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="确认"/>
<input type="reset" value="重置"/>
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>11、
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<script src="prototype-1.6.0.3.js"></script>
<script type="text/javascript">
/*
html dom 中的select对象的使用
*/
function f11(){
alert($(‘city‘).selectedIndex);//打印选项的Index,从0开始
}
</script>
</head>
<body style="font-size: 30px">
<select id="city" name="city"
style="width: 120px;"
onchange="f11();"
>
<option value="cd">成都</option>
<option value="qd">青岛</option>
<option value="xm">厦门</option>
</select>
</body>
</html>12、
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<script src="prototype-1.6.0.3.js"></script>
<script type="text/javascript">
/*
html dom 中的this的使用
*/
function f12(obj){
alert(obj.selectedIndex);//打印选项的Index,从0开始
}
</script>
</head>
<body style="font-size: 30px">
<select id="city" name="city"
style="width: 120px;"
onchange="f12(this);"
>
<option value="cd">成都</option>
<option value="qd">青岛</option>
<option value="xm">厦门</option>
</select>
</body>
</html>13、
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<script src="prototype-1.6.0.3.js"></script>
<script type="text/javascript">
/*
html dom 中的this的使用,对f12的简化
*/
function f13(obj){
alert(obj);//打印选项的Index,从0开始
}
</script>
</head>
<body style="font-size: 30px">
<select id="city" name="city"
style="width: 120px;"
onchange="f13(this.selectedIndex);"
>
<option value="cd">成都</option>
<option value="qd">青岛</option>
<option value="xm">厦门</option>
</select>
</body>
</html>14、
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<script src="prototype-1.6.0.3.js"></script>
<script type="text/javascript">
/*
html dom 中的select对象的length属性的使用
*/
function f14(){
alert($(‘city‘).length);//$(‘city‘).length获取设置项的个数
}
</script>
</head>
<body style="font-size: 30px">
<select id="city" name="city"
style="width: 120px;"
onchange=""
>
<option value="cd">成都</option>
<option value="qd">青岛</option>
<option value="xm">厦门</option>
</select>
<input onclick="f14()" value="click me" type="button"/>
</body>
</html>15、
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<script src="prototype-1.6.0.3.js"></script>
<script type="text/javascript">
/*
html dom 中的select对象的options属性的使用
*/
function f15(){
var arr = $(‘city‘).options;//获取select对象的所有options属性
for(var i = 0 ; i < arr.length ; ++i){
alert(arr[i].text + ‘ : ‘ + arr[i].value);//text: 显示给用户看的内容; value: 主要用于程序内部识别
}
}
</script>
</head>
<body style="font-size: 30px">
<select id="city" name="city"
style="width: 120px;"
onchange=""
>
<option value="cd">成都</option>
<option value="qd">青岛</option>
<option value="xm">厦门</option>
</select>
<input onclick="f15()" value="click me" type="button"/>
</body>
</html>16、
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<script src="prototype-1.6.0.3.js"></script>
<script type="text/javascript">
/*
html dom 中的增加option选项
通过length属性能获取或设置option选项的长度(个数)
*/
function f16(){
var op = new Option(‘大连‘,‘dl‘);
$(‘city‘).options[$(‘city‘).length] = op;
}
</script>
</head>
<body style="font-size: 30px">
<select id="city" name="city"
style="width: 120px;"
onchange=""
>
<option value="cd">成都</option>
<option value="qd">青岛</option>
<option value="xm">厦门</option>
</select>
<input onclick="f16()" value="click me" type="button"/>
</body>
</html>
17、
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<style>
#d1 {
width: 450px;
height: 120px;
background-color: #dddddd;
margin: 40px auto;
}
#d1_head {
height: 30px;
font-size: 24px;
color: white;
background-color: blue;
}
#d1_content {
padding-left: 30px;
}
</style>
<script src="prototype-1.6.0.3.js"></script>
<script type="text/javascript">
/*
使用prototype来实现级联下拉列表.
所谓的级联下拉列表,其实是这么一个东西：
在写脚本之前,第一级可以显示内容,但是第二级没有内容
在写脚本之后,第二级的内容根据第一级的来显示
*/
function f17(index){
var arr = new Array();
arr[0] = [new Option(‘研究方向‘,‘-1‘)];
arr[1] = [new Option(‘欧洲英语‘,‘e1‘),new Option(‘美国英语‘,‘e2‘)];
arr[2] = [new Option(‘网格计算‘,‘c1‘),new Option(‘图形学‘,‘c2‘),new Option(‘文字学‘,‘c2‘)];
$(‘s2‘).innerHTML = ‘‘;
for(var i = 0 ; i < arr[index].length ; ++i){
$(‘s2‘).options[i] = arr[index][i];
}
}
</script>
</head>
<body style="font-size: 30px;">
<div id="d1">
<div id="d1_head">
专业选择
</div>
<div id="d1_content">
<form>
<select name="s1" id="s1" style="width: 120px;"
onchange="f17(this.selectedIndex);">
<option value="-1">
--专业--
</option>
<option value="english">
英语
</option>
<option value="computer">
计算机
</option>
</select>
<select name="s2" id="s2" style="width: 120px;">
<option value="-1">
--研究方向--
</option>
</select>
<input type="submit" value="确认" />
</form>
</div>
</div>
</body>
</html>myjs.js
function $(id){
return document.getElementById(id);
}prototype.js的下载链接：http://download.csdn.net/detail/caihongshijie6/5106001
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
