登录  /  注册
博主信息
博文 250
粉丝 3
评论 0
访问量 310590
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
jQery--鼠标事件及元素操作
梁凯达的博客
原创
1043人浏览过

实例

<!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>

运行实例 »

点击 "运行实例" 按钮查看在线实例

 

本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学