abstrait：<!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、請點擊我切換事件</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>當前鼠標位置：<span></span>
</div>
<div>調整窗口大小次數(shù)：<b></b>
</div>
<script>
$(document).ready(function() {
//一、jquery改變/獲取CSS
//改變多個CSS屬性
$('.box1').css({
'width': '30px',
'height': '30px'
});
//改變單個CSS屬性
$('.box1').css('background', '#888');
//獲取單個CSS屬性
console.log($('.box1').css('width'));
//二、jquery操作屬性的方法
//該方法向被選中元素添加一個或者多個類,類名前不用加.
$('div:eq(1)').addClass('box2 box3');
//該方法從被選中元素移除一個或者多個類
$('div:eq(1)').removeClass('box3');
//該方法設置或者返回被選中元素的屬性值
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'));
//該方法對被選中元素進行添加/刪除類的切換操作
$('div:eq(4)').click(function() {
$(this).toggleClass('box3');
})
//該方法返回或者設置被選中的元素的文本內容
$('#text1').text('6、這個是我的text文本');
console.log($('#text1').text());
//該方法返回或者設置被選中的元素的內容，包括標簽
$('#text1').html('<b>7、我是有標簽的！</b>');
console.log($('#text1').text());
//該方法返回或者設置被選元素的值
console.log($('input').val());
$('input').val('這個是我新的value值');
//三、jquery的事件函數(shù)
//ready()頁面已經(jīng)加載完，觸發(fā)的事件，上邊的文檔就緒函數(shù)格式
//當元素失去焦點時觸發(fā)
$('input:eq(0)').blur(function() {
$(this).css('background', 'red');
});
//當元素獲取焦點時觸發(fā)
$('input:eq(0)').focus(function() {
$(this).css('background', '#fff');
});
//當元素的值發(fā)生改變失去焦點的時候觸發(fā)
$('[type=text2]').change(function() {
$(this).css('background', 'pink');
});
//單擊事件
$('#one').click(function() {
$(this).css('background', 'red');
});
//雙擊事件
$('#two').dblclick(function() {
$(this).css('background', 'red');
});
//不論鼠標指針移出或者移上被選元素還是子元素，都會觸發(fā)這2個事件，成對出現(xiàn)
$('#big').mouseover(function() {
$(this).css('background', 'pink');
console.log('mouseover進入');
});
$('#big').mouseout(function() {
$(this).css('background', '#fff');
console.log('mouseover離開');
});
//只有當鼠標指針移出或者移上被選元素時才會觸發(fā),進入子元素不會再觸發(fā)事件，成對出現(xiàn)
$('#big1').mouseenter(function() {
$(this).css('background', 'pink');
console.log('mouseenter進入');
});
$('#big1').mouseleave(function() {
$(this).css('background', '#fff');
console.log('mouseleave離開');
});
//當鼠標指針在選定元素移動，就會觸發(fā)該事件
$('#move').mousemove(function() {
$(this).css('background', '#888');
console.log('mousemove再移動');
});
//當鼠標指針移動到元素上方并按下鼠標按鍵時
$('#down').mousedown(function() {
$(this).css('background', 'red');
});
//當在元素上松開鼠標按鍵時
$('#down').mouseup(function() {
$(this).css('background', 'blue');
});
//當調整當前瀏覽器窗口大小時
var a = 1;
$(window).resize(function() {
$('b').text(a++);
})
//相對于文檔左邊緣和上邊緣，獲得鼠標指針的位置
$(document).mousemove(function(event) {
$('span').text('X:' + event.pageX + ' Y:' + event.pageY);
})
})
</script>
</body>
</html>
Professeur correcteur：滅絕師太Temps de correction：2019-02-22 17:45:35
Résumé du professeur：作業(yè)內容和作業(yè)題目對不上號啊,希望知識點你都好好掌握