form表单、事件、3D
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>密 码：<input type="password" name="password"/></p>
<p>性 别：
<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：undefined
IE：null
firefox：报错 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;//为了兼容IE678
alert(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、空格键32
console.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动态绑定index
lis[i].onclick = switchTab;
lis[i].onmouseover = switchTab;
function switchTab(){
// 给点击的li加样式
this.className = 'on';
// 修改其他li
siblings(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>
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
