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 相关文章推荐
IE的fireEvent方法概述及应用
Feb 22 Javascript
jquery插件star-rating.js实现星级评分特效
Apr 15 Javascript
JavaScript知识点总结(十一)之js中的Object类详解
May 31 Javascript
第五篇Bootstrap 排版
Jun 21 Javascript
AngularJS 执行流程详细介绍
Aug 18 Javascript
AngularJS  双向数据绑定详解简单实例
Oct 20 Javascript
鼠标经过出现气泡框的简单实例
Mar 17 Javascript
bootstrap table单元格新增行并编辑
May 19 Javascript
详解vuex结合localstorage动态监听storage的变化
May 03 Javascript
JavaScript防止全局变量污染的方法总结
Aug 02 Javascript
JS组件库AlloyTouch实现图片轮播过程解析
May 29 Javascript
vue 遮罩层阻止默认滚动事件操作
Jul 28 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中文繁体和简体相互转换的方法
2015/03/21 PHP
在JavaScript中通过URL传递汉字的方法
2007/04/09 Javascript
jquery向.ashx文件post中文乱码问题的解决方法
2011/03/28 Javascript
ajax处理php返回json数据的实例代码
2013/01/24 Javascript
JQGrid的用法解析(列编辑,添加行,删除行)
2013/11/08 Javascript
jQuery的live()方法对hover事件的处理示例
2014/02/27 Javascript
Javascript学习笔记之数组的构造函数
2014/11/23 Javascript
自己动手手写jQuery插件总结
2015/01/20 Javascript
JavaScript实现九九乘法表的简单实例
2016/06/07 Javascript
Google 地图获取API Key详细教程
2016/08/06 Javascript
有关JS中的0,null,undefined,[],{},'''''''',false之间的关系
2017/02/14 Javascript
Angular2入门--架构总览
2017/03/29 Javascript
JavaScript循环_动力节点Java学院整理
2017/06/28 Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
2017/07/28 Javascript
ES6中Class类的静态方法实例小结
2017/10/28 Javascript
js中数组常用方法总结(推荐)
2019/04/09 Javascript
Vue组件间通信方法总结(父子组件、兄弟组件及祖先后代组件间)
2019/04/17 Javascript
微信小程序实现单列下拉菜单效果
2019/04/25 Javascript
vscode vue 文件模板的配置方法
2019/07/23 Javascript
基于ssm框架实现layui分页效果
2019/07/27 Javascript
小程序实现录音上传功能
2019/11/22 Javascript
微信小程序scroll-view实现滚动到锚点左侧导航栏点餐功能(点击种类,滚动到锚点)
2020/06/11 Javascript
Python操作mysql数据库实现增删查改功能的方法
2018/01/15 Python
Python基于FTP模块实现ftp文件上传操作示例
2018/04/23 Python
python直接获取API传递回来的参数方法
2018/12/17 Python
python 字典套字典或列表的示例
2019/12/16 Python
python实现逆滤波与维纳滤波示例
2020/02/26 Python
Python爬虫之Selenium实现窗口截图
2020/12/04 Python
基于CSS3特效之动画:animation的应用
2013/05/09 HTML / CSS
HTML5 input元素类型:email及url介绍
2013/08/13 HTML / CSS
巴西葡萄酒销售网站:Wine.com.br
2017/11/07 全球购物
办公室文书岗位职责
2013/12/16 职场文书
文明风采获奖感言
2014/02/18 职场文书
人事任命书怎么写
2014/06/05 职场文书
校长师德师风自我剖析材料
2014/09/29 职场文书
《纸船和风筝》教学反思
2016/02/18 职场文书