JavaScript--自定义对象：

方法一：构造函数创建对象1

function Person(){}
var p = new Person();
p.name = "zhangfei";
p.age = 19;
p.say = function(){alert(this.name+"say.....")};alert(p.name);
alert(p["age"]);
p.say();
//删除一个属性
delete  p.name
console.log(p);
//删除一个函数
delete p.say
console.log(p);

方法二：构造函数构造对象2

function Person(name,age){
this.name = name;
this.age = age;
this.say = function(){alert(this.name+"say....")}
}
var p = new Person("guanyu",20);
alert(p.name);
alert(p["age"]);
p.say();

方法三：对象直接定义对象

var p = {name:"liubei",age:19,sleep:function(){alert(this.name+"sleep.....")}};
alert(p.name);
alert(p["name"]);
p.sleep();

JavaScript--获取文档对象的方法

getElementById("id")	根据id获取一个元素
getElementsByName("name")	根据name获取一组元素
getElementsByTagName("tagname")	根据元素名称获取一组元素
innerHTML()	设置或获取位于对象起始和结束标签内的HTML
innerText()	设置或获取位于对象起始或结束标签内的文本

注册表单案例

<html><head><title>表单页面</title><meta http-equiv="Content-type" content="text/html; charset=UTF-8" /><script>function checkData(){var canSub = true;//非空校验canSub = checkNull("username","用户名不能为空！") && canSub;canSub = checkNull("password","密码不能为空！")&& canSub;canSub = checkNull("password2","确认密码不能为空！")&& canSub;canSub = checkNull("nickname","昵称不能为空！")&& canSub;canSub = checkNull("email","邮箱不能为空！")&& canSub;canSub = checkNull("valistr","验证码不能为空！")&& canSub;canSub = checkNull("img","头像不能为空！")&& canSub;//描述信息非空校验//将获取到的标签内文本变成空document.getElementById("desc_msg").innerText = "";//通过name获取节点的值var desc = document.getElementsByName("desc")[0];if(desc.value == "请输入描述信息~！"){document.getElementById("desc_msg").innerText = "描述信息不能为空！";canSub = false;}//爱好非空校验//将获取到的标签内文本变成空document.getElementById("like_msg").innerText = "";//通过name获取节点的值var likes = document.getElementsByName("like");//指定hasLike为FALSE，在进行判断var hasLike = false;for(var i = 0;i<likes.length;i++){if(likes[i].checked == true){hasLike = true;break;}}if(!hasLike){document.getElementById("like_msg").innerText = "爱好不能为空！";canSub = false;}//性别非空校验//将获取到的标签内文本变成空document.getElementById("gender_msg").innerText = "";//通过name获取节点的值var genders = document.getElementsByName("gender");//指定hasGender为FALSE，在进行判断var hasGender = false;for(var i = 0;i<genders.length;i++){if(genders[i].checked == true){hasGender = true;break;}}if(!hasGender){document.getElementById("gender_msg").innerText = "性别不能为空！";canSub = false;}//两次密码一致的校验//通过name获取节点的值var psw1 = document.getElementsByName("password")[0].value;var psw2 = document.getElementsByName("password2")[0].value;if(psw1 != "" && psw2 !="" && psw1 != psw2){document.getElementById("password2_msg").innerText = "两次密码不一致！";canSub = false;}                //邮箱格式的校验 //通过name获取节点的值var email = document.getElementsByName("email")[0].value;//通过正则表达式设定邮箱格式，进行判断if(email.value != "" && !/^\w+@\w+(\.\w+)+$/.test(email)){document.getElementById("email_msg").innerText = "邮箱格式不正确！";canSub = false;}return canSub;}/*检验非空公共方法*/function checkNull(name,msg){document.getElementById(name+"_msg").innerText = "";var tag = document.getElementsByName(name)[0];if(tag.value == ""){document.getElementById(name+"_msg").innerText = msg;return false;}return true;}//描述信息处理//获得焦点function descFocus(obj){if(obj.value == "请输入描述信息~！"){obj.value = "";}}//失去焦点function descBlur(obj){if(obj.value == ""){obj.value = "请输入描述信息~！";}}</script><style type="text/css">span{color:red;font-size:12px;}</style></head><body><form action="http://localhost:8080" method="POST" onsubmit="return checkData()"><table border="1px" align="center" cellpadding="10px" cellspacing="0px" borderColor="red" bgcolor="pink"><caption><font color="red" size="6">注册表单</font></caption><input type="hidden" name="id" value="9527"/><tr><td>用户名:</td><td><input type="text" name="username" /> <span id="username_msg"></span></td></tr><tr><td>密码:</td><td><input type="password" name="password"/> <span id="password_msg"></span></td></tr><tr><td>确认密码:</td><td><input type="password" name="password2"/> <span id="password2_msg"></span></td></tr><tr><td>性别：</td><td><input type="radio" name="gender" value="男"/>男<input type="radio" name="gender" value="女"/>女 <span id="gender_msg"></span></td></tr><tr><td>昵称：</td><td><input type="text" name="nickname"/> <span id="nickname_msg"></span></td></tr><tr><td>邮箱：</td><td><input type="text" name="email"/> <span id="email_msg"></span></td></tr><tr><td>爱好：</td><td><input type="checkbox" name="like" value="lq"/>篮球<input type="checkbox" name="like" value="zq"/>足球<input type="checkbox" name="like" value="qq"/>铅球<input type="checkbox" name="like" value="blq"/>玻璃球<span id="like_msg"></span></td></tr><tr><td>客户类型：</td><td><select name="type"><option value="pm">平民</option><option value="sxdy">少先队员</option><option value="gqty">共青团员</option><option value="ybdy">预备党员</option><option value="zsdy">正式党员</option></select><span id="type_msg"></span></td></tr><tr><td>头像：</td><td><input type="file" name="img"/> <span id="img_msg"></span></td></tr><tr><td>描述信息：</td><td><textarea id="desc" rows="5" cols="45" name="desc" onfocus="descFocus(this)" onblur="descBlur(this)">请输入描述信息~！</textarea> <br/><span id="desc_msg"></span></td></tr><tr><td>验证码：</td><td><input type="text" name="valistr"/><img src="1.jpg" width="100px" height="20px"/><span id="valistr_msg"></span></td></tr><tr><td colspan="2" align="right"><input type="submit" value="提 交"/><input type="reset" value="重 置"/></td></tr></table></form></body>
</html>

JavaScript--简单案例相关推荐

javaScript简单项目案例
js简单案例案例一:完成多分支案例"年龄层判断"(代码和效果图). 案例二:完成"prompt()方法及动态输入实现矩形周长面积计算"的案例(代码和效果图). ...
jQuery ajax简单案例-验证用户名是否可用
jQuery ajax简单案例-验证用户名是否可用 HTML <!DOCTYPE html> <html> <head> <meta charset=&quo ...
vue.js的学习中的简单案例
今天学习了近年来挺火的一门JS技术,叫vue.js下面是它的一个简单案例: <html> <head> <title>$Title$</title> / ...
ThinkPHP5结合云之讯短信验证简单案例
ThinkPHP5结合云之讯短信验证简单案例总体思路: 我这里以用户注册短信验证分析: 在用户输入正确的手机号码点击注册按钮时,使用Ajax发送一个我们手动生成的验证码和手机号码一起发 ...
JavaScript项目案例
简单案例案例一:完成"鼠标经过切换图片"的案例案例二:完成"百度换肤效果"的案例案例三:完成"鼠标展示"的案例案例四:完成" ...
html网页结构：行内和块元素、简单案例
一.行内元素和块元素概括块级元素:div , p ,form, ul,li,ol,dl,form, address,fieldset, hr, menu, table 行内元素:span, stro ...
ajax ashx调试,asp.net——Ajax与ashx异步请求的简单案例
Ajax与ashx异步请求的简单案例: 前台页面(aspx): function gettext() { var intxt = $("#intxt").val(); $.ajax ...
通过JavaScript简单的操作DOM（一）
通过JavaScript简单的操作DOM (一)简单的前提概念 1.DOM简介 DOM,文档对象模型.描述了HTML和XML文档结构,然后提供API,来帮助开发人员添加.删除.修改页面的某一部分. ( ...
java 向nodejs 发送请求简单案例
java 向nodejs 发送请求简单案例最近在做nodejs的东西,一直不明白java如何与nodejs建立连接,下面写了一个简单demo: nodejs端: var http = requir ...
ViewPager 实现页面左右滑动的简单案例1
ViewPager 实现页面左右滑动的简单案例主要Activity: <RelativeLayoutxmlns:android="http://schemas.android.com ...

JavaScript--简单案例

JavaScript--自定义对象：

方法一：构造函数创建对象1

方法二：构造函数构造对象2

方法三：对象直接定义对象

JavaScript--获取文档对象的方法

getElementById("id")

根据id获取一个元素

getElementsByName("name")

根据name获取一组元素

getElementsByTagName("tagname")

根据元素名称获取一组元素

innerHTML()

设置或获取位于对象起始和结束标签内的HTML

innerText()

设置或获取位于对象起始或结束标签内的文本

注册表单案例

JavaScript--简单案例相关推荐

最新文章

热门文章