javascript应用2
日期插件的应用：{
?? <script?type="text/javascript"?src="../js/WdatePicker.js"></script>
??</head>
??
??<body>
?? <input?id="birthday"?type="text"?onClick="WdatePicker()"/>
?? <hr>
?? <input?id="aaaa"?type="text"?readonly/>
<img?onclick="WdatePicker({el:$dp.$('aaaa')})"?src="../js/skin/datePicker.gif"?width="16"?height="22"?align="absmiddle">
?? ??</body>
}
表单的三种提交方式：{
??<script?type="text/javascript">
function?testButton(){
var?email?=?document.getElementById("email").value;
var?pwd?=?document.getElementById("pwd").value;
var?flag?=?true;
if(email?==?""){
flag?=?false;
document.getElementById("emailError").innerHTML?=?"请填写邮箱";
}
if(pwd?==?""){
flag?=?false;
document.getElementById("pwdError").innerHTML?=?"请填写密码";
}
if(flag){
document.loginForm.submit();
}
}
function?checkAll(){
var?email?=?document.getElementById("email").value;
var?pwd?=?document.getElementById("pwd").value;
var?flag?=?true;
if(email?==?""){
flag?=?false;
document.getElementById("emailError").innerHTML?=?"请填写邮箱";
}
if(pwd?==?""){
flag?=?false;
document.getElementById("pwdError").innerHTML?=?"请填写密码";
}
return?flag;
}
</script>
??</head>
??
??<body>
?? <form?action="http://www.baidu.com"?method="post"?name="loginForm"?onsubmit="return?checkAll()">
?? 邮箱?:
?? <input?type="text"?name="email"?id="email"/><span?id="emailError"></span><br>
?? 密码?:
?? <input?type="password"?name="pwd"?id="pwd"/><span?id="pwdError"></span><br>
?? <input?type="button"?value="登录1"?onclick="testButton()"/>
?? <input?type="submit"?value="登录2"/>
?? <input?type="submit"?value="登录3"?onclick="return?checkAll()"/>
?? </form>
??</body>
}
获取结点的方式：{
??<script?type="text/javascript">
/*
?*?直接获取节点的三种方式
?*?1.通过元素(节点)id属性来获取??即document.getElementById()???通用方式
?*?2.通过元素(节点)name属性值来获取name属性值相同的节点组成的集合??注意：并不是所有的节点都有name属性
?*?3.通过元素(节点)的标签名称来获取?该标签的所有节点组成的集合?
?*/
function?testMethod(){
var?div?=?document.getElementsByTagName("div")[0];
alert(div.innerHTML);
}
function?testChildMethod(){
var?form?=?document.getElementById("firstForm");
var?strs?=?form.childNodes;//得到form表单的子节点???注意和elements的属性区别
/*for?(?var?i?=?0;?i?<?strs.length;?i++)?{
alert(strs[i].nodeName?+?"----"?+?strs[i].nodeValue);
}*/
var?first?=?form.firstChild;//第一个子节点可以直接获取
var?last?=?form.lastChild;//最后一个子节点也可以直接获取
/*
?*?nodeName属性?如果是文本节点返回的#text?如果是元素节点返回的是标签的名称
?*?nodeValue属性?如果是文本节点返回的是文本的内容??如果是元素节点返回的是null
?*/
//alert(first.nodeName?+?"---"?+first.nodeValue);
//alert(last.nodeName?+?"---"?+last.nodeValue);
//var?body?=?form.parentNode;//可以得到父节点
//alert(body.nodeName);
var?email?=?document.getElementById("email");
var?next?=?email.nextSibling;//下一个节点
var?prev?=?email.previousSibling;//上一个节点
alert(next.nodeName?+?"?--next--?"?+?next.nodeValue);
alert(prev.nodeName?+?"?--prev--?"?+?prev.nodeValue);
}
</script>
??</head>
??
??<body>
?? <form?action=""?method="get"?id="firstForm">
?? 邮箱?:
?? <input?type="text"?name="email"?id="email"/><br>
?? 密码?:
?? <input?type="password"?name="pwd"?id="pwd"/><br>
?? <input?type="submit"?value="登录"/></form>
?? <hr>
?? <div>
?? 今天是星期五???生病的同学赶紧趁着周末养好病
?? </div>
?? <hr>
?? <input?type="button"?value="直接获得节点"?onclick="testMethod()">
?? <input?type="button"?value="间接获取节点"?onclick="testChildMethod()">
??</body>
}
子节点的操作：{
???<script?type="text/javascript">
function?testAppendChild(){
/*var?input?=?document.createElement("input");//<input/>
input.type?=?"text";//<input?type='text'/>
input.name?=?"email";//<input?type='text'?name='email'/>
input.value?=?"lishimin@126.com";//<input?type='text'?name='email'?value='lishimin@126.com'/>
*/
var?div?=?document.createElement("div");
div.id?=?"fifth";
div.align?=?"center";
div.style.color?=?"blue";
div.style.fontSize?=?"50px";
div.innerHTML?=?"代沟??绝对是代沟";
var?parent?=?document.getElementById("first").parentNode;//得到父节点
parent.appendChild(div);//通过父节点添加子节点
}
function?testInsertBefore(){
var?div?=?document.createElement("div");
div.id?=?"fifth";
div.align?=?"center";
div.style.color?=?"green";
div.style.fontSize?=?"50px";
div.innerHTML?=?"跳跃性的思维是值得鼓励的?但是?要有一定的限制";
var?third?=?document.getElementById("third");
third.parentNode.insertBefore(div,?third);
}
function?testReplaceChild(){
var?div?=?document.createElement("div");
div.id?=?"fifth";
div.style.color?=?"orange";
div.style.fontSize?=?"50px";
div.innerHTML?=?"神马都是浮云";
var?fourth?=?document.getElementById("fourth");
fourth.parentNode.replaceChild(div,?fourth);
}
function?testRemoveChild(){
var?fourth?=?document.getElementById("fourth");
fourth.parentNode.removeChild(fourth);
}
</script>
??</head>
??
??<body>
?? <div?id="first"?style="color:?red;font-size:?25px;font-weight:?bold;">
?? 大家好才是真的好
?? </div>
?? <div?id="second"?style="color:?red;font-size:?25px;font-weight:?bold;">
?? 一切皆有可能
?? </div>
?? <div?id="third"?style="color:?red;font-size:?25px;font-weight:?bold;">
?? 我选择?我喜欢
?? </div>
?? <div?id="fourth"?style="color:?red;font-size:?25px;font-weight:?bold;">
?? 飞一般的感觉
?? </div>
?? <hr>
?? <input?type="button"?value="添加子节点"?onclick="testAppendChild()">
?? <input?type="button"?value="指定位置前添加子节点"?onclick="testInsertBefore()">
?? <input?type="button"?value="替换子节点"?onclick="testReplaceChild()">
?? <input?type="button"?value="移除子节点"?onclick="testRemoveChild()">
??</body>
}
Div的隐藏展开、刷新当前页面：{
???<script?type="text/javascript">
/*
?*?确定删除后链接到百度
?*/
function?deleteNews(){
if(confirm("删除后不能恢复,确认删除?")){
window.location.href?=?"http://www.baidu.com";//就相当于html中的点击超链接直接跳转
}
}
function?testMethod(){
document.getElementById("first").style.display?=?"block";
//alert(location);
}
function?firstMethod(){
window.location.reload();//刷新当前页面
}
</script>
??</head>
??
??<body>
<input?type="checkbox"?name="news"?value="1"/>第一封信?<a?href="javascript:void(0)"?onclick="deleteNews(1)">删除</a><br>
<input?type="checkbox"?name="news"?value="2"/>第二封信?<a?href="javascript:void(0)">删除</a><br>
<input?type="checkbox"?name="news"?value="3"/>第三封信?<a?href="javascript:void(0)">删除</a><br>
<hr>
<div?style="color:?red;display:?none"?id="first">
姚明退役了?但是影响力依然存在
</div>
<input?type="button"?value="显示"?onclick="testMethod()">
<hr/>
<input?type="button"?value="刷新当前页面"?onclick="firstMethod()">
??</body>
}
<!--EndFragment-->