domingo, 22 de marzo de 2015

Basic jQuery Slider

Ultimamente he estado viendo demasiadas librerias, y he estado viendo un poco su utilizacion, esta libreria llamada Basic jQuery Slider, es una libreria muy simple de usar y personalizar, de manera que puede ser usada en nuestros proyectos sin mayor problema, ademas es totalmente compatible con HTML5 BoilerPlate y Bootstrap que he presentado anteriormente en el BLOG.



Les dejo su enlace a la descarga:

http://www.basic-slider.com/


Es muy facil de usar como dije, ademas en su descarga contiene archivos de ejemplo para su mejor compresion.

martes, 17 de marzo de 2015

[Parte 5]jQuery

jQuery - desplazandose en el DOM

jQuery es una herramienta de muy gran alcance la cual proporciona una gran variedad de metodos para desplazarse en el DOM para ayudarnos a seleccionar elementos del documento al azar asi como en metodo secuencial. La mayor parte de los metodos de desplazamiento del DOM no modifican el objeto jQuery y ellos se utilizan para filtrar los elementos a partir de un documento basado en condiciones dadas.

Buscando elementos por indice

Considere la posibilidad de un simple documento con el siguiente contenido HTML:

<html>
<head>
   <title>Titulo</title>
</head>
<body>
    <div>
      <li>Elemento de la lista 1</li>
      <li>Elemento de la lista 2</li>
      <li>Elemento de la lista 3</li>
      <li>Elemento de la lista 4</li>
      <li>Elemento de la lista 5</li>
      <li>Elemento de la lista 6</li>
    </div>
</body>
</html>



* Cada lista tiene su propio indice y se puede localizar utilizando directamente el metodo eq(indice) del siguiente ejemplo. Cada elemento hijo comienza su indice desde 0, por lo tanto la lista del elemento 2 se accede mediante el uso de $("li").eq(1) y asi sucesivamente. Ejemplo: 
A continuacion se presenta un ejemplo sencillo que añade color al tercer elemento de la lista:

<html>
<head>
<title>Titulo</title>
   <script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
   <script type="text/javascript">
         $(document).ready(function(){
            $("li").eq(2).addClass("seleccionado");
         });
   </script>
   <style type="text/css">
      .seleccionado { color: red; }
   </style>
</head>
<body>
   <div>
      <li>Elemento de la lista 1</li>
      <li>Elemento de la lista 2</li>
      <li>Elemento de la lista 3</li>
      <li>Elemento de la lista 4</li>
      <li>Elemento de la lista 5</li>
      <li>Elemento de la lista 6</li>
   </div>
</body>
</html>


Filtrado de elementos

El metodo filter(selector) se puede utilizar para filtrar todos los elementos del conjunto que coincidan con el selector especificado. El selector puede ser escrito utilizando cualquier sintaxis del selector. Ejemplo:
A continuacion se presenta un ejemplo sencillo que aplica color a las listas con la clase .media:

<html>
<head>
<title>Titulo</title>
   <script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
   <script type="text/javascript">
         $(document).ready(function(){
            $("li").filter(".media").addClass("seleccionado");
         });
   </script>
   <style type="text/css">
      .seleccionado { color: red; }
   </style>
</head>
<body>
   <div>
      <li class="arriba">Elemento de la lista 1</li>
      <li class="arriba">Elemento de la lista 2</li>
      <li class="media">Elemento de la lista 3</li>
      <li class="media">Elemento de la lista 4</li>
      <li class="abajo">Elemento de la lista 5</li>
      <li class="abajo">Elemento de la lista 6</li>
   </div>
</body>
</html>


Localizacion de elementos descendientes

El metodo find(selector) se puede utilizar para localizar todos los elementos descendientes de un tipo en particular de elementos. El selector puede ser escrito utilizando cualquier sintaxis de selector. Ejemplo:
A continuacion se presenta un ejemplo que selecciona todos los elementos <span> disponibles dentro de los diferentes elementos <p>:

<html>
<head>
<title>Titulo</title>
   <script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
   <script type="text/javascript">
         $(document).ready(function(){
            $("p").find("span").addClass("seleccionado");
         });
   </script>
   <style type="text/css">
      .seleccionado { color: red; }
   </style>
</head>
<body>
   <div>
      <p>Este es el 1er parrafo y <span>ESTO ES ROJO</span></p>
      <p>Este es el 2do parrafo y <span>ESTO TAMBIEN ES ROJO</span></p>
   </div>
</body>
</html>


jQuery metodos de desplazamiento

La siguiente tabla enumera abajo metodos utiles que se pueden utilizar para filtrar los diversos elementos de una lista de elementos DOM:


+----------------------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| Selector             | Descripcion                                                                                                                                                                                                                                                                         |
+----------------------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| add(Selector)        | Añade mas elementos, que coincidan con el selector dado, al conjunto de elementos que ya coinciden. Ejemplo: $(".top").add(".middle").addClass("selected");                                                                                                                         |
+----------------------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| andSelf()            | Añade la seleccion anterior a la seleccion actual. Ejemplo: $("div").find("p").andSelf().addClass("border");                                                                                                                                                                        |
+----------------------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| children([selector]) | Obtener un conjunto de elementos que contengan todos los hijos inmediatos de cada uno del conjunto de elementos que coincidan.  Ejemplo: $("div").children(".selected").addClass("blue");                                                                                           |
+----------------------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| closest(selector)    | Obtiene un conjunto de elementos que contengan todos los hijos inmediatos unicos de cada uno de los elementos que coincidan en el conjunto. Ejemplo: $( document ).on( "click", function( event ) {,$( event.target ).closest( "li" ).toggleClass( "hilight" );});                  |
+----------------------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| contents()           | Busca todos los nodos secundarios dentro de los elementos coincidentes (incluyendo los nodos de texto), o el documento contenido, si el elemento es un iframe.Ejemplo: $( "#frameDemo" ).contents().find( "a" ).css( "background-color", "#BADA55" );                               |
+----------------------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| end()                | Revertir la mas reciente 'destructiva' operacion, cambiando el conjunto de elementos coincidentes a su estado anterior.  Ejemplo: $("p").find("span").css("border", "2px red solid");                                                                                               |
+----------------------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| find(selector)       | Busca los elementos descendientes que coinciden con los selectores especificados.  Ejemplo: $("p").find("span").addClass("selected");                                                                                                                                               |
+----------------------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| next([selector])     | Obtener un conjunto de elementos que contienen los unicos proximos hermanos de cada uno del conjunto de los elementos dados. Ejemplo: $("p").next(".selected").addClass("hilight");                                                                                                 |
+----------------------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| nextAll([selector])  | Encuentra todos los elementos hermanos despues del elemento actual. Ejemplo: $("div:first").nextAll().addClass("hilight");                                                                                                                                                          |
+----------------------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| offsetParent()       | Devuelve una coleccion jQuery con el padre posicionado de primer elemento coincidente. Ejemplo: $("p").offsetParent().addClass('hilight');                                                                                                                                          |
+----------------------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| parent([selector])   | Obtiene el padre directo de un elemento. Si se llama a un conjunto de elementos, el padre retorna un conjunto de elementos unicos directo al elemento padre.  Ejemplo: $("p").parent().addClass('hilight');                                                                         |
+----------------------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| parents([selector])  | Obtiene un conjunto de elementos que contiene los antepasados unicos del conjunto combinado de elementos (excepto por el elemento raiz). Ejemplo: var parentEls = $("p").parents(),.map(function () {,return this.tagName;,}).get().join(", ");,$("b").append("" + parentEls + ""); |
+----------------------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| prev([selector])     | Obtiene un conjunto de elementos que contiene los hermanos anteriores unicos de cada conjunto de elementos que coinciden.Ejemplo:,$("p").prev(".selected").addClass("hilight");                                                                                                     |
+----------------------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| prevAll([selector])  | Encuentra todos los elementos hermanos delante del elemento actual.,Ejemplo: $("div:last").prevAll().addClass("hilight");                                                                                                                                                           |
+----------------------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| siblings([selector]) | Obtener un conjunto de elementos que contengan todos los hermanos unicos de cada uno de un conjunto de elementos que coinciden.                                                                                                                                                     |
+----------------------+-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+ 
 
Hasta aqui esta parte. Si quieren entender mas de los ejemplos de la tabla anterior les recomiendo pasarse por la documentacion oficial de jQuery.

Esta parte ha sido traducida de TutorialsPoint.
 
 
 
 

domingo, 15 de marzo de 2015

Comprimir directorios completos de tu sitio web

Buenas hoy estaba escuchando musica y luego un amigo (NoVaTo) me hablo por Skype diciendome que si tenia algun script o shell que comprimiera toda la pagina web para bajarsela, entonces como no tenia me puse a buscar como hacerlo uno a mi manera... hasta que al final di con bola... pues nada mas les dejo el script par aque lo usen cuando quieran:


 <?php
// Si son demasiados archivos colocamos el tiempo limite en 0 (sin limite)
set_time_limit(0);
 /*
  @autor : Arthusu
  @fecha : 15/03/2015
  @descripcion : Compresor de todos los archivos del directorio
  @archivo : compresor.php
 */

 // definimos las variables (las podemos modificar segun sea nuestro caso)
 $nombre_del_archivo_comprimido = "comprimido.zip"; // el nombre del archivo a generar
 $ruta_relativa = ""; // el directorio que nos encontremos. Ejemplo: images/algo/ para generar un link correcto

 if(phpversion() >= "5.2.0"){ // verificamos que contengan la version correcta para crear archivos zip
  $zip = new ZipArchive(); // Creamos un nuevo objeto
  if($zip->open($nombre_del_archivo_comprimido,ZIPARCHIVE::CREATE) === TRUE){ // creamos un archivo
   $iterator = new RecursiveDirectoryIterator(__DIR__); // recorremos el directorio
   $recursiveIterator = new RecursiveIteratorIterator($iterator); // recorremos los directorios dentro de otros directorios y asi sucesivamente

   foreach($recursiveIterator as $entry){ // recorremos los archivos
     if(is_file($entry->getRealPath())){ // verificamos que sea archivo
      // debug
      //echo $entry->getRealPath()."\n";
         $zip->addFile($entry->getRealPath()); // lo agregamos al zip
        }
   }
   // mostramos un enlace con los archivos
   echo $zip->numFiles .' archivos comprimidos: <a href="http://'.strip_tags($_SERVER["HTTP_HOST"]. "/" . $ruta_relativa . $nombre_del_archivo_comprimido).'">Descargar Archivo</a>';
  }else{
   // si no se crea el archivo mostramos el error
   echo "Ha ocurrido un error: ".$zip->getStatusString();
  }
  // cerramos el archivo zip
  $zip->close();
 }else{
  // si la version no es correcta mostramos un mensaje
  echo "Su version de PHP debe ser 5.2.0 o superior";
 }
?>

El uso es bastante facil.

1.- Subir el archivo a la carpeta que quieras comprimir 
2.- Ejecutar el archivo en la url: ejemplo.com/compresor.php
3.- Te generara un link donde descargar el archivo

Hay dos variables que puedes modificar dentro del archivo:

$ruta_relativa - Esta variable la modificas en caso de que te encuentres en una ruta relativa en alguna carpeta de la web, ejemplo: jquery/imagenes/, con eso nos generaria un link como el siguiente:  ejemplo.com/jquery/imagenes/comprimido.zip

$nombre_del_archivo_comprimido - Aqui puedes especificar el nombre del archivo resultante

Nota: Otra cosa a tomar en cuenta es que el script tarda dependiendo de que tantos archivos tenga que guardar o recorrer, puede tardar varios minutos dependiendo de que tantos archivos contenga tu sitio.

Y bueno eso es todo espero que la herramienta les sea de utilidad.

viernes, 13 de marzo de 2015

Paginar resultados de mysql con zebra paginator

Buenas, hoy recorde despues de mucho tiempo esta libreria simple, ya que un amigo por skype se le dificultaba un poco la paginacion y con esta libreria simple y precisa podemos realizar este proceso rapidamente. 

Anteriormente habia hecho una entrada en este mismo blog sobre como realizar la paginacion de manera estructurada. 

Hoy vengo a presentarles la libreria Zebra Paginator la cual nos generará los links de paginacion casi de manera automatica, solo necesitaremos el archivo siguiente: https://raw.githubusercontent.com/stefangabos/Zebra_Pagination/master/Zebra_Pagination.php


Aqui algunas de las propiedades, metodos que tendremos que configurar, ademas sobre algunas funciones de MySQL no muy conocidas.

get_page() - Este metodo retorna el numero de paginas actuales

records() - Establece el numero total de registros que deben ser paginados.

records_per_page() - Establece el numero de registros que se muestran en una sola pagina.

render() - Genera la salida. 

SQL_CALC_FOUND_ROWS - Calcula el numero de resultados de una consulta sin LIMIT.

FOUND_ROWS() - obtiene el resultado del ultimo SQL_CALC_FOUND_ROWS ejecutado.

Hay cuatro propiedades que se cambian muy usualmente en la libreria las cuales son:

* next - esta muestra el texto a salida. Ejemplo: Siguiente
* previous - esta muestra el texto a salida. Ejemplo: Anterior
* variable_name - Es la variable que sera usada. Ejemplo: pagina
* method - Es el metodo por el cual se enviara GET o POST

Un ejemplo basico de paginacion seria el siguiente, el cual es algo generico ya que usamos la base de datos information_schema para que no tengas que crear una base de datos en este ejemplo:



 <title>Paginacion</title>
<style type="text/css">
    .Zebra_Pagination li {
        list-style-type: none;
        display: inline;
        padding-right: 5px;
    }

</style>
<?php
$con = mysqli_connect('localhost','root','','information_schema') or die(mysqli_error());
// cuanto registros seran mostrados por pagina
$records_per_page = 10;

// incluimos la clase
require 'Zebra_Pagination.php';

// instanciamos el objeto zebra paginator
$pagination = new Zebra_Pagination();

// la declaracion mysql para devolver registros
// nota como creamos el limit
// tambien, nota el  "SQL_CALC_FOUND_ROWS"
// esto es para obtener el número de filas que han sido devueltos si no había LIMIT
// mira mas http://dev.mysql.com/doc/refman/5.0/en/information-functions.html#function_found-rows
$MySQL = '
    SELECT
        SQL_CALC_FOUND_ROWS
        *
    FROM
        tables
    LIMIT
        ' . (($pagination->get_page() - 1) * $records_per_page) . ', ' . $records_per_page . '
';

// si la consulta no se pudo ejecutar
if (!($result = @mysqli_query($con,$MySQL))) {

    // dejamos un mensaje de error
    die(mysqli_error($con));

}

// arrojamos el numero de registros totales de la tabla
$rows = mysqli_fetch_assoc(mysqli_query($con,'SELECT FOUND_ROWS() AS rows'));

// pasamos el numero total de registros a la clase pagination
$pagination->records($rows['rows']);

// registros por pagina
$pagination->records_per_page($records_per_page);

?>

<table class="countries" border="1">

    <tr><th>Prueba</th></tr>


    <?php while ($row = mysqli_fetch_assoc($result)):?>

    <tr>
        <td><?php echo $row['TABLE_NAME']; ?></td>
    </tr>

    <?php endwhile?>

</table>

<?php

// Da salida a los enlaces de paginacion
$pagination->render();

?>







 

Hay cosas que no tomo muy en cuenta a explicar como son la instancia del objeto Zebra Paginator, incluir la libreria, mostrar estilos de salida, o reaizar las peticiones en la db, lo que les recomendaria es checar la libreria desde Github obteniendo muchos ejemplos, es una libreria muy limpia, y contiene muchos ejemplos, esto es todo saludos!

lunes, 9 de marzo de 2015

[Parte 4]jQuery

jQuery - atributos DOM

Alguno de los componentes mas basicos que puede manipular cuando se trata de los elementos DOM son las propiedades y atributos asignados a esos elementos. La mayoria de estos atributos estan disponibles a traves de javascript como propiedades del nodo DOM. Algunas de las propiedades mas comunes son:

* className 
* tagName
* id
* href
* title
* rel
* src

Considere el siguiente codigo HTML para un elemento de imagen:

<img id="miImagen" src="imagen.gif" alt="Una imagen" class="algunaClase" title="Esto es una imagen" />

En el marcado de este elemento, el nombre de la etiqueta es img, y el marcado para id, src, alt, class y title representan los atributos del elemento, cada uno de los cuales consta con un nombre y valor. jQuery nos da medios para manipular facilmente atributos de un elemento y nos da acceso al elemento de modo que tambien podemos cambiar sus propiedades.

Obteniendo el valor del atributo

El metodo attr() se puede utilizar ya sea para buscar el valor de un atributo desde el primer elemento en el conjunto que coincida o valores en los atributos establecidos en todos los elementos coincidentes. Ejemplo:

El siguiente es un ejemplo sencillo que obtiene el atributo title de <em> y establece el valor <div id="divid"> con el mismo valor:

<html>
<head>
<title>Titulo</title>
   <script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
   <script type="text/javascript">
           $(document).ready(function(){
               var titulo = $("em").attr("title");
               $("#divid").text(titulo);
           });
   </script>
</head>
<body>
    <div>
        <em title="audaz y breve">Este es un parrafo</em>
        <p id="mi_id">Este es el segundo parrafo</p>
        <div id="divid"></div>
    </div>
</body>
</html>


Estableciendo un valor de atributo

El metodo attr(nombre,valor) puede ser usado para establecer el nombre de atributo dentro de todos los elementos que se envuelvan dentro de el valor pasado. Ejemplo: a continuacion se presenta un ejemplo sencillo que establece el atributo src en una etiqueta de imagen en una ubicacion correcta:

<html>
<head>
<title>Titulo</title>
   <script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
   <script type="text/javascript">
           $(document).ready(function(){
               $("#miimg").attr("src", "img/jquery.jpg");
           });
   </script>
</head>
<body>
    <div>
        <img id="miimg" src="/asdfnoexiste.jpg" alt="imagen simple" />
    </div>
</body>
</html>


Aplicacion de estilos

El metodo addClass (clases) puede ser usado para aplicar estilos dentro de los elementos que coinciden. Puede especificar varias clases separadas por un espacio. Ejemplo: 

<html>
<head>
<title>Titulo</title>
   <script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
   <script type="text/javascript">
           $(document).ready(function(){
               $("em").addClass("seleccionado");
            $("#mi_id").addClass("resaltado");
           });
   </script>
   <style type="text/css">
      .seleccionado { color: red; }
      .resaltado { background-color: yellow; }
   </style>
</head>
<body>
    <div>
        <em title="audaz y breve">Este es un parrafo</em>
        <p id="mi_id">Este es el segundo parrafo</p>
    </div>
</body>
</html>


Metodos utiles para atributos

La siguiente tabla enumera abajo algunos metodos utiles que usted puede utilizar para manipular atributos y propiedades:


+---------------------+------------------------------------------------------------------------------------------------------+
| Metodos             | Descripcion                                                                                          |
+---------------------+------------------------------------------------------------------------------------------------------+
| attr(propiedades)   | Establece a un objeto clave/valor como propiedades a todos los elementos que coincidan.              |
+---------------------+------------------------------------------------------------------------------------------------------+
| attr(clave,funcion) | Establece una sola propiedad para un valor calculado, en todos los elementos que coincidan.          |
+---------------------+------------------------------------------------------------------------------------------------------+
| removeAttr(nombre)  | Elimina un atributo de cada uno de los elementos que coincidan.                                      |
+---------------------+------------------------------------------------------------------------------------------------------+
| hasClass(clase)     | Devuelve true si la clase especificada esta presente en al menos uno de los elementos que coincidan. |
+---------------------+------------------------------------------------------------------------------------------------------+
| removeClass(clase)  | Elimina todas o la clase especificada desde todos los elementos que coincidan.                       |
+---------------------+------------------------------------------------------------------------------------------------------+
| toggleClass(clase)  | Agrega la clase especificada si no esta presente, elimina la clase especificada si esta presente.    |
+---------------------+------------------------------------------------------------------------------------------------------+
| html()              | Obtener el contenido html (innerHTML) del primer elemento que coincida.                              |
+---------------------+------------------------------------------------------------------------------------------------------+
| html(valor)         | Establece contenido HTML de cada elemento que coincida.                                              |
+---------------------+------------------------------------------------------------------------------------------------------+
| text()              | Obtiene el contenido del texto combinado de todos los elementos que coinciden.                       |
+---------------------+------------------------------------------------------------------------------------------------------+
| text(valor)         | Establece el contenido de texto a todos los elementos que coincidan.                                 |
+---------------------+------------------------------------------------------------------------------------------------------+
| val()               | Obtiene el valor de entrada del primer elemento que coincida.                                        |
+---------------------+------------------------------------------------------------------------------------------------------+
| val(valor)          | Establece el atributo de cada elemento que coincida.                                                 |
+---------------------+------------------------------------------------------------------------------------------------------+


De manera similar a la sintaxis y ejemplos anteriores, los ejemplos siguientes son para que se dé entendimiento sobre el uso de diversos metodos de atributos en diferentes situaciones:

$("#mi_id").attr("personalizar") : Esto devolveria el valor del atributo personalizar para el primer elemento que coincida con mi_id.
$("img").attr("alt","Imagen Simple") : Esto establece al atributo alt un nuevo valor 'Imagen Simple' para todos los elementos de imagen.
$("input").attr({value: "", title : "Por favor ingrese un valor"}) : establece el valor a todos los elementos <input> como una cadena vacia, asi como tambien el title de todos los <input> como "Por favor ingrese un valor".
$("a[href^=http://]").attr("target","_blank") : selecciona todos los enlaces con el atributo href comenzando con http:// y que establezca el atributo target en _blank.
$("a").removeAttr("target") : Esto elimina el atributo target en todos los enlaces.
$("form").submit(function(){ $(":submit",this).attr("disabled","disabled") }) : Esto modifica el atributo disabled para el valor "disabled" mientras hace clic en el boton submit.
$("p:last").hasClass("seleccionado") : Esto devuelve true si la ultima etiqueta <p> tiene la clase 'seleccionado'.
$("p").text() : Devuelve todas las cadenas que contiene el texto combinado de todos los elementos <p> encontrados.
$("p").text("<i>Hola Mundo</i>") : Esto establece "<i>Hola Mundo</i>" como contenido a todos los elementos <p> encontrados.
$("p").html() : Esto devuelve el contenido de el HTML de todos los elementos <p> encontrados.
$("div").html("Hola Mundo") : Esto establece "Hola Mundo" como contenido en todos los elementos div.
$("input:checkbox:checked").val() : Obtiene el primer valor de una casilla de verificacion marcada.
$("input:radio[name=bar]:checked").val() : obtiene el primer valor de un conjunto de botones de radio.
$("button")val("Hola") : establece el atributo de valor a cada elemento que coincide con <button>.
$("input").val("activado") : esto checa todos los radio o checkbox cuyo valor sea "activado".
$("select").val("Naranja") : Esto selecciona el valor Naranja en un cuadro desplegable donde las opciones son Naranja, Mango y Platano.
$("select").val("Naranja", "Mango") : Esto selecciona el valor Naranja  y Mango en un cuadro desplegable donde las opciones son Naranja, Mango y Platano.

Este texto ha sido traducido desde la pagina TutorialesPoint.

miércoles, 4 de marzo de 2015

[Parte 3]jQuery

jQuery - Selectores

La libreria jQuery aprovecha el poder de los selectores de las hojas de estilo en cascada (CSS) para dejarnos rapida y facilmente acceder a los elementos o grupos de elementos en el document object model (DOM). Un selector jQuery es una funcion que hace uso de expresiones para descubrir los elementos que coinciden desde el DOM a base de los criterios dados.

La funcion factory $()

Todo tipo de selectores disponibles en jQuery, siempre comienzan con el signo dolar y parentesis: $().
La funcion factory $() hace uso de los tres siguientes bloques de construccion, mientras selecciona los elementos en un documento dado:


+-----------------------+--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| jQuery                | Descripcion                                                                                                                                                                    |
+-----------------------+--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| Nombre de la etiqueta | Representa un nombre de una etiqueta disponible en el DOM. Por ejemplo $('p') selecciona todos los parrafos del documento.                                                     |
+-----------------------+--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| Etiqueta ID           | Representa una etiqueta con un ID dado en el DOM. Por ejemplo, $('#algun-id') selecciona el elemento unico en el documento que tiene el id algun-id.                           |
+-----------------------+--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+
| Etiqueta Clase        | Representa una etiqueta disponible con una clase dada en el DOM.Por ejemplo $('.alguna-clase') selecciona todos los elementos en el documento que tienen la clase alguna-clase |
+-----------------------+--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------+

Todos los elementos anteriores se pueden usar ya sea por si solos o en combinacion con los otros selectores. Todos los selectores de jQuery se basan en el mismo principio, salvo algunos. 

NOTA: la funcion factory $() es un sinonimo de la funcion jQuery() asi que en caso de que utilice cualquier otra libreria de javascript donde el signo $ este en conflicto con alguna cosa mas, entonces se puede sustituir el signo $ por el nombre jQuery y se puede utilizar la funcion jQuery() en lugar de $().

Ejemplo:

A continuacion se presenta un ejemplo sencillo que hace uso del selector de etiquetas. Esto selecciona todos los elementos con un nombre de etiqueta p.

<html>
<head>
<title>Titulo</title>
   <script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
   <script type="text/javascript">
           $(document).ready(function(){
               var pars = $("p");
               for(i = 0; i < pars.length; i++){
                   alert("Parrafo encontrado: " + pars[i].innerHTML);
               }
           });
   </script>
</head>
<body>
    <div>
        <p class="miclase">Este es un parrafo</p>
        <p id="miid">Este es el segundo parrafo</p>
        <p>Este es mi tercer parrafo</p>
    </div>
</body>
</html>



¿Como utilizar los selectores?

Los selectores son muy utiles y seran requeridos en cada paso durante el uso de jQuery. Consiguen el elemento exacto que usted quiere de su documento HTML. La siguente tabla enumera todos los selectores basicos y les explica con ejemplos.

+-----------------------------+--------------------------------------------------------------------------------------+
| Selector                    | Descripcion                                                                          |
+-----------------------------+--------------------------------------------------------------------------------------+
|            Nombre           | Selecciona todos los elementos que coincidan con el elemento dado el nombre.         |
+-----------------------------+--------------------------------------------------------------------------------------+
| #ID                         | Selecciona un elemento unico que coincide con el ID dado.                            |
+-----------------------------+--------------------------------------------------------------------------------------+
| .Clase                      | Selecciona todos los elementos que coinciden con la .clase dada.                     |
+-----------------------------+--------------------------------------------------------------------------------------+
| Universal (*)               | Selecciona todos los elementos disponibles en el DOM.                                |
+-----------------------------+--------------------------------------------------------------------------------------+
| Elementos multiples E, F, G | Selecciona los resultados combinados de todos los selectores especificados E, F o G. |
+-----------------------------+--------------------------------------------------------------------------------------+

De manera similar a la sintaxis y ejemplos anteriores, los elementos siguientes son para que se de su compresion sobre el uso diferente de otros selectores utiles:

$('*') : Este selecciona todos los elementos del documento.
$("p > *") : Este selecciona todos los elementos que son hijos de un elemento parrafo.
$("#idEspecial") : Esta funcion obtiene el elemento con id="idEspecial".
$(".claseEspecial") : Este selector se lleva todos los elementos que tienen la claseEspecial.
$("li:not(.miclase)") : Selecciona todos los elementos que coinciden con <li> que no tienen class="miclase".
$("a#idEspecial.claseEspecial") : Este selector coincide con los enlaces con id="idEspecial" y una class="claseEspecial".
$("p a.claseEspecial") : Este selector coincide con todos los enlaces con la class="claseEspecial" que estan declaradas dentro de los elementos p.
$("ul li:first") : Este selector solo obtiene el primer <li> del <ul>
$("#contenedor p") : Selecciona todos los elementos que coinciden con p que son descendientes de un elemento con el id="contenedor"
$("li > ul") : selecciona todos los elementos que coincidan con <li> que son hijos de un elemento que coincide con <ul>.
$("strong + em") : Selecciona todos los elementos que coinciden con <em> que siguen inmediatamente de un elemento hermano que coincide con <strong>.
$("p ~ ul") : Selecciona todos los elementos que coinciden con <ul> que sigue a un elemento hermano que coincide con p.
$("code, em, strong") : selecciona todos los elementos que coinciden con <code> o <em> o <strong>.

$("p strong, .miclase") : Selecciona todos los elementos que coinciden con <strong> que son descendientes de un elemento que coincide con <p>, asi como todos los elementos que tienen una clase .miclase.

$(":empty") : Selecciona todos los elementos que no tienen hijos.
$("p:empty") : Selecciona todos los elementos que coinciden con <p> que no tienen hijos.

$("div[p]") : Selecciona todos los elementos que coinciden con <div> que contienen un elemento que coincide con <p>.
$("p[.miclase]") : Selecciona todos los elementos que coinciden con <p> que contienen un elemento con la clase .miclase.
$("a[@rel]") : selecciona todos los elementos que coincidan con <a> que contengan el atributo rel.
$("input[@name=minombre]") : selecciona todos los elementos que coinciden con <input> que tienen un valor name exactamente igual a minombre.
$("input[@name^=minombre]") : selecciona todos los elementos que coinciden con <input> que tienen un valor de name comenzando por minombre.
$("a[@rel$=self]") : selecciona todos los elementos que coinciden con <a> que tienen un valor de atributo rel terminando con el mismo.
$("a[@href*=dominio.com]") : selecciona todos los elementos que coincidan con <a> que tienen un valor href que contiene dominio.com.
$("li:even") : selecciona todos los elementos que coincidan con <li> que tengan un valor de indice incluido.
$("tr:odd") : selecciona todos los elementos que coincidan con <tr> que tengan un valor de indice impar.
$("li:first") : selecciona el primer elemento <li>.
$("li:last") : selecciona el ultimo elemento <li>.
$("li:visible") : selecciona todos los elementos que coinciden con <li> que son visibles.
$("li:hidden") : selecciona todos los elementos que coinciden con <li> que estan ocultos.
$(":radio") : selecciona todos los botones de opcion en el formulario.
$(":checked") : selecciona todas las casillas de verificacion en el formulario.
$(":input") : buscamos solamente elementos del formulario (input, select, textarea, button).
$(":text") : buscamos solamente elementos de texto (input[type=text]).
$("li:eq(2)") : selecciona el tercer elemento <li>.
$("li:eq(4)") : selecciona el quinto elemento <li>. 
$("li:lt(2)") : selecciona todos los elementos que coinciden con el elemento <li> antes del tercero, en otras palabras los dos primeros elementos <li>. 
$("p:lt(3)") : selecciona todos los elementos que coinciden con el elemento <p> antes del cuarto, en otras palabras los primeros tres elementos <p>. 
$("li:gt(1)") : selecciona todos los elementos que coinciden con <li> despues del segundo. 
$("p:gt(2)") : selecciona todos los elementos que coinciden con <p> despues del tercero.
$("div/p") : selecciona todos los elementos que coinciden con <p> que son hijos de un elemento acompañado de <div>.
$("div//code") : selecciona todos los elementos que coinciden con <code> que son descendientes de un elemento acompañado de <div>.
$("//p//a") : selecciona todos los elementos que coinciden con <a> que son descendientes de un elemento acompañado de <p>  
$("li:first-child") :  selecciona todos los elementos que coinciden con <li> que son el primer hijo de su padre.
$("li:last-child") : selecciona todos los elementos que coinciden con <li> que son el ultimo hijo de su padre.
$(":parent") : selecciona todos los elementos que son padres de otro elemento, incluyendo el texto. 
$("li:contains(segundo)") : selecciona todos los elementos que coincidan con <li> que contiene el texto segundo. 


Puede utilizar todos los elementos anteriores con cualquier elemento HTML/XML en forma generica. Por ejemplo si el selector $("li:first") trabaja para el elemento <li> entonces $("p:first") tambien trabajaria para el elemento <p>.

Este articulo ha sido traducido desde TutorialsPoint.

lunes, 2 de marzo de 2015

[Parte 2]jQuery

jQuery - Conceptos basicos

jQuery es un framework construido utilizando las capacidades de javascript. Asi que usted puede utilizar todas las funciones y otras capacidades disponibles en javascript. 

Cadena

Una cadena en javascript es un objeto inmutable que contiene ninguno, o varios caracteres. Los siguientes son ejemplos validos de una cadena de javascript:

"Esto es una cadena Javascript"
'Esto es una cadena Javascript'
'Esto es "realmente" una cadena Javascript'
"Esto es 'realmente' una cadena Javascript"


Numeros

Los numeros en javascript son de formato IEEE 754 de doble precision de 64 bits. Ellos son inmutables al igual que las cadenas. Los siguientes son ejemplos validos de numeros en javascript:

5350
120.27
0.26


Booleanos

Un booleano en javascript puede ser falso o verdadero. Si un numero es cero, el valor predeterminado es falso. Los siguientes son ejemplos validos en booleano de javascript:

true // verdadero
false //  falso
0 // falso
1 // verdadero
"" // falso
"hola"  // verdadero

 

Objetos

Javascript soporta el concepto de objetos muy bien. Puede crear un objeto usando literalmente object de la siguiente manera:

var emp = {
    nombre : "Sara",
    edad : 10
}


Usted puede escribir y leer las propiedades de un objeto utilizando la notacion de puntos de la siguiente manera:

// Obtener las propiedades del objeto
emp.nombre // ==> Sara
emp.edad // ==> 10

// Estableciendo las propiedades del objeto
emp.nombre = "Deisi" // <== Daisi
emp.edad = 20 // <== 20


Arrays

Puede definir arrays utilizando literalmente array de la siguiente manera:

var x = [];
var y = [1, 2, 3, 4, 5];


Un array tiene la propiedad length que es util para la iteracion:

var x = [1, 2, 3, 4, 5];
for (var i = 0; i < x.length; i++){
    // Hacemos algo con x[i]
}


Funciones

Una funcion en javascript puede ser o bien nombrada o anonima. Una funcion nombrada se puede definir mediante la palabra clave function de la siguiente manera:

function nombrada(){
   
}


Una funcion anonima puede ser definida en forma similar que una funcion normal, pero no tendrá ningun nombre. Una funcion anonima se puede asignar a una variable o se pasa a un metodo como se muestra a continuacion:

var manejador = function(){
    // hacer algo aqui
}


jQuery hace uso de funciones anonimas con mucha frecuencia como sigue:

$(document).ready(function(){
    // Hacer algo aqui
});



Argumentos

La variable javascript arguments es una especie de array que tiene la propiedad de length. El siguiente ejemplo lo muestra muy bien:

function func(x){
    console.log(typeof x, arguments.length);
}

func(); // ==> "undefined", 0
func(1); // ==> "number", 1
func("1","2","3"); // ==> "string", 3


Los argumentos de los objetos tambien tienen una propiedad callee, que se refiere a la funcion que esta dentro de el. Por ejemplo:

function func(){
    return arguments.callee;
}

func(); // ==> func



Contexto

Javascript tiene la famosa palabra clave this que se refiere al contexto actual. Dentro de una funcion este contexto puede cambiar, dependiendo de como se llama la funcion:

$(document).ready(function(){
    // Esto hace referencia a window.document
});
$("div").click(function{
    // Esto se refiere al elemento div en el DOM
});


Puede especificar el contexto de una llamada utilizando los metodos incorporados call() y apply(). La diferencia entre ellos es la forma en que se pasan los argumentos. Call pasa todos los argumentos a traves de los arguments de la funcion, mientras apply acepta un array como arguments.


function scope(){
    console.log(this, arguments.length);
}

scope() // window, 0
scope.call("foobar",[1,2]); // ==> "foobar", 1
scope.apply("foobar",[1,2]); // ==> "foobar", 2



Ambito

El ambito de una variable es la region de su programa en el que se define. Las variables en javascript tendran solo dos ambitos.

Variables globales: una variable global tiene un alcance global que significa que se define por todas partes en su codigo javascript. 

Variables locales: una variable local sera visible solo dentro de la funcion donde se define. Los parametros de la funcion son siempre locales a esa funcion.

Dentro del cuerpo de una funcion, una variable local tiene prioridad sobre una variable global con el mismo nombre:

var miVar = "global"; // ==> declaramos una variable global

function (){
    var miVar = "local"; // ==> declaramos una variable local
    document.write(miVar); // ==> local
}


Llamadas

Una callback (llamada) es una funcion de javascript plana pasado a algun metodo como argumento o una opcion. Algunas llamadas son solo eventos, llamados a dar al usuario la oportunidad de reaccionar cuando se activa un determinado estado. El sistema de eventos de jQuery utiliza estas llamadas en todas partes, por ejemplo:

$("body").click(function(event){
    console.log("click en: " + event.target);
});


La mayoria de las llamadas proporcionan argumentos y un contexto. En el ejemplo del controlador de eventos, la devolucion de la llamada se llama como argumento. Se necesitan algunas llamadas para devolver algo, otros hacen el valor de retorno opcional. Para evitar un envio de formularios, en el controlador de eventos submit colocamos return false de la siguiente manera:

$("#miformulario").submit(function(){
    return false;
});


Cierres

Los cierres se crean cada vez que se accede a una variable que se define fuera del ambito dentro de algun ambito interno. El ejemplo siguiente muestra como la variable contador es visible dentro de crear, de incrementar, y las funciones de impresion, pero no fuera de ellos:

function crear(){
    var contador = 0;
    return {
        incrementar : function(){
            contador++;
        },
        impresion : function(){
            console.log(contador);
        }
    }
}

var c = crear();
c.incrementar();
c.impresion(); // ==> 1



Este patron permite crear objetos con metodos que operan sobre los datos que no son visibles para el mundo exterior. Cabe señalar que la ocultacion de datos es la base misma de la programacion orientada a objetos.


El patron Proxy

Un proxy es un objeto que se puede utilizar para controlar el acceso a otro objeto. Se implementa la misma interfaz que este otro objeto y pasa cualquier metodo invocandolo a él. Este otro objeto a menudo se llama real subject (sujeto real). Un proxy puede ser instanciado en lugar de real subject y permite ser accedido de forma remota. Podemos ahorrar usando el metodo setArray de jQuery en un cierre y sobreescribiendolo de la siguiente manera:

(function(){
    // registramos todas las llamadas a setArray
    var proxied = jQuery.fn.setArray;

    jQuery.fn.setArray = function(){
        console.log(this, arguments);
        return proxied.apply(this, arguments);
    }
})();


Lo anterior envuelve su codigo en una funcion para ocultar la variable proxied. El proxy entonces registra todas las llamadas al metodo y los delegados de la llamada al metodo original. Utilizando apply(this, arguments) garantiza que la persona que llama no sera capaz de notar la diferencia entre el original y el metodo proxied.


Funciones incorporadas

Javascript viene junto con un util conjunto de funciones incorporadas. Estos metodos se pueden utilizar para manipular cadenas, numeros y fechas. A continuacion se describen las funciones de javascript importantes:

+---------------+---------------------------------------------------------------------------------------------------------------------------------+
| Metodo        | Descripcion                                                                                                                     |
+---------------+---------------------------------------------------------------------------------------------------------------------------------+
| charAt()      | Devuelve el caracter en el indice especificado.                                                                                 |
+---------------+---------------------------------------------------------------------------------------------------------------------------------+
| concat()      | Combina el texto de dos cadenas y devuelve una nueva cadena.                                                                    |
+---------------+---------------------------------------------------------------------------------------------------------------------------------+
| forEach()     | Llama una funcion para cada elemento de la matriz                                                                               |
+---------------+---------------------------------------------------------------------------------------------------------------------------------+
| indexOf()     | Devuelve el indice dentro del objeto llamado String de la primera aparicion del valor especificado, o -1 si no es encontrado.   |
+---------------+---------------------------------------------------------------------------------------------------------------------------------+
| length()      | Devuelve la longitud de una cadena.                                                                                             |
+---------------+---------------------------------------------------------------------------------------------------------------------------------+
| pop()         | Elimina el ultimo elemento de una matriz y devuelve dicho elemento.                                                             |
+---------------+---------------------------------------------------------------------------------------------------------------------------------+
| push()        | añade uno o mas elementos al final de una matriz y devuelve la nueva longitud de la matriz.                                     |
+---------------+---------------------------------------------------------------------------------------------------------------------------------+
| reverse()     | Invierte el orden de los elementos de una matriz, el primero se convierte en el ultimo, y el ultimo se convierte en el primero. |
+---------------+---------------------------------------------------------------------------------------------------------------------------------+
| sort()        | Ordena los elementos de una matriz                                                                                              |
+---------------+---------------------------------------------------------------------------------------------------------------------------------+
| substr()      | Devuelve los caracteres de una cadena que comienza en el lugar especificado, por el numero de caracteres especificados.         |
+---------------+---------------------------------------------------------------------------------------------------------------------------------+
| toLowerCase() | Devuelve el valor de la cadena llamada convertido en minusculas.                                                                |
+---------------+---------------------------------------------------------------------------------------------------------------------------------+
| toString()    | Devuelve la representacion de una cadena del valor de un numero.                                                                |
+---------------+---------------------------------------------------------------------------------------------------------------------------------+
| toUpperCase() | Devuelve el valor de la cadena llamada convertido en mayusculas.                                                                |
+---------------+---------------------------------------------------------------------------------------------------------------------------------+
 
El modelo de objetos del documento

El modelo de objetos del documento (Document object model) es una estructura de arbol de diversos elementos de HTML de la siguiente manera:

<html>
<head>
    <title>Es el titulo</title>
</head>
<body>
    <div>
        <p>Este es un parrafo</p>
        <p>Este es el segundo parrafo</p>
        <p>Este es el tercer parrafo</p>
    </div>
</body>
</html>


Los siguientes son los puntos importantes sobre la estructura de arbol de arriba:

* El <html> es el ancestro de todos los demas elementos, en otras palabras, todos los demas elementos son descendientes de <html>

* El <head> y <body> no son solo elementos descendientes, son hijos de <html> tambien.

* Del mismo modo ademas de ser antepasado de <head> y <body>, <html> tambien es su padre.

* Los elementos <p> son los hijos (y descendientes) de <div>, descendientes de <body> y <html> y hermanos unos de otros elementos <p>.

Fuente: http://www.tutorialspoint.com/jquery/index.htm