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");
});