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.
To use JQuary we can either download the files and save it in our system. To download the JQuary visit this link.
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.
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>
Ok! Now let's write something to check it.
Now let's use the hide method.
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.
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
Congratulations @pakgamer! You have completed the following achievement on the Hive blockchain and have been rewarded with new badge(s) :
You can view your badges on your board And compare to others on the Ranking
If you no longer want to receive notifications, reply to this comment with the word
STOPTo support your work, I also upvoted your post!
Do not miss the last post from @hivebuzz:
Support the HiveBuzz project. Vote for our proposal!