JQuery控制DIV的选取实现方法


Posted in Javascript onSeptember 18, 2016

我们设置4个div 当鼠标移动到某一个div上面的时候 背景颜色就会发生变化

那我们应该知道要用到mouseover() 和 mouseout() 前一个是移动到某个位置 后面是移开某个位置

还有一个hover(,) 可以替代上面两个方法

1.用mouseover()和mouseout()

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$(function(){
	$("div[id^='div']").mouseover(function() {
    $(this).css("background-color","red");
    //$(this).css({"background-color":"red"});
 });
	$("div[id^='div']").mouseout(function() {
    $(this).css("background-color","#0FC");
    //$(this).css({"background-color":"#0FC"});
 });
});
</script>
<style type="text/css">
div[id^="div"]
{
	width:300px;
	height:500px;
	background-color:#0FC;
	border:1px solid black;
	float:left;
	margin-left:2px;
}
</style>
</head>

<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
</body>
</html>

JQuery控制DIV的选取实现方法

JQuery控制DIV的选取实现方法

JQuery控制DIV的选取实现方法

2.hover()

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$(function(){
	$("div[id^='div']").hover(function(){
		$(this).css("background-color","blue");
		},
		function(){
			$(this).css("background-color","#0FC");
	});
});
</script>
<style type="text/css">
div[id^="div"]
{
	width:300px;
	height:500px;
	background-color:#0FC;
	border:1px solid black;
	float:left;
	margin-left:2px;
}
</style>
</head>

<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
</body>
</html>

JQuery控制DIV的选取实现方法

也可以这么写

$(function(){
	var In = function(){
		$(this).css("background-color","red");
	}
	var Out = function(){
		$(this).css("background-color","yellow");
	}
		
	$("p[id^='p']").hover(In,Out);	

});

以上这篇JQuery控制DIV的选取实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
防止页面被iframe(兼容IE,Firefox火狐)
Jul 04 Javascript
jQuery 获取兄弟元素的几种不错方法
May 23 Javascript
原生的html元素选择器类似jquery选择器
Oct 15 Javascript
让javascript加载速度倍增的方法(解决JS加载速度慢的问题)
Dec 12 Javascript
js获取当前日期时间及其它操作汇总
Apr 17 Javascript
轮播的简单实现方法
Jul 28 Javascript
详解如何使用PM2将Node.js的集群变得更加容易
Nov 15 Javascript
ES6/JavaScript使用技巧分享
Dec 14 Javascript
ajaxfileupload.js实现上传文件功能
Apr 19 Javascript
layui动态绑定事件的方法
Sep 20 Javascript
微信小程序 scroll-view的使用案例代码详解
Jun 11 Javascript
vue 获取url参数、get参数返回数组的操作
Nov 12 Javascript
chrome下判断点击input上标签还是其余标签的实现方法
Sep 18 #Javascript
通过jquery实现页面的动画效果(实例代码)
Sep 18 #Javascript
JQuery实现DIV其他动画效果的简单实例
Sep 18 #Javascript
JQuery遍历元素的后代和同胞实现方法
Sep 18 #Javascript
AngularJS实现树形结构(ztree)菜单示例代码
Sep 18 #Javascript
利用jquery实现瀑布流3种案例
Sep 18 #Javascript
JQuery遍历元素的父辈和祖先的方法
Sep 18 #Javascript
You might like
PHP设计模式 注册表模式
2012/02/05 PHP
PHP插入排序实现代码
2013/04/04 PHP
php生成唯一数字id的方法汇总
2015/11/18 PHP
PHP框架Laravel中使用UUID实现数据分表操作示例
2018/05/30 PHP
用正则表达式 动态创建/增加css style script 兼容IE firefox
2009/03/10 Javascript
深入理解JavaScript系列(13) This? Yes,this!
2012/01/18 Javascript
jQuery ajax serialize()方法的使用以及常见问题解决
2013/01/27 Javascript
JS将表单导出成EXCEL的实例代码
2013/11/11 Javascript
使用POST方式弹出窗口的两种方法示例介绍
2014/01/29 Javascript
Bootstrap入门书籍之(五)导航条、分页导航
2016/02/17 Javascript
JS实现简单的二元方程计算器功能示例
2017/01/03 Javascript
js实现tab切换效果
2017/02/16 Javascript
QRCode.js:基于JQuery的生成二维码JS库的使用
2017/06/23 jQuery
vue.js实现只弹一次弹框
2018/01/29 Javascript
Echarts地图添加引导线效果(labelLine)
2019/09/30 Javascript
纯js+css实现仿移动端淘宝网站的弹出详情框功能
2019/12/29 Javascript
JavaScript实现简单进度条效果
2020/03/25 Javascript
Element图表初始大小及窗口自适应实现
2020/07/10 Javascript
vue+element-ui JYAdmin后台管理系统模板解析
2020/07/28 Javascript
JavaScript 中判断变量是否为数字的示例代码
2020/10/22 Javascript
vue-router路由懒加载及实现的3种方式
2021/02/28 Vue.js
python利用lxml读写xml格式的文件
2017/08/10 Python
python执行scp命令拷贝文件及文件夹到远程主机的目录方法
2019/07/08 Python
Python正则表达式急速入门(小结)
2019/12/16 Python
python3.8与pyinstaller冲突问题的快速解决方法
2020/01/16 Python
Python绘制动态水球图过程详解
2020/06/03 Python
Python 实现微信自动回复的方法
2020/09/11 Python
pycharm如何设置官方中文(如何汉化)
2020/12/29 Python
现代生活方式的家具和装饰:Dot & Bo
2018/12/26 全球购物
Belvilla法国:休闲度假房屋出租
2020/10/03 全球购物
交通志愿者活动总结
2014/06/27 职场文书
党员贯彻十八大精神思想汇报范文
2014/10/25 职场文书
写给医生的感谢信
2015/01/22 职场文书
党员自我评价2015
2015/03/03 职场文书
导游词之四川熊猫基地
2020/01/13 职场文书
简述python四种分词工具,盘点哪个更好用?
2021/04/13 Python