摘要：一、獲取/改變CSS的屬性值<!DOCTYPE html><html><head><meta charset="UTF-8"><title>獲取/改變CSS的屬性值</title><script src="https://code.jquery.com/jquery-3.4.1.js&quo
一、獲取/改變CSS的屬性值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>獲取/改變CSS的屬性值</title>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
// 改變單個(gè)元素css屬性值
// $(選擇器).css('屬性名','屬性值')
$('div').css('background','#a500e7');
// 改變多個(gè)元素css屬性值
// $(選擇器).css({'屬性名':'屬性值','屬性名':'屬性值','屬性名':'屬性值'})
$('div').css({'width':'200px','height':'200px'});
// 獲取單個(gè)元素css的值
// $('選擇器').css(屬性名)
alert($('p').css('color'));
})
</script>
<div>
<p style="color:#fff;">hello world!</p>
</div>
</body>
</html>
二、屬性的操作方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>屬性的操作方法</title>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<style>
.box{
width:200px;
height:200px;
background:#00a5e0;
}
.main{
border: 1px solid #000;
}
</style>
</head>
<body>
<script>
$(document).ready(function(){
// addClass() 向元素添加一個(gè)或者多個(gè)類(lèi)
$('div').addClass('box main');
// removeClass() 從元素中移除一個(gè)或多個(gè)類(lèi)
$('div').removeClass('main');
// attr() 設(shè)置或返回被選中元素的屬性值
// alert($('p').attr('style'));
// removeAttr() 移除元素屬性
$('p').removeAttr('style');
// hasClass() 檢查被選中元素是否包含指定class
// alert($('div').hasClass('box'));
// toggleClass()對(duì)元素進(jìn)行添加/刪除類(lèi)的切換操作
$('button').click(function(){
$('div').toggleClass('main');
})
// text() 返回或設(shè)置被選中的元素的文本內(nèi)容
$('p').text('php中文網(wǎng)');
//html() 返回或設(shè)置被選中的元素的內(nèi)容,類(lèi)似innerHTML,可包括html標(biāo)簽
$('p').html('<b>php中文網(wǎng)</b>');
// val() 返回或設(shè)置被選元素的值
$('input').val('請(qǐng)輸入內(nèi)容');
})
</script>
<div>
<p style="color:#fff;">hello world!</p>
<button>點(diǎn)擊</button>
</div>
<input type="text" value="什么都沒(méi)有哦">
</body>
</html>
三、jquery事件方法函數(shù)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery事件方法函數(shù)</title>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
// *不能與<body onload="">一起使用
// blur()元素失去焦點(diǎn)
$('input').blur(function(){
$('input').css('background','#67d8ef');
})
// focus()元素獲得焦點(diǎn)
$('input').focus(function(){
$('input').css('background','#287ec1');
})
// change()元素的值發(fā)生改變的時(shí)候
$('input').change(function(){
$('input').css('background','#f50');
})
// click()單擊事件
$('.div').click(function(){
$('.div').css({'width':'200px','height':'200px'});
})
// dblclick()雙擊事件
$('.div').dblclick(function(){
$('.div').css('background','#00a5e0');
})
// mouseover()鼠標(biāo)指針移入元素上方時(shí)觸發(fā)該事件
$('.box').mouseover(function(){
$('.box').css('width','200px');
})
// mouseenter()鼠標(biāo)指針穿過(guò)元素時(shí)觸發(fā)該事件
$('.box').mouseenter(function(){
$('.box').css('height','200px');
})
// // mousemove()鼠標(biāo)指針在指定元素移動(dòng)時(shí)觸發(fā)該事件
$('.box').mousemove(function(){
$('.box').css('background','#00a5e0');
})
// mouseleave()鼠標(biāo)指針離開(kāi)元素時(shí)
$('.box').mouseleave(function(){
$('.box').css('background','');
})
// mouseout()鼠標(biāo)指針從元素上移開(kāi)時(shí)
$('.box').mouseout(function(){
$('.box').css('width','100px');
$('.box').css('height','100px');
})
// mousedown()鼠標(biāo)指針移動(dòng)到元素上方并按下鼠標(biāo)按鍵時(shí)
$('.box').mousedown(function(){
$('.box').css('background','');
})
// mouseup()當(dāng)在元素上松開(kāi)鼠標(biāo)按鍵時(shí)
$('.box').mouseup(function(){
$('.box').css('background','#00a5e0');
})
// resize()當(dāng)調(diào)整當(dāng)前瀏覽器窗口大小時(shí)
$(window).resize(function(){
alert('窗口調(diào)整成功');
})
// pageX()屬性是鼠標(biāo)指針的位置,event.pageX event,必需,參數(shù)來(lái)自事件綁定函數(shù)
// pageY()屬性是鼠標(biāo)指針的位置,event.pageY event：必需,參數(shù)來(lái)自事件綁定函數(shù)
$(document).mousemove(function(a){
$('.div').html('x: '+a.pageX + '<br>' + 'y: ' + a.pageY);
})
})
</script>
<input type="text" value="">
<div style="width: 100px;height: 100px;background-color: #f50;"></div>
<div style="width: 100px;height: 100px;border:1px solid #000;"></div>
</body>
</html>
四、jquery事件切換
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery事件切換</title>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
// hover(over,out)
// over:鼠標(biāo)移入元素觸發(fā)
// out:鼠標(biāo)移出元素觸發(fā)
$('div').hover(
function(){
$(this).css('background','#00a5e0');
},
function(){
$(this).css('background','#f50');
}
)
// toggle() 如果元素是可見(jiàn)的，就切換為隱藏，否則相反
$('button').click(function(){
$('p').toggle().css('color','#fff');
})
})
</script>
<div style="background:yellow;width: 200px;height:200px;">
<p>hello world!</p>
</div>
<button>點(diǎn)擊</button>
</body>
</html>
批改老師：天蓬老師批改時(shí)間：2019-08-15 10:56:23
老師總結(jié)：事件盡可能用on(), 直接用click之類(lèi)的, 第一只支持冒泡, 第二只能執(zhí)行一次