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"));
}
No hay comentarios:
Publicar un comentario