7.00. Kiválasztók - selectorok

A jQuery által biztosított műveleteket a HTML oldal egy vagy több tag-jére tudjuk végrehajtatni. Ehhez úgynevezett szelektorokat használunk. A szelektorok lehetnek olyan változók, amelyek egy vagy több HTML taget reprezentálnak, illetve használhatjuk a CSS-ben korábban megismert szintaktikát a weboldal egyes tag-jainak az azonosítására.

A szelektorok általános alakja:

$(változó, class, egyéb jelölő).muvelet();

Az alábbi példá:

Egy HTML tag a szelektor: : $("div").css('border','red 1px solid'); - az összes div tag piros kerettel lesz bekeretezve..
ID-vel azonosított HTML tag-ek szelektora: $("#id_ertek").css('position', 'absolute'); - A megadott elem pozíciója abszolút lesz az oldalon.
Egy class-szal azonosított tag-ek csoportja - $(".osztaly").
Bizonyos tulajdonságokkal rendelkező html-tag-ek - $("input[type='text']") - ebben a példában olyan input tag-eket választottunk, amelyeknek a típusa "text".
Felsorolhatjuk vesszővel elválasztva a különböző típusú szelektorokat: $( "div.myClass, ul.people" );
Pszeudo szelektorok is használhatók:

$( "a.external:first" );
$( "tr:odd" );
 
// Minden input jellegű mező választása a form-on.
$( "#myForm :input" );
//A látható div
$( "div:visible" );
 
// Mindegyik kivéve az első három div-et. .
$( "div:gt(2)" );
 
// minden éppen animált div
$( "div:animated" );

Ha arra vagy kíváncsi, hogy egy szelektor egyáltalán talált-e megfelelő típusú tag-et akkor az alábbit kell csinálni:

// Leteszteljük, hogy a szelektor eredménye legalább 1 hosszúságú sokaságot adott vissza!
if ( $( "div.foo" ).length ) {
    ...
}

A szelektorok eredményét menthetjük változókba:

var divs = $( "div" );

A szelektorok által kiválasztott elemeket tovább lehet logikai elemekkel szelektálni:

// A szelektálás ófinomítása
$( "div.foo" ).has( "p" );         // csak azok a div.foo elemek, amelyekben van <p> tag
$( "h1" ).not( ".bar" );           // Azok a H1 elemek, amelyeknek a formázása nem bar osztályú
$( "ul li" ).filter( ".current" ); // sorrend nélküli felsorolás, aktuális class-szal.
$( "ul li" ).first();              // egy sorrend nélküli listából az első!
$( "ul li" ).eq( 5 );              // a 6.

A FORM-oknál használható szelektálás

A jQuery rendelkezésre bocsát pszeudo szelektorokat.

: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 <select> elements (for <select> elements only, use the :selected selector):

$( "form :checked" );

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

:disabled

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

$( "form :disabled" );

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.

:enabled

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

$( "form :enabled" );

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.

:input

Using the :input selector selects all <input>, <textarea>, <select>, and <button> elements:

$( "form :input" );

:selected

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

$( "form :selected" );

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.

Típus szerint választani

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

    :password
    :reset
    :radio
    :text
    :submit
    :checkbox
    :button
    :image
    :file

Néhány példa szelektorokra

// Az oldal összes <H1> tagjének a tartalma a 'Hello World!' lesz
$( "H1" ).html("Hello World!");

// A<div id="name">...</div> tartalma kerül a változóba
var  name = $("div#name").html();

//Az input elemekhez, amelyeknek van .bevitel osztály hozzárendelve adjunk egy új formázási tulajdonságot.
$('input.bevitel").addClass('figyelem');

Természetesen ez csak néhány példa, de ezek a példák is érzékeltetik a lényeget.

Összefoglalva

A szelektorokkal egy weboldalon kiválaszthatunk egy vagy több tag-et
A szelektorok nagyjából úgy működnek, mint a css esetén a jelölők, tehát tag-re, class, id, és pszeudo tulajdonságokra választhatunk
A kiválasztott elemeket be tudjuk tenni egy javascript változóba. Ha több elem lesz, akkor a változó egy tömböt ad
A szelektor eredményén további műveleteket tudunk végrehajtani, tulajdonságait átállítani (setter függvényekkel)
A szelektor által kiválasztott elemek tulajdonságait le tudjuk kérdezni (getter függvények)