Selektory jQuery

Jak już było to napisane w poprzednim akapicie jeżeli coś ma się wykonać to najpierw musimy wskazać lub inaczej odwołać się do obiektu na którym ma zostać wykonana dana czynność. Obiektami są na przykład znaczniki, pola formularza, przyciski, zdjęcia, itp. Następnie trzeba ustalić w jakich okolicznościach ma się wykonywać instrukcje na obiekcie. Czyli inaczej mówiąc jakiej użyć metody. Wybór mamy duży a wszystko zależy od naszych potrzeb. Jeżeli chcemy aby po naciśnięciu przycisku pojawił się na przykład obrazek. Naszym obiektem będzie zapewne przycisk czyli znacznik input a nasza metodą będzie „click”

Jeżeli chcemy wskazać czyli odwołać się do danego obiektu musimy znać jego identyfikator. Identyfikator znacznika ustala się przez zastosowaniu atrybutu „id”. Nie jest to jedyny sposób odwoływania się do znaczników. Możemy również odwołać się poprzez classe lub nazwę. Trzeba pamiętać że atrybut id w znaczniku musi być unikalny na całą stronę a atrybut klasy już nie. Dlatego kiedy mamy klika znaczników z tą sama klasą skrypt będzie wykonywał akcje na wszystkich obiektach z ta klasą .
W przykładzie poniżej mamy odwołanie do znacznika „button”. Co się jednak stanie kiedy takich znaczników będzie więcej? Skrypt będzie działał po wciśnięciu dowolnego znacznika „button”.
<!doctype html>
<html>
  <head>
   <title>Tytuł strony</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

<script type="text/javascript">
  $(document).ready(function() {
     $("button").click(function() {
       alert("Działa!!!");
     });
  });
</script>

</head>
<body>
    <button id=”IDbutton” class=”classButton” name=”nameButton”>Kliknij</button>
</body>
</html>

Mamy jednak inne sposoby odwołania się do znaczników:

Po identyfikatorze id

$("#IDbutton").click(function() {
  alert("Działa!!!");
});

Po klasie class

$(".classButton ").click(function() {
  alert("Działa!!!");
});

Po nazwie

$("button[name=nameButton]").click(function() {
   alert("Działa!!!");
});

Możemy również zaznaczyć wiele znaczników na raz

$('#IDbutton, .classButton, button[name=nameButton]').click(function(){
   alert("Działa!!!");
});

To tylko trzy najważniejsze odwołania jednak istnieje ich bardzo wiele. Można o nich poczytać na stronie http://api.jquery.com/category/selectors/

  1. Maciek

    Spoko informację, ale zastanawiam się czy można odwołać się…. Pokaże to na przykładzie który nie działa:

    $(document).ready(function() {
    $(„div1 > .rozwin”).click(function() {
    alert(„Kliknales w rozwin w Divie nr 1!!!”);
    });

    $(„div2 > .rozwin”).click(function() {
    alert(„A teraz kliknales w ROZWIN w divie nr 2 ;)”);
    });

    });

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Connect with Facebook

Możesz użyć następujących tagów oraz atrybutów HTML-a: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>