DEV Community

Cover image for How to use JQuery? What is it? Written By Nima Owji
Nima Owji
Nima Owji

Posted on

How to use JQuery? What is it? Written By Nima Owji

Intro

Hello, My name is Nima Owji. I am a 14 years old programmer. Today, I want to talk about JQuery! What is JQury? jQuery is a JavaScript library. You can use it on your websites.

How to add JQuery to our 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!

See this example:

<script src="jquery-3.5.1.min.js"></script>
Enter fullscreen mode Exit fullscreen mode

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.

Like this:

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

How to write JQuery codes?

JQuery codes are too easy, first of all, you should 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.

Like this

<script>
   $("#MyElementID")...
   $(".MyClass")...
   $("MyElementTagName")...
</script>
Enter fullscreen mode Exit fullscreen mode

after that, you can modify your elements with JQuery methods, They are so many and I can't tell you all of them but you can search for them in documentations.

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

<script>
   $("#el1").hide();
</script>
Enter fullscreen mode Exit fullscreen mode

JQuery Codes

jquery codes are like this:

$(css_selector).[jquery_method];
Enter fullscreen mode Exit fullscreen mode

Follow me on Twitter and don't forget to like it!

I hope you liked this article. If you liked this, Please follow me on Twitter https://twitter.com/nima_owji. And like this article. Thanks a looooooooooooot. Have a nice time!

Discussion (0)