5 jQuery methods I wish I knew about earlier…

jackLyons JavaScript
0
5 jQuery Methods jQuery Logo Image

Everyone is saying jQuery is dead these days. But I’m sorry, I have to disagree. While there are, of course, better, more “modern” libraries and frameworks out there, it really doesn’t mean jQuery is going to just disappear. Most people who say it is dead:

a.) probably don’t work as a web developer;

b.) are part of a trendy new startup that only uses 2017 tech or;

c.) just love to fuel the debate and ride the latest JS bandwagon!

As a relatively fresh ( around 2 years exp ) developer, I find it extremely hard to keep up with what I “should” be learning. However, what I have learned is that when a client asks to fix their code, or add something to their site, I generally can’t be picky with the tech.

9 times out 10, I simply have to write code based on what exists – there is no time or money to be spent rewriting the wheel! And what exists 9 times out of 10… is jQuery!

Based on data from W3Techs, jQuery is used by 96.2% of all the websites whose JavaScript library we know. This is 72.6% of all websites.”

So that being said, whenever someone tells you jQuery is dead — don’t listen to them. Instead, ensure that you are equipped with some knowledge of the library because it’s very likely that you will have to use it in your career. Furthermore, in many cases the company or client you work for may not even be setup for you to write modern ES6/7 code. Which is exactly why these (and other) jQuery methods are worth knowing!

In this post, I’m going to share 5 jQuery methods that I didn’t know/hadn’t used until recently. I hope you learn something new, too.

5 jQuery methods to add to your toolbelt:

1. .contents()

Description: Get the children of each element in the set of matched elements, including text and comment nodes.

This is a great method for extracting everything out of a DOM element. This method will construct a new jQuery object from the matching elements. It is generally used in conjunction with the .filter() method in order to find a specific item within that element.

How I used it: Here’s an example that retrieves all the H2 headings from a post and adds them as bullet points. This method came in handy on a recent WordPress plugin that I developed. This is just a very basic version of what I actually developed; but you get the idea 🙂

$( '.contents-btn' ).one('click', function() {
  $( ".ex1" )
    .contents()
    .filter('h2')
    .each(function(element, index) {
      $('#contents ul')
        .append( '<li>' + el.innerText + '</li>' )
    })
})

2. jQuery.grep( arr, callback, inverted [Boolean] )

Description: Finds the elements of an array which satisfy a filter function. The original array is not affected. Basically just like the ES6 .filter() method.

This method takes in 3 arguments.

  1. The first is the Array upon which the action is to be performed.
  2. Second is the callback function (ie) a function / action to perform on the particular Array.
  3. The last is a Boolean to specify the opposite result of what is expected.

How I used it: This method came in handy when I needed to search a users entered text for a specific match. It was for a collection of data whereby the user was typing and as they entered specific keywords the Array would be cross referenced accordingly. If a match was found then some additional prompts would be shown for the user.


var keywords = ['the', 'dollars', 'discount', 'price', 'markdown', 'collection', 'value', 'today', 'the', 'price', 'value', 'markdown', 'collection', 'collection'];

var matchingVariable = 'today';

var resultSet = $.grep(keywords, function (el, index) {
  return el  === matchingVariable && console.log('a match was found!');
});

console.log(resultSet)


3. jQuery.makeArray( obj )

Description: Convert an array-like object into a true JavaScript array. Works just like the ES6 Array.from() method.

How I used it: This little method has helped save me many a times when iterating over Array like objects. It’s a common Gotcha! that gets me every now and then. Basically when you lookup an element with jQuery, it is likely that you will be returned with what appears to be an array of elements matching your search. This is known as a Node List. Take the example below:


// Returns a NodeList
var elems = document.getElementById( "success" );
// Convert the NodeList to an Array
var arr = jQuery.makeArray( elems );
// Use a native Array method on list of dom elements
arr.forEach(function(item) {
  return item.innerText = 'Success!";
});

I used this method recently when fixing up some code where the ES6 Array.from() method was being used. Because a lot of ES6 syntax isn’t currently supported by IE11, there was a major problem with the resulting HTML on my clients website. Luckily the .makeArray() method did the job!


4. .wrap( element || callback function ) & .unwrap()

Description: Wrap an HTML structure around each element in the set of matched elements.

This is a handy method if you want something a little more robust than the standard .append() method. The .wrap() function can take any string or object that could be passed to the $() factory function to specify a DOM structure. You can then add some HTML that will literally wrap itself around that element.

The second version of this method allows us to instead specify a callback function. This callback function will be called once for every matched element. For more info, checkout the docs here.

How I used it: I needed to create a responsive image gallery that would change from flexy blocks to a list of gallery items with the click of a button. In order to do this, I used the .wrap() method to alter the parent HTML of each image element.


$( ".flexButton" ).on("click", function() {
  $( ".gallery" ).wrap( "<div class="flex"></div>" ); 
}); 
$( ".listButton" ).on("click", function() { 
  $( ".gallery" ).unwrap(); 
});

5. .has()

Description: Reduce the set of matched elements to those that have a descendant that matches the selector or DOM element.

This one is pretty self explanatory, but is a method that I completely overlooked for such a long time. Basically, it saved me from having to write a contrived “if this element has X, then do Y” statement. No more extra lines of code, just use the .has() method whenever you want to check if a parent element has the specified child / children.

How I used it: I used this method when doing some simple animations on a sales page. As the user scrolled and hovered over specific sale item containers (each container had multiple items) an animation would fire for those items that were classed as “must sell items”. Pretty simple stuff, here is a basic snippet of what I did:


$('.sale-items').on('mouseover', function() {
  // jQuery UI effect method in use.
  $('.sale-items').has('.must-sell-item').effect( 'shake' );
})

 


I hope these 5 little methods were of interest to you. Please do let me know if you would like me to do more posts like this 🙂 It’s always fun for me to learn something new and pass it on!

Also, if you have enjoyed reading, please subscribe to my newsletter by clicking the subscribe button below. I’ll keep you in the loop with all things Free Code Camp, JavaScript, Digital Nomadding, and more! If you have any questions, you can always contact me here.


The Web Developers Bootcamp.

A n00b friendly guide to becoming a pro!

If you’re feeling a bit overwhelmed and a little lost with all these crazy hard Free Code Camp exercises then this course is for you!

While I am oh so grateful for the opportunity to learn through Free Code Camp, I still find that learning to code alone and without proper guidance extremely exhausting. Which is why I’ve started to substitute my education with an incredible online resource called the Web Developers Bootcamp courtesy of Udemy.

This course has helped me brush off the cobwebs, unlearn my self-taught bad habits and gain a solid understanding of the true fundamentals of web development. It has helped me see why it is important to understand these JavaScript problems and how they apply to the real world.

This bootcamp will teach you how built beautiful sites with Bootstrap, add in functionality with JavaScript and write back end code with Node.js all in a series of short, sharp, no BS video modules. I seriously could not recommend it any higher. Check it out and let me know what you think 🙂

The Web Developers Bootcamp
The Web Developer Bootcamp.
The only course you need to learn web development – HTML, CSS, JS, Node, and More!

Sign up to receive up-to-date web tips, tricks and code hacks!