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 相关文章推荐
模仿jQuery each函数的链式调用
Jul 22 Javascript
jQuery之ajax技术的详细介绍
Jun 19 Javascript
JS简单操作select和dropdownlist实例
Nov 26 Javascript
JavaScript中的变量定义与储存介绍
Dec 31 Javascript
jQuery带时间的日期控件代码分享
Aug 26 Javascript
利用js编写响应式侧边栏
Sep 17 Javascript
微信小程序 倒计时组件实现代码
Oct 24 Javascript
基于javascript实现的快速排序
Dec 02 Javascript
jQuery实现文章图片弹出放大效果
Apr 06 jQuery
JavaScript数据结构之二叉树的删除算法示例
Apr 13 Javascript
angularjs结合html5实现拖拽功能
Jun 25 Javascript
基于VUE的v-charts的曲线显示功能
Oct 01 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导入导出excel实例
2013/10/25 PHP
PHP中list()函数用法实例简析
2016/01/08 PHP
CI框架实现创建自定义类库的方法
2018/12/25 PHP
对laravel的session获取与存取方法详解
2019/10/08 PHP
javascript 数组的方法集合
2008/06/05 Javascript
jQuery DIV弹出效果实现代码
2009/07/03 Javascript
js 分栏效果实现代码
2009/08/29 Javascript
jquery select多选框的左右移动 具体实现代码
2013/07/03 Javascript
js 绑定键盘鼠标事件示例代码
2014/02/12 Javascript
原生JS中slice()方法和splice()区别
2017/03/06 Javascript
jQuery实现可编辑表格并生成json结果(实例代码)
2017/07/19 jQuery
微信小程序发布新版本时自动提示用户更新的方法
2019/06/07 Javascript
VUE 组件转换为微信小程序组件的方法
2019/11/06 Javascript
javascript中contains是否包含功能实现代码(扩展字符、数组、dom)
2020/04/07 Javascript
基于leaflet.js实现修改地图主题样式的流程分析
2020/05/15 Javascript
python正则表达式re模块详细介绍
2014/05/29 Python
总结网络IO模型与select模型的Python实例讲解
2016/06/27 Python
Python生成一个迭代器的实操方法
2019/06/18 Python
python 寻找离散序列极值点的方法
2019/07/10 Python
使用TensorFlow实现简单线性回归模型
2019/07/19 Python
python 列表推导式使用详解
2019/08/29 Python
python opencv 图像边框(填充)添加及图像混合的实现方法(末尾实现类似幻灯片渐变的效果)
2020/03/09 Python
Python如何截图保存的三种方法(小结)
2020/09/01 Python
Volcom英国官方商店:美国殿堂级滑板、冲浪、滑雪服装品牌
2019/03/13 全球购物
乌克兰电子产品和家用电器购物网站:TOUCH
2019/08/09 全球购物
C++:memset ,memcpy和strcpy的根本区别
2013/04/27 面试题
JAVA程序设计笔试题面试题一套
2015/07/28 面试题
自我评价如何写好?
2014/01/05 职场文书
新三好学生主要事迹
2014/01/23 职场文书
运动会开幕式邀请函
2014/02/03 职场文书
班级寄语大全
2014/04/10 职场文书
群众路线专项整治工作情况报告
2014/10/28 职场文书
2015年“我们的节日·重阳节”活动总结
2015/07/29 职场文书
给校长的建议书作文400字
2015/09/14 职场文书
《三国志》赏析
2019/08/27 职场文书
浅谈JS的二进制家族
2021/05/09 Javascript