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. 2022-2028年中国锂电池设备行业深度调研及投资前景预测报告
  2. linux 邮件客户端 n1,N1:下一代开源邮件客户端
  3. 推荐系统的应用案例剖析
  4. 推荐一个ASP.NET的资源网站
  5. android 模拟长按菜单键_如何采用PLC梯形图实现单键启动程序
  6. ARMA模型的性质之ARMA模型
  7. 字段与属性 c# 1613532992
  8. bitcount java_Java Long bitCount()方法
  9. 递归与递推类型题小结
  10. springboot 全局捕获异常
  11. struts2数据库操作_Struts 2操作错误和操作消息
  12. grafana 部署
  13. vue 拖拽产生连线_连接两个div的直线,拖动时保持连线。
  14. My97DatePicker日期插件的使用
  15. EditText更改光标的大小和颜色
  16. 通过wireshark下载微信小程序视频一例
  17. App地推效果差?你可能缺少渠道效果统计
  18. BugKu——你必须让他停下
  19. python3脚本使用sql loader批量导入字节文件并二次处理
  20. 最后一战——回顾 NOIP 2021

热门文章

  1. H3C交换机的命名规则
  2. cocos creator (四)构建android项目
  3. 基于UDP的网络聊天室网络编程0811作业-洪庆乐
  4. VMWARE中WIN7虚拟机安装VMWARE TOOLS提示“安装程序无法自动安装 Virtual Machine Communication Interface Sockets“解决方法
  5. 项目管理实践【五】自动编译和发布网站【Using Visual Studio with Source Control System to build and publish website autom
  6. 干货丨浅谈足式机器人的运动控制
  7. java 轻量级插件化框架_轻量级插件化框架——Small
  8. Google Java 编码规范
  9. 手机端扣扣浏览器图片居中_实现图片始终居中显示于浏览器窗口中心位置
  10. 学生报名太火热,黑马大门要被挤掉了?