jQuery 的 $ 物件應該怎麼做?

edited 十月 2013 in Javascript
最近發現 jQuery 的 $ 物件好像深不可測 (笑)

所以很想模仿一下做一個簡易版本的...
但是我完全摸不著頭緒...
希望各位大大能稍微說明一下

(現在都強迫自己從高手中學東西!?)

原始討論: http://twpug.net/x/modules/newbb/viewtopic.php?topic_id=3405

評論

  • edited 五月 2008
    這是 Prototype 的方法:
    function $(element) {
      if (arguments.length > 1) {
        for (var i = 0, elements = [], length = arguments.length; i < length; i++)
          elements.push($(arguments[i]));
        return elements;
      }
      if (Object.isString(element))
        element = document.getElementById(element);
      return Element.extend(element);
    }
    

    我不熟 jQuery ,所以用 Prototype 為例,其實 $() 主要只是簡化 getElementById() 這個操作,它所延伸的方法很多是 JavaScript 預設提供的,有空可以翻翻參考手冊:
    http://www.w3schools.com/jsref/
  • edited 五月 2008
    jquery的功能類似:
    (fucntion(){
    var jQuery = window.jQuery = function( selector, context ) {
    	return new jQuery.prototype.init( selector, context );
    };
    window.$ = jQuery;
    jQuery.fn = jQuery.prototype = {
    	init: function( selector, context ) {
    		selector = selector || document;
    
    		if ( selector.nodeType ) {
    			this[0] = selector;
    			this.length = 1;
    			return this;
    
    		} else 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] );
    
    					if ( elem )
    						if ( elem.id != match[3] )
    							return jQuery().find( selector );
    
    						else {
    							this[0] = elem;
    							this.length = 1;
    							return this;
    						}
    
    					else
    						selector = [];
    				}
    
    $(content).find(expr)
    			} else
    				return new jQuery( context ).find( selector );
    
    		} else if ( jQuery.isFunction( selector ) )
    			return new jQuery( document )[ jQuery.fn.ready ? "ready" : "load" ]( selector );
    
    		return this.setArray(
    			selector.constructor == Array && selector ||
    
    			(selector.jquery || selector.length && selector != window && !selector.nodeType && selector[0] != undefined && selector[0].nodeType) && jQuery.makeArray( selector ) ||
    
    			[ selector ] );
    	},
    ........
    
    })();
    
    我把註解拿掉了,把init之外的函數也拿掉,只留下使用$()直接相關的東西讓你看得比較清楚,但是在init函數之內還有呼叫其他的函數,你可以拿jquery的原始碼來參考看看。
Sign In or Register to comment.