jQuery Reference

The jQuery Reference Guide is your go-to resource for all jQuery methods, properties, and events. It’s designed to help developers quickly find the syntax, description, and examples for the most commonly used jQuery features.

At The Coding College, we’ve curated this reference to be user-friendly and practical, ensuring you can apply jQuery concepts efficiently in your projects.

Core jQuery Methods

General Syntax

$(selector).action();

$: The jQuery object.
selector: Identifies elements in the DOM.
action: The method to execute on the selected elements.

Selectors

Selector	Description	Example
`$("*")`	Selects all elements	`$("*").hide();`
`$("#id")`	Selects the element with the specified ID	`$("#myId").show();`
`$(".class")`	Selects all elements with the class	`$(".myClass").fadeOut();`
`$("element")`	Selects all `<element>` tags	`$("p").css("color", "red");`
`[attribute]`	Selects elements with an attribute	`$("[href]").addClass("link");`

Event Methods

Method	Description	Example
`click()`	Triggers a function when an element is clicked	`$("#btn").click(function() { alert("Clicked!"); });`
`dblclick()`	Triggers on a double-click	`$("#btn").dblclick(() => alert("Double-clicked!"));`
`hover()`	Runs functions on mouseenter and mouseleave	`$("#box").hover(inFunc, outFunc);`
`keydown()`	Triggers on key press down	`$(document).keydown(() => alert("Key down!"));`
`on()`	Binds events to dynamically added elements	`$(document).on("click", ".btn", func);`

DOM Manipulation Methods

Content Manipulation

Method	Description	Example
`html()`	Get/set HTML content	`$("#div").html("<p>New Content</p>");`
`text()`	Get/set text content	`$("#div").text("New Text");`
`val()`	Get/set the value of form fields	`$("#input").val("Updated Value");`
`attr()`	Get/set attribute values	`$("img").attr("src", "image.jpg");`

Adding/Removing Elements

Method	Description	Example
`append()`	Adds content at the end	`$("ul").append("<li>New Item</li>");`
`prepend()`	Adds content at the beginning	`$("ul").prepend("<li>First Item</li>");`
`after()`	Inserts content after elements	`$("p").after("<div>After Div</div>");`
`before()`	Inserts content before elements	`$("p").before("<div>Before Div</div>");`
`remove()`	Removes elements	`$(".remove-me").remove();`

CSS Manipulation

Method	Description	Example
`addClass()`	Adds one or more classes to an element	`$("#box").addClass("highlight");`
`removeClass()`	Removes one or more classes	`$("#box").removeClass("highlight");`
`toggleClass()`	Toggles between adding/removing a class	`$("#box").toggleClass("highlight");`
`css()`	Gets/sets CSS properties	`$("#box").css("color", "blue");`

Effects and Animations

Method	Description	Example
`show()`	Displays hidden elements	`$("#box").show(500);`
`hide()`	Hides elements	`$("#box").hide(500);`
`fadeIn()`	Fades in an element	`$("#box").fadeIn("slow");`
`fadeOut()`	Fades out an element	`$("#box").fadeOut("slow");`
`slideDown()`	Slides an element down	`$("#menu").slideDown();`
`slideUp()`	Slides an element up	`$("#menu").slideUp();`
`animate()`	Creates custom animations	`$("#box").animate({ left: "+=50px" });`

AJAX Methods

Method	Description	Example
`load()`	Loads data from a server into an element	`$("#content").load("data.html");`
`$.get()`	Performs an HTTP GET request	`$.get("url", callback);`
`$.post()`	Performs an HTTP POST request	`$.post("url", { key: "value" }, callback);`
`$.ajax()`	Performs custom AJAX requests	`$.ajax({ url: "url", method: "GET" });`

Traversing Methods

Method	Description	Example
`parent()`	Selects the parent element	`$("#item").parent().addClass("parent");`
`children()`	Selects direct child elements	`$("#menu").children("li").css("color", "red");`
`siblings()`	Selects sibling elements	`$("#item").siblings().hide();`
`next()`	Selects the next sibling	`$("#item").next().css("font-weight", "bold");`
`prev()`	Selects the previous sibling	`$("#item").prev().css("color", "blue");`

jQuery Utility Functions

Method	Description	Example
`$.each()`	Iterates over elements or arrays	`$.each(array, function(index, value) {});`
`$.extend()`	Merges objects	`$.extend({}, obj1, obj2);`
`$.isEmptyObject()`	Checks if an object is empty	`$.isEmptyObject({});`
`$.trim()`	Removes whitespace from a string	`$.trim(" Hello ");`

Conclusion

This comprehensive jQuery reference serves as a quick lookup for syntax, usage, and examples of jQuery methods. Bookmark this page for your development needs, and explore more detailed tutorials and examples at The Coding College.

Leave a Comment Cancel reply