"Inside your <code>script</code> element, add this code: <code>$(document).ready(function() {</code> to your <code>script</code>. Then close it on the following line (still inside your <code>script</code> element) with: <code>});</code>",
"We'll learn more about <code>functions</code> later. The important thing to know is that code you put inside this <code>function</code> will run as soon as your browser has loaded your page.",
"assert(code.match(/<\\/script\\s*>/g) && code.match(/<script(\\sasync|\\sdefer)*(\\s(charset|src|type)\\s*=\\s*[\"\\']+[^\"\\']*[\"\\']+)*(\\sasync|\\sdefer)*\\s*>/g) && code.match(/<\\/script\\s*>/g).length === code.match(/<script(\\sasync|\\sdefer)*(\\s(charset|src|type)\\s*=\\s*[\"\\']+[^\"\\']*[\"\\']+)*(\\sasync|\\sdefer)*\\s*>/g).length, 'message: Create a <code>script</code> element making sure it is valid and has a closing tag.');",
"assert(code.match(/\\$\\s*?\\(\\s*?document\\s*?\\)\\.ready\\s*?\\(\\s*?function\\s*?\\(\\s*?\\)\\s*?\\{/g), 'message: You should add <code>$(document).ready<wbr>(function() {</code> to the beginning of your <code>script</code> element.');",
"assert(code.match(/\\n*?\\s*?\\}\\s*?\\);/g), 'message: Close your <code>$(document).ready<wbr>(function() {</code> function with <code>});</code>');"
"title":"Lerne, wie Script Tags und Document Ready funktionieren",
"description":[
"Jetzt sind wir bereit jQuery zu lernen, das populärste JavaScript-Tool aller Zeiten. Mach dir über JavaScript keine Sorgen - über dieses werden wir bald sprechen.",
"Bevor wir jQuery nutzen können, müssen wir erst ein paar Dinge zu unserem HTML hinzufügen.",
"Füge als erstes ein <code>script</code> Element am Beginn deiner Seite ein. Vergewissere dich, dass du das Element in der nächsten Zeile geschlossen hast.",
"Dein Browser wird jegliches JavaScript, jQuery eingeschlossen, innerhalb eines <code>script</code> Elements ausführen.",
"Füge innerhalb deines <code>script</code> Elements folgenden Code hinzu: <code>$(document).ready(function() {</code>. Schließe ihn danach in der nächsten Zeile (noch immer innerhalb deines <code>script</code> Elements) mit: <code>});</code>",
"Wir werden später noch mehr über <code>Funktionen</code> lernen. Wichtig zu wissen ist, dass der Code innerhalb der <code>Funktion</code> ausgeführt wird, sobald der Browser die Seite geladen hat.",
"Das ist wichtig, denn ohne deine <code>Document Ready Funktion</code> könnte dein Code ausgeführt werden, bevor das HTML gerendert wurde - was zu Fehlern führen kann."
]
},
"es":{
"title":"Aprende cómo funcionan las etiquetas de programa y la función de documento listo.",
"description":[
"Ahora estamos listos para aprender jQuery, la herramienta de JavaScript más popular de todos los tiempos. No te preocupes por JavaScript en si --lo cubriremos pronto.",
"Antes de que podamos comenzar a usar jQuery, tenemos que añadir algunas cosas a nuestro HTML.",
"En primer lugar, añade un elemento de programa <code>script</code> en la parte superior de la página. Asegúrate de cerrarlo en la línea siguiente. ",
"Tu navegador ejecutará todo JavaScript dentro de un elemento <code>script</code>, incluyendo jQuery.",
"Dentro de tu elemento <code>script</code>, agrega este código: <code>$(document).ready(function () {</code> A continuación, ciérralo en la línea siguiente (aún dentro de tu elemento <code>script</code>) con: <code>})</code>",
"Más adelante aprenderemos más acerca de funciones. Lo importante es saber que el código que pongas dentro de esta función (<code>function</code>) se ejecutará tan pronto como tu navegador haya cargado la página.",
"Esto es importante porque sin tu <code>función de documento listo</code>, tu código puede ejecutarse antes de que se haya presentado el HTML, lo que podría causar errores."
]
},
"fr":{
"title":"Apprendre comment fonctionnent les balises Script et Document Ready",
"description":[
"Nous sommes maintenant prêt à apprendre jQuery, l'outil Javascript le plus populaire de tout les temps. Ne vous inquiétez pas à propos de JavaScript lui-même, nous y viendrons bientôt.",
"Avant de pouvoir utiliser jQuery, nous avons besoin d'ajouter certaines choses à notre HTML.",
"Premièrement, ajoutez un élément <code>script</code> en haut de votre page. Assurez-vous de le fermer à la ligne suivante.",
"Votre navigateur exécutera JavaScript à l'intérieur de l'élement <code>script</code>, y compris jQuery.",
"Á l'intérieur de votre élement <code>script</code>, ajoutez ce code : <code>$(document).ready(function() {</code> à votre <code>script</code>. Puis fermez-le à la ligne suivante (toujours à l'intérieur de votre élement <code>script</code> avec: <code>});</code>",
"Nous en apprendrons plus sur les <code>functions</code> plus tard. Le plus important à savoir est que le code à l'intérieur de cette <code>function</code> sera exécuté dès que le navigateur aura chargé votre page.",
"Ceci est important car sans votre <code>document ready function</code>, votre code pourrait être exécuté avant que votre HTML soit affiché, ce qui pourrait causer des problèmes."
"Now let's write our first jQuery statement. All jQuery functions start with a <code>$</code>, usually referred to as a <code>dollar sign operator</code>, or as <code>bling</code>.",
"Note that we've already included both the jQuery library and the Animate.css library in the background so that you can use them in the editor. So you are using jQuery to apply the Animate.css <code>bounce</code> class to your <code>button</code> elements.",
"Additionally make sure to use <code>$(\"button\").addClass(\"animated bounce\");</code> instead of <code>$('button').addClass(\"animated bounce\");</code> since single-quote selectors will not pass our tests."
"assert($(\"button\").hasClass(\"animated\") && $(\"button\").hasClass(\"bounce\"), 'message: Use the jQuery <code>addClass()</code> function to give the classes <code>animated</code> and <code>bounce</code> to your <code>button</code> elements.');",
"assert(!code.match(/class.*animated/g), 'message: Only use jQuery to add these classes to the element.');"
"title":"HTML-Elemente mit Selektoren durch jQuery auswählen",
"description":[
"Jetzt haben wir eine <code>Document Ready Funktion</code>.",
"Lass uns unser erstes jQuery Statement schreiben. Alle jQuery Funktionen starten mit einem <code>$</code>, für gewöhnlich als <code>Dollar-Zeichen Operator</code> bezeichnet.",
"jQuery wählt oft HTML-Elemente mit einem <code>Selektor</code> aus, um dann mit diesen Elementen etwas zu machen.",
"Zum Beispiel, lasse alle deine <code>Button</code> Elemente hüpfen. Dazu musst du nur folgenden Code in deine <code>Document Ready Funktion</code> hinzufügen:",
"Beachte, dass wir bereits jQuery und Animate.css im Hintergrund hinzugefügt haben, damit du diese im Editor nutzen kannst. Du nutzt also jQuery um die <code>bounce</code> Klasse von Animate.css zu deinen <code>Button</code> Elementen hinzuzufügen."
]
},
"es":{
"title":"Elige elementos HTML usando selectores y jQuery",
"description":[
"Ya tenemos una <code>función de documento listo</code>.",
"Ahora vamos a escribir nuestra primera instrucción jQuery. Todas las funciones de jQuery comienzan con un <code>$</code>, al que suele referirse como <code>operador dólar</code>, o simplemente como <code>bling</code>. ",
"jQuery a menudo selecciona un elemento HTML con un <code>selector</code>, y luego le hace algo a ese elemento.",
"Por ejemplo, hagamos que todos tus elementos <code>button</code> reboten. Sólo tienes que añadir este código dentro de la función de documento listo: ",
"Ten en cuenta que ya hemos incluido tanto la biblioteca jQuery como la biblioteca Animate.css en segundo plano para que pueda utilizarlos en el editor. Así que estás usando jQuery para aplicar la clase <code>bounce</code> de Animate.css a tus elementos <code>button</code>."
]
},
"fr":{
"title":"Cibler des élements HTML par sélecteurs avec jQuery",
"description":[
"Nous avons maintenant un <code>document ready function</code>.",
"Nous allons à présent écrire notre première expression jQuery. Chaque fonction jQuery commence avec un <code>$</code>, habituellement nommé <code>opérateur dollar</code>, ou <code>bling</code>.",
"jQuery sélectionne souvent un élément HTML à l'aide d'un <code>selector</code>, puis fait quelque chose à cet élement.",
"Par exemple, faisons en sorte que tous nos <code>button</code> rebondissent. Ajoutez juste ce code à l'intérieur de votre <code>$(document).ready(function(){</code>:",
"Notez que nous avons déjà inclus à la fois la librairie jQuery et la librairie Animate.css en amont donc nous pouvons les utiliser dans l'éditeur. Donc, vous utilisez jQuery pour appliquer la classe <code>bounce</code> d'Animate.css à vos éléments <code>button</code>.",
"De plus, assurez-vous d'utiliser <code>$(\"button\").addClass(\"animated bounce\");</code> et non <code>$('button').addClass(\"animated bounce\");</code> car les apostrophes ne passeront pas nos tests."
"You see how we made all of your <code>button</code> elements bounce? We selected them with <code>$(\"button\")</code>, then we added some CSS classes to them with <code>.addClass(\"animated bounce\");</code>.",
"You just used jQuery's <code>.addClass()</code> function, which allows you to add classes to elements.",
"For example, you could make all the elements with the class <code>text-primary</code> shake by adding the following to your <code>document ready function</code>:",
"assert($(\".well\").hasClass(\"animated\") && $(\".well\").hasClass(\"shake\"), 'message: Use the jQuery <code>addClass()</code> function to give the classes <code>animated</code> and <code>shake</code> to all your elements with the class <code>well</code>.');",
"assert(!code.match(/class\\.\\*animated/g), 'message: Only use jQuery to add these classes to the element.');"
"title":"Elemente anhand von Klassen mit jQuery auswählen",
"description":[
"Siehst du, wie wir alle deine <code>Button</code> Elemente hüpfen haben lassen? Wir haben sie mit <code>$(\"button\")</code> ausgewählt, dann CSS-Klassen mit <code>.addClass(\"animated bounce\");</code> hinzugefügt.",
"Du hast gerade jQuery's <code>.addClass()</code> Funktion genutzt, die dir erlaubt, Klassen zu Elemente hinzuzufügen.",
"Wähle als erstes deine <code>div</code> Elemente mit der Klasse <code>well</code>, indem du den <code>$(\".well\")</code> Selektor nutzt.",
"Bedenke, dass du - genauso wie bei CSS-Deklarationen - einen <code>.</code> vor den Namen der Klasse setzen musst.",
"Dann nutze die jQuery Funktion <code>.addClass()</code> um die Klassen <code>animated</code> und <code>shake</code> hinzuzufügen.",
"Zum Beispiel könntest du alle Elemente mit der Klasse <code>text-primary</code> schütteln lassen, indem du folgendes zu deiner <code>Document Ready Funktion</code> hinzufügst:",
"title":"Elige elementos por su clase usando jQuery",
"description":[
"¿Viste como hicimos rebotar todos tus elementos <code>button</code>? Los seleccionamos con <code>$(\"button\")</code>, y luego les añadimos algunas clases CSS con <code>.addClass(\"animated bounce\");.</code> ",
"Acabas de usar la función <code>addClass()</code> de jQuery, que te permite añadir clases a los elementos.",
"En primer lugar, apuntemos a tus elementos <code>div</code> que tengan la clase <code>well</code> usando el selector <code>$(\".well\")</code>.",
"Ten en cuenta que, al igual que con las declaraciones CSS, escribes un <code>.</code> antes del nombre de la clase.",
"A continuación, utiliza la función <code>.addClass()</code> de jQuery para agregar las clases <code>animated</code> y <code>shake</code>.",
"Por ejemplo, podrías hacer que todos los elementos con la clase <code>text-primary</code> se sacudieran añadiendo lo siguiente a tu <code>función de documento listo</code>:",
"title":"Cibler les élements par Classe avec jQuery",
"description":[
"Voyez comment nous avons fait rebondir tous nos éléments <code>button</code>? Nous les avons sélectionné avec <code>$(\"button\")</code>, puis nous leur avons ajouté des classes CSS avec <code>.addClass(\"animated bounce\");</code>.",
"Vous venez d'utiliser la fonction jQuery <code>.addClass()</code>, ce qui nous permet d'ajouter des classes aux éléments.",
"Tout d'abord, ciblons nos éléments <code>div</code> qui ont la classe <code>well</code> en utilisant le sélecteur <code>$(\".well\")</code>.",
"Notez que, tout comme les expressions CSS, vous ajoutez un <code>.</code> avant le nom de la classe.",
"Puis, vous utilisez la fonction jQuery <code>.addClass()</code> pour ajouter les classes <code>animated</code> et <code>shake</code>.",
"Par exemple, vous pouvez faire en sorte que tous les éléments avec la classe <code>text-primary</code> s'agitent en ajoutant le code suivant à votre <code>document ready function</code>:",
"assert($(\"#target3\").hasClass(\"animated\"), 'message: Select the <code>button</code> element with the <code>id</code> of <code>target3</code> and use the jQuery <code>addClass()</code> function to give it the class of <code>animated</code>.');",
"assert(($(\"#target3\").hasClass(\"fadeOut\") || $(\"#target3\").hasClass(\"fadeout\")) && code.match(/\\$\\(\\s*.#target3.\\s*\\)/g), 'message: Target the element with the id <code>target3</code> and use the jQuery <code>addClass()</code> function to give it the class <code>fadeOut</code>.');",
"Delete all three of these jQuery functions from your <code>document ready function</code>, but leave your <code>document ready function</code> itself intact."
"assert(!code.match(/e\"\\);/g) && !code.match(/t\"\\);/g), 'message: Delete all three of your jQuery functions from your <code>document ready function</code>.');",
"assert(code.match(/<script>/g), 'message: Leave your <code>script</code> element intact.');",
"assert(code.match(/\\$\\(document\\)\\.ready\\(function\\(\\)\\s?\\{/g), 'message: Leave your <code>$(document).ready(function() {</code> to the beginning of your <code>script</code> element.');",
"assert(code.match(/\\n\\s+?\\}\\);/g), 'message: Leave your \"document ready function\" closing <code>})</code> intact.');",
"assert(code.match(/<\\/script>/g) && code.match(/<script/g) && code.match(/<\\/script>/g).length === code.match(/<script/g).length, 'message: Leave your <code>script</code> element closing tag intact.');"
"Anfangs waren diese Animationen noch cool, jetzt sind sie aber ein wenig störend.",
"Lösche alle drei jQuery Funktionen deiner <code>Document Ready Funktion</code>, aber lasse die <code>Document Ready Funktion</code> selbst intakt."
]
},
"es":{
"title":"Elimina tus funciones jQuery",
"description":[
"Estas animaciones eran divertidas al principio, pero ahora se están volviendo una distracción.",
"Elimina esas tres funciones jQuery de tu <code>función de documento listo</code>, pero deja intacta la declaración de la <code>función de documento listo</code>."
]
},
"fr":{
"title":"Effacer vos fonctions jQuery",
"description":[
"Ces animations sont sympathiques à première vue, mais maintenant elles deviennent plutôt distrayantes.",
"Effacez les trois fonctions jQuery de votre <code>document ready function</code>, mais laissez votre <code>document ready function</code> lui-même intact."
"Now you know three ways of targeting elements: by type: <code>$(\"button\")</code>, by class: <code>$(\".btn\")</code>, and by id <code>$(\"#target1\")</code>.",
"Although it is possible to add multiple classes in a single <code>.addClass()</code> call, let's add them to the same element in <em>three separate ways</em>.",
"Add the <code>btn-primary</code> class to the button with id <code>#target1</code>.",
"<strong>Note</strong><br>You should only be targeting one element and adding only one class at a time. Altogether, your three individual selectors will end up adding the three classes <code>shake</code>, <code>animated</code>, and <code>btn-primary</code> to <code>#target1</code>."
"assert(code.match(/addClass/g) && code.match(/addClass\\s*?\\(\\s*?('|\")\\s*?[\\w-]+\\s*?\\1\\s*?\\)/g).length > 2, 'message: Only add one class with each of your three selectors.');",
"assert($(\"#target1\").hasClass(\"animated\") && $(\"#target1\").hasClass(\"shake\") && $(\"#target1\").hasClass(\"btn-primary\"), 'message: Your <code>#target1</code> element should have the classes <code>animated</code>‚ <code>shake</code> and <code>btn-primary</code>.');",
"assert(!code.match(/class.*animated/g), 'message: Only use jQuery to add these classes to the element.');"
"title":"Wähle das gleiche Element mit mehreren jQuery Selektoren aus",
"description":[
"Bis jetzt kennst du drei verschiedene Wege um Elemente auszuwählen: mit dem Element-Typ: <code>$(\"button\")</code>, mit der Element-Klasse: <code>$(\".btn\")</code>, und der Element-ID: <code>$(\"#target1\")</code>.",
"Auch wenn es möglich ist, mehrere Klassen in einem einzigen <code>.addClass()</code> Aufruf hinzuzufügen, lass uns jetzt die Klassen in drei verschiedenen Wegen dem Element hinzufügen.",
"Nutze jeden der oben erwähnten jQuery Selektoren und die <code>addClass()</code> Funktion:",
"Füge die Klasse <code>animated</code> zu allen Elementen des Typs <code>button</code> hinzu.",
"Füge die Klasse <code>shake</code> zu allen Buttons mit der Klasse <code>.btn</code> hinzu.",
"Füge die Klasse <code>btn-primary</code> zu dem Button mit der ID <code>#target1</code> hinzu."
]
},
"es":{
"title":"Elige un mismo elemento con múltiples selectores jQuery",
"description":[
"Ahora ya sabes tres formas de seleccionar elementos: por tipo <code>$(\"button\")</code>, por clase <code>$(\".btn\")</code>, y por identificación <code>$(\"#target1\")</code>. ",
"Aunque es posible agregar varias clases en una sola llamada a <code>.addClass()</code>, vamos a añadirlas al mismo elemento de tres maneras diferentes.",
"Usa cada uno de los selectores jQuery vistos y la función <code>addClass()</code> para:",
"Agregar la clase <code>animated</code> a todos los elementos con tipo <code>button</code>.",
"Agregar la clase <code>shake</code> a todos los botones con clase <code>.btn</code>.",
"Agregar la clase <code>btn-primary</code> al botón con identificación <code>#target1</code>."
]
},
"fr":{
"title":"Cibler le même élément avec plusieurs sélecteurs jQuery",
"description":[
"À présent, vous connaissez trois façons de cibler les éléments: par type: <code>$(\"button\")</code>, par classe: <code>$(\".btn\")</code>, et par id <code>$(\"#target1\")</code>.",
"En utilisant <code>.addClass()</code>, ajoutez uniquement une classe à la fois au même élément, de trois façons différentes:",
"Ajoutez la classe <code>animated</code> à tous les éléments de type <code>button</code>.",
"Ajoutez la classe <code>shake</code> à tous les boutons qui ont la classe <code>.btn</code>.",
"Ajoutez la classe <code>btn-primary</code> au bouton qui a l'id <code>#target1</code>."
"title":"Remove Classes from an element with jQuery",
"description":[
"In the same way you can add classes to an element with jQuery's <code>addClass()</code> function, you can remove them with jQuery's <code>removeClass()</code> function.",
"assert($(\".btn-default\").length === 0, 'message: Remove the <code>btn-default</code> class from all of your <code>button</code> elements.');",
"assert(code.match(/btn btn-default/g), 'message: Only use jQuery to remove this class from the element.');",
"assert(code.match(/\\.[\\v\\s]*removeClass[\\s\\v]*\\([\\s\\v]*('|\")\\s*btn-default\\s*('|\")[\\s\\v]*\\)/gm), 'message: Only remove the <code>btn-default</code> class.');"
"title":"Entferne Klassen von einem Element mit jQuery",
"description":[
"Genauso wie du Klassen mit der jQuery Funktion <code>addClass()</code> hinzufügen kannst, kannst du mit der jQuery Funktion <code>removeClass()</code> Klassen entfernen.",
"So könntest du das bei einem spezifischen Button machen:",
"Lass uns alle <code>btn-default</code> Klassen von unseren <code>Button</code> Elementen entfernen."
]
},
"es":{
"title":"Elimina clases de un elemento con jQuery",
"description":[
"De la misma manera que puedes agregar clases a un elemento con la función <code>addClass()</code> de jQuery, puedes eliminarlas con la función <code>removeClass()</code>.",
"He aquí cómo puedes hacerlo para un botón específico:",
"Vamos a quitar la clase <code>btn-default</code> de todos nuestros elementos <code>button</code>."
]
},
"fr":{
"title":"Supprimer des classes d'un élément avec jQuery",
"description":[
"De la même façon que vous pouvez ajouter des classes à un élément avec la fonction jQuery <code>addClass()</code>, vous pouvez les supprimer avec la fonction jQuery <code>removeClass()</code>.",
"Voici comment procéder pour un bouton spécifique:",
"This is slightly different from a normal CSS declaration, because the CSS property and its value are in quotes, and separated with a comma instead of a colon.",
"Delete your jQuery selectors, leaving an empty <code>document ready function</code>.",
"Select <code>target1</code> and change its color to red."
"Das ist ein wenig anders als eine normale CSS-Deklaration, weil die CSS-Eigenschaft und deren Wert in Anführungszeichen sind und durch ein Komma anstatt eines Doppelpunkts getrennt werden.",
"Lösche deine jQuery Selektoren, damit eine leere <code>Document Ready Funktion</code> übrig bleibt.",
"Wähle <code>target1</code> und ändere dessen Farbe zu Rot."
]
},
"es":{
"title":"Cambia el CSS de un elemento usando jQuery",
"description":[
"También podemos cambiar el CSS de un elemento HTML directamente con jQuery.",
"jQuery tiene una función llamada <code>.css()</code> que te permite cambiar el CSS de un elemento.",
"Esto es un poco diferente a una declaración normal CSS, porque la propiedad CSS y su valor están entre comillas y separadas por una coma en lugar de dos puntos.",
"Elimina tus selectores jQuery, dejando en blanco la <code>función de documento listo</code>.",
"Selecciona <code>target1</code> y cambia su color a rojo."
]
},
"fr":{
"title":"Changer le CSS d'un élément en utilisant jQuery",
"description":[
"Nous pouvons aussi changer le CSS d'un élément HTML directement avec jQuery.",
"jQuery dispose d'une fonction appelée <code>.css()</code> qui vous permet de changer le CSS d'un élément.",
"Ceci est légèrement différent d'une expression CSS normale, car la propriété CSS et sa valeur sont entre guillemets, et separées par une virgule au lieu de deux points.",
"Effacez vos sélecteurs jQuery, laissant votre <code>document ready function</code> vide.",
"Sélectionnez <code>target1</code> et changez sa couleur en rouge."
"title":"Changer le texte à l'intérieur d'un élément en utilisant jQuery",
"description":[
"En utilisant jQuery, vous pouvez changer le texte entre les balises ouvrante et fermante d'un élément. Vous pouvez même changer les balises HTML.",
"jQuery dispose d'une fonction appelée <code>.html()</code> qui vous permet d'ajouter des balises HTML et du texte à l'intérieur d'un élément. Tout le contenu de l'élément sera alors remplacé par le contenu que vous indiquerez en utilisant la fonction.",
"Voici comment vous pourriez ré-écrire et mettre en italique le texte de notre titre:",
"jQuery dispose également d'une fonction similaire appelée <code>.text()</code> qui change uniquement le texte sans ajouter de balises. Autrement dit, cette fonction n'évaluera aucune balise HTML que vous lui donnez, mais les traitera comme du texte que vous désirez ajouter à votre élément.",
"Changez le bouton avec l'id <code>target4</code> en mettant en italique son texte."
"title":"Change Text Inside an Element Using jQuery",
"description":[
"Using jQuery, you can change the text between the start and end tags of an element. You can even change HTML markup.",
"jQuery has a function called <code>.html()</code> that lets you add HTML tags and text within an element. Any content previously within the element will be completely replaced with the content you provide using this function.",
"jQuery also has a similar function called <code>.text()</code> that only alters text without adding tags. In other words, this function will not evaluate any HTML tags passed to it, but will instead treat it as the text you want to replace the existing content with.",
"Change the button with id <code>target4</code> by emphasizing its text.",
"Note that while the <code><i></code> tag has traditionally been used to emphasize text, it has since been coopted for use as a tag for icons. The <code><em></code> tag is now widely accepted as the tag for emphasis. Either will work for this challenge."
"assert.isTrue((/<em>|<i>#target4<\\/em>|<\\/i>/gi).test($(\"#target4\").html()), 'message: Emphasize the text in your <code>target4</code> button by adding HTML tags.');",
"assert(code.match(/\\.html\\(/g), 'message: Make sure you are using <code>.html()</code> and not <code>.text()</code>.');",
"assert(code.match(/\\$\\(\\s*?(\\\"|\\')#target4(\\\"|\\')\\s*?\\)\\.html\\(/), 'message: Make sure to select <code>button id=\"target4\"</code> with jQuery.');"
"title":"Ändere den Text innerhalb eines Elements mit jQuery",
"description":[
"Mit jQuery kannst du den Text zwischen dem Start- und dem End-Tag eines Elements ändern. Du kannst sogar das HTML-Markup ändern.",
"jQuery hat eine Funktion namens <code>.html()</code>, die dich HTML-Tags und Text innerhalb eines Elements hinzufügen lässt. Jeglicher Content der sich vorher innerhalb des Elements befand, wird mit jenem Content ersetzt, den du durch diese Funktion bereitstellst.",
"So kannst du den Text unserer Überschrift überschreiben und hervorheben:",
"jQuery hat auch eine weitere ähnliche Funktion namens <code>.text()</code>, welche nur den Text ändert, ohne Tags hinzuzufügen. In anderen Worten: diese Funktion evaluiert keinerlei HTML-Tags, die an sie übergeben werden, sondern behandelt diese als Text, den du mit der Funktion ersetzen willst.",
"Ändere den Button mit der ID <code>target4</code> indem du seinen Text hervorhebst."
]
},
"es":{
"title":"Cambia el texto de un elemento usando jQuery",
"description":[
"Con jQuery, puedes cambiar el texto que está entre las etiquetas de apertura y cierre de un elemento. Incluso puedes cambiar marcado HTML.",
"jQuery tiene una función llamada <code>.html()</code> que te permite añadir etiquetas HTML y texto dentro de un elemento. Cualquier contenido que estuviese previamente dentro del elemento será remplazado por completo con el contenido que proveas usando esta función.",
"He aquí como reescribes y pones en itálicas el texto de nuestro encabezado:",
"assert($(\"#left-well\").children(\"#target2\").length === 0, 'message: Your <code>target2</code> element should not be inside your <code>left-well</code>.');",
"assert($(\"#right-well\").children(\"#target2\").length > 0, 'message: Your <code>target2</code> element should be inside your <code>right-well</code>.');",
"assert(!code.match(/class.*animated/g), 'message: Only use jQuery to move these elements.');"
"title":"Verwende appendTo um Elemente mit jQuery zu verschieben.",
"description":[
"Lass uns jetzt versuchen, ein Element von einem <code>div</code> zum Nächsten zu verschieben.",
"jQuery hat eine Funktion namens <code>appendTo()</code>, die es dir erlaubt HTML-Elemente auszuwählen und diese zu einem anderen Element anzuhängen.",
"Wenn wir zum Beispiel <code>target4</code> von <code>right-well</code> zu <code>left-well</code> verschieben wollen, würden wir folgenden Code nutzen:",
"Did you notice this involves sticking two jQuery functions together? This is called <code>function chaining</code> and it's a convenient way to get things done with jQuery.",
"assert($(\"#right-well\").children(\"#target5\").length > 0, 'message: Your <code>target5</code> element should be inside your <code>right-well</code>.');",
"assert($(\"#left-well\").children(\"#target5\").length > 0, 'message: A copy of your <code>target5</code> element should also be inside your <code>left-well</code>.');",
"assert(!code.match(/class.*animated/g), 'message: Only use jQuery to move these elements.');"
"Ist dir aufgefallen, dass wir dazu zwei jQuery Funktionen miteinander verknüpfen? Das nennt sich <code>function chaining</code> und ist eine praktische Art um mit jQuery zu Lösungen zu kommen.",
"Kopiere dein <code>target5</code> Element und verschiebe es zu <code>left-well</code>."
]
},
"es":{
"title":"Clona un elemento usando jQuery",
"description":[
"Además de mover elementos, puedes copiarlos de un sitio a otro.",
"jQuery tiene una función llamada <code>clone()</code> que hace una copia de un elemento.",
"Por ejemplo, si quisiéramos copiar <code>target2</code> de nuestro <code>left-well</code> a nuestro <code>right-well</code>, usaríamos:",
"¿Te diste cuenta que esto implica pegar dos funciones jQuery? Esto se conoce como <code>encadenamiento</code> y es una manera conveniente de hacer las cosas con jQuery. ",
"Clona tu elemento <code>target5</code> y añadelo a tu <code>left-well</code>."
"For example, your <code>jQuery Playground</code> <code>h3</code> element has the parent element of <code><div class=\"container-fluid\"></code>, which itself has the parent <code>body</code>.",
"Here's an example of how you would use the <code>parent()</code> function if you wanted to give the parent element of the <code>left-well</code> element a background color of blue:",
"assert($(\"#left-well\").css(\"background-color\") === 'red' || $(\"#left-well\").css(\"background-color\") === 'rgb(255, 0, 0)' || $(\"#left-well\").css(\"background-color\").toLowerCase() === '#ff0000' || $(\"#left-well\").css(\"background-color\").toLowerCase() === '#f00', 'message: Your <code>left-well</code> element should have a red background.');",
"assert(code.match(/\\.parent\\s*\\(\\)\\s*\\.css/g), 'message: You should use the <code>.parent()</code> function to modify this element.');",
"assert(code.match(/\\$\\s*?\\(\\s*?(?:'|\")\\s*?#target1\\s*?(?:'|\")\\s*?\\)\\s*?\\.parent/gi), 'message: The <code>.parent()</code> method should be called on the <code>#target1</code> element.');",
"title":"Wähle das Eltern-Element mit jQuery aus",
"description":[
"Jedes HTML-Element hat ein <code>Eltern-Element</code>, von dem es Eigenschaften <code>erbt</code>.",
"Dein <code>jQuery Playground</code> <code>h3</code> Element hat zum Beispiel das Eltern-Element <code><div class=\"container-fluid\"></code>, welches das <code>body</code> Element als Eltern-Element hat.",
"jQuery hat eine Funktion namens <code>parent()</code>, die es dir erlaubt auf die Eltern-Elemente eines von dir ausgewählten Elements zuzugreifen.",
"Hier ist ein Beispiel, wie du die <code>parent()</code> Funktion nutzen kannst, wenn du dem Eltern-Element des <code>left-well</code> Elements eine blaue Hintergrundfarbe geben willst:",
"Gib dem Eltern-Element des <code>#target1</code> Elements eine rote Hintergrundfarbe."
]
},
"es":{
"title":"Elige el padre de un elemento usando jQuery",
"description":[
"Cada elemento HTML tiene un elemento <code>padre</code> del cual <code>hereda</code> propiedades.",
"Por ejemplo, tu elemento <code>h3</code> <code>jQuery Playground</code> tiene el elemento padre <code><div class=\"container-fluid\"></code>, que a su vez tiene el padre <code>body</code>. ",
"jQuery tiene una función llamada <code>parent()</code> que te permite acceder al padre de cualquier elemento que haya seleccionado.",
"He aquí un ejemplo de cómo se utiliza la función <code>parent()</code> si quisieras darle al elemento padre del elemento <code>left-well</code> un color de fondo azul:",
"For example, every HTML element is a child of your <code>body</code> element, and your \"jQuery Playground\" <code>h3</code> element is a child of your <code><div class=\"container-fluid\"></code> element.",
"jQuery has a function called <code>children()</code> that allows you to access the children of whichever element you've selected.",
"Here's an example of how you would use the <code>children()</code> function to give the children of your <code>left-well</code> element the color of blue:",
"assert($(\"#right-well\").children().css(\"color\") === 'rgb(255, 165, 0)', 'message: All children of <code>#right-well</code> should have orange text.');",
"assert(code.match(/\\.children\\(\\)\\.css/g), 'message: You should use the <code>children()</code> function to modify these elements.');",
"assert(code.match(/<div class=\"well\" id=\"right-well\">/g), 'message: Only use jQuery to add these classes to the element.');"
"Viele HTML-Elemente haben <code>Kinder-Elemente</code>, die ihre Eigenschaften von ihren Eltern-Elementen <code>erben</code>.",
"Zum Beispiel ist jedes HTML-Element ein Kind-Element des <code>body</code> Elements und dein <code>\"jQuery Playground\"</code> <code>h3</code> Element ist ein Kind-Element deines <code><div class=\"container-fluid\"></code> Elements.",
"jQuery hat eine Funktion namens <code>children()</code>, die es dir erlaubt, auf die Kinder-Elemente des von dir ausgewählten Elements zuzugreifen.",
"Hier ist ein Beispiel, wie du die <code>children()</code> Funktion nutzen kannst, wenn du den Kinder-Elementen von <code>left-well</code> die Farbe Blau geben willst:",
"Gib allen Kinder-Elementen von <code>#right-well</code> die Farbe Orange."
]
},
"es":{
"title":"Elige los hjos de un elemento usando jQuery",
"description":[
"Muchos elementos HTML tienen <code>hijos</code>, los cuales <code>heredan</code> sus propiedades de sus elementos padres",
"Por ejemplo, cada elemento HTML es un hijo de tu elemento <code>body</code>, y tu elemento <code>h3</code> \"jQuery Playground\" es un hijo de tu elemento <code><div class=\"container-fluid\"></code>.",
"jQuery tiene una función llamada <code>children()</code> que te permite acceder a los hijos de cualquier elemento que hayas seleccionado.",
"He aquí un ejemplo de cómo se utiliza la función <code>children()</code> para darle a los hijos de tu elemento <code>left-well</code> el color azul:",
"jQuery uses CSS Selectors to target elements. <code>target:nth-child(n)</code> css selector allows you to select all the nth elements with the target class or element type.",
"assert($(\".target:nth-child(2)\").hasClass(\"animated\") && $(\".target:nth-child(2)\").hasClass(\"bounce\"), 'message: The second element in your <code>target</code> elements should bounce.');",
"assert(code.match(/\\:nth-child\\(/g), 'message: You should use the <code>:nth-child()</code> function to modify these elements.');",
"assert(code.match(/<button class=\"btn btn-default target\" id=\"target2\">/g), 'message: Only use jQuery to add these classes to the element.');"
"title":"Wähle ein spezifisches Kinder-Element mit jQuery aus",
"description":[
"Du hast gesehen, warum ID-Attribute so praktisch sind, um Elemente mit jQuery Selektoren auszuwählen. Leider hast du aber nicht immer so praktische IDs, mit denen du arbeiten kannst.",
"Zum Glück hat jQuery einige Tricks auf Lager, um die richtigen Elemente auszuwählen.",
"jQuery nutzt CSS-Selektoren um Elemente auszuwählen. Der <code>target:nth-child(n)</code> CSS-Selektor erlaubt dir das n-te Element aus einer Zielklasse oder Element-Typ zu wählen.",
"Hier siehst du, wie du dem dritten Kind-Element einer jeden Vertiefung eine <code>bounce</code> Klasse hinzufügen kannst.",
"Lasse das zweite Kind-Element jeder Vertiefung hüpfen. Dazu musst das Kind-Element mit der <code>target</code> Klasse auswählen."
]
},
"es":{
"title":"Elige un hijo específico de un elemento usando jQuery",
"description":[
"Seguramente habrás entendido porque los atributos id son tan convenientes para elegir con selectores jQuery. Pero no siempre contarás con estos agradables identificadores para trabajar. ",
"Afortunadamente, jQuery tiene algunos otros trucos para elegir los elementos adecuados.",
"jQuery usa selectores CSS para elegir elementos, El selector CSS <code>.clase:nth-child(i)</code> te permite seleccionar de los elementos con la clase dada, los que sean los i-ésimos hijos de su elemento padre. En lugar de una clase también puedes usar un elemento",
"He aquí cómo le asignarás la clase <code>bounce</code> al tercer elemento de cada pozo:",
"Try selecting all the even-numbered <code>target</code> elements and giving them the classes of <code>animated</code> and <code>shake</code>. Even-numbered is defined here with a zero-index in mind."
"assert($('.target:even').hasClass('animated') && $('.target:even').hasClass('shake'), 'message: All the <code>target</code> elements that computer considers even should shake.');",
"assert(code.match(/\\:even/g), 'message: You should use the <code>:even</code> function to modify these elements.');",
"assert(code.match(/<button class=\"btn btn-default target\" id=\"target3\">/g), 'message: Only use jQuery to add these classes to the element.');"
"Bedenke, dass jQuery null-indexiert ist; das bedeutet, dass - kontraintuitiverweise - <code>:odd</code> das zweite Element, das vierte Element und so weiter auswählt.",
"Versuche alle geradzahligen <code>target</code> Elemente auszuwählen und ihnen die Klassen <code>animated</code> und <code>shake</code> hinzuzufügen."
"assert($('body').hasClass('animated') && $('body').hasClass('hinge'), 'message: Add the classes <code>animated</code> and <code>hinge</code> to your <code>body</code> element.');"
"title":"Mit jQuery die gesamte Seite modifizieren",
"description":[
"Genug mit unserem jQuery Spielplatz herumgespielt. Reißen wir ihn ein!",
"jQuery kann auch das <code>body</code> Element auswählen.",
"Hier siehst du, wie wir den gesamten <code>body</code> Bereich ausblenden können: <code> $(\"body\").addClass(\"animated fadeOut\");</code>",
"Aber lass uns noch etwas Dramatischeres machen. Füge die Klassen <code>animated</code> und <code>hinge</code> zu deinem <code>body</code> Element hinzu."
]
},
"es":{
"title":"Usa jQuery para modificar la página entera",
"description":[
"Hemos terminado de jugar en nuestro patio de recreo jQuery. ¡Vamos a derribarlo!",
"jQuery también puede elegir el elemento <code>body</code>.",
"Así es como haríamos que el cuerpo entero desapareciera: <code>$(\"body\").addClass('animated fadeOut');</code>",
"Pero vamos a hacer algo más dramático. Añade las clases <code>animated</code> y <code>hinge</code> a tu elemento <code>body</code>."