Jquery Selector
Using Jquery is making your web page more flexible and more working. Using Javascript was bit old and now we have Jquery which is based on Javascript and creates the DOM with less code. So here we will discuss how we will select the elements in Jquery.
HTML Tags (ID, Class)
Selecting HTML elements in Jquery is easy and we have to write less code as compare to Javascript. List of selecting the elements in Jquery and Javascript suppose we have a <p> tag.
<p class="myclass" id="seltest" >This is test</p>
| Selector Type | Javascript | Jquery |
| ID | document.getElementById(‘seltest’).value; | $(‘#seltest’).val(); |
| Class | document.getElementById(‘myclass’).value; | $(‘.myclass’).val(); |
You see that with Jquery we can save our time and shorten our code.
CSS Tags (Elements, ID, Class)
We see how we can select the HTML Element now we will see how we can add the CSS property to an Element or change the CSS property. Class is denoted by dot and Id is from #.
p{color:blue}
.myclass{display:none}
#myclassid{color:black}
| Selector Type | Jquery |
| P | $(“p”).css{color:blue} |
| ID | $(‘#myclassid’).css{color:blue} |
| Class | $(‘.myclass’).css{display:block}; |
In above example we change the color from black to blue and display from none to block. Its quite easy to work with Jquery and it will fun. Lets try to combine both HTML and CSS.
.myclass{display:none}
<p id="sltest" class="myclass">This is my selector test</p>
Now if we run the above code it wont show on our web page because when <p> tag calls the myclass it found the display as none so it will hide it now we will get back it to our webpage now we call our Jquery. Suppose we have a button and when we click over it it will come over the webpage.
$("mybutton).click(function(){$("#sltest").show();})
If we dont want to click over the button and we want that it will come with the page load than do this.
$("document).ready(function(){$("#sltest").show();})
Or you can call the <p> tag directly to show it.
$("document).ready(function(){$("p").show();})
$() – is the shortname of Jquery().
If you still have any issue in selecting the elements than let me know