`
ileson
  • 浏览: 214554 次
  • 性别: Icon_minigender_1
  • 来自: 河南省
社区版块
存档分类
最新评论

项目中 js 备忘

    博客分类:
  • RIA
阅读更多

document.getElementsByName();

document.getElementById();

document.getElementsByTagName()的区别:

document.getElementsByName() 是根据控件名称获取这个控件对象,因为控件名称可以相同,返回的是一个对象数组
document.getElementById() 是根据控件ID获取这个控件对象,因为控件ID唯一,返回的是一个对象
document.getElementsByTagName() 是根据控件TAG获取这个控件对象,返回的是一个对象数组

例如:
HTML中有控件如下:
<input type="radio" id="radio1" checked="checked" name="radiogroup1" />
<input type="radio" id="radio2" name="radiogroup1" />
<input type="radio" id="radio3" name="radiogroup1" />
则:
document.getElementsByName('radiogroup1') 取得的是这三个控件,可以用document.getElementsByName('radiogroup1')[0] 取得的是第一个控件。
document.getElementById('radio1')取得的是第一个控件,
document.getElementsByTagName('input') 取得的是这三个控件,可以用document.getElementsByTagName('input')[0] 取得的是第一个控件。

getElementsByName('delID')返回的是所有名称为'delID'的控件组成的数组,数组就是一种集合。

数组的运用实例:

 

得到一个字符串实例:

至少有一个checkbox 被选中实例:

得到select 框中的有规律值的总和

在页面中新增控件实例:

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>表单验证</title>
<script language="javascript" src="jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/JavaScript">
<!--

//表单验证函数
function check(){
	var msg="以下字段:\n";
	//所有的input 元素,包括:select 、textarea、button.
	$(":input[notnull=notnull]").each(function(i){
		var isNull=$($(":input[notnull=notnull]")[i]).val();
		if(isNull==null||isNull==""){
			msg+=$(this).attr("cname");
			msg+=",";
		}
	
	});
	msg+="\n不能为空!\n--------------------------------\n以下字段:\n"
	//验证数字
	//var reg=/^[1-9]\d*$|^0$/;//注意:故意限制了 0开头的数字。这种格式,如不需要,直接reg=/^\d+$/;
	//var reg = /^\d+(\.\d+)?$/;//小数也算纯数字
	var reg = /^[1-9]\d+(\.\d{2})?$|^0$/;//这个是结合上述两种情况。并小数点后保留两位
	$("input[number=number]").each(function(i){
		var isNum=$($("input[number=number]")[i]).val();//
		if(reg.test(isNum)!=true){
			msg+=$(this).attr("cname");
			msg+=",";
		}
	
	});
	msg+="\n只能为数字!"
	//
	
	alert(msg);
	
}


</script>
</head>

<body>
<form action="" method="get">
姓名:<input name="a" type="text" value="" cname="姓名" ctype="str.4" notnull="notnull"/><br />
编号:<input name="b" type="text" value="" cname="编号" ctype="num.16" notnull="notnull" /><br />
次数:<input name="" type="text" value="" cname="次数" ctype="num.20" number="number" /><br />
单价:<input name="" type="text" value="" cname="单价" ctype="num.20.2" number="number" /><br />
备注:<textarea name="" cols="" rows="" cname="备注" ctype="str.100"  notnull="notnull"></textarea><br />


国家:<select name="" cname="国家" ctype=""  notnull="notnull"></select><br />


<input name="test" type="button" cname="测试" value="测试" onclick="check();"  /><br />
</form>
</body>
</html>
  回车将光标指定到自己设定的input输入框中
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title> 回车将光标定位到指定的位置 </title>
  <meta name="Generator" content="EditPlus">
  <script src="jquery-1.4.2.js" type="text/javascript"></script>
</head>
<script type="text/javascript">
$(function()
        {
            $("#myform input:text").keypress(function(e)
            {
                if (e.which == 13)                         //判断所按是否回车键
                {
                    var inputs = $("#myform :text[tab=tab]");//获取表单中指定的输入框
                    var idx = inputs.index(this);//获取当前焦点输入框所处的位置            
                    if (idx == inputs.length - 1)// 判断是否是最后一个输入框
                    {
                        if (confirm("最后一个输入框已经输入。\n是否提交?"))   //用户确认
                                                        $("#myform").submit();    //提交表单
                         
                    }
                    else
                    {
                        inputs[idx + 1].focus();       //设置焦点
                        inputs[idx + 1].select();       //选中文字
                    }

                    return false;//取消默认的提交行为
                }
            });
        });
</script>
<body>
  <form id="myform">

<label>姓名: </label><input type="text" id="username" name="username" tab="tab"/>
<label>年龄 : </label><input type="text" id="age" name="age" /><br />
<label>民族 : </label><select type="select" id="nationality" name="nationality"></select>
<label>地址 : </label><input type="text" id="address" name="address" tab="tab"/>

<input type="submit" value="submit" />

</form>

</body>
</html>
 
分享到:
评论

相关推荐

    微信小程序项目实例——备忘录

    在本项目实例中,我们探讨的是一个基于微信小程序的备忘录应用。微信小程序是一种轻量级的应用开发平台,特别适合构建无需下载安装即可使用的移动应用。该项目旨在提供记录文字、计时以及设置提醒的基本功能,以满足...

    html制作的备忘录html制作的备忘录

    在这个名为“html制作的备忘录”的项目中,我们可以推测这是一个用HTML构建的简单备忘录应用,可能用于个人或团队记录待办事项。 在HTML备忘录的创建过程中,主要涉及以下几个关键知识点: 1. **HTML基础结构**:...

    微信小程序项目实例-备忘录(源码+截图)

    在这个“微信小程序项目实例-备忘录”中,我们将会探讨如何利用微信小程序框架开发一个实用的备忘录应用。 首先,我们要了解微信小程序的基本结构。每个小程序由多个页面组成,每个页面由WXML(Weixin Markup ...

    大学 毕业设计 项目实训 个人备忘录系统(java SSH网站源代码)+JSP漂亮的界面控件.zip

    【标题】中的“大学毕业设计 项目实训 个人备忘录系统(java SSH网站源代码)”表明这是一个基于Java的SSH框架实现的个人备忘录系统,适用于大学生进行毕业设计或项目实训。SSH是Struts2、Spring和Hibernate三个开源...

    集成闹钟及备忘录功能的js日历

    【集成闹钟及备忘录功能的js日历】是一个基于JavaScript实现的多功能日历组件,它将传统的日历视图与闹钟和备忘录功能相结合,为用户提供了一个便捷的时间管理和提醒工具。这个组件特别适合于网页应用,能够帮助用户...

    vue备忘录单页demo

    Vue.js 是一款流行的前端JavaScript框架,它以组件化开发、轻量级以及高效的特性深受开发者喜爱。"vue备忘录单页demo"是基于Vue.js创建的一个简单的应用示例,旨在帮助开发者熟悉Vue的开发流程和核心概念。下面将...

    Qml写的备忘录

    【Qml写的备忘录】是一个基于Qt框架的项目,利用了Qt的Qml语言来实现类似备忘录的应用功能。Qml是Qt提供的一种声明式语言,它允许开发者以直观、简洁的方式定义用户界面,并结合JavaScript进行逻辑处理。这个项目...

    SpringMVC项目搭建过程备忘

    在SpringMVC项目中,我们需要引入以下关键依赖: - `spring-webmvc`:Spring MVC的核心库。 - `spring-context`:Spring的核心上下文库,包含Bean工厂和AOP支持。 - `spring-web`:提供HTTP请求处理相关的类。 - `...

    jquery+bootstrap 实现简单备忘录

    在本项目中,我们主要探讨如何使用jQuery和Bootstrap框架来创建一个简单的Web备忘录应用。这个应用利用HTML5的强大功能,为用户提供了一个方便、直观的界面,以便他们记录日常事务,并设定提醒时间,以便在特定时刻...

    微信小程序Demo:备忘录

    4. **JavaScript逻辑处理**:在小程序中,JS 文件用于处理业务逻辑和数据操作。这里可能包含了一个或多个 Page 对象,每个 Page 对象代表一个页面,包含了页面的生命周期函数以及自定义方法。 5. **API调用**:微信...

    备忘录_备忘录_微信小程序_wherevermpo_

    本项目名为“备忘录_备忘录_微信小程序_wherevermpo_”,显然是一个专门针对备忘录功能开发的微信小程序。下面将详细阐述与这个小程序相关的知识点。 首先,我们要理解微信小程序的基本架构和开发环境。微信小程序...

    web个人日历备忘系统-c#-sql

    开发者可能在其中找到了用于构建系统的主要文件,如ASP.NET的CSHTML页面(包含C#代码的HTML页面)、.cs文件(C#类和方法)、.js文件(JavaScript脚本)、.css文件(样式表)以及数据库连接配置文件等。 总的来说,...

    Django+vue+前后端分离备忘录小项目.zip

    在这个"Django+vue+前后端分离备忘录小项目"中,我们主要涉及了三个关键技术:Django(一个Python开发的Web框架)、Vue.js(一个轻量级的前端JavaScript框架)以及前后端分离的设计模式。这个小项目可以作为学习这三...

    ASP.NET 实现的备忘录

    "ASP.NET 实现的备忘录"项目,正如其名,是一个基于ASP.NET技术构建的在线备忘录系统,它可能包含了用户登录、创建、查看、编辑和删除备忘录的功能。这个项目对于学习ASP.NET和web应用开发的学生来说,是一个很好的...

    微信小程序-备忘录案例

    同时,JS文件还需要负责更新视图,将新的备忘条目添加到列表中。此外,可能还包括删除、编辑等操作的处理逻辑。 此外,微信小程序提供了丰富的API接口,如网络请求、数据缓存、用户授权等。在这个备忘录案例中,...

    jQuery日历表设置日期备忘录代码

    在IT领域,jQuery是一款广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。在本示例中,我们将探讨...你可以详细查看这些文件,以便更好地理解如何在实际项目中整合和使用这些代码。

    使用Flask实现Todo备忘录项目的所有代码

    在本项目中,我们将探讨如何使用Python的Flask框架与MongoDB数据库来构建一个简易的Todo备忘录应用。这个应用允许用户进行添加、更新和删除待办事项的操作,是学习Web开发的一个基础且实用的例子。 **Flask框架介绍...

    微信小程序之简易备忘录

    本项目"微信小程序之简易备忘录"是一个专注于帮助用户记录日常生活、工作事项的工具,集文字记录、计时和提醒功能于一体,体现了微信小程序在实用性和便捷性上的优势。 首先,我们要了解微信小程序的开发环境。...

    记事本备忘录

    在压缩包文件名列表中提到的“记事本备忘录”,可能包含的是整个项目的源代码文件、资源文件(如图片、图标)、配置文件以及可能的编译或构建脚本。如果这是一个开源项目,那么源代码可能包括了主程序、用户界面组件...

    asp日历&备忘录

    这个应用程序允许用户创建、编辑和查看日历事件,同时还能作为备忘录来记录待办事项和重要提醒,帮助用户在忙碌的工作或生活中保持井然有序。 ASP,全称为Active Server Pages,是微软开发的一种服务器端脚本环境,...

Global site tag (gtag.js) - Google Analytics