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实现将文件保存到本地方法汇总
Jul 26 Javascript
JS实现弹性菜单效果代码
Sep 07 Javascript
JavaScript字符串常用的方法
Mar 10 Javascript
基于JS代码实现当鼠标悬停表格上显示这一格的全部内容
Jun 12 Javascript
12 款 JS 代码测试必备工具(翻译)
Dec 13 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
Mar 09 Javascript
vue.js中v-on:textInput无法执行事件问题的解决过程
Jul 12 Javascript
利用vue重构有赞商城的思路以及总结整理
Feb 21 Javascript
基于vue-cli、elementUI的Vue超简单入门小例子(推荐)
Apr 17 Javascript
react native 仿微信聊天室实例代码
Sep 17 Javascript
Antd-vue Table组件添加Click事件,实现点击某行数据教程
Nov 17 Javascript
Javascript之datagrid查询详解
Sep 15 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
改德生G88 - 加装等响度低音提升电路
2021/03/02 无线电
探讨:php中在foreach中使用foreach ($arr as &amp;$value) 这种类型的解释
2013/06/24 PHP
解析csv数据导入mysql的方法
2013/07/01 PHP
php中curl和file_get_content的区别
2014/05/10 PHP
destoon实现VIP排名一直在前面排序的方法
2014/08/21 PHP
ThinkPHP入库出现两次反斜线转义及数据库类转义的解决方法
2014/11/04 PHP
php生成唯一数字id的方法汇总
2015/11/18 PHP
PHP使用MPDF类生成PDF的方法
2015/12/08 PHP
PHP设计模式之工厂模式(Factory Pattern)的讲解
2019/03/21 PHP
javascript XML数据显示为HTML一例
2008/12/23 Javascript
js动态拼接正则表达式的两种方法
2014/03/04 Javascript
js获取微信版本号的方法
2015/05/12 Javascript
javascript Promise简单学习使用方法小结
2016/05/17 Javascript
JavaScript对象引用与赋值实例详解
2017/03/15 Javascript
深入理解Node中的buffer模块
2017/06/03 Javascript
微信小程序 空白页重定向解决办法
2017/06/27 Javascript
vue2.0 keep-alive最佳实践
2017/07/06 Javascript
详解JS构造函数中this和return
2017/09/16 Javascript
EasyUI Tree树组件无限循环的解决方法
2017/09/27 Javascript
浅谈react-native热更新react-native-pushy集成遇到的问题
2017/09/30 Javascript
使用watch监听路由变化和watch监听对象的实例
2018/02/24 Javascript
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
2019/01/18 jQuery
详解JavaScript中的坐标和距离
2019/05/27 Javascript
[48:45]Ti4 循环赛第二日 NEWBEE vs EG
2014/07/11 DOTA
python使用KNN算法手写体识别
2018/02/01 Python
Python实现二维曲线拟合的方法
2018/12/29 Python
深入学习python多线程与GIL
2019/08/26 Python
python 弧度与角度互转实例
2020/04/15 Python
求职信的最佳写作思路
2014/02/01 职场文书
关于安全演讲稿
2014/05/09 职场文书
2014年感恩母亲演讲稿
2014/05/27 职场文书
2014离婚协议书范文
2014/09/10 职场文书
基于Golang 高并发问题的解决方案
2021/05/08 Golang
MySQL8.0.18配置多主一从
2021/06/21 MySQL
Unicode中的CJK(中日韩统一表意文字)字符小结
2021/12/06 HTML / CSS
Python学习之时间包使用教程详解
2022/03/21 Python