jQuery属性操作

上一节讲了如何查找元素节点，这一节将表述查找到节点之后的属性操作。包括（设置，读取，删除，修改）元素属性值，并且从dom和jQuery两个方面讨论他们。

1 设置元素

dom中

设置属性

setAttribute（name，value）

访问属性

getAttributr(name)返回指定属性的属性值

jQuery中设置属性访问属性都在下面两个函数中

设置属性

prop（prpertname，value，function）

attr(同上) （ie浏览器中不允许使用该方法改变<input><button>的type属性。）

两函数差别啊，attr（）函数当访问chechbox的disable属性时，会存在一些问题，所以后面推出了prop方法，选择的时候一般prop用在属性值为true/false时。

访问属性

仅传入第一个参数，返回属性的属性值，只会获得第一个匹配元素之，可以使用each（）遍历。

（w3表单规范，checked是个布尔属性吗，使用prop("checked")返回布尔值,使用attr（‘checked’）返回checked，当检测表单是否选中时应当使用prop ，true/false使用prop。

2 删除属性

dom中使用removeAttribute（name）

jQuery中包装prop（） ，removeprop()主要用于删除prop设置的属性集

removeAttr（）使用原生的dom removeAttribute()该方法优点可直接被jQuery对象访问调用，而且有良好的浏览器兼容性，对于特殊属性使用removeProp（）方法

3类操作

dom中没有专门的操作方法

jQuery中

addclass(classname)

1 他可以添加多个属性（ $("p").addclass('class1 class2');

2 该方法不会替换样式，只是简单的添加

removeclass(classname)删除元素，也可删除多个元素，没有参数传入删除所有。

切换类样式

toggleclass（classname,switch,fuction()）switch用来判断是添加还是移除该元素。

判断样式

hasAttribute（）该方法将is包装。用于判断样式是否存在

3 读写文本和值

《HTML》

dom为每个元素定义了innerHTML属性,使用该属性会覆盖本身带有的html

jquery

html()

html(htmlstring)

html(function(index,html))

(该方法没有参数时将读取节点下的所有html，存在参数时将向指定节点插入html，也会覆盖本身)

《text》

dom中 innertext 该属性存在严重兼容问题

jquery

text()

text(htmlstring)

text(function(index,html))

(同上后者为text)

《value》

值是特殊文本字符串，主要在表单中设置value，javascript中直接调用value属性存在兼容问题

jquery

val()

val(htmlstring)

val(function(index,html))

(没什么好介绍的，主要用在提示输出文本框：if($(this).val==""{$(this),val=请输入文本}))

4 样式表操作

1 读写ccs样式 （ccs样式：行内文档，内部文档，外部文档）

javascript中直接定义style对象获取行内样式（无法获取其他样式）

读写ccs样式表，可以使用document对象的stylesheets对象实现，dom还为每个样式表定义一个cssRules集合，但是ie浏览器定义rules集合支持操作兼容代码

{var cssRules=document.stylesheets[0].cssRules||document.stylesheets[0].rules}

往样式表中写入样式

ccsRules[0].style.fontWeigh="bold"

insertRule('p{background-color=red}',n);

addRule("p","background-color=red",n);i IE转用方法

jquery定义ccs（）方法

ccs(name)

ccs(name,value)

ccs(function(index,html))

一个参数返回ccs样式，2个参数添加ccs样式 ，可添加多个样式例：$("p").ccs(color:"red",fontWeigt:"bold");

绝对定位与相对定位

绝对定位

jquery将dom中的offsetparent（）包装后，省略了迭代过程得到offset()方法

offset（）

offset(coordomates)

offset(function(index,coords))

1 coordomates表示一个对象包含left，top属性

2 调用该方法没有传递参数，则返回一个对象，包含left和top属性，该方法仅对可见元素有效

相对定位

（IE浏览器定位是计算父元素边框，而其余没有）

position（）该方法调用时会自动需找最近的父元素且父元素中postion：relative

设置盒子大小

width（）

height（）（默认单位px，添加单位时需要以字符串的方式传入）

没有参数时读取对象大小，有参数则改变对象大小