jQuery css和顯示隱藏及siblings使用
阿新 • • 發佈:2019-01-08
主要操作技能:
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();
})
});