JQuery total: selectores JQuery

Los selectores son un dispositivo básico en jQuery y nos sirven para seleccionar elementos en nuestra pagina web, los selectores a pesar de ser tan básicos es de lo mas útil y funcional en nuestro querido JQuery.

Para hacer uso de los selectores deberemos usar la función dolar de JQuery y pasarse como parametro el selector que nos haga falta de siguiente forma:


$(selector)

Como usar los selectores basicos de JQuery

Selector de etiquetas, selecciona todos los parrafos


$("p")

selector de id, selecciona el que tenga este atrib id="ide"

$("#ide")

selector de clase, selecciona los atrib class="clase"

$(".clase")

selector asterisco, selecciona todos los elementos

$("*")

varios selectores
selecciona los elementos de un div y anchor

$("div,a")

selecciona los elementos que tienen cla1 o cla2

$(".cla1.cla2")

selecciona los elementos que tienen id="ide" los elementos con class="cla1" y las listas li

$("#ide,.cla1,li)

Y que mejor para aprender que un ejemplo los selectores básicos de JQuery

inicio.html


<html>

  <head>

  <title>Problema</title>

  <script src="http://www.google.com/jsapi"></script>

  <script>google.load("jquery", "1.4.2");</script>

  <script type="text/javascript" src="mfunciones2.js"></script>

  </head>

  <body>

  <h3 id="titulo">Presiona este texto</h1>

  <input type="button" id="boton" value="Pulsa el botonzico">

  <div id="divboton"></div><br>

  <table border="1" cellspacing="20px">

  <tr>

  <td>Presiona en la celda de la tabla</td>

  </tr>

  </table>

  <ul id="lista">

  <li>lista numero 1</li>

  <li>lista numero 2</li>

  <li>lista numero 3</li>

  <li>lista numero 4</li>

  <li>lista numero 5</li>

  </ul>

  <p>Deportes preferidos subrayados solo clicka en las lineas <br>

  <span class="subrayado">wushu</span>, boxeo, <span class="subrayado">spinning</span>, hierros</p>

  <input type="Text" name="campotexto" id="campotexto">

  </body>

  </html>

mfunciones2.js


$(document).ready(eventInit);

function eventInit()

  {

  //Carga estilos css 

  var x;

  x=$("#titulo");

  x.css("color","#ff0000");

  x.css("background-color","#ffffff");

  x.css("font-family","Verdana");


 //crea los eventos click 

  var x=$("#boton");

  x.click(buttonPress);

 var x=$("#titulo");

  x.click(presionaTitulo);

  

  var x=$("table");

  x.click(pressFila);

 var x=$("p");

  x.click(subraya);

}

function buttonPress()

  { 

  //seleccion por id

  var x=$("#divboton");

  if(x.text() == ""){x.text("Se presioño el botón");}

  else{x.text("");}

  

  //tambien hace la seleccion utilizando CSS

  var x=$("#lista li");

  x.show();

  }

function presionaTitulo()

  {

  //seleccion por id

  var x=$("#divboton");

  if(x.text() == ""){x.text("Se presioño el titulo");}

  else{x.text("");}

  

  //tambien hace la seleccion utilizando CSS

  var x=$("#lista li");

  x.hide();

  }


function pressFila()

  {

  //seleccion por tipo (seria table>

  var x=$(this);

  x.css("background-color","#FF0000");

  

  //seleccion por tipo 

  var x=$("tr");

  x.css("background-color","#FFff00");

}

function subraya()

  {

  var x=$(".subrayado");

  x.css("background-color","ff0000");

  alert("Campo de texto - " + $("#campotexto").attr("value"));

  }

JQuery total

martes, 25 de mayo de 2010

Selectores basicos JQuery