jQuery的基础操作（样式，动画，特殊效果，链式调用，click事件）

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()	依次展开或卷起

利用jQuery实现一个按钮控制元素的显示和隐藏, 方法一（代码展示）：

<!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中的属性值必须是一个数值。