jQuery Cheat Sheet

by kthornbloom

HTML

<div class="target">Target</div>
<div class="testers">
<a href="#" class="toggle-slide">Toggle Slide</a>

<a href="#" class="slide-up">Slide Up</a>

<a href="#" class="slide-down">Slide Down</a> 
<a href="#" class="fade-out">Fade Out</a>

<a href="#" class="fade-in">Fade In</a>

<a href="#" class="css-single">CSS Single Line Edit</a>

<a href="#" class="css-multi">CSS Multi Line Edit</a>

<a href="#" class="animate">Animate</a>

</div>

<h1>Result:</h1>

<div class="result">Nothing's happened yet.</div>

<h1>JS Comparison</h1>

<ul>
    <li>== equal to</li>
    <li>=== equal to and equal type</li>
    <li>!= not equal</li>
    <li>!== not equal value or type</li>
    <li>> greater than</li>
    <li>
        < less than</li>
            <li>>= greater or equal</li>
            <li>
                <=l ess than or equal</li>
                    <li>&& and</li>
                    <li>|| or</li>
                    <li>! not</li>
</ul>

<h1>Common JS Keycodes</h1>

<ul>
    <li>left arrow 37</li>
    <li>up arrow 38</li>
    <li>right arrow 39</li>
    <li>down arrow 40</li>
    <li>backspace 8</li>
    <li>tab 9</li>
    <li>enter 13</li>
    <li>shift 16</li>
    <li>space 32</li>
</ul>

CSS

body {
    font-family:sans-serif;
}
h1 {
    font-size:1.4em;
}
.target {
    width: 75px;
    height: 48px;
    padding-top: 27px;
    background: #4575DD;
    color: #fff;
    text-align: center;
    margin-bottom:50px;
}
.target:hover {
    background: #5B88E9;
    cursor:pointer;
}
.result {
    border:1px solid #ccc;
    padding:10px;
    position:relative;
}
.testers a:link, .testers a:visited {
    display:inline-block;
    text-decoration:none;
    background:#eee;
    padding:4px;
    margin-bottom:4px;
}

JavaScript

// Clicking things
$('.target').click(function () {
    // code to fire once you've clicked
    $('.result').html('clicked!');
});

// Hovering things
$('.target').hover(function () {
    $('.result').html('Hovering');
}, function () {
    $('.result').html('Un-Hovered');
});

// toggle sliding up/down
$('.toggle-slide').click(function () {
    $('.result').slideToggle();
});

// sliding up
$('.slide-up').click(function () {
    $('.result').slideUp("1000", function () {
        // callback
    });
});

// fade in
$('.fade-in').click(function () {
    $('.result').fadeIn("1000", function () {
        // callback
    });
});

// fade out
$('.fade-out').click(function () {
    $('.result').fadeOut("1000", function () {
        // callback
    });
});

// sliding down
$('.slide-down').click(function () {
    $('.result').slideDown("1000", function () {
        // callback
    });
});

// Single, immediate CSS change
$('.css-single').click(function () {
    $('.result').css("color", "red");
});

// Multiple Line, immediate CSS change - note no comma on last CSS rule
$('.css-multi').click(function () {
    $('.result').css({
        color: "blue",
        border: "1px solid blue"
    });
});

// Animate CSS values
$('.animate').click(function () {
    $('.result').animate({
        left: "+=20px",
        padding: "30px"
    }, 1000, function () {
        // callback
    });
});

// Do stuff to dynamically added content 
$(document.body).on('click', '.selector', function (event) {
    // Do something
});

// Do stuff on key press
$(document).keydown(function(e){
    if (e.keyCode == 27) { 
        // Do something
        return false;
    }
});