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--简单案例相关推荐

  1. javaScript简单项目案例

    js简单案例 案例一:完成多分支案例"年龄层判断"(代码和效果图). 案例二:完成"prompt()方法及动态输入实现矩形周长面积计算"的案例(代码和效果图). ...

  2. jQuery ajax简单案例-验证用户名是否可用

    jQuery ajax简单案例-验证用户名是否可用 HTML <!DOCTYPE html> <html> <head> <meta charset=&quo ...

  3. vue.js的学习中的简单案例

    今天学习了近年来挺火的一门JS技术,叫vue.js下面是它的一个简单案例: <html> <head> <title>$Title$</title> / ...

  4. ThinkPHP5结合云之讯短信验证简单案例

    ThinkPHP5结合云之讯短信验证简单案例 总体思路: 我这里以用户注册短信验证分析:        在用户输入正确的手机号码点击注册按钮时,使用Ajax发送一个我们手动生成的验证码和手机号码一起发 ...

  5. JavaScript项目案例

    简单案例 案例一:完成"鼠标经过切换图片"的案例 案例二:完成"百度换肤效果"的案例 案例三:完成"鼠标展示"的案例 案例四:完成" ...

  6. html网页结构:行内和块元素、简单案例

    一.行内元素和块元素概括 块级元素:div , p ,form, ul,li,ol,dl,form, address,fieldset, hr, menu, table 行内元素:span, stro ...

  7. ajax ashx调试,asp.net——Ajax与ashx异步请求的简单案例

    Ajax与ashx异步请求的简单案例: 前台页面(aspx): function gettext() { var intxt = $("#intxt").val(); $.ajax ...

  8. 通过JavaScript简单的操作DOM(一)

    通过JavaScript简单的操作DOM (一)简单的前提概念 1.DOM简介 DOM,文档对象模型.描述了HTML和XML文档结构,然后提供API,来帮助开发人员添加.删除.修改页面的某一部分. ( ...

  9. java 向nodejs 发送请求简单案例

    java  向nodejs 发送请求简单案例 最近在做nodejs的东西,一直不明白java如何与nodejs建立连接,下面写了一个简单demo: nodejs端: var http = requir ...

  10. ViewPager 实现页面左右滑动的简单案例1

    ViewPager 实现页面左右滑动的简单案例 主要Activity: <RelativeLayoutxmlns:android="http://schemas.android.com ...

最新文章

  1. 如何高效利用开源项目增加实战经验?程序员如何做副业?这些你关心的问题一次讲清楚!...
  2. 一款机械陀螺仪-四旋翼上的机械陀螺仪
  3. 谁说只有VGG才能做风格迁移,ResNet也可以
  4. Java8 Map中新增的方法使用总结
  5. pymysql.err.InternalError: (1130, Host '127.0.0.1' is not allowed to connect to this MySQL server)
  6. 面向.NET开发人员的Dapr——可观察性
  7. 身边的设计模式(三):抽象工厂 与 依赖注入
  8. python实现微信小程序的接口自动化_appium+python自动化56-微信小程序自动化(摩拜为例)...
  9. 找出无序数组最小的K个数(基于快排,效率高)
  10. 用 普通 用户欺骗登陆 获取 管理员的最高权限~~~~
  11. c++数组排序_为什么?为什么?Java处理排序后的数组比没有排序的快?想过没有?
  12. Android实现中英文切换
  13. vue中解决跨域问题
  14. 汇编指令CALL的硬编码E8 和 JMP 的硬编码E9 后面参数的计算方法
  15. Office Web App服务器的配置
  16. 错误使用 reshape要执行 RESHAPE,请勿更改元素数目。
  17. python 制作数据图表_python制作各种数据图表
  18. Java猪人刷怪塔_我的世界:经验不够怎么办?MC6大快速升级方法,养鸡也行?...
  19. Java微服务框架一览
  20. 微信支付(销客多)配置

热门文章

  1. 跳楼梯(洛谷P1255题题解,Java语言描述)
  2. 从教女友写代码中学到的,教人写代码在一定程度上是硬件问题
  3. 设计模式——生产者消费者模式
  4. centos8安装及配置nfs4
  5. PS技能后期制作梦幻效果——奥顿效果(The Orton Effect)
  6. office病毒分析从0到1
  7. php 仿微信朋友圈,HTML5仿微信聊天界面和朋友圈代码
  8. 2022 年博客总结
  9. 从CDN到边缘计算,近水楼台是否先得月?
  10. miix5 u盘安装linux,联想Miix520 U盘装系统xp教程