jqueryDOM操作
一、获取/改变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(){
// 改变单个元素css属性值
// $(选择器).css('属性名','属性值')
$('div').css('background','#a500e7');
// 改变多个元素css属性值
// $(选择器).css({'属性名':'属性值','属性名':'属性值','属性名':'属性值'})
$('div').css({'width':'200px','height':'200px'});
// 获取单个元素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() 向元素添加一个或者多个类
$('div').addClass('box main');
// removeClass() 从元素中移除一个或多个类
$('div').removeClass('main');
// attr() 设置或返回被选中元素的属性值
// alert($('p').attr('style'));
// removeAttr() 移除元素属性
$('p').removeAttr('style');
// hasClass() 检查被选中元素是否包含指定class
// alert($('div').hasClass('box'));
// toggleClass()对元素进行添加/删除类的切换操作
$('button').click(function(){
$('div').toggleClass('main');
})
// text() 返回或设置被选中的元素的文本内容
$('p').text('php中文网');
//html() 返回或设置被选中的元素的内容,类似innerHTML,可包括html标签
$('p').html('<b>php中文网</b>');
// val() 返回或设置被选元素的值
$('input').val('请输入内容');
})
</script>
<div>
<p style="color:#fff;">hello world!</p>
<button>点击</button>
</div>
<input type="text" value="什么都没有哦">
</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(){
// *不能与<body onload="">一起使用
// blur()元素失去焦点
$('input').blur(function(){
$('input').css('background','#67d8ef');
})
// focus()元素获得焦点
$('input').focus(function(){
$('input').css('background','#287ec1');
})
// change()元素的值发生改变的时候
$('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()鼠标指针移入元素上方时触发该事件
$('.box').mouseover(function(){
$('.box').css('width','200px');
})
// mouseenter()鼠标指针穿过元素时触发该事件
$('.box').mouseenter(function(){
$('.box').css('height','200px');
})
// // mousemove()鼠标指针在指定元素移动时触发该事件
$('.box').mousemove(function(){
$('.box').css('background','#00a5e0');
})
// mouseleave()鼠标指针离开元素时
$('.box').mouseleave(function(){
$('.box').css('background','');
})
// mouseout()鼠标指针从元素上移开时
$('.box').mouseout(function(){
$('.box').css('width','100px');
$('.box').css('height','100px');
})
// mousedown()鼠标指针移动到元素上方并按下鼠标按键时
$('.box').mousedown(function(){
$('.box').css('background','');
})
// mouseup()当在元素上松开鼠标按键时
$('.box').mouseup(function(){
$('.box').css('background','#00a5e0');
})
// resize()当调整当前浏览器窗口大小时
$(window).resize(function(){
alert('窗口调整成功');
})
// pageX()属性是鼠标指针的位置,event.pageX event,必需,参数来自事件绑定函数
// pageY()属性是鼠标指针的位置,event.pageY event：必需,参数来自事件绑定函数
$(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:鼠标移入元素触发
// out:鼠标移出元素触发
$('div').hover(
function(){
$(this).css('background','#00a5e0');
},
function(){
$(this).css('background','#f50');
}
)
// toggle() 如果元素是可见的，就切换为隐藏，否则相反
$('button').click(function(){
$('p').toggle().css('color','#fff');
})
})
</script>
<div style="background:yellow;width: 200px;height:200px;">
<p>hello world!</p>
</div>
<button>点击</button>
</body>
</html>
