jQuery Methods Cheat Sheet with Examples
1. Selectors & Traversing
-------------------------
$() - Select elements
Example: $("#id"), $(".class"), $("<tag>")
.find() - Find descendants
Example: $("#parent").find("p")
.parent() - Get immediate parent
Example: $("span").parent()
.children() - Get immediate children
Example: $("#list").children()
.siblings() - Get siblings
Example: $("#item1").siblings()
2. Content Manipulation
-----------------------
.text() - Get/set text content
Example: $("#para").text() / $("#para").text("Hello!")
.html() - Get/set HTML content
Example: $("#div").html() / $("#div").html("<b>Bold</b>")
.val() - Get/set input value
Example: $("#input").val() / $("#input").val("Avi")
.append() - Add content at end of element
Example: $("#list").append("<li>New Item</li>")
.prepend() - Add content at beginning
Example: $("#list").prepend("<li>First Item</li>")
.remove() - Remove element
Example: $("#old").remove()
.empty() - Remove child elements
Example: $("#container").empty()
3. CSS & Attribute Manipulation
-------------------------------
.css() - Get/set CSS properties
Example: $("#box").css("color") / $("#box").css("color", "red")
.addClass() - Add class
Example: $("#box").addClass("active")
.removeClass() - Remove class
Example: $("#box").removeClass("active")
.toggleClass() - Toggle class
Example: $("#box").toggleClass("active")
.attr() - Get/set attribute
Example: $("#link").attr("href") / $("#link").attr("href", "http://")
.removeAttr() - Remove attribute
Example: $("#input").removeAttr("disabled")
4. Event Handling
-----------------
.click() - Click event
Example: $("#btn").click(function(){ alert("Clicked!"); })
.on() - Attach event handler
Example: $(document).on("click", ".btn", function(){ ... })
.off() - Remove event handler
Example: $("#btn").off("click")
.hover() - Mouse hover in/out
Example: $("#box").hover(inFunction, outFunction)
.keyup() - Key released
Example: $("#input").keyup(function(){ ... })
5. Effects & Animation
----------------------
.show() - Show element
Example: $("#box").show()
.hide() - Hide element
Example: $("#box").hide()
.toggle() - Toggle show/hide
Example: $("#box").toggle()
.fadeIn() - Fade in
Example: $("#box").fadeIn(1000)
.fadeOut() - Fade out
Example: $("#box").fadeOut(1000)
.slideUp() - Slide up (hide)
Example: $("#box").slideUp()
.slideDown() - Slide down (show)
Example: $("#box").slideDown()
.animate() - Custom animation
Example: $("#box").animate({left: '250px', opacity: '0.5'}, 1000)
6. AJAX Methods
---------------
$.ajax() - Custom ajax call
Example: $.ajax({url: "api", method: "GET", success: function(data){...}})
$.get() - GET request
Example: $.get("api", function(data){ ... })
$.post() - POST request
Example: $.post("api", {name:"Avi"}, function(data){ ... })
7. Utilities
------------
.each() - Iterate over elements
Example: $("li").each(function(index){ console.log(index); })
.data() - Store/retrieve data
Example: $("#div").data("key", "value") / $("#div").data("key")
.clone() - Clone element
Example: $("#box").clone()
.length - Get number of elements
Example: $("p").length
Bonus Example:
-------------
<button id="btn">Click me</button>
<div id="msg"></div>
<script>
$("#btn").click(function(){
$("#msg").text("Button clicked!").css("color", "green").fadeIn();
});
</script>
