abstrait：第一章 jQuery獲取/操作css的方法改變單個(gè)css屬性:$("選擇器").css('屬性名','屬性值')改變多個(gè)css屬性:$("選擇器").css({'屬性名1':'屬性值1','屬性名2':'屬性值2'})獲取單個(gè)css屬性值:$("選擇器&
第一章 jQuery獲取/操作css的方法
改變單個(gè)css屬性:
$("選擇器").css('屬性名','屬性值')
改變多個(gè)css屬性:
$("選擇器").css({'屬性名1':'屬性值1','屬性名2':'屬性值2'})
獲取單個(gè)css屬性值:
$("選擇器").css('屬性名')
(可用alert彈窗的形式將此單個(gè)css屬性值彈出方便觀察)
完整代碼如下:
<!DOCTYPE html>
<html>
<head>
<title>jQuery獲取/改變CSS</title>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-3.3.1.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
//1.改變單個(gè)css屬性
// $("選擇器").css('屬性名','屬性值')
$('body').css('backgroundColor','#ccc')
//2.改變多個(gè)css屬性
// $("選擇器").css({'屬性名1':'屬性值1','屬性名2':'屬性值2'})
$('p').css({'color':'red','fontSize':'40px','fontWeight':'bold'})
//3.獲取單個(gè)css屬性值
//$("選擇器").css('屬性名')
// alert($("div").css('background'))
alert($('div').css('width'))
alert($('div').css('background'))
})
</script>
<p>老人頭撲克</p>
<div style="width: 200px;height: 100px;background: blue;"></div>
</body>
</html>第二章 jQuery操作屬性的方法
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)行添加/刪除類的切換操作
關(guān)于設(shè)置內(nèi)容的：
①：text() 該方法返回或者設(shè)置被選中的元素的文本內(nèi)容
②：html() 該方法返回或者設(shè)置被選中的元素的內(nèi)容（類似innerHTML 可以包括html標(biāo)簽）
③：val() 該方法返回或者設(shè)置被選元素的值
完整代碼如下：
<!DOCTYPE html>
<html>
<head>
<title>jQuery操作屬性的方法(1)</title>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<style type="text/css">
/* .box{color:#583882;}
.main{font-size: 40px;font-weight: bold;}*/
.bb{color: red;}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$('p').addClass('box main')//多個(gè)類,用空格分開
$('p').removeClass('box')
alert($('p').attr('title'))
$('p').attr('title','James')
alert($('p').attr('title'))
$('button').click(function(){
$('img').removeAttr('src')
})
$('button').click(function(){
alert($('div').hasClass('one'))
})
$('button').click(function(){
$('span,b,p').toggleClass('bb')
})
//alert($('span').text('大家好,我是古天樂'))
//$('span').text('大家好,我是古天樂')
$('b').text('一起來玩')
//$('p').text('是兄弟就來砍我')
//alert($('p').html())
$('p').html('<h1>來到就是賺到</h1>')
alert($('input').val())
$('input').val('我是孫笑川')
})
</script>
<p title="content">洛杉磯湖人隊(duì)</p>
<img src="images/1.jpg">
<button>點(diǎn)擊刪除圖片</button>
<div class="one">你美死了</div>
<button>點(diǎn)擊</button>
<span>大家好,我是渣渣輝</span><br>
<b>歡迎來到</b>
<p>貪玩藍(lán)月</p><br>
<button>點(diǎn)擊切換</button>
<input type="text" name="" value="我是元素的值">
</body>
</html>第三章 jQuery事件方法
jQuery的事件處理與JavaScript的事件在類型和功能上差不多，在具體的寫法和表示上有所區(qū)別，相較于JavaScript更簡單方便些。
在jQuery中是以調(diào)用事件函數(shù)的形式來觸發(fā)事件的，簡單理解就是事件方法會(huì)觸發(fā)匹配元素的事件，或者將函數(shù)綁定到所有匹配元素的某個(gè)事件。
ready()：當(dāng)DOM加載時(shí)，頁面已經(jīng)加載完
//語法：
// $(document).ready(function(){
// })
//*不能與<body onload="">一起使用blur() 當(dāng)元素失去焦點(diǎn)
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í)
resize() 當(dāng)調(diào)整當(dāng)前瀏覽器窗口大小時(shí)
pageX() 屬性是鼠標(biāo)指針的位置，相對(duì)于文檔的左邊緣 event.pageX event：必需 參數(shù)來自事件綁定函數(shù)。
pageY() 屬性是鼠標(biāo)指針的位置，相對(duì)于文檔的上邊緣 event.pageY event：必需 參數(shù)來自事件綁定函數(shù)。
完整html代碼：
<!DOCTYPE html>
<html>
<head>
<title>jQuery事件方法</title>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<style type="text/css">
div{width: 100px;height: 100px;background: greenyellow; margin-top:20px;}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
// $('input').blur(function(){
// $('input').css('background','red')
// })
// $('input').focus(function(){
// $('input').css('background','blue')
// })
// $('input').change(function(){
// $('input').css('background','pink')
// })
// $('button').click(function(){
// $('div').css('background','orange')
// })
// $('div').dblclick(function(){
// $(this).css('background','pink')
// })
//
// $(document).mousemove(function(aa){
// $('span').text('x:'+aa.pageX+ ' y:'+aa.pageY)
// })
// a=0
// $(window).resize(function(){
// // alert('動(dòng)啥呀')
// $('b').text(a++)
// })
// $('div').mouseover(function(){
// $('div').css('background','pink')
// })
// $('div').mouseenter(function(){
// $('div').css('color','#fff')
// })
$('div').mousemove(function(){
$('div').css('color','#bbb')
})
})
</script>
<!-- <input type="text" name="">
<div style="width: 100px;height: 100px;background: red; margin-top:20px;"></div>
<button>點(diǎn)擊</button> -->
<!-- <div>
當(dāng)前鼠標(biāo)的位置: <span> </span>
</div>
<div>
頁面被調(diào)整次數(shù): <b> </b>
</div> -->
<!-- <div>mouseover事件</div> -->
<!-- <div>mouseenter事件</div> -->
<div>mousemove事件</div>
<div>111</div>
</body>
</html>第四章 jQuery事件切換
hover（over，out）
over：鼠標(biāo)移上元素上時(shí)要觸發(fā)的一個(gè)函數(shù)。
out：鼠標(biāo)移出元素上時(shí)要觸發(fā)的一個(gè)函數(shù)。
（在使用jQuery函數(shù)時(shí)，在hover中插入函數(shù)中第一個(gè)設(shè)置的內(nèi)容是其屬性中的over觸發(fā)的函數(shù)，第二個(gè)是out觸發(fā)的函數(shù)。）
toggle（）如果元素是可見的，就切換隱藏，否則相反。
完整代碼：
<!DOCTYPE html>
<html>
<head>
<title>jQuery事件切換</title>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<style type="text/css">
div,p{width: 200px;height: 200px;border: 1px solid #ccc;}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$('div').hover(
function(){
$(this).css('background','orange')
},
function(){
$(this).css('color','#fff')
}
)
$('button').click(function(){
$('p').toggle().css('background','yellowgreen')
})
})
</script>
<div>動(dòng)情是容易的</div>
<p>因?yàn)椴粫?huì)太久</p>
<button>點(diǎn)擊</button>
</body>
</html>
Professeur correcteur：查無此人Temps de correction：2019-01-14 16:41:40
Résumé du professeur：不錯(cuò)呀，你這章課程學(xué)習(xí)了那么多，有沒有感覺自己很強(qiáng)大。繼續(xù)加油哦。