DOM与CSS操作



DOM

设置元素及内容

html()和text()方法

方法名	描述
html()	获取元素中HTML内容
html(value)	设置元素中HTML内容
text()	获取元素中文本内容
text(value)	设置原生中文本内容
val()	获取表单中文本内容
val(value)	设置表单中文本内容

注意：$(‘input’).val(‘check1’,’check2’,’radio1’);表示传递默认选中值

元素属性操作

方法名	描述
attr(key)	获取某个元素key属性的属性值
attr(key,value)	设置某个元素key属性的属性值
attr({key1:value1,key2:value2…})	设置某个元素多个key属性的属性值
attr(key,function(index,value){})	设置某个元素key通过function来设置

注意：

1、attr()方法里的function(){}可以不传递参数，可以只传递一个参数index，表示当前索、引（从0开始），也可以传递2个参数index，value，第二个属性表示属性原本的值。

2、jQuery中有很多方法可以使用function（）{}返回字符串，例如html(),text(),val(),is(),filter()。

 

元素样式操作

包括直接设置CSS样式、增加CSS类别、类别切换、删除类别这几种操作方法

方法名	描述
css(name)	获取某个元素行内的CSS样式
css([name1,name2,name3])	获取某个元素行内的多个CSS样式
css(name,value)	设置某个元素行内的CSS样式
css(name,function(index,value))	设置某个元素行内的CSS样式
css({name1:value1,name2:value2})	设置某个元素行内的多个CSS样式
addClass(class)	给某个元素添加一个CSS类
addClass(class1 class2 class3…)	给某个元素添加多个CSS类
removeClass(class)	删除某个元素的一个CSS类
removeClass(class1 class2 class3…)	删除某个元素的多个CSS类
toggleClass(class1)	来回切换默认样式和指定样式
toggleClass(class1 class2 class3…)	来回切换默认样式和指定样式
toggleClass(class,switch)	来回设置切换样式时设置切换频率
toggleClass(function(){})	通过匿名函数设置切换规则
toggleClass(function(){},switch)	在匿名函数设置时也可以设置频率
toggleClass(function(i,e,s){},switch)	在匿名函数设置时传递三个参数

 

jQuery提供了一个遍历的工具，$.each()方法可以遍历对象数组

在js中：each用法

varbox=$('div').css(['color','height','length']);

$.each(box,function(attr,value){

         alert(attr+":"+value);

});

也可以直接调用each

$('div').each(function(index,element){

         alert(index+"::::"+element);

});

 

CSS方法

方法名	描述
width()	获取某个元素的长度,返回类型为number
width(value)	设置某个元素的长度
width(function(index,value){})	通过匿名函数设置某个元素的长度
height()	获取某个元素的高度,返回类型为number
height(value)	设置某个元素的高度
height(function(index,value){})	通过匿名函数设置某个元素的高度

内边距和外边距尺寸方法

方法名	描述
innerWidth()	获取元素宽度，包含内边距
innerHeight()	同上
outerWidth()	获取元素宽度，包含内边距和边框
outerHeight()	同上
outerWidth(true)	获取元素宽度，包含内边距，边框和外边距
outerHeight(true)	同上

 

元素偏移方法

方法名	描述
offset	获取某个元素相对于视口的偏移位置
position()	获取某个元素相对于父元素的偏移位置
scrollTop()	获取垂直滚动条的值
scrollTop(value)	设置垂直滚动条的值
scrollLeft()	获取水平滚动条的值
scrollLeft(value)	设置水平滚动条的值