克隆复制 cloneNode()
可以复制指定节点,该方法带一个布尔参数来指示在复制时是包含该节点的所有子节点(称为深度复制)还是仅元素本身
<input type="button" value="复制" οnclick="cloneCopy(('p1'),false;"/>
<input type="button" value="深度复制" οnclick="cloneCopy(('p1'),true);"/>
function cloneCopy(nodeId,deep){
var toClone=document.getElementById("nodeId");
var clonednode=toclone.clonenode(deep);
}
var radio1=$("g1").checked;
var radio2=$("g2").checked;
var radio3=$("g3").checked;
if(radio1==true) var gender="男";
else if(radio2==true) var gender="女";
else if(radio3==true) var gender="人妖";
这个是复选框取值
var check1=$("check1").checked;
var check2=$("check2").checked;
var check3=$("check3").checked;
var check4=$("check4").checked;
if(check1==true) var it1="看书 "; else it1="";
if(check2==true) var it2="瑜伽 "; else it2="";
if(check3==true) var it3="上网 "; else it3="";
if(check4==true) var it4="跆拳道"; else it4="";
var select1=$("sanwei1").value;
第二个下拉框
var select2=$("sanwei2").value;
也可以用 $("sanwei1").options[0].value;
表单字段共性
onblur() 失去焦点时触发
onchange() 文本框值改变后,失去焦点时触发
onfocus() 获得焦点时触发
可以复制指定节点,该方法带一个布尔参数来指示在复制时是包含该节点的所有子节点(称为深度复制)还是仅元素本身
<input type="button" value="复制" οnclick="cloneCopy(('p1'),false;"/>
<input type="button" value="深度复制" οnclick="cloneCopy(('p1'),true);"/>
function cloneCopy(nodeId,deep){
var toClone=document.getElementById("nodeId");
var clonednode=toclone.clonenode(deep);
}
复选框和单选框取值
checkbox node.checked; 得到的是一个布尔参数
这个是单选框取值var radio1=$("g1").checked;
var radio2=$("g2").checked;
var radio3=$("g3").checked;
if(radio1==true) var gender="男";
else if(radio2==true) var gender="女";
else if(radio3==true) var gender="人妖";
这个是复选框取值
var check1=$("check1").checked;
var check2=$("check2").checked;
var check3=$("check3").checked;
var check4=$("check4").checked;
if(check1==true) var it1="看书 "; else it1="";
if(check2==true) var it2="瑜伽 "; else it2="";
if(check3==true) var it3="上网 "; else it3="";
if(check4==true) var it4="跆拳道"; else it4="";
下拉框取值 .value
第一个下拉框var select1=$("sanwei1").value;
第二个下拉框
var select2=$("sanwei2").value;
也可以用 $("sanwei1").options[0].value;
表单字段共性
onblur() 失去焦点时触发
onchange() 文本框值改变后,失去焦点时触发
onfocus() 获得焦点时触发
注意:onblur()和onchange()的区别,在于后者是先执行
下面这个例子就是如何取表单里的值
<!DOCTYPE html>
<html>
<head>
<title>输入信息</title>
<meta charset="utf-8">
<style type="text/css">
form{
width: 500px;
height: 500px;
background: lightblue;
float: left;
margin-left: 50px;
margin-top: 100px;
}
div{
margin-top: 30px;
}
input[type="text"]{
padding-left: 10px;
}
#id5{
margin-left: 100px;
}
input[type="button"]{
width: 100px;
height: 50px;
font-size: 25px;
background: lightcoral;
}
</style>
</head>
<body>
<form action="#" method="post" id="form1">
<h1>请输入信息</h1>
<div id="id1"><span>姓名:</span><input type="text" size="30" maxlength="25" value="" id="text"/></div>
<div id="id2"><span>性别:</span><input type="radio" name="gender" id="g1" value="男">男</input><input type="radio" name="gender" id="g2" value="女">女</input><input type="radio" name="gender" id="g3" value="人妖">人妖</input></div>
<div id="id3"><span>三围:</span><select id="sanwei1" name="sanwei1">
<option value="tou">头围</option><option value="60cm">60cm</option><option value="50cm">50cm</option><option value="55cm">55cm</option></select>
<select id="sanwei2" name="xiongwei"><option value="xiong">胸围</option><option value="60cm">60cm</option><option value="70cm">70cm</option><option value="80cm">80cm</option>
</select>
<select id="sanwei3" name="sanwei3"><option value="yao">腰围</option><option value="60cm">60cm</option><option value="50cm">50cm</option><option value="55cm">55cm</option></select>
</div>
<div id="id4"><span>你喜欢:</span><input type="checkbox" value="看书" id="check1">看书</input><input type="checkbox" value="瑜伽" id="check2">瑜伽</input><input type="checkbox" value="上网" id="check3">上网</input><input type="checkbox" value="跆拳道" id="check4">跆拳道</input></div>
<div id="id5"><input type="button" value="提交" οnclick="func()" /></div>
</form>
<form action="#" method="post" id="form2">
<h1>请确认信息</h1>
</form>
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
var a=$("form2");
var b=$("form1");
var c=$("text");
function func(){
// 取文本框
var p1=document.createElement("p");
var text=c.value;
var text1=document.createTextNode("姓名:"+text);
p1.appendChild(text1);
a.appendChild(p1);
// 去单选框
var p2=document.createElement("p");
var radio1=$("g1").checked;
var radio2=$("g2").checked;
var radio3=$("g3").checked;
if(radio1==true) var gender="男";
else if(radio2==true) var gender="女";
else if(radio3==true) var gender="人妖";
var text2=document.createTextNode("性别:"+gender);
p2.appendChild(text2);
a.appendChild(p2);
// 去下拉框
var p3=document.createElement("p");
var select1=$("sanwei1").value;
var select2=$("sanwei2").value;
var select3=$("sanwei3").value;
var text4=document.createTextNode("三围:"+"头围 "+select1+" 胸围 "+select2+" 腰围 "+select3);
p3.appendChild(text4);
a.appendChild(p3);
// 去复选框
var check1=$("check1").checked;
var check2=$("check2").checked;
var check3=$("check3").checked;
var check4=$("check4").checked;
if(check1==true) var it1="看书 "; else it1="";
if(check2==true) var it2="瑜伽 "; else it2="";
if(check3==true) var it3="上网 "; else it3="";
if(check4==true) var it4="跆拳道"; else it4="";
var p4=document.createElement("p");
var text3=document.createTextNode("你喜欢:"+it1+it2+it3+it4);
p4.appendChild(text3);
a.appendChild(p4);
}
</script>
</body>
</html>