1.3.1.1. fejezet, Selectors

Beküldte pzoli - 2013, április 26 - 5:56du

DOM elemek kiválasztása a DOM fából

Element selector

Tag néven alapuló kiválasztás:

$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});

(minden button elem kiválasztása)

#id selector

Azonosító alapú választás:

$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});

.class selector

Osztálynév alapú választás:

$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});

minden class értékre - akár szóközzel elválasztott - kiválasztására érvényes. Kiválasztott elem alatt szereplő elemek kiválasztásakor a $("selector",root) formát lehet használni, ahol a root lehet az előzőleg kiválasztott elem:

$(".start").attr('title', function() {
 return $('.ui-button-text',this).html();
});

Egyéb változatok:

Szintaxis Leírás
$("*") Összes elem kiválasztása
$(this) Aktuális HTML elem kiválasztása (subselect)
$("p.intro") minden <p> elem class="intro" értékkel
$("p:first") Az első <p> elem
$("ul li:first") Az első <li> eleme az első <ul> elemnek
$("ul li:first-child") Az első <li> eleme minden <ul> elemnek
$("[href]") Minden elem aminek href attribútuma van
$("a[target='_blank']") Minden <a> elem aminek a target attribútum értéke "_blank"
$("a[target!='_blank']") Minden <a> elem aminek a target attribútum értéke NEM "_blank"
$(":button") Minden <button> elem és minden <input> elem aminek type="button" értéke van
$("tr:even") Minden páros <tr> elem
$("tr:odd") Minden páratlan <tr> elem

További kipróbálható kijelölők: a http://www.w3schools.com oldalán.