JQuery Selectors and Events
Wildcard Selector (*):
This selector targets all elements present on the page. It's a powerful way to access everything in the HTML structure.
Example:
$("*").css("border", "1px solid red");
Element Selector (element):
With the element selector, you can select all elements of a specific type, such as paragraphs (`<p>`).
Example:
$("p").addClass("highlight");
ID Selector (#id):
The ID selector targets a single element by its unique ID attribute.
Example:
$("#myElement").fadeOut();
Class Selector (.class):
You can select all elements with a certain class using the class selector.
Example:
$(".myClass").hide();Hidden Selector (:hidden):
This selector captures all elements that are currently hidden in the document.
Example:
$(":hidden").show();Visible Selector (:visible):
On the other hand, the visible selector grabs all elements that are currently visible on the page.
Example:
$(":visible").addClass("highlight");Parent > Child Selector (parent > child):
This selector targets direct child elements within a specified parent element.
Example:
$("#parentElement > .childClass").css("background-color", "yellow");Ancestor-Descendant Selector (ancestor descendant):
The ancestor-descendant selector selects descendant elements within a specific ancestor element.
Example:
$(".ancestorClass p").css("font-weight", "bold");Contains Selector (:contains()):
This selector helps you find elements that contain specific text content.
Example:
$("p:contains('Example')").addClass("highlight");First Selector (:first):
With the first selector, you can target the very first element among a set of matched elements.
Example:
$("li:first").addClass("highlight");Last Selector (:last):
Similarly, the last selector focuses on the last element within a set of matched elements.
Example:
$("div:last").addClass("highlight");Even Selector (:even):
This selector lets you select elements with even indices within a set.
Example:
$("table tr:even").addClass("even-row");Odd Selector (:odd):
Conversely, the odd selector targets elements with odd indices within a set.
Example:
$("ul li:odd").addClass("odd-item");Input Selector (:input):
The input selector captures various types of input elements like textboxes, text areas, selects, and buttons.
Example:
$(":input").attr("disabled", true);Button Selector (:button):
This selector is specialized for selecting all button elements.
Example:
$(":button").addClass("btn-styling");Parent Selector (:parent):
This selector is used to find elements that have at least one child element.
Example:
$(".has-children:parent").addClass("parent-element");Animated Selector (:animated):
The animated selector targets elements that are currently undergoing animation.
Example:
$(":animated").stop();First Child Selector (:first-child):
Select elements that are the first child of their parent element.
Example:
$("li:first-child").addClass("first-child");Nth Child Selector (:nth-child()):
This selector allows you to select elements based on their position in relation to their parent.
Example:
$("ul li:nth-child(3)").addClass("third-child");Not Equal Selector ([name!="value"]):
This selector helps to target elements that do not match a specific value.
Example:
$("input[type!='checkbox']").addClass("not-checkbox");Sibling Selector (prev ~ siblings):
With this selector, you can select sibling elements that come after a specified element.
Example:
$("#prevElement ~ .siblings").addClass("selected-siblings");Adjacent Selector (prev + next):
The adjacent selector picks the element immediately preceded by the specified element.
Example:
$(".prev + .next").addClass("adjacent-selected");.error():
Attaches a function to run when an error event occurs.
Example:
$("img").error(function() {
$(this).hide();
});.resize():
Triggers when the browser window changes its size.
Example:
$(window).resize(function() {
console.log("Window resized");
});.scroll():
Used to scroll in a specified element.
Example:
$("#scrollableDiv").scroll(function() {
console.log("Scrolled");
});.ready():
Loads the whole page and then executes the rest of the code.
Example:
$(document).ready(function() {
console.log("Document is ready");
});.unload():
Performs an unload event when the user navigates away from the current webpage.
Example:
$(window).unload(function() {
console.log("Page is unloading");
});.load():
Loads data from the server and returns it to the selected element.
Example:
$("#result").load("data.html", function() {
console.log("Data loaded successfully");
}); .bind():
Attaches event handlers to selected elements.
Example:
$("button").bind("click", function() {
console.log("Button clicked");
});.trigger():
Triggers a specified event handler on the selected element.
Example:
$("button").click(function() {
console.log("Button clicked");
});
$("button").trigger("click");.triggerHandler():
Used to trigger a specified event for the selected element without executing its default behavior.
Example:
$("a").click(function(event) {
event.preventDefault();
console.log("Link clicked");
});
$("a").triggerHandler("click");.on():
Attaches one or more event handlers for the selected elements and child elements.
Example:
$("ul").on("click", "li", function() {
console.log("List item clicked");
});.off():
Removes event handlers attached with the on() method.
Example:
$("button").on("click", function() {
console.log("Button clicked");
});
$("button").off("click");.one():
Attaches one or more event handlers to the selected element, executed only once.
Example:
$("input").one("focus", function() {
console.log("Input field focused");
});.unbind():
Used to remove any selected event handlers.
Example:
$("button").bind("click", function() {
console.log("Button clicked");
});
$("button").unbind("click");.blur():
Used to remove focus from the selected element.
Example:
$("input").blur(function() {
console.log("Input field lost focus");
});.focus():
Used to focus on an element.
Example:
$("input").focus(function() {
console.log("Input field focused");
});.focusin():
Focuses on the selected element.
Example:
$("input").focusin(function() {
console.log("Input field focused in");
});.focusout():
Removes focus from the selected element.
Example:
$("input").focusout(function() {
console.log("Input field focused out");
});.change():
Used to detect the change in value of input fields.
Example:
$("input").change(function() {
console.log("Input value changed");
});.keydown():
Triggers the keydown event whenever the user presses a key on the keyboard.
Example:
$("input").keydown(function(event) {
console.log("Key pressed: " + event.key);
});.keypress():
Triggers the keypress event whenever the browser registers a keyboard input.
Example:
$("input").keypress(function(event) {
console.log("Key pressed: " + event.key);
}).keyup():
Used to trigger the keyup event whenever the user releases a key from the keyboard.
Example:
$("input").keyup(function(event) {
console.log("Key released: " + event.key);
});.click():
Starts the click event or attaches a function to run when a click event occurs.
Example:
$("button").click(function() {
console.log("Button clicked");
});.hover():
Specifies functions to start when the mouse pointer moves over the selected element.
Example:
$("div").hover(function() {
console.log("Mouse entered");
}, function() {
console.log("Mouse exited");
});.toggle():
Checks the visibility of selected elements to toggle.
Example:
$("button").click(function() {
$("p").toggle();
});.mouseover():
Works when the mouse pointer moves over the selected elements.
Example:
$("div").mouseover(function() {
console.log("Mouse over the div");
});event.stopPropagation():
Used to stop the event propagation to parent elements.
Example:
$("button").click(function(event) {
event.stopPropagation();
console.log("Button clicked, event propagation stopped");
});event.preventDefault():
Used to stop the default action of the selected element from occurring.
Example:
$("a").click(function(event) {
event.preventDefault();
console.log("Link clicked, default action prevented");
});