jq片段代碼分析........

恩  記錄代碼中覺得寫的比較有意思的代碼片段


第一個來自clean:方法

用正則取標籤

 

    if ( typeof elem === "string" ) {
     elem = elem.replace(/(<(/w+)[^>]*?)//>/g, function(all, front, tag){
      return tag.match(/^(abbr|br|col|img|input|link|meta|param|hr|area|embed)$/i) ?
       all :
       front + "></" + tag + ">";
     });
    });

 

如果字符串是按<xxx/>這中格式來的話
replace就會進行 不然不會進行replace
如'<div><span></span></div>'則不進行替換 最後還是返回本身
如果是<div/>則進行替換
function中

all代表  整個字符串

front代表除去結尾部分/>的字符串

tag代表標籤名

tag.match(/^(abbr|br|col|img|input|link|meta|param|hr|area|embed)$/i)
可以看到裏面所有的但是單標籤
所以返回all  就是整個字符串
剩下的雙標籤的就返回 front + "></" + tag + ">"

爲什麼不寫成"<"+tag++ "></" + tag + ">"
因爲有可能標籤是帶有屬性的

如<div style='width:50px'/>

這樣 front 就可以匹配到<div style='width:50px'

所以能夠把屬性也返回了


爲了方便寫成函數的形式方便調用

 

 

 

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns="http://www.w3.org/1999/xhtml ">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>


</head>
<body >
         <div id='ss'>vivivivivivivivivivi</div>
</body>
<script type="text/javascript">      
(function(){
         var window = this,
         jQuery = window.jQuery = window.$ = function( selector, context ) {
                   return new jQuery.fn.init( selector, context );
         },
         quickExpr = /^[^<]*(<(.|/s)+>)[^>]*$|^#([/w-]+)$/,
         isSimple = /^.[^:#/[/.,]*$/;
//------------------------------------------jq擴展函數開始--------------------------------     
         jQuery.extend = function() {
                   var target = arguments[0] || {}, i = 1, length = arguments.length, deep = false, options;
        
                   if ( typeof target === "boolean" ) {
                            deep = target;
                            target = arguments[1] || {};
                            i = 2;
                   }
        
                   if ( typeof target !== "object" && !jQuery.isFunction(target) )
                            target = {};
        
                   if ( length == i ) {
                            target = this;
                            --i;
                   }
        
                   for ( ; i < length; i++ )
                            if ( (options = arguments[ i ]) != null )
                                     for ( var name in options ) {
                                               var src = target[ name ], copy = options[ name ];
                                               if ( target === copy )
                                                        continue;
                                               if ( deep && copy && typeof copy === "object" && !copy.nodeType )
                                                        target[ name ] = jQuery.extend( deep,
                                                                 src || ( copy.length != null ? [ ] : { } )
                                                        , copy );
                                               else if ( copy !== undefined )
                                                        target[ name ] = copy;
                                     }
        
                  return target;
         };
//------------------------------------------jq擴展函數結束--------------------------------     

 

//------------------------------------------jq類開始--------------------------------
         jQuery.fn = jQuery.prototype = {
        
                   init : function( selector, context ){
                            selector = selector || document;
                            if ( selector.nodeType ) {
                                     this[0] = selector;
                                     this.length = 1;
                                     this.context = selector;
                                     return this;
                            };
                            if ( typeof selector === "string" ) {
                                     var match = quickExpr.exec( selector );
                                     if ( match && (match[1] || !context) ) {
                                               if(match[1]){
                                                        selector = jQuery.clean( [ match[1] ], context );
                                               }else{
                                                        var elem = document.getElementById( match[3] );
                                                        //ie6下
                                                        /*if ( elem && elem.id != match[3] )
                                                                 return jQuery().find( selector );*/
                                                        var ret = jQuery( elem || [] );
                                                        ret.context = document;
                                                        ret.selector = selector;
                                                        return ret;                                                               
                                               };
                                     }       
                            }
                            return this.setArray(jQuery.isArray( selector )?selector :jQuery.makeArray(selector));                                                                                 
                   },
                   setArray: function( elems ) {

                            this.length = 0;
                            Array.prototype.push.apply( this, elems );
        
                            return this;
                   }
         }
jQuery.fn.init.prototype = jQuery.fn;       
//------------------------------------------jq類結束--------------------------------


//------------------------------------------jq方法擴展開始---------------------------------------
var   exclude = /z-?index|font-?weight|opacity|zoom|line-?height/i,
         defaultView = document.defaultView || {},
         toString = Object.prototype.toString;

         jQuery.extend({
                   clean: function( elems, context, fragment ) {
                            context = context || document;
        
                            if ( typeof context.createElement === "undefined" )
                                     context = context.ownerDocument || context[0] && context[0].ownerDocument || document;       
        
                            var ret = [], scripts = [], div = context.createElement("div");
                           
                            jQuery.each(elems, function(i, elem){
                                     if ( typeof elem === "number" )
                                               elem += '';
        
                                     if ( !elem )
                                               return;
                                    
                                     if ( typeof elem === "string" ) {
                                               elem = elem.replace(/(<(/w+)[^>]*?)//>/g, function(all, front, tag){
                                                        return tag.match(/^(abbr|br|col|img|input|link|meta|param|hr|area|embed)$/i) ?
                                                                 all :
                                                                 front + "></" + tag + ">";
                                               });

                                               var tags = elem.replace(/^/s+/, "").substring(0, 10).toLowerCase();             

                                               var wrap =
                                                        !tags.indexOf("<opt") &&
                                                        [ 1, "<select multiple='multiple'>", "</select>" ] ||       
                                                        !tags.indexOf("<leg") &&
                                                        [ 1, "<fieldset>", "</fieldset>" ] || 
                                                        tags.match(/^<(thead|tbody|tfoot|colg|cap)/) &&
                                                        [ 1, "<table>", "</table>" ] ||
                                                        !tags.indexOf("<tr") &&
                                                        [ 2, "<table><tbody>", "</tbody></table>" ] ||     
                                                       // <thead> matched above
                                                        (!tags.indexOf("<td") || !tags.indexOf("<th")) &&
                                                        [ 3, "<table><tbody><tr>", "</tr></tbody></table>" ] ||      
                                                        !tags.indexOf("<col") &&
                                                        [ 2, "<table><tbody></tbody><colgroup>", "</colgroup></table>" ] ||        
                                                        !jQuery.support.htmlSerialize &&   //!jQuery.support.htmlSerialize表示在ie瀏覽器下
                                                        [ 1, "div<div>", "</div>" ] ||   
                                                        [ 0, "", "" ];
                                                       
                                               div.innerHTML = wrap[1] + elem + wrap[2];
                                              
                                               while ( wrap[0]-- )
                                                        div = div.lastChild;    //找到正確的父元素
                                              
                                               //在ie6下 會執行下面的代碼
                                               //去掉table中的 tbody標籤
                                               if ( !jQuery.support.tbody ) {
        
                                                        // String was a <table>, *may* have spurious <tbody>
                                                        var hasBody = /<tbody/i.test(elem),
                                                                 tbody = !tags.indexOf("<table") && !hasBody ?
                                                                           div.firstChild && div.firstChild.childNodes :
        
                                                                 // String was a bare <thead> or <tfoot>
                                                                 wrap[1] == "<table>" && !hasBody ?
                                                                           div.childNodes :
                                                                           [];
        
                                                        for ( var j = tbody.length - 1; j >= 0 ; --j )
                                                                 if ( jQuery.nodeName( tbody[ j ], "tbody" ) && !tbody[ j ].childNodes.length )
                                                                           tbody[ j ].parentNode.removeChild( tbody[ j ] );
        
                                                        }
                                               if ( !jQuery.support.leadingWhitespace && /^/s/.test( elem ) )
                                                        div.insertBefore( context.createTextNode( elem.match(/^/s*/)[0] ), div.firstChild );
                                              
                                               elem = jQuery.makeArray( div.childNodes );
                                     }

                                     if ( elem.nodeType )
                                               ret.push( elem );
                                     else
                                               ret = jQuery.merge( ret, elem );                                                    
                            });
                            return ret;
                   },
                   each: function( object, callback, args ) {
                            var name, i = 0, length = object.length;
                  
                            if ( args ) {
                                     if ( length === undefined ) {
                                               for ( name in object )
                                                        if ( callback.apply( object[ name ], args ) === false )
                                                                 break;
                                     } else
                                               for ( ; i < length; )
                                                        if ( callback.apply( object[ i++ ], args ) === false )
                                                                  break;

                            } else {
                                     if ( length === undefined ) {
                                               for ( name in object )
                                                        if ( callback.call( object[ name ], name, object[ name ] ) === false )
                                                                 break;
                                     } else
                                               for ( var value = object[0];
                                                        i < length && callback.call( value, i, value ) !== false; value = object[++i] ){}
                            }
                            return object;
                   },
                   makeArray: function( array ) {
                            var ret = [];
                            if( array != null ){
                                     var i = array.length;
                                     if( i == null || typeof array === "string" || jQuery.isFunction(array) || array.setInterval )
                                               ret[0] = array;
                                     else
                                               while( i )
                                                        ret[--i] = array[i];
                            }
        
                            return ret;
                   },
                   isFunction: function( obj ) {
                            return toString.call(obj) === "[object Function]";
                   },
                   isArray: function(obj){
                            return toString.call(obj) === "[object Array]";
                   },
                   merge: function( first, second ) {
                            var i = 0, elem, pos = first.length;
                            if ( !jQuery.support.getAll ) {
                                     while ( (elem = second[ i++ ]) != null )
                                               if ( elem.nodeType != 8 )
                                                        first[ pos++ ] = elem;
                            } else
                                     while ( (elem = second[ i++ ]) != null )
                                               first[ pos++ ] = elem;

                            return first;
                   },                                                    
         });
//------------------------------------------jq方法擴展結束---------------------------------------

         (function(){
        
                   jQuery.support = {};
        
                   var div = document.createElement("div");     
                   div.style.display = "none";
                   div.innerHTML = '   <link/><table></table><a href="/a" style="color:red;float:left;opacity:.5;">a</a><select><option>text</option></select><object><param/></object>';
        
                   var all = div.getElementsByTagName("*"),
                            a = div.getElementsByTagName("a")[0];
        
                   if ( !all || !all.length || !a ) {
                            return;
                   }
        
                   jQuery.support = {
                            // IE strips leading whitespace when .innerHTML is used
                            leadingWhitespace: div.firstChild.nodeType == 3,
                           
                            // Make sure that tbody elements aren't automatically inserted
                            // IE will insert them into empty tables
                            tbody: !div.getElementsByTagName("tbody").length,
                           
                            // Make sure that you can get all elements in an <object> element
                            // IE 7 always returns no results
                            objectAll: !!div.getElementsByTagName("object")[0]
                                     .getElementsByTagName("*").length,
                           
                            // Make sure that link elements get serialized correctly by innerHTML
                            // This requires a wrapper element in IE
                            htmlSerialize: !!div.getElementsByTagName("link").length,
                           
                            // Get the style information from getAttribute
                            // (IE uses .cssText insted)
                            style: /red/.test( a.getAttribute("style") ),
                           
                            // Make sure that URLs aren't manipulated
                            // (IE normalizes it by default)
                            hrefNormalized: a.getAttribute("href") === "/a",
                           
                            // Make sure that element opacity exists
                            // (IE uses filter instead)
                            opacity: a.style.opacity === "0.5",
                           
                            // Verify style float existence
                            // (IE uses styleFloat instead of cssFloat)
                            cssFloat: !!a.style.cssFloat,
        
                            // Will be defined later
                            scriptEval: false,
                            noCloneEvent: true,
                            boxModel: null
                   };
         })();           
})();
alert($('#ss')[0].innerHTML);
</script>
</html>

 

 

發佈了73 篇原創文章 · 獲贊 0 · 訪問量 10萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章