JQuery Selectors and Events

Level : Beginner
Mentor: Shailendra Chauhan
Duration : 00:02:00

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

Self-paced Membership
  • 22+ Video Courses
  • 800+ Hands-On Labs
  • 400+ Quick Notes
  • 55+ Skill Tests
  • 45+ Interview Q&A Courses
  • 10+ Real-world Projects
  • Career Coaching Sessions
  • Email Support
Upto 60% OFF
Know More
Still have some questions? Let's discuss.
CONTACT US
Accept cookies & close this