摘要：一、實現(xiàn)功能1、鼠標(biāo)移動或移出到矩形內(nèi)，觸發(fā)hover事件背景色和字體顏色發(fā)生改變2、點擊“獲取寬度”按鈕，顯示當(dāng)前矩形的寬度3、點擊“改變寬度”按鈕，彈出輸入框，在輸入框輸入寬度，點擊“確定按鈕”后，矩形的寬度變成輸入的寬度二、功能代碼<!DOCTYPE html> <html> <head> <meta charset="
一、實現(xiàn)功能
1、鼠標(biāo)移動或移出到矩形內(nèi)，觸發(fā)hover事件背景色和字體顏色發(fā)生改變
2、點擊“獲取寬度”按鈕，顯示當(dāng)前矩形的寬度
3、點擊“改變寬度”按鈕，彈出輸入框，在輸入框輸入寬度，點擊“確定按鈕”后，矩形的寬度變成輸入的寬度
二、功能代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../jquery-3.3.1.js"></script>
<style>
.box{
width: 200px;
height: 200px;
background: pink;
margin: 10px 0;
text-align: center;
line-height: 200px;
}
button{
margin-top: 10px;
}
.input{
display: none;
}
.col{
background: cyan;
color: #fff;
}
</style>
</head>
<body>
<div>
<span>hover事件在這里</span>
</div>
<button id="bt1">獲取寬度</button>
<span></span>
<br>
<button id="bt2">改變寬度</button>
<span>
<input type="text" placeholder="請輸入寬度："></input>
<button id="bt3">確定</button>
</span>
<script>
$(function(){
//實現(xiàn)獲取矩形寬度功能
$('#bt1').click(function(){
$('.input').css('display','none')
$('.width_show').text($('.box').width()+'px')
})
//實現(xiàn)彈出輸入框功能
$('#bt2').click(function(){
$('.width_show').text('')
$('.input').css('display','inline')
})
//實現(xiàn)改變矩形寬度功能
$('#bt3').click(function(){
var num = $('.width_content').val()+'px'
$('.box').css('width',num)
$('.width_content').val('')
})
//實現(xiàn)hover功能
$('.box').hover(function(){
$(this).addClass('col')
},function(){
$(this).removeClass('col')
})
})
</script>
</body>
</html>筆記：
常用事件
click()點擊事件
focus()獲取焦點時
blur()失去焦點時
hover(function(){},function(){})鼠標(biāo)移入與移出效果
val()獲取元素值，一般用于表單元素
text()也是獲取元素值
改變css樣式
改變單個樣式：$('selector').css('屬性','屬性值')，屬性與屬性值用逗號隔開
改變多個樣式：$('selector').css({'屬性1':'屬性值1','屬性2':'屬性值2'})，屬性與屬性值用冒號，屬性與屬性之間用逗號隔開
addClass('class')和removeClass('class')增加和刪除屬性，里面的類前面不需要帶‘.’號
批改老師：韋小寶批改時間：2019-01-26 09:21:24
老師總結(jié)：寫的很棒 jQuery使用起來還是比較靈活的 對于像事件效果這里功能還是很多的