收藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery 节点操作</title>
<script src='jquery-3.3.1.min.js'></script>
<style>
#dvs{
width: 200px;
height: 200px;
border: solid 2px blue;
background: #f59;
border-radius:50%;
}
#all .cur{
/*margin-left:50px;*/
width:400px;
}
/*div{
width:500px!important; /* //vip
}*/
#divs{
width:200px;
height:200px;
border:solid 2px blue;
}
.info{
background: purple;
border-radius:50%;
}
#jd{
/*display: inline-block;*/
margin: 0 5px;
width: 70px;
height: 25px;
line-height: 25px;
font-size: 12px;
text-align: center;
border-radius: 13px;
color: #e43f3b;
box-shadow: 6px 8px 20px rgba(45,45,45,.15);
}
.section{
background: #e01222;
color: #fff!important;
cursor:pointer;
}
</style>
</head>
<body>
<!--权重important 1000>id 1000 >class 10 > tag 1-->
<!---->
<div id='dvs' ></div>
<img id='imgs' alt="" style='width: 200px;height:200px;border:solid 2px blue' >
<div id='divs' class='info'></div>
<div id='jd'>新人福利</div>
<script>
//元素属性的操作
//attr()
$('#dvs').click(function(){
$(this).attr('class','cur');
})
//添加图片的一种方式
// $('#imgs').click(function(){
// $(this).attr('src','2.jpg');
// var sr = $(this).attr('src');
// console.log(sr);
// })
//
// $('#imgs').mouseover(function(){
// //添加一个图片属性
// //获取属性值
// var sr = $(this).attr('src');
// console.log(sr);
// })
$('#dvs').click(function(){
//只能修改单个属性
// $(this).css('background','lightblue');
//用css包裹的方式实现，可修改多个属性{}
$(this).css({background:'lightblue',borderRadius:'50%'});
})
//鼠标移入事件,添加属性
$('#imgs').mouseover(function(){
//获取属性值
$(this).attr('src','2.jpg');
})
//移除属性
$('#imgs').mouseout(function(){
$(this).removeAttr('src');
})
//鼠标移上去的事件
$('#jd').mouseover(function(){
$(this).addClass('section');
})
//鼠标移除事件
$('#jd').mouseout(function(){
$(this).removeClass('section');
})
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
