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，添加单位时需要以字符串的方式传入）

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

原文：http://www.cnblogs.com/takeern/p/5371417.html