Plan to complete this note in the following order, for example:
- Java Program Ape's JavaScript Learning notes (concept)
- Java Program Ape's JavaScript Learning notes (2--property copy and inheritance)
- Java Program Ape's JavaScript Learning Note (3--this/call/apply)
- Java Program Ape's JavaScript Learning Note (4--this/closure/getter/setter)
- Java Program Ape's JavaScript Learning Note (5--prototype)
- Java Program Ape's JavaScript Learning Note (6--Object-oriented simulation)
- Java Program Ape's JavaScript Learning notes (7--jquery basic mechanism)
- Java Program Ape's JavaScript learning Note (8--jquery selector)
- Java Program Ape's JavaScript Learning Note (9--jquery tool method)
- Java Program Ape's JavaScript Learning notes (10--jquery-at "class" level)
- Java Program Ape's JavaScript Learning notes (11--jquery-at "object" level)
- Java Program Ape's JavaScript Learning note (12--jquery-extension selector)
- Java Program Ape's JavaScript Learning Note (13--jquery UI)
- 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)