Some jQuery methods you didn’t know exists

jQuery is a JavaScript library that helps write JavaScript code on your website. That helps in accomplishing many lines of code into a single line code. You don’t have to worry about browser support, just use jQuery methods and they will work everywhere. 

jQuery is most popular and extendable library that contains following features:

  • HTML/DOM manipulation
  • HTML event methods
  • CSS manipulation
  • Effects and animations
  • AJAX
  • Utilities

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.

$('inner_element', 'outer_element')
$('inner_element', $('outer_element'))

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()
Items in the array returned by nextAll/prevAll are not jQuery objects, if you want jQuery object from the array you can use .eq(<index>) method.

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.

There is a lot to explore with jQuery, given that it has plugins for almost any task out there. You can always find a plugin to implement an single line code, if not JavaScript has its back.

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.

We will be happy to hear your thoughts

      Leave a reply

      Techs Tricks
      Logo
      Reset Password