<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<style type="text/css">
*{font-size:14px;}
.dom_test li{ width: 500px; height:50px; padding: 20px; margin: 15px 0;}
.dom_test input, .eventBox p input{ margin: 2px; width: 120px; height:35px; text-align: center; line-height: 35px; border: none; background: #ffa200; }
.dom_test input#setVal{ width: 500px; background: #fff; border: 1px solid #ddd;}
.font_w{font-weight: bold;}
.bg_red{background: red;}
.font_color{color: #fff;}
.eventBox div input{background: #fff;}
</style>
</head>
<body>
<section class="eventBox">
<div>
<input type="text" id="eInput" value="focus/blur事件">
<input type="text" id="eInput1" value="change事件">
<p id="page"></p>
</div>
<p>
<input type="text" id="ebtn3" value="click事件">
<input type="text" id="ebtn4" value="dbclick事件">
<input type="text" id="ebtn5" value="mouseover事件">
<input type="text" id="ebtn6" value="mouseenter事件">
<input type="text" id="ebtn7" value="mousemove事件">
<input type="text" id="ebtn8" value="mouseleave事件">
<input type="text" id="ebtn9" value="mouseout事件">
<input type="text" id="ebtn10" value="mousedown事件">
<input type="text" id="ebtn11" value="mouseup事件">
<input type="text" id="ebtn13" value="hover事件">
<input type="text" id="ebtn14" value="toggle事件">
</p>
</section>
<script type="text/javascript">
$(document).ready(function(){
/*
//Dom操作
$('#btn').click(function(){
$('li:first').css('color','red');//------改变第一个li的css字体颜色
});
$('#btn1').click(function(){
$('li:first').css({color:'red', fontWeight:'600'});//------改变第一个li的css字体颜色和加粗
});
$('#btn2').click(function(){
alert($('li:first').css('color'));//------获取第一个li的css字体颜色,获取的是rgb
});
$('#btn3').click(function(){
$('li:first').addClass('bg_red font_color');//------给第一个li加bg_red和font_color样式
});
$('#btn4').click(function(){
$('li:first').removeClass('bg_red');//------给第一个li移除bg_red样式
});
$('#btn5').click(function(){
$('li:first').attr('hidden','hidden');//------给第一个li添加属性
alert($('li:first').attr('hidden'));
});
$('#btn6').click(function(){
$('li:first').removeAttr('hidden','hidden');//------给第一个li移除属性
alert($('li:first').attr('hidden'));
});
$('#btn7').click(function(){
$('li').each(function(){
if($(this).hasClass('font_w')){//------查找li中是否含有font_w类, 如果有使之颜色变为红色,没有变为蓝色
$(this).css('color','red');
}else{
$(this).css('color','blue');
}
})
});
$('#btn8').click(function(){
$('li:first').toggleClass('font_w');//------给第一个li添加/移除class
});
$('#btn9').click(function(){
$('li:first').text('已经成功修改了文本内容');//------修改第一个li的文本内容
});
$('#btn10').click(function(){
$('li:first').html('<b>html已经成功修改了内容</b>');//------修改第一个li的html内容
});
$('#btn11').click(function(){
$('#setVal').val('已经成功添加了val内容');//------修改第一个li的html内容
}); */
$('#eInput').focus(function(){
$(this).css({background:'#eee' , color:'red'})
});//------获取焦点更改背景颜色和字体颜色
$('#eInput').blur(function(){
$(this).css({background:'#fff' , color:'#333'})
});//------失去焦点更改背景颜色和字体颜色
$('#eInput1').change(function(){
$(this).css({background:'red' , color:'#fff'})
});//------失去焦点更改背景颜色和字体颜色
$('#ebtn3').click(function(){
$('#eInput').css({background:'#eee' , color:'red'});//------点击修改样式
});
$('#ebtn4').dblclick(function(){
$('#eInput').css({background:'#eee' , color:'red'});//------双击修改样式
});
$('#ebtn5').mouseover(function(){
$(this).css({background:'#eee' , color:'red'});//------鼠标指针位于元素上触发事件
});
$('#ebtn6').mouseenter(function(){
$(this).css({background:'#eee' , color:'red'});//------鼠标指针穿过元素触发事件
});
$('#ebtn7').mousemove(function(){
$(this).css({background:'#eee' , color:'red'});//------鼠标指针在元素中移动触发事件
});
$('#ebtn8').mouseleave(function(){
$(this).css({background:'#eee' , color:'red'});//------鼠标指针离开元素触发事件
});
$('#ebtn9').mouseout(function(){
$(this).css({background:'#eee' , color:'red'});//------鼠标指针从元素上移开触发事件
});
$('#ebtn10').mousedown(function(){
$(this).css({background:'#eee' , color:'red'});//------鼠标指针在元素上按下鼠标键触发事件
});
$('#ebtn11').mouseup(function(){
$(this).css({background:'#eee' , color:'red'});//------鼠标指针在元素上按下鼠标键双松开触发事件
});
$(document).mousemove(function(e){
$('#page').text('当前鼠标横向位置:' + e.pageX + '当前鼠标纵向位置：' + e.pageY);
});
$('#ebtn13').hover(
function(){
$(this).css({background:'#eee' , color:'red'});
},//------鼠标滑过元素键触发事件
function(){
$(this).css({background:'#ffa200' , color:'#333'});
}//------鼠标离开元素键触发事件
);
$('#ebtn14').click(function(){
$('#eInput').toggle();//点击切换显示/隐藏
});
});
</script>
</body>
</html>
