jQuery css和显示隐藏及siblings使用

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/hlx20080808/article/details/84838390

主要操作技能：

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() 方法返回被选元素的所有同胞元素。

 效果：

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

   

	<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");
          }

		})
		

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();
       })
	});