Java programmer's JavaScript learning notes (12 -- jQuery-extension selector)

Java programmer's JavaScript learning notes (12 -- jQuery-extension selector)
We plan to complete this note in the following order:
1. concept.
2. Copy and inherit attributes.
3. this/call/apply.
4. Closure/getter/setter.
5. prototype.
6. object-oriented simulation.
7. Basic jQuery mechanism.
8. jQuery selector.
9. jQuery tool method.
10. jQuery-extension at the class level.
11. jQuery-extensions at the "object" level.
12. jQuery-extended selector.
13. jQuery UI.
14. Extend the jQuery UI.
This is Part 1 of the notes. In this article, we try to extend the jQuery selector, which is also a process of interpreting the jQuery source code.

0. Why do I need to scale? The built-in functions are very powerful, but sometimes the code will be very wordy, and beginners are always not good at understanding, affecting efficiency.
Simplified architecture can improve program readability and efficiency.

1. How to expand? JQuery provides a variety of extension mechanisms for selectors. As follows:

// Override sizzle attribute retrievaljQuery.find = Sizzle;jQuery.expr = Sizzle.selectors;jQuery.expr[:] = jQuery.expr.pseudos;jQuery.unique = Sizzle.uniqueSort;jQuery.text = Sizzle.getText;jQuery.isXMLDoc = Sizzle.isXML;jQuery.contains = Sizzle.contains;

The literal Analysis of jQuery. expr and jQuery. expr [:] should be our focus.

Expr = Sizzle.selectors = {pseudos: {enabled: function( elem ) {return elem.disabled === false;},disabled: function( elem ) {return elem.disabled === true;}}}

Through the above code, we can see that jQuery. expr [:] is our strength. The jQuery. expr. pseudo dos code can be used as our reference.
The code for extending the jQuery selector is as follows:

$.extend($.expr[':'],{    uitype: function(elem){// blabla        return true/false;    }});  

From the input parameter elem, you can obtain the attribute through elem. attr () to determine whether the current element is returned.
It's much simpler than you think!

The selector defined in dudos is used as follows:

$(:enabled)$(#xx :enabled)$(blabla :enabled)

Then the extended selector usage should be: $ (blabla: uitype ).
Err... you also need to input parameters, such as: $ (div [: uitype = 'panel ']);
Find an example:

gt: createPositionalPseudo(function( matchIndexes, length, argument ) {var i = argument < 0 ? argument + length : argument;for ( ; ++i < length; ) {matchIndexes.push( i );}return matchIndexes;}) function createPositionalPseudo( fn ) {return markFunction(function( argument ) {argument = +argument;return markFunction(function( seed, matches ) {var j,matchIndexes = fn( [], seed.length, argument ),i = matchIndexes.length;// Match elements found at the specified indexeswhile ( i-- ) {if ( seed[ (j = matchIndexes[i]) ] ) {seed[j] = !(matches[j] = seed[j]);}}});});}

It's too complicated to look at. Try writing code segments.

2. Example 2.1 Without Parameters

Header and end <script >$. extend ($. expr [':'], {uitype: function (elem) {var t = $ (elem ). attr ('uitype'); console. log (t); return !! T ;}}); var arr =$ (: uitype); console. log (arr. length); </script> output:
Undefined
Undefined
Undefined
Undefined
Header
Footer
Undefined
2 // find two


2.2. Parameters

Headerfooter <script >$. extend ($. expr [':'], {uitype: function (elem) {// var t = $ (elem ). attr ('uitype'); console. log (arguments. callee. caller); // print the caller for (var I = 0; I output:
Function code...
Object div // footer dom, and only this one is available. Filtering in [] does not need to be obtained by writing code.
Object # document // document root object
Boolean false
The caller found the information based on the function code.

function elementMatcher( matchers ) {return matchers.length > 1 ?function( elem, context, xml ) {var i = matchers.length;while ( i-- ) {if ( !matchers[i]( elem, context, xml ) ) {return false;}}return true;} :matchers[0];}

Three parameters are passed in: element itself, context, and xml.
Still unable to obtain the parameters written in the selection expression, it must be wrong posture.

[] Has been implemented. Try parentheses:

Headerfooter <script >$. extend ($. expr [':'], {uitype: function (elem, content, xml) {for (var I = 0; iobject div // elem
Number 0 // What?
Object [uitype, uitype, xx] // get xx, which is exactly what I want
 
Infinite possibilities!

The code framework is as follows:
HeaderFooter<Script> $. extend ($. expr [':'], {uitype: function (elem, someNumber, exprParams) {console. log ($ (elem ). attr ('uitype'), exprParams [3]); return true ;}}); var arr =$ (: uitype (xx ));

Output:
Header xx
Footer xx


Only your imagination is restricted! </Script>