jQuery属性操作------03

目录

一: 属性（标签中的属性）

二: Class操作

三: html/text/val

四: CSS操作

五: 位置操作

六: 尺寸操作

---

一: 属性（标签中的属性）

<font color="red">这是中国上海</font>

<font id="font1">这是中国上海</font>

var font=$('font'); //jquery对象

var font1=$('#font1');

 

<a> attr(name) ：获取元素的属性值

eg: alert(font.attr('color')); //获取font元素属性color的值red

<b> attr(key,value) ：设置元素的属性的值

eg: font.attr('size',7); //给font元素新增属性size,值为7

<c> attr(properties) ：一次为元素设置多个属性，要求参数是一个json对象

eg: font.attr({'size':3,'color':'yellow'}); //若属性存在,则修改

<d> attr(key,fn) ：通过函数的返回值设置元素的属性

eg: font.attr('size',function(){return Math.random()*7;});

<e> removeAttr(name) ：移除元素的属性

eg: font.removeAttr('color');//移除font中属性color

 

二: Class操作

<*a*> addClass(class) ：为元素添加class样式

<*b*> removeClass(class) ：为元素移除class样式

<*c*> toggleClass(class) ：切换样式，当元素拥有class样式则移除，否则，即添加

eg: div.toggleClass('cls1')

<d> hasClass(class) ：判断当前元素是否具有class样式

eg: <div></div>

var div=$('div');

.cls1{

background-color:#ff0000;

}

三: html/text/val

=>在jQuery对象中,textarea使用val或html都可以,

在DOM中,使用innerHTML或value都可以

 

<a> html() ：获取元素的值（主要针对的是双标签元素）

<b> html(val) ：设置元素的值，有值的话就替换，没值就添加

<c> val() ：获取表单元素的value值（主要针对的是表单元素)

<d> val(val) ：设置表单元素的value值

<e> text() ：获取元素的值

<f> text(val) ：设置元素的值

eg:html和text的区别?

在设置时，如果是普通文本信息，两者效果一致，如果设置的值中包含标签，

那么html方法可以进行解析执行，而text方法不能解析html代码，会当做普

通文本处理。

四: CSS操作

div></div>

<font>我爱中国</font>

var div=$('div');

var font=$('font');

<1> css(name) ：获取元素的css的值

<2> css(name,value) ：设置元素的css的值

eg:

div[0].style.backgroundColor='red';//给div加背景色红色 DOM操作

div.css('backgroundColor','green'); //给div加背景色绿色

font.css('color','red');

<3> css(properties) ：一次为元素设置多个css的值，要求参数为json对象

eg: font.css({color:'yellow',fontSize:'50px'})

五: 位置操作

=>可以进行滚动条设置,滚动时,给判断,固定距离顶部距离; 案例demo09_offset.html

<div></div>

var div=$('div');

 

<a> offset() ：获取元素的所在位置，返回的是json对象，对象包含top与left两个属性

eg: console.log(div.offset().top); //获取距离网页顶部的距离

<b> offset(coordinates) ：设置元素的所在位置，要求是一个json对象且必须包含top与left属性。

eg: div.offset({top:50,left:300});

 

六: 尺寸操作

<a> width() ：获取元素的宽度

<b> width(value) ：设置元素的宽度

<c> height() ：获取元素的高度

<d> height(value) ：设置元素的高度