`
java风
  • 浏览: 56278 次
  • 来自: 北京
社区版块
存档分类
最新评论
  • 泛泛evil： 总结的很好，谢谢分享
    JavaScript
  • wanxkl： 哇！总结的太好了。。凤哥哥，你好强大啊。。请问您跟凤姐什么关系 ...
    css应用

javascript应用2

    博客分类：
  • java
javascript 
阅读更多

日期插件的应用：{

   <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-->
分享到：
| javascript应用1
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics