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