jQuery

To Bottom

jQuery

// Use $(callback) for document ready events, the ready() method is deprecated.

// jQuery CDN

// jQuery Event Basics

// Effects

// Themeroller

To Top

// Targeting (Traversal)

// CSS Selectors

$("#wrapper").css("width", 500);
$("#p2").css({ "background": "url('grass.png') repeat-y" });
$("a").css({ "border-color": "black", "border-width": "1px", "border-style": "solid" });
$(#table-data a").css("color", "green"); // a tag inside #table-data
$("em + a").css("color", "orange"); // a after em
$(".myClass > em").css("color", "gray"); // em that are children of .myClass
$("#o-list-indent li:nth-child(3)").css("color", "red"); // 3rd li in #o-list-indent
$("li[name]").html("Yabba Dabba Dooo!"); // li tags with name attributes
$("input[type='text']#fName").val("Napes"); // Change value in text input element #fName
$("a[href*='google']").css("font-weight", "bolder"); // href contains 'google'
$("img[alt^='NTT']").width(150).height(150); // img alt begins with 'NTT'
$("a[href$='pdf']").css("color", "red"); // href ends with 'pdf'
$("#table-data tr:even").css("background-color", "#FFFDD0"); // even rows
$("#table-data tr:odd").css("background-color", "#F0F8FF"); // odd rows
$("#table-data tr:first").css("color", "white"); // First matching element
$("#table-data tr:last").css("color", "white"); // Last matching element
$("a:contains(gravida)").css("color", "blue"); // contains 'gravida'
$("o-list-types li:not(:contains(and))".css("color", "red"); // does not contain 'and'

To Top

// Attributes

$("p:has(i)").hide(); // every p that has i tag inside it
alert($("p:has(i)").html());
$("p:has(i)").html(normal text).show();
$("p:has(i)").append("I go at the end");
$("p:has(i)").prepend("I go at the beginning");
$("p:has(i)").before("A new paragraph before");
$("p:has(i)").after("A new paragraph after");
$("#after-p).click(function() { $(this).remove(); });
$("#before-p).click(function() { $(this).replaceWith("Hallo"); });
$"("#o-list-indent li").each(function(index) { let inputListStuff = $("#listStuff").val(); $("#listStuff").val(inputListStuff + ", " + $(this).text()); });
$("#o-list-indent li").addClass("stars");
$("#o-list-indent li").click(function() { $(this).toggleClass("highlight"); let bgColor = $(this).css("background-color"); $("input[type=text]#fName").val(bgColor); });
$(#logo2").click(function() { let imgName = $(this).attr("src"); $("input[type=text]#fName").val(imgName); };

To Top

// Events

jQuery event.which returns which keyboard key or mouse button was pressed for the event

.mouseover(function() { $("#logo2").attr("src", "ntt-logo-horz.png"); });
.mouseout()
.hover(function() { $("h2").css("color": "green"); }, function() { $("h2").css("color": "black"); });
.dblclick()
$(document).click(function(e) { $("#mouse-x-pos").val(e.pageX); $("#mouse-y-pos").val(e.pageY); })
$(document).mousemove(function(e) { $("#mouse-mov-x").val(e.screenX); $("#mouse-mov-y").val(e.screenY); })
$(document).keepress(function(e) { let pressed = String.fromCharCode(e.which); $("#pressed").val(keyPressed); })
.blurr()
.change()
.focus()
.select()
.on(events [,selector] [,data], handler)
.ready()
.resize()
.scroll()

To Top

// jQuery AJAX


    $("document").ready(function() {
        $("#one-button").on("click", getInfoFromServer);
        $("#two-button").on("click", getDblFromServer);
        $("#three-button").on("click", getXmlFromServer);
    });
    function getInfoFromServer() {
        $.ajax({
            type: "GET",
            url: "textFromServer.txt",
            success: postToPage
        });
    }
    function postToPage(data, status) {
        $("#first").text(data);
    }
    function getDblFromServer() {
        $("span").load("getDouble.php",
            $("#the-form").serializeArray());
    }
    function getXmlFromServer() {
        $.ajax({
            type: "GET",
            url: "customer.xml",
            datatype: "xml",
            success: postToPageTwo
        });
    }
    function postToPageTwo(data) {
        $(data).find("customer").each(function() {
            let id = $(this).attr("id");
            let fName = $(this).find("fName").text();
            let lName = $(this).find("lName").text();
            let street = $(this).find("street").text();
            let city = $(this).find("city").text();
            let zip = $(this).find("zip").text();

            $('<div class="fName"></div>').html(fName).appendTo('#customers');
            $('<div class="lName"></div>').html(lName).appendTo('#customers');
            $('<div class="street"></div>').html(street).appendTo('#customers');
            $('<div class="city"></div>').html(city).appendTo('#customers');
            $('<div class="zip"></div>').html(zip).appendTo('#customers');
        });
    }

To Top

// Animation

$("#p-one").click(function() { $(this).hide() });
$("#p-two").click(function() { $(this).fadeOut(2000) });
.fadeToggle(2000)
.fadeTo('slow', .5)
.slideUp()
.slideDown()
.animate({ left: 300, opacity: .5, "font-size": "22px" }, 2000, "easeInQuad", function() { alert('Done!') }); // Position set to relative in CSS

To Top

// Menu

    
    $("#menu").menu({
        position: {
            my: "center top",
            at: "center bottom"
        }
    });

To Top

// Accordion


    $("#accordion").accordion({
        animate: 1500,
        active: 1,
        collapsible: true,
        event: "click",
        heightStyle: "content"
    });

To Top

// Tabs


    $("#tabs").tabs({
        event: "click",
        show: "fadeIn",
        hide: "fadeOut",
        active: 3,
        collapsible: true,
        heightStyle: "auto"
    });

To Top

// Dialog


    $("#dialog").dialog({
        draggable: true,
        resizable: false,
        height: 300,
        width: 300,
        position: {
            my: 'center top',
            at: 'center bottom',
            of: "#openDialog"
        },
        show: 1000,
        hide: 1000,
        autoOpen: false,
        buttons: {
            "OK": function() {
                $("#openDialog").html("You clicked OK");
                $(this).dialog("close");
            }
        }
    });
    $("#openDialog").click(function() {
        $("#customDialog").dialog("open");
    });

To Top

// Tool Tip


    $("[title]").tooltip();

To Top

// Select Menu


    $("#present").selectmenu({ width: 200 });

To Top

// Buttons


    $("#btn-3").button();

To Top

// Radio Buttons


    $("#radio-2").buttonset();

To Top

// Date Picker


    $("#birthday").datepicker({
        changeMonth: true,
        changeYear: true,
        dateFormat: "MM dd, yy",
        numberOfMonths: 1,
        maxDate: 365,
        minDate: -3650
    });

To Top