ProGrammer avatar

Learning JQuery-- Understanding the basics

pakgamer

Published: 30 May 2020 › Updated: 30 May 2020Learning JQuery-- Understanding the basics

Learning JQuery-- Understanding the basics

Hello Everyone!

In this post we are going through the basics of JQuery, how to use jQuary and what is jQuary. So jQuary is a JavaScript library that simplifies HTML document traversing , event handling, animating, and Ajaz interactions for rapid web development. jQuary save our time and reduce the line of code which help us and other to understand the code.

wss.png

To use JQuary we can either download the files and save it in our system. To download the JQuary visit this link.

image.png

Or we can use the cdn link just like the Hive cdn( we used hivejs cdn in our previous posts). The following is the cdn of jquery.
https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js

Let's start using the cdn link and try this on a HTML site but before starting we should take a look on the syntax of jquery
. Basic syntax is: $(selector).action()

  • $ sign to define/access jQuery
  • (selector) to "query (or find)" HTML elements
  • jQuery action() to be performed on the element(s)

Open the VS code and create a HTML file.

image.png

Now let's write a code that will take some text and then display it using the alert method.


    <head>
        
        <title>Jquery tutorial by pakgamer </title>
       
     
    </head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <body>
       
        <input id="text1" type="text"   placeholder="Write something here.." ><br>
        <input type="button" value="click to display " id="btn1" >
        
    </body>
  <script>
      $(document).ready(function(){
          $('#btn1').click(function(){
            let text = $('#text1').val();
            alert(text)
          })
        

      })
  </script>
</html>

image.png

Ok! Now let's write something to check it.

image.png

Now let's use the hide method.

image.png

What this piece of code will do is whenever someone clicks the button the text box should disappear. if we use JavaScript for this kind of task it will take more time and also increase the line of code which is not a thing.

image.png

This is just a very basic introduction to help you understand what jQuery is and how it works in this next post we will understand stuff like selectors. Now if you like the post please upvote and comment if you want to give me some advise
ntitled-1.png

Leave Learning JQuery-- Understanding the basics to:

Written by

Loves Coding, Gaming, Photography and LIFE

Read more #hive-148441 posts

Best Posts From ProGrammer

We have not curated any of pakgamer's posts yet. But you can encourage our curation team to review posts by visiting them regularly and by referring other readers. Because we give priority to frequently read content.

More Posts From ProGrammer