Jquery中文网 www.jquerycn.cn
Jquery中文网 >  脚本编程  >  javascript  >  正文 解析:javascript事件与控制结构

解析:javascript事件与控制结构

发布时间:2015-01-11   编辑:www.jquerycn.cn
本节介绍下,javascript中的事件与控制结构语句,有需要的朋友参考下。

在javascript中,也是一切事物皆是对象。
对象具有属性和方法
点击按钮触发一个事件,就是调用了该对象的方法,之后该方法去触发某一个函数

函数的定义
Function函数名()
{
 函数体;
}

函数分为系统函数和自定义函数

如以上例子,点击按钮触发的是对象的 OnClick事件。
OnClick="javascript:函数名();"是在标记里写的,之后就是对函数的编写了。

例如:
 

复制代码 代码示例:
<html>
<body>
<input type="button" name="button" id="subName" value="登录"  onclick="javascript:aaa();"/>
</body>
</html>
<script language="javascript" type="text/javascript">
function aaa()
{
//自定义函数
alert("大家好,欢迎来到jquery中文网");
}
</script>

例如:想点击按钮,获得表单里文本框中数据的字符

基本方法:
Document.表单名称.文本框名称.value
document是一个文档集合,包含页面的所有信息
上例子中就可以这样编写
 

复制代码 代码示例:
<!DOCTYPE htmlPUBLIC "-//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>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>事件测试-www.jquerycn.cn</title>
</head>
 <body>
<form action="" method="post"enctype="multipart/form-data" name="form1"id="form1">
    <input type="text"name="txtName" id="txtName" />
    <input type="button"name="button" id="button" value="获取"   onclick="javascript:aaa();"/>
</form>
</body>
</html>
<script language="javascript" type="text/javascript">
function aaa()
{
//自定义函数
//获取元素的值
Var a=
Document.form1.txtName.value
Alert(a);
}
</script>

表单(form)
用于搜集不同类型的用户输入
它的类型包含
    文本框
    单选按钮多选
    下拉列表
    按钮

表单实例代码
 

复制代码 代码示例:
<form>
First name:
<inputtype="text" name="firstname" />
<br />
Last name:
<inputtype="text" name="lastname" />
</form>

为了更好的获取上例子中的信息,避免出现不友好的现象.
我们进行判断

三个控制结构中的选择结构
选择结构
if (表达式,结果为boolean的类型表达式)
{
}
   else
{
}

检测用户为空

 名字==""或者是名字=null,但是有时候文本框获取的是null,或是”“
所以两个都写上,然后返回return,否则就是弹出获取的值
 

复制代码 代码示例:
If(a==null|| a=="")
{
Alert("用户名不能为空");
return
}
Else
{
Alert(a);
}
 

循环结构
 获取数组中的值,使用循环结构时优选的选择

For和while循环

 while循环不自带自增条件
需要在循环体中编写
例如
20个3 相乘的结果是多少呢,来看看吧
 

复制代码 代码示例:
 <script language="javascript" type="text/javascript" >
 var i =1;
var resourt=1;
while(  i<=20)
{
resourt*=3;
 
i++;
//i+=1;
}
alert("结果是20个3想成是"+resourt);
</script>

for循环1到100相加是多少呢
 

复制代码 代码示例:
<!DOCTYPE htmlPUBLIC "-//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>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>for循环--www.jquerycn.cn</title>
</head>
<body>
</body>
</html>
<script language="javascript" type="text/javascript" >
/*varresourt=0;
for(vari=1;i<=100;i++)
{
resourt+=i;
}
alert("1到100相加是"+resourt);/*/
</script>
 

如何获取复选框和单选的值呢?
例如如何获取性别呢 男,女
1 首先将两个单选放在一个组中xingbie,使其只有一个可选
2 设置他们的值分别为"男","女",
3 判断是否选中checked,属性
例子:
 

复制代码 代码示例:
<p>性别:
    <input name="radio1"type="radio" id="radio" value="男" />
    <labelfor="radio1"></label>
    男    
    <input name="radio1"type="radio" id="radio2" value="女"checked="checked" />
    <label for="radio1"></label>
  女</p>
<script language="javascript" type="text/javascript">
function aaa()
{
//自定义函数
//获取元素的值
if(!radio1[0].checked)
{
varsex=document.form1.radio1[1].value;//获取选定值
}
else
{
varsex=document.form1.radio1[0].value;//获取选定值
}
 
}
</script>

您可能感兴趣的文章:
jQuery源码分析系列
asp.net页面加载顺序细致解析
解析:javascript事件与控制结构
JQuery onload、ready概念介绍及使用方法
asp.net MVC进阶学习---个性化目录结构(一)
ASP.Net中程序构架与程序代码的分离
JQuery onload、ready详解
解密jQuery事件核心 – 绑定设计(一)
浅析jquery的作用与优势
ASP.NET页面事件:顺序与回传方法详解

[关闭]