Podstawy korzystania z selektorów jQuery cz.1: class, id
Autor: JDStar o niedziela 12. Październik 2008
Na początek kilka prostych przykładów jak dostać się do poszczególnych obiektów strony. Posłużę się elementami span, ale równie dobrze mogą to być inne.
Kod HTML, który jest w przykładzie:
1 2 3 4 5 6 7 8 9 10 11 12 13 | <span class="c1">element class="c1"</span> <span class="c2">element class="c2"</span> <span class="d2">element class="d2"</span> <span class="c1 c2">element class="c1 c2"</span> <span id="idc1" class="c1">element class="c1" id="idc1"</span> <span id="idc2" class="c2">element class="c2" id="idc2"</span> <a class="jq" rel="span.c1" rev="red" href="#">Elementy z atrybutem class="c1"</a> <a class="jq" rel="span.c2" rev="green" href="#">Elementy z atrybutem class="c2"</a> <a class="jq" rel="span.d2" rev="pink" href="#">Elementy z atrybutem class="d2"</a> <a class="jq" rel="span.c1, span.c2" rev="blue" href="#">Elementy z atrybutem class="c1" lub c2</a> <a class="jq" rel="span#idc2" rev="orange" href="#">Elementy z atrybutem id="idc2"</a> <a class="jq" rel="span.c1, span.c2, span.d2" rev="black" href="#">Wszystkie elementy "wyzeruj"</a> |
Kod JS odpowiedzialny za selekcję:
1 2 3 4 5 6 7 8 9 | <script type="text/javascript"><!-- var $j = jQuery; $j(document).ready(function(){ $j("a.jq").click(function () { $j(' '+$j(this).attr("rel")).css('color',$j(this).attr('rev')); return false; }); }); // --></script> |
Dla potrzeb silnika WordPress aby kod jQuery działał poprawnie konieczny jest mały trick – var $j = jQuery; – niestety standardowe wywołanie $() nie działa.
Poniżej działający przykład (zmiana koloru tekstu na wartość z atrybutu rev linku
element class=”c1″
element class=”c2″
element class=”d2″
element class=”c1 c2″
element class=”c1″ id=”idc1″
element class=”c2″ id=”idc2″
Elementy z atrybutem class=”c1″
Elementy z atrybutem class=”c2″
Elementy z atrybutem class=”d2″
Elementy z atrybutem class=”c1″ lub c2
Elementy z atrybutem id=”idc2″
Wszystkie elementy „wyzeruj”
Jeśli ktoś ma pytania o bardziej skomplikowane przykłady – proszę w komentarzu zostawić info
