jQuery_Project/views/intro.php

<?php
?>
<div class="col-md-10 col-md-offset-1">
    <h1>
        Cómo Funciona jQuery
    </h1>
    <h3 class="title-tutorial">Lo básico</h3>
    <p>Esto es un pequeño tutorial hecho para ayudarte a empezar usando jQuery. 
        A continuación descárgate el archivo de jQuery de la pápgina oficial y 
        crea una página html si no la tienes ya.
    </p>
    <br>
    <pre>
        <code>
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Demo&lt;/title&gt;
    &lt;script src="jquery.js"&gt;&lt;/script&gt;
    &lt;script&gt;
    //Todo el código aquí
 
    &lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;a href="http://jquery.com/"&gt;jQuery&lt;/a&gt;
    
&lt;/body&gt;
&lt;/html&gt;  
        </code>
    </pre>
    <br>
<p>El atributo src en el script debe de apuntar a un archivo jQuery, ya sea los 
    que están en internet o una copia que se haya descargado de la página de jQuery.
</p>
<br>
<h3 class="title-tutorial">$(document).ready</h3>
<p>Para asegurarse que el navegador ha cargado el document antes de lanzar el código, una buena práctica es encapsular el código en una función onload. </p>
<br>
<pre>
        <code>
window.onload = function() {
 
    alert( "Bienvenido" );
 
};
</code>
    </pre>
<br>
<p>Pero este código no empieza hasta que todas las imágenes están cargadas, incluidos
    banners. Para cargar el código tan pronto como el document está listo se usa 
    la sentencia de jQuery más famosa.</p>
<br>
<pre>
        <code>
$( document ).ready(function() {
 
    // Your code here.
 
});
</code>
    </pre>
<br>
<p>Dentro puedes poner el código que quieras</p>
<button id="bienvenido">Bienvenido</button>
<br>
<pre>
        <code>
$( document ).ready(function() {
    $( "#bienvenido" ).click(function() {
        alert( "Bienvenido a jQuery" );
    }); 
});
</code>
    </pre>
<br>
<h4>Abreviando $(document).ready</h4>
<p>
Los desarrolladores experimentados a veces utilizan la abreviatura $() para $(document).ready().
Si se está escribiendo código para personas sin
experiencia con jQuery, lo mejor es usar la sintaxis larga.
</p>
<button id="bienvenido2">Bienvenido</button>
<br>
<pre>
        <code>
$(function() {
    $("#bienvenido2").click(function() {
        alert("Has usado la versión corta de document.ready");
    });
});
</code>
    </pre>
<br>
<h3 class="title-tutorial">El Objeto $()</h3>
<p>La estructura básica de cualquier sentencia en JQuery es la siguiente.</p>
<br>
<pre><code>
$(objeto).(metodo);
</code></pre><br>
<p>La función más importante de JQuery es la función $(), con ella podemos crear
    un objeto JQuery a partir de cualquier elemento del árbol DOM. Una vez hemos
    transformado un nodo del árbol DOM en un objeto JQuery podremos utilizar 
    "todos" los métodos definidos en la librería JQuery</p>
<ul>
    <li>$("#id_name") crea un objeto jQuery con el que manipular el elemento 
        con el id "id_name".</li>
    <li>$(".class_name") crea un objeto jQuery con el que manipular los elementos
        con la clase "class_name".</li>
    <li>$("element") crea un objeto jQuery con el que manipular los elementos 
         seleccionados.</li>
</ul>
<br>
<pre><code>
&lt;div id="id_name"&gt;
    &lt;div&gt;Suárez&lt;/div&gt;
   &lt;div class="class_name"&gt;Barcelona &lt;/div&gt;
   &lt;div class="class_name"&gt;Delantero &lt;/div&gt; 
&lt;/div&gt;
</code></pre><br>
<div id="id_name">
    <div>Suárez</div>
    <div class="class_name">Barcelona</div>
    <div class="class_name">Delantero</div>
</div>
<button id="llamar_id">Llamar a id</button>
<button id="llamar_class">Llamar a clase</button>
<br>
<pre><code>
$(function() {
    $("#llamar_id").click(function() {
        $(".class_name").css( "background-color", "transparent"); 
        $("#id_name").css( "background-color", "red"); 
    });
    
    $("#llamar_class").click(function() {
        $("#id_name").css( "background-color", "transparent"); 
        $(".class_name").css( "background-color", "red"); 
    });
});
</code></pre><br>
<h3 class="title-tutorial">$ vs $()</h3>
<p>Por ahora solo habremos visto métodos que son llamados como un objeto jQuery. Por ejemplo:</p><br>
<pre><code>
$( "h1" ).remove();
</code></pre><br>
<p>
La mayoría de métodos de jQuery son llamados como objetos en jQuery como se muestra 
arriba. Estos métodos se dice que son parte del espacio de nombres $.fn (son las funciones
que se usan como $(elemento).(metodo)), o del “jQuery 
prototype”, y es mejor pensar en ellos como métodos objeto de jQuery.</p>
<p>
También existen otros tipos de métodos que no actúan como una selección; estos 
métodos son parte del espacio de nombres de jQuery y es mejor pensar en ellos como métodos
del núcleo de jQuery. Son llamados como $.metodo().
Esta distinción puede ser muy confusa para usuarios nuevos de jQuery, pero solo 
debes de recordar:</p>
<ul>
<li>Los métodos llamados como objetos en jQuery son parte del espacio de nombres $.fn y 
    automáticamente reciben y devuelven la selección como “this”.</li>
<li>Los métodos en el namespace “$” son generalmente métodos de 
    <a href="https://learn.jquery.com/using-jquery-core/utility-methods/">“utility-type”</a> 
    y no funcionan con “selecciones”; No se pasan automáticamente como argumentos
    y el valor devuelto puede variar.</li>
</ul>
<pre><code>
//Método del espacio de nombres de $.fn
$("h1").click(function() {
    $(this).remove();
});

//Método del espacio de nombres de $
//Este método elimina los espacios en blanco
$.trim( "    lots of extra whitespace    " );

//Devuelva el index del valor encontrado en un array o si no devuelve -1
var myArray = [ 1, 2, 3, 5 ];
if ( $.inArray( 4, myArray ) !== -1 ) {
    alert( "Encontrado!" );
}
</code></pre><br>
<h4>¿Cómo saber si un selector contiene un elemento?</h4>
    <p>Para comprobar si un selector tiene algún elemento lo mejor es usar la propiedad ".length".
    Esta propiedad dice cuantos elementos se han seleccionado. 
    Si la respuesta es 0, la propiedad “.length” lo evaluará como “false” y será usado como un valor booleano.</p>
    <br>
    <pre>
        <code>
if ( $( "div.foo" ).length ) {
    ...
}
        </code>
    </pre>
    <br>
<h3 class="title-tutorial">Añadir o eliminar una clase</h3>
Una tarea bastante básica es añadir o eliminar una clase de un elemento.
Para hacerlo solamente debemos de utilizar el método addClass() o removeClass().
<br><br>
    <pre>
        <code>
$( "a" ).addClass( "test" );
$( "a" ).removeClass( "test" );
</code>
    </pre>
<br>
<h3 class="title-tutorial">Efectos especiales</h3>
<p>jQuery también puede crear algunos efectos para lucir tu web. Por ejemplo este para esconder un elemento.</p>
<br>
    <pre>
        <code>
$( "p" ).click(function( event ) {
    $( this ).hide( "slow" );
 
});
</code>
    </pre>
<br>
<p>El enlace se esconde lentamente cuando es pulsado.</p>
<h3 class="title-tutorial">Callbacks</h3>
<p>Callback es una función que es pasada como argumento a otra función y es 
    ejecutada después de que la función padre haya sido completada. Las funciones 
    Callbacks son especiales debido a que esperan pacientemente a ser ejecutadas hasta
    que su padre finaliza.
Para utilizar callbacks, es importante saber cómo realizarlo.</p>
<p id="parraHide">Este párrafo tiene un callback</p>
<button id="callback">Pulsa Callback</button>
<br>
<br>
    <pre>
        <code>
$("#callback").click(function(){
    $("#parraHide").hide("slow", function(){
        alert("El párrafo esta escondido");
    });
});
</code>
    </pre>
<br>
<p>
Cuando $("#parraHide") termina de esconderse se ejecuta la función con un alert().
</p>
<br>
<h3>Evitar conflictos con otras librerías</h3>
<p>
    La biblioteca jQuery y prácticamente todos sus complementos están contenidos 
    dentro del espacio de nombres jQuery. Como regla general, los objetos globales 
    también se almacenan dentro del espacio de nombres jQuery, por lo que no debería
    tener un choque entre jQuery y cualquier otra biblioteca (como prototype.js, 
    MooTools o YUI).
    <br>
    Dicho esto, hay una advertencia: por defecto, jQuery utiliza $ como un acceso 
    directo para jQuery. Por lo tanto, si está utilizando otra biblioteca de 
    JavaScript que utiliza la variable $, puede ejecutar conflictos con jQuery. 
    Con el fin de evitar estos conflictos, es necesario poner jQuery en modo de 
    no conflicto inmediatamente después de que se carga en la página y antes de 
    intentar utilizar jQuery en su página.
</p>
<br>
    <pre>
        <code>
&lt;!-- Pones jQuery en modo no conflicto. --&gt;
&lt;script src="prototype.js"&gt;&lt;/script&gt;
&lt;script src="jquery.js"&gt;&lt;/script&gt;
&lt;script&gt;
 
var $j = jQuery.noConflict();
// $j es ahora el nuevo alias para la función jQuery, esto es opcional.
 
$j(document).ready(function() {
    $j( "div" ).hide();
});
 
&lt;/script&gt;
</code>
    </pre>
<br>
</div>
<script src="../jQueryProject/assets/js/intro.js"></script>