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 = "[email protected]";//<input type='text' name='email' value='[email protected]'/>
*/
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-->