When jQuery first came out, it made a bunch of things a lot easier than just using normal Javascript.
However vanilla Javascript has caught up a little bit with jQuery and a lot of things that jQuery made a lot easier,
vanilla Javascript can do it just as easily.
Let's go through some of the new vanilla Javascript alternatives to jQuery methods.
Well here's how you select an element.
So here's a jQuery way of selecting an element, and then here's the vanilla Javascript way of selecting an element.
It's only a few more characters to do the Javascript way.
Now let's see how to remove an element.
So that's how you would remove an element in jQuery.
And then let's see how you would remove an element in Javascript. As you can see it's exactly the same.
Now let's see how to prepend an element.
Let's change this to prepend.
Now in the parentheses, we have to put what other element we're going to prepend.
And then the vanilla Javascript way.
And again it's exactly the same. If you want an insert an element before another element, you can use before().
And this time, I'm just gonna copy and paste
because it's exactly the same. If you want to replace an element with another element, replaceWith().
And again, it's exactly the same with vanilla Javascript.
If you want to find the closest ancestor that matches a given selector,
you just use closest() and then you pass in the selector div.
And again we're just gonna copy and paste because this is another thing that's been implemented in normal Javascript.
Now we're gonna go over a few things that are a little longer in vanilla Javascript so jQuery does make them easier,
but they're still pretty easy in Javascript. The first one is fadeIn().
So here's how you're gonna fade in an element in jQuery.
In vanilla Javascript first you're going to have to use some CSS. So you're gonna have to put in the initial CSS here.
You're gonna put display: none, opacity: zero, transition: 0.8 seconds
So it's not going to be display at the beginning and now you're just going to put in this other code:
Elem dot style dot display equals block, so you're going to set the display to block, and then you're just gonna do requestAnimationFrame()
and you're gonna set the opacity to 1.
So it's gonna start at 0 and go up to 1 in 0.8 seconds. And yet for the fadeIn you still
have to select the item. I didn't mean to delete that. Another thing that jQuery has is .animate().
So the .animate method would look like this to animate an object:
So you're just gonna pass in all the CSS properties you want to animate and the time 1500 milliseconds.
Now Javascript now has the web animations API.
That makes animation pretty easy, and it gives you a lot more power than the .animate method from jQuery.
So here's how you're gonna animate in vanilla Javascript.
Again it's dot animate
and you just pass in the initial state of the element, the CSS, and
then the state of the CSS after it's been animated and then the length of the animation
1000 milliseconds.
So another key selling point of jQuery in the past has been AJAX.
jQuery made it a lot easier to do AJAX instead of using the XML
HTTP request. So here's one of the ways to do AJAX in jQuery.
So you're gonna pass in the URL, and then if it's success you're gonna do something with this data.
Javascript now has the Fetch API.
With the Fetch API, it's almost as simple.
See? You're gonna pass in the URL, and then you're gonna put what's going to happen with the data.
Now here's the almost catch to doing things with vanilla Javascript:
Some of these things are still not supported by Internet Explorer and Edge.
However, I say almost catch because pretty much everything can be polyfilled and
polyfilling may be easier than you think. There's a website called polyfill.io.
If you just put in this one line of code at the top of your website,
everything will be polyfilled. It will automatically check which browser the the user of the website has and
only bring in the code that's needed for that specific browser.
So only brings in the polyfill code that's absolutely necessary to bring that browser up to date.
So you may be thinking, "If Javascript has all these things, do I still need to learn jQuery?"
Well, it's still good to become familiar with it because jQuery is still used in a lot of websites.
So you're probably gonna come in contact with it eventually.
You should just know that for a lot of things, you don't even really need jQuery for.
This whole video was based on an article by Ollie Williams
called "(Now More Than Ever) You Might Not Need jQuery" on css-tricks.com.
I highly recommend checking out the original article. I have the link in the description.
Well, thanks for watching my name is Beau Carnes. Don't forget to subscribe and remember use your code for good.