摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> &
<!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>
<!-- <div class="dom_test">
<ul>
<li>Dom操作获取改变css属性</li>
<li class="font_w">Dom操作获取改变css属性</li>
<li>Dom操作获取改变css属性</li>
</ul>
<input type="text" id="setVal" value="" />
<p>
<input type="text" id="btn" value="改变css属性">
<input type="text" id="btn1" value="多个css属性">
<input type="text" id="btn2" value="css值">
<br>
<input type="text" id="btn3" value="添加class">
<input type="text" id="btn4" value="移除class">
<input type="text" id="btn5" value="设置属性">
<input type="text" id="btn6" value="移除属性">
<input type="text" id="btn7" value="查找class">
<input type="text" id="btn8" value="添加/删除class">
<br>
<input type="text" id="btn9" value="设置文本">
<input type="text" id="btn10" value="设置html">
<input type="text" id="btn11" value="设置val">
</p>
</div> -->
<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>
<!--
Dom操作
获取改变css属性
$(选择器).css('属性名' ,'属性值')--改变单个css属性
$(选择器).css({'属性名1':'属性值1' , '属性名2':'属性值2' , '属性名3':'属性值3' })---改变多个css属性
$(选择器).css('属性名')---获取单个css的属性值
jquery的操作属性原理还是对于DOM的操作，通过对象的关系，对节点树中的元素的属性进行操作的方法有以下：
addClass()该方法向被选中的元素添加一个或者多个类
removeClass()该方法从被选中的元素移除一个或者多个类
attr()该方法设置或者返回被选中元素的属性值
removeAttr()该方法从被选中的元素中移除属性
hasClass()该方法检查被选中的元素是否包含指定class
toggleClass()该方法对被选中元素进行添加删除类的切换操作
设置内容：
text()该方法返回或者设置被选中的元素的文本内容
html()该方法返回或者设置被选中的元素的内容(类似innerHTML 可以包括html标签)
val()该方法返回或者设置被选元素的值
<pre>
事件操作
在jquery中是以调用事件函数的形式来触发事件的，如js中的onclick事件，在jquery则用click()来替代
简单的理解：事件方法会触发匹配元素的事件，或者将函数绑定到所有匹配元素的某个事件
ready()当我们的DOM已经加载，页面已经加载完，触发的事件==js的onload
语法：
$(document).ready(function(){
});
*不能与<body onload="">一起使用
blur()当元素失去焦点==onblur
focus()当元素获得焦点
change()当元素的值发生改变的时候
click()点击事件
dblclick()双击事件
mouseover()当鼠标指针位于元素上方时会发生mouseover事件
mouseenter()当鼠标指针穿过元素时会发生mouseenter事件
mousemove()当鼠标指针在指定的元素中移动时，就会发生该事件
mouseleave()当鼠标指针离开元素时
mouseout()当鼠标指针从元素上移开时
mousedown()当鼠标指针移动到元素上方并按下鼠标按键时
mouseup()当在元素上松开鼠标按键时
pageX()属性是鼠标指针的位置，相对于文档的左边缘event.pageX event:必需参数来自事件绑定函数
pageY()属性是鼠标指针的位置，相对于文档的上边缘event.pageY event:必需参数来自事件绑定函数
事件切换
hover(over,out)两种状态
over:鼠标移上元素上要触发的一个函数
out:鼠标移出元素上要触发的一个函数
toggle()如果元素是可见的，就切换为隐藏，否则相反
</pre>
-->
</body>
</html>
批改老师：查无此人批改时间：2019-04-25 13:36:56
老师总结：完成的不错。jq比js简单很多，多练习可以代替常规js。继续加油。
