----------------------------------------------------------------------------------------------------------------------------------------------------------------
第四天
---------------------------------------------------------------------------------------------
<html>
<head>
<title>document操作元素的属性</title>
<meta charset="UTF-8"/>
<script type="text/javascript">
/*
* document对象操作元素的属性:
* 1、获取元素对象
* 间接方式和直接方式
* 2、操作元素属性
* 固有属性
* 获取元素的属性：元素对象名.固有属性名
* 修改元素的属性值：元素对象名.固有属性名="属性值"
* 自定义属性
获取自定义属性值：对象名.getAttribute("自定义属性键名");
* 如果使用此种方式获取固有属性，则拿到的是默认值
* 修改自定属性值： 对象名.setAttribute("自定属性键名","要修改的值");
*
*
* */
function test_oper_Param(){
//获取元素对象
var uname=document.getElementById("uname");
//获取元素的属性
alert(uname.type+":"+uname.id+":"+uname.name+":"+uname.value+":"+uname.abc);
alert(uname.getAttribute("abc"));//使用getAt
alert(uname.getAttribute("value"));//使用getAttribute()获取固有属性值，返回默认值
uname.setAttribute("abc","456");//使用setAttribute()修改自定义属性值
alert(uname.getAttribute("abc"));
//修改元素的属性：
uname.type="button";
uname.value="50点一下";
}
</script>
</head>
<body>
<h3>document操作元素的属性</h3>
<input type="button" name="" id="" value="测试操作元素属性" onclick="test_oper_Param();"/>
<hr />
<input type="text" name="uname" id="uname" value="zhangsan" abc="123"/>
</body>
</html>
---------------------------------------------------------------------------------------------
<html>
<head>
<title>操作元素的内容和样式</title>
<meta charset="UTF-8"/>
<script type="text/javascript">
/*
* 操作元素的内容:
* innerHTML:
* 获取元素内容的时候会将HTML的标签获取到
* 在修改元素内容的时候，HTML标签会被解析执行
* innerText:
* 获取元素内容的时候，获取的是文本内容，不会获取到HTML的标签元素
* 在修改元素内容的时候，HTML标签不会被解析执行，会当成普通文本输出
*
* 操作元素的样式：
* style:
* 对象名.style.CSS属性名="属性值";
* className:
* 对象名.className="类选择器名";
*
* */
function test_content(){
var showdiv=document.getElementById("showdiv");
alert(showdiv.innerHTML);//获取元素内容，包括HTML标签元素
//修改元素内容，HTML元素会被解析执行
showdiv.innerHTML="<font color='darkgoldenrod'>你这个怕死的叛徒，要走你先走，人在塔在</font>"
}
function test_InnerText(){
var div01=document.getElementById("div01");
alert(div01.innerText);//获取元素内容，但是不包括HTML标签
//修改元素内容，HTML元素标签不会被解析执行
div01.innerText="<font color='red'>你先去，我们的人马上就到。。</font>"
}
/*===================================================================================================*/
function test_Style(){
var div02=document.getElementById("div02");
div02.style.width="300px";
div02.style.height="300px";
div02.style.border="solid 1px red";
div02.style.backgroundColor="gray";
}
function test_class(){
var div02=document.getElementById("div02");
div02.className="common";
}
</script>
<style type="text/css">
#showdiv{
border: solid 1px;
width: 300px;
height: 300px;
margin-bottom: 20px;
}
#div01{
border: solid 1px;
width: 300px;
height: 300px;
}
.common{
border: solid 1px;
width: 300px;
height: 300px;
margin-bottom: 20px;
background-color: #8A2BE2;
}
</style>
</head>
<body>
<h3>操作元素的内容和样式</h3>
<input type="button" id="" value="测试InnerHTML" onclick="test_content();" />
<input type="button" id="" value="测试InnerText" onclick="test_InnerText();" />
<hr />
<div id="showdiv">
<h4>族长，火族大举来犯，我们赶紧跑吧。。。</h4>
</div>
<div id="div01">
<h4>大王，前面有敌人，要不要干掉</h4>
</div>
<hr />
<h3>操作元素的样式</h3>
<input type="button" name="" id="" value="测试操作样式---style" onclick="test_Style();" />
<input type="button" name="" id="" value="测试操作样式---className" onclick="test_class();" />
<div id="div02">
现在的国产电视剧都是怎么了，一言不合就是50集;
</div>
</body>
</html>
--------------------------------------------------------------------------------------------------
<html>
<head>
<title>操作元素的文档结构</title>
<meta charset="UTF-8"/>
<script type="text/javascript">
/*
* 操作元素的文档结构：
* 使用innerHTML：
* showdiv.innerHTML=showdiv.innerHTML+"HTML元素";
* removeChild(HTML元素对象名)------移除指定的子元素
*
* onclick='test_del(this)'--------this代表的是当前HTML元素对象
*
* */
function test_upLoad(){
var showdiv=document.getElementById("showdiv");
showdiv.innerHTML=showdiv.innerHTML+"<div><input type='file' value='请选择上传的文件' />"+
"<input type='button' value='删除' onclick='test_del(this)'/></div>";
}
function test_del(btn){
var showdiv=document.getElementById("showdiv");
var parentCode=btn.parentNode;
showdiv.removeChild(parentCode);
}
</script>
<style type="text/css">
div{
border:solid 1px;
margin: 5px;
}
#showdiv{
width: 300px;
}
</style>
</head>
<body>
<h3>操作元素的文档结构</h3>
<input type="button" name="" id="" value="上传" onclick="test_upLoad();" />
<hr />
<div id="showdiv">
</div>
</body>
</html>
----------------------------------------------------------------------------------------------
<html>
<head>
<title>操作元素的文档结构2</title>
<meta charset="UTF-8"/>
<script type="text/javascript">
/*
操作元素的文档结构2：
document.createElement("标签名")------创建一个指定的HTML元素对象
* showdiv.appendChild(HTML元素对象名)----在指定的元素中添加指定的HTML元素
* */
function test_upLoad(){
var showdiv=document.getElementById("showdiv");
//创建上传的input对象
var inp=document.createElement("input");
inp.type="file";
var btn=document.createElement("input");
btn.type="button";
btn.value="删除";
btn.onclick=function(){
showdiv.removeChild(inp);
showdiv.removeChild(btn);
showdiv.removeChild(br);
}
var br=document.createElement("br");
showdiv.appendChild(inp);
showdiv.appendChild(btn);
showdiv.appendChild(br);
}
</script>
</head>
<body>
<h3>操作元素的文档结构2</h3>
<input type="button" id="" value="上传" onclick="test_upLoad();" />
<hr />
<div id="showdiv">
</div>
</body>
</html>
----------------------------------------------------------------------------------------------
form表单
---------------------------------------------------------------------------------------------
<html>
<head>
<title>js_操作form学习</title>
<meta charset="UTF-8"/>
<script type="text/javascript">
/*
js操作form表单学习
1、获取表单对象：
document.getElemetById("form表单的id");
document.表单名
* 2、操作表单的属性：
* fm.action="" ----设置提交路径
* fm.method="" ----设置提交方式
* 3、方法
* submit()---------使普通的按钮具备提交功能，很常用
* reset()----------重置表单
* 特殊：
* fm.elements-----获取的是表单元素，也就用户能点能写的，不包括普通的HTML元素，例如div,h3
* object HTMLFormControlsCollection
*
*
* fm.elements.length----获取表单元素个数
* 或者写成 fm.length
*
* */
function test_form(){
//获取元素对象
var fm=document.getElementById("fm");
//alert(fm);
var frm=document.frm;
//alert(frm);
//alert(fm===frm);
//操作form的属性
alert(fm.action+":"+fm.method+":"+fm.name);
fm.method="get";
alert(fm.elements);
//form的常用方法
//fm.submit();
//fm.reset();
}
</script>
</head>
<body>
<h3>js操作form学习</h3>
<input type="button" id="" value="测试form" onclick=" test_form();" />
<hr />
<form action="#" method="post" id="fm" name="frm">
<div id="">
用户名： <input type="text" name="uname" id="uname" value="zhangsan" /><br /><br />
密码： <input type="password" name="pwd" id="pwd" value="" /><br /><br />
<input type="submit" value="提交"/>
</div>
</form>
</body>
</html>
-------------------------------------------------------------------------------------------------------
<html>
<head>
<title>form表单域通用属性讲解</title>
<meta charset="UTF-8"/>
<script type="text/javascript">
/*
js操作form表单域：
获取表单域元素对象：
var uname=document.getElementById("name");
* var uname1=document.frm.元素的name或者id;
*
* 通用属性:
* readOnly:只读，不可以修改数据。但是会提交
* disabled:关闭，置灰。不能写不能提交
* 方法:
* focus() 获取焦点
* blur() 失去焦点
* */
function test_F(){
var uname=document.getElementById("name");
var uname1=document.frm.uname;
//alert(uname1);
//form表单域通用属性
var pwd=document.frm.pwd;
pwd.disabled="";
//方法
uname1.focus();//获取焦点
uname1.blur();//失去焦点
}
</script>
</head>
<body>
<h3>form表单域通用属性讲解</h3>
<input type="button" value="测试form通用属性" onclick="test_F();"/>
<hr />
<form action="" method="get" id="fm" name="frm">
用户名：<input type="text" name="uname" id="name" value="zhangsan" />
密码： <input type="password" name="pwd" id="pwd" value="123" disabled="disabled" />
<input type="submit" value="提交" /><br /><br />
<input type="button" id="" value="注册" disabled="disabled" />
</form>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------------------------------
第五天
------------------------------------------------------------------------------------
cc<html>
<head>
<title>js多选框和下拉框操作</title>
<meta charset="UTF-8"/>
<script type="text/javascript">
/*
js操作多选框：
1、使用document.getElementsByName("多选框的name");
2、使用for循环遍历多选框对象，然后使用checked属性来进行校验是否选中
*
* js操作单选下拉框：
* 1、直接方式：
* var sel=document.getElementById("下拉框id");
* sel.value
* 2、间接方式：
* 首先获取所有的option对象----sel.options
* 遍历option对象集合，使用selected属性进行检验是否选中
* js操作多选下拉框：
* 只能使用间接获取的方式，直接方式会漏值js
* */
//播放
function test_Play(){
var music=document.getElementsByName("music");
for(var i=0;i<music.length;i++){
if(music[i].checked){
alert(music[i].value);
}
}
}
//反选
function test_fx(){
var music=document.getElementsByName("music");
for (var i=0;i<music.length;i++) {
music[i].checked=!music[i].checked;
}
}
//全选
function test_ChooseAll(){
var music =document.getElementsByName("music");
var num=0;
for(var i=0;i<music.length;i++){
if(music[i].checked){
num++;
}
}
if(num<music.length){
for(var i=0;i<music.length;i++){
music[i].checked=true;
//num=music.length;
}
}else{
for(var i=0;i<music.length;i++){
music[i].checked=false;
}
}
}
//单选
function test_radio(){
var sex=document.getElementsByName("sex");
for (var i=0;i<sex.length;i++) {
if(sex[i].checked){
alert(sex[i].value)
}
}
}
//下拉框
function test_sel(){
//直接获取
var sel=document.getElementById("sel");
//alert(sel.value);
//间接获取
var op=sel.options;
//alert(op);
for(var i=0;i<op.length;i++){
if(op[i].selected){
alert(op[i].value+":"+op[i].text);
}
}
}
</script>
</head>
<body>
<h3>js多选框和下拉框操作</h3>
<hr />
<input type="checkbox" name="music" id="" value="0" />斑马斑马<br />
<input type="checkbox" name="music" id="" value="1" />当<br />
<input type="checkbox" name="music" id="" value="2" />丑八怪<br />
<input type="checkbox" name="music" id="" value="3" />绅士<br />
<input type="checkbox" name="music" id="" value="4" />甩葱歌<br />
<input type="checkbox" name="music" id="" value="5" />演员<br />
<input type="checkbox" name="music" id="" value="6" />五环之歌<br />
<hr />
<input type="button" id="" value="播放" onclick="test_Play();"/>
<input type="button" id="" value="反选" onclick="test_fx();"/>
<input type="button" id="" value="全选" onclick="test_ChooseAll();"/>
<hr />
<input type="button" id="" value="测试单选" onclick="test_radio();"/>
<br />
男：<input type="radio" name="sex" id="sex" value="0" />
女：<input type="radio" name="sex" id="sex" value="1" />
<hr />
<select name="sel" id="sel" onchange="test_sel();">
<option value="0">英语四级</option>
<option value="1">普通话证</option>
<option value="2">计算机四级</option>
<option value="3">会计证</option>
<option value="4">电焊证</option>
<option value="5">驾照</option>
</select>
<select name="sel" id="sel" onchange="" multiple="multiple">
<option value="0">滴滴</option>
<option value="1">火车</option>
<option value="2">动车</option>
<option value="3">高铁</option>
<option value="4">飞机</option>
<option value="5">轮船</option>
</select>
</body>
</html>
------------------------------------------------------------------------------------------------
<html>
<head>
<title>js的简单总结</title>
<meta charset="UTF-8"/>
</head>
<body>
<h3>js的简单总结</h3>
<ol>
<li>js的介绍及特点</li>
<li>js的引入</li>
<li>js的变量--var及一些特殊的</li>
<li>js的运算符--==和===</li>
<li>js的逻辑结构---和java一致</li>
<li>js的数组---length属性及数组的声明及数组的方法</li>
<li>js的函数---函数的声明 及函数也是对象及函数之间的相互调用和传参和返回值</li>
<li>js的常见对象及方法----eval()</li>
<li>js的事件机制</li>
<li>event对象</li>
<li>bom浏览器模型---window对象的方法和属性</li>
<li>document对象-----5个内容</li>
<li>js操作form</li>
<li>js中form的通用属性和方法</li>
<li>js操作下拉框及多选框</li>
<li>js中的form表单校验</li>
</ol>
</body>
</html>
--------------------------------------------------------------------------------------------------------
<html>
<head>
<title>js中的form表单验证</title>
<meta charset="UTF-8"/>
<script type="text/javascript">
//生成验证码
function CreateCode(){
var code=parseInt(Math.random()*9000+1000);//动态随机生成四位整数
var span=document.getElementById("codeSpan");//获取span对象
span.innerHTML=code; //将验证码放进span中
span.style.backgroundColor="darkslategrey"
span.style.fontSize="25px";
}
//校验用户名
function check_uname(){
var id="uname";
var reg=/^[\u4e00-\u9fa5]{2,4}$/;
return check_filed(id,reg);
/*var uname=document.getElementById("uname");
var val=uname.value;
var span=document.getElementById("unameSpan");
var reg=/^[\u4e00-\u9fa5]{2,4}$/;
if(val=="" || val==null ){
span.innerHTML=uname.alt+"不能为空";
span.className="color";
//alert("用户名不能为空");
}else if(reg.test(val)){
span.innerHTML="用户名合法";
span.className="common";
//alert("用户名合法")
}else{
span.innerHTML="用户名不合法";
span.className="color";
//alert("用户名不合法");
} */
}
//校验密码
function check_pwd(){
var id="pwd";
var reg=/^[\d\w]{6,8}$/;
return check_filed(id,reg)&&check_pwd2();
/*var pwd=document.getElementById("pwd");
var val=pwd.value;
var reg=/^[\d\w]{6,8}$/;
var span=document.getElementById("pwdSpan");
if(val=="" || val==null){
span.innerHTML="密码不能为空";
span.className="color";
}else if(reg.test(val)){
span.innerHTML="密码合法";
span.className="common";
}else{
span.innerHTML="密码不合法";
span.className="color";
}*/
}
//校验确认密码
function check_pwd2(){
var pwd=document.getElementById("pwd");
var pwd2=document.getElementById("pwd2");
var span=document.getElementById("pwd2Span");
if(pwd2.value=="" || pwd2.value==null){
span.innerHTML="确认密码不能为空";
span.className="color";
return false;
}else if(pwd2.value==pwd.value){
span.innerHTML="确认密码OK";
span.className="common";
return true;
}else{
span.innerHTML="两次密码不一致";
span.className="color";
return false;
}
}
//校验手机号
function check_phone(){
var id="phone";
var reg=/^1[34578]\d{9}$/;
return check_filed(id,reg);
}
//校验邮箱
function check_mail(){
var id="mail";
var reg=/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
return check_filed(id,reg);
}
//校验籍贯
function check_address(){
var address=document.getElementById("address");
var span=document.getElementById("addressSpan");
if(address.value=="0"){
span.innerHTML="籍贯不能为请选择";
span.className="color";
return false;
}else{
span.innerHTML="籍贯选择成功";
span.className="common";
return true;
}
}
//校验爱好
function check_fav(){
var fav=document.getElementsByName("fav");
var span=document.getElementById("favSpan");
for(var i=0;i<fav.length;i++){
if(fav[i].checked){
span.innerHTML="爱好选择成功";
span.className="common";
return true;
}
}
span.innerHTML="爱好至少选择一个";
span.className="color";
return false;
}
//校验个人介绍
function check_intro(){
var intro=document.getElementById("intro");
var span=document.getElementById("introSpan");
var val=intro.value;
if(val=="" || val==null){
span.innerHTML="个人介绍不能为空";
span.className="color";
return false;
}else if(val.length<11){
span.innerHTML="个人介绍OK";
span.className="common";
return true;
}
}
//校验验证码；
function check_code(){
var usercode=document.getElementById("code").value;
var code=document.getElementById("codeSpan").innerHTML;
var span=document.getElementById("showSpan");
if(usercode==""|| usercode==null){
span.innerHTML="验证码不能为空";
span.className="color";
return false;
}else if(usercode == code){
span.innerHTML="验证码OK";
span.className="common";
return true;
}else{
span.innerHTML="验证码错误";
span.className="color";
return false;
}
}
//校验是否同意公司协议
function check_agree(){
var agree=document.getElementById("agree");
var sub=document.getElementById("sub");
sub.disabled=!agree.checked;
}
/*封装：
相同的保留，不同的传参
* */
function check_filed(id,reg){
var v=document.getElementById(id);
var val=v.value;
var span=document.getElementById(id+"Span");
if(val=="" || val==null){
span.innerHTML=v.alt+"不能为空";
span.className="color";
return false;
}else if(reg.test(val)){
span.innerHTML=v.alt+"合法";
span.className="common";
return true;
}else{
span.innerHTML=v.alt+"不合法";
span.className="color";
return false;
}
}
/*在提交的时候再次校验所有*/
function check_all(){
check_uname();
check_pwd();
check_phone();
check_mail();
check_address();
check_fav();
check_intro();
check_code();
return check_uname()&&check_pwd()&&check_phone()
&&check_mail()&&check_address()&&check_fav()&&check_intro()&&check_code();
}
</script>
<style type="text/css">
body{
background-color: #eee;
font-family: 萝莉体;
}
#showdiv{
width: 500px;
background-color:;
border: solid 1px;
border-radius: 8px;
text-align: center;
margin: auto;
margin-top: 50px;
}
table{
width: 500px;
height: 500px;
padding: 20px;
}
.color{
color: red;
}
.common{
color: darkgoldenrod;
}
</style>
</head>
<body onload="CreateCode();">
<form action="#" method="get" onsubmit="return check_all();">
<div id="showdiv">
<table>
<tr>
<td>用户名：</td>
<td>
<input type="text" name="uname" id="uname" value="张三" onblur="check_uname();" alt="用户名"/>
<span id="unameSpan">*用户名为2到4位的汉字</span>
</td>
</tr>
<tr>
<td>密码：</td>
<td>
<input type="password" name="pwd" id="pwd" value="" onblur="check_pwd();" alt="密码"/>
<span id="pwdSpan">*6到8位的字母数字组合</span>
</td>
</tr>
<tr>
<td>确认密码:</td>
<td>
<input type="password" name="pwd2" id="pwd2" value="" onblur="check_pwd2();"/>
<span id="pwd2Span"></span>
</td>
</tr>
<tr>
<td>手机号:</td>
<td>
<input type="text" name="phone" id="phone" value="" alt="手机号" onblur="check_phone();" />
<span id="phoneSpan"></span>
</td>
</tr>
<tr>
<td>邮箱:</td>
<td>
<input type="text" name="mail" id="mail" value="" alt="邮箱" onblur="check_mail();"/>
<span id="mailSpan"></span>
</td>
</tr>
<tr>
<td>性别:</td>
<td>
男: <input type="radio" name="sex" id="sex" value="0" checked="checked"/>
女: <input type="radio" name="sex" id="sex" value="1" />
</td>
</tr>
<tr>
<td>籍贯:</td>
<td>
<select name="address" id="address" onchange="check_address();">
<option value="0">--请选择--</option>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">广州</option>
</select>
<span id="addressSpan"></span>
</td>
</tr>
<tr>
<td>爱好:</td>
<td>
<input type="checkbox" name="fav" id="fav" value="0" onclick="check_fav();"/>打篮球
<input type="checkbox" name="fav" id="fav" value="1" onclick="check_fav();"/>睡觉
<input type="checkbox" name="fav" id="fav" value="2" onclick="check_fav();"/>吃<br />
<input type="checkbox" name="fav" id="fav" value="3" onclick="check_fav();"/>LOL
<input type="checkbox" name="fav" id="fav" value="4" onclick="check_fav();"/>打麻将
<input type="checkbox" name="fav" id="fav" value="5" onclick="check_fav();"/>斗地主
<span id="favSpan"></span>
</td>
</tr>
<tr>
<td>个人介绍：</td>
<td>
<textarea name="intro" id="intro" rows="5" cols="30" onblur="check_intro();"></textarea>
<span id="introSpan"></span>
</td>
</tr>
<tr>
<td>验证码：</td>
<td>
<input type="text" name="code" id="code" value="" onblur="check_code();"/>
<span id="codeSpan" onclick="CreateCode();"></span> <span id="showSpan"></span>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="checkbox" id="agree" value="" onclick="check_agree();"/>是否同意本公司的协议
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="确认注册" id="sub" disabled="disabled" />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
-----------------------------------------------------------------------------------------------------------------------------------------
本文详细介绍了JavaScript操作DOM的基本方法，包括元素属性、内容和样式的操作，以及如何通过JS实现表单验证，确保数据的有效性和合法性。
扫一扫
7万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
