chore(i18n,curriculum): processed translations (#43390)
This commit is contained in:
camperbot
GitHub
@ -8,27 +8,27 @@ dashedName: change-text-inside-an-element-using-jquery
|
||||
|
||||
# --description--
|
||||
|
||||
Usando jQuery, puedes cambiar el texto entre las etiquetas de inicio y fin de un elemento. Puedes incluso cambiar el código HTML.
|
||||
Con jQuery, puedes cambiar el texto entre las etiquetas de abertura y cierre de un elemento. Puedes incluso cambiar el código HTML.
|
||||
|
||||
jQuery tiene una función llamada `.html()` que te permite añadir etiquetas HTML y texto dentro de un elemento. Cualquier contenido anterior dentro del elemento será completamente reemplazado con el contenido que proporciones usando esta función.
|
||||
jQuery tiene una función llamada `.html()` que te permite agregar etiquetas HTML y texto dentro de un elemento. Cualquier contenido anterior dentro del elemento será completamente reemplazado con el contenido que proporciones usando esta función.
|
||||
|
||||
Así es como se reescribiría y enfatizaría el texto de nuestro título:
|
||||
Así es como reescribirías y enfatizarías el texto de nuestro título:
|
||||
|
||||
```js
|
||||
$("h3").html("<em>jQuery Playground</em>");
|
||||
```
|
||||
|
||||
jQuery también tiene una función similar llamada `.text()` que solo altera el texto sin añadir etiquetas. En otras palabras, esta función no evaluará las etiquetas HTML que se le pasen. En cambio, lo tomará como el texto con el que quieres reemplazar el contenido existente.
|
||||
jQuery también tiene una función similar llamada `.text()` que solamente altera el texto sin agregar etiquetas. En otras palabras, esta función no evaluará ninguna etiqueta HTML que le pasemos, pero en cambio, la tratará como el texto por el que quieres reemplazar el contenido existente.
|
||||
|
||||
Cambia el botón con id `target4`, enfatizando su texto.
|
||||
Cambia el botón con id `target4` enfatizando su texto.
|
||||
|
||||
[ Ve a nuestro artículo sobre <em>](https://www.freecodecamp.org/news/html-elements-explained-what-are-html-tags/#em-element) para aprender la diferencia entre `<i>` y `<em>` y sus usos.
|
||||
|
||||
Ten en cuenta que, aunque la etiqueta `<i>` se ha utilizado tradicionalmente para enfatizar texto, se ha adoptado su uso desde entonces como etiqueta para íconos. La etiqueta `<em>` es ahora ampliamente aceptada como la etiqueta de énfasis. Cualquiera de las dos servirá para este desafío.
|
||||
Ten en cuenta que mientras la etiqueta `<i>` tradicionalmente se usaba para enfatizar texto, fue adaptada para ser usada como etiqueta para iconos. La etiqueta `<em>` ahora es ampliamente aceptada como la etiqueta de énfasis. Cualquiera de las dos servirá para este desafío.
|
||||
|
||||
# --hints--
|
||||
|
||||
Debes enfatizar el texto en el botón `target4` añadiendo etiquetas HTML.
|
||||
Debes enfatizar el texto en tu botón `target4` añadiendo etiquetas HTML.
|
||||
|
||||
```js
|
||||
assert.isTrue(
|
||||
@ -36,7 +36,7 @@ assert.isTrue(
|
||||
);
|
||||
```
|
||||
|
||||
De lo contrario, el texto debe permanecer inalterado.
|
||||
De lo contrario, el texto no debe modificarse.
|
||||
|
||||
```js
|
||||
assert($('#target4') && $('#target4').text().trim() === '#target4');
|
||||
|
||||
@ -11,7 +11,7 @@ dashedName: change-the-css-of-an-element-using-jquery
|
||||
|
||||
# --description--
|
||||
|
||||
Podemos cambiar también el CSS de un elemento HTML directamente con jQuery.
|
||||
También podemos cambiar el CSS de un elemento HTML utilizando directamente jQuery.
|
||||
|
||||
jQuery tiene una función llamada `.css()` que te permite cambiar el CSS de un elemento.
|
||||
|
||||
@ -21,9 +21,9 @@ Así es como cambiaríamos su color a azul:
|
||||
$("#target1").css("color", "blue");
|
||||
```
|
||||
|
||||
Esto es ligeramente diferente de una declaración CSS normal, porque la propiedad CSS y su valor están entre comillas y separados con coma en lugar de con dos puntos.
|
||||
Esto es ligeramente diferente a una declaración CSS normal, porque la propiedad CSS y su valor están entre comillas y separados con coma en lugar de con dos puntos.
|
||||
|
||||
Elimina tus selectores de jQuery, dejando `document ready function` vacía.
|
||||
Elimina tus selectores de jQuery, dejando `document ready function` vacío.
|
||||
|
||||
Selecciona `target1` y cambia su color a rojo.
|
||||
|
||||
@ -35,7 +35,7 @@ Tu elemento `target1` debe tener texto rojo.
|
||||
assert($('#target1').css('color') === 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
Debes usar solo jQuery para añadir estas clases al elemento.
|
||||
Solo debes usar jQuery para agregar estas clases al elemento.
|
||||
|
||||
```js
|
||||
assert(!code.match(/class.*animated/g));
|
||||
|
||||
@ -12,31 +12,31 @@ Además de mover elementos, también puedes copiarlos de un lugar a otro.
|
||||
|
||||
jQuery tiene una función llamada `clone()` que hace una copia de un elemento.
|
||||
|
||||
Por ejemplo, si quisiéramos copìar `target2` de nuestro `left-well` a nuestro `right-well`, usaríamos:
|
||||
Por ejemplo, si quisiéramos copiar `target2` de nuestro `left-well` a nuestro `right-well`, usaríamos:
|
||||
|
||||
```js
|
||||
$("#target2").clone().appendTo("#right-well");
|
||||
```
|
||||
|
||||
¿Notaste que esto implica usar dos funciones jQuery juntas? Esto es llamado <dfn>function chaining</dfn> (encadenamiento de funciones) y es una forma conveniente de hacer cosas con jQuery.
|
||||
¿Notaste que esto implica pegar dos funciones jQuery juntas? Esto es llamado <dfn>function chaining</dfn> (encadenamiento de funciones) y es una forma conveniente de lograr cosas con jQuery.
|
||||
|
||||
Clona tu elemento `target5` y añadelo a tu `left-well`.
|
||||
Clona tu elemento `target5` y agrégalo a tu `left-well`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Tu elemento `target5` debe estar dentro de `right-well`.
|
||||
Tu elemento `target5` debe estar dentro de tu `right-well`.
|
||||
|
||||
```js
|
||||
assert($('#right-well').children('#target5').length > 0);
|
||||
```
|
||||
|
||||
Una copia de tu elemento `target5` también debe estar dentro de `left-well`.
|
||||
Una copia de tu elemento `target5` debe estar también dentro de `left-well`.
|
||||
|
||||
```js
|
||||
assert($('#left-well').children('#target5').length > 0);
|
||||
```
|
||||
|
||||
Sólo debes usar jQuery para mover estos elementos.
|
||||
Debes usar solamente jQuery para mover estos elementos.
|
||||
|
||||
```js
|
||||
assert(!code.match(/class.*animated/g));
|
||||
|
||||
@ -13,7 +13,7 @@ dashedName: delete-your-jquery-functions
|
||||
|
||||
Estas animaciones fueron geniales al principio, pero ahora distraen un poco.
|
||||
|
||||
Elimina las tres funciones de jQuery dentro de tu `document ready function`, pero deja intacta tu función `document ready function` en sí.
|
||||
Elimina las tres funciones de jQuery que están dentro de tu `document ready function`, pero deja intacta tu función `document ready function` en sí.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@ -8,7 +8,7 @@ dashedName: disable-an-element-using-jquery
|
||||
|
||||
# --description--
|
||||
|
||||
También puedes cambiar las demás propiedades (además de las propiedades CSS) de los elementos HTML con jQuery. Por ejemplo, puedes deshabilitar botones.
|
||||
También puedes cambiar las propiedades que no son CSS de tus elementos HTML con jQuery. Por ejemplo, puedes desactivar botones.
|
||||
|
||||
Cuando deshabilitas un botón, se mostrará en gris y no se podrá hacer clic sobre este.
|
||||
|
||||
@ -24,7 +24,7 @@ Deshabilita solo el botón `target1`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Tu botón `target1` debe ser deshabilitado.
|
||||
Your `target1` button should be disabled.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@ -40,7 +40,7 @@ Ningún otro botón debe estar deshabilitado.
|
||||
assert($('#target2') && !$('#target2').prop('disabled'));
|
||||
```
|
||||
|
||||
Solo debes usar jQuery para añadir estas clases al elemento.
|
||||
Debes usar solo jQuery para agregar estas clases al elemento.
|
||||
|
||||
```js
|
||||
assert(!code.match(/disabled[^<]*>/g));
|
||||
|
||||
@ -10,13 +10,13 @@ dashedName: learn-how-script-tags-and-document-ready-work
|
||||
|
||||
Ahora estamos listos para aprender jQuery, la herramienta de JavaScript más popular de todos los tiempos.
|
||||
|
||||
Antes de empezar a usar jQuery, necesitamos añadir algunas cosas a nuestro HTML.
|
||||
Antes de empezar a usar jQuery, necesitamos agregar algunas cosas a nuestro HTML.
|
||||
|
||||
Primero, añade un elemento `script` en la parte superior de tu página. Asegúrate de cerrarlo en la siguiente línea.
|
||||
Primero, agrega un elemento `script` en la parte superior de tu página. Asegúrate de cerrarlo en la siguiente línea.
|
||||
|
||||
Tu navegador ejecutará cualquier JavaScript dentro de un elemento `script`, incluyendo jQuery.
|
||||
|
||||
Dentro de tu elemento `script`, añade este código: `$(document).ready(function() {` a tu `script`. Luego ciérralo en la siguiente línea (todavía dentro de tu elemento `script`) con: `});`
|
||||
Dentro de tu elemento `script`, agrega este código: `$(document).ready(function() {` a tu `script`. Luego ciérralo en la siguiente línea (todavía dentro de tu elemento `script`) con: `});`
|
||||
|
||||
Aprenderemos más sobre `functions` más tarde. Lo importante a saber es que el código que pongas dentro de esta `function` (función) se ejecutará tan pronto como tu navegador haya cargado tu página.
|
||||
|
||||
@ -39,7 +39,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Debes añadir `$(document).ready(function() {` al principio de tu elemento `script`.
|
||||
Debes agregar `$(document).ready(function() {` al principio de tu elemento `script`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -24,7 +24,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Sólo debes utilizar jQuery para remover este elemento.
|
||||
Solo debes utilizar jQuery para remover este elemento.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -29,7 +29,7 @@ La clase `btn-default` debe ser eliminada de todos los elementos `button`.
|
||||
assert($('.btn-default').length === 0);
|
||||
```
|
||||
|
||||
Sólo debes usar jQuery para eliminar esta clase del elemento.
|
||||
Solo debes usar jQuery para eliminar esta clase del elemento.
|
||||
|
||||
```js
|
||||
assert(code.match(/btn btn-default/g));
|
||||
|
||||
@ -17,13 +17,13 @@ Afortunadamente, jQuery tiene algunos otros trucos para apuntar a los elementos
|
||||
|
||||
jQuery usa selectores de CSS para apuntar elementos. El selector `target:nth-child(n)` de CSS, te permite seleccionar todos los enésimos elementos con el tipo de elemento o la clase apuntada.
|
||||
|
||||
Así es como le darías al tercer elemento en cada pozo la clase de rebote:
|
||||
Así es como le darías al tercer elemento en cada "well" la clase de rebote:
|
||||
|
||||
```js
|
||||
$(".target:nth-child(3)").addClass("animated bounce");
|
||||
```
|
||||
|
||||
Has que el segundo niño en cada uno de sus elementos de pozo rebote. Debes seleccionar los hijos de los elementos con la clase `target`.
|
||||
Haz que el segundo niño en cada uno de sus elementos de "well" rebote. Debes seleccionar los hijos de los elementos con la clase `target`.
|
||||
|
||||
# --hints--
|
||||
|
||||
@ -48,7 +48,7 @@ Debes usar el selector `:nth-child()` para modificar estos elementos.
|
||||
assert(code.match(/\:nth-child\(/g));
|
||||
```
|
||||
|
||||
Solo debes usar jQuery para añadir estas clases al elemento.
|
||||
Solo debes usar jQuery para agregar estas clases al elemento.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -11,15 +11,15 @@ dashedName: target-elements-by-class-using-jquery
|
||||
|
||||
# --description--
|
||||
|
||||
¿Ves como hicimos que todos tus elementos `button` reboten? Los seleccionamos con `$("button")`, luego agregamos algo de clases CSS a ellos con `.addClass("animated bounce");`.
|
||||
¿Ves cómo hemos hecho que todos tus elementos `button` reboten? Los seleccionamos con `$("button")`, luego agregamos algo de clases CSS a ellos con `.addClass("animated bounce");`.
|
||||
|
||||
Acabas de usar la función `.addClass()` de jQuery, que te permite añadir clases a los elementos.
|
||||
Acabas de usar la función `.addClass()` de jQuery, que te permite agregar clases a los elementos.
|
||||
|
||||
Primero, apuntemos tus elementos `div` con la clase `well` usando el selector `$(".well")`.
|
||||
|
||||
Ten en cuenta que, al igual que con las declaraciones CSS, escribes un `.` antes del nombre de la clase.
|
||||
|
||||
Luego usa la función `.addClass()` de jQuery para añadir las clases `animated` y `shake`.
|
||||
Luego usa la función `.addClass()` de jQuery para agregar las clases `animated` y `shake`.
|
||||
|
||||
Por ejemplo, puedes hacer que todos los elementos con la clase `text-primary` se agiten agregando lo siguiente a tu función `document ready function`:
|
||||
|
||||
@ -35,7 +35,7 @@ Debes usar la función jQuery `addClass()` para dar las clases `animated` y `sha
|
||||
assert($('.well').hasClass('animated') && $('.well').hasClass('shake'));
|
||||
```
|
||||
|
||||
Solo debes usar jQuery para añadir estas clases al elemento.
|
||||
Debes usar solo jQuery para agregar estas clases al elemento.
|
||||
|
||||
```js
|
||||
assert(!code.match(/class\.\*animated/g));
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bad87fee1348bd9aeda08826
|
||||
title: Apunta a elementos por clase usando jQuery
|
||||
title: Apunta a elementos por id usando jQuery
|
||||
challengeType: 6
|
||||
forumTopicId: 18317
|
||||
required:
|
||||
@ -17,7 +17,7 @@ Primero apunta a tu elemento `button` con el id `target3` usando el selector `$(
|
||||
|
||||
Ten en cuenta que, al igual que con las declaraciones CSS, escribes un `#` antes del nombre del id.
|
||||
|
||||
Luego usa la función `.addClass()` de jQuery para añadir las clases `animated` y `fadeOut`.
|
||||
Luego usa la función `.addClass()` de jQuery para agregar las clases `animated` y `fadeOut`.
|
||||
|
||||
Así es como harás que el elemento `button` con el id `target6` se desvanezca:
|
||||
|
||||
@ -42,7 +42,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Solo debes usar jQuery para agregar estas clases al elemento.
|
||||
Debes usar solo jQuery para agregar estas clases al elemento.
|
||||
|
||||
```js
|
||||
assert(!code.match(/class.*animated/g));
|
||||
|
||||
@ -39,7 +39,7 @@ Debes usar el selector `:even` para modificar estos elementos.
|
||||
assert(code.match(/\:even/g));
|
||||
```
|
||||
|
||||
Solo debes usar jQuery para añadir estas clases al elemento.
|
||||
Solo debes usar jQuery para agregar estas clases al elemento.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -17,7 +17,7 @@ Ahora vamos a escribir nuestra primera declaración de jQuery. Todas las funcion
|
||||
|
||||
jQuery a menudo selecciona un elemento HTML con un <dfn>selector</dfn>, y luego le hace algo a ese elemento.
|
||||
|
||||
Por ejemplo, hagamos que todos tus elementos `button` reboten. Simplemente añade este código dentro de tu función de documento listo (document ready):
|
||||
Por ejemplo, hagamos que todos tus elementos `button` reboten. Simplemente agrega este código dentro de tu función document ready:
|
||||
|
||||
```js
|
||||
$("button").addClass("animated bounce");
|
||||
@ -33,13 +33,13 @@ Debes usar la función de jQuery `addClass()` para dar las clases `animated` y `
|
||||
assert($('button').hasClass('animated') && $('button').hasClass('bounce'));
|
||||
```
|
||||
|
||||
Solo debes usar jQuery para añadir estas clases al elemento.
|
||||
Solo debes usar jQuery para agregar estas clases al elemento.
|
||||
|
||||
```js
|
||||
assert(!code.match(/class.*animated/g));
|
||||
```
|
||||
|
||||
Tu código de jQuery debería estar dentro de la función `$(document).ready();`.
|
||||
Tu código de jQuery debe estar dentro de la función `$(document).ready();`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -49,7 +49,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Solo debes usar jQuery para añadir estas clases al elemento.
|
||||
Solo debes usar jQuery para agregar estas clases al elemento.
|
||||
|
||||
```js
|
||||
assert(code.match(/<div class="well" id="left-well">/g));
|
||||
|
||||
@ -13,17 +13,17 @@ dashedName: target-the-same-element-with-multiple-jquery-selectors
|
||||
|
||||
Ahora conoces tres maneras de seleccionar elementos: por tipo: `$("button")`, por clase: `$(".btn")`, y por id `$("#target1")`.
|
||||
|
||||
Aunque es posible añadir múltiples clases en una sola llamada `.addClass()`, vamos a añadirlos al mismo elemento en *tres maneras diferentes*.
|
||||
Aunque es posible agregar múltiples clases en una sola llamada `.addClass()`, vamos a agregarlos al mismo elemento de *tres maneras diferentes*.
|
||||
|
||||
Usando `.addClass()`, añade solo una clase a la vez al mismo elemento, de tres maneras diferentes:
|
||||
Usando `.addClass()`, agrega solo una clase a la vez al mismo elemento, de tres maneras diferentes:
|
||||
|
||||
Añade la clase `animated` a todos los elementos con el tipo `button`.
|
||||
Agrega la clase `animated` a todos los elementos con el tipo `button`.
|
||||
|
||||
Añade la clase `shake` a todos los botones con la clase `.btn`.
|
||||
Agrega la clase `shake` a todos los botones con la clase `.btn`.
|
||||
|
||||
Añade la clase `btn-primary` al botón con id `#target1`.
|
||||
Agrega la clase `btn-primary` al botón con id `#target1`.
|
||||
|
||||
**Nota:** Solo debes apuntar a un elemento y añadir solo una clase a la vez. En total, tus tres selectores individuales terminarán agregando las tres clases `shake`, `animated`, y `btn-primary` a `#target1`.
|
||||
**Nota:** Solo debes apuntar a un elemento y agregar solo una clase a la vez. En total, tus tres selectores individuales terminarán agregando las tres clases `shake`, `animated`, y `btn-primary` a `#target1`.
|
||||
|
||||
# --hints--
|
||||
|
||||
@ -45,7 +45,7 @@ Tu código debe usar el selector `$("#target1")`.
|
||||
assert(code.match(/\$\s*?\(\s*?(?:'|")\s*?#target1\s*?(?:'|")/gi));
|
||||
```
|
||||
|
||||
Solo debes añadir una clase con cada uno de tus tres selectores.
|
||||
Solo debes agregar una clase con cada uno de tus tres selectores.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@ -10,7 +10,7 @@ dashedName: use-appendto-to-move-elements-with-jquery
|
||||
|
||||
Ahora intentemos mover elementos de un `div` a otro.
|
||||
|
||||
jQuery tiene una función llamada `appendTo()` que te permite seleccionar elementos HTML y añadirlos a otro elemento.
|
||||
jQuery tiene una función llamada `appendTo()` que te permite seleccionar elementos HTML y agregarlos a otro elemento.
|
||||
|
||||
Por ejemplo, si quisiéramos mover `target4` desde nuestro "right well" a nuestro "left well", usaríamos:
|
||||
|
||||
@ -34,7 +34,7 @@ Tu elemento `target2` debe estar dentro de `right-well`.
|
||||
assert($('#right-well').children('#target2').length > 0);
|
||||
```
|
||||
|
||||
Sólo debes usar jQuery para mover estos elementos.
|
||||
Solo debes usar jQuery para mover estos elementos.
|
||||
|
||||
```js
|
||||
assert(!code.match(/class.*animated/g));
|
||||
|
||||
@ -17,11 +17,11 @@ jQuery también puede seleccionar al elemento `body`.
|
||||
|
||||
Así es como haríamos que el cuerpo entero se desvaneciera: `$("body").addClass("animated fadeOut");`
|
||||
|
||||
Pero hagamos algo más dramático. Añade las clases `animated` y `hinge` a tu elemento `body`.
|
||||
Pero hagamos algo más dramático. Agrega las clases `animated` y `hinge` a tu elemento `body`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Debes añadir las clases `animated` y `hinge` a tu elemento `body`.
|
||||
Debes agregar las clases `animated` y `hinge` a tu elemento `body`.
|
||||
|
||||
```js
|
||||
assert($('body').hasClass('animated') && $('body').hasClass('hinge'));
|
||||
|
||||
Reference in New Issue
Block a user