【Jquery-03】jq中的样式操作

2.1.操作css的方法

jQuery可以使用css方法来修改简单的元素样式，也可以操作类，修改多个样式

1.参数是属性名、属性值、逗号分割，是设置一组样式，属性必须加引号，值如果是数组可以不用限制单位和引号

属性名不加引号则会被视为变量，可以采用链式编程的思想添加单个属性的css

$(this).css("color","red").css("fontSize","25px")

2.参数可以是对象形式，方便设置多组样式，属性名和属性值用冒号隔开，属性可以不用加引号

$(this).css({"color":"white","font-size":"20px",height:200});

3.css中传入键的内容之后，传入的值可以是一个函数，最后返回

	<div class="box">box1</div>
	<div class="box">box2</div>
	<div class="box">box3</div>
<script>
	$(".box").click(function (){
        $(".box").css({
            height:function(index,value){
                //函数会自动接收两个形参
                //index 对象集合当前元素在兄弟节点中的索引位置
                //value 代表的是原先的属性值
                console.log("index,value",index,value);
                if(index == 0){
                    return parseFloat(value)*1.2;
                }else{
                    return parseFloat(value)*1.5;
                }
            }
        })
    })
</script>

2.2设置类样式方法

作用等同于以前的classLIst，可以操作类样式，注意操作类里面的参数不要加点

节点.classLIst.add(“类名”)

1.添加类

$("div").addClass("current")

2.移出类

$("div").removeClass("current");

3.切换类

$("div").toggleClass("current")

jQuery中操作类只是对指定的类进行操作，不会影响原型的类名