Jquery select html elements

jQuery Selectors

Use our jQuery Selector Tester to demonstrate the different selectors.

Источник

jQuery Selectors

jQuery selectors are one of the most important parts of the jQuery library.

jQuery Selectors

jQuery selectors allow you to select and manipulate HTML element(s).

jQuery selectors are used to «find» (or select) HTML elements based on their name, id, classes, types, attributes, values of attributes and much more. It’s based on the existing CSS Selectors, and in addition, it has some own custom selectors.

All selectors in jQuery start with the dollar sign and parentheses: $().

The element Selector

The jQuery element selector selects elements based on the element name.

You can select all

elements on a page like this:

When a user clicks on a button, all

elements will be hidden:

Example

The #id Selector

The jQuery #id selector uses the id attribute of an HTML tag to find the specific element.

An id should be unique within a page, so you should use the #id selector when you want to find a single, unique element.

To find an element with a specific id, write a hash character, followed by the id of the HTML element:

When a user clicks on a button, the element with will be hidden:

Example

The .class Selector

The jQuery .class selector finds elements with a specific class.

To find elements with a specific class, write a period character, followed by the name of the class:

When a user clicks on a button, the elements with will be hidden:

Example

More Examples of jQuery Selectors

Use our jQuery Selector Tester to demonstrate the different selectors.

For a complete reference of all the jQuery selectors, please go to our jQuery Selectors Reference.

Functions In a Separate File

If your website contains a lot of pages, and you want your jQuery functions to be easy to maintain, you can put your jQuery functions in a separate .js file.

When we demonstrate jQuery in this tutorial, the functions are added directly into the section. However, sometimes it is preferable to place them in a separate file, like this (use the src attribute to refer to the .js file):

Источник

Selecting Elements

The most basic concept of jQuery is to «select some elements and do something with them.» jQuery supports most CSS3 selectors, as well as some non-standard selectors. For a complete selector reference, visit the Selectors documentation on api.jquery.com.

link Selecting Elements by ID

$( "#myId" ); // Note IDs must be unique per page.

link Selecting Elements by Class Name

link Selecting Elements by Attribute

link Selecting Elements by Compound CSS Selector

link Selecting Elements with a Comma-separated List of Selectors

link Pseudo-Selectors

$( "a.external:first" );
$( "tr:odd" );
 
// Select all input-like elements in a form (more on this below).
$( "#myForm :input" );
$( "div:visible" );
 
// All except the first three divs.
$( "div:gt(2)" );
 
// All currently animated divs.
$( "div:animated" );

Note: When using the :visible and :hidden pseudo-selectors, jQuery tests the actual visibility of the element, not its CSS visibility or display properties. jQuery looks to see if the element’s physical height and width on the page are both greater than zero.

Elements that have not been added to the DOM will always be considered hidden, even if the CSS that would affect them would render them visible. See the Manipulating Elements section to learn how to create and add elements to the DOM.

link Choosing Selectors

Choosing good selectors is one way to improve JavaScript’s performance. Too much specificity can be a bad thing. A selector such as #myTable thead tr th.special is overkill if a selector such as #myTable th.special will get the job done.

link Does My Selection Contain Any Elements?

Once you’ve made a selection, you’ll often want to know whether you have anything to work with. A common mistake is to use:

This won’t work. When a selection is made using $() , an object is always returned, and objects always evaluate to true . Even if the selection doesn’t contain any elements, the code inside the if statement will still run.

The best way to determine if there are any elements is to test the selection’s .length property, which tells you how many elements were selected. If the answer is 0, the .length property will evaluate to false when used as a boolean value:

// Testing whether a selection contains elements.
if ( $( "div.foo" ).length ) 
 . 
>

// 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