Jquery this css selector

link Saving Selections

jQuery doesn't cache elements for you. If you've made a selection that you might need to make again, you should save the selection in a variable rather than making the selection repeatedly.

Once the selection is stored in a variable, you can call jQuery methods on the variable just like you would have called them on the original selection.

A selection only fetches the elements that are on the page at the time the selection is made. If elements are added to the page later, you'll have to repeat the selection or otherwise add them to the selection stored in the variable. Stored selections don't magically update when the DOM changes.

link Refining & Filtering Selections

Sometimes the selection contains more than what you're after. jQuery offers several methods for refining and filtering selections.

// Refining selections.
$( "div.foo" ).has( "p" ); // div.foo elements that contain 
tags
$( "h1" ).not( ".bar" ); // h1 elements that don't have a class of bar
$( "ul li" ).filter( ".current" ); // unordered list items with class of current
$( "ul li" ).first(); // just the first unordered list item
$( "ul li" ).eq( 5 ); // the sixth

link Selecting Form Elements

jQuery offers several pseudo-selectors that help find elements in forms. These are especially helpful because it can be difficult to distinguish between form elements based on their state or type using standard CSS selectors.

link :checked

Not to be confused with :checkbox, :checked targets checked checkboxes, but keep in mind that this selector works also for checked radio buttons, and elements (for elements only, use the :selected selector):

The :checked pseudo-selector works when used with checkboxes, radio buttons and selects.

link :disabled

Using the :disabled pseudo-selector targets any elements with the disabled attribute:

In order to get the best performance using :disabled , first select elements with a standard jQuery selector, then use .filter( ":disabled" ) , or precede the pseudo-selector with a tag name or some other selector.

link :enabled

Basically the inverse of the :disabled pseudo-selector, the :enabled pseudo-selector targets any elements that do not have a disabled attribute:

In order to get the best performance using :enabled , first select elements with a standard jQuery selector, then use .filter( ":enabled" ) , or precede the pseudo-selector with a tag name or some other selector.

link :input

Using the :input selector selects all , , , and elements:

link :selected

Using the :selected pseudo-selector targets any selected items in elements:

In order to get the best performance using :selected , first select elements with a standard jQuery selector, then use .filter( ":selected" ) , or precede the pseudo-selector with a tag name or some other selector.

link Selecting by type

jQuery provides pseudo selectors to select form-specific elements according to their type:

For all of these there are side notes about performance, so be sure to check out the API docs for more in-depth information.

Last Updated

Suggestions, Problems, Feedback?

Chapters

Books

Copyright 2023 OpenJS Foundation and jQuery contributors. All rights reserved. See jQuery License for more information. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them. OpenJS Foundation Terms of Use, Privacy, and Cookie Policies also apply. Web hosting by Digital Ocean | CDN by StackPath

Источник

Learn and Understand jQuery this “$(this)” Selector with Examples and Codes

The jQuery this selector is widely used and many times people get confuse to understand it fully. Therefore I decided to write this tutorial which explains the usage of $(this) selector with some easiest examples.

So whatever be the event/method – like click, hover, each, blur . You can refer to the DOM element with $(this) .

jQuery this – Click Example

I have some li tags. I can change the color of the li which is clicked. Here I will use the jQuery this selector to get my clicked li tag.

jQuery this – .each() example

Now I will use the jQuery this selector with .each() method. I will use change the color of elements having class called myclass .

jQuery this – .append() example

I have a button and on it’s click event I will append a text to it. I will use $(this) to append the text.

Click $("button").click(function () < $(this).append("the button") >);

jQuery this – .focus() example

Here I have a textbox and on it’s focus event I will change its border using jQuery this selector.

The below code does this work:

 $("input").focus(function () < $(this).css("border", "4px dashed yellow"); >); $(" input").blur(function () < $(this).css("border", "none"); >);

jQuery this – .hover() example

Now I will explain how to use $(this) with jQuery hover event.

I have a span element. When mouse hovers over it the text-decoration is underline and when mouse moves away from it then text-decoration is changed to none.

Hover the mouse over me $("span").hover(function () < $(this).css("text-decoration", "underline"); >, function () < $(this).css("text-decoration", "none"); >);

Источник