Comment utiliser la fonction $() dans jQuery

Cet article explique avec vous comment utiliser la fonction $() dans jQuery. Le contenu est très bon. Les amis dans le besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde.

$() de jQuery

Généralement, lorsque nous utilisons jQuery, nous utilisons toujours $(), et $ pointe vers le jQuery global, nous appelons donc en fait jQuery(). Le résultat est un objet jq renvoyé, mais nous n'avons pas besoin d'utiliser new pour créer l'objet lorsque nous l'utilisons, nous pouvons donc spéculer que $() est une fonction d'usine. La définition de

$()

jQuery() est définie dans src/core.js Si return new jQuery() est appelé dans cette méthode, il tombera dans une boucle, donc init() l'est. appelé pour aider à la construction de l’instance. Il convient de mentionner que jQuery.fn pointe vers /src/core.js dans jQuery.prototype.

    // Define a local copy of jQuery
    jQuery = function( selector, context ) {

        // The jQuery object is actually just the init constructor 'enhanced'
        // Need init if jQuery is called (just allow error to be thrown if not included)
        return new jQuery.fn.init( selector, context );
    }

La définition de la méthode init

jQuery.fn.init() est définie dans src/core/init.js. La méthode accepte trois paramètres selector, context, root À l'intérieur de la méthode, déterminez d'abord s'il y a des paramètres, et renvoyez false s'il n'y a pas de paramètres.

    init = jQuery.fn.init = function( selector, context, root ) {
        var match, elem;

        // HANDLE: $(""), $(null), $(undefined), $(false)
        if ( !selector ) {
            return this;
        }

        // Method init() accepts an alternate rootjQuery
        // so migrate can support jQuery.sub (gh-2101)
        root = root || rootjQuery;

        // Handle HTML strings
        // < xxx > 或 $(#id)
        if ( typeof selector === "string" ) {
            if ( selector[ 0 ] === "<" &&
                selector[ selector.length - 1 ] === ">" &&
                selector.length >= 3 ) {

                // Assume that strings that start and end with <> are HTML and skip the regex check
                match = [ null, selector, null ];

            } else {
                // match[1]是html字符串，match[2]是匹配元素的id
                // selector是id选择器时match[1]为undefined，match[2]是匹配元素的id
                // selector是html字符串，match[1]是html字符串，match[2]为undefined
                match = rquickExpr.exec( selector );
            }

            // Match html or make sure no context is specified for #id
            // 匹配结果非空 且 存在匹配字符串或context空时执行
            // 未为id选择器限定查找范围
            if ( match && ( match[ 1 ] || !context ) ) {

                // HANDLE: $(html) -> $(array)
                if ( match[ 1 ] ) {
                    context = context instanceof jQuery ? context[ 0 ] : context;

                    // Option to run scripts is true for back-compat
                    // Intentionally let the error be thrown if parseHTML is not present
                    // 生成dom节点并合并到this上
                    jQuery.merge( this, jQuery.parseHTML(
                        match[ 1 ],
                        context && context.nodeType ? context.ownerDocument || context : document,
                        true
                    ) );

                    // HANDLE: $(html, props)
                    // 遍历props，添加属性或方法
                    if ( rsingleTag.test( match[ 1 ] ) && jQuery.isPlainObject( context ) ) {
                        for ( match in context ) {

                            // Properties of context are called as methods if possible
                            if ( jQuery.isFunction( this[ match ] ) ) {
                                this[ match ]( context[ match ] );

                            // ...and otherwise set as attributes
                            } else {
                                this.attr( match, context[ match ] );
                            }
                        }
                    }

                    return this;

                // HANDLE: $(#id)
                // 处理id选择器且无context
                } else {
                    elem = document.getElementById( match[ 2 ] );

                    if ( elem ) {

                        // Inject the element directly into the jQuery object
                        this[ 0 ] = elem;
                        this.length = 1;
                    }
                    return this;
                }

            // HANDLE: $(expr, $(...))
            // selector是选择器 context为undefined或context.jquery存在时执行。
            // $(#id,context)或$(.class [, context])等情况
            } else if ( !context || context.jquery ) {
                return ( context || root ).find( selector );

            // HANDLE: $(expr, context)
            // (which is just equivalent to: $(context).find(expr)
            } else {
                return this.constructor( context ).find( selector );
            }

        // HANDLE: $(DOMElement)
        // 传入DOM元素
        } else if ( selector.nodeType ) {
            this[ 0 ] = selector;
            this.length = 1;
            return this;

        // HANDLE: $(function)
        // Shortcut for document ready
        } else if ( jQuery.isFunction( selector ) ) {
            return root.ready !== undefined ?
                root.ready( selector ) :

                // Execute immediately if ready is not present
                selector( jQuery );
        }

        return jQuery.makeArray( selector, this );
    };

le sélecteur est une chaîne

Si un selector n'est pas vide, gérez d'abord le cas où selector est une chaîne, qui est divisée en chaîne html, $(selector) , $(expr, $(...)) et $(expr, context) quatre sortes. Si selector est un type de chaîne, renvoyez le nœud dom généré en fonction de la chaîne entrante. Pendant le traitement, utilisez d'abord la correspondance régulière pour trouver la chaîne html ou l'identifiant. Si le résultat correspondant n'est pas vide et qu'il existe une chaîne correspondante ou que le contexte est vide, cela signifie que selctor est une chaîne HTML ou selector est un sélecteur d'identifiant et que le contexte de recherche n'est pas limité. Lors du traitement des chaînes HTML, déterminez d'abord dans quel document le nœud généré doit être inséré (c'est-à-dire le paramètre context). La valeur par défaut est de charger le document jQuery, d'appeler $.parseHTML() pour générer un nœud dom et de l'ajouter. this; si context est un objet, alors c'est l'appel de $(html, props), qui monte les attributs ou les méthodes sur le dom et renvoie l'objet jq généré. Si l'appel à $(#id) correspond et que context est vide, alors document.getElementById est appelé directement pour trouver l'élément. Si l'élément existe, this[0] pointe vers l'élément et le résultat de la recherche est renvoyé.

Si selector n'est pas un sélecteur d'identifiant ou si context n'est pas vide, appelez find pour rechercher. Si context n'est pas vide, lancez la recherche à partir de context Sinon, effectuez une recherche globale. et trouvez les résultats comme valeur de retour.

le sélecteur est un élément DOM

Gérez ensuite le cas où le paramètre entrant est un élément Dom. Pointez this[0] sur l'élément Dom, définissez la longueur de l'objet jq sur 1 et renvoyez this.

le sélecteur est la fonction

qui traite finalement $(function(){}) Si ready existe, la fonction entrante est appelée ready(f()) Sinon, jQuery est transmis et la fonction est appelée directement. , appelant makeArray Utilisez son résultat comme valeur de retour.

Modifiez le prototype d'init

init = jQuery.fn.init = function( selector, context, root ) {
    ...
    }
// Give the init function the jQuery prototype for later instantiation
init.prototype = jQuery.fn;

Définissez la méthode sur le prototypeinit, puis pointez le prototype d'init vers le prototype de jQuery. Si vous ne le faites pas, le Le prototype de l'instance créée est init.prototype, et non jQuery.fn, est en fait une instance d'init plutôt qu'une instance de jQuery. Diverses variables et méthodes définies sur core.js dans jQuery.fn ne peuvent pas être appelées.

Recommandations associées :

Comment demander le téléchargement d'un fichier Execl via Ajax

Utiliser slice pour encapsuler tableaux dans la méthode JS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!