How to do? - Part 1

The first step

All jQuery statement starts with $(dollar) sign. Whenever we are going to write any function for jQuery, we should ensure that it will run after loading the complete document. To do that wrap the jQuery code inside following code block.

        // this is the must
        $(document).ready(function() {
        
        // write jQury code block here
        // ........
        
        })// this is the must

To find out an element

To find out an html element itself, you can use the name of the element such as div, input, table, td etc. Following code will find out all div elements in the page.

    // html code
    <div>Text inside the div element.</div>
    
    jQuery code
<script>    
    $("div")
</script>    

To find out an element using id

To find out an html element using id, you can use following code. Notice that the id of the element starts with # (hash).
Lets say, we have a div element like this

    // html code
    <div id="idOfTheHtmlElement">Text inside the div element.</div>

    // jquery code
    
    $("#idOfTheHtmlElement")

To find out an element using class

To find out an html element using class name, you can use following code. Notice that the class of the element starts with . (dot).

    // html code
    <div class="className">Text inside the div element.</div>
    
    jQuery code
<script>    
    $(".className")
</script>    

Getting and setting html element value

To get and set the value of the form element, use val method. If we want to get the value simply call the val() and if we want to set the value call the val(parameter) like below.

// html code
<input type="text" id="jHowDoI1" class="demoBlock" value="Sample Text" />  
<input type="button" id="btnGet" value="Get Value" />
<input type="button" id="btnSet" value="Set Value" />
    
// jQuery Code
<script>
$(document).ready(function() {

    $("#btnGet").click(function() {
        var val = $("#jHowDoI1").val();
        alert(val);
    })
    
    $("#btnSet").click(function() {
        $("#jHowDoI1").val("Set the value: changed");
    })
})
</script>

Check for an element existence

If we want to check for an element existence, we can use if statement along with length of the element like below. In this code block I am using lenght property of the element to check if its length is more than one. It it is, it is assumed that element exists otherwise not (Notice the ! sign in the 2nd click event, that check for not existence). Even if we remove "Element exists" text inside the "jExists" div element it will return true.

    
// html code
<div id="jExists" class="demoBlock" style="display:none;">Element exists</div>
<input type="button" id="btnExists" value="Check for the existence of the Element and show"/>
<input type="button" id="btnDoesnotExists" value="Check for the existence of the Element"/>

// jQuery code
<script>
$(document).ready(function() {
    $("#btnExists").click(function() {
        if ($('#jExists').length) {
            $('#jExists').show();
        }
    })

    $("#btnDoesnotExists").click(function() {
        if (!$("#jExists1").length) // notice sign of exclamation
            alert("Element doesn't exists");

    })
})
</script>
    

Check for a class of an element

To check whether an element has a particular class or not, we can use is(argument) method. In the following block, you may see a slideToggle() function; don't worry about this right now, this will simply toggle display(slide) a particular html element.

// html code
<div id="jCExists" class="demoBlock" style="display: none;">Demo Text</div>
<input type="button" value="Class Exists" id="btnCExists" />
<input type="button" value="Class Doesn't Exists" id="btnCNExists" />

// jQuery Code
<script>
    $(document).ready(function() {

        $("#btnCExists").click(function() {
            if ($("#jCExists").is(".demoBlock")) {
                $("#jCExists").slideToggle("slow");
            }
        })

        $("#btnCNExists").click(function() {
            if (!$("#jCExists").is(".demoBlockNOT")) { // notice sign of exclamation
                alert("demoBlock doesn't exists");
            }
        })

    })
</script>
    

How to escape a special character

There might be certain html element id or class that contain some special character in their name or id like ., [ or ] etc. We can use escape character (\\) to ignore them.

    
// html code
<div id="div.EscapeID" class="demoBlock">Text inside div element having id as "div.EscapeClass" </div>
<input type="button" id="btn.HideText" value="Hide above text" />
   
// jQuery block
<script>
    $(document).ready(function() {
        $("#btn\\.HideText").click(function() {
            $("#div\\.EscapeID").toggle();
        })
    })
</script>
    

How to add/remove an attribute in an html element

To add or remove attributes of the html element, we can use attr(name, value) and removeAttr(name) methods respectively.

// html code     
<input type="text" id="txtAttribute" class="demoBlock" value="Demo text" />
<input type="button" value="Add Attribute: Disable TextBox" id="jbtnDisable" />
<input type="button" value="Remove Attribute: Enable TextBox" id="jbtnEnable" />

// jQuery code
<script>
    $(document).ready(function(){
    
    $("#jbtnDisable").click(function(){
       $("#txtAttribute").attr("disabled", "disabled");            
    })  
    
    $("#jbtnEnable").click(function(){
       $("#txtAttribute").removeAttr("disabled", "disabled");            
    })
          
    })
</script>

How to get dropdown text and value

You can get the value of the selected item from the dropdown using val method as described above and to get the text, you can use text() method of the selected item. You can notice in the below code snippet that I have specified jQuery on the click event instead of writing separate function. If your requirement is short you can use inline jQuery too.

<select id="jSelect">
   <option value="1">India</option>
   <option value="2">USA</option>
 </select>
 <input type="button" value="Get Value" onclick="alert($('#jSelect').val())"/>
 <input type="button" value="Get Text Value" onclick="alert($('#jSelect option:selected').text())"/>

How to load another webpage?

If your requirement is to load another page content at a particular section on your page, you can use load() method like below.

// html code
<div id="divLoad" class="demoBlock"></div>
<p><a id="aLoad" href="javascript:void(0)" title="Load signature page">Load signature Page and Hide this link</a></p>

jQuery code
<script>
    $(document).ready(function() {
    $("#aLoad").click(function() {
        $("#divLoad").load("/signature.aspx");
        $("#aLoad").hide();
        })
    })
</script>

Load signature Page and Hide this link (Please wait for a while after clicking.)