abstrakt：<!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="多個(gè)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="設(shè)置屬性">
<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="設(shè)置文本">
<input type="text" id="btn10" value="設(shè)置html">
<input type="text" id="btn11" value="設(shè)置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');//------改變第一個(gè)li的css字體顏色
});
$('#btn1').click(function(){
$('li:first').css({color:'red', fontWeight:'600'});//------改變第一個(gè)li的css字體顏色和加粗
});
$('#btn2').click(function(){
alert($('li:first').css('color'));//------獲取第一個(gè)li的css字體顏色,獲取的是rgb
});
$('#btn3').click(function(){
$('li:first').addClass('bg_red font_color');//------給第一個(gè)li加bg_red和font_color樣式
});
$('#btn4').click(function(){
$('li:first').removeClass('bg_red');//------給第一個(gè)li移除bg_red樣式
});
$('#btn5').click(function(){
$('li:first').attr('hidden','hidden');//------給第一個(gè)li添加屬性
alert($('li:first').attr('hidden'));
});
$('#btn6').click(function(){
$('li:first').removeAttr('hidden','hidden');//------給第一個(gè)li移除屬性
alert($('li:first').attr('hidden'));
});
$('#btn7').click(function(){
$('li').each(function(){
if($(this).hasClass('font_w')){//------查找li中是否含有font_w類, 如果有使之顏色變?yōu)榧t色,沒有變?yōu)樗{(lán)色
$(this).css('color','red');
}else{
$(this).css('color','blue');
}
})
});
$('#btn8').click(function(){
$('li:first').toggleClass('font_w');//------給第一個(gè)li添加/移除class
});
$('#btn9').click(function(){
$('li:first').text('已經(jīng)成功修改了文本內(nèi)容');//------修改第一個(gè)li的文本內(nèi)容
});
$('#btn10').click(function(){
$('li:first').html('<b>html已經(jīng)成功修改了內(nèi)容</b>');//------修改第一個(gè)li的html內(nèi)容
});
$('#btn11').click(function(){
$('#setVal').val('已經(jīng)成功添加了val內(nèi)容');//------修改第一個(gè)li的html內(nèi)容
}); */
$('#eInput').focus(function(){
$(this).css({background:'#eee' , color:'red'})
});//------獲取焦點(diǎn)更改背景顏色和字體顏色
$('#eInput').blur(function(){
$(this).css({background:'#fff' , color:'#333'})
});//------失去焦點(diǎn)更改背景顏色和字體顏色
$('#eInput1').change(function(){
$(this).css({background:'red' , color:'#fff'})
});//------失去焦點(diǎn)更改背景顏色和字體顏色
$('#ebtn3').click(function(){
$('#eInput').css({background:'#eee' , color:'red'});//------點(diǎn)擊修改樣式
});
$('#ebtn4').dblclick(function(){
$('#eInput').css({background:'#eee' , color:'red'});//------雙擊修改樣式
});
$('#ebtn5').mouseover(function(){
$(this).css({background:'#eee' , color:'red'});//------鼠標(biāo)指針位于元素上觸發(fā)事件
});
$('#ebtn6').mouseenter(function(){
$(this).css({background:'#eee' , color:'red'});//------鼠標(biāo)指針穿過元素觸發(fā)事件
});
$('#ebtn7').mousemove(function(){
$(this).css({background:'#eee' , color:'red'});//------鼠標(biāo)指針在元素中移動(dòng)觸發(fā)事件
});
$('#ebtn8').mouseleave(function(){
$(this).css({background:'#eee' , color:'red'});//------鼠標(biāo)指針離開元素觸發(fā)事件
});
$('#ebtn9').mouseout(function(){
$(this).css({background:'#eee' , color:'red'});//------鼠標(biāo)指針從元素上移開觸發(fā)事件
});
$('#ebtn10').mousedown(function(){
$(this).css({background:'#eee' , color:'red'});//------鼠標(biāo)指針在元素上按下鼠標(biāo)鍵觸發(fā)事件
});
$('#ebtn11').mouseup(function(){
$(this).css({background:'#eee' , color:'red'});//------鼠標(biāo)指針在元素上按下鼠標(biāo)鍵雙松開觸發(fā)事件
});
$(document).mousemove(function(e){
$('#page').text('當(dāng)前鼠標(biāo)橫向位置:' + e.pageX + '當(dāng)前鼠標(biāo)縱向位置：' + e.pageY);
});
$('#ebtn13').hover(
function(){
$(this).css({background:'#eee' , color:'red'});
},//------鼠標(biāo)滑過元素鍵觸發(fā)事件
function(){
$(this).css({background:'#ffa200' , color:'#333'});
}//------鼠標(biāo)離開元素鍵觸發(fā)事件
);
$('#ebtn14').click(function(){
$('#eInput').toggle();//點(diǎn)擊切換顯示/隱藏
});
});
</script>
<!--
Dom操作
獲取改變css屬性
$(選擇器).css('屬性名' ,'屬性值')--改變單個(gè)css屬性
$(選擇器).css({'屬性名1':'屬性值1' , '屬性名2':'屬性值2' , '屬性名3':'屬性值3' })---改變多個(gè)css屬性
$(選擇器).css('屬性名')---獲取單個(gè)css的屬性值
jquery的操作屬性原理還是對(duì)于DOM的操作，通過對(duì)象的關(guān)系，對(duì)節(jié)點(diǎn)樹中的元素的屬性進(jìn)行操作的方法有以下：
addClass()該方法向被選中的元素添加一個(gè)或者多個(gè)類
removeClass()該方法從被選中的元素移除一個(gè)或者多個(gè)類
attr()該方法設(shè)置或者返回被選中元素的屬性值
removeAttr()該方法從被選中的元素中移除屬性
hasClass()該方法檢查被選中的元素是否包含指定class
toggleClass()該方法對(duì)被選中元素進(jìn)行添加刪除類的切換操作
設(shè)置內(nèi)容：
text()該方法返回或者設(shè)置被選中的元素的文本內(nèi)容
html()該方法返回或者設(shè)置被選中的元素的內(nèi)容(類似innerHTML 可以包括html標(biāo)簽)
val()該方法返回或者設(shè)置被選元素的值
<pre>
事件操作
在jquery中是以調(diào)用事件函數(shù)的形式來(lái)觸發(fā)事件的，如js中的onclick事件，在jquery則用click()來(lái)替代
簡(jiǎn)單的理解：事件方法會(huì)觸發(fā)匹配元素的事件，或者將函數(shù)綁定到所有匹配元素的某個(gè)事件
ready()當(dāng)我們的DOM已經(jīng)加載，頁(yè)面已經(jīng)加載完，觸發(fā)的事件==js的onload
語(yǔ)法：
$(document).ready(function(){
});
*不能與<body onload="">一起使用
blur()當(dāng)元素失去焦點(diǎn)==onblur
focus()當(dāng)元素獲得焦點(diǎn)
change()當(dāng)元素的值發(fā)生改變的時(shí)候
click()點(diǎn)擊事件
dblclick()雙擊事件
mouseover()當(dāng)鼠標(biāo)指針位于元素上方時(shí)會(huì)發(fā)生mouseover事件
mouseenter()當(dāng)鼠標(biāo)指針穿過元素時(shí)會(huì)發(fā)生mouseenter事件
mousemove()當(dāng)鼠標(biāo)指針在指定的元素中移動(dòng)時(shí)，就會(huì)發(fā)生該事件
mouseleave()當(dāng)鼠標(biāo)指針離開元素時(shí)
mouseout()當(dāng)鼠標(biāo)指針從元素上移開時(shí)
mousedown()當(dāng)鼠標(biāo)指針移動(dòng)到元素上方并按下鼠標(biāo)按鍵時(shí)
mouseup()當(dāng)在元素上松開鼠標(biāo)按鍵時(shí)
pageX()屬性是鼠標(biāo)指針的位置，相對(duì)于文檔的左邊緣event.pageX event:必需參數(shù)來(lái)自事件綁定函數(shù)
pageY()屬性是鼠標(biāo)指針的位置，相對(duì)于文檔的上邊緣event.pageY event:必需參數(shù)來(lái)自事件綁定函數(shù)
事件切換
hover(over,out)兩種狀態(tài)
over:鼠標(biāo)移上元素上要觸發(fā)的一個(gè)函數(shù)
out:鼠標(biāo)移出元素上要觸發(fā)的一個(gè)函數(shù)
toggle()如果元素是可見的，就切換為隱藏，否則相反
</pre>
-->
</body>
</html>
Korrigierender Lehrer：查無(wú)此人Korrekturzeit：2019-04-25 13:36:56
Zusammenfassung des Lehrers：完成的不錯(cuò)。jq比js簡(jiǎn)單很多，多練習(xí)可以代替常規(guī)js。繼續(xù)加油。