1. 程式人生 > >jQuery css和顯示隱藏及siblings使用

jQuery css和顯示隱藏及siblings使用

主要操作技能:

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