JQuery Get Element By ID or class name or tag name

JQuery Get Element By ID or class name or tag name

Prior to JQuery, we used to call document.getelementByID(“elementName”) to get html element. In JQuery it’s very simple and it’s supported by all browsers. so there wouldn't be any browser compatibility issue.

Let’s say, you want to get value of html input element textbox. How can we do that using JQuery?

First, you need to insert Jquery library in your web page. You may refer it from your scripts folder located inside the domain or use Google hosted CDN library.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

   <script type="text/javascript" language="javascript">
   
   $(document).ready( function (){ 
   
      $("#Button1").click( function () { 
        
        var inputValue  =  $("#Text1").val();
        
             alert(inputValue) ;
       });
       
    });
   
   </script>

Html Source code.

<div>        
        
        <input id="Text1" class="MyInputClass" type="text" />
         
        <input id="Button1" type="button" value="submit data" />
        
        </div>

First we are finding Button control by $(“#Button”). Then we attached click event to it.

$(“#Text1”).val() Returns text inside a textbox. $(“#Text1”) gives element by ID “Text1”

# is used to get element by ID.

How to get element by class name?

“.” is used to get elements by Class name.

var inputValue  =  $(".MyInputClass").val();

See, how we have prefixed “.” to class name. It will get element by class name.

How to get text box input element by it’s tab name?

var inputValue  =  $("input:text").val();

Above statement will search all input text boxes by tag name.

Tags:

Gridview select emailLearning JqueryBasics of jqueryJQuery Get .next() ElementAndroid screen navigation example using Activity and IntentJquery Gridview Dropdownlist Selected Change Enable Disable ControlsjQuery Select element by class nameJQuery SlideJQuery Hide HTML ElementASp.net 2.0 step by step Membership Provider gridview add new row

Author

My name is Satalaj, but people call me Sat. Here is my homepage: . I live in Pune, PN and work as a Software Engineer. I'm former MVP in ASP.net year 2010.
Disclaimer: Views or opinion expressed here are my personal research and it has nothing to do with my employer. You are free to use the code, ideas/hints in your projects. However, you should not copy and paste my original content to other web sites. Feel free to copy or extend the code.
If you want to fight with me, this website is not for you.
 

I'm Satalaj.