paint-brush
How to Use jQuery: An Introduction to the JavaScript Libraryby@nimaowji
444 reads
444 reads

How to Use jQuery: An Introduction to the JavaScript Library

by Nima OwjiDecember 27th, 2020
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

jQuery is a JavaScript library that is used on your websites. jQuery is open source material that is used to make Javascript programming easier.

People Mentioned

Mention Thumbnail

Company Mentioned

Mention Thumbnail
featured image - How to Use jQuery: An Introduction to the JavaScript Library
Nima Owji HackerNoon profile picture

jQuery is a JavaScript library that is used on your websites. jQuery is open source material that is used to make Javascript programming easier and more efficient.

How to Add jQuery to Your Project

You can download jQuery from https://jquery.com/download/ or you can use a CDN (Content Delivery Network). There are many CDNs for jQuery.

After that, you should reference it to your HTML page (Like CSS but a bit different).

As you know you can write your codes in "script" tags. You can also use the src attribute of script tags for referencing a js file.

Here is an example:

<script src="jquery-3.5.1.min.js"></script>

You should assign your jQuery path to the src attribute. For example, my jQuery is in root and I can simply write the name of the file.

How to Use jQuery

You should write your scripts after referencing jQuery because if you write your codes before it, they won't work.

You can simply write your codes in another .js file or in script tags.

It would look like this:

<script src="jquery-3.5.1.min.js"></script>
...
<script>
   //Your JQuery Codes
</script>

How to Write jQuery Codes

jQuery codes are easy to write. The first step is to call jQuery. For this, you should use a "$" at the beginning of your codes.

After "$", you should select one or many elements. For this, you can use CSS query selectors.

It may look something like this:

<script>
   $("#MyElementID")...
   $(".MyClass")...
   $("MyElementTagName")...
</script>

After that, you can modify your elements with jQuery methods. They are many elements available that you can search for in other documentations.

For example, this code will hide an element with "el1" id!

<script>
   $("#el1").hide();
</script>

jQuery Codes

jQuery codes look like this:

$(css_selector).[jquery_method];

Thanks for reading

Thanks for reading. My name is Nima Owji. I am a 14 years old programmer. If you had any questions, you can ask me on Twitter! Thank you, have a nice time!

Also published at https://dev.to/nima_owji/how-to-use-jquery-what-is-it-written-by-nima-owji-3ah6