1,jQuery的样式操作
1.1获取元素的样式:
$("div").css("width"); 获取div的宽度
$("div").css("height"); 获取div的高度
1.2设置元素的样式
方法一:适用于给元素设置较少样式
$("div").css("width","100px");
$("div").css("backgroundColor","pink");
方法二:适用于给元素设置较多样式
$("div").css({
width:"100px",
height:"100px",
backgroundColor:"pink",
})
1.3操作样式的类名
$("#div1").addClass("divClass2") //为id为div1的对象添加样式divClass2
$("#div1").removeClass("divClass") //移除id为div1的对象的class名为divClass的样式
$("#div1").removeClass("divClass divClass2") //移除多个样式
$("#div1").toggleClass("anotherClass") //重复切换anotherClass样式
1.4click的事件绑定
$("div").click(function{
alert("我被点击了");
})
1.5jQuery特殊效果的
方法 | 描述 |
fadeIt() | 淡入 |
fadeOut() | 淡出 |
fadeToggle() | 切换淡入淡出 |
hiden() | 隐藏 |
show() | 显示 |
toggle() | 切换元素的显示状态 |
slideDown() | 向下展开 |
slideUp() | 向上卷起 |
slideToggle() | 依次展开或卷起 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.v_02 {
width: 100px;
height: 100px;
border: 1px solid black;
background-color: pink;
margin-top: 20px;
display: none;
}
</style>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function() {
// 获取相关元素
var div = $(".v_02");
var btn = $("button");
// 添加点击事件
btn.click(function() {
if (div.css("display", ) == "none") {
div.css("display", "block");
} else {
div.css("display", "none");
}
})
})
</script>
</head>
<body>
<button>隐藏显示按钮</button>
<div class="v_02">变换的盒子</div>
</body>
</html>
方法二(部分代码展示):
btn.click(function() {
div.toggle(2000);
})
方法三(部分代码展示):
btn.click(function() {
div.css("display", ) == "none" ? div.css("display", "block") : div.css("display", "none");
})
效果显示:
1.6jQuery的链式调用
$(".v_01").children("ul").slideDown("fast").parent().siblings("div").css("backgroundColor", "#a7e5ec");
链式调用的案例,Tab栏的切换效果如图所示:
思路分析:1,点击上部的li,获取到当前li的索引号。2,上下部里面相应索引号的内容显示,其余的内容隐藏。3,当前li添加active类(设置背景颜色),其余兄弟移除类。
代码实现(jQuery部分代码):
$(function(){
$('.wrap>.blist').on('click','li',function(){
//.on()是一个绑定时间处理器,它的作用是在选定的元素上绑定一个或多个事件处理函数。// $(this).parent().siblings().children('li:eq('+index+')').show().siblings().hide();
$(this).addClass('active').siblings().removeClass('active');
})
})
1.7jQuery的动画:
语法:animate(params,[speed],[easing],[fn])
参数说明:params:为想要更改的样式属性。
speed的取值(“slow”,“normal”,“fast”)或表示动画时长的毫秒数(如:2000)。
easing:用了指定切换效果,默认值是"swing"。
fn:回调函数。
示例代码:
$("div").animate({
left: 500,
top: 300,
opacity:0.4,
width: 500
}, 2000);
注:animate中的属性值必须是一个数值。