jQuery的DOM操作
总结：
大部分总结都在代码注释里，这里我再补充一点老师没讲到的。
mouseout 与 mouseleave 的区别：
不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。
只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。
mouseover与mouseenter
不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。
只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。
代码：
<!DOCTYPE html>
<html>
<head>
<title>jQuery获取/改变CSS</title>
<script type="text/javascript" src="jq.js"></script>
<style type="text/css">
.box, div{
height:100px;width:100px; border:1px solid #ffe411;
}
.ft{
font-weight: bold; font-size: 40px; color: red;
}
.f_color{
color: red;
}
</style>
</head>
<body>
<script type="text/javascript">
// jQuery获取/改变CSS
// $(document).ready(function(){
// //改变单个属性
// // $('选择器').css('属性名','属性值');
// $('body').css('backgroundColor', '#ffe411');
// //改变多个属性
// // $('选择器').css({'属性名1':'属性值1', '属性名2':'属性值2', '属性名3':'属性值3'});
// $('p').css({'color':'red', 'font-size':'40px', 'font-weight':'bold'});
// //获取单个CSS的属性值
// alert($('div').css('background-color'));
// alert($('div').css('height'));
// alert($('body').css('background'));
// })
// jQuery操作属性的方法
// jQuery操作属性的原理还是对于DOM的操作
// 通过对象的关系，对节点树中的元素的属性进行操作的方法如下；
// addClass() 该方法向被选中的元素添加一个或多个类
// removeClass() 从选中的元素移除一个或多个类
// attr() 设置或返回选中元素的属性值
// removerAttr() 从被选中的元素中移除属性
// hasClass() 检查被选中的元素是否包含指定class
// toggleClass() 对被选中元素进行添加删除类的切换操作
// 设置内容
// text() 该方法返回或设置被选中的元素的文本内容
// html() 返回或设置被选中元素的内容
// val() 返回或设置被选中元素的值
// $(document).ready(function(){
// $('p').addClass('box ft');
// $('p').removeClass('box ft');
// alert($('p').attr('title'));
// $('p').attr('title', '你好');
// alert($('p').attr('title'));
// $('.bt').click(function(){
// $('img').removeAttr('src');
// })
// $('.btn').click(function(){
// alert($('div').hasClass('one'));
// })
// $('button').click(function(){
// $('p,b,span').toggleClass('f_color');
// })
// alert($('p').text());
// $('p').text('xxoo本x');
// $('b').html('<h1>123</h1>');
// $('input').val('改变之后');
// })
// jQuery事件
// ready() 不能与<body onload=""> 一起使用
// blur() 元素失去焦点
// focus() 元素获得焦点
// change() 元素内容改变
// click() 元素上鼠标单击
// dblclick() 元素上鼠标双击
// mouseover() 鼠标位于元素上方时
// mouseout() 鼠标指针离开元素时 常与mouseover连用
// mouseenter() 鼠标指针穿过元素时
// mouseleave() 鼠标指针离开元素时，会触发moueleave事件，经常与mouseenter一起连用
// mousedown() 鼠标指针移动到元素上方并按下鼠标按键时
// mouseup() 在元素上松开鼠标按键时
// resize() 调整当前浏览器窗口大小时
// pageX() 属性是鼠标指针的位置，相对于文档的左边缘 event.pageX event：必需 参数来自事件绑定函数
// pageY() 属性是鼠标指针的位置，相对于文档的上边缘 event.pageY event：必需 参数来自事件绑定函数
// mouseover与mouseout的区别：
// 不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。
// 只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。
// $(document).ready(function(){
// $('input').blur(function(){
// $('input').css('background-color','#eee');
// })
// $('input').focus(function(){
// $('input').css('background-color','#ffe411');
// });
// $('input').change(function(){
// $('input').css('background-color', 'blue');
// })
// $('button').click(function(){
// $('div').css('background-color', 'red');
// })
// $('button').dblclick(function(){
// $('div').css('background-color', 'blue');
// })
// $(document).mousemove(function(aa){
// $('span').text( '当前鼠标的位置 ' + 'x: '+aa.pageX+' y: '+aa.pageY);
// })
// a=0;
// $(window).resize(function(){
// $('b').html('窗口缩放' + (a++) + '次');
// })
// $('.box').mouseenter(function(){
// $('.box').css('width', '100px');
// })
// $('.box').mouseleave(function(){
// $('.box').css('width', '500px');
// })
// $('.box').mouseout(function(){
// $('.box').css('width', '300px');
// })
// })
// jQuery切换
// hover(over, out)
// over: 鼠标移上元素触发的一个函数
// out: 鼠标移除元素促发的一个函数
// toggle() 如果元素是可见的，就切换为隐藏，反之，相反。
$(document).ready(function(){
$('.dv').hover(
function(){
$(this).css('background-color', 'red');
},
function(){
$(this).css('background-color', 'blue');
}
)
$('button').click(function(){
$('.d').toggle().css('background-color', '#ffe411');
})
})
</script>
<!-- <p>php中文网</p>
<div style="width: 100px; height:100px; background-color: blue;"></div> -->
<!-- <p title="contain">wjh小别墅</p>
<img src="1.jpg">
<button class="bt">点击删除图片</button>
<div class="">地源热泵</div>
<button class="btn">点击</button>
<p>大家好，我是wjh_xxoo</p>
<b>xxoo123</b><br><br>
<span>521 let`s go</span><br><br>
<button>button</button> <br><br>
<input type="text" name="" value="此前的值"> -->
<!-- <input type="text" name="">
<div class="box"></div>
<button>点击</button>
<span> </span> <br>
<b></b> -->
<div class="dv"></div>
<div class="d"></div>
<button>点击</button>
</body>
</html>