7

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

 4 years ago
source link: https://dev.to/nima_owji/how-to-use-jquery-what-is-it-written-by-nima-owji-3ah6
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

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 modeExit 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 modeExit 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 modeExit 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 modeExit fullscreen mode

JQuery Codes

jquery codes are like this:

$(css_selector).[jquery_method];
Enter fullscreen modeExit 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!


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK