form表单、事件、3D

  • form表单
    • form表单操作
  • event事件对象
    • 案例
    • 事件冒泡
    • 事件的绑定与解绑
    • 键盘事件
    • 默认事件
    • 面试题
  • 选项卡
    • javascript实现
    • jQuery实现
  • 3D
    • 3D翻牌
    • 3D翻牌（2）

form表单

form表单操作

onchange事件

text--->当表单value值发生变化的时候触发
radio-->当选中的时候触发
checkbox-->当选择的时候触发
select---->当切换的时候触发
//表单提交
oForm.onsubmit = function(){if(oInp[0].value==""){alert("用户名不能为空！");oInp[0].focus();//获取焦点return false;}
};
// 兼容placeholder
oInp[0].onfocus = function(){if(this.value == '请输入用户姓名'){this.value = '';}
};
oInp[0].onblur = function(){if(this.value == ''){this.value = '输入用户姓名';}
};

表单验证案例

*{padding: 0;margin: 0;}
#box{width: 500px;margin: 50px auto;}
p{margin-top: 10px}
input[type='text'],input[type='password'],input[type='submit']{width: 240px;height: 30px;}
textarea{width:300px;height:100px;}
#province{padding:5px;}
input,textarea,select{outline:none;}/*去掉默认的选框样式*/
#error{color:red;}

<div id="box"><h2 id="error"></h2><form id="myForm" method="post" onsubmit="return saves();"><p>用户名：<input type="text" name="username"/></p><p>密&nbsp;&nbsp;&nbsp;码：<input type="password" name="password"/></p><p>性&nbsp;&nbsp;&nbsp;别：<label><input type="radio" name="sex" value="男">男生</label><label><input type="radio" name="sex" value="女">女生</label></p><p>爱好：<label><input type="checkbox" name="hobby" value="0"/>游泳</label><label><input type="checkbox" name="hobby" value="1"/>做饭</label><label><input type="checkbox" name="hobby" value="2"/>看书</label><label><input type="checkbox" name="hobby" value="3"/>打球</label></p><p>自我介绍：<textarea name="content"></textarea></p><p>省份：<select id="province"><option value="">请选择省份</option><option value="hubei">湖北</option><option value="hunan">湖南</option><option value="yunnan">云南</option><option value="shandong">山东</option></select></p><p><input type="submit" value="提交"></p></form>
</div>

function $(id){return document.getElementById(id);
};
function saves(){   // 获取表单对象var oForm = $('myForm');// 获取表单数据var data = {username: oForm.username.value,password: oForm.password.value,sex: oForm.sex[0].checked ? '男' : (oForm.sex[1].checked ? '女' : ''),hobbys: [],content: oForm.content.value,province: $('province').value}var arr = oForm.hobby;for(var i=0; i<arr.length; i++){if(arr[i].checked){data.hobbys.push(arr[i].value)}}// 校验数据if(!isValidator(data)){return false;}// ajax提交alert(data);alert(JSON.stringify(data));
};function isValidator(data){// 获取表单对象var oForm = $('myForm');// 错误提示var error = $('error');error.innerHTML = '';//判断用户名是否为空if(!data.username){error.innerHTML = '用户名不能为空！';oForm.username.focus();return false;}//判断密码是否为空if(!data.password){error.innerHTML = '密码不能为空！';oForm.password.focus();return false;}//判断性别if(!data.sex){error.innerHTML = '请选择性别！';return false;}//判断爱好if(!data.hobbys || data.hobbys.length==0){error.innerHTML = '请选择爱好！';return false;}//判断文本域if(!data.content){error.innerHTML = '请选择自我介绍！';return false;}//判断省份if(!data.province){error.innerHTML = '请选择省份！';return false;}return true;
};

event事件对象

// event事件对象，当一个事件发生时，存储这个事件的相关信息
alert(event)chrome：undefinedIE：nullfirefox：报错 is notdefined
document.onclick = function(ev){var e = ev || window.event; // 浏览器兼容写法 alert(e); // [object MouseEvent]
}

案例

document.onmousemove = function(ev){var e = ev || event;var x = e.clientX;var y = e.clientY;var oDiv = document.createElement('div');oDiv.style.cssText = 'width: 5px;height: 5px;background: pink;position:absolute;top:'+y+'px;left:'+x+'px;';document.body.appendChild(oDiv)
}

事件冒泡

当一个元素在触发一个事件的时候，这个事件传递给父元素，一直传到window就结束了

#div1{width:400px;padding:50px;background:yellow;}
#div2{padding:50px;background:blue;}
#div3{padding:50px;background:pink;}

<div id="div1">div1<div id="div2">div2<div id="div3">div3</div></div>
</div>

var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var oDiv3 = document.getElementById('div3');oDiv1.onclick = fn;
oDiv2.onclick = fn;
oDiv3.onclick = fn1;function fn1(ev){var e = ev||window.event;//为了兼容IE678alert(this.id);e.cancelBubble = true; // 阻止事件冒泡
};
function fn(){alert(this.id);
};

案例

#box{width:400px;margin:30px auto;position:relative;}
#list li{list-style:none;float:left;padding:10px;background:orange;cursor:pointer;border-right:1px solid #ccc;}
#list li:last-child{border-right:0;}
#hide{width:84px;height:150px;background:pink;position:absolute;top:38px;left:53px;display:none;cursor:pointer;}

<div id="box"><ul id="list"><li>首页</li><li id="pro">产品列表</li><li>活动介绍</li><li>联系我们</li></ul><div id="hide"><div>
</div>

var pro = document.getElementById('pro');
var hide = document.getElementById('hide');
pro.onmouseover = function(ev){var e = ev||window.event;hide.style.display = 'block';e.cancelBubble = true;
};
hide.onmouseover = function(ev){var e = ev||event;e.cancelBubble = true;
};
document.onmouseover = function(){hide.style.display = 'none';
};

事件的绑定与解绑

事件的绑定IE ：obj.attachEvent(事件名称，函数名字);其他浏览器：obj.addEventListener(事件名称，函数名字,是否捕获);
绑定很多事件的时候IE8— 先弹后绑定的 再弹先绑定的IE9+ 先弹先绑定的 再弹后绑定的

var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var oDiv3 = document.getElementById('div3');oDiv1.onclick = fn;
oDiv1.onclick = fn1;
oDiv3.onclick = fn;oDiv1.attachEvent('onclick',fn);
oDiv1.attachEvent('onclick',fn1);
function fn(){alert(1);
};
function fn1(){alert(2);
};
// 两个事件不会相互覆盖
oDiv1.addEventListener('click', function(){alert(0);
});
oDiv1.addEventListener('click', function(){alert(1);
});

//写一个兼容的写法
function bind(obj, eName, fn){if(obj.addEventListener){obj.addEventListener(eName, fn, false);}else{obj.attachEvent('on' + eName, function(){fn.call(this);});}
}
//调用
bind(oDiv3, 'click', f3);
function f3(){alert(this.id);
};

IE678绑定事件：attachEvent解绑事件：detachEvent  只能解绑attachEvent的事件，不能解绑on绑定的事件解绑on绑定的事件，dom.onXXX = null
IE9+绑定事件：addEventListener解绑事件：removeEventListener

this与call的案例

var username = "小罗";
function test(a, b){alert(this.username+(a+b));
}
var yw = {username: 'yw',age:28,sayHello: function(){//alert(this.username+"==="+this.age);//test();test.call(yw, 1, 2);test.apply(yw, [1, 2]);}
};
yw.sayHello();

键盘事件

#content{width: 200px;height: 300px;border: 1px solid red;margin-top:20px;}

<input type="text" id="txt">
<input type="button" id="btn" value="提交">
<div id="content"></div>

onkeydown：键盘按下去时触发事件
onkeyup：键盘按下后抬起时触发事件
必须是可以触发焦点的，才能触发事件onkeydown与onkeypress的区别
1、onkeydown 在 onkeypress 之前触发
2、onkeypress只会响应字母、数字、符号，其他的例如F1-F12、Ctrl、Shift、Alt键不会响应

var oTxt = document.getElementById('txt');
// oTxt.onkeydown = function(){//  alert(this.value)
// }
oTxt.onkeyup = function(){alert(this.value)
}

键盘码

document.onkeyup = function(ev){var e = ev || event;// e.keyCode// 回车键13、shift键16、ctrl键17、空格键32console.log( e.keyCode );
}

var oTxt = document.getElementById('txt');
var oBtn = document.getElementById('btn');
var oContent = document.getElementById('content');
oBtn.onclick = showContent;
oTxt.onkeyup = function(ev){var e = ev || event;if(e.keyCode == 13){showContent();}
}
function showContent(){var val = oTxt.value.trim();if(val){var p = document.createElement('p');p.innerHTML = val;oContent.appendChild(p);oTxt.value = '';oTxt.focus();}
}

默认事件

阻止默认事件oncontextmenu：鼠标右键菜单事件，return false阻止掉

document.oncontextmenu = function(){return false;
}

阻止调空格键按下时滚动条动的事件

document.onkeydown = function(ev){var e = ev || event;if(e.keyCode == 32){return false;}
}

案例

<div id="box"></div>
var oBox = document.getElementById('box');
document.oncontextmenu =  function(ev){var e = ev || event;var x = e.clientX;var y = e.clientY;oBox.style.cssText = 'display:block; top:' + y + 'px; left:' + x + 'px;';return false;
};document.onclick = function(){oBox.style.display = 'none';
};

面试题

function test(){var arr = [];for(var i=0; i<3; i++){arr[i] = function(){return i;}}return arr;
}
var t = test();
// alert(t); // [function(){return i;}, function(){return i;}, function(){return i;}]
for(var i=0; i<t.length; i++){alert(t[i]());
}
// 结果输出 3 3 3

选项卡

#box{width: 670px;height: 480px;border: 1px solid red;margin: 50px auto;}
#card{width: 100%;height: 42px;background: pink;}
#card li{list-style: none;float: left;border: 1px solid pink;padding: 10px;cursor: pointer;}
#card .on{background: #fff;}
#content{width: 100%;height: 438px;clear: both;}
#content div{display: none;}

<div id="box"><ul id="card"><li class="on">选项一</li><li>选项二</li><li>选项三</li><li>选项四</li></ul><div id="content"><div style="display: block;">content1</div><div>content2</div><div>content3</div><div>content4</div></div>
</div>

javascript实现

function $(id){return document.getElementById(id);
}
// 封装jQuery的siblings方法
function siblings(dom, callBack){var pChild = dom.parentNode.children;/*// 方法一for(var i=0; i<pChild.length; i++){if(pChild[i] != dom){callBack.call(pChild[i]);}}*/// 方法二var tabs = [].slice.call(pChild);// 类数组转数组tabs.filter(function(item){ // IE678不支持if(item != dom){callBack.call(item);}})/*等价于Array.prototype.slice = function(){var arr = [];for(var i=0; i<this.length; i++){arr.push(this[i]);}return arr;}*/
}
var oCard = $('card');
var lis = oCard.children;
for(var i=0; i<lis.length; i++){lis[i].index = i; // 给每个li动态绑定indexlis[i].onclick = switchTab;lis[i].onmouseover = switchTab;function switchTab(){ // 给点击的li加样式this.className = 'on';// 修改其他lisiblings(this, function(){this.className = '';});// 改变每个content div 将对应的内容显示出来var tab = $('content').children[this.index];tab.style.display = 'block';siblings(tab, function(){this.style.display = 'none';});    }
}

jQuery实现

// $('#card').children().click(function(){//  // 获取当前点击的对象
//  var $li = $(this);
//  // 获取当前点击对象的索引
//  var index = $li.index();
//  $li.addClass('on').siblings().removeClass('on');
//  $('#content').children().eq(index).show().siblings().hide();
// });
$('#card').children().on({'click': switchTab,'mouseover': switchTab
});
function switchTab(){// 获取当前点击的对象var $li = $(this);// 改变li样式$li.addClass('on').siblings().removeClass('on');// 获取当前点击对象的索引var index = $li.index();// 改变content div样式$('#content').children().eq(index).show().siblings().hide();
}

3D

3D翻牌

#box{width: 900px;height: 500px;border: 1px solid red;margin: 50px auto;}
#container{width: 300px;height: 400px;border: 1px solid green;margin: 10px 0 0 10px;/*设置3D环境*/transform-style: preserve-3d;perspective: 200px;}
#container:hover .font{transform: rotateY(180deg);transition: all 1s linear;}
#container .font{transition: all 1s linear;}

<div id="box"><div id="container"><div class="font"><img src="img/1.jpg" width="300" height="400"></div></div>
</div>

3D翻牌（2）

#box{width: 1260px;height: 500px;border: 1px solid red;margin: 50px auto;}
.container{float:left;width: 300px;height: 400px;border: 1px solid green;margin: 10px 0 0 10px;/*设置3D环境*/transform-style: preserve-3d;perspective: 500px;}
.container:hover .item{transform: rotateY(180deg);transition: all 1s linear;}
.container .item{transition: all 1s linear;}
.container:hover .back{z-index: 2}
.container .font{transition: all 1s linear;z-index: 1;position: absolute;}
.container .back{transform: rotateY(180deg);position: absolute;left: 0;top:0;background: linear-gradient(red, blue);padding: 20px;width: 260px;height: 360px;z-index: 0;transition: all 1s linear;box-shadow: 5px 5px 5px #999 /*inset 内阴影*/;}

<div id="box"><!-- container start --><div class="container"><div class="item"><div class="font"><img src="img/1.jpg" width="300" height="400"></div><div class="back">这是背面</div></div></div><!-- container end --><!-- container start --><div class="container"><div class="item"><div class="font"><img src="img/2.jpg" width="300" height="400"></div><div class="back">这是背面</div></div></div><!-- container end --><!-- container start --><div class="container"><div class="item"><div class="font"><img src="img/3.jpg" width="300" height="400"></div><div class="back">这是背面</div></div></div><!-- container end --><!-- container start --><div class="container"><div class="item"><div class="font"><img src="img/4.jpg" width="300" height="400"></div><div class="back">这是背面</div></div></div><!-- container end --><!-- container start --><div class="container"><div class="item"><div class="font"><img src="img/5.jpg" width="300" height="400"></div><div class="back">这是背面</div></div></div><!-- container end --><!-- container start --><div class="container"><div class="item"><div class="font"><img src="img/6.jpg" width="300" height="400"></div><div class="back">这是背面</div></div></div><!-- container end --><!-- container start --><div class="container"><div class="item"><div class="font"><img src="img/7.jpg" width="300" height="400"></div><div class="back">这是背面</div></div></div><!-- container end --><!-- container start --><div class="container"><div class="item"><div class="font"><img src="img/8.jpg" width="300" height="400"></div><div class="back">这是背面</div></div></div><!-- container end -->
</div>

JavaScript基础（九）form表单、事件、3D相关推荐

  1. html表单通过js提交表单提交,JavaScript动态创建form表单并提交的实现方法

    本文实例讲述了JavaScript动态创建form表单并提交的实现方法.分享给大家供大家参考,具体如下: 页面布局有些复杂的情况下,可能需要在页面中动态创建一个 form,JavaScript 创建 ...

  2. 前端基础 至 form表单提交方式

    原文:https://www.jianshu.com/p/8c947e7fee00 虽然前后端不分离项目越来越少了(vue等太香)但是有时候后端程序员 想自己搞不分离web页面的时候还是会用原生htm ...

  3. Html前端基础（form表单、img标签、a href标签、id的作用）

    文章目录 一.img标签 二.a标签(带href) 三.form表单 本篇主要分析Html前端开发中的img图片标签.a href超链接标签.form表单标签,其中form是重点 一.img标签 1. ...

  4. HTML基础之form表单

    目录 一:表单属性 1 name 属性 2 action属性 3 method属性 4 target属性 5 enctype属性 二:表单对象 1 input标签 2 多行文本textarea 3 下 ...

  5. javascript动态添加form表单元素

    2019独角兽企业重金招聘Python工程师标准>>> 2014年11月7日 17:10:40 之前写过几篇类似的文章,现在看来比较初级,弄一个高级的简单的 情景: 后台要上传游戏截 ...

  6. php+提交和重置按钮传值,JS提交和重置form表单

    本节示例讲解 JavaScript 的提交 form 表单和重置 form 表单. 提交表单 使用 和 标签都可以定义提交按钮,只要将 type 属性值设置为"submit"即可, ...

  7. JavaScript之form表单提交前验证的onSubmit事件

    在前端使用JavaScript验证表单数据时,对验证不通过的form表单要阻止其提交到后台.这时,可以使用onSubmit事件来阻止其提交. <form method="post&qu ...

  8. java_web1:基本标签、form表单、frameset框架标签、CSS样式、javascript、servlet

    前端三剑客: html,css,js(javascript) html: Hyper Text Markup Language:超文本标记语言 针对字体,图片,视频,音频等等进行操作,设置字体颜色,大 ...

  9. HTML/CSS——form表单select联动（JavaScript方法）

    下拉列表:二级联动菜单 Select对象的常用属性 options[]:返回所有option组成的一个数组: name:名称 value:option的value的值 length:设置或读取opti ...

最新文章

  1. 强势解析 eBay BASE 模式、去哪儿及蘑菇街分布式架构
  2. 牛客IOI周赛16-普及组
  3. 修改mysql锁空间大小
  4. Ubuntu16.04_Anaconda_TensorFlow(CPU)_py2.7及conda相关操作
  5. 数据结构与算法 c语言6,C语言程序设计题库之6.doc
  6. sql2003安装sql2005企业版
  7. linux多线程实验实验报告,Linux多线程实验.ppt
  8. Struts2通配符和它的各种问题总结
  9. 当租房成为一种生活方式
  10. push_back、emplace_back、std::move
  11. C# winform表格datagridview行高自动设置问题
  12. excel - 循环语句（for-next，do-loop，for-each-next）
  13. iOS积分墙和积分墙的区别在哪呢？
  14. 精品收藏：GitHub人工智能AI开源项目
  15. ubuntu编辑只读文件
  16. 红孩子：基于网络的渠道增值
  17. Python对excel操作——分类汇总278张Excel表中的数据
  18. 【更新！】3dMax材质ID随机生成器插件MaterialIDsRandomGenerator v2.1.2使用教程
  19. 罗曼蒂克消亡史视听分析_IT业务分析师的消亡
  20. 教大家如何区分屏蔽数据线的好坏

热门文章

  1. ABAP-MESSAGE介绍
  2. WiFi篇（三）-“黑”破解
  3. 基于JavaEE的驾校在线考试管理系统_JSP网站设计_SqlServer数据库设计
  4. 2022天翼数字科技生态大会 五大亮点看永不落幕的“5G物联生态城”
  5. c语言isempty函数代码,使用C语言实现链栈以及initialize,push,pop,isEmpty,getlength,destory等操作...
  6. 如何使用latex排版并排放置两张图
  7. AI视频动画制作《狼来了》全揭秘！
  8. 微信小程序中：使用三目运算设置样式
  9. 时域高通滤波算法（THPF）
  10. CMMI五个级别旁解