Made withjQueryClip

jQuery Tutorial #1 - jQuery Tutorial for Beginners

L

LearnCode.academy

Creator on the jQuery channel

Watch on YouTube ↗

1.4M viewsMar 22, 20148:01 runtime

Get started with jQuery, the incredibly popular and easy-to-learn JavaScript library essential for modern web development. This beginner tutorial walks you through the first steps, from adding the jQuery script to your project to writing your first commands. Learn the core…

Chapters

#jquery#clip#frontend

Getting Started with jQuery

jQuery is the most popular JavaScript library, making it easier to add dynamic functionality to websites.
It's a common requirement for web development jobs and a great next step after learning HTML and CSS.
To use it, download the jquery.js file from jquery.com and include it in your HTML file with a <script> tag before your own custom script.
```
<script src="path/to/jquery.js"></script>
<script src="my-script.js"></script>
```

The `document.ready()` Function

The $ character is an alias for the jQuery object. All your jQuery code should be placed inside a document.ready() function to ensure it only runs after the entire HTML document has loaded.

Important
Without document.ready(), your script might try to manipulate an element that hasn't been rendered by the browser yet, causing your code to fail silently.

Standard Syntax: $(document).ready(function() { ... });
Shorthand Syntax: $(function() { ... });

Core jQuery Syntax: Selectors and Methods

jQuery actions follow a simple pattern: select an element, then do something with it.

$(selector).method();

Selectors: Use strings that work just like CSS selectors to target elements. For example, $('#panel_one') selects the element with id="panel_one".
Methods: These are the actions you perform on the selected element(s).

Animation Methods

jQuery excels at creating simple animations with a single line of code. Methods are chainable, allowing you to sequence multiple actions on the same element.

Basic Visibility: .hide() and .show()
Animated Visibility: You can pass a duration in milliseconds to animate the action (e.g., .hide(300)).
Sliding: .slideUp() and .slideDown()
Fading: .fadeIn() and .fadeOut()
Toggling: .toggle(), .slideToggle(), and .fadeToggle() will automatically reverse the element's current state (e.g., if it's visible, it will hide).
Pausing: The .delay() method can be chained to pause between animations (e.g., .delay(1000) waits for 1 second).

Example of chaining: $('#panel_one').slideUp(500).delay(1000).slideDown(500);

Manipulating CSS

You can dynamically change CSS properties using the .css() method. To set multiple properties at once, pass a JavaScript object.

$('#panel_one').css({
  color: 'red',
  fontWeight: 'bold',
  opacity: 0.5
});

Note
CSS properties with a hyphen (like font-weight) must be written in camelCase (fontWeight) or enclosed in quotes ('font-weight') when used in JavaScript.

Next Steps

The real power of jQuery is revealed when you start responding to user actions. The next step is to learn about JavaScript events, such as .click(), .hover(), and .mouseenter().

Getting Started with jQuery

Alright, so if you're learning web development, if you know HTML, CSS, or you're learning those, the next step for you is going to be to learn jQuery. jQuery is the easiest and most popular JavaScript library. So if you want to start learning JavaScript, learn jQuery. Every employer I've ever worked for uses jQuery, no matter how big or how small they were. So it's very popular. There are companies that don't use it, but most of them do.

So here's how you add jQuery on your page. You download it from jquery.com, put it in your project folder, and then what you're going to do is you're going to just add a script tag and you'll add the source to it. So in this case, it's in a bower components folder, jQuery folder inside of there, and then there's my file, jquery.js. So when I put that on my page, nothing changes because jQuery doesn't actually do anything. It gives you a library of commands that you can use to do things. So it's on the page now and I'm going to go add my own script tag and inside of it, I'm going to write my own JavaScript.

The `document.ready()` Function

Uh, so what you're going to have to remember to start jQuery is one thing, and this is the memorization part for you. Once you get through this, you get to actually have tons of fun with jQuery. So here we go.

It's document. Before I mention that, this dollar sign is the value that's given to the jQuery library when it loads up. So anytime you want to reference jQuery, you hit dollar. So we go document, and then we go ready, and you just got to memorize this. You'll later on understand what it's about. And then you do this function thing: function() open and close parentheses, open and close curly braces, and then close your first parentheses. Honestly, what I did when I started off is I copied and pasted this and saved it somewhere because it just didn't make sense to me. And you don't want to have to think about it. Just paste this in. Your jQuery code always goes inside of a document.ready function. You can have multiple document ready functions. There's really no need to if you just have a few lines of code, but they're not going to conflict.

What this does is this says, 'Hey, wait for my whole document to load up before I try running any JavaScript.' Otherwise, you're going to try to talk to panel one with JavaScript and panel one hasn't loaded yet. So the JavaScript's going to run, it's not going to find panel one, it won't do anything, and then panel one will load and it's not going to do what you're expecting it to do. And you probably won't even get any errors about it. It just says nothing happens. So the document.ready function says, 'Hey, wait for my document to fully load, then let's start running stuff.'

So your jQuery goes in here. There's also a short way of doing it, and that's just $(function() { ... }). So that's what I use, that's what most people use, but you can do document.ready(function(){...}). They're the same thing.

Selectors and Basic Methods

So now that we've done that, and now that I've probably confused you from the start, that's the only complicated part. The rest of it, let's just have fun. You're going to go dollar command and open your parenthesis. And then you have two parts to each jQuery action. You have the selector, which works just like CSS. You see over here, I showed you what they are. So there's panel one and that's because it's id1, exactly as if you were doing id='panel1', just like if you were doing CSS.

So I've selected it. You can use single quotes or you can use double quotes. Either one works. And then you give it dot and give it your method. So in this case, I'm going to go hide and I'm going to hit save. It's going to reload for me. So there you go, it loads up the page and then it hides panel one. I can tell it to hide 300, which will hide over the course of 300 milliseconds. You'll see it kind of does a little animation there for me.

And then it's chainable. jQuery is awesome in that you can keep chaining it as long as it's not the semicolon yet. So I can hide it and then I can show it over the course of one second. So it hides fast and then it shows slowly. And you can just keep going. You can do hide, show, hide, show. There you go, hide-show, hide-show. It's fun. jQuery is tons of fun.

Animation Effects and Toggles

Another thing you can do is slideUp, and just as you'd expect, it slides up and then it hides. And then you can have it slideDown: up and then back down. You can also add a delay in there. Delay. So we're going to delay for 1 second, which is 1,000 milliseconds. Wait a little bit and then we'll do it again. jQuery, it's fun. This is super awesome. So I can have it slide up, delay, you can do fadeIn, fadeOut, there it goes and gone. And then it's going to slide down.

Another thing you can do is you can do fadeToggle. You can do toggle for pretty much anything. So if I do fadeToggle twice, then it'll fade out since it's currently in, and then it'll fade in because it's currently out. Toggle will, well it'll toggle. You can slideToggle. It's going to slide up and it's going to slide back down. And then you can just do toggle if you just want it to do a hide and show.

So that's kind of the showing and hiding parts of jQuery. Super, super fun. You can go...

Manipulating CSS with jQuery

.css. This is where it gets a little bit more tricky. And then you give it a pair of curly braces, which are options. And I'm actually... you can go color red, and then, oh, 'red is not defined'. You have to do it in quotes, sorry about that. There you go. And now my color became red. This one has something else overwriting it, but there you go, the panel one gets a color of red. And then I can do a comma here and I can go fontWeight. The one thing you can't do, I'll show you in a second, fontWeight: 'bold'. There we go, font weight bold.

The one thing you can't do is you can't do font-weight, because in JavaScript, this means font minus weight, which it looks for math and doesn't make sense and will throw an error. 'Ah, that doesn't make sense.' What you can do is you can wrap that in quotes if you want to do it that way, single or double quotes, and that works. Or jQuery is smart enough to where you can go fontWeight.

So there you go, I can change the CSS. It's a little confusing. This is kind of a cleaner way of doing it. We're making what's called a JavaScript object, if you want to Google that. So anytime you do curly braces in JavaScript, it's making an object, unless you have function before it, which is really... that's for a JavaScript lesson. So now I can go color: 'red', and add a comma, fontWeight: 'bold'. Now it's starting to feel a little bit more like CSS. And I can go display: 'none' and just in case I didn't want to see it anymore, which is basically what a jQuery show/hide does.

So there we go. Panel one, so let's make panel one hide, and then let's make panel two .css({ opacity: 0.5 }). So now when I boot up, that's gone and that's halfway hidden. And at from this point, we'll call this a lesson. And what the next step will be in the next lesson is to listen to events.

Conclusion and Next Steps

The real fun of JavaScript happens when you start interacting with what the user does. Those are called JavaScript events. When they click, do this. When they hover, do this. And when they mouse up, do that. So that's really where jQuery gets even more fun.

We'll stop right here so you can watch it over if I've done too much too fast. If you've kept up with a pretty fast pace here, let's go on to lesson number two.