上一节讲了如何查找元素节点,这一节将表述查找到节点之后的属性操作。包括(设置,读取,删除,修改)元素属性值,并且从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,添加单位时需要以字符串的方式传入)

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