属性设置

添加和获取属性

//添加属性$("div").attr("names","li");//获取属性$("div").attr("names");

给多个对象添加同一属性，但是不同的值

$("div").attr("names",function (index,value) {return "li"+index;})//这样就给每个div都根据他的index值设置了不同的names属性

给多个对象设置多个属性，且有不同的值

$("div").attr({"names":function (index,value) {return "li"+index;},"toggle-data":function (index) {return "data"+index;}})//总结：$("选择器").attr({"属性1":function(index,value){return 值;},"属性2":function(index,value){return 值;}})

CSS样式设置

添加获取样式

添加样式：$("div").css("backgroundColor","red");获取样式：$("div").css("backgroundColor")还可以添加多个样式：$("div").css({"width":"100px",height:"100px"})

多个内容添加多个样式

$("div").css({"width":function (index) {return (index+1)*20+"px"},height:function (index) {return (index+1)*20+"px"},backgroundColor:function (index) {return "#"+(Math.floor(Math.random()*256*256*256)).toString(16)}})通过function的方法，给同一个样式设置不同个的值

直接添加样式

当添加多个样式的时候可以使用空格分开$("div").addClass("div0 div2");可以移除其中的任意一个样式$("div").removeClass("div2");这里括号里的样式是样式表中定义的样式，不是标签样式

切换样式

taggleClass()可以切换样式，但是是样式表里的样式$("div").addClass("div0").on("click",function (e) {// 这里的this是被点击的DOM对象// console.log(this);$(this).toggleClass("div1"); })括号里面是true,切一次$(this).toggleClass("div1",true);括号里面是false,不可切换$(this).toggleClass("div1",false);

DOM的宽高和位置设置

简单的设置和获取

设置的,不用加单数，会自动加上$("div").width(100);$("div").height(100);获取宽度纯数字，也不带单位console.log($("div").width())console.log($("div").height())

仅获取的宽高

获取宽和padding值$("div").innerWidth();//width+padding$("div").innerWidth(100);//其实可以设置，尽量不要设置这个宽高，因为内容加padding会影响布局outWidth是在上面的基础上再多加一个border的值$("div").outerWidth();//width+padding+border;整个是在括号中填true，表示再多加上margin的值$("div").outerWidth(true);//width+padding+border+margin

仅获取的滚动条的位置

仅获取，不可设置console.log($("div").offset().left);//{left,top};let {left,top}=$("div").offset();console.log(left,top);position相对于父元素定位的位置，offset是相对于页面的位置console.log($(".div1").position());console.log($(".div1").offset());