Java Program Ape's JavaScript Learning note (12--jquery-extension selector)

Plan to complete this note in the following order, for example:

2. Java Program Ape's JavaScript Learning notes (concept)
4. Java Program Ape's JavaScript Learning notes (2--property copy and inheritance)
6. Java Program Ape's JavaScript Learning Note (3--this/call/apply)
8. Java Program Ape's JavaScript Learning Note (4--this/closure/getter/setter)
10. Java Program Ape's JavaScript Learning Note (5--prototype)
12. Java Program Ape's JavaScript Learning Note (6--Object-oriented simulation)
14. Java Program Ape's JavaScript Learning notes (7--jquery basic mechanism)
16. Java Program Ape's JavaScript learning Note (8--jquery selector)
18. Java Program Ape's JavaScript Learning Note (9--jquery tool method)
20. Java Program Ape's JavaScript Learning notes (10--jquery-at "class" level)
22. Java Program Ape's JavaScript Learning notes (11--jquery-at "object" level)
24. Java Program Ape's JavaScript Learning note (12--jquery-extension selector)
26. Java Program Ape's JavaScript Learning Note (13--jquery UI)
28. Java Program Ape's JavaScript Learning notes (14--extended jquery UI)

This is the 12th note in this article, and we're trying to extend the jquery selector. At the same time this is also a jquery source code interpretation process.

Author Blog: http://blog.csdn.net/stationxp author Weibo: http://weibo.com/liuhailong2008 reprint please obtain the author's permission

0, why expand? Comes with a very strong feature. But sometimes the code is very verbose, and 0 of the basic people are always bad, affecting efficiency.
The simplification of the architecture can improve the readability of the program and improve the efficiency.

1, how to expand? jquery provides a rich extensibility mechanism for selectors. For example, the following:

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 point of focus.

Expr = Sizzle.selectors = {pseudos: {"Enabled": function (elem) {return elem.disabled = = = false;}, "Disabled": function (E Lem) {return elem.disabled = = = True;}}}

Pass the above code. We see jquery.expr[":" Is our point of exerting force. JQuery.expr.pseudos's code can serve as our reference.

The code for extending the jquery selector is as follows:

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

From the passed-in parameter Elem, the property can be obtained through elem.attr (). Make inferences and then decide whether the current element returns.
It's a lot simpler than you think!

Ask over Niang, psedudos the selector used in the definition is:

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

The selector used for our extension should be: $ ("Blabla:uitype").

Err... Also need to pass in the number of parameters, such as: $ ("div[:uitype= ' Panel ']");
Find a sample:

"GT": Createpositionalpseudo (function (matchindexes, length, argument) {var i = argument < 0? argument + length:arg Ument;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]);}});});

Too complicated, too lazy to read, write a piece of code to try

2, example 2.1, without the number of parameters

<div uitype= ' header ' > head </div><div uitype= ' footer ' > Tail </div><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//Two found


2.2, with the number of references

<div uitype= ' header ' >header</div><div uitype= ' footer ' >footer</div><script>$.extend ($.expr[': '],{    "Uitype": function (elem) {//var t = $ (elem). attr (' Uitype '); Console.log (Arguments.callee.caller) ;//print caller for (var i = 0;i<arguments.length;++i) {//print the value of the parameter Console.log (typeof arguments[i],arguments[i]);}        return true;    }}); var arr = $ (": uitype[uitype= ' footer ')"); Console.log (arr.length); Output:1

Output:
function Code ...
The DOM of the object Div//footer. And just have this, have done the screening, [] in the filter is not necessary for me to write code to get
Object #document//Document root Object
Boolean false
The caller, based on function code, found

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

3 parameters were passed in: the element itself, the context, and whether XML.
There is still no way to get the number of references written in the selection expression. It must be an incorrect posture.

[] has been implemented, try the parentheses:

<div uitype= ' header ' >header</div><div uitype= ' footer ' >footer</div><script>$.extend ($.expr[': '],{    "Uitype": function (Elem,content,xml) {for (var i = 0;i<arguments.length;++i) {console.log (i); Console.log (typeof arguments[i],arguments[i]);}        return true;    }}); var arr = $ (": Uitype (XX)"); Console.log (arr.length);</script>

Output:
Object DIV//Elem
Number 0 //What?
Object ["Uitype", "Uitype", "" "," XX "]//Got XX. This is exactly what I want.

Full of possibilities!

Organize the code framework such as the following:

<strong><div uitype= ' header ' >header</div><div uitype= ' footer ' >footer</div>< Script>$.extend ($.expr[': '],{'    uitype ': function (elem,somenumber,exprparams) {Console.log ($ (elem). attr (' Uitype '), exprparams[3]);        return true;    }}); var arr = $ (": Uitype (XX)");</strong>

Output:
header XX
Footer XX


It's just your imagination that can limit you!

Java Program Ape's JavaScript Learning note (12--jquery-extension selector)