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 相关文章推荐
javascript游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现
Jan 23 Javascript
深入理解Javascript动态方法调用与参数修改的问题
Dec 10 Javascript
Underscore.js常用方法总结
Feb 28 Javascript
JQuery控制radio选中和不选中方法总结
Apr 15 Javascript
JavaScript 详解预编译原理
Jan 22 Javascript
简单实现bootstrap选项卡效果
Feb 08 Javascript
JS基于正则表达式实现的密码强度验证功能示例
Sep 21 Javascript
Bootstrap3.3.7导航栏下拉菜单鼠标滑过展开效果
Oct 31 Javascript
详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据
Nov 11 Javascript
小程序点击图片实现自动播放视频
May 29 Javascript
Vue+Express实现登录注销功能的实例代码
May 05 Javascript
jQuery 添加元素和删除元素的方法
Jul 15 jQuery
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基于工厂模式实现的计算器实例
2015/07/16 PHP
PHP闭包函数传参及使用外部变量的方法
2016/03/15 PHP
ThinkPHP3.2框架使用addAll()批量插入数据的方法
2017/03/16 PHP
JavaScript 特殊字符
2007/04/05 Javascript
豆瓣网的jquery代码实例
2008/06/15 Javascript
解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)
2010/05/13 Javascript
jquery 学习之二 属性(类)
2010/11/25 Javascript
jQuery获取节点和子节点文本的方法
2014/07/22 Javascript
用C/C++来实现 Node.js 的模块(二)
2014/09/24 Javascript
JavaScript实现列出数组中最长的连续数
2014/12/29 Javascript
常用的JavaScript WEB操作方法分享
2015/02/28 Javascript
解决jquery插件:TypeError:$.browser is undefined报错的方法
2015/11/21 Javascript
jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)
2016/03/05 Javascript
jQuery插件实现文件上传功能(支持拖拽)
2020/08/27 Javascript
原生js实现自由拖拽弹窗代码demo
2016/06/29 Javascript
javascript经典特效分享 手风琴、轮播图、图片滑动
2016/09/14 Javascript
JavaScript 详解预编译原理
2017/01/22 Javascript
使用elementUI实现将图片上传到本地的示例
2018/09/04 Javascript
nodejs异步编程基础之回调函数用法分析
2018/12/26 NodeJs
刷新页面后让控制台的js代码继续执行
2019/09/20 Javascript
python中threading超线程用法实例分析
2015/05/16 Python
Python使用PIL库实现验证码图片的方法
2016/03/11 Python
win10系统中安装scrapy-1.1
2016/07/03 Python
python字典多键值及重复键值的使用方法(详解)
2016/10/31 Python
django数据库migrate失败的解决方法解析
2018/02/08 Python
python实现csv格式文件转为asc格式文件的方法
2018/03/23 Python
Python3实现转换Image图片格式
2018/06/21 Python
Python英文文本分词(无空格)模块wordninja的使用实例
2019/02/20 Python
python画图--输出指定像素点的颜色值方法
2019/07/03 Python
Python tkinter实现图片标注功能(完整代码)
2019/12/08 Python
Python 实现 T00ls 自动签到脚本代码(邮件+钉钉通知)
2020/07/06 Python
Python本地及虚拟解释器配置过程解析
2020/10/13 Python
HTML5中的Web Notification桌面右下角通知功能的实现
2018/04/19 HTML / CSS
LUISAVIAROMA中国官网:时尚奢侈品牌购物网站
2020/11/01 全球购物
2015年入党决心书
2015/02/05 职场文书
python基于机器学习预测股票交易信号
2021/05/25 Python