DEV Community 👩‍💻👨‍💻

Cover image for jQuery and You: Learning the Basics
rileydaviskatz
rileydaviskatz

Posted on

jQuery and You: Learning the Basics

jQuery is a powerful tool that lets you add functionality to what would otherwise be hard-coded HTML scripts by injecting javascript into it.

This works by "wrapping" HTML code in dynamic Javascript that can be manipulated.

The power of $:

  1. I hope you appreciate the pun I just made.
  2. The hidden abilities of jQuery are unlocked with the $ and paired with (). Once you create the $('') you can start to inject the HTML code within it. For instance: $('< h1>Hello World!') {< space added before h1 so format would display correctly when live}will create a header in the HTML document that says "Hello World!"

Adding content to tags with jQuery:

  1. While we can declare tags easily with jQuery, there are steps we can use to add content to tags later on. Example:

//declare an empty set of tags
let $empty = $('

');
//add content
$empty.text('This headline is no longer empty!');
  1. We can also manipulate and add content to entire types of HTML code by using .html(). This method tells the interpreter to apply changes to all tags of the same type

$('ul').html('Placeholder Text');

This example takes all instances of unordered lists and applies the "Placeholder Text" content to all instances instead of just one.

Methods for combining tags:

  1. Since jQuery is similar to Javascript, it comes with methods we can use to manipulate the code we are writing. For instance, we can create a body tag, and then later on, add code to the body by using appendTo or prepend. Example:

let $body = $('

');

let $paragraph = $('

This is an example of how we can write a line of jQuery code and add it to another tag

')

$paragraph.appendTo($body);
This makes the browser interpret the HTML as

This is an example of how we can write a line of jQuery code and add it to another tag

  1. Also like Javascript, we can chain together different methods. So if we wanted to add a class to the paragraph while we appended it to the body, we could do this: $paragraph.appendTo($body).addClass('examples');

Conclusion:

jQuery is a powerful tool that takes HTML up a notch and makes, what would normally be hardcoded, dynamic and adjustable and lively. It's worth learning to make your websites less static.

Top comments (0)

Classic DEV Post from 2020:

js visualized

🚀⚙️ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳

Happy coding!