jQuery CheatSheet

Basics

Selectors Include
Download
$("*") // all elements <script src="https://code.jquery.com/jquery-latest
$("p.demo") // <p> elements with cla <script src="https://ajax.googleapis.com/ajax/libs
$("p:first") // the first <p> element
$("p span") // span, descendant of p Syntax
$("p > span") // span, direct child of
$(document).ready(function(){
$("p + span") // span immediately proc
$(".demo").click(function(){
$("p ~ span") // strong element procee
$(this).hide(200);
$("ul li:first") // the first <li> elemen
});
$("ul li:first-child") // the first <li> elemen
});
$("ul li:nth-child(3)") // third child
$(function(){
$("[href]") // any element with an h
// Short Document Ready
$("a[target='_blank']") // <a> elements with a t
});
$("a[target!='_blank']") // <a> elements with a t
$(":input") // all form elements Each
$(":button") // <button> and <input>
$(".demo").each(function() { // par
$("tr:even") // even <tr> elements
document.write($(this).text() + "\n"); // out
$("tr:odd") // odd <tr> elements
});
$("span:parent") // element which has chi
$("span:contains('demo')") // element conaining the Trigger
Actions $("a#mylink").trigger("click"); // triggers event
$(selector).action()
$(this).hide() // the current element noConflict
$("div").hide() // all <div> elements var jq = $.noConflict(); // avoid confl
$(".demo").hide() // all elements with class="demo jq(document).ready(function(){
$("#demo").hide() // the element with id="demo" jq("#demo").text("Hello World!");
});

Events
DOM Manipulation
$(".demo").click(function(){
$(this).hide(200);
}); Content
$("#demo").text(); // returns tex
Mouse $("#demo").html(); // returns con
scroll, click, dblclick, mousedown, mouseup, mousemove, $("#demo").val(); // returns fie
mouseover, mouseout, mouseenter, mouseleave, load, $("#demo").html('Hey <em>yo</em>'); // sets HTML c
resize, scroll, unload, error
Attributes
Keyboard
$("#link").attr("href"); // get
keydown, keypress, keyup $("#link").attr("href",'https://htmlg.com'); // se
$("#link").attr({
Form
"href" : "https://htmlg.com", // se
submit, change, focus, blur "title" : "HTML Editor"
});
DOM Element
$("#link").attr("href", function(i, origValue){
blur, focus, focusin, focusout, change, select, submit return origValue + "/help"; // cal
});
Browser
load, resize, scroll, unload, error Add

.bind() $(".demo").prepend("Yo!"); // adds conten

$(".demo").append("<em>Hey!</em>"); // adds conten
$(document).ready(function() { // attac
$(".demo").before("Cheers"); // adds conten
$("#demo").bind('blur', function(e) {
$(".demo").after("<em>Peace</em>"); // adds conten
//dom event fired
}); Remove
});
$("#demo").remove(); // removes the sel
$("#demo").empty(); // removes childre
$("div").remove(".cl1, .cl2"); // removes divs wi
Effects
 Classes
Hide / Show $("#demo").addClass("big red"); // add class
$("#demo").hide(); // sets to display: none $("h1, p").removeClass("red"); // remove class
$("#demo").show(200); // shows hidden elemnt with $("#demo").toggleClass("big"); // toggle between
$("#demo").toggle(); // toggle between show and h
CSS
$( "#element" ).hide( "slow", function() { // hide $("#demo").css("background-color"); // returns
console.log( "Animation complete." ); $("#demo").css("color", "blue"); // sets CS
}); $("#demo").css({"color": "blue", "font-size": "20p

Fade Dimensions
fadeIn, fadeOut, fadeToggle, fadeTo width, height, innerWidth, innerHeight, outerWidth,
$("#demo").fadeIn(); // fade in a hid outerHeight
$("#demo").fadeOut(300); // fade out inner - includes padding
$("#demo").fadeToggle("slow"); // toggle betwee
outer - includes padding and border
$("#demo").fadeTo("slow", 0.25); // fades to 0.25
Traversing
Slide
$("#demo").parent(); // accessing d
slideDown, slideUp, slideToggle $("span").parent().hide(); // changing pa
$("#demo").slideDown();
$("#demo").parents(); // all ancesto
$("#demo").slideUp("slow"); $("#demo").parentsUntil("#demo2"); // all ancesto
$("#demo").slideToggle(); $("#demo").children(); // all direct
Animate $("#demo").children(".first"); // all direct
$("#demo").find("span"); // all span el
$(selector).animate({params},speed,callback); $("#demo").find("*"); // all descend
$("div").animate({
$("#demo").siblings("span"); // span siblin
opacity: '0.5',
$("#demo").next(); // the next si
left: '200px',
$("p").nextAll(); // all next si
height: '200px'
$("#demo").nextUntil("#demo2"); // siblings be
});
$("#demo").prev(); // the previou
stop() Method $("p").prevAll(); // all previou
$("#demo").prevUntil("#demo2"); // previous si
$("#demo").stop();
$('#demo').mouseleave(function(event) { // hover Filtering
$('.tab').stop().animate({ // stop( $("span strong").first(); // first strong in fir
opacity : '0.5', $("span strong").last(); // last strong in last
marginTop: '10px' $("div").eq(9); // element with a spec
}, 500, function() { // anima $("div").filter(".big"); // all div elements wi
$('#demo').removeClass('hovered'); // callb $("div").not(".big"); // opposite of filter
});
});
$('#demo').mouseover(function(event) { // hover
$('.tab').stop().animate({ // stop( Ajax
opacity : '1',
marginTop: '0px'
}, 300, function() { // anima $("#demo").load("file.txt h1.main");
$('#demo').addClass('hovered'); // callb
}); (statusTxt
$.get()
});
$.get("demo.asp", function(data, status){ //
Chaining document.write("Data: " + data + "\nStatus: "
});
$("#demo").css("backgroundColor", "green").slideUp(5
$.post()
$.post("demo.asp", // send HTTP POST request

Useful Links {
name: "John", // send data
age: 30
jQuery jQuery UI },
JS cleaner JS Obfuscator function(data, status){ //retreive response
console.log("Data: " + data + "\nStatus: " + s
Articles Can I use? });

HTML Cheat Sheet is using cookies. | Terms and Conditions, Privacy Policy
©2020 HTMLCheatSheet.com