DEV Community

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

Posted on

3 1

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)

nextjs tutorial video

Youtube Tutorial Series 📺

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series 👀

Watch the Youtube series

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay