jquery 点击元素实现背景色改变，点击元素以外任意地方还原该元素背景色

最新推荐文章于 2024-06-15 20:48:16 发布
最新推荐文章于 2024-06-15 20:48:16 发布
阅读量1.5w 收藏 4
点赞数 5
分类专栏： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tangxiujiang/article/details/75529555
版权

jquery 点击元素实现背景色改变，点击元素以外任意地方还原该元素背景色

html代码如下：

<!doctype html>
<html>
<head>
	<title>ssssds</title>
	<script src="jquery-3.1.1.min.js"></script>
	<script type="text/javascript" src="s.js"></script>
	<style type="text/css">
		div{
			width: 300px;
			height: 300px;
			border:3px red solid;
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>








jquery代码如下：






$(function(){
	$("div").click(function(){
		$(this).css("background-color","red");
		console.log("3");
	});

	$(document).click(function(){
		console.log("1");
		$("div").css("background-color","white");
	});

	$("div").click(function(event){
		console.log("2");
    	event.stopPropagation();
	});
});


首先，定义点击div改变背景色事件；


   
$("div").click(function(){
		$(this).css("background-color","red");
		console.log("3");
	});


其次，定义点击整个文档事件，也就是点击除了div元素外的内容，还原div的背景色。


   
	$(document).click(function(){
		console.log("1");
		$("div").css("background-color","white");
	});
但是这种写法，点击div也会触发还原背景色的事件，所以要阻止冒泡事件，添加如下代码：
        
$("div").click(function(event){
	console.log("2");
    	event.stopPropagation();
});











                

        

        

    




    

      

        

            

              
                
                  赏花赏景赏时光
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    5
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    4
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
jquery 点击元素实现背景色改变，多个元素点击选择效果

				
			

			

				

					VIP_CR的博客
				

				

					12-22
					
					1394
					
				

			

		

		

			
				
<!doctype html>
<html>
<head>
	<title>ssssds</title>
		
<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.1.1/jquery.min.js"></script>
	<script type="text/javascript" src="s.js"></script>
	<

			
		

	



                

              
                



	

		

			

				
					
jquery鼠标点击改变控件的背景颜色

					
热门推荐

				
			

			

				

					goadin的博客
				

				

					05-13
					
					1万+
					
				

			

		

		

			
				
记录一下：


    $(function () {
        //初始化控件，并注册事件
        var clickItem = function () {
            $(".itemID 子控件名称").css("background", "");
            $(".itemID 子控件名称").mouseover(function (

			
		

	



                


  
              

                


	

		

			

				
					
jquery实现点击按钮变换背景颜色

				
			

			

				

					weixin_47124571的博客
				

				

					06-28
					
					2145
					
				

			

		

		

			
				
点击按钮换背景

			
		

	





	

		

			

				
					
jQuery学习教程，写更少的代码,做更多的事情（二）

					
最新发布

				
			

			

				

					2401_85124119的博客
				

				

					06-15
					
					1019
					
				

			

		

		

			
				
为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。前端面试题汇总JavaScript性能linux。

			
		

	



		

			
		



	

		

			

				
					
jQuery点击改变背景颜色

				
			

			

				

					weixin_43755104的博客
				

				

					07-16
					
					2041
					
				

			

		

		

			
				
文章目录
场景描述
当点击一个框时改变背景颜色

新建样式

.liantong {
	background-color: #ff7525 ;
}


添加js文件

$(".phone").click(function () {
//liantong是你的要改变的颜色
      $(this).toggleClass("liantong");
    });


...

			
		

	





	

		

			

				
					
jquery改变元素的背景颜色

				
			

			

				

					wangsong97的博客
				

				

					10-27
					
					1万+
					
				

			

		

		

			
				
这里有个div控件，点击div就会改变指定元素的背景颜色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="jquery.js"></script>
		<style>
			#color{
				width: 200p...

			
		

	





	

		

			

				
					
用jquery实现点击栏目背景色改变

				
			

			

				

					12-01
				

			

		

		

			
				
在jQuery中实现点击栏目背景色改变的功能，主要是通过事件监听和CSS类的添加与移除来完成。这里的问题是，当用户点击一个栏目时，该栏目应变色，而之前被点击过的栏目需要恢复原色。为了达到这个效果，我们可以采用...

			
		

	





	

		

			

				
					
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例

				
			

			

				

					10-18
				

			

		

		

			
				
下面小编就为大家分享一篇jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

			
		

	





	

		

			

				
					
点击元素以外的地方隐藏元素插件

				
			

			

				

					03-28
				

			

		

		

			
				
"点击元素以外的地方隐藏元素插件"，即clickOutHide，是一个基于jQuery的插件，专门用于实现一种交互效果：当用户点击页面上除特定元素之外的任何地方时，该特定元素将自动隐藏。这个插件为开发者提供了一个灵活且...

			
		

	





	

		

			

				
					
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法

				
			

			

				

					10-18
				

			

		

		

			
				
下面小编就为大家分享一篇jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

			
		

	





	

		

			

				
					
jQuery单击div更改背景颜色

				
			

			

				

					09-04
				

			

		

		

			
				
jQuery单击div更改背景颜色

			
		

	





	

		

			

				
					
jquery+css实现点击他时变色 点击其他时自动还原

				
			

			

				

					浪里淘沙
				

				

					12-08
					
					1万+
					
				

			

		

		

			
				
代码








    测试



    #list{wdith:100%;height:100px;}
    #list > li{float:left;width:50px;height:50px;background:black;margin:10px;cursor:pointer}
    .cur{color:#fff;background:#00CC00}


    $(

			
		

	





	

		

			

				
					
jQuery用on()代理的方法实现鼠标点击事件，当前的背景色变化其他的背景色不变...

				
			

			

				

					
				

				

					04-13
					
					241
					
				

			

		

		

			
				
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <style...

			
		

	





	

		

			

				
					
点击颜色切换背景颜色和点击图片切换背景图片

				
			

			

				

					pjh_2003的博客
				

				

					05-17
					
					434
					
				

			

		

		

			
				
点击颜色切换背景颜色和点击图片切换背景图片

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术：vis JavaScript

作者:彭嘉豪

撰写时间：2021：5：17



点击颜色切换背景颜色



在style里设置颜色的值之后用jq获取









Jq代码





Ready页面加载事件，获取所有button按钮，绑定点击事件。

定义一个colo...

			
		

	





	

		

			

				
					
点击div改变样式，再点击，又变回去，来回变

				
			

			

				

					songjuntao8的专栏
				

				

					01-20
					
					4551
					
				

			

		

		

			
				
我们经常做的是点击元素改变样式，只是点击一次，那么如果点击很多次呢，我们需要元素来回变化呢？这时候我们就用class名来改变，判断是否有该class

啥都别说了，上代码

<div class="shbian test">你点我就变</div><!--点击显示，再点击其他地方隐藏-->
.shbian{text-align: center;height: 60...

			
		

	





	

		

			

				
					
jQuery点击切换背景色

				
			

			

				

					mqf15565844264的博客
				

				

					10-27
					
					1961
					
				

			

		

		

			
				
css代码
<style>
    .bg1{
      width: 200px;
      height: 200px;
      background-color: #00FFFF;
    }
    .bg2{
      width: 200px;
      height: 200px;
      background-color: blueviolet;
  ...

			
		

	





	

		

			

				
					
jquery实现点击改变背景色，点击其他恢复原来背景色，被点击的改变背景色

				
			

			

				

					weixin_30851867的博客
				

				

					05-07
					
					646
					
				

			

		

		

			
				
实现这个功能很简单，可是之前自己不怎么熟悉jquery，感觉各种乱写。现在终于整理好了思路。
html：

<div class="managementPanel">
    <div>div1</div>
    <div class="red">div2</div>
    <div>div3</div&...

			
		

	





	

		

			

				
					
jquery 点击某行变换背景颜色，其他行还原为原来颜色

				
			

			

				

					y_h_t的专栏
				

				

					03-19
					
					1万+
					
				

			

		

		

			
				
jquery 点击某行变换背景颜色，其他行还原为原来颜色 jquery click 变换

			
		

	





	

		

			

				
					
jquery 动态点击li标签切换背景颜色

				
			

			

				

					Nicholas_long的博客
				

				

					05-23
					
					8596
					
				

			

		

		

			
				
废话不多讲老规矩先上图 看效果：&lt;script type="text/javascript" src="/jquery/jquery.js"&gt;&lt;/script&gt; 改为你本地项目的js路径&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;  &lt;script type="text/javascript&am

			
		

	





	

		

			

				
					
jquery点击选中元素改变元素背景色

				
			

			

				

					06-13
				

			

		

		

			
				
jQuery是一个非常流行的JavaScript库，它简化了DOM操作和事件处理。如果你想在用户点击某个元素时改变它的背景颜色，你可以使用`.click()`方法结合`.css()`函数。以下是一个简单的示例：

```javascript
// 获取你需要操作的元素
var element = $("#yourElementId"); // 用元素ID替换"yourElementId"

// 当元素被点击时执行的函数
element.click(function() {
    // 改变背景颜色
    $(this).css("background-color", "red"); // 将背景设置为红色，你可以根据需要更改颜色
});

```
在这个例子中，当你点击`#yourElementId`这个ID对应的元素时，其背景颜色会变为红色。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值