Hello Everyone
<p dir="auto">In the last post, we have started the jQuery tutorials. In the previous post we have discussed the basics of jQuery. We learned what jQuery is and where can we use it. We discussed the installation process and tried to perform a task through jQuery. Now in this post, we are going to understand the selectors in jQuery. jQuery selectors are one of the most important parts of the jQuery library. jQuery selectors allow you to select and manipulate HTML elements. In standard JavaScript, we have to write a whole thing to select an element but in jQuery, we can do it with a line of code(much easier than JS).
<p dir="auto"><img src="https://images.hive.blog/DQmYBizRpqTZmiphEZLWNuYXAbanbeVcUNuZ168U6qLvxu6/22.png" alt="22.png" />
<p dir="auto">First of all let me give you the list of selectors then I will use and explain them in a simple code.
<ul>
<li><p dir="auto"><code>#id Selector :<br />
Use to select the id e.g <code>$("#idName#)
<li><p dir="auto">.class Selector :<br />
Use to select element by class name
<li><p dir="auto"><code>* :<br />
Selects all elements e.g $("*")
<li><p dir="auto">this :<br />
Selects the current HTML element e.g $(this)
<li><p dir="auto">p.inter<br />
Selects all <code><p> elements with class="intro" e.g $("p.intro")
<li><p dir="auto">p:first:<br />
Selects the first <code><p> element e.g $("p:first")
<li><p dir="auto">:button :<br />
Selects all <code><button> elements and <code><input> elements of type="button" e.g $(":button")
<p dir="auto">There are a lot of other selectors which we will use in our upcoming posts but for now this much is enough. This much is enough to help you understand what selector is and what it actually does.
<p dir="auto"><img src="https://images.hive.blog/DQmWV71MNUTbrbQjApio1s8DaVgiSgmHUJwm3kAgrVwG6vq/Animation%20(0).gif" alt="Animation (0).gif" />
<p dir="auto">Here I have coded a page where you can see some text and a button. Whenever I click on the button it disappears and when I click again it appears again. This piece of code will help you how to select class and id and perform action on it .
<p dir="auto"><img src="https://images.hive.blog/DQmeQKyfjDhbqGCtjiBMFWiKJaU4Awg5PF9rxFfcAnGAdEj/image.png" alt="image.png" />
<pre><code><body>
<div class="tdev">
<h1>This is a tutorial on HIVE Blockchain</h1>
</div>
<button id="btn1"> click here</button>
</body>
<script>
$(document).ready(function(){
$('#btn1').click(function(){
$('.tdev').toggle(1000);
})
})
</script>
<p dir="auto">Here in the above code, you can see a div with the class name <code>tdev and a button with id <code>btn1. Now this here
<p dir="auto"><img src="https://images.hive.blog/DQmT3BPRSHHSJQan7SDTubHSkYJWb9is4YC54PgXZKzJ1no/image.png" alt="image.png" /><br />
I have selected the btn1 with a # because of ID and tdev because of class. It is like select element with cid btn1 and when it is clicked run a function that will hide an element with class name tdev. I hope this make some sence.
<p dir="auto">Now I have added a paragraph to help you understand how to select a paragraph.
<p dir="auto"><img src="https://images.hive.blog/DQmf2bwKZLCnWosHbgbiydYYzMQDqgJyfdXvexkeSCMnRSd/image.png" alt="image.png" /><br />
I have removed the delay from the div hiding and added it to the paragraph now the div will hide instantly and the paragraph will take 1000 milliseconds(1 second) to hide to let you show that both of them are separate.
<p dir="auto"><img src="https://images.hive.blog/DQmdS1nRzybyhSxj5sh5xSwHmeLV86g7VZGxFrYD2DpySxm/Animation%20(1).gif" alt="Animation (1).gif" /><br />
I hope this helped a little in the upcoming post we will discuss the events with the passage of time and practice you will learn about the selectors in details.
<p dir="auto"><center><br />
<strong>Now if you like the post please upvote and comment if you want to give me some advise<br />
<img src="https://images.hive.blog/DQmd3WcHH8i6U2JkmnrvEvd4FwjDQxJtG3Tnhzxdjswktdx/ntitled-1.png" alt="ntitled-1.png" />
Hi, we appreciate your work on sharing cool tutorials on this blockchain and we will be featuring your post on today's Gitplait elites publication. Thank you!
You are an elite
Thanks a lot.
Congratulations @pakgamer! You have completed the following achievement on the Hive blockchain and have been rewarded with new badge(s) :
<table><tr><td><img src="https://images.hive.blog/60x70/http://hivebuzz.me/@pakgamer/posts.png?202006012032" /><td>You published more than 50 posts. Your next target is to reach 60 posts. <p dir="auto"><sub><em>You can view <a href="https://hivebuzz.me/@pakgamer" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">your badges on your board And compare to others on the <a href="https://hivebuzz.me/ranking" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Ranking<br /> <sub><em>If you no longer want to receive notifications, reply to this comment with the word <code>STOP <p dir="auto"><strong><span>Do not miss the last post from <a href="/@hivebuzz">@hivebuzz: <table><tr><td><a href="/hivebuzz/@hivebuzz/update-202006"><img src="https://images.hive.blog/64x128/https://i.imgur.com/C5NcoUe.png" /><td><a href="/hivebuzz/@hivebuzz/update-202006">Project Activity Update<tr><td><a href="/hivebuzz/@hivebuzz/shop"><img src="https://images.hive.blog/64x128/https://i.imgur.com/soiD80C.png" /><td><a href="/hivebuzz/@hivebuzz/shop">Introducing HiveBuzz Shop - Offer gifts with your favorite badges <h6>Support the HiveBuzz project. <a href="https://hivesigner.com/sign/update_proposal_votes?proposal_ids=%5B%22109%22%5D&approve=true" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Vote for our proposal!