HTML代码：

     
      	div1	
      
1
	
      
2
	
      
3
     
     
      div2
     
     
      div3
     

　

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("
111
").html());

　　

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

console.log($("#div1").text("
111
").text());

　　

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

console.log($("input").val("
111
").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));