jQuery（六）——CSS和属性操作
CSS和属性操作
1、设置节点的属性
$("#div1").attr("class","cls");
2、传入对象，以键值对的形式同时设置多对属性
$("#div1").attr({
"class":$("#div1").attr("class")+"cls1",
"name":"name1",
"style":"font-size:24px;color:blue"
});3、取到节点的属性
console.log($("#div1").attr("id"));
4、删除节点属性
$("#div1").removeAttr("class");
5、prop 和 attr一样，都可以对节点属性进行读取和设置
【两者的不同】
在读取 属性名="属性值" 的属性时，attr将返回属性值和undefined；而prop将返回true或false；
也就是说，attr要取到的属性，必须是在标签上已经写明的属性，否则无法取到。
6、在原有class的基础上，新增class名字
$("#div1").addClass("cls1");
7、 删除指定的class名称，其余未删除的class名，依然保留
$("#div1").removeClass("cls cls1");
8、 toggleClass 切换class：如果有指定class就删除，如果没有就新增。
$("button:eq(0)").click(function(){
$("#div1").toggleClass("div1");
});9、
.html：取到或设置节点中的html代码
console.log($("#div1").html("<p>11111</p>").html());.text：取到或设置节点中的文本；
console.log($("#div1").text("<p>11111</p>").text());.val：取到或设置表单元素的value值；
console.log($("input:eq(1)").val("<p>11111</p>").val());
10、.css()：给节点添加css样式，属于行级样式表权限
$("#div1").css("color","green");
同时给一个节点添加多对css样式
$("#div1").css({
"color":"yellow",
"font-size":"24px"
});
通过回调函数返回值，修改css样式： 修改div的宽
$("button:eq(0)").click(function(){
var id = setInterval(function(){
$("#div1").css({
"width":function(index,value){
var v = parseFloat(value) +1;
if(v>600){
clearInterval(id);
}
return v + "px";
}
});
},10);
});11、取到或者设置节点的宽高
console.log($("#div1").height(400));
console.log($("#div1").width("400px"));
12、取到节点的宽度+padding，不包含border和margin
console.log($("#div1").innerHeight());
console.log($("#div1").innerWidth());
13、不传参数，表示 宽高+padding+border
console.log($("div1").outerHeight());
传入true，表示 宽高+padding+border+margin
console.log($("div1").outerWidth(true));
14、返回一个节点，相对于浏览器左上角的偏移量
返回一个对象{top: 31, left: 8}
此方法，测量时，会将margin算作偏移量的距离
console.log($("#div1").offset());
15、 返回一个节点，相对于父容器的偏移量
注意：
① 此方法要求父元素必须是定位元素，如果父元素不是定位元素，则依然是相对于浏览器左上角测量
② 测量偏移量时，将不考虑margin，而会将margin视为当前容器的一部分
console.log($("#div1").position());
16、scrollTop：、设置或取到指定节点的滚动条位置
console.log($("#div1").scrollTop(100));
