abstrait：筆記:10:獲取/改變CSS10-1:單個(gè)css屬性$('body').css('backgroundColor','#ccc')10-2:多個(gè)css屬性$('body').css({'屬性名':'屬性值','屬性名':'屬性值'})10-3:獲取單個(gè)css的屬性值$(選
筆記:
10:獲取/改變CSS
10-1:單個(gè)css屬性
$('body').css('backgroundColor','#ccc')
10-2:多個(gè)css屬性
$('body').css({'屬性名':'屬性值','屬性名':'屬性值'})
10-3:獲取單個(gè)css的屬性值
$(選擇器).css('屬性名')
11:操作屬性的方法
11-1:addClass():向被選中的元素添加一個(gè)或多個(gè)類
.box{}.main{}設(shè)置css屬性
$('p').addClass('box main') p標(biāo)簽就回去了這兩個(gè)屬性
11-2:removeClass():移除一個(gè)或多個(gè)類
$('p').removeClass('box main')
11-3:attr():設(shè)置或者返回被選中元素的屬性值
$('p').attr('title','你好')
11-4:removeAttr():移除一個(gè)屬性
$('p').removeAttr('title')
11-5:hasClass():該方法檢查被選中元素是否包含指定class
11-6:toggleClass():對(duì)被選中元素進(jìn)行添加/刪除類的切換操作
$('span,b,p').toggleClass('bb')
11-7:text();該方法返回或者設(shè)置被選中的元素的文本內(nèi)容
$('b').text('hello world')
11-8:html();同text(),但是可以設(shè)置html標(biāo)簽
$('p').html('<h1>hello world</h1>')
11-9:val();返回或者設(shè)置被選中元素的值
$('input').val('我是被修改的值')
12:jQuery事件函數(shù)
12-1:事件方法會(huì)觸發(fā)匹配元素的事件,或者將函數(shù)綁定到所有匹配元素的某個(gè)事件
12-1:ready();當(dāng)DOM已經(jīng)加載,頁(yè)面已經(jīng)加載完,觸發(fā)事件==js的onload
$(document).ready(function(){});不可以與onload同時(shí)使用
12-2:blur();當(dāng)元素失去焦點(diǎn)==onblue
$('input').blur(function(){})
12-3:focus();當(dāng)元素獲得焦點(diǎn)==onfocus
$('input').focus(function(){})
12-4:cheange();當(dāng)元素的值發(fā)生改變的時(shí)候
$('input').change(function(){})
12-5:click();點(diǎn)擊事件
12-6:dblclick();雙擊事件
13:方法
13-1:獲取鼠標(biāo)當(dāng)前位置 pageX() pageY()
$(document).mousemove(function(aa){
$('span').text('x: '+aa.pageX+'y: '+aa.pageY)})
13-2:mouseover();鼠標(biāo)指針位于元素上方時(shí)發(fā)生該事件
13-3:mouseenter();鼠標(biāo)指針穿過元素時(shí)
13-4:mousemove();鼠標(biāo)指針在指定的元素中移動(dòng)時(shí)
13-5:mouseout();鼠標(biāo)指針從元素上移開時(shí)
13-6:mousedown();鼠標(biāo)指針移動(dòng)到元素上方并按下鼠標(biāo)按鍵時(shí)
13-7:mouseup();鼠標(biāo)在元素上松開鼠標(biāo)按鍵時(shí)
13-8:resize();調(diào)整當(dāng)前瀏覽器窗口大小時(shí)
14:事件切換
14-1:hover(over,out)
1:over:鼠標(biāo)移上元素上要觸發(fā)的一個(gè)函數(shù)
2:out:鼠標(biāo)移出元素上要觸發(fā)的一個(gè)函數(shù)
例:$('div').hover(function(){
$(this).css('background','red') 移入
},
function(){
$(this).css('background','pink') 移出
}
) 完整程序 自己判定....
14-2:toggle();如果元素是可見的,就切換為隱藏,否則相反
$('p').togle();后面還可以跟css效果
測(cè)試內(nèi)容:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script type="text/javascript"src="jquery-3.3.1.min.js"></script>
<style type="text/css">
.Size{width: 100px;height: 100px;}
.Color{background-color: #ccc;}
.Size1{width: 150px;height: 150px;background-color: red;}
.Size2{width: 200px;height: 200px;background-color: #ccc;border: 2px solid pink;}
</style>
<title>我的作業(yè)</title>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$(document).mousemove(function(move){
$('#p3').text('x: '+move.pageX+'y: '+move.pageY)
})
$('.bt1').click(function(){
// 向被選中的元素添加多個(gè)類addClass();
$('#div1').addClass('Size Color')
})
$('#bt2').click(function(){
// 向被選中的元素移除多個(gè)類removeClass();
$('#div1').removeClass('Size Color')
})
$('#bt3').click(function(){
// 設(shè)置或者返回被選中元素的屬性值attr();
$('#bt2').attr('disabled','disabled')
})
$('#bt4').click(function(){
// 移除一個(gè)屬性 removeAttr();
$('#text1').removeAttr('value')
})
$('#bt5').click(function(){
// div1是否包含指定class hasClass();
alert($('#div1').hasClass('Size'))
})
$('#bt6').click(function(){
// div1是否包含指定class hasClass();
$('#div1').toggleClass('Size1')
})
$('#bt7').click(function(){
// 修改文本內(nèi)容 text();
$('#bt7').text('我把我自己修改了')
})
$('#bt8').click(function(){
// 修改文本內(nèi)容 html();
$('#bt8').html('<li>我把我自己修改了,還添加了標(biāo)簽</li>')
})
$('#bt9').click(function(){
// 修改文本內(nèi)容 val();
$('#text1').val('姓名-----張三')
})
$('#p1').dblclick(function(){
//雙擊開啟div2及內(nèi)容
$('#div2').removeAttr('hidden')
$('.p1').removeAttr('hidden')
$('#div2').addClass('Size2')
$('#text2').removeAttr('hidden')
})
$('#text2').focus(function(){
//獲取焦點(diǎn)
$('#div2').css('backgroundColor','red')
})
$('#text2').blur(function(){
//失去焦點(diǎn)
$('#div2').css('backgroundColor','blue')
})
$('#text2').change(function(){
//值發(fā)生改變時(shí)
$(this).css('backgroundColor','yellow')
})
$('#p2').hover(
//hover事件切換
function(){
$('#div3').addClass('Size2')
},
function(){
$('#div3').removeClass('Size2')
}
)
$('#bt10').click(function(){
// toggle事件切換
$('button,div,.input1,p').toggle()
})
})
</script>
<p id="p3"> </p>
<p>為保持良好的體驗(yàn)感,請(qǐng)從左向右依次進(jìn)行點(diǎn)擊</p>
<div id="div1"></div>
<button>01-addClass</button>
<button id="bt2">02-removeClass</button>
<button id="bt3">03-attr把移除禁用</button>
<button>04-addClass</button>
<button id="bt5">05-是否包含指定class</button>
<button id="bt6">06-切換操作</button><br>
<input type="text" name="" value="xxxxxxxxxxxxxxxx" id="text1">
<button id="bt4">07-移除文本框內(nèi)容</button>
<button id="bt9">08-修改文本框內(nèi)容</button><br>
<button id="bt7">09-修改文本內(nèi)容</button>
<button id="bt8">10-修改文本內(nèi)容</button>
<p id="p1">11-雙擊開啟事件函數(shù)操作</p>
<div id="div2" hidden>
<p hidden>可測(cè)試:</p>
<p hidden>1:獲得焦點(diǎn)</p>
<p hidden>2:失去焦點(diǎn)</p>
<p hidden>3:值發(fā)生改變情況</p>
<input type="text" name="" value="請(qǐng)改變內(nèi)容試一試"id="text2"hidden>
</div>
<p id="p2">事件的切換</p>
<div id="div3"></div>
<input type="button" name="" value="隱藏/顯示"id="bt10">
</body>
</html>
Professeur correcteur：天蓬老師Temps de correction：2019-03-08 09:36:56
Résumé du professeur：關(guān)于事件的總結(jié), 很全面,你可以把這些打印出來, 不斷的提示自己,以加深記憶