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 相关文章推荐
js 实现无干扰阴影效果 简单好用(附文件下载)
Dec 27 Javascript
jQuery UI 应用不同Theme的办法
Sep 12 Javascript
JS无限极树形菜单,json格式、数组格式通用示例
Jul 30 Javascript
AngularJS中$interval的用法详解
Feb 02 Javascript
JS数组排序方法实例分析
Dec 16 Javascript
JS生成一维码(条形码)功能示例
Jan 19 Javascript
JS库particles.js创建超炫背景粒子插件(附源码下载)
Sep 13 Javascript
vue实现底部菜单功能
Jul 24 Javascript
js canvas实现红包照片效果
Aug 21 Javascript
详解Ant Design of React的安装和使用方法
Dec 27 Javascript
更优雅的微信小程序骨架屏实现详解
Aug 07 Javascript
js事件机制----捕获与冒泡机制实例分析
May 22 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/07/14 PHP
thinkPHP数据库增删改查操作方法实例详解
2016/12/06 PHP
Lumen timezone 时区设置方法(慢了8个小时)
2018/01/20 PHP
用javascript实现无刷新更新数据的详细步骤 asp
2006/12/26 Javascript
javascript-TreeView父子联动效果保持节点状态一致
2007/08/12 Javascript
javascript 多级checkbox选择效果
2009/08/20 Javascript
JQuery入门—JQuery程序的代码风格详细介绍
2013/01/03 Javascript
JavaScript数组深拷贝和浅拷贝的两种方法
2014/04/16 Javascript
41个Web开发者必须收藏的JavaScript实用技巧
2016/07/22 Javascript
详解自动生成博客目录案例
2016/12/09 Javascript
Angularjs中使用轮播图指令swiper
2017/05/30 Javascript
基于vue-cli配置lib-flexible + rem实现移动端自适应
2017/12/26 Javascript
BootStrap modal实现拖拽功能
2018/12/01 Javascript
JS实现灯泡开关特效
2020/03/30 Javascript
vue实现表单未编辑或未保存离开弹窗提示功能
2020/04/08 Javascript
Vue-resource安装过程及使用方法解析
2020/07/21 Javascript
Python 获取新浪微博的最新公共微博实例分享
2014/07/03 Python
使用Python脚本来获取Cisco设备信息的示例
2015/05/04 Python
在windows下快速搭建web.py开发框架方法
2016/04/22 Python
python实现人人自动回复、抢沙发功能
2018/06/08 Python
Python3显示当前时间、计算时间差及时间加减法示例代码
2019/09/07 Python
Python pickle模块实现对象序列化
2019/11/22 Python
Python并发concurrent.futures和asyncio实例
2020/05/04 Python
印度尼西亚综合购物网站:Lazada印尼
2016/09/07 全球购物
运动会邀请函范文
2014/01/31 职场文书
婚纱店策划方案
2014/05/22 职场文书
班级心理活动总结
2014/07/04 职场文书
企业党建工作汇报材料
2014/08/19 职场文书
实习生个人总结范文
2015/02/28 职场文书
2015年医德考评自我评价
2015/03/03 职场文书
老兵退伍感言
2015/08/03 职场文书
十二月早安励志心语大全
2019/12/03 职场文书
Nginx 负载均衡是什么以及该如何配置
2021/03/31 Servers
nginx 防盗链防爬虫配置详解
2021/03/31 Servers
Python干货实战之八音符酱小游戏全过程详解
2021/10/24 Python
Java版 单机五子棋
2022/05/04 Java/Android