【jQuery学习笔记---------包裹元素与属性操作】

包裹元素与属性操作

当需要在结构中插入额外的标记时，这种包裹操作不会破坏文档原有的结构和语义。jQuery定义了wrap()系列方法用来包裹元素，DOM并不原生支持这个

jQuery实现

wrap(指定元素)  :所有选择的元素(每一个)外加指定元素

wrapAll(指定元素)  :在所有选择元素（总外边）外加上指定元素

wrapInner(指定元素)  :在所有选择元素（每一个）内添加指定元素

指定元素：可以接受html字符串或者DOM元素对象，它们可以是单个元素，也可以是嵌套的多个元素。如归不是嵌套的多个元素，而是多个并列的元素，则jQuery会把它们分开并分别进行包裹。

使用javascript自定义wrap()、wrapAll()、wrapInner()方法

wrap：

DOMExtend(“wrap”,function(e){

      var _this = this;

      _this.parentNode.insertBefore(e,_this);//当前被包裹元素前插入包裹元素

     e.appendChild(_this);

       return _this;

})

 

wrapInner:

DOMExtend(“wrapInner”,function(e){

var _this = this;

_this.parentNode.insertBefore(e,_this);

while(_this.firstChild){

   e.appendChild(_this.firstChild);

}

_this.appendChild(e);

return _this;

});

 

操作属性

jQuery使用attr()方法设置元素的属性，而DOM定义了setAttribute()方法来设置元素的属性。为了兼容XML文档，DOM提供了更多属性设置的方法，由于它们在HTML文档中不经常使用，故这里也不再具体讲解。

jQuery实现

使用jQuery的attr()方法设置元素属性时，需要为该方法设置两个参数值，第一个参数指定属性名，第二个参数指定属性值。也可以为第二个参数传递一个函数。由函数结果充当属性值。

    如：$(“p”).attr(“title”,”段落文本”);

设置一个参数表示读取参数指定名称的属性值。如果没有相应的属性，则返回undefined。

 

javascript实现

DOM定义的setAttribute()方法与jQuery()定义的attr()方法在用法上基本相同。

取得属性：getAttribute()方法

比较

jQuery的肯定要慢喽！

 

删除属性

jQuery使用removeAttr()方法仅需要指定属性即可。

javascript使用removeAttribute();来完成