Java Programmer's JavaScript learning note (12--jquery-extension selector)

Plan to complete this note in the following order:
1. Philosophy.
2. Attribute copying and inheritance.
3. This/call/apply.
4. Closure/getter/setter.
5. prototype.
6. Object-oriented simulation.
7. The basic mechanism of jquery.
8. jquery Selector.
9. jquery Tool method.
Jquery-expands at the "class" level.
Jquery-is expanded at the "object" level.
jquery-extension Selector.
JQuery UI.
14. Extend the jquery UI.
This is the 12th note, this article we try to extend the jquery selector, but also this is 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 consent

0, why expand? The feature is very strong, but sometimes the code will be very verbose, and the beginner is always in good hands, affecting efficiency.
From the perspective of architecture can be simplified, can improve the readability of the program, improve efficiency.

1, how to expand? jquery provides a rich extensibility mechanism 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 point of focus.

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

Through the above code, we see jquery.expr[":" Is our point of force, JQuery.expr.pseudos 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 incoming parameter elem, you can get the property by Elem.attr (), make a judgment, and then decide whether the current element is returned.
It's a lot simpler than you think!

Ask too much Niang, psedudos the selector usage defined in the:

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

The selector usage of our extension should be: $ ("Blabla:uitype").
Err... Also need to pass in parameters, such as: $ ("div[:uitype= ' Panel ']");
Find an example:

"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, give example 2.1, without 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 parameters of

<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 parameter value Console.log (typeof arguments[i],arguments[i]);}        return true;    }}); var arr = $ (": uitype[uitype= ' footer ')"); Console.log (arr.length); Output:1

Output:
function Code ...
Object Div//footer Dom, and only this, has been filtered, [] in the filter is not necessary for me to write code to get
Object #document//Document root Object
Boolean false
About the caller, according to function code, found the

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 the XML.
Still not able to get the parameters written in the selection expression, it must be the wrong 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!

The code framework is organized as follows:

<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 only your imagination that can limit you!

Java Programmer's JavaScript learning note (12--jquery-extension selector)