摘要：<!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>调整窗口大小次数：<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的事件函数
//ready()页面已经加载完，触发的事件，上边的文档就绪函数格式
//当元素失去焦点时触发
$('input:eq(0)').blur(function() {
$(this).css('background', 'red');
});
//当元素获取焦点时触发
$('input:eq(0)').focus(function() {
$(this).css('background', '#fff');
});
//当元素的值发生改变失去焦点的时候触发
$('[type=text2]').change(function() {
$(this).css('background', 'pink');
});
//单击事件
$('#one').click(function() {
$(this).css('background', 'red');
});
//双击事件
$('#two').dblclick(function() {
$(this).css('background', 'red');
});
//不论鼠标指针移出或者移上被选元素还是子元素，都会触发这2个事件，成对出现
$('#big').mouseover(function() {
$(this).css('background', 'pink');
console.log('mouseover进入');
});
$('#big').mouseout(function() {
$(this).css('background', '#fff');
console.log('mouseover离开');
});
//只有当鼠标指针移出或者移上被选元素时才会触发,进入子元素不会再触发事件，成对出现
$('#big1').mouseenter(function() {
$(this).css('background', 'pink');
console.log('mouseenter进入');
});
$('#big1').mouseleave(function() {
$(this).css('background', '#fff');
console.log('mouseleave离开');
});
//当鼠标指针在选定元素移动，就会触发该事件
$('#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>
批改老师：灭绝师太批改时间：2019-02-22 17:45:35
老师总结：作业内容和作业题目对不上号啊,希望知识点你都好好掌握
