My jQuery Notes

This page is my scratchpad for tiny scraps of jQuery snippets.

  1. Set the contents of an element (like .innerHTML)
    $('#myId').html('new string');
  2. Bind a click event

  3. Run this method when the page is loaded and ready.

  4. Set the value of a jQuery UI slider

  5. How to copy text to the clipboard

    Browsers don't like you copying things to the clipboard, so you typically need something like Flash. Below is a pure HTML solution, although clunky, it works. Thanks to Jarek Milewski for the code. The user will see a text box with the text highlighted, they enter "Ctl+C" and it copies the text. The "Enter" removes the prompt.

     <input type="button" id="CopyToClipboard" name="CopyToClipboard" 
     value="Copy To Clipboard" 
        function CopyToClipboard(text) {
            window.prompt("Copy to clipboard: Ctrl+C, Enter",text);
  6. How to toggle a page from black to white with a checkbox.

    In the Html:

       Black:<input type="checkbox" value="auto" id="black" />

    In the JavaScript:

    function black() {
        var backgroundColor = "white";
        var color = "black";
        if($('#black').is(':checked')) { 
            backgroundColor = "black";
            color = "white";
        } = backgroundColor; = color;
  7. Encoding URLs (Ok, URIs for the purists)

    escape(mystring); //encodes most non-alphanumerics as hexcodes, " " equals "%20", will not encode: @*/+
    encodeURI(myUri); //encodes entire URI, but does not encode: ~!@#$&*()=:/,;?+' 
    encodeURIComponent(myComponent); //encodes non-alphanumerics, do not use on entire URI

    To reverse these functions use, unescape(), decodeURI(), and decodeURIComponent().

  8. Misc Url Javascript Functions

    //Get base URL
    var base = location.protocol + '//' +;
    //Get the current URL
    var url = document.URL;
    //redirect to another url
    window.location.href = "";

    How to parse a Url to find the parts

     var urlParts = window.location.pathname.split('/');
     var webApp = urlParts[1];
     var controller = urlParts[2];
     var action = urlParts[3];
     var root = location.protocol + '//' +;
  9. Get the selected item in a select list.

    Use the "val()" function.

     <select name='actor' id='actor'>
          <option>Sigourney Weaver</option>
          <option>Denzil Washington</option>
  10. How to add an attribute to an element.

            var host = $("#hostList");
            host.attr("list", "hostList");
  11. How to write something to the console

    console.log("my log message");
  12. How to save state of all the input elements

        $(function () {
            $("input").each(function (index, myElement)
            { rememberMe(myElement.getAttribute('id')); });
        function rememberMe(widgetName) {
            $('#'+widgetName).change(function () {
                localStorage.setItem(widgetName, $(this).attr('value'));
            if (localStorage.getItem(widgetName)) {
  13. How to set the href of an anchor tag

  14. How to set the text of an anchor tag

    $("#myId").text("My New Text");
  15. How to set callbacks for Bootstrap3 child menu items

    <span class="dropdown">
      <button class="btn btn-info" data-toggle="dropdown">Countries<span class="caret"></span></button>
      <ul id="countries" class="dropdown-menu">
    $("#countries").children().bind( "click", function() {
      alert( $(this).text() );