jQuery makes it easy to select elements you need using CSS selectors. It is undoubtedly one of the jQuery features that makes it a great javascript library. On top of standard CSS selectors jQuery introduces some custom selectors that makes your code even more simpler and easier to read.
Examples of custom jQuery selectors are: :header
, :even
, :odd
, :animated
, :contains(text)
, etc.
And the best part is that jQuery lets you create and define your own custom selectors using custom selector creation template below.
jQuery Custom Selector Creation Template:
$.expr[':'].test = function(obj, index, meta, stack){ // obj - is a current DOM element // index - the current loop index in stack // meta - meta data about your selector // stack - stack of all elements to loop // Return true to include current element // Return false to explude current element }; // Usage: $('.someClasses:test').doSomething();
Let’s now create a very simple custom selector using the template above. Let’s say we want a custom jQuery selector that will return elements with nonempty rel
attribute.
$.expr[':'].withRel = function(obj){ var $this = $(obj); return ($this.attr('rel') != ''); }; // Usage: $('a:withRel').css('background-color', 'yellow');
The code above creates a custom selector that will select only elements with not empty rel
attributes. Here is the above code’s demo page.
You might also be interested in reading about jQuery custom functions.
UPDATE: Read about creating custom jQuery selectors with parameters.
That's why I love jquery.
ReplyDeleteMuito bom!
ReplyDeleteuseful,thx!
ReplyDeleteIt will be great if you provide examples, or more detailed explanations for the index, meta and stack parameters.
ReplyDelete@Maujor, I will post a new, more detailed and a little advanced custom selectors that take arguments (similar to :eq(3)) article this coming days.
ReplyDeleteStay tuned and thanks for comments ...
Brilliant stuff!
ReplyDeletejQuery is greater than we can imagine...
ReplyDeleteJquery is definitely cool, but it's hard to use with dynamic pages generated with templates like mason or TT.
ReplyDeleteExample: You have a list of elements pulled from a database. You want to display each in a div and give that div special behavior. You give each div a unique id based on data from the database. Now, you have cycle though those elements twice. Once to install the behavior in the $(document).ready() function and again to display the divs.. an N function has become 2N doubling the time to display the page. So how does one get around this? Can we display the div and install the jquery behavior in one pass?
@Anonymous, I don't think it is a jQuery specific problem.
ReplyDeleteYou could use some convention. For example give iterative ID's to your divs (myDiv1, myDiv2, etc.) and iterate through them using native JavaScript "for" loop, binding the behavior along the way.
thank you! it was very useful!
ReplyDelete--
http://www.koolzers.net
You explained that beautifully... Other people should take a leap out of you book/blog
ReplyDeleteThanks for some important tips.I am very interested to learn jQuery. Can anyone tell me which ebook is best for jQuery.
ReplyDeleteGood intro, thanks!
ReplyDeletereturn false to __explude__ current element.
ReplyDeleteI don't know how to explude elements :-p