JQuery Custom Selector

Strictly speaking, custom pseudo-class selectors, but it's also quite interesting.
Yesterday when I learned one of the jquery lazy load source, I saw the end of the writing.

/* Custom selectors for your convenience. Provide a custom selection for your convenience. *//* use as $ ("Img:below-the-fold"). something () or translate: You can do this by using $ ("Img:below-the-fold"). something () or *//* $ ("img"). Filter (": Below-the-fold"). something () which is faster translated: $ ("img"). Filter (": Below-the-fold"). something () so faster */// The simple translation of the next do not know the accurate. $.extend ($.expr[":"], {"Below-the-fold": function (a) {return $.belowthefold (A, {threshold:0});}, "Above-the-to P ": function (a) {return!$.belowthefold (A, {threshold:0})," Right-of-screen ": function (a) {return $.rightoffol D (A, {threshold:0}); }, "Left-of-screen": function (a) {return!$.rightoffold (A, {threshold:0}), "In-viewport": function (a) {R Eturn $.inviewport (A, {threshold:0}); },/* Maintain BC for couple of versions. */"Above-the-fold": function (a) {return!$.belowthefold (A, {threshold:0}), "Right-of-fold": function (a) { Return $.rightoffold (A, {threshold:0}); }, "Left-of-fold": function (a) {return!$.rightoffolD (A, {threshold:0}); }});

It's amazing to say that there are wood.
Although there have been simple to see the jQuery source code, but the Sizzle selector engine Part I skipped directly, so completely did not notice this feature.
Out of curiosity, of course to learn how to customize the selector.

Turned Baidu Google, only to find a reliable Chinese blog. It seems that this thing is really unpopular ah. It's really not much of a need to customize.
But it's always good to learn more.
You can go and see this article, "jquery custom Selector jquery customization Selector"

Basic format:

$.expr[': '].test = function (obj, index, meta, stack) {/    * obj   -is a current DOM element       index-the C Urrent loop index in stack the current element is indexed in the stack,       meta  -meta data about your selector!!! Used to store parameter values, see Custom selectors with parameters.       Stack-stack The set of elements selected by the all elements to loop selector. Return          True to include the current element       returns True if the return False to Explude the current element returns false to discard the currently elements    */};

Call Method:

$ ('. Someclasses:test '). dosomething ();

With parameter invocation:

$ ('. Someclasses:test (argument) '). DoSomething (); $ ('. Someclasses:test ("arg1, arg2") '). DoSomething (); $ (". Someclasses:test (' arg1, arg2 ') "). DoSomething ();

Do you remember the meta parameter just now?
For example, call this:

$ ('. Someclasses:test (argument) '). DoSomething ();

Meta will get an array of the following formats:

[    ': Test (argument) ',//full selector entire custom selector    ' test ',            //Only selector custom selector name    ',                //Quotes used   What quotes are used (obviously not here)    ' argument '         //Parameters    parameters]

For example, call:

$ ('. Someclasses:test ("arg1, arg2") '). DoSomething ();

Meta will get an array of the following formats:

[    ': Test ("arg1, arg2") ',//full selector entire custom selector    ' test ',                //Only selector custom selector name    ' "',                   //Quotes   What quotation marks are used by used (double quotes are used here)    ' arg1, arg2 '           //Parameters    parameters]

So let's write a simple selector as an exercise.
Just write a selector and take the parameters.

$ ("a:test (haha)");

The custom selector code is:

$.expr[': '].test = function (obj, index, meta, stack) {    var txt = obj.innerhtml,        key = meta[3];    return Txt.indexof (key) > -1;};/ /test $ (' #navList a:test (JavaScript) '). each (function () {    console.log (this.innerhtml);});

Click on the right to run to see.

There's no technical content, but it's really an interesting technique.

Other references:

Http://www.cnblogs.com/webfpc/archive/2009/11/22/1605302.html
Http://jquery-howto.blogspot.com/2009/06/custom-jquery-selectors.html
Http://jquery-howto.blogspot.com/2009/06/jquery-custom-selectors-with-parameters.html