User Tools

Site Tools


notes:javascript:jquery

jQuery

Add jQuery to your web page:

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

Example: Disable a button:

function disableButton() {
    $('#TestButton').attr('disabled', true);
}
<input id="TestButton" type="button" value="Disable Button" onclick="disableButton();" />

Example: Set the value of a hidden field identified by its id:

function setValue(v) {
    // Set the 'value' attribute of a hidden field.
    $('#HiddenField').val(v);
}
 
function showValue() {
    // Get the 'value' attribute of a hidden field.
    var val = $('#HiddenField').val();
 
    // Show the value.
    alert(val);
}
<input id="HiddenField" type="hidden" />
 
<a href="javascript:setValue('Hello');">Set Value</a><br />
<a href="javascript:showValue();">Show Value</a>

Example: Set the value of a hidden field identified by its name:

function setValue(v) {
    $("input[name$=HiddenField]").attr("value", v); // attr("value", v) is the same as val(v)
}
 
function showValue() {
    alert($('input[name$=HiddenField]').val());
}
<input name="HiddenField" type="hidden" />
 
<a href="javascript:setValue('Hello again...');">Set Value</a><br />
<a href="javascript:showValue();">Show Value</a>

Example: Replace the innerHTML attribute of a span element:

function replaceInnerHtml(str) {
    $('#spanText').html(str);
}
<a href="javascript:replaceInnerHtml('Replaced <b>here</b>');">Replace inner HTML</a><br />
<span id="spanText">Some text</span><br />

Example: Change CSS class:

var prevRowKey = null;
function selectRow(key) {
    // unselect the previous row
    if (prevRowKey) {
        if (prevRowKey != key) {
            var row = $("div").find("[key='" + prevRowKey + "']");
            if (row) {
                row.attr("class", "row-normal");
            }
        }
    }
 
    // select the current row
    var row = $("div").find("[key='" + key + "']");
    if (row) {
        row.attr("class", "row-selected");
        prevRowKey = key;
    }
}
<style type="text/css">
    .row-normal {
        color: Black;
        background-color: White;
    }
 
    .row-selected {
        color: Red;
        background-color: Blue;
    }
 
    #panel { width: 100px; }  
</style>
 
<a href="javascript:selectRow(1);">Select Row 1</a><br />
<a href="javascript:selectRow(2);">Select Row 2</a><br />
<a href="javascript:selectRow(3);">Select Row 3</a><br />
<br />
<div id="panel">
    <div key="1">Row 1</div>
    <div key="2">Row 2</div>
    <div key="3">Row 3</div>
</div>

Example: Attach an href attribute to all anchor elements that have class=“anchor-button”:

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 
        <script>
            function attachHref() {
                var attrHref = "javascript:alert('clicked');";
 
                $(function () {
                    var tags = $(".anchor-button");
                    tags.each(function () {
                        $(this).attr("href", attrHref);
                    });
                });
            }
 
            $(document).ready(function () {
                attachHref();
            });
        </script>
    </head>
 
    <body>
        <!-- Link1 and Link2 will have an href assigned; Link3 will not have an href -->
        <a class="anchor-button">Link1</a><br />
        <a class="anchor-button">Link2</a><br />
        <a>Link3</a><br />
    </body>
</html>

Example: Attach an onclick event handler to a button with id=“Button1”:

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 
        <script>
            function attachOnClick() {
                var onclick = "javascript:alert('clicked'); return true;";
 
                $(function () {
                    var tags = $(".button-large");
                    tags.each(function () {
                        var butId = $(this).attr("id");
                        if (butId == "Button1") {
                            $(this).attr("onclick", onclick);
                        }
                    });
                });
            }
 
            $(document).ready(function () {
                attachOnClick();
            });
        </script>
    </head>
 
    <body>
        <input type="button" value="button 1" class="button-large" id="Button1" /><br />
        <input type="button" value="button 2" class="button-large" /><br />
    </body>
</html>
notes/javascript/jquery.txt · Last modified: 2018/01/29 by leszek