Online jQuery Cheat Sheet https://htmlcheatsheet.

com/jquery/

Hide comments
jQuery CheatSheet
Basics Selectors
$("*") // all elements
Include $("p.demo") // <p> elements with class="int
Events
Download $("p:first") // the first <p> element
$(".demo").click(function(){ <script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"
$("p span") // span, descendant of p
$(this).hide(200); $("p > span")
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></ // span, direct child of p
}); $("p + span") // span immediately proceeded b
$("p ~ span") // strong element proceeded by
Syntax
Mouse $("ul li:first") // the first <li> element of th
$(document).ready(function(){ $("ul li:first-child") // the first <li> element of ev
scroll, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter,
$(".demo").click(function(){
mouseleave, load, resize, scroll, unload, error $("ul li:nth-child(3)") // third child
$(this).hide(200); $("[href]") // any element with an href att
Keyboard }); $("a[target='_blank']") // <a> elements with a target "
keydown, keypress, keyup }); $("a[target!='_blank']") // <a> elements with a target a
$(function(){ $(":input") // all form elements
Form // Short Document Ready $(":button") // <button> and <input> element
submit, change, focus, blur }); $("tr:even") // even <tr> elements
$("tr:odd") // odd <tr> elements
DOM Element Each
$("span:parent") // element which has child elem
blur, focus, focusin, focusout, change, select, submit $(".demo").each(function() { // parse each .demo element
$("span:contains('demo')") // element conaining the specif
document.write($(this).text() + "\n"); // output their text
Browser }); Actions
load, resize, scroll, unload, error $(selector).action()
Trigger
$(this).hide() // the current element
.bind() $("a#mylink").trigger("click"); // triggers event on an element
$("div").hide() // all <div> elements
$(document).ready(function() { // attach a handler to an event for the elements $(".demo").hide() // all elements with class="demo"
$("#demo").bind('blur', function(e) { noConflict $("#demo").hide() // the element with id="demo"
//dom event fired var jq = $.noConflict(); // avoid conflict with other frameworks also using the doll
}); jq(document).ready(function(){
}); jq("#demo").text("Hello World!");
}); Ads

Effects DOM Manipulation

Hide / Show
Content
$("#demo").hide(); // sets to display: none
$("#demo").text(); // returns text content
$("#demo").show(200); // shows hidden elemnt with animation (speed)
$("#demo").html(); // returns content, including HTML markup
$("#demo").toggle(); // toggle between show and hide
$("#demo").val(); // returns field value
$("#demo").html('Hey <em>yo</em>'); // sets HTML content
$( "#element" ).hide( "slow", function() { // hide with callback function
console.log( "Animation complete." ); Attributes
}); $("#link").attr("href"); // get an attribute
$("#link").attr("href",'https://htmlg.com'); // set attribute
Fade
$("#link").attr({
fadeIn, fadeOut, fadeToggle, fadeTo "href" : "https://htmlg.com", // setting multiple attributes
$("#demo").fadeIn(); // fade in a hidden element
"title" : "HTML Editor"
$("#demo").fadeOut(300); // fade out
});
$("#demo").fadeToggle("slow"); // toggle between fadeIn and hadeOut
$("#link").attr("href", function(i, origValue){
$("#demo").fadeTo("slow", 0.25); // fades to 0.25 opacity
return origValue + "/help"; // callback function gets and changes the attribute
});
Slide Traversing
slideDown, slideUp, slideToggle Add
$("#demo").slideDown(); $("#demo").parent(); // accessing direct par
$(".demo").prepend("Yo!"); // adds content at the beginning in the selected elements
$("span").parent().hide(); // changing parent colo
$("#demo").slideUp("slow");
$(".demo").append("<em>Hey!</em>"); // adds content at the end in the selected elements
$("#demo").parents(); // all ancestors of the
$("#demo").slideToggle();
$(".demo").before("Cheers"); // adds content before the selected elements
$("#demo").parentsUntil("#demo2"); // all ancestors betwee
Animate $(".demo").after("<em>Peace</em>"); // adds content after the$("#demo").children();
selected elements // all direct children
$(selector).animate({params},speed,callback); $("#demo").children(".first"); // all direct children
Remove
$("div").animate({ $("#demo").find("span"); // all span elements in
$("#demo").remove(); // removes the selected element
$("#demo").find("*"); // all descendants
opacity: '0.5',
$("#demo").empty(); // removes children $("#demo").siblings("span"); // span siblings of #de
left: '200px',
$("div").remove(".cl1, .cl2"); // removes divs with the listed classes
$("#demo").next(); // the next sibling
height: '200px'
}); $("p").nextAll(); // all next siblings
Classes
$("#demo").nextUntil("#demo2"); // siblings between two
stop() Method $("#demo").addClass("big red"); // add class $("#demo").prev(); // the previous sibling
$("h1, p").removeClass("red"); // remove class $("p").prevAll(); // all previous sibling
$("#demo").stop();
$("#demo").toggleClass("big"); // toggle between adding and $("#demo").prevUntil("#demo2");
removing // previous siblings be
$('#demo').mouseleave(function(event) { // hover end
$('.tab').stop().animate({ // stop() method CSS Filtering
opacity : '0.5', $("#demo").css("background-color"); // returns CSS value $("span strong").first(); // first strong in first span
marginTop: '10px' $("#demo").css("color", "blue"); // sets CSS rule $("span strong").last(); // last strong in last span
}, 500, function() { // animation complete$("#demo").css({"color": "blue", "font-size": "20px"}); // sets multiple CSS properties
$("div").eq(9); // element with a specific inde
$('#demo').removeClass('hovered'); // callback function
$("div").filter(".big"); // all div elements with .big c
}); Dimensions
$("div").not(".big"); // opposite of filter
}); width, height, innerWidth, innerHeight, outerWidth, outerHeight
$('#demo').mouseover(function(event) { // hover begin inner - includes padding
$('.tab').stop().animate({ // stop() method outer - includes padding and border
opacity : '1', Ads
marginTop: '0px'
}, 300, function() { // animation complete
$('#demo').addClass('hovered'); Ajax
// callback function
});
});
$("#demo").load("file.txt h1.main"); // returns the h1 tag in th
Chaining $("#demo").load("file.txt", function(responseTxt, statusTxt, xhr){ // callback function
$("#demo").css("backgroundColor", "green").slideUp(500).slideDown(500);
if(statusTxt == "success") {
document.write("Content loaded successfully!");
} else {
document.write("Error: " + xhr.status + ": " + xhr.statusText);
Ads }
});
$.get()
$.get("demo.asp", function(data, status){ //$.get(URL,callback);
document.write("Data: " + data + "\nStatus: " + status);
});

1 dari 2 02/10/2021 09.55

Online jQuery Cheat Sheet https://htmlcheatsheet.com/jquery/

$.post()
jQuery
$.post("demo.asp", jQuery UI HTTP POST
// send JS cleaner JS Obfuscator
request to a page and get the answer
{ Articles Can I use?
name: "John", // send data
age: 30
},
function(data, status){ //retreive response
console.log("Data: " + data + "\nStatus: " + status);
});

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

2 dari 2 02/10/2021 09.55