jQuery css和显示隐藏及siblings使用

妖狐艹你老母 2023-10-18 12:18 60阅读 0赞

主要操作技能：

[http://www.runoob.com/jquery/jquery-tutorial.html][http_www.runoob.com_jquery_jquery-tutorial.html]

jQuery 操作 CSS
       1>addClass() - 向被选元素添加一个或多个类  （先指定类样式）
       
       2>removeClass() -从被选元素删除一个或多个类 （先指定类样式）
       
       3>css() - 设置或返回样式属性
           3.1> 设置样式        $("p").css("background","aqua"); 
           3.2> 获得样式        $("p").css("background"); 
           
           
    jQuery 效果- 隐藏和显示
         1>hide(speed,callback)  隐藏
         2>show(speed,callback)  显示
        注意：speed:"slow"、"fast" 或毫秒。
          callback：代表是函数
    
    
    
    jQuery 遍历 - 同胞(siblings)
       1>  next() 返回被选元素的下一个同胞元素 ;靠着最近的；
       
       2> nextAll() 方法返回被选元素的所有跟随的同胞元素。
       
       3> nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
       
       4>siblings() 方法返回被选元素的所有同胞元素。

效果：

鼠标离开显示， 鼠标移上消失

![20181205164528452.png][] ![20181205164650139.png][]

<div id="div">
    			
    		   <p>使用jquery</p>
    		
    		</div>
          //鼠标悬停
    		 $("#div").mouseover(function(){
    		 	 $("p").hide();
    		 })
    		//鼠标离开
    		$("#div").mouseout(function(){
    			 $("p").show();
    		})

**再次验证show() 和hide()**

<h2>如何引用jquery</h2>
    
    	<button id="show">显示隐藏</button>
    
          //单击事件
    		$("#show").click(function() {
    
               //获得样式$("h2").css("display")
              if($("h2").css("display")=="block"){
              		//隐藏
    			  $("h2").hide("fast");
              }else {
              		//显示
    			  $("h2").show("1000");
              }
    
    		})

![20181205164917264.png][]![20181205164928288.png][]

**siblings兄弟**

<div>div (父元素)
    			<p>first</p>
    			<h2>second</h2>
    			<h3>third</h3>
    			<p>forth</p>
    			<h4>H4</h4>
    			<h5>H5</h5>
    		</div>
    
    //加载事件
    	$(function() {
           $("h2").siblings().css("background","mediumvioletred");
           
           //单击h3,隐藏p
           $("h2").click(function(){
           	  $(this).siblings().hide();
           })
    	});

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 1][]

[http_www.runoob.com_jquery_jquery-tutorial.html]: http://www.runoob.com/jquery/jquery-tutorial.html
[20181205164528452.png]: https://img-blog.csdnimg.cn/20181205164528452.png
[20181205164650139.png]: https://img-blog.csdnimg.cn/20181205164650139.png
[20181205164917264.png]: https://img-blog.csdnimg.cn/20181205164917264.png
[20181205164928288.png]: https://img-blog.csdnimg.cn/20181205164928288.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20181205165343388.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20181205165419183.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIwMDgwODA4,size_16,color_FFFFFF,t_70