JQuery total: mayo 2010

martes, 25 de mayo de 2010

Selectores basicos 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"));

  }

viernes, 21 de mayo de 2010

Copiar texto seleccionado

Esto es JavaScript y tienes que seleccionar el texto que mas te guste de la venta y pulsar sobre el boton para que lo copie en la caja, puede ser util para saber el textu usuario esta seleccionado con el raton, este seria el codigo:


<script language=javascript>
function getSelText()
{
    var txt = '';
     if (window.getSelection)
    {
        txt = window.getSelection();
             }
    else if (document.getSelection)
    {
        txt = document.getSelection();
            }
    else if (document.selection)
    {
        txt = document.selection.createRange().text;
            }
    else return;
document.aform.selectedtext.value =  txt;
}
</script>

<form name=aform >
  <textarea name="selectedtext" rows="5" cols="20"></textarea>
  </form>

Que es esto del JQuery

Si has llegado aquí es por que te interesa el jQuery y quieres saber de que va, bueno primeramente saber JQuery es una librería de Javascript con la que de una forma rápida y concisa nos simplifica el desarrollo de animaciones, interacciones con Ajax, controlar eventos web y demás, en definitiva esta librería esta diseñada para cambiar la forma de programar con JavaScript.

Mi intención es ir haciendo ejemplos e ir poniendo anotaciones de códigos para ayudar en la creación de sitios o partes de sitios que se utilice JQuery, empezando con las cosas mas básicas e ir poco a poco avanzado con contenidos mas chungos. Y como el tema teórico es una castaña pues como que en gran parte me lo voy a saltar por que yo lo valgo!!

Para poder usar esta librería claro esta que tendremos que bajarla y su dirección oficial es akin JQuery donde aparte de la librería encontraremos muy buenos ejemplos, que leches si es son los creadores tu dirás!!!

Y por ultimo hacer mención rápida a las características mas destacarles que son:

Que tiene muchas funciones para animar los contenidos de las web de una manera sencilla
Control de los eventos
Que chusca en todos los navegadores
Con Ajax va de coña
Y que como soy muy vago me ahorra muchas lineas pikadas ;D