abstract：總結：大部分總結都在代碼注釋里，這里我再補充一點老師沒講到的。mouseout 與 mouseleave 的區(qū)別：不論鼠標指針離開被選元素還是任何子元素，都會觸發(fā) mouseout 事件。只有在鼠標指針離開被選元素時，才會觸發(fā) mouseleave 事件。mouseover與mouseenter不論鼠標指針穿過被選元素或其子元素，都會觸發(fā) mouseover 事件。只有在鼠標指針穿過被選元素時，才
總結：
大部分總結都在代碼注釋里，這里我再補充一點老師沒講到的。
mouseout 與 mouseleave 的區(qū)別：
不論鼠標指針離開被選元素還是任何子元素，都會觸發(fā) mouseout 事件。
只有在鼠標指針離開被選元素時，才會觸發(fā) mouseleave 事件。
mouseover與mouseenter
不論鼠標指針穿過被選元素或其子元素，都會觸發(fā) mouseover 事件。
只有在鼠標指針穿過被選元素時，才會觸發(fā) 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的操作
// 通過對象的關系，對節(jié)點樹中的元素的屬性進行操作的方法如下；
// addClass() 該方法向被選中的元素添加一個或多個類
// removeClass() 從選中的元素移除一個或多個類
// attr() 設置或返回選中元素的屬性值
// removerAttr() 從被選中的元素中移除屬性
// hasClass() 檢查被選中的元素是否包含指定class
// toggleClass() 對被選中元素進行添加刪除類的切換操作
// 設置內(nèi)容
// text() 該方法返回或設置被選中的元素的文本內(nèi)容
// html() 返回或設置被選中元素的內(nèi)容
// 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() 元素內(nèi)容改變
// click() 元素上鼠標單擊
// dblclick() 元素上鼠標雙擊
// mouseover() 鼠標位于元素上方時
// mouseout() 鼠標指針離開元素時 常與mouseover連用
// mouseenter() 鼠標指針穿過元素時
// mouseleave() 鼠標指針離開元素時，會觸發(fā)moueleave事件，經(jīng)常與mouseenter一起連用
// mousedown() 鼠標指針移動到元素上方并按下鼠標按鍵時
// mouseup() 在元素上松開鼠標按鍵時
// resize() 調(diào)整當前瀏覽器窗口大小時
// pageX() 屬性是鼠標指針的位置，相對于文檔的左邊緣 event.pageX event：必需 參數(shù)來自事件綁定函數(shù)
// pageY() 屬性是鼠標指針的位置，相對于文檔的上邊緣 event.pageY event：必需 參數(shù)來自事件綁定函數(shù)
// mouseover與mouseout的區(qū)別：
// 不論鼠標指針離開被選元素還是任何子元素，都會觸發(fā) mouseout 事件。
// 只有在鼠標指針離開被選元素時，才會觸發(fā) 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: 鼠標移上元素觸發(fā)的一個函數(shù)
// out: 鼠標移除元素促發(fā)的一個函數(shù)
// 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中文網(wǎng)</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>
Correcting teacher：天蓬老師Correction time：2019-02-14 17:21:49
Teacher's summary：jQuery 的重點在以下三塊: selector, dom, ajax , 把這三個掌握就夠用了