jQuery: pseudo selettori

Anche jQuery ha la possibilità di usare pseudo selettori per selezionare elementi della nostra pagina sui quali poi operare.

Prepariamo un piccolo form per avere il materiale su cui lavorare:

<form id="info" name="info" action="#" method="post">
<input type="text" id="campo1" name="campo1"><br>
<input type="checkbox" id="campo2" name="campo2"><br>
<input type="radio" id="campo3" name="campo3"><br>
<input type="submit" id="campo4" name="campo4"><br>
</form>

Sul campo di testo e sul submit lavoreremo sul css, li selezioneremo con :text che è l’equivalente sintentico di quello che in css è input[type=”text”]

e nel secondo caso con submit, il resto è noto:

$(':text').css({'border-color':'#FF0000'})
$(':submit').css({'border-color':'#FF0000'})

Per quanto riguarda invece il il radio e il checkbox: dopo averli selezionati faremo in modo che siano selezionati di default:

$(':radio').prop({'checked':'true'})
$(':checkbox').prop({'checked':'true'})

Il metodo prop() è il metodo specifico che permette di accedere al vaue di una proproietà così come attr() lavora con gli attributi

L’esempio

" data-image="" data-button="">