摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8">
<!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">
<title>jquery的DOM操作</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style>
div {
margin-bottom: 5px;
}
.box2 {
width: 30px;
height: 30px;
border: 1px solid #888;
}
.box3 {
background: #ff6500;
}
</style>
</head>
<body>
<div>1</div>
<div>2</div>
<div id="red" style="background: red" name="red">3</div>
<div id="blue" style="background: blue">4</div>
<div>5、請(qǐng)點(diǎn)擊我切換事件</div>
<div id="text1">6</div>
<div id="text2">7</div>
<form action="">
<input type="text" value="我的value值">
<input type="text2" value="我的value值">
</form>
<div id="one" style="border: 1px solid #888;width:100px;height:30px;">單擊事件</div>
<div id="two" style="border: 1px solid #888;width:100px;height:30px;">雙擊事件</div>
<div id="big" style="border: 1px solid #888;width:200px;height:200px;">123
<div id="small" style="border: 1px solid #888;width:100px;height:100px;">456</div>
</div>
<div id="big1" style="border: 1px solid #888;width:200px;height:200px;">123
<div id="small1" style="border: 1px solid #888;width:100px;height:100px;">456</div>
</div>
<div id="move" style="border: 1px solid #888;width:100px;height:100px;">move</div>
<div id="down" style="border: 1px solid #888;width:100px;height:100px;">down</div>
<div>當(dāng)前鼠標(biāo)位置：<span></span>
</div>
<div>調(diào)整窗口大小次數(shù)：<b></b>
</div>
<script>
$(document).ready(function() {
//一、jquery改變/獲取CSS
//改變多個(gè)CSS屬性
$('.box1').css({
'width': '30px',
'height': '30px'
});
//改變單個(gè)CSS屬性
$('.box1').css('background', '#888');
//獲取單個(gè)CSS屬性
console.log($('.box1').css('width'));
//二、jquery操作屬性的方法
//該方法向被選中元素添加一個(gè)或者多個(gè)類,類名前不用加.
$('div:eq(1)').addClass('box2 box3');
//該方法從被選中元素移除一個(gè)或者多個(gè)類
$('div:eq(1)').removeClass('box3');
//該方法設(shè)置或者返回被選中元素的屬性值
console.log($('#red').attr('style'));
$('#red').attr('style', 'background: lightblue');
$('#red').attr('name', 'blue');
console.log($('#red').attr('name'));
//該方法從被選中元素中移除屬性
$('#blue').removeAttr('style');
//該方法檢查被選中的元素是否包含指定class
console.log($('div:eq(0)').hasClass('box1'));
console.log($('div:eq(0)').hasClass('box2'));
//該方法對(duì)被選中元素進(jìn)行添加/刪除類的切換操作
$('div:eq(4)').click(function() {
$(this).toggleClass('box3');
})
//該方法返回或者設(shè)置被選中的元素的文本內(nèi)容
$('#text1').text('6、這個(gè)是我的text文本');
console.log($('#text1').text());
//該方法返回或者設(shè)置被選中的元素的內(nèi)容，包括標(biāo)簽
$('#text1').html('<b>7、我是有標(biāo)簽的！</b>');
console.log($('#text1').text());
//該方法返回或者設(shè)置被選元素的值
console.log($('input').val());
$('input').val('這個(gè)是我新的value值');
//三、jquery的事件函數(shù)
//ready()頁面已經(jīng)加載完，觸發(fā)的事件，上邊的文檔就緒函數(shù)格式
//當(dāng)元素失去焦點(diǎn)時(shí)觸發(fā)
$('input:eq(0)').blur(function() {
$(this).css('background', 'red');
});
//當(dāng)元素獲取焦點(diǎn)時(shí)觸發(fā)
$('input:eq(0)').focus(function() {
$(this).css('background', '#fff');
});
//當(dāng)元素的值發(fā)生改變失去焦點(diǎn)的時(shí)候觸發(fā)
$('[type=text2]').change(function() {
$(this).css('background', 'pink');
});
//單擊事件
$('#one').click(function() {
$(this).css('background', 'red');
});
//雙擊事件
$('#two').dblclick(function() {
$(this).css('background', 'red');
});
//不論鼠標(biāo)指針移出或者移上被選元素還是子元素，都會(huì)觸發(fā)這2個(gè)事件，成對(duì)出現(xiàn)
$('#big').mouseover(function() {
$(this).css('background', 'pink');
console.log('mouseover進(jìn)入');
});
$('#big').mouseout(function() {
$(this).css('background', '#fff');
console.log('mouseover離開');
});
//只有當(dāng)鼠標(biāo)指針移出或者移上被選元素時(shí)才會(huì)觸發(fā),進(jìn)入子元素不會(huì)再觸發(fā)事件，成對(duì)出現(xiàn)
$('#big1').mouseenter(function() {
$(this).css('background', 'pink');
console.log('mouseenter進(jìn)入');
});
$('#big1').mouseleave(function() {
$(this).css('background', '#fff');
console.log('mouseleave離開');
});
//當(dāng)鼠標(biāo)指針在選定元素移動(dòng)，就會(huì)觸發(fā)該事件
$('#move').mousemove(function() {
$(this).css('background', '#888');
console.log('mousemove再移動(dòng)');
});
//當(dāng)鼠標(biāo)指針移動(dòng)到元素上方并按下鼠標(biāo)按鍵時(shí)
$('#down').mousedown(function() {
$(this).css('background', 'red');
});
//當(dāng)在元素上松開鼠標(biāo)按鍵時(shí)
$('#down').mouseup(function() {
$(this).css('background', 'blue');
});
//當(dāng)調(diào)整當(dāng)前瀏覽器窗口大小時(shí)
var a = 1;
$(window).resize(function() {
$('b').text(a++);
})
//相對(duì)于文檔左邊緣和上邊緣，獲得鼠標(biāo)指針的位置
$(document).mousemove(function(event) {
$('span').text('X:' + event.pageX + ' Y:' + event.pageY);
})
})
</script>
</body>
</html>
批改老師：滅絕師太批改時(shí)間：2019-02-22 17:45:35
老師總結(jié)：作業(yè)內(nèi)容和作業(yè)題目對(duì)不上號(hào)啊,希望知識(shí)點(diǎn)你都好好掌握