jQuery_Project/views/selectores.php

<?php

/* 
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */
?>
<div class="col-md-10 col-md-offset-1">
        <h1>
            Selecionando Elementos
        </h1>
        <p>
            El más básico concepto de jQuery  es “seleccionar algunos elementos y hacer algo con ellos.” jQuery soporta la mayoría de selectores de CSS3, así como algunos que no son estándar. Para una competa referencia de los selectores, ve al siguiente enlace <a href="http://api.jquery.com/category/selectors/">Selectors documentation on api.jquery.com</a>.
        </p>
        <p>Para seleccionar elementos en jQuery, realmente el mayor impedimento es tu imaginación. La potencia que tiene jQuery permite seleccionar elementos de una manera bastante creativa y potente.
            Se puede seleccionar por medio de id, clase, filtrando, se puede seleccionar por atributo, etc.
            A continuación vamos a ver en detalle como hacerlo.
        </p>
        <h3>Seleccionando elementos por Id</h3>
        <br>
    <pre>
        <code>
$( "#myId" );
            </code>
    </pre>
    <br>
    <h3>Seleccionando elementos por Clase</h3>
        <br>
    <pre>
        <code>
$( ".myClass" );
            </code>
    </pre>
    <br>
    <h3>Seleccionando elementos por Atributo</h3>
        <br>
    <pre>
        <code>
$( "input[name='first_name']" );

            </code>
    </pre>
    <br>
    <h3>Seleccionando elementos por Combinación</h3>
        <br>
    <pre>
        <code>
$( "#contents ul.people li" );
            </code>
    </pre>
    <br>
    <h3>Seleccionando varios elementos separados por coma</h3>
        <br>
    <pre>
        <code>
$( "div.myClass, ul.people" );
            </code>
    </pre>
    <br>
    <h3>Eligiendo los selectores</h3>
    <p>Elegir un buen selector es una manera de mejorar el rendimiento de JavaScript. Si se especifica mucho puede ser malo. Por ejemplo, un selector como “#myTable thead tr th.special” es malgastar recursos si puedes usar “#myTable th.special”.
    </p>
    <h3>Guardando las selecciones</h3>
    <p>Para salvar una selección es tan fácil como igualar una variable al selector.
        Una vez salvado puedes manipularlas como un objeto jQuery normal.
    </p>
    <br>
    <pre>
        <code>
var divs = $( "div" );
        </code>
    </pre>
    <br>
    <h3>Pseudo selectores</h3>
    <p>Existen numerosas formas de seleccionar elementos que no son parte de las especificaciones de CSS.
        Por ello vamos a proceder a explicar algunas de ellas.
    </p>
    
    <h4>Selectores :first, :eq, :gt, :lt, :slice</h4>
    Además de seleccionar elementos pares o impares, se pueden crear selecciones de otro tipo.
    <ol start="0">
        <li class="seleccion">Como elegir el primer elemento usando :first.</li>
        <li class="seleccion">Seleccionar el elemento número x usando :eq.</li>
        <li class="seleccion">Seleccionar los elementos mayores que x usando :gt.</li>
        <li class="seleccion">Seleccionar los elementos menores que x usando :lt.</li>
        <li class="seleccion">O seleccionar los elementos entre dos números usando :slice.</li>
    </ol>
    Número de la lista <input type="text" name="number" value="0" id="valorSelect"><br><br>
    Final slice<input type="text" name="number" value="5" id="valorSelect2"><br><br>
    <button type="button" class="btn btn-success first-li">Elemento first</button>
    <button type="button" class="btn btn-primary eq-li">Elementos eq()</button>
    <button type="button" class="btn btn-success gt-li">Elementos gt()</button>
    <button type="button" class="btn btn-primary lt-li">Elementos lt()</button>
    <button type="button" class="btn btn-primary slice-li">Elementos slice()</button>
    <button type="button" class="btn btn-primary clear-li">Limpiar estilos</button>
    <br>
    <br>
    <select class="select_hide">
        <option selected disabled>Desplegar código</option>
        <option class="open-code">Código Elemento First</option>
        <option class="open-code">Código Elemento eq()</option>
        <option class="open-code">Código Elemento gt()</option>
        <option class="open-code">Código Elemento lt()</option>
        <option class="open-code">Código Elemento slice()</option>
        <option class="open-code">Código Limpiar Estilos</option>
    </select>
    <div class="hide-code">
    <h4 >First <span class="glyphicon glyphicon-triangle-bottom"></span></h4>
    
    <pre>
        <code>
$(".first-li").click(function() {
   $(".seleccion").css("background-color", "transparent");
   $(".seleccion:first").css( "background-color", "red"); 
});
</code>
    </pre>
        </div>
    <div class="hide-code">
    <h4 >eq <span class="glyphicon glyphicon-triangle-bottom"></span></h4>
    
    <pre>
        <code>
$(".eq-li").click(function() {
   var valor = $("#valorSelect").val();
   $(".seleccion").css("background-color", "transparent");
   $(".seleccion:eq("+valor+")").css( "background-color", "red"); 
});
</code>
    </pre>
        </div>
    <div class="hide-code">
    <h4 >gt <span class="glyphicon glyphicon-triangle-bottom"></span></h4>
    
    <pre>
        <code>
$(".gt-li").click(function() {
   var valor = $("#valorSelect").val();
   $(".seleccion").css("background-color", "transparent");
   $(".seleccion:gt("+valor+")").css( "background-color", "red"); 
});
</code>
    </pre>
        </div>
    <div class="hide-code">
    <h4 >lt <span class="glyphicon glyphicon-triangle-bottom"></span></h4>
    
    <pre>
        <code>
$(".lt-li").click(function() {
   var valor = $("#valorSelect").val();
   $(".seleccion").css("background-color", "transparent");
   $(".seleccion:lt("+valor+")").css( "background-color", "red"); 
});
</code>
    </pre>
        </div>
    <div class="hide-code">
    <h4 >slice <span class="glyphicon glyphicon-triangle-bottom"></span></h4>
    
    <pre>
        <code>
$(".slice-li").click(function() {
   var valor = $("#valorSelect").val();
   var valor2 = $("#valorSelect2").val();
   $(".seleccion").css("background-color", "transparent");
   $(".seleccion").slice(valor, valor2).css( "background-color", "red"); 
});
</code>
    </pre>
        </div>
    <div class="hide-code">
    <h4 >Limpiar estilos <span class="glyphicon glyphicon-triangle-bottom"></span></h4>
    
    <pre>
        <code>
$(".clear-li").click(function() {
   $(".seleccion").css("background-color", "transparent");
});

        </code>
    </pre>
    </div>
    <br>
    <h4>:odd y :even Selector</h4>
    <p>Se seleccionan los elementos impares de la página web. Al empezar desde la base de 0, se seleccionará el segundo elemento, el cuarto, etc.
Como :odd no es parte de CSS, se debe de usar un selector CSS para usarlo de manera más eficiente. Se seleccionan los elementos en el orden de aparición en el documento.
    </p>
    <div id="parraPrim">
        <p>Párrafo 0</p>
        <p>Párrafo 1</p>
        <p>Párrafo 2</p>
        <p>Párrafo 3</p>
    </div>
    <ol id="listaPrim" start="0">
        <li class="seleccion">Soy un item par</li>
        <li class="seleccion">Yo soy impar, soy el 1</li>
        <li class="seleccion">Yo quiero ser impar pero soy par</li>
        <li class="seleccion">Yo soy otro impar</li>
        <li class="seleccion">Yo soy el número mayor y soy también par</li>
    </ol>
    <button type="button" class="btn btn-success odd-li">Elementos li:odd</button>
    <button type="button" class="btn btn-primary even-li">Elementos li:even</button>
    <button type="button" class="btn btn-success odd-p">Elementos p:odd</button>
    <button type="button" class="btn btn-primary even-p">Elementos p:even</button>
    
    <button type="button" class="btn btn-primary clear-oddeven">Limpiar estilos</button>
    <br>
    <br>
    <select class="select_hide">
        <option selected disabled>Desplegar código</option>
        <option class="open-code">Código Elementos li:odd (impares)</option>
        <option class="open-code">Código Elementos p:odd (impares)</option>
        <option class="open-code">Código Elemento li:even (pares)</option>
        <option class="open-code">Código Elemento p:even (pares)</option>
        <option class="open-code">Código Limpiar Estilos</option>
    </select>
    <div class="hide-code">
    <br>
    <h4>Elementos li:odd (impares) <span class="glyphicon glyphicon-triangle-bottom"></span></h4>
    <pre>
        <code>
$(".odd-li").click(function() {
   $("#parraPrim > p, #listaPrim > li").css("background-color", "transparent");
   $("#listaPrim > li:odd").css( "background-color", "red"); 
});
</code>
    </pre>
        </div>
    <div class="hide-code">
    <h4>Elementos p:odd (impares) <span class="glyphicon glyphicon-triangle-bottom"></span></h4>
    
    <pre>
        <code>
$(".odd-p").click(function() {
   $("#parraPrim > p, #listaPrim > li").css("background-color", "transparent");
   $("#parraPrim > p:odd").css( "background-color", "red"); 
});
</code>
    </pre>
        </div>
     <div class="hide-code">
    <h4>Elementos li:even (pares) <span class="glyphicon glyphicon-triangle-bottom"></span></h4>
   
    <pre>
        <code>
$(".even-li").click(function() {
   $("#parraPrim > p, #listaPrim > li").css("background-color", "transparent");
   $("#listaPrim > li:even").css( "background-color", "red"); 
});
</code>
    </pre>
        </div>
    <div class="hide-code">
    <h4>elementos p:even (pares) <span class="glyphicon glyphicon-triangle-bottom"></span></h4>
    
    <pre>
        <code>
$(".even-p").click(function() {
   $("#parraPrim > p, #listaPrim > li").css("background-color", "transparent");
   $("#parraPrim > p:even").css( "background-color", "red"); 
});
</code>
    </pre>
        </div>
    <div class="hide-code">
    <h4>Limpiar estilo <span class="glyphicon glyphicon-triangle-bottom"></span></h4>
    
    <pre>
        <code>
$(".clear-oddeven").click(function() {
   $("#parraPrim > p, #listaPrim > li").css("background-color", "transparent");
});
</code>
    </pre>
        </div>
    <br>
    <h4>Visible y Hidden</h4>
    <p> Al usar los pseudo-selectores visible y hidden, jQuery comprueba la actual visibilidad del elemento y no la propiedad del CSS. 
        jQuery mira si la altura y anchura física del elemento en la página son mayores de cero.
        Aunque esto no funciona con los elementos &lt;tr&gt; y por eso si que comprueba la propiedad CSS display en estos casos y lo considera hidden si la propiedad está en none.
    </p>
    <ul>
        <li>Se consideran “hidden” elementos con display none.</li>
        <li>Elementos de formularios type=”hidden”.</li>
        <li>Elementos con width y height igual a 0.</li>
        <li>Cuando su ancestro está hidden.</li>
    </ul>
    <p>Los elementos con “visibility:hidden” y “opacitiy:0” son considerados visibles.</p>

    <ol start="1">
        <li class="seleccion2">A mi si me ves.</li>
        <li class="seleccion2 element-invisible">A mi no me ves pero ocupo el espacio</li>
        <li class="seleccion2 element-hidden">A mi no.</li>
        <li class="seleccion2">Yo no me escondo.</li>
        <li class="seleccion2 element-hidden">Yo si lo estoy.</li>
    </ol>
    
    <button type="button" class="btn btn-success tell-hidden">Elementos escondidos</button>
    <button type="button" class="btn btn-primary show-hidden">Mostrar elementos hidden</button>
    <button type="button" class="btn btn-primary clickVisibly">Mostrar elementos invisibles</button>
    <button type="button" class="btn btn-primary all-hidden">Esconder elementos</button>
    <button type="button" class="btn btn-primary clear-li2">Limpiar estilos</button>
    <br>
    <br>
    <select class="select_hide">
        <option selected disabled>Desplegar código</option>
        <option class="open-code">Código Elementos escondidos</option>
        <option class="open-code">Código de Mostrar elementos hidden</option>
        <option class="open-code">Código de Mostrar elementos invisibles</option>
        <option class="open-code">Código Esconde elementos</option>
        <option class="open-code">Código Limpiar Estilos</option>
    </select>
    <br>
    <div class="hide-code">
    <h4>Código de Elementos escondidos <span class="glyphicon glyphicon-triangle-bottom"></span></h4>
    
    <pre>
        <code>
$(".tell-hidden").click(function() {
   var num = $(".seleccion2:hidden");
   alert("Los elementos escondidos son " + num.length);
});
</code>
    </pre>
        </div>
    <div class="hide-code">
    <h4>Código para mostrar elementos ocultos <span class="glyphicon glyphicon-triangle-bottom"></span></h4>
    
    <pre>
        <code>
$(".show-hidden").click(function() {
   $(".seleccion2:hidden").show();
});
</code>
    </pre>
        </div>
    <div class="hide-code">
    <h4>Código para mostrar elementos invisibles <span class="glyphicon glyphicon-triangle-bottom"></span></h4>
    
    <pre>
        <code>
$(".clickVisibly").click(function() {
    $("li").each(function() {
        if ($(this).css("visibility") === "hidden") {
            $(this).css("visibility", "visible");
        }
    }); 
});
</code>
    </pre>
        </div>
    <div class="hide-code">
    <h4>Código para esconder elementos <span class="glyphicon glyphicon-triangle-bottom"></span></h4>
    
    <pre>
        <code>
$(".all-hidden").click(function() {
   $(".seleccion2").hide();
});
</code>
    </pre>
        </div>
    <div class="hide-code">
    <h4>Código para limpiar estilos <span class="glyphicon glyphicon-triangle-bottom"></span></h4>
    
    <pre>
        <code>
$(".clear-li2").click(function() {
   $(".seleccion2").show();
   $(".element-hidden").hide();
   $(".element-invisible").css("visibility", "hidden");
});
</code>
    </pre>
        </div>
    <br>    
    <h4>Seleccionando Elementos de un Formulario</h4>
    <p>jQuery permite usar pseudo-selectores para encontrar elementos de un formulario. 
        Hay muchos problemas para encontrar un tipo de elemento 
        basado en su estado o tipo mediante los selectores CSS estándar.
    </p>
    <h5>:checked</h5>
    <p>“:checked” pseudo-selector funciona con <span>checkboxes</span>, 
        <span>radio-buttons</span> y <span>selects</span>.</p>
    <br>
    <pre>
        <code>
$( "form :checked" );
        </code>
    </pre>
    <br>
    <h5>:disabled</h5>
    <p>El pseudo-selector “:disabled” funciona con cualquier “&lt;input&gt;”
        element con el atributo “disabled”. Para conseguir el mejor rendimiento, 
        es mejor usar “:disabled” junto a un “.filter(“:disabled”)” o usar 
        después un pseudo-selector junto a un tag name.
    </p>
    <br>
    <pre>
        <code>
$( "form:disabled" );
        </code>
    </pre>
    <br>
    <h5>:enabled</h5>
    <p>Es lo contrario de “:disabled”. Selecciona elementos que no tengan el atributo “disabled”.</p>
    <br>
    <pre>
        <code>
$( "form:enabled" );
        </code>
    </pre>
    <br>
    <h5>:input</h5>
    <p>Usar el selector “:input” permite seleccionar todos los elementos “&lt;input&gt;”, 
        “&lt;textarea&gt;”, “&lt;select&gt;” y “&lt;button&gt;”.
    </p>
    <br>
    <pre>
        <code>
$( "form:input" );
        </code>
    </pre>
    <br>
    <h5>:selected</h5>
    <p>Usar el pseudo-selector “:selected”  se enfoca en cualquier elemento 
        seleccionado en elementos “&lt;option&gt;”.
    </p>
    <br>
    <pre>
        <code>
$( "form option:selected" );
        </code>
    </pre>
    <br>
    <div><form id="form-prueba">
      <input type="button" value="Input Button">
      <input type="checkbox">
      <input type="file">
      <input type="hidden">
      <input type="image">
      <input type="password">
      <input type="radio" name="asdf">
      <input type="radio" name="asdf">
      <input type="reset">
      <input type="submit">
      <input type="text">
      <select>
        <option>Option</option>
        <option>Option2</option>
      </select>
      <textarea></textarea>
      <button>Button</button>
        </form></div><br>
    <button type="button" class="btn btn-success input-type">Número de inputs</button>
    <button type="button" class="btn btn-success pass-type">Tipo Password</button>
    <button type="button" class="btn btn-primary radio-type">Tipo Radio</button>
    <button type="button" class="btn btn-success reset-type">Tipo Reset</button>
    <button type="button" class="btn btn-success submit-type">Tipo Submit</button>
    <button type="button" class="btn btn-primary text-type">Tipo Text</button>
    <button type="button" class="btn btn-primary checkbox-type">Tipo Checkbox</button>
    <button type="button" class="btn btn-primary button-type">Tipo Button</button>
    <button type="button" class="btn btn-primary select-type">Tipo Select</button>
    <button type="button" class="btn btn-primary clear-form">Limpiar estilos</button>
    <div id="form-result"></div>
    <br>
    <select class="select_hide">
        <option selected disabled>Desplegar código</option>
        <option class="open-code">Codigo Número de inputs</option>
        <option class="open-code">Codigo Tipo Password</option>
        <option class="open-code">Código Tipo Radio buttons</option>
        <option class="open-code">Código Tipo Reset</option>
        <option class="open-code">Código Tipo Submit</option>
        <option class="open-code">Código Tipo Text</option>
        <option class="open-code">Código Tipo Checkbox</option>
        <option class="open-code">Código Tipo Button</option>
        <option class="open-code">Código Tipo Select</option>
        <option class="open-code">Código Limpiar Estilos</option>
    </select><br>
    <div class="hide-code">
    <h4>Código Número de inputs <span class="glyphicon glyphicon-triangle-bottom"></span></h4>
    
    <pre>
        <code>
$(".input-type").click(function() {
    var allInputs = $( ":input");
    $( "#form-result" ).text( "Encontrados " + allInputs.length + " inputs." );
});
</code>
    </pre>
        </div>

    <div class="hide-code">
    <h4>Código Tipo Password <span class="glyphicon glyphicon-triangle-bottom"></span></h4>
    
    <pre>
        <code>
$(".pass-type").click(function() {
   var input = $( "input:password" ).css({
    background: "yellow",
    border: "3px red solid"
  });
  $( "#form-result" )
    .text( "Hay " + input.length + " input de tipo 'password'." )
    .css( "color", "red" );
});
</code>
    </pre>
        </div>

    <div class="hide-code">
    <h4>Código Tipo Radio Buttons <span class="glyphicon glyphicon-triangle-bottom"></span></h4>
    
    <pre>
        <code>
$(".radio-type").click(function() {
   var input = $( "input:radio" ).css({
    background: "yellow",
    border: "3px red solid"
  });
  $( "#form-result" )
    .text( "Hay " + input.length + " input de tipo 'radiobutton'." )
    .css( "color", "red" );
});
</code>
    </pre>
        </div>

    <div class="hide-code">
    <h4>Código Tipo Reset <span class="glyphicon glyphicon-triangle-bottom"></span></h4>
    
    <pre>
        <code>
$(".reset-type").click(function() {
   var input = $( "input:reset" ).css({
    background: "yellow",
    border: "3px red solid"
  });
  $( "#form-result" )
    .text( "Hay " + input.length + " input de tipo 'reset'." )
    .css( "color", "red" );
});
</code>
    </pre>
        </div>

    <div class="hide-code">
    <h4>Código Tipo Submit <span class="glyphicon glyphicon-triangle-bottom"></span></h4>
    
    <pre>
        <code>
$(".submit-type").click(function() {
   var input = $( "input:submit" ).css({
    background: "yellow",
    border: "3px red solid"
  });
  $( "#form-result" )
    .text( "Hay " + input.length + " input de tipo 'submit'." )
    .css( "color", "red" );
});
</code>
    </pre>
        </div>

    <div class="hide-code">
    <h4>Código Tipo Text <span class="glyphicon glyphicon-triangle-bottom"></span></h4>
    
    <pre>
        <code>
$(".text-type").click(function() {
   var input = $( "input:text" ).css({
    background: "yellow",
    border: "3px red solid"
  });
  $( "#form-result" )
    .text( "Hay " + input.length + " input de tipo 'text'." )
    .css( "color", "red" );
});
</code>
    </pre>
        </div>

    <div class="hide-code">
    <h4>Código Tipo Checkbox <span class="glyphicon glyphicon-triangle-bottom"></span></h4>
    
    <pre>
        <code>
$(".checkbox-type").click(function() {
   var input = $( "input:checkbox" ).css({
    background: "yellow",
    border: "3px red solid"
  });
  $( "#form-result" )
    .text( "Hay " + input.length + " input de tipo 'checkbox'." )
    .css( "color", "red" );
});
</code>
    </pre>
        </div>

    <div class="hide-code">
    <h4>Código Tipo Button <span class="glyphicon glyphicon-triangle-bottom"></span></h4>
    
    <pre>
        <code>
$(".button-type").click(function() {
   var input = $( "form input:button" ).css({
    background: "yellow",
    border: "3px red solid"
  });
  $( "#form-result" )
    .text( "Hay " + input.length + " input de tipo 'button'." )
    .css( "color", "red" );
});
</code>
    </pre>
        </div>
    <div class="hide-code">
    <h4>Código Tipo Button <span class="glyphicon glyphicon-triangle-bottom"></span></h4>
    
    <pre>
        <code>
$(".select-type").click(function() {
   var input = $( "#form-prueba option:selected" );
      $( "#form-result" )
        .text( "Has elegido la opción " + input.text())
        .css( "color", "red" );
   });
});
</code>
    </pre>
        </div>
    <div class="hide-code">
    <h4>Código limpiar estilos <span class="glyphicon glyphicon-triangle-bottom"></span></h4>
    
    <pre>
        <code>
$(".clear-form").click(function() {
   $("#form-prueba input").css({
        background: "#e7e7e7",
        color: "black",
        border: "black"
   });
});
</code>
    </pre>
        </div>
    <br>
    <h4>Refinando y filtrando la selección</h4>
    <p>Se usan para mejorar la búsqueda de los elementos en la página.</p>
    <h4>Selectores :has() y :not()</h4>
    <p>Selecciona elementos que contienen al menos un elemento que cuadra con el 
        selector especificado. Un ejemplo de sintaxis con "has" es la siguiente: 
        $( "your-pure-css-selector" ).has( "selector/DOMElement" ).
        Mientras que con not es: ( "your-pure-css-selector" ).not( "selector/DOMElement" ).
    </p>
    <pre>
        <code>
&lt;div class="padre-div"&gt;Yo soy un div con clase "padre-div" y no tengo ningún elemento li&lt;/div&gt;
&lt;ul id="list-father"&gt;
    &lt;div class="padre-div"&gt;Soy un div con clase "padre-div" y tengo un elemento li &lt;li&gt;Yo tengo un padre div&lt;/li&gt;&lt;/div&gt;
    &lt;li id="has-father"&gt;Yo no lo tengo y no tengo ningún id&lt;/li&gt;
    &lt;li&gt;Yo menos&lt;/li&gt;

&lt;/ul&gt;
</code>
    </pre>
    <div class="padre-div">Yo soy un div con clase "padre-div" y no tengo ningún elemento li</div>
    <ul id="list-father">
        <div class="padre-div">Soy un div con clase "padre-div" y tengo un elemento li <li>Yo tengo un padre div</li></div>
        <li id="has-father">Yo tengo un id.</li>
        <li>Yo no, lo juro por snoopy.</li>
        
    </ul>
    <button type="button" class="btn btn-success div-has">Elemento con clase "padre-div" tiene un elemento li </button>
    <button type="button" class="btn btn-primary not-has">Elemento que no tiene id "has-father"</button>
    <button type="button" class="btn btn-primary clear-li3">Limpiar estilos</button>
    <br><br>
    <select class="select_hide">
        <option selected disabled>Desplegar código</option>
        <option class="open-code">Código Elemento con clase "padre-div" tiene un elemento li</option>
        <option class="open-code">Código Elemento que no tiene id "has-father"</option>
        <option class="open-code">Código Limpiar Estilos</option>
    </select><br>
    <div class="hide-code">
    <h4>Elemento con clase "padre-div" tiene un elemento li <span class="glyphicon glyphicon-triangle-bottom"></span></h4>
    
    <pre>
        <code>
$(".div-has").click(function() {
   $(".padre-div").has("li").css("background", "red");
});
</code>
    </pre>
        </div>
    <div class="hide-code">
    <h4>Código Elemento que no tiene id "has-father" <span class="glyphicon glyphicon-triangle-bottom"></span></h4>
    
    <pre>
        <code>
$(".not-has").click(function() {
   $( "#list-father li" ).not( "#has-father").css("background", "red");;  
});
</code>
    </pre>
        </div>
    <div class="hide-code">
    <h4>Código Limpiar estilos <span class="glyphicon glyphicon-triangle-bottom"></span></h4>
    
    <pre>
        <code>
$(".clear-li3").click(function() {
   $("li").css("background-color", "transparent");
   $("#padre-div").css("background-color", "transparent");
});
</code>
    </pre>
        </div>
    <br>
    <h4>filter()</h4>
    <p>
        Dado un objeto jQuery que representa un conjunto de elementos DOM, 
        el método .filter () construye un nuevo objeto jQuery de un subconjunto
        de los elementos coincidentes. El selector suministrado se prueba contra
        cada elemento; Todos los elementos que coincidan con el selector se 
        incluirán en el resultado.<br>
        Por ejemplo, tenemos una lista.
    </p>
    <ul id="myList">
        <li><strong> item 0</strong> de la lista - one strong tag</li>
        <li><strong>item </strong> 1 <strong>de la lista</strong> -
          two <span>strong tags</span></li>
        <li>2 item de la lista</li>
        <li>3 item de la lista</li>
        <li>4 item de la lista</li>
        <li>5 item de la lista</li>
        <li>6 item de la lista</li>
    </ul>
    <button id="myListFil">Pulsa para ver los pares</button>
    <button id="myListFil2">Pulsa para ver elementos con un strong</button>
    <button id="myListFil3">Pulsa para ver elementos con dos strong</button>
    <button id="myListClear">Limpiar estilos</button>
    <br><br>
    <pre>
        <code>
$("#myListFil").click(function() {
    $( "#myList li" ).css( "background-color", "transparent" );
    $( "#myList li" ).filter( ":even" ).css( "background-color", "red" );
});
        </code>
    </pre>
    <br>
    <p>O podemos filtrarlos según su contenido. A continuación veremos como es posible
        filtrar elementos dependiendo de la cantidad que contengan de
        un elemento específico.
    </p>
    <pre>
        <code>
$("#myListFil2").click(function() {
    $( "#myList li" ).filter(function() {
      return $( "strong", this ).length === 1;
    })
      .css( "background-color", "red" );
});
        </code>
    </pre>
    <br>
    <pre>
        <code>
$("#myListFil3").click(function() {
    $( "#myList li" ).css( "background-color", "transparent" );
    $( "#myList li" ).filter(function() {
      return $( "strong", this ).length === 2;
    })
      .css( "background-color", "red" );
});
        </code>
    </pre>
    <br>

    
    <h3>find() y children()</h3>
    <p>
        Dado un objeto jQuery que representa un conjunto de elementos DOM, 
        el método .find () nos permite buscar a través de los descendientes 
        de estos elementos en el árbol DOM y construir un nuevo objeto jQuery 
        a partir de los elementos coincidentes. Los métodos .find () 
        y .children() son similares, excepto que el último sólo viaja un 
        nivel por el árbol DOM.
    </p>
    <p>
        La primera firma del método .find () acepta una expresión de selector 
        del mismo tipo que podemos pasar a la función $ (). Los elementos se 
        filtrarán probando si coinciden con este selector.
    </p>
    <h4>Hermanos, padres, vecinos...</h4>
    <p>jQuery nos permite numerosas formas de selección de los elementos incluídos en la página web.
        La forma en que los seleccionéis solo depende de vosotros. 
        Se puede buscar el padre de un elemento, los hijos, el primer hijo, el último, etc.
        Como veréis hay una gran variedad de selectores.
    </p>
    <div id="star-wars">
        <div id="shmi">
            <img id="shmi-img" class="ancestor" src="../jQueryProject/assets/images/starwars/Shmi.jpg">
            <div id="darth-vader" class="shmi-child">
                <img id="darth-vader-img" class="ancestor" src="../jQueryProject/assets/images/starwars/darth-vader.jpeg">
                <div id="luke" class="vader-child">
                    <img src="../jQueryProject/assets/images/starwars/lukesky.jpg">
                </div>
                <div id="leia" class="vader-child">
                    <img class="ancestor" src="../jQueryProject/assets/images/starwars/princess-leia-organa.jpg">
                    <div id="kylo" class="leia-child">
                        <img src="../jQueryProject/assets/images/starwars/kylo.jpg">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <button type="button" class="btn btn-success shmi-son">Hijo de Shmi</button>
    <button type="button" class="btn btn-success shmi-descendant">Descendientes de Shmi</button>
    <button type="button" class="btn btn-primary vader-children">Hijos de Vader</button>
    <button type="button" class="btn btn-success vader-descendant">Descendientes de Vader</button>
    <button type="button" class="btn btn-success luke-sibling">Hermana de Luke</button>
    <button type="button" class="btn btn-success leia-sibling">Hermano de Leia</button>
    <button type="button" class="btn btn-primary leia-son">Hijos de Leia Organa</button>
    <button type="button" class="btn btn-primary kylo-mother">Madre de Kylo</button>
    <button type="button" class="btn btn-primary kylo-ancestor">Ancestros de Kylo</button>
    <button type="button" class="btn btn-primary clear-li4">Limpiar estilos</button>
    <br><br>
    <br>
    <pre>
        <code>
&lt;div id="star-wars"&gt;
    &lt;div id="shmi"&gt;
        &lt;img id="shmi-img" class="ancestor" src="../jQueryProject/assets/images/starwars/Shmi.jpg"&gt;
        &lt;div id="darth-vader" class="shmi-child"&gt;
            &lt;img id="darth-vader-img" class="ancestor" src="../jQueryProject/assets/images/starwars/darth-vader.jpeg"&gt;
            &lt;div id="luke" class="vader-child"&gt;
                &lt;img src="../jQueryProject/assets/images/starwars/lukesky.jpg"&gt;
            &lt;/div&gt;
            &lt;div id="leia" class="vader-child"&gt;
                &lt;img class="ancestor" src="../jQueryProject/assets/images/starwars/princess-leia-organa.jpg"&gt;
                &lt;div id="kylo" class="leia-child"&gt;
                    &lt;img src="../jQueryProject/assets/images/starwars/kylo.jpg"&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
        </code>
    </pre>
    <br>
    <select class="select_hide">
        <option selected disabled>Desplegar código</option>
        <option class="open-code">Codigo Hijo Shmi</option>
        <option class="open-code">Código Hijos de Vader</option>
        <option class="open-code">Código Hijo de Leia</option>
        <option class="open-code">Código Descendientes de Shmi</option>
        <option class="open-code">Código Descendientes de Vader</option>
        <option class="open-code">Código Hermana de Luke</option>
        <option class="open-code">Código Hermano de Leia</option>
        <option class="open-code">Código Hijo de Leia</option>
        <option class="open-code">Código Madre de Kylo</option>
        <option class="open-code">Código Ancestros de Kylo</option>
        
        <option class="open-code">Código Limpiar Estilos</option>
    </select><br>
    <br>
    <div class="hide-code">
    <h4>Codigo Hijo Shmi <span class="glyphicon glyphicon-triangle-bottom"></span></h4>
    
    <pre>
        <code>
$(".shmi-son").click(function() {
   clear4();
   $( ".shmi-child" ).children("img").css( "border", "3px solid red" );
});
</code>
    </pre>
        </div>
    <div class="hide-code">
    <h4>Código Hijos de Vader <span class="glyphicon glyphicon-triangle-bottom"></span></h4>
    
    <pre>
        <code>
$(".vader-children").click(function() {
   clear4();
   $( ".vader-child").children("img").css( "border", "3px solid red" );
});
</code>
    </pre>
        </div>
    <div class="hide-code">
    <h4>Código Hijo de Leia <span class="glyphicon glyphicon-triangle-bottom"></span></h4>
    
    <pre>
        <code>
$(".leia-son").click(function() {
   clear4();
   $( ".leia-child>img" ).css( "border", "3px solid red" );
});
</code>
    </pre>
        </div>
    <div class="hide-code">
    <h4>Código Descendientes de Shmi <span class="glyphicon glyphicon-triangle-bottom"></span></h4>
    
    <pre>
        <code>
$(".shmi-descendant").click(function() {
   clear4();
   $( ".shmi-child" ).find("img").css( "border", "3px solid red" );
});
</code>
    </pre>
        </div>
    <div class="hide-code">
    <h4>Código Descendientes de Vader <span class="glyphicon glyphicon-triangle-bottom"></span></h4>
    
    <pre>
        <code>
$(".vader-descendant").click(function() {
   clear4();
   $( ".vader-child img" ).css( "border", "3px solid red" );
});
</code>
    </pre>
        </div>
    <div class="hide-code">
    <h4>Código Hermana de Luke <span class="glyphicon glyphicon-triangle-bottom"></span></h4>
    
    <pre>
        <code>
$(".luke-sibling").click(function() {
   clear4();
   $( "#luke" ).next().children("img").css( "border", "3px solid red" );
});
</code>
    </pre>
        </div>
    <div class="hide-code">
    <h4>Código Hermano de Leia <span class="glyphicon glyphicon-triangle-bottom"></span></h4>
    
    <pre>
        <code>
$(".leia-sibling").click(function() {
   clear4();
   $( "#leia" ).prev().children("img").css( "border", "3px solid red" );
});
</code>
    </pre>
        </div>
    <div class="hide-code">
    <h4>Código Hijo de Leia<span class="glyphicon glyphicon-triangle-bottom"></span></h4>
    
    <pre>
        <code>
$(".leia-son").click(function() {
   clear4();
   $( ".leia-child>img" ).css( "border", "3px solid red" );
});
</code>
    </pre>
        </div>
    <div class="hide-code">
    <h4>Código Madre de Kylo <span class="glyphicon glyphicon-triangle-bottom"></span></h4>
    
    <pre>
        <code>
$(".kylo-mother").click(function() {
   clear4();
   $( "#kylo" ).parent().children("img").css( "border", "3px solid red" );
});
</code>
    </pre>
        </div>
    <div class="hide-code">
    <h4>Código Ancestros de Kylo <span class="glyphicon glyphicon-triangle-bottom"></span></h4>
    
    <pre>
        <code>
$(".kylo-ancestor").click(clear4,function() {
   clear4();
   $( "#kylo img" ).parentsUntil("#star-wars").find( ".ancestor" ).css( "border", "3px solid red" );
});
</code>
    </pre>
        </div>
    <div class="hide-code">
    <h4>Código limpiar estilos <span class="glyphicon glyphicon-triangle-bottom"></span></h4>
    
    <pre>
        <code>
function clear4() {
    $("#star-wars img").css("border", "3px transparent");
    $("#star-wars div").css("border", "3px transparent");
}
</code>
    </pre>
        </div>
    <br>
</div>
<script src="../jQueryProject/assets/js/selectores.js"></script>