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