Objetos de jQuery

Clase 7 de 61 • Curso de JavaScript y jQuery 2015

Kevin Caicedo Riascos

student•

Refinamiento de selecciones

$('div.foo').has('p'); // el elemento div.foo contiene elementos <p>
$('h1').not('.bar'); // el elemento h1 no posse la clase 'bar'
$('ul li').filter('.current'); // un item de una lista desordenada
// que posse la clase 'current'
$('ul li').first(); // el primer item de una lista desordenada
$('ul li').eq(5); // el sexto item de una lista desordenada

/** seudo selectores **/
:button
Selecciona elementos <button> y con el atributo type='button'
:checkbox
Selecciona elementos <input> con el atributo type='checkbox'
:checked
Selecciona elementos <input> del tipo checkbox seleccionados
:disabled
Selecciona elementos del formulario que están deshabitados
:enabled
Selecciona elementos del formulario que están habilitados
:file
Selecciona elementos <input> con el atributo type='file'
:image
Selecciona elementos <input> con el atributo type='image'
:input
Selecciona elementos <input>, <textarea> y <select>
:password
Selecciona elementos <input> con el atributo type='password'
:radio
Selecciona elementos <input> con el atributo type='radio'
:reset
Selecciona elementos <input> con el atributo type='reset'
:selected
Selecciona elementos <options> que están seleccionados
:submit
Selecciona elementos <input> con el atributo type='submit'
:text
Selecciona elementos <input> con el atributo type='text'

$('#myForm :input'); // obtiene todos los elementos inputs
// dentro del formulario #myForm

Encadenamiento

$('#content').find('h3').eq(2).html('nuevo texto para el tercer elemento h3');

Obtener propiedades CSS

$('h1').css('fontSize'); // devuelve una cadena de caracteres como "19px"
$('h1').css('font-size');

Establecer propiedades CSS

$('h1').css('fontSize', '100px'); // establece una propiedad individual CSS
$('h1').css({
'fontSize' : '100px',
'color' : 'red'
}); // establece múltiples propiedades CSS

Trabajar con clases

var $h1 = $('h1');

$h1.addClass('big');
$h1.removeClass('big');
$h1.toggleClass('big');

if ($h1.hasClass('big')) { ... }

Métodos básicos sobre Dimensiones

$('h1').width('50px'); // establece el ancho de todos los elementos H1
$('h1').width(); // obtiene el ancho del primer elemento H1

$('h1').height('50px'); // establece el alto de todos los elementos H1
$('h1').height(); // obtiene el alto del primer elemento H1

$('h1').position(); // devuelve un objeto conteniendo
// información sobre la posición
// del primer elemento relativo al
// "offset" (posición) de su elemento padre

Establecer atributos

$('a').attr('href', 'index.html');
$('a').attr({
'title' : 'all titles are the same',
'href' : 'index.html'
});

Daniel Romero

student•

A ver los desarrolladores son humanos también y en una clase en vivo como esta, te pueden jugar una mala pasada los nervios y no acordarte como hacer una cosa, estaba intentando modificar el contenido de un elemento a través del metodo ‘attr’ que solo modifica los atributos del mismo por lo que no iba a tener el resultado que quería y lo que hizo para mi fue bien, seguir adelante con la clase.

Entiendo que hayáis pagado, como todos aquí, pero enfocarse en un fallo que dura un minuto y obviando los 32 restantes me parece una falta de comprensión y sentido común.

Platzi te allana el camino y hace el filtrado de información por ti para que aprendas de la mejor forma posible pero eso no quiere decir que sea tu única fuente de conocimiento, menos quejarse y mas estudiar.

Nelson Meza

student•

con toda la razon daniloboy grade

Abdel Mateos

student•

Dar una clase, no puede componerse muchos "Bueno, esto no funciona pero no es el alcance de la clase..." da muy mala impresion de la calidad de la enseñanza. Por otro lado, jQuery no es CSS, y más cuando quien esta de docente no se le ve muy agusto con el CSS.

Pedro Matías Cuevas Meza

student•

Pensé lo mismo, pierde toda la seriedad del curso. Ojalá mejoren ese tema.

Franndy Abreu

student•

Para que el elemento se pusiera al lado, solo debía de darle display:Flex a la clase tv-show, para que los elementos puedan encajar, sin necesidad de agregar float.

Asi lo hice:

.tv-show {
  width: 100%;
  overflow: hidden;
  padding: 16px;
  background-color: white;
  margin-bottom: 16px;
  display: flex;
}```

Xarlie Garcia

student•

Para modificar el html (min: 18:23) creo que se podría hacer mediante el método html() de jQuery. Por ejemplo, en nuestro caso. --> a.html('Ir a Google');

Gonzalo Blasco

student•

Objetos de jQuery

$(function() {  
    var a = $('<a>', {  
       href: '<http://www.platzi.com>',  
       target: '\_blank',  
       html: 'Ir a Platzi'  
    });  
      
    $('#app-body').append(a);  
    console.log(a.attr('href'));  
});

$(function() {  
    $('h1').addClass('danger');  
      
    setTimeOut(function() {  
        $('h1').toggleClass('danger'); // Pone y quita la clase, según corresponda  
    }, 1500);  
};

* Las instancias de un mismo elemento no son iguales entre sí pero sí sus partes

$(function() {  
    var $h1 = $('h1');  
    var $h1b = $('h1');  
      
    console.log($h1 === $h1b); // false  
    console.log($h1[0] === $h1b[0]); // true  
});

$(function() {  
    $('header#app-header')  
        .append($('<p>', {html: 'Me acaban de crear'}));  
});

Papel
Photoshop
HTML
CSS
JavaScript

Camilo Fernández

student•

Para que quede la imagen al lado del texto hay que darle un width tanto al div donde está la imagen como al de la descripcion

Almudena Guerras

student•

JQUERY OBJECTvar $h1 = $ (‘h1’);
var $h1b = $ (‘h1’);

var $h1 y var $h1b no son lo mismo. Aunque estén referenciando al mismo elemento del DOM, para javasript son Objetos diferentes.

Álvaro René Sánchez Serrano

student•

¿Cuál es la diferencia entre has() y filter()?

Ivan de Jesus Rodriguez Jaramillo

student•

no se a ciencia cierta, pero veo que filter puede que se use para clases o id y has para elementos. pero repito no se. es lo que veo por el ejemplo que da

Ivan de Jesus Rodriguez Jaramillo

student•

no se a ciencia cierta, pero veo que filter puede que se use para clases o id y has para elementos. pero repito no se. es lo que veo por el ejemplo que da

Juan Carlos Rodriguez Gutierrez

student•

Con .attr se pueden obtener atributos y modificar a los mismos.

Sergio Blanco Moreno

student•

El atajo para el document.ready() de jQuery es:$(function() { // tu código});

Carlos Andrés Millan Satizabal

student•

Para cambiar el contenido del text de una etiqueta, por ejemplo el a, se usa el método html():

a.html(“texto a colocar”)

Jonatan Camilo Bonilla Malaver

student•

No nesariamente, porque con el método html() puedes además del texto insertar html al elemento. Puedes tener una opción mas simple si solamente el texto quieres cambiar, y es usando el método text().

Kike Vanegas

student•

Estuve viendo los comentarios sobre la clase. La mayoría de uno o dos años tal vez más. Yo soy profesor y lo he sido por casi 6 años. Hay clases buenas, hay clases malas… como docente uno sabe cuáles son en las que te lucís y en cuáles les quedaste debiendo a los estudiantes. Pero una cosa es cierta, nunca tendrás al 100% de la clase contenta con tu metodología.
Como docente te respeto, y como te respeto soy honesto con vos.

De profesor no tenés, eso lo sé desde el primer video que te ví.
He aprendido montones; y esta es mi primer encuentro con la programación. Yo no sabía nada sobre esto, y me siento muy interesado en aprender y cambiar mi area de trabajo, sabes.
Pero disfruto mucho tus videos y lo que enseñás porque lo entiendo, y las cosas que decís que no entiendo pues, lo “googleo” y particularmente el video anterior en el que hablabas de jQuery objects y éste, siento que he aprendido muchísimo.

No espero haberte dado ánimo #slifszyc pero espero, si es que seguís haciendo lo mismo, que lo sigás haciendo como lo hacés y que mejores desde la retrospectiva, más no desde los comentarios de las personas.

Iván Darío Sánchez Jiménez

student•

Tal vez es porque es un en vivo porque el curso de Fundamentos de JavaScript que es con el mismo profesor es excelente muy recomendado.

PD : en el curso de JS la gente se comienza a quejar en la parte de los request así que recomiendo pegarse una leida antes sobre los objetos xmlHttpRequest no es complicado

Exitos!!

tito jesús yanac saldaña Yanac Saldaña

student•

para que sirve "target: _blank" ?

Almudena Guerras

student•

Al escribir "target: _blank" estamos indicando al navegador que abra el enlace en una pestaña nueva. Si no lo indicáramos, en enlace se abriría por defecto en la misma página.

Diego Castillo

student•

se modifica el texto del html con:
a.html('jadadjadadad');

Juan Alexander Rodríguez Pérez

student•

@slifszyc, se le nota incómodo con el tema CSS, si es algo lindo!!

Ivan de Jesus Rodriguez Jaramillo

student•

no podia alinear los elementos y solo necesitaba el width del primer elemento en un 70% el width del segundo en 30% y los dos con display:inline-block; y listo, los dos juntos en un mismo contenedor

Steven Bedoya González

student•

Cuál es el plugin que usa Sacha para que le muestre el color que se verá en el Browser?

Leandro Acosta

student•

Color Highlighter

Albert Steward Arias Duarte

student•

Hola, alguien sabe como selecionar un option despues de crearlo? osea en el html le cree el select con un solo option pero despues en javascript le puse mas option y para selecionarlo no me deja porque lo que se agregó no se actualiza, como puedo actualizarlo?

Emilio Escobar Pérez

student•

<select id="micombo">
<option selected value="0">Default</option>
<option value="1">Opción 1</option>
<option value="2">Opción 2</option>
</select>

$(function() {
var a = $("<option></option>").val(3).html("Opción 3")
$("#micombo").append(a)
$('#micombo option[value="3"]').attr('selected', 'selected');
})

David Rosillo Ricardo

student•

Para cambiar el texto dentro del a se puede hacer con .text("mensaje"). Entonces quedaría a.text("Ir a Platzi")

Alver Alexander Grisales Ortega

student•

Cual es la diferencia de utilizar $("#app-header") a $('app-header') la direfencia esta en las comillas, tambien quiero saber la diferencia en declarar una variable string con comillas dobles o simples.

Josue Guerrero Guerrero Guerrero

student•

$("#app-header") = es un selector por ID si miras el # es el identificador del ID, $('app-header') = un selector de elemento del DOM por ejemplo si existiera un <app-header></app-header> esto lo selecionaria

Ivan de Jesus Rodriguez Jaramillo

student•

$("#app-header") estas haciendo referencia a un ID app-header y con $('app-header') haces referencia a un elemento del DOM