jQuery 属性和CSS

HTML代码：

<div id="div1">
	div1
	<p>1</p>
	<p>2</p>
	<p>3</p>
</div>
<div id="div2">div2</div>
<div id="div3">div3</div>

　

attr()

设置节点的属性

$("#div1").attr("class","cls");

 

取到节点的属性

console.log($("#div1").attr("id"));

 

传入对象，以键值对的形式同时设置多对属性

$("#div1").attr({
	//"class":"cls1",
"class":$("#div1").attr("class","cls1"),
	"name":"name1",
	"style":"font-size:24px;color:blue;"
});

 

 

删除节点属性

$("#div1").removeAttr("class");

 

 

【prop和attr一样，都可以对节点属性进行读取和设置 】

二者的不同：

1.在读取 属性名="属性值" 的属性值时，attr将返回属性值和undefined；

而prop返回true或false 也就是说，attr要取的属性，必须是在标签上已经写明的属性，否则无法取到

console.log($("input:eq(0)").attr("checked"));
console.log($("input:eq(0)")).prop("type");

　　

 

在原有class的基础上，新增class名

$("#div1").addClass("cls2");

 

删除指定的class名称，其余未删除的class名，依然保留

$("#div1").removeClass("cls2");

 

 

切换class，如果有指定class就删除，没有就新增

$("button:eq(0)").click(function(){
	$("#div1").toggleClass("div1");
});

 

 

html() 取到或设置节点中的html代码；

console.log($("#div1").html("<p>111</p>").html());

　　

text() 取到或设置节点中的文本；

console.log($("#div1").text("<p>111</p>").text());

　　

.val() 取到或设置表单元素的value值。

console.log($("input").val("<p>111</p>").val());

　　

.css() 给节点添加css样式，属于行级样式表权限。

$("#div1").css("color","green");

　　

 

同时给一个节点添加多对css样式。

$("#div1").css({
    "color":"green",
    "font-size":"14px"
});

　　

 

通过回调函数返回值，修改css的样式。

$("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);
});                

　　

 

取到或者设置节点的 宽高。只包含width/height

console.log($("#div1").height(400));
console.log($("#div1").width("400px"));

 

取到 节点 的宽度+padding。 不包含border和margin

console.log($("#div1").innerHeight());
console.log($("#div1").innerWidth());

 

 

不传参数， 表示 宽高+padding+border

传入true，表示 宽高+padding+border+margin

console.log($("#div1").outerHeight());
console.log($("#div1").outerWidth(true));

 

 

返回一个节点，相对于浏览器左上角的偏移量。

返回一个对象{top:20,left20}

此方法，测量时，会将margin算作偏移量的距离。

console.log($("#div1").offset());

 

 

返回一个节点，相对于父容器的偏移量。

 

 

注意： ① 使用此方法，要求父元素必须是定位元素。 如果父元素不是定位元素，则依然是相对于浏览器左上角进行测量。

② 次方法，测量偏移时，将不考虑margin。 而会将margin视为当前容器的一部分。

console.log($("#div1").position());

 

 

scrollTop： 设置或取到指定节点的滚动条的位置。

console.log($("#div1").scrollTop(100));