jQuery is most popular and extendable library that contains following features:
- HTML/DOM manipulation
- HTML event methods
- CSS manipulation
- Effects and animations
Here are some of the jQuery methods you didn’t know exists.
Context based selectors
Choice of HTML labels is exceptionally simple in jQuery, it basically follows CSS style selection. We can access the setting of an HTML component to discover a component inside it.
This will look for ‘inner_element’ only inside ‘outer_element’. you can also pass the jQuery object of the element instead of a string selector.
jQuery nextAll() and prevAll()
nextAll and prevAll returns an array of all matched next/previous classes of current element.
$('.some_class').nextAll() // select all elements next to '.some_class' $('.some_class').prevAll() // select all elements prev to '.some_class' $('.some_class').nextAll('a') // select all `a` elements next to '.some_class' $('.some_class').prevAll().eq(1) // get the item at index 1 selected by $('.some_class').prevAll()
jQuery nextUntil() and prevUntil()
To select all the next/previous classes of each element up to but not including the element matched by the selector, DOM node, or jQuery object passed.
$('.some_class').nextUntil('a') // keeps selecting next elements until `a` tag is found $('.some_class').prevUntil('.class_a', 'a') // keep selecting previous elements having class '.class_a' until `a` tag is found
Delay jQuery method
If your program has a lot of animations queued up, you can use delay() method to delay/ pause the animation for a certain length of time. The parameter this jQuery method takes it milliseconds
$('div').hide().delay(3000).show(); // div will stay hidden for 3 seconds before showing.
If you have any other methods that you want to share with others that they may have not used, write them down in the comments.