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