gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix(guide): Add full solution code to jQuery challenges (#35488)

Browse Source
This commit is contained in:
The Coding Aviator
2019-03-09 03:34:01 +05:30
committed by Randell Dawson
parent 871d8ff3d9
commit 058db4f449
8 changed files with 135 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
guide/english/certifications/front-end-libraries/jquery/change-text-inside-an-element-using-jquery/index.md
View File

@ -13,8 +13,6 @@ title: Change Text Inside an Element Using jQuery
});
</script>
<!-- Only change code above this line. -->
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row">

10
guide/english/certifications/front-end-libraries/jquery/index.md
View File

@ -3,11 +3,9 @@ title: jQuery
---
## jQuery
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/mathematics/quadratic-equations/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
jQuery is a JavaScript library which is popularly used for JavaScript DOM manipulation, CSS handling and Ajax.
#### More Information:
<!-- Please add any articles you think might be helpful to read before writing the article -->
- [jQuery Website](https://jquery.com/)
- [jQuery | Wikipedia](https://en.wikipedia.org/wiki/JQuery)

2
guide/english/certifications/front-end-libraries/jquery/remove-classes-from-an-element-with-jquery/index.md
View File

@ -15,8 +15,6 @@ title: Remove Classes from an Element with jQuery
});
</script>
<!-- Only change code above this line. -->
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row">

22
guide/english/certifications/front-end-libraries/jquery/target-elements-by-class-using-jquery/index.md
View File

@ -14,4 +14,26 @@ title: Target Elements by Class Using jQuery
$(".well").addClass("shake");
});
</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>
```

25
guide/english/certifications/front-end-libraries/jquery/target-elements-by-id-using-jquery/index.md
View File

@ -9,7 +9,30 @@ title: Target Elements by id Using jQuery
$(document).ready(function() {
$("button").addClass("animated bounce");
$(".well").addClass("animated shake");
$("#target3").addClass("fadeOut"); // Target elements with the id "target3" and add the class "fadeOut" to them.
$("#target3").addClass("fadeOut");
});
</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>
```

36
guide/english/certifications/front-end-libraries/jquery/target-html-elements-with-selectors-using-jquery/index.md
View File

@ -8,10 +8,10 @@ title: Target HTML Elements with Selectors Using jQuery
## Example
```js
//You can select all <p> elements on a page like this = $("p")
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
```
@ -19,8 +19,30 @@ title: Target HTML Elements with Selectors Using jQuery
## Solution
```html
<script>
$(document).ready(function() {
$("button").addClass("animated bounce"); // We are selecting the button elements and adding "animated bounce" class to them.
$(document).ready(function(){
$("button").addClass("animated bounce");
});
</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>
```

33
guide/english/certifications/front-end-libraries/jquery/target-the-parent-of-an-element-using-jquery/index.md
View File

@ -8,7 +8,36 @@ title: Target the Parent of an Element Using jQuery
```html
<script>
$(document).ready(function() {
$("#target1").parent().css("background-color", "red"); // Selects the parent of #target1 and changes its background-color to red
$("#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>
```
<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>
```

28
guide/english/certifications/front-end-libraries/jquery/target-the-same-element-with-multiple-jquery-selectors/index.md
View File

@ -7,9 +7,31 @@ title: Target the Same Element with Multiple jQuery Selectors
```html
<script>
$(document).ready(function() {
$("button").addClass("animated"); // Target elements with type "button" and add the class "animated" to them.
$(".btn").addClass("shake"); // Target elements with class ".btn" and add the class "shake" to them.
$("#target1").addClass("btn-primary"); // Target elements with id "#target1" and add the class "btn-primary" to them.
$("button").addClass("animated");
$(".btn").addClass("shake");
$("#target1").addClass("btn-primary");
});
</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>
```