Login

首页 > 收集信息 > jQuery/Js/Css > 正文

jquery 知识点 --

2012-05-27.Form:互联网

构建了jquery对象,也能对jquery的集合中元素进行局部的调整。现在就是操作。对于jquery对象中Dom元素进行操作。对jquery进行dom的操作就是对jquery对象集合的所有元素都进行操作。   

对于dom的操作可以分成对元素的属性,内容,CSS,insert这几个方面进行操作。   

dom元素的属性   

对dom元素的操作,对元素的属性进行操作是很重要的一项。我们可以通过dom元素的原始方法对元素元素进行操作,但是由于浏览器的兼容等各方面的问题,jquery和其它的lib一样,都提供了一个完好兼容的操作。   

Attr   

名称及描述    返回   兼容性   

getAttribute( name )   当前节点给定Name的属性值   Object   All     

getAttributeNS( namespace, name )   

当前节点给定namespace,Name的属性值     Object   

All   

  

getAttributeNode( name )   

取当前节点给定name的属性节点。    Attr   

All   

  

getAttributeNodeNS( namespace, name )   

取当前节点给定namespace,name的属性节点。 Attr   

All   

  

hasAttribute( name )   

当前节点是否有指定name的属性     Boolean   

All   

  

hasAttributeNS( namespace, name )   

当前节点是否有指定namespace,name的属性   Boolean   

All   

  

hasAttributes()   

当前节点是否有属性    Boolean   

All   

  

removeAttribute( name )   

删除当前节点给定name的属性。     -    All   

  

removeAttributeNS( namespace, name )   

删除当前节点给定namespace,name的属性。         

removeAttributeNode( name )   

删除当前节点给定name的属性节点    -    All   

  

setAttribute( name, value )   

设定当前节点给定name的属性值.    -    All   

  

setAttributeNS( namespace, name, value )   

设定当前节点给定namespace,name的属性值. -    All   

  

setAttributeNode( name, attrNode )   

设定当前节点给定name的属性值节点。 -    All   

  

setAttributeNodeNS( namespace, name, attrNode )   

设定当前节点给定namespace,name的属性值节点。    -    All   

  

上表是 mozilla文档中element的对于attribute的相关操作函数。我们可以看出对于属性的操作只有取值,设值,删除,判断四个方面。每个方面都有对属性值,属性节点和带有命名空间的操作。   

但是对于大多数使用,我们只会用到getAttribute( name )、setAttribute( name, value )、removeAttribute( name )这三种。而jquery正好提供了这三种的实现。它主要的功能就是解决IE、FF等等的兼容问题。比如opacity属性。还有一些html中标签的属性名是元素的属性的简写,如for—htmlFor。我们现在调用Jquery的方法只要直接用简写的for就可以,jquery会完成它们对应的转换。   

Jquery不光在这里给我们提供支援了方便,就是名字上也提供了方便。它把getAttribute( name )、setAttribute( name, value )长且难记的方法名统一在attrr的函数中。   

    // attr(properties)   

    // 将“名/值”形式的对象设置为所有匹配元素的属性。   

    // attr(name)   

    // 取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个//属性的值。如果元素没有相应属性,则返回 undefined 。   

    // attr(key,value)   

    // 为所有匹配的元素设置一个属性值。$("img").attr("src","test.jpg");   

    // attr(key,fn)   

    // 为所有匹配的元素设置一个由这个函数计算的值做属性值。   

     attr : function(name, value, type) {   

         var options = name;// 支持"名/值"形式的对象和string   

      if (name.constructor == String)   

         if (value === undefined)   

            // 调用curCss,attr静态方法返回本对象第一个元素的name的属性值   

            return this[0] && jQuery[type || "attr"](this[0], name); ①   

        else {// 设定属性值,把name String 转换成"名/值"对象,便于统一的处理   

                 options = {};   

                 options[name] = value;   

         }   

        return this.each(function(i) {// 为每个元素的指定的name属性设值   

             for (name in options)   

            // value=options[name],可以是Fn(index),this-->each elem   

             jQuery.attr(type ? this.style : this, name, jQuery     ②   

                     .prop(this, options[name], type, i, name));   

             });   

     },   

上面的代码的①是一个取值操作,因为type是内部使用的参数,type至目前只能是curCSS,也就是如果传入type的值,那就是调用jQuery.curCSS在元素的CSS中去找到对应的属性,如hegth,width等。或者就是调用jQuery.attr在元素中找到对应名字的属性。注意CSS中的属性和元素的属性是不一样,CSS是通过元素的属性class或style来设定的。   

在代码的②处也是调用jQuery.attr进行设值,不过它会先调用jQuery.prop对传入的value进行计算,如value是函数,就取函数返回值。如果value为数字且是为元素的CSS设属性值(如height)的话,说明其没有指定单位,prop会加上px作为默认的单位。   

我们先看一下jQuery.prop的代码:   

// 根据指定元素(elem)的指定的name来修正value值,如加px,exec Fn.   

     prop : function(elem, value, type, i, name) {   

        if (jQuery.isFunction(value))// value=Fn   

             value = value.call(elem, i);// 得到Fn的返回value   

         // 对于element的style中CSS属性,对需要加上单位的加上px单位   

        return value && value.constructor == Number && type == "curCSS"  

                     && !exclude.test(name) ? value + "px" : value;   

         },   

jQuery.Prop返回修正后的value,再回到attr 中代码的②处看一下jQuery.attr,它完成取值和设值的功能。   

    // 为给定的elem的name属性设定value值或取elem的name属性值   

     attr : function(elem, name, value) {   

       // 文本,注释节点不处理                                               ①   

      if (!elem || elem.nodeType == 3 || elem.nodeType == 8)   

            return undefined;   

       var notxml = !jQuery.isXMLDoc(elem),//不处理xml文档的              

             set = value !== undefined,// 取值还是设值?   

             msie = jQuery.browser.msie;//ie   

    // 兼容的处理,标签中的属性名是元素属性名的简化:for--htmlFor,   

    //标签中的属性名全部是小写,而元素属性名采用lamb形式:rowspan : "rowSpan"        name = notxml && jQuery.props[name] || name;//可以看出&&、||的用法。        

if (elem.tagName) {//是元素                                           ②   

       var special = /href|src|style/.test(name);// 要特殊处理   

    // 对于safari的特殊处理   

      if (name == "selected" && jQuery.browser.safari)   

                     elem.parentNode.selectedIndex;   

      if (name in elem && notxml && !special) {// 通过DOM 0方式进入属性③   

           if (set) {// 改变属性但IE中的type类型的元素不能改变   

                if (name == "type" && jQuery.nodeName(elem, "input")   

                                 && elem.parentNode)   

                        throw "type property can't be changed";   

             elem[name] = value;                                              

             }   

           // 对于attr(form,name),取的是form[name].value   

           if (jQuery.nodeName(elem, "form")&& elem.getAttributeNode(name))   

                    return elem.getAttributeNode(name).nodeValue;       ④   

    return elem[name];                                                                            

}   

                   

    // 对style进行属性的操作                   

    if (msie && notxml && name == "style")                              ⑤   

         //再次调用本函数,执行第二部分的代码,设定style中cssText.   

          return jQuery.attr(elem.style, "cssText", value);   

        // IE会报错 see #1070   "" + value转换为字符串   

if (set) elem.setAttribute(name, "" + value); //dom1              ⑥   

     var attr = msie && notxml && special//href|src|style 在IE要特殊处理   

                 ? elem.getAttribute(name, 2): elem.getAttribute(name);   

                // 不存在的属性返回null时,改成返回undefined   

    return attr === null ? undefined : attr;   

}   

// 元素的CSS的属性,也就是当elem参数是元素的style时。。。                   ⑦   

// IE 使用 filters for opacity   

if (msie && name == "opacity") {                                       ⑧   

    if (set) {// IE opacity 要层的支持   

         elem.zoom = 1;   

        // 设 alpha filter 来设定 opacity   

elem.filter = (elem.filter || "").replace(/alpha\([^)]*\)/,"") + ((parseInt(value) + '' == "NaN"? "": "alpha(opacity=" + value * 100 + ")"));   

      }   

    //找到opacity的值并返回。   

return elem.filter && elem.filter.indexOf("opacity=") >= 0?   

(parseFloat(elem.filter.match(/opacity=([^)]*)/)[1])/100)+'': "";   

}   

// lamb字的支持   

name = name.replace(/-([a-z])/ig, function(all, letter) {           ⑨   

            return letter.toUpperCase();});   

if (set) elem[name] = value;   

return elem[name];   

},   

jQuery.attr函数分成三个部分,第一部分②处之前的代码,它是处理一些准备工作,如标签属性名与元素的属性名之间的对应。第二部分是②~⑦,它主要完成对元素的属性进行设值或取值。③~⑤首先通过Dom 0的方式(elem[name])来,如果不能完成的话,就采用⑤~⑦的Dom1的方式通过getAttribute( name )、setAttribute( name, value )来进行操作。这种操作相对Dom0的方式,可以对XML进行操作。而且还能对Dom1的href|src|style属性进行操作。   

在⑤处,我们可以看出IE 中Style属性要进行特殊的处理。这个处理就是第三部分的的任务,位处于⑦之后的代码,对于元素的CSS属性进行取值或设值。在⑨处,我们可以看到CSS属性名只支持lamb字的形式。   

jQuery.attr不但可以完成对元素的属性设/取值,还可以能CSS进行设/取值。   

  

对于属性的操作,jquery还提供了removeAttr。它通过调用Element ‘s removeAttribute()来完成对this中每个元素都删除属性。   

// 一组对元素attr,class等进行操作的函数   

jQuery.each( {   

     removeAttr : function(name) {// 除去元素的一个属性   

             jQuery.attr(this, name, "");   

            if (this.nodeType == 1)   

                this.removeAttribute(name);//this==dom element   

         },   

         .. .. ..   

     }, function(name, fn) {   

         jQuery.fn[name] = function() {   

            return this.each(fn, arguments);   

         };   

     });  

 

粤ICP备09089143号