jQuery 样式操作

最新推荐文章于 2022-07-15 09:55:41 发布
最新推荐文章于 2022-07-15 09:55:41 发布
阅读量154 收藏
点赞数
分类专栏： 【 Web前端开发 】
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yexiangCSDN/article/details/116133009
版权
【 Web前端开发 】 专栏收录该内容
190 篇文章 5 订阅 ¥199.90 ¥299.90
订阅专栏
本文介绍了jQuery中的CSS样式操作，包括使用css方法修改元素样式、设置类样式以及与原生JavaScript中className的区别。通过实例展示了如何添加、移除和切换类，强调了jQuery在前端开发中的便利性。
摘要由CSDN通过智能技术生成

我是表哥Harker，表妹我来咯~

学完JQuery的选择器，链式编程是否感觉使用起来瞬间轻松很多呢？这就是为什么JQuery是前端开发必备的神器，你只需要下载一个js文件引入使用就行，帮我们做了很多事情，接下来学习JQuery中的CSS样式操作吧！

 

1、操作 CSS 方法 

  • jQuery 可以使用 css 方法来修改简单元素样式； 也可以操作类，修改多个样式

1）、参数只写属性名，则是返回属性值 

$("div").css("color"); 

2）、参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号 

$("div").css("color", "red"); 

3）、参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开 


                

        

        

    

  


        

            

                

                

                了解本专栏
                
                
                  
                订阅专栏 解锁全文
                 
            

        

    

      

        

            

              
                
                  HarkerYX
                
              
            

            

                关注
              
            

        

        

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

      

      

            

                专栏目录
          

                

                        订阅专栏
                










                



	

		

			

				
					
一、jQuery 介绍， jQuery 的基本使用， jQuery 选择器， jQuery 样式操作， jQuery 效果

				
			

			

				

					快乐de馒头
				

				

					01-03
					
					1092
					
				

			

		

		

			
				
1.1. jQuery 介绍

1.1.1 JavaScript 库

JavaScript库：即 library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。


简单理解： 就是一个JS 文件，里面对我们原生js代码进行了封装，存放到里面。这样我们可以快速高效的使用这些封装好的功能了。

比如 jQuery，就是为了快速方便的操作DOM，里面基本都是函数（方法）。




			
		

	



                

              
                



	

		

			

				
					
JQueryDOM之样式操作

				
			

			

				

					10-17
				

			

		

		

			
				
JQuery作为一款快速、...希望读者在阅读完本文后，能够掌握基本的JQuery样式操作方法，并能根据需要灵活地运用于实际开发中。如果有疑问或者需要进一步探讨，欢迎留言交流，作者也会及时回复。感谢大家对本站的支持！

			
		

	



                


  
              

                


	

		

			

				
					
jQuery样式操作

				
			

			

				

					Shaun's blog
				

				

					08-08
					
					300
					
				

			

		

		

			
				
操作行间样式：// 获取div的样式
$("div").css("width");
$("div").css("color");//设置div的样式
$("div").css("width","30px");
$("div").css("height","30px");
$("div").css({fontSize:"30px",color:"red"});注意： 
选择器获取的多个元素，获取信息获

			
		

	





	

		

			

				
					
jquery样式操作

				
			

			

				

					weixin_30240349的博客
				

				

					05-12
					
					47
					
				

			

		

		

			
				
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>  <meta charset="utf-8" />  <title></title>  <script src="jquery...

			
		

	



		

			
		



	

		

			

				
					
jQuery-处理css样式

				
			

			

				

					weixin_30675247的博客
				

				

					10-16
					
					76
					
				

			

		

		

			
				
1、css方法        获取匹配元素集合中的第一个元素的样式属性的值  或  设置每个匹配元素的一个或多个CSS属性        1）获取并设置单个css值            jQuery对象.css('css属性');            jQuery对象.css('css属性','值');        2）获取多个css属性            jQuery对象....

			
		

	





	

		

			

				
					
118.Python修炼之路【123-前端-JQuery样式操作】2018.08.01

				
			

			

				

					youyouwuxin1234的博客
				

				

					08-01
					
					213
					
				

			

		

		

			
				
jquery样式操作

jquery用法思想二 
同一个函数完成取值和赋值

操作行间样式


// 获取div的样式
$("div").css("width");
$("div").css("color");


//设置div的样式
$("div").css("width","30px");
$("div").css("height&q

			
		

	





	

		

			

				
					
jQuery操作样式

				
			

			

				

					一个水瓶座程序猿的博客
				

				

					07-15
					
					215
					
				

			

		

		

			
				
jQuery操作样式

			
		

	





	

		

			

				
					
JQuery样式操作、click事件以及索引值-选项卡应用示例

				
			

			

				

					10-17
				

			

		

		

			
				
1. jQuery样式操作：jQuery提供了非常方便的API来操作CSS样式，包括读取和设置元素的样式属性。通过`css()`函数，如果传递单个属性名，则返回该属性的值；如果传递属性名和值，则会设置该属性值。此外，还可以传递一...

			
		

	





	

		

			

				
					
jQuery第2天知识点：jQuery 样式操作、jQuery 属性操作.zip

				
			

			

				

					07-18
				

			

		

		

			
				
在深入探讨jQuery的样式操作和属性操作之前，我们先来理解一下jQuery是什么。jQuery是一个高效、简洁且功能丰富的JavaScript库，它极大地简化了JavaScript代码的编写，特别是在处理DOM（Document Object Model）操作...

			
		

	





	

		

			

				
					
jquery 样式操作

				
			

			

				

					qq_18932003的博客
				

				

					08-14
					
					143
					
				

			

		

		

			
				
t195
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //样式操.

			
		

	





	

		

			

				
					
JQuery样式操作

				
			

			

				

					来老师的专栏
				

				

					12-05
					
					756
					
				

			

		

		

			
				
获取样式：attr("class")
设置样式：attr("class","myclass")
追加样式：addClass("myclass")
移除样式：removeClass("myclass")
切换样式：toggleClass("myclass"),如果样式存在则去掉，否则添加
判断是否存在样式：hasClass("myclass")

			
		

	





	

		

			

				
					
jQuery中的样式操作

				
			

			

				

					weixin_49757916的博客
				

				

					05-16
					
					119
					
				

			

		

		

			
				
jQuery中的class样式操作

一。jQuery与JavaScript的class样式属性添加和移除：


<head>
    <meta name="viewport" content="width=device-width" />
    <title>text</title>
    <style>
        .wrapper{
     ...

			
		

	





	

		

			

				
					
jQuery中样式操作

				
			

			

				

					秦哥的博客
				

				

					12-30
					
					694
					
				

			

		

		

			
				
目录

零、码仙励志

一、css操作

1.设置单个样式

2.设置多个样式

3.获取样式

二、class操作

1.addClass(name):添加类

2.removeClass(name):移除类

3.hasClass(name):判断类

4.toggleClass(name):切换类

零、码仙励志

很多时候，之所以逼着自己往前走，不是前面的风景迷人，而是身后的现实很残酷。
...

			
		

	





	

		

			

				
					
jquery操作样式

				
			

			

				

					cdc8596的博客
				

				

					12-22
					
					319
					
				

			

		

		

			
				
$(function () {
            $('#btn').click(function () {
                //$('body').addClass('neight');//追加了一个样式,之前的样式不会覆盖之前的

                //切换类样式的两种方法1.toggleClass('class')  2.通过hasClass('c

			
		

	





	

		

			

				
					
jQuery样式操作与事件处理

				
			

			

				

					
				

			

		

		

			
				
在jQuery中，样式操作是通过各种方法实现的：  1. **attr()**：这个方法用于获取或替换元素的属性值，包括样式属性。例如，`$('p').attr('class')`可以用来获取段落的class属性，而`$('p').attr('class', 'ho')`会...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
HarkerYX

			
你的鼓励将是我创作的最大动力

		

	

	

			

	

	

    ¥1
    ¥2
    ¥4
    ¥6
    ¥10
    ¥20
	

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

			
您的余额不足，请更换扫码支付或充值

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值