feat: add 'back/front end' in curriculum (#42596)
* chore: rename APIs and Microservices to include "Backend" (#42515) * fix typo * fix typo * undo change * Corrected grammar mistake Corrected a grammar mistake by removing a comma. * change APIs and Microservices cert title * update title * Change APIs and Microservices certi title * Update translations.json * update title * feat(curriculum): rename apis and microservices cert * rename folder structure * rename certificate * rename learn Markdown * apis-and-microservices -> back-end-development-and-apis * update backend meta * update i18n langs and cypress test Co-authored-by: Shaun Hamilton <shauhami020@gmail.com> * fix: add development to front-end libraries (#42512) * fix: added-the-word-Development-to-front-end-libraries * fix/added-the-word-Development-to-front-end-libraries * fix/added-word-development-to-front-end-libraries-in-other-related-files * fix/added-the-word-Development-to-front-end-and-all-related-files * fix/removed-typos-from-last-commit-in-index.md * fix/reverted-changes-that-i-made-to-dependecies * fix/removed xvfg * fix/reverted changes that i made to package.json * remove unwanted changes * front-end-development-libraries changes * rename backend certSlug and README * update i18n folder names and keys * test: add legacy path redirect tests This uses serve.json from the client-config repo, since we currently use that in production * fix: create public dir before moving serve.json * fix: add missing script * refactor: collect redirect tests * test: convert to cy.location for stricter tests * rename certificate folder to 00-certificates * change crowdin config to recognise new certificates location * allow translations to be used Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com> * add forwards slashes to path redirects * fix cypress path tests again * plese cypress * fix: test different challenge Okay so I literally have no idea why this one particular challenge fails in Cypress Firefox ONLY. Tom and I paired and spun a full build instance and confirmed in Firefox the page loads and redirects as expected. Changing to another bootstrap challenge passes Cypress firefox locally. Absolutely boggled by this. AAAAAAAAAAAAAAA * fix: separate the test Okay apparently the test does not work unless we separate it into a different `it` statement. >:( >:( >:( >:( Co-authored-by: Sujal Gupta <55016909+heysujal@users.noreply.github.com> Co-authored-by: Noor Fakhry <65724923+NoorFakhry@users.noreply.github.com> Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com>
This commit is contained in:
Shaun Hamilton
GitHub
@ -0,0 +1,131 @@
|
||||
---
|
||||
id: 564944c91be2204b269d51e3
|
||||
title: 使用 jQuery 更改元素内部的文本
|
||||
challengeType: 6
|
||||
forumTopicId: 16773
|
||||
dashedName: change-text-inside-an-element-using-jquery
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
可以通过 jQuery 改变元素开始和结束标签之间的文本。 甚至改变 HTML 标签。
|
||||
|
||||
jQuery 有一个 `.html()` 函数，能用其在标签里添加 HTML 标签和文本， 函数提供的内容将完全替换之前标签的内容。
|
||||
|
||||
下面是重写并强调标题文本的代码：
|
||||
|
||||
```js
|
||||
$("h3").html("<em>jQuery Playground</em>");
|
||||
```
|
||||
|
||||
jQuery 还有一个类似的函数 `.text()`，可以在不添加标签的前提下改变标签内的文本。 换句话说，这个函数不会评估传递给它的任何 HTML 标记，而是将其视为要替换现有内容的文本。
|
||||
|
||||
给 id 为 `target4` 的按钮的文本添加强调效果。
|
||||
|
||||
查看这篇[关于 <em> 的文章](https://www.freecodecamp.org/news/html-elements-explained-what-are-html-tags/#em-element)来了解更多 `<i>` 和 `<em>` 的区别和用法。
|
||||
|
||||
注意，`<i>` 标签虽然传统上用来强调文本，但此后常用作图标的标签。 `<em>` 标签作为强调标签现在已被广泛接受。 可以使用任意一种完成这个挑战。
|
||||
|
||||
# --hints--
|
||||
|
||||
应该通过添加 HTML 标签强调 `target4` 按钮中的文本。
|
||||
|
||||
```js
|
||||
assert.isTrue(
|
||||
/<em>|<i>\s*#target4\s*<\/em>|<\/i>/gi.test($('#target4').html())
|
||||
);
|
||||
```
|
||||
|
||||
文本应该保持不变。
|
||||
|
||||
```js
|
||||
assert($('#target4') && $('#target4').text().trim() === '#target4');
|
||||
```
|
||||
|
||||
不应该改变其它任何文本内容。
|
||||
|
||||
```js
|
||||
assert.isFalse(/<em>|<i>/gi.test($('h3').html()));
|
||||
```
|
||||
|
||||
应该使用 `.html()` 方法而不是 `.text()` 方法。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.html\(/g));
|
||||
```
|
||||
|
||||
应该使用 jQuery 选取 `button id="target4"`。
|
||||
|
||||
```js
|
||||
assert(code.match(/\$\(\s*?(\"|\')#target4(\"|\')\s*?\)\.html\(/));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$("#target1").css("color", "red");
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Only change code above this line -->
|
||||
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<h4>#left-well</h4>
|
||||
<div class="well" id="left-well">
|
||||
<button class="btn btn-default target" id="target1">#target1</button>
|
||||
<button class="btn btn-default target" id="target2">#target2</button>
|
||||
<button class="btn btn-default target" id="target3">#target3</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<h4>#right-well</h4>
|
||||
<div class="well" id="right-well">
|
||||
<button class="btn btn-default target" id="target4">#target4</button>
|
||||
<button class="btn btn-default target" id="target5">#target5</button>
|
||||
<button class="btn btn-default target" id="target6">#target6</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$("#target1").css("color", "red");
|
||||
$("#target4").html('<em>#target4</em>');
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<h4>#left-well</h4>
|
||||
<div class="well" id="left-well">
|
||||
<button class="btn btn-default target" id="target1">#target1</button>
|
||||
<button class="btn btn-default target" id="target2">#target2</button>
|
||||
<button class="btn btn-default target" id="target3">#target3</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<h4>#right-well</h4>
|
||||
<div class="well" id="right-well">
|
||||
<button class="btn btn-default target" id="target4">#target4</button>
|
||||
<button class="btn btn-default target" id="target5">#target5</button>
|
||||
<button class="btn btn-default target" id="target6">#target6</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,119 @@
|
||||
---
|
||||
id: bad87fee1348bd9aed908826
|
||||
title: 使用 jQuery 更改元素的 CSS
|
||||
challengeType: 6
|
||||
forumTopicId: 16776
|
||||
required:
|
||||
-
|
||||
link: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css'
|
||||
dashedName: change-the-css-of-an-element-using-jquery
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
也能用 jQuery 直接改变 HTML 标签的 CSS。
|
||||
|
||||
jQuery 有一个 `.css()` 方法，能改变标签的 CSS。
|
||||
|
||||
下面的代码效果是把颜色变蓝：
|
||||
|
||||
```js
|
||||
$("#target1").css("color", "blue");
|
||||
```
|
||||
|
||||
这与通常的 CSS 声明略有不同，因为这个 CSS 属性和它的值在英文引号里，并且它们用逗号而不是冒号间隔开。
|
||||
|
||||
删除 jQuery 选择器，留下一个空的 `document ready function` 。
|
||||
|
||||
选择 `target1`，并将其颜色更改为红色。
|
||||
|
||||
# --hints--
|
||||
|
||||
`target1` 元素应该有红色文本。
|
||||
|
||||
```js
|
||||
assert($('#target1').css('color') === 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
应该仅用 jQuery 给元素添加这些 class。
|
||||
|
||||
```js
|
||||
assert(!code.match(/class.*animated/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$("button").addClass("animated bounce");
|
||||
$(".well").addClass("animated shake");
|
||||
$("#target3").addClass("animated fadeOut");
|
||||
$("button").removeClass("btn-default");
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Only change code above this line -->
|
||||
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<h4>#left-well</h4>
|
||||
<div class="well" id="left-well">
|
||||
<button class="btn btn-default target" id="target1">#target1</button>
|
||||
<button class="btn btn-default target" id="target2">#target2</button>
|
||||
<button class="btn btn-default target" id="target3">#target3</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<h4>#right-well</h4>
|
||||
<div class="well" id="right-well">
|
||||
<button class="btn btn-default target" id="target4">#target4</button>
|
||||
<button class="btn btn-default target" id="target5">#target5</button>
|
||||
<button class="btn btn-default target" id="target6">#target6</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$("button").addClass("animated bounce");
|
||||
$(".well").addClass("animated shake");
|
||||
$("#target3").addClass("animated fadeOut");
|
||||
$("button").removeClass("btn-default");
|
||||
$("#target1").css("color", "red");
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Only change code above this line -->
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<h4>#left-well</h4>
|
||||
<div class="well" id="left-well">
|
||||
<button class="btn btn-default target" id="target1">#target1</button>
|
||||
<button class="btn btn-default target" id="target2">#target2</button>
|
||||
<button class="btn btn-default target" id="target3">#target3</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<h4>#right-well</h4>
|
||||
<div class="well" id="right-well">
|
||||
<button class="btn btn-default target" id="target4">#target4</button>
|
||||
<button class="btn btn-default target" id="target5">#target5</button>
|
||||
<button class="btn btn-default target" id="target6">#target6</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,121 @@
|
||||
---
|
||||
id: bad87fee1348bd9aed508826
|
||||
title: 使用 jQuery 克隆元素
|
||||
challengeType: 6
|
||||
forumTopicId: 16780
|
||||
dashedName: clone-an-element-using-jquery
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
除了移动标签，也可以把元素从一个地方复制到另一地方。
|
||||
|
||||
jQuery 有一个 `clone()` 方法，可以复制标签。
|
||||
|
||||
例如，如果想把 `target2` 从 `left-well` 复制到 `right-well`，可以设置如下：
|
||||
|
||||
```js
|
||||
$("#target2").clone().appendTo("#right-well");
|
||||
```
|
||||
|
||||
是否注意到这两个 jQuery 函数连在一起了？ 这被称为<dfn>链式调用（function chaining）</dfn>，是一种用 jQuery 实现效果的简便方法。
|
||||
|
||||
克隆 `target5` 元素，并将其附加到 `left-well` 。
|
||||
|
||||
# --hints--
|
||||
|
||||
`target5` 元素应该在 `right-well` 里面。
|
||||
|
||||
```js
|
||||
assert($('#right-well').children('#target5').length > 0);
|
||||
```
|
||||
|
||||
应该克隆 `target5` 元素，并放在 `left-well` 里面。
|
||||
|
||||
```js
|
||||
assert($('#left-well').children('#target5').length > 0);
|
||||
```
|
||||
|
||||
应该仅用 jQuery 移动这些元素。
|
||||
|
||||
```js
|
||||
assert(!code.match(/class.*animated/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$("#target1").css("color", "red");
|
||||
$("#target1").prop("disabled", true);
|
||||
$("#target4").remove();
|
||||
$("#target2").appendTo("#right-well");
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Only change code above this line -->
|
||||
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<h4>#left-well</h4>
|
||||
<div class="well" id="left-well">
|
||||
<button class="btn btn-default target" id="target1">#target1</button>
|
||||
<button class="btn btn-default target" id="target2">#target2</button>
|
||||
<button class="btn btn-default target" id="target3">#target3</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<h4>#right-well</h4>
|
||||
<div class="well" id="right-well">
|
||||
<button class="btn btn-default target" id="target4">#target4</button>
|
||||
<button class="btn btn-default target" id="target5">#target5</button>
|
||||
<button class="btn btn-default target" id="target6">#target6</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$("#target1").css("color", "red");
|
||||
$("#target1").prop("disabled", true);
|
||||
$("#target4").remove();
|
||||
$("#target2").appendTo("#right-well");
|
||||
$("#target5").clone().appendTo("#left-well");
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Only change code above this line -->
|
||||
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<h4>#left-well</h4>
|
||||
<div class="well" id="left-well">
|
||||
<button class="btn btn-default target" id="target1">#target1</button>
|
||||
<button class="btn btn-default target" id="target2">#target2</button>
|
||||
<button class="btn btn-default target" id="target3">#target3</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<h4>#right-well</h4>
|
||||
<div class="well" id="right-well">
|
||||
<button class="btn btn-default target" id="target4">#target4</button>
|
||||
<button class="btn btn-default target" id="target5">#target5</button>
|
||||
<button class="btn btn-default target" id="target6">#target6</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,125 @@
|
||||
---
|
||||
id: bad87fee1348bd9aeda08726
|
||||
title: 删除 jQuery 函数
|
||||
challengeType: 6
|
||||
forumTopicId: 17561
|
||||
required:
|
||||
-
|
||||
link: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css'
|
||||
dashedName: delete-your-jquery-functions
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
这些动画开始看起来很酷，但是有时可能会让用户分心。
|
||||
|
||||
请删除 `document ready function` 内的三个 jQuery 函数，但保留 `document ready function` 本身。
|
||||
|
||||
# --hints--
|
||||
|
||||
应该删除 `document ready function` 中的三个 jQuery 函数。
|
||||
|
||||
```js
|
||||
assert(code.match(/\{\s*\}\);/g));
|
||||
```
|
||||
|
||||
应该保持 `script` 标签不变。
|
||||
|
||||
```js
|
||||
assert(code.match(/<script>/g));
|
||||
```
|
||||
|
||||
应该保持 `$(document).ready(function() {` 在 `script` 标签的开头不变。
|
||||
|
||||
```js
|
||||
assert(code.match(/\$\(document\)\.ready\(function\(\)\s?\{/g));
|
||||
```
|
||||
|
||||
应该保持 `document.ready` function 用 `})` 闭合。
|
||||
|
||||
```js
|
||||
assert(code.match(/.*\s*\}\);/g));
|
||||
```
|
||||
|
||||
应该保持 `script` 标签闭合。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/<\/script>/g) &&
|
||||
code.match(/<script/g) &&
|
||||
code.match(/<\/script>/g).length === code.match(/<script/g).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$("button").addClass("animated bounce");
|
||||
$(".well").addClass("animated shake");
|
||||
$("#target3").addClass("animated fadeOut");
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Only change code above this line -->
|
||||
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<h4>#left-well</h4>
|
||||
<div class="well" id="left-well">
|
||||
<button class="btn btn-default target" id="target1">#target1</button>
|
||||
<button class="btn btn-default target" id="target2">#target2</button>
|
||||
<button class="btn btn-default target" id="target3">#target3</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<h4>#right-well</h4>
|
||||
<div class="well" id="right-well">
|
||||
<button class="btn btn-default target" id="target4">#target4</button>
|
||||
<button class="btn btn-default target" id="target5">#target5</button>
|
||||
<button class="btn btn-default target" id="target6">#target6</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Only change code above this line -->
|
||||
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<h4>#left-well</h4>
|
||||
<div class="well" id="left-well">
|
||||
<button class="btn btn-default target" id="target1">#target1</button>
|
||||
<button class="btn btn-default target" id="target2">#target2</button>
|
||||
<button class="btn btn-default target" id="target3">#target3</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<h4>#right-well</h4>
|
||||
<div class="well" id="right-well">
|
||||
<button class="btn btn-default target" id="target4">#target4</button>
|
||||
<button class="btn btn-default target" id="target5">#target5</button>
|
||||
<button class="btn btn-default target" id="target6">#target6</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,120 @@
|
||||
---
|
||||
id: bad87fee1348bd9aed808826
|
||||
title: 使用 jQuery 禁用元素
|
||||
challengeType: 6
|
||||
forumTopicId: 17563
|
||||
dashedName: disable-an-element-using-jquery
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
还能用 jQuery 改变 HTML 标签的非 CSS 属性， 例如：禁用按钮。
|
||||
|
||||
当禁用按钮时，它将变成灰色并无法点击。
|
||||
|
||||
jQuery 有一个 `.prop()` 方法，可以用其调整标签的属性。
|
||||
|
||||
下面是禁用所有的按钮的代码：
|
||||
|
||||
```js
|
||||
$("button").prop("disabled", true);
|
||||
```
|
||||
|
||||
仅禁用 `target1` 按钮。
|
||||
|
||||
# --hints--
|
||||
|
||||
`target1` 按钮应该被禁用。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('#target1') &&
|
||||
$('#target1').prop('disabled') &&
|
||||
code.match(/["']disabled["'],( true|true)/g)
|
||||
);
|
||||
```
|
||||
|
||||
不应该禁用其它的按钮。
|
||||
|
||||
```js
|
||||
assert($('#target2') && !$('#target2').prop('disabled'));
|
||||
```
|
||||
|
||||
应该仅用 jQuery 给元素添加这些 class。
|
||||
|
||||
```js
|
||||
assert(!code.match(/disabled[^<]*>/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$("#target1").css("color", "red");
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Only change code above this line -->
|
||||
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<h4>#left-well</h4>
|
||||
<div class="well" id="left-well">
|
||||
<button class="btn btn-default target" id="target1">#target1</button>
|
||||
<button class="btn btn-default target" id="target2">#target2</button>
|
||||
<button class="btn btn-default target" id="target3">#target3</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<h4>#right-well</h4>
|
||||
<div class="well" id="right-well">
|
||||
<button class="btn btn-default target" id="target4">#target4</button>
|
||||
<button class="btn btn-default target" id="target5">#target5</button>
|
||||
<button class="btn btn-default target" id="target6">#target6</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$("#target1").css("color", "red");
|
||||
$("#target1").prop("disabled", true);
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Only change code above this line -->
|
||||
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<h4>#left-well</h4>
|
||||
<div class="well" id="left-well">
|
||||
<button class="btn btn-default target" id="target1">#target1</button>
|
||||
<button class="btn btn-default target" id="target2">#target2</button>
|
||||
<button class="btn btn-default target" id="target3">#target3</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<h4>#right-well</h4>
|
||||
<div class="well" id="right-well">
|
||||
<button class="btn btn-default target" id="target4">#target4</button>
|
||||
<button class="btn btn-default target" id="target5">#target5</button>
|
||||
<button class="btn btn-default target" id="target6">#target6</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,118 @@
|
||||
---
|
||||
id: bad87fee1348bd9acdd08826
|
||||
title: 了解 script 和 document.ready 是如何工作的
|
||||
challengeType: 6
|
||||
forumTopicId: 18224
|
||||
dashedName: learn-how-script-tags-and-document-ready-work
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
马上就要学习有史以来最受欢迎的 JavaScript 框架——jQuery 了。
|
||||
|
||||
在使用 jQuery 之前，需要在 HTML 页面中添加一些东西。
|
||||
|
||||
首先，在页面顶部添加 `script` 标签， 记得在后面为它添加结束标签。
|
||||
|
||||
浏览器会运行 `script` 标签所有的 JavaScript 脚本包括 jQuery。
|
||||
|
||||
在 `script` 标签中添加代码 `$(document).ready(function() {`。 然后在后面（仍在该 `script` 标签内）用 `});` 闭合它。
|
||||
|
||||
稍后将详细介绍 `functions`， 现在需要知道的是，只要浏览器加载页面，`function` 中放入的代码就会运行。
|
||||
|
||||
有一点很重要，如果没有 `document ready function`，代码将在 HTML 页面呈现之前运行，这可能会导致错误。
|
||||
|
||||
# --hints--
|
||||
|
||||
应该创建一个 `script` 标签，确保其有效并具有闭合标签。
|
||||
|
||||
```js
|
||||
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
|
||||
);
|
||||
```
|
||||
|
||||
应该在 `script` 的开头添加 `$(document).ready(function() {`。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/\$\s*?\(\s*?document\s*?\)\.ready\s*?\(\s*?function\s*?\(\s*?\)\s*?\{/g
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
应该用 `});` 闭合 `$(document).ready(function() {` 函数。
|
||||
|
||||
```js
|
||||
assert(code.match(/\n*?\s*?\}\s*?\);/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!-- Only change code above this line -->
|
||||
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<h4>#left-well</h4>
|
||||
<div class="well" id="left-well">
|
||||
<button class="btn btn-default target" id="target1">#target1</button>
|
||||
<button class="btn btn-default target" id="target2">#target2</button>
|
||||
<button class="btn btn-default target" id="target3">#target3</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<h4>#right-well</h4>
|
||||
<div class="well" id="right-well">
|
||||
<button class="btn btn-default target" id="target4">#target4</button>
|
||||
<button class="btn btn-default target" id="target5">#target5</button>
|
||||
<button class="btn btn-default target" id="target6">#target6</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
});
|
||||
</script>
|
||||
<!-- Only change code above this line -->
|
||||
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<h4>#left-well</h4>
|
||||
<div class="well" id="left-well">
|
||||
<button class="btn btn-default target" id="target1">#target1</button>
|
||||
<button class="btn btn-default target" id="target2">#target2</button>
|
||||
<button class="btn btn-default target" id="target3">#target3</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<h4>#right-well</h4>
|
||||
<div class="well" id="right-well">
|
||||
<button class="btn btn-default target" id="target4">#target4</button>
|
||||
<button class="btn btn-default target" id="target5">#target5</button>
|
||||
<button class="btn btn-default target" id="target6">#target6</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,109 @@
|
||||
---
|
||||
id: bad87fee1348bd9aed708826
|
||||
title: 使用 jQuery 删除元素
|
||||
challengeType: 6
|
||||
forumTopicId: 18262
|
||||
dashedName: remove-an-element-using-jquery
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
现在学习用 jQuery 从页面移除 HTML 标签。
|
||||
|
||||
jQuery 有一个 `.remove()` 方法，能完全移除 HTML 标签。
|
||||
|
||||
用 `.remove()` 方法从页面移除 `#target4` 元素。
|
||||
|
||||
# --hints--
|
||||
|
||||
应该用 jQuery 从页面中移除 `target4`标签。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('#target4').length === 0 && code.match(/\$\(["']#target4["']\).remove\(\)/g)
|
||||
);
|
||||
```
|
||||
|
||||
应该仅用 jQuery 移除该标签。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/id="target4/g) &&
|
||||
!code.match(/<!--.*id="target4".*-->/g) &&
|
||||
$('#right-well').length > 0
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$("#target1").css("color", "red");
|
||||
$("#target1").prop("disabled", true);
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Only change code above this line -->
|
||||
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<h4>#left-well</h4>
|
||||
<div class="well" id="left-well">
|
||||
<button class="btn btn-default target" id="target1">#target1</button>
|
||||
<button class="btn btn-default target" id="target2">#target2</button>
|
||||
<button class="btn btn-default target" id="target3">#target3</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<h4>#right-well</h4>
|
||||
<div class="well" id="right-well">
|
||||
<button class="btn btn-default target" id="target4">#target4</button>
|
||||
<button class="btn btn-default target" id="target5">#target5</button>
|
||||
<button class="btn btn-default target" id="target6">#target6</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$("#target1").css("color", "red");
|
||||
$("#target1").prop("disabled", true);
|
||||
$("#target4").remove();
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Only change code above this line -->
|
||||
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<h4>#left-well</h4>
|
||||
<div class="well" id="left-well">
|
||||
<button class="btn btn-default target" id="target1">#target1</button>
|
||||
<button class="btn btn-default target" id="target2">#target2</button>
|
||||
<button class="btn btn-default target" id="target3">#target3</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<h4>#right-well</h4>
|
||||
<div class="well" id="right-well">
|
||||
<button class="btn btn-default target" id="target4">#target4</button>
|
||||
<button class="btn btn-default target" id="target5">#target5</button>
|
||||
<button class="btn btn-default target" id="target6">#target6</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,122 @@
|
||||
---
|
||||
id: bad87fee1348bd9aed918626
|
||||
title: 使用 jQuery 从元素中移除 class
|
||||
challengeType: 6
|
||||
forumTopicId: 18264
|
||||
required:
|
||||
-
|
||||
link: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css'
|
||||
dashedName: remove-classes-from-an-element-with-jquery
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
和用 jQuery 的 `addClass()` 方法给标签添加类一样，也可以利用 jQuery 的 `removeClass()` 方法移除它们。
|
||||
|
||||
下面是为指定按钮执行上面的操作的代码：
|
||||
|
||||
```js
|
||||
$("#target2").removeClass("btn-default");
|
||||
```
|
||||
|
||||
请把所有 `button` 元素的 `btn-default` class 移除。
|
||||
|
||||
# --hints--
|
||||
|
||||
应该移除所有 `button` 元素 `btn-default` class。
|
||||
|
||||
```js
|
||||
assert($('.btn-default').length === 0);
|
||||
```
|
||||
|
||||
应该仅用 jQuery 从元素中移除 class。
|
||||
|
||||
```js
|
||||
assert(code.match(/btn btn-default/g));
|
||||
```
|
||||
|
||||
应该仅移除 `btn-default` class。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(
|
||||
/\.[\v\s]*removeClass[\s\v]*\([\s\v]*('|")\s*btn-default\s*('|")[\s\v]*\)/gm
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$("button").addClass("animated bounce");
|
||||
$(".well").addClass("animated shake");
|
||||
$("#target3").addClass("animated fadeOut");
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Only change code above this line -->
|
||||
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<h4>#left-well</h4>
|
||||
<div class="well" id="left-well">
|
||||
<button class="btn btn-default target" id="target1">#target1</button>
|
||||
<button class="btn btn-default target" id="target2">#target2</button>
|
||||
<button class="btn btn-default target" id="target3">#target3</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<h4>#right-well</h4>
|
||||
<div class="well" id="right-well">
|
||||
<button class="btn btn-default target" id="target4">#target4</button>
|
||||
<button class="btn btn-default target" id="target5">#target5</button>
|
||||
<button class="btn btn-default target" id="target6">#target6</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$("button").addClass("animated bounce");
|
||||
$(".well").addClass("animated shake");
|
||||
$("#target3").addClass("animated fadeOut");
|
||||
$("button").removeClass("btn-default");
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Only change code above this line -->
|
||||
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<h4>#left-well</h4>
|
||||
<div class="well" id="left-well">
|
||||
<button class="btn btn-default target" id="target1">#target1</button>
|
||||
<button class="btn btn-default target" id="target2">#target2</button>
|
||||
<button class="btn btn-default target" id="target3">#target3</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<h4>#right-well</h4>
|
||||
<div class="well" id="right-well">
|
||||
<button class="btn btn-default target" id="target4">#target4</button>
|
||||
<button class="btn btn-default target" id="target5">#target5</button>
|
||||
<button class="btn btn-default target" id="target6">#target6</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,144 @@
|
||||
---
|
||||
id: bad87fee1348bd9aed108826
|
||||
title: 使用 jQuery 选择元素的特定子元素
|
||||
challengeType: 6
|
||||
forumTopicId: 18315
|
||||
required:
|
||||
-
|
||||
link: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css'
|
||||
dashedName: target-a-specific-child-of-an-element-using-jquery
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
已经看到了 id 属性对于 jQuery 选择器选取标签的便利， 但这并不适用于所有情景。
|
||||
|
||||
幸运的是，jQuery 有一些其他的方法可以选取正确的标签。
|
||||
|
||||
jQuery 可以用 CSS 选择器（CSS Selectors）选取标签。 `target:nth-child(n)` CSS 选择器可以选取指定 class 或者元素类型的的第 n 个标签。
|
||||
|
||||
下面的代码展示了给每个区域（well）的第 3 个标签设置弹跳（bounce）动画效果：
|
||||
|
||||
```js
|
||||
$(".target:nth-child(3)").addClass("animated bounce");
|
||||
```
|
||||
|
||||
给 well 元素的第二个子元素添加弹跳（bounce）动画效果。 你必须选择具有 `target` class 的元素子项。
|
||||
|
||||
# --hints--
|
||||
|
||||
`target` 元素中的第二个元素应该有弹跳（bounce）动画效果。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('.target:nth-child(2)').hasClass('animated') &&
|
||||
$('.target:nth-child(2)').hasClass('bounce')
|
||||
);
|
||||
```
|
||||
|
||||
应该仅两个元素有弹跳（bounce）动画效果。
|
||||
|
||||
```js
|
||||
assert($('.animated.bounce').length === 2);
|
||||
```
|
||||
|
||||
你应该使用 `:nth-child()` 选择器修改这些元素。
|
||||
|
||||
```js
|
||||
assert(code.match(/\:nth-child\(/g));
|
||||
```
|
||||
|
||||
应该仅用 jQuery 给元素添加 class。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/\$\(".target:nth-child\(2\)"\)/g) ||
|
||||
code.match(/\$\('.target:nth-child\(2\)'\)/g) ||
|
||||
code.match(/\$\(".target"\).filter\(":nth-child\(2\)"\)/g) ||
|
||||
code.match(/\$\('.target'\).filter\(':nth-child\(2\)'\)/g)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$("#target1").css("color", "red");
|
||||
$("#target1").prop("disabled", true);
|
||||
$("#target4").remove();
|
||||
$("#target2").appendTo("#right-well");
|
||||
$("#target5").clone().appendTo("#left-well");
|
||||
$("#target1").parent().css("background-color", "red");
|
||||
$("#right-well").children().css("color", "orange");
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Only change code above this line -->
|
||||
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<h4>#left-well</h4>
|
||||
<div class="well" id="left-well">
|
||||
<button class="btn btn-default target" id="target1">#target1</button>
|
||||
<button class="btn btn-default target" id="target2">#target2</button>
|
||||
<button class="btn btn-default target" id="target3">#target3</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<h4>#right-well</h4>
|
||||
<div class="well" id="right-well">
|
||||
<button class="btn btn-default target" id="target4">#target4</button>
|
||||
<button class="btn btn-default target" id="target5">#target5</button>
|
||||
<button class="btn btn-default target" id="target6">#target6</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$("#target1").css("color", "red");
|
||||
$("#target1").prop("disabled", true);
|
||||
$("#target4").remove();
|
||||
$("#target2").appendTo("#right-well");
|
||||
$("#target5").clone().appendTo("#left-well");
|
||||
$("#target1").parent().css("background-color", "red");
|
||||
$("#right-well").children().css("color", "orange");
|
||||
$(".target:nth-child(2)").addClass("animated bounce");
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Only change code above this line -->
|
||||
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<h4>#left-well</h4>
|
||||
<div class="well" id="left-well">
|
||||
<button class="btn btn-default target" id="target1">#target1</button>
|
||||
<button class="btn btn-default target" id="target2">#target2</button>
|
||||
<button class="btn btn-default target" id="target3">#target3</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<h4>#right-well</h4>
|
||||
<div class="well" id="right-well">
|
||||
<button class="btn btn-default target" id="target4">#target4</button>
|
||||
<button class="btn btn-default target" id="target5">#target5</button>
|
||||
<button class="btn btn-default target" id="target6">#target6</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,113 @@
|
||||
---
|
||||
id: bad87fee1348bd9aedc08826
|
||||
title: 使用 jQuery class 选择器选择元素
|
||||
challengeType: 6
|
||||
forumTopicId: 18316
|
||||
required:
|
||||
-
|
||||
link: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css'
|
||||
dashedName: target-elements-by-class-using-jquery
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
如何使所有的 `button` 标签都有弹跳的动画效果？ 用 `$("button")` 选取所有的 button 标签，并用 `.addClass("animated bounce");` 给其添加一些 CSS 属性。
|
||||
|
||||
jQuery 的 `.addClass()` 方法用来给标签添加类。
|
||||
|
||||
首先，使用 `$(".well")` 选取类为 `well` 的 `div` 标签。
|
||||
|
||||
值得注意的是，和 CSS 声明一样，在类名前需要添加 `.`。
|
||||
|
||||
然后，用 jQuery 的 `.addClass()` 方法添加 `animated` 和 `shake` class。
|
||||
|
||||
例如，在 `document ready function` 中添加下面的代码，使所有类为 `text-primary` 的标签抖动：
|
||||
|
||||
```js
|
||||
$(".text-primary").addClass("animated shake");
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
应该用 jQuery 的 `addClass()` 方法给所有 class 为 `well` 的元素添加 `animated` 和 `shake` class。
|
||||
|
||||
```js
|
||||
assert($('.well').hasClass('animated') && $('.well').hasClass('shake'));
|
||||
```
|
||||
|
||||
应该仅用 jQuery 给元素添加这些 class。
|
||||
|
||||
```js
|
||||
assert(!code.match(/class\.\*animated/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$("button").addClass("animated bounce");
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Only change code above this line -->
|
||||
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<h4>#left-well</h4>
|
||||
<div class="well" id="left-well">
|
||||
<button class="btn btn-default target" id="target1">#target1</button>
|
||||
<button class="btn btn-default target" id="target2">#target2</button>
|
||||
<button class="btn btn-default target" id="target3">#target3</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<h4>#right-well</h4>
|
||||
<div class="well" id="right-well">
|
||||
<button class="btn btn-default target" id="target4">#target4</button>
|
||||
<button class="btn btn-default target" id="target5">#target5</button>
|
||||
<button class="btn btn-default target" id="target6">#target6</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$("button").addClass("animated bounce");
|
||||
$(".well").addClass("animated shake");
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Only change code above this line -->
|
||||
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<h4>#left-well</h4>
|
||||
<div class="well" id="left-well">
|
||||
<button class="btn btn-default target" id="target1">#target1</button>
|
||||
<button class="btn btn-default target" id="target2">#target2</button>
|
||||
<button class="btn btn-default target" id="target3">#target3</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<h4>#right-well</h4>
|
||||
<div class="well" id="right-well">
|
||||
<button class="btn btn-default target" id="target4">#target4</button>
|
||||
<button class="btn btn-default target" id="target5">#target5</button>
|
||||
<button class="btn btn-default target" id="target6">#target6</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,123 @@
|
||||
---
|
||||
id: bad87fee1348bd9aeda08826
|
||||
title: 使用 jQuery id 选择器选择元素
|
||||
challengeType: 6
|
||||
forumTopicId: 18317
|
||||
required:
|
||||
-
|
||||
link: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css'
|
||||
dashedName: target-elements-by-id-using-jquery
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
也能通过 id 属性选取标签。
|
||||
|
||||
首先，用 `$("#target3")` 选择器选取 id 为 `target3` 的 `button` 标签。
|
||||
|
||||
注意，和 CSS 声明一样，在 id 名前需要添加 `#`。
|
||||
|
||||
然后，用 jQuery 的 `.addClass()` 方法添加 `animated` 和 `fadeOut` 类。
|
||||
|
||||
下面的代码的效果是使 id 为 `target6` 的 `button` 标签淡出：
|
||||
|
||||
```js
|
||||
$("#target6").addClass("animated fadeOut");
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
应该选择 `id` 为 `target3` 的 `button` 元素，使用 jQuery 的 `addClass()` 函数给它添加 `animated` class。
|
||||
|
||||
```js
|
||||
assert($('#target3').hasClass('animated'));
|
||||
```
|
||||
|
||||
应该选中 id 为 `target3` 的元素，使用 jQuery 的 `addClass()` 函数给它添加 `fadeOut` class。
|
||||
|
||||
```js
|
||||
assert(
|
||||
($('#target3').hasClass('fadeOut') || $('#target3').hasClass('fadeout')) &&
|
||||
code.match(/\$\(\s*.#target3.\s*\)/g)
|
||||
);
|
||||
```
|
||||
|
||||
应该仅用 jQuery 给元素添加这些 class。
|
||||
|
||||
```js
|
||||
assert(!code.match(/class.*animated/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$("button").addClass("animated bounce");
|
||||
$(".well").addClass("animated shake");
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Only change code above this line -->
|
||||
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<h4>#left-well</h4>
|
||||
<div class="well" id="left-well">
|
||||
<button class="btn btn-default target" id="target1">#target1</button>
|
||||
<button class="btn btn-default target" id="target2">#target2</button>
|
||||
<button class="btn btn-default target" id="target3">#target3</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<h4>#right-well</h4>
|
||||
<div class="well" id="right-well">
|
||||
<button class="btn btn-default target" id="target4">#target4</button>
|
||||
<button class="btn btn-default target" id="target5">#target5</button>
|
||||
<button class="btn btn-default target" id="target6">#target6</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$("button").addClass("animated bounce");
|
||||
$(".well").addClass("animated shake");
|
||||
$("#target3").addClass("animated fadeOut");
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Only change code above this line -->
|
||||
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<h4>#left-well</h4>
|
||||
<div class="well" id="left-well">
|
||||
<button class="btn btn-default target" id="target1">#target1</button>
|
||||
<button class="btn btn-default target" id="target2">#target2</button>
|
||||
<button class="btn btn-default target" id="target3">#target3</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<h4>#right-well</h4>
|
||||
<div class="well" id="right-well">
|
||||
<button class="btn btn-default target" id="target4">#target4</button>
|
||||
<button class="btn btn-default target" id="target5">#target5</button>
|
||||
<button class="btn btn-default target" id="target6">#target6</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,139 @@
|
||||
---
|
||||
id: bad87fee1348bd9aed008826
|
||||
title: 使用 jQuery 选择偶数元素
|
||||
challengeType: 6
|
||||
forumTopicId: 18318
|
||||
required:
|
||||
-
|
||||
link: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css'
|
||||
dashedName: target-even-elements-using-jquery
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
也可以用基于位置的奇 `:odd` 和偶 `:even` 选择器选取标签。
|
||||
|
||||
注意，jQuery 是零索引（zero-indexed）的，这意味着第 1 个标签的位置编号是 0。 这有点混乱和反常——`:odd` 表示选择第 2 个标签（位置编号 1），第 4 个标签（位置编号 3）……等等，以此类推。
|
||||
|
||||
下面的代码展示了选取所有 `target` class 元素的奇数元素并设置 sheke 效果：
|
||||
|
||||
```js
|
||||
$(".target:odd").addClass("animated shake");
|
||||
```
|
||||
|
||||
尝试选取所有 `target` class 元素的偶数元素并给它们设置 `animated` 和 `shake` class。 请记住， **偶数**指的是基于零系统的元素的位置。
|
||||
|
||||
# --hints--
|
||||
|
||||
所有的偶数位置上的 `target` 元素都应该抖动。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('.target:even').hasClass('animated') && $('.target:even').hasClass('shake')
|
||||
);
|
||||
```
|
||||
|
||||
应该使用 `:even` 选择器修改这些元素。
|
||||
|
||||
```js
|
||||
assert(code.match(/\:even/g));
|
||||
```
|
||||
|
||||
应该仅用 jQuery 给元素添加 class。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/\$\(".target:even"\)/g) ||
|
||||
code.match(/\$\('.target:even'\)/g) ||
|
||||
code.match(/\$\(".target"\).filter\(":even"\)/g) ||
|
||||
code.match(/\$\('.target'\).filter\(':even'\)/g)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$("#target1").css("color", "red");
|
||||
$("#target1").prop("disabled", true);
|
||||
$("#target4").remove();
|
||||
$("#target2").appendTo("#right-well");
|
||||
$("#target5").clone().appendTo("#left-well");
|
||||
$("#target1").parent().css("background-color", "red");
|
||||
$("#right-well").children().css("color", "orange");
|
||||
$("#left-well").children().css("color", "green");
|
||||
$(".target:nth-child(2)").addClass("animated bounce");
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Only change code above this line -->
|
||||
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<h4>#left-well</h4>
|
||||
<div class="well" id="left-well">
|
||||
<button class="btn btn-default target" id="target1">#target1</button>
|
||||
<button class="btn btn-default target" id="target2">#target2</button>
|
||||
<button class="btn btn-default target" id="target3">#target3</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<h4>#right-well</h4>
|
||||
<div class="well" id="right-well">
|
||||
<button class="btn btn-default target" id="target4">#target4</button>
|
||||
<button class="btn btn-default target" id="target5">#target5</button>
|
||||
<button class="btn btn-default target" id="target6">#target6</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$("#target1").css("color", "red");
|
||||
$("#target1").prop("disabled", true);
|
||||
$("#target4").remove();
|
||||
$("#target2").appendTo("#right-well");
|
||||
$("#target5").clone().appendTo("#left-well");
|
||||
$("#target1").parent().css("background-color", "red");
|
||||
$("#right-well").children().css("color", "orange");
|
||||
$("#left-well").children().css("color", "green");
|
||||
$(".target:nth-child(2)").addClass("animated bounce");
|
||||
$(".target:even").addClass("animated shake");
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Only change code above this line -->
|
||||
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<h4>#left-well</h4>
|
||||
<div class="well" id="left-well">
|
||||
<button class="btn btn-default target" id="target1">#target1</button>
|
||||
<button class="btn btn-default target" id="target2">#target2</button>
|
||||
<button class="btn btn-default target" id="target3">#target3</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<h4>#right-well</h4>
|
||||
<div class="well" id="right-well">
|
||||
<button class="btn btn-default target" id="target4">#target4</button>
|
||||
<button class="btn btn-default target" id="target5">#target5</button>
|
||||
<button class="btn btn-default target" id="target6">#target6</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,118 @@
|
||||
---
|
||||
id: bad87fee1348bd9bedc08826
|
||||
title: 使用 jQuery 选择器选择元素
|
||||
challengeType: 6
|
||||
forumTopicId: 18319
|
||||
required:
|
||||
-
|
||||
link: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css'
|
||||
dashedName: target-html-elements-with-selectors-using-jquery
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
现在我们有一个 `document ready` 函数。
|
||||
|
||||
首先，完成第一个 jQuery 语句。 所有的 jQuery 函数都以 `$` 开头，这个符号通常被称为美元符号（dollar sign operator）或 bling。
|
||||
|
||||
jQuery 通常选取并操作带有<dfn>选择器（selector）</dfn>的 HTML 标签。
|
||||
|
||||
比如，想要给 `button` 元素添加跳跃效果。 只需要在 document ready 函数内添加如下代码：
|
||||
|
||||
```js
|
||||
$("button").addClass("animated bounce");
|
||||
```
|
||||
|
||||
请注意，我们已经在后台引入了 jQuery 库和 Animate.css 库，所以你可以在编辑器里直接使用它们。 你将使用 jQuery 将 Animate.css `bounce` class 应用于 `button` 元素。
|
||||
|
||||
# --hints--
|
||||
|
||||
应该用 jQuery 的 `addClass()` 函数给 `button` 元素添加 `animated` 和 `bounce` class。
|
||||
|
||||
```js
|
||||
assert($('button').hasClass('animated') && $('button').hasClass('bounce'));
|
||||
```
|
||||
|
||||
应该仅用 jQuery 给元素添加 class。
|
||||
|
||||
```js
|
||||
assert(!code.match(/class.*animated/g));
|
||||
```
|
||||
|
||||
jQuery 代码应该放在 `$(document).ready();` 函数里。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.replace(/\s/g, '').match(/\$\(document\)\.ready\(function\(\)\{\$/g)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Only change code above this line -->
|
||||
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<h4>#left-well</h4>
|
||||
<div class="well" id="left-well">
|
||||
<button class="btn btn-default target" id="target1">#target1</button>
|
||||
<button class="btn btn-default target" id="target2">#target2</button>
|
||||
<button class="btn btn-default target" id="target3">#target3</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<h4>#right-well</h4>
|
||||
<div class="well" id="right-well">
|
||||
<button class="btn btn-default target" id="target4">#target4</button>
|
||||
<button class="btn btn-default target" id="target5">#target5</button>
|
||||
<button class="btn btn-default target" id="target6">#target6</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$("button").addClass("animated bounce");
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Only change code above this line -->
|
||||
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<h4>#left-well</h4>
|
||||
<div class="well" id="left-well">
|
||||
<button class="btn btn-default target" id="target1">#target1</button>
|
||||
<button class="btn btn-default target" id="target2">#target2</button>
|
||||
<button class="btn btn-default target" id="target3">#target3</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<h4>#right-well</h4>
|
||||
<div class="well" id="right-well">
|
||||
<button class="btn btn-default target" id="target4">#target4</button>
|
||||
<button class="btn btn-default target" id="target5">#target5</button>
|
||||
<button class="btn btn-default target" id="target6">#target6</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,125 @@
|
||||
---
|
||||
id: bad87fee1348bd9aed208826
|
||||
title: 使用 jQuery 选择元素的子元素
|
||||
challengeType: 6
|
||||
forumTopicId: 18320
|
||||
dashedName: target-the-children-of-an-element-using-jquery
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
把 HTML 标签放到另一个级别的标签里，这些 HTML 标签被称为该标签的<dfn>子标签（children element）</dfn>。 例如，本次挑战中文本为 `#target1`、`#target2` 和 `#target3` 的按钮都是 `<div class="well" id="left-well">` 标签的子标签。
|
||||
|
||||
jQuery 有一个 `children()` 方法，可以访问被选取标签的子标签。
|
||||
|
||||
下面的代码展示了用 `children()` 方法把 `left-well` 标签的子标签的颜色设置成 `blue`（蓝色）：
|
||||
|
||||
```js
|
||||
$("#left-well").children().css("color", "blue")
|
||||
```
|
||||
|
||||
# --instructions--
|
||||
|
||||
将 `right-well` 元素的所有子元素设置为橙色（orange）。
|
||||
|
||||
# --hints--
|
||||
|
||||
`#right-well` 的所有子元素应该有橙色文本。
|
||||
|
||||
```js
|
||||
assert($('#right-well').children().css('color') === 'rgb(255, 165, 0)');
|
||||
```
|
||||
|
||||
应该用 `children()` 函数修改这些元素。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.children\(\)\.css/g));
|
||||
```
|
||||
|
||||
应该仅用 jQuery 给标签添加 class。
|
||||
|
||||
```js
|
||||
assert(code.match(/<div class="well" id="right-well">/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$("#target1").css("color", "red");
|
||||
$("#target1").prop("disabled", true);
|
||||
$("#target4").remove();
|
||||
$("#target2").appendTo("#right-well");
|
||||
$("#target5").clone().appendTo("#left-well");
|
||||
$("#target1").parent().css("background-color", "red");
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Only change code above this line -->
|
||||
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<h4>#left-well</h4>
|
||||
<div class="well" id="left-well">
|
||||
<button class="btn btn-default target" id="target1">#target1</button>
|
||||
<button class="btn btn-default target" id="target2">#target2</button>
|
||||
<button class="btn btn-default target" id="target3">#target3</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<h4>#right-well</h4>
|
||||
<div class="well" id="right-well">
|
||||
<button class="btn btn-default target" id="target4">#target4</button>
|
||||
<button class="btn btn-default target" id="target5">#target5</button>
|
||||
<button class="btn btn-default target" id="target6">#target6</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$("#target1").css("color", "red");
|
||||
$("#target1").prop("disabled", true);
|
||||
$("#target4").remove();
|
||||
$("#target2").appendTo("#right-well");
|
||||
$("#target5").clone().appendTo("#left-well");
|
||||
$("#target1").parent().css("background-color", "red");
|
||||
$("#right-well").children().css("color", "orange");
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Only change code above this line -->
|
||||
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<h4>#left-well</h4>
|
||||
<div class="well" id="left-well">
|
||||
<button class="btn btn-default target" id="target1">#target1</button>
|
||||
<button class="btn btn-default target" id="target2">#target2</button>
|
||||
<button class="btn btn-default target" id="target3">#target3</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<h4>#right-well</h4>
|
||||
<div class="well" id="right-well">
|
||||
<button class="btn btn-default target" id="target4">#target4</button>
|
||||
<button class="btn btn-default target" id="target5">#target5</button>
|
||||
<button class="btn btn-default target" id="target6">#target6</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,140 @@
|
||||
---
|
||||
id: bad87fee1348bd9aed308826
|
||||
title: 使用 jQuery 选择元素的父元素
|
||||
challengeType: 6
|
||||
forumTopicId: 18321
|
||||
dashedName: target-the-parent-of-an-element-using-jquery
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
每个 HTML 标签都默认 `inherits`（继承）其 `parent`（父标签）的 CSS 属性。
|
||||
|
||||
例如，`h3` 标签 `jQuery Playground` 的父标签是 `<div class="container-fluid">`，而这个标签的父标签是 `body`。
|
||||
|
||||
jQuery 有一个 `parent()` 方法，可以访问被选取标签的父标签。
|
||||
|
||||
下面的代码展示了使用 `parent()` 方法把 `left-well` 标签的父标签背景色设置成蓝色（blue）：
|
||||
|
||||
```js
|
||||
$("#left-well").parent().css("background-color", "blue")
|
||||
```
|
||||
|
||||
把 `#target1` 元素的父元素背景色设置成红色（red）。
|
||||
|
||||
# --hints--
|
||||
|
||||
`left-well` 元素应该有红色的背景。
|
||||
|
||||
```js
|
||||
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'
|
||||
);
|
||||
```
|
||||
|
||||
应该用 `.parent()` 函数修改该元素。
|
||||
|
||||
```js
|
||||
assert(code.match(/\.parent\s*\(\s*\)\s*\.css/g));
|
||||
```
|
||||
|
||||
应该在 `#target1` 元素上调用 `.parent()` 方法。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/\$\s*?\(\s*?(?:'|")\s*?#target1\s*?(?:'|")\s*?\)\s*?\.parent/gi)
|
||||
);
|
||||
```
|
||||
|
||||
应该仅用 jQuery 给元素添加 class。
|
||||
|
||||
```js
|
||||
assert(code.match(/<div class="well" id="left-well">/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$("#target1").css("color", "red");
|
||||
$("#target1").prop("disabled", true);
|
||||
$("#target4").remove();
|
||||
$("#target2").appendTo("#right-well");
|
||||
$("#target5").clone().appendTo("#left-well");
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Only change code above this line -->
|
||||
|
||||
<body>
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<h4>#left-well</h4>
|
||||
<div class="well" id="left-well">
|
||||
<button class="btn btn-default target" id="target1">#target1</button>
|
||||
<button class="btn btn-default target" id="target2">#target2</button>
|
||||
<button class="btn btn-default target" id="target3">#target3</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<h4>#right-well</h4>
|
||||
<div class="well" id="right-well">
|
||||
<button class="btn btn-default target" id="target4">#target4</button>
|
||||
<button class="btn btn-default target" id="target5">#target5</button>
|
||||
<button class="btn btn-default target" id="target6">#target6</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$("#target1").css("color", "red");
|
||||
$("#target1").prop("disabled", true);
|
||||
$("#target4").remove();
|
||||
$("#target2").appendTo("#right-well");
|
||||
$("#target5").clone().appendTo("#left-well");
|
||||
$("#target1").parent().css("background-color", "red");
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Only change code above this line -->
|
||||
|
||||
<body>
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<h4>#left-well</h4>
|
||||
<div class="well" id="left-well">
|
||||
<button class="btn btn-default target" id="target1">#target1</button>
|
||||
<button class="btn btn-default target" id="target2">#target2</button>
|
||||
<button class="btn btn-default target" id="target3">#target3</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<h4>#right-well</h4>
|
||||
<div class="well" id="right-well">
|
||||
<button class="btn btn-default target" id="target4">#target4</button>
|
||||
<button class="btn btn-default target" id="target5">#target5</button>
|
||||
<button class="btn btn-default target" id="target6">#target6</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
```
|
||||
@ -0,0 +1,143 @@
|
||||
---
|
||||
id: bad87fee1348bd9aed908626
|
||||
title: 用多个 jQuery 选择器选择同一个元素
|
||||
challengeType: 6
|
||||
forumTopicId: 18322
|
||||
required:
|
||||
-
|
||||
link: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css'
|
||||
dashedName: target-the-same-element-with-multiple-jquery-selectors
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
现在学写了三种选取标签的方法：用标签选择器： `$("button")`，用类选择器：`$(".btn")` 以及用 id 选择器：`$("#target1")` 。
|
||||
|
||||
虽然可以在单个 `.addClass()` 内添加多个类，但是我们可以用*三种不同的方式*给一种标签添加类。
|
||||
|
||||
以三种不同的方式用 `.addClass()` 方法每次只给一种标签添加一个类：
|
||||
|
||||
给所有的 `button` 标签添加 `animated` 类。
|
||||
|
||||
给所有类为 `.btn` 的 button 标签添加 `shake` 类。
|
||||
|
||||
给所有 id 为 `#target1` 的 button 标签添加 `btn-primary` 类。
|
||||
|
||||
**注意：**只针对一个元素并且一次只能添加一个 class。 总之，三个选择器最终将添加三个 class `shake`、`animated` 以及 `btn-primary` 到 `#target1` 上。
|
||||
|
||||
# --hints--
|
||||
|
||||
应该使用 `$("button")` 选择器。
|
||||
|
||||
```js
|
||||
assert(code.match(/\$\s*?\(\s*?(?:'|")\s*?button\s*?(?:'|")/gi));
|
||||
```
|
||||
|
||||
应该使用 `$(".btn")` 选择器。
|
||||
|
||||
```js
|
||||
assert(code.match(/\$\s*?\(\s*?(?:'|")\s*?\.btn\s*?(?:'|")/gi));
|
||||
```
|
||||
|
||||
应该使用 `$("#target1")` 选择器。
|
||||
|
||||
```js
|
||||
assert(code.match(/\$\s*?\(\s*?(?:'|")\s*?#target1\s*?(?:'|")/gi));
|
||||
```
|
||||
|
||||
三个选择器每个应该只添加一个类。
|
||||
|
||||
```js
|
||||
assert(
|
||||
code.match(/addClass/g) &&
|
||||
code.match(/addClass\s*?\(\s*?('|")\s*?[\w-]+\s*?\1\s*?\)/g).length > 2
|
||||
);
|
||||
```
|
||||
|
||||
`#target1` 标签应具有 `animated`、`shake` 和 `btn-primary` 三个类。
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('#target1').hasClass('animated') &&
|
||||
$('#target1').hasClass('shake') &&
|
||||
$('#target1').hasClass('btn-primary')
|
||||
);
|
||||
```
|
||||
|
||||
应该仅用 jQuery 给标签添加类。
|
||||
|
||||
```js
|
||||
assert(!code.match(/class.*animated/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Only change code above this line -->
|
||||
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<h4>#left-well</h4>
|
||||
<div class="well" id="left-well">
|
||||
<button class="btn btn-default target" id="target1">#target1</button>
|
||||
<button class="btn btn-default target" id="target2">#target2</button>
|
||||
<button class="btn btn-default target" id="target3">#target3</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<h4>#right-well</h4>
|
||||
<div class="well" id="right-well">
|
||||
<button class="btn btn-default target" id="target4">#target4</button>
|
||||
<button class="btn btn-default target" id="target5">#target5</button>
|
||||
<button class="btn btn-default target" id="target6">#target6</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$("button").addClass("animated");
|
||||
$(".btn").addClass("shake");
|
||||
$("#target1").addClass("btn-primary");
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Only change code above this line -->
|
||||
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<h4>#left-well</h4>
|
||||
<div class="well" id="left-well">
|
||||
<button class="btn btn-default target" id="target1">#target1</button>
|
||||
<button class="btn btn-default target" id="target2">#target2</button>
|
||||
<button class="btn btn-default target" id="target3">#target3</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<h4>#right-well</h4>
|
||||
<div class="well" id="right-well">
|
||||
<button class="btn btn-default target" id="target4">#target4</button>
|
||||
<button class="btn btn-default target" id="target5">#target5</button>
|
||||
<button class="btn btn-default target" id="target6">#target6</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,117 @@
|
||||
---
|
||||
id: bad87fee1348bd9aed608826
|
||||
title: 使用 jQuery 的 appendTo 方法移动元素
|
||||
challengeType: 6
|
||||
forumTopicId: 18340
|
||||
dashedName: use-appendto-to-move-elements-with-jquery
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
现在来把标签从一个 `div` 移动到另一个里。
|
||||
|
||||
jQuery 有一个 `appendTo()` 方法，可以选取 HTML 标签并将其添加到另一个标签里面。
|
||||
|
||||
例如，如果要把 `target4` 从 right well 移到 left well，可以设置如下：
|
||||
|
||||
```js
|
||||
$("#target4").appendTo("#left-well");
|
||||
```
|
||||
|
||||
把 `target2` 元素从 `left-well` 移动到 `right-well`。
|
||||
|
||||
# --hints--
|
||||
|
||||
`target2` 元素不应该在 `left-well` 内。
|
||||
|
||||
```js
|
||||
assert($('#left-well').children('#target2').length === 0);
|
||||
```
|
||||
|
||||
`target2` 元素应该在 `right-well` 内。
|
||||
|
||||
```js
|
||||
assert($('#right-well').children('#target2').length > 0);
|
||||
```
|
||||
|
||||
应该仅用 jQuery 移动这些标签。
|
||||
|
||||
```js
|
||||
assert(!code.match(/class.*animated/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$("#target1").css("color", "red");
|
||||
$("#target1").prop("disabled", true);
|
||||
$("#target4").remove();
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Only change code above this line -->
|
||||
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<h4>#left-well</h4>
|
||||
<div class="well" id="left-well">
|
||||
<button class="btn btn-default target" id="target1">#target1</button>
|
||||
<button class="btn btn-default target" id="target2">#target2</button>
|
||||
<button class="btn btn-default target" id="target3">#target3</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<h4>#right-well</h4>
|
||||
<div class="well" id="right-well">
|
||||
<button class="btn btn-default target" id="target4">#target4</button>
|
||||
<button class="btn btn-default target" id="target5">#target5</button>
|
||||
<button class="btn btn-default target" id="target6">#target6</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$("#target1").css("color", "red");
|
||||
$("#target1").prop("disabled", true);
|
||||
$("#target4").remove();
|
||||
$("#target2").appendTo("#right-well");
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Only change code above this line -->
|
||||
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<h4>#left-well</h4>
|
||||
<div class="well" id="left-well">
|
||||
<button class="btn btn-default target" id="target1">#target1</button>
|
||||
<button class="btn btn-default target" id="target2">#target2</button>
|
||||
<button class="btn btn-default target" id="target3">#target3</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<h4>#right-well</h4>
|
||||
<div class="well" id="right-well">
|
||||
<button class="btn btn-default target" id="target4">#target4</button>
|
||||
<button class="btn btn-default target" id="target5">#target5</button>
|
||||
<button class="btn btn-default target" id="target6">#target6</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
@ -0,0 +1,118 @@
|
||||
---
|
||||
id: bad87fee1348bd9aecb08826
|
||||
title: 使用 jQuery 修改整个页面
|
||||
challengeType: 6
|
||||
forumTopicId: 18361
|
||||
required:
|
||||
-
|
||||
link: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css'
|
||||
dashedName: use-jquery-to-modify-the-entire-page
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
目前，已经完成了 jQuery playground。 把它移除吧。
|
||||
|
||||
jQuery 也能选取 `body` 标签。
|
||||
|
||||
这是使整个 body 淡出的代码：`$("body").addClass("animated fadeOut");`
|
||||
|
||||
来做一些更好玩的事。 给 `body` 标签添加 `animated` 和 `hinge` class。
|
||||
|
||||
# --hints--
|
||||
|
||||
应该给 `body` 标签添加 `animated` 和 `hinge` class。
|
||||
|
||||
```js
|
||||
assert($('body').hasClass('animated') && $('body').hasClass('hinge'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$("#target1").css("color", "red");
|
||||
$("#target1").prop("disabled", true);
|
||||
$("#target4").remove();
|
||||
$("#target2").appendTo("#right-well");
|
||||
$("#target5").clone().appendTo("#left-well");
|
||||
$("#target1").parent().css("background-color", "red");
|
||||
$("#right-well").children().css("color", "orange");
|
||||
$("#left-well").children().css("color", "green");
|
||||
$(".target:nth-child(2)").addClass("animated bounce");
|
||||
$(".target:even").addClass("animated shake");
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Only change code above this line -->
|
||||
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<h4>#left-well</h4>
|
||||
<div class="well" id="left-well">
|
||||
<button class="btn btn-default target" id="target1">#target1</button>
|
||||
<button class="btn btn-default target" id="target2">#target2</button>
|
||||
<button class="btn btn-default target" id="target3">#target3</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<h4>#right-well</h4>
|
||||
<div class="well" id="right-well">
|
||||
<button class="btn btn-default target" id="target4">#target4</button>
|
||||
<button class="btn btn-default target" id="target5">#target5</button>
|
||||
<button class="btn btn-default target" id="target6">#target6</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$("#target1").css("color", "red");
|
||||
$("#target1").prop("disabled", true);
|
||||
$("#target4").remove();
|
||||
$("#target2").appendTo("#right-well");
|
||||
$("#target5").clone().appendTo("#left-well");
|
||||
$("#target1").parent().css("background-color", "red");
|
||||
$("#right-well").children().css("color", "orange");
|
||||
$("#left-well").children().css("color", "green");
|
||||
$(".target:nth-child(2)").addClass("animated bounce");
|
||||
$(".target:even").addClass("animated shake");
|
||||
$("body").addClass("animated hinge");
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Only change code above this line -->
|
||||
|
||||
<div class="container-fluid">
|
||||
<h3 class="text-primary text-center">jQuery Playground</h3>
|
||||
<div class="row">
|
||||
<div class="col-xs-6">
|
||||
<h4>#left-well</h4>
|
||||
<div class="well" id="left-well">
|
||||
<button class="btn btn-default target" id="target1">#target1</button>
|
||||
<button class="btn btn-default target" id="target2">#target2</button>
|
||||
<button class="btn btn-default target" id="target3">#target3</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<h4>#right-well</h4>
|
||||
<div class="well" id="right-well">
|
||||
<button class="btn btn-default target" id="target4">#target4</button>
|
||||
<button class="btn btn-default target" id="target5">#target5</button>
|
||||
<button class="btn btn-default target" id="target6">#target6</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
Reference in New Issue
Block a user