- 浏览: 57420 次
- 来自: 北京
最新评论
-
泛泛evil:
总结的很好,谢谢分享
JavaScript -
wanxkl:
哇!总结的太好了。。凤哥哥,你好强大啊。。请问您跟凤姐什么关系 ...
css应用
日期插件的应用:{
<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-->发表评论
-
lucene3.0 例一
2012-09-11 20:18 652package com.lucene;import java. ... -
lucene3.0
2012-09-11 20:15 870全文搜索 核心:创建索引——查询索引--分词器 索引引擎: ... -
分布式存储(转载)
2012-06-05 15:42 1204L1、HTML静态化其实大家都知道,效率最高、消耗最小的 ... -
java设计原则
2012-04-05 16:50 825原则1:DRY(Don't repeat ... -
java静态、动态代理
2012-04-04 18:51 849JAVA的动态代理 代理模式 代理模式是常用的java设计模式 ... -
Hibernate声明事务
2011-09-17 16:25 897事务处理 第一种方式: 首先配置datasoure: ... -
javascript应用3
2011-09-10 15:14 953打开一个新页面:{ <script t ... -
javascript应用1
2011-09-10 15:00 972javascript {<!-- 1.j ... -
css应用
2011-09-10 14:59 897CSS 本章目标 1、CSS的定义、优势 2、css的基 ... -
Html
2011-09-10 14:56 923HTML 超链接:{ <a href=”http:/ ... -
jsp、el、jstl.doc
2011-09-10 14:53 1325serlvet和jsp区别和联系 jsp从本质上讲也是s ... -
Jdbc
2011-09-10 14:49 925jdbc操作数据库插入、更新、删除、查找 mysql数据 ... -
文件上传步骤
2011-09-10 14:47 760文件上传的简单方法:(原理性的实验) 1. <b ... -
中文乱码问题解决
2011-09-10 14:43 7521. post方式提交的数据 采用request.setCha ... -
事务传播特性与隔离级别
2011-09-10 14:38 797事务传播特性了解事务的几种传播特性 ... -
监听器
2011-09-10 14:36 893监听器概述 1.Listener是Servlet的监听器 ... -
过滤器
2011-09-10 14:35 12461. Servlet过滤器基础 Servlet过滤器是Se ... -
web编程常用配置2
2011-09-10 14:35 712c3p0.jar:C3PO是一个数据库连接池,Hibern ... -
web编程常用配置1
2011-09-10 14:33 983mysql数据库jdbc驱动 jdbcDriver = co ... -
sql练习
2011-09-10 14:28 22671.oracle数据库启动的服 ...
相关推荐
JavaScript是一种广泛应用于网页和网络应用的脚本语言,它由Netscape公司的Brendan Eich在1995年发明,起初是为了增加网页的交互性。JavaScript与Java虽然名字相似,但两者并无直接关系,JavaScript是基于ECMAScript...
在这个“经典的JavaScript应用!”的资源包中,我们可能会发现一系列关于JavaScript实践的经典案例和教程,对于学习者和开发者来说,这是一个宝贵的资料库。 首先,JavaScript的核心概念包括变量、数据类型、控制...
JavaScript是一种广泛应用于网页和网络应用的轻量级解释性编程语言,主要负责为网页添加交互性和动态功能。Ajax,全称Asynchronous JavaScript and XML(异步JavaScript和XML),是一种创建动态网页的技术,允许在不...
这本书——"JavaScript应用程序经典实例全书",提供了丰富的实例源码,旨在帮助读者深入理解和应用JavaScript技术。以下是一些可能涵盖的知识点: 1. **基础语法**:JavaScript的基础包括变量声明(var、let、const...
38种JavaScript应用实例的详解,包括自动滚屏、页面打开时的百叶窗效果、使用JavaScript传递页面参数、设置指定网页为主页、用JavaScript随机修改页面的标题、在网页中动态添加Script脚本、页面自动刷新、页面的后退...
2. **动画与游戏循环**:JavaScript能够通过定时器(如`setInterval`或`requestAnimationFrame`)来创建平滑的动画效果。游戏循环是游戏运行的核心,它不断地更新游戏状态并重绘游戏画面。 3. **DOM操作**:在网页...
JavaScript应用开发实践指南
【Javascript搭建企业级Web应用】 企业级Web应用通常是指那些具备高可用性、可扩展性和安全性的复杂系统,用于支持大型企业的核心业务流程,如CRM(客户关系管理)、ERP(企业资源规划)和物流系统等。这些应用往往...
资源名称:Javascript应用程序经典实例 内容简介: 懂得Javascript语法是一回事,能够创建有用的应用程序就是另一回事了。虽然市面上有成打的Javascript图书教你怎么做,但实际上...
JavaScript应用 注册验证 列表框内容的添加 加法练习 表格背景 表格行的颜色
通过由浅入深的讲解,你将学会如何构建具有丰富交互以及优雅体验的JavaScript应用,书中同样提供了大量的示例代码,可以帮助你更深入的理解很多重要的概念。 揭开MVC的神秘面纱,教你如何设计合理的架构以及处理...
使用 JSEclipse,JavaScript 程序员现在有了自己的 Eclipse 插件,该插件将提供许多重要功能来辅助开发 JavaScript 应用程序。像 Eclipse 多年来为 Java™ 语言和其他语言提供了易用性一样,JSEclipse 为 JavaScript...
作者Alex MacCaw,作为一名Ruby/JavaScript程序员,分享了他的见解和经验,这些对于任何想要提升JavaScript应用开发技能的工程师来说,都是非常宝贵的资源。 此外,书中还讨论了软件测试和部署调试,这是确保应用...
这篇关于“JavaScript应用软件”的讨论将深入探讨JavaScript在实际应用中的各个方面,包括其核心概念、主要用途、框架与库、以及如何利用JavaScript创建各种类型的Web应用程序。 一、JavaScript基础 JavaScript语法...
编写JavaScript应用程序.pdf JavaScript应用程序是指在客户机端执行的代码,可以处理复杂的数据结构,并在不需要从服务器端请求新的页面时显示多个输出画面。JavaScript提供了许多有用的功能来支持基于浏览器的应用...
JavaScript应用实例-bmob用户验证demo.js
JavaScript应用实例-download.js
第6节 JavaScript数组及应用.rar第6节 JavaScript数组及应用.rar第6节 JavaScript数组及应用.rar第6节 JavaScript数组及应用.rar第6节 JavaScript数组及应用.rar第6节 JavaScript数组及应用.rar第6节 JavaScript数组...
第7节 JavaScript函数及应用.rar第7节 JavaScript函数及应用.rar第7节 JavaScript函数及应用.rar第7节 JavaScript函数及应用.rar第7节 JavaScript函数及应用.rar第7节 JavaScript函数及应用.rar第7节 JavaScript函数...
掌握变量、数据类型、控制结构、函数、对象和原型链等基本概念是构建任何JavaScript应用的基础。 2. DOM操作:文档对象模型(DOM)是HTML和XML文档的结构表示。JavaScript通过DOM API可以对网页内容进行增删改查,...