FreeCodeCamp: jQuery - zilongxuan001/LearnFreecode GitHub Wiki

  1. Lesson: Learn how Script Tags and Document Ready Work
  2. Lesson: Target HTML Elements with Selectors Using jQuery
  3. Lesson: Target Elements by Class Using jQuery
  4. Lesson: Target Elements by ID Using jQuery
  5. Lesson: Delete your jQuery Functions
  6. Lesson: Target the same element with multiple jQuery Selectors
  7. Lesson: Remove Classes from an element with jQuery
  8. Lesson: Change the CSS of an Element Using jQuery
  9. Lesson: Disable an Element Using jQuery
  10. Lesson: Change Text Inside an Element Using jQuery
  11. Lesson: Remove an Element Using jQuery
  12. Lesson: Use appendTo to Move Elements with jQuery
  13. Lesson: Clone an Element Using jQuery
  14. Lesson: Target the Parent of an Element Using jQuery
  15. Lesson: Target the Children of an Element Using jQuery
  16. Lesson: Target a Specific Child of an Element Using jQuery
  17. Lesson: Target Even Numbered Elements Using jQuery
  18. Lesson: Use jQuery to Modify the Entire Page

Learn how Script Tags and Document Ready Work

##介绍 现在，我们准备学习jQuery，它是最流行的JavaScript工具。不用担心JavaScript，我们会学到的。

方法

在开始jQuery前，我们需要在HTML里加点东西。

首先，添加script元素到你的页面顶部。你的浏览器会运行script元素里的Javascript，包括jQuery。

在scirpt元素里面，添加$(document).ready(function(){});

我们稍后会学到功能。记住一件很重要的事情，就是只要浏览器加在你的页面，你在功能function里的代码，就会运行。

所以，没有document ready function, 你的代码在HTML表达前就会运行，这会导致产生bug。

#代码


<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>

##浏览器显示

image

Target HTML Elements with Selectors Using jQuery

目的

添加第一条jQuery语句。

所有的jQuery功能都以$开头。

jQuery经常选择HTML元素作为选择器selector，然后作用于该元素。

方法

例如，让你的所有的button跳一下，只需要把下列代码加入到document ready function

$("button") addClass("animated bounce");

意思为 $(选择button元素作为选择器) 添加class (class的名称是animated bounce);

注意，我们在后台已经添加了jQuery库和Animate.css库，所以你可以在编辑器里使用。

代码

<script>
  $(document).ready(function() {
    $("button").addClass("animated bounce");
  });
</script>

浏览器显示

2.gif

六个按钮会上下跳一下。

Target Elements by Class Using jQuery

介绍

使用jQuery，通过class定位元素。

而#107 是通过HTML元素定位元素。使用$("button)选中了button元素，通过.addClass功能，添加了上下跳的class animated bounce。

addClass()的功能，就是你能够添加class到元素中。

这次，选择元素的class作为选择器，为元素添加新的class。

方法

选择class。例如，选择``$(.well)作为选择器，注意well`是个class，前面要加`.` 添加新的class。将新的class放入`addClass()`里即可。

代码

<script>
  $(document).ready(function() {
       $(".well").addClass("animated shake");
  });
</script>

浏览器显示

6个按钮会左右闪动一下。

Target Elements by ID Using jQuery

介绍

#108 使用元素的class定位元素、

#107 使用元素来定位元素

另外，还能使用id属性来定位元素。

方法

选择id。例如$(#target3)，注意idtarget3前，要加#

代码

<script>
  $(document).ready(function() {
    $("#target3").addClass("animated fadeOut");
  });
</script>

浏览器显示

id=target3的按钮会消失。

Delete your jQuery Functions

删除三个动画，只保留document ready funciton

来源：https://www.freecodecamp.org/challenges/delete-your-jquery-functions

Target the same element with multiple jQuery Selectors

介绍

用不同的jQuery选择器定位相同的元素。

##方法 用元素、class和id来定位元素。

##代码

<script>
  $(document).ready(function() {
    $("button").addClass("animated");
    $(".btn").addClass("shake");
    $("#target1").addClass("btn-primary");

  });
</script>

##浏览器显示 https://www.freecodecamp.org/challenges/target-the-same-element-with-multiple-jquery-selectors

Remove Classes from an element with jQuery

介绍

你可以用jQuery的addClass()功能添加class，也可以用removeClass()功能移除class。

方法

举例

$("#target2").removeClass("btn-default");

代码

<script>
  $(document).ready(function() {
    $("button").addClass("animated bounce");
    $(".well").addClass("animated shake");
    $("#target3").addClass("animated fadeOut");
    $("button").removeClass("btn-default");

  });
</script>

浏览器显示

添加代码前 image

添加代码后 image

来源： https://www.freecodecamp.org/challenges/remove-classes-from-an-element-with-jquery

Change the CSS of an Element Using jQuery

介绍

我们可以直接改变一个HTML元素的CSS。

jQuery有一个.css()功能，允许你改变一个元素的css。

方法

举例，把一个元素改成蓝色。

$("#target1").css("color", "blue");

意思为，$("选择器").css("属性"，"属性值");

代码

<script>
  $(document).ready(function() {
    $("#target1").css("color","red");
  });
</script>

浏览器显示

image

来源： https://www.freecodecamp.org/challenges/change-the-css-of-an-element-using-jquery

Disable an Element Using jQuery

介绍

你可以用jQuery改变元素的非CSS特性，比如让button失去点击特性。

当button不能点击，就会变成灰色。

方法

可以使用.prop()功能调整元素特性。 举例

$("button").prop("disabled", true);

代码

<script>
  $(document).ready(function() {
    $("#target1").css("color", "red");
    $("#target1").prop("disabled",true);

  });
</script>

浏览器显示

image

来源：

https://www.freecodecamp.org/challenges/disable-an-element-using-jquery

Change Text Inside an Element Using jQuery

介绍

使用jQuery，你可以改变元素开始标签和结束标签之间文本，甚至可以改变HTML标记。

方法

jQuery有个.html()功能，可以让你在元素中添加HTML标签和文本。该元素中任何先前的内容都会被添加的新内容替代。

举例如下

$("h3").html("<em>jQuery Playground</em>");

另外，jQuery还有一个.text()功能，可以在不添加标签的情况下改变文本。

代码


<script>
  $(document).ready(function() {
    $("#target1").css("color", "red");
    $("#target4").html("<em>#target4</em>")
    $("#target1").text("我的国")
    
  });
</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>

浏览器显示

image

来源： https://www.freecodecamp.org/challenges/change-text-inside-an-element-using-jquery

Remove an Element Using jQuery

介绍

使用jQuery，从页面中移除一个HTML元素。 对比 ：#112 .reomveClass()是移除class。

方法

jQuery有个功能.remove()，可以完全移除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>

浏览器显示

image

来源： https://www.freecodecamp.org/challenges/remove-an-element-using-jquery

Use appendTo to Move Elements with jQuery

介绍

让我们把一个元素从div移到另一个地方。

方法

jQuery有个功能叫appendTo()，允许你选择一个元素，并加到另外一个元素里。

举例，把target4从右边移到左边，

$("#target4").appendTo("#left-well");

代码

···

<script> $(document).ready(function() { $("#target1").css("color", "red"); $("#target1").prop("disabled", true); $("#target4").remove(); $("#target2").appendTo("#right-well"); }); </script>

jQuery Playground

#left-well

#target1 #target2 #target3

#right-well

#target4 #target5 #target6

···

浏览器显示

image

来源： https://www.freecodecamp.org/challenges/use-appendto-to-move-elements-with-jquery

Clone an Element Using jQuery

介绍

目前，我们已学到的有，移动元素 #117 ，删除元素 #116 ，改变元素 #115 ，改变元素特性 #114

另外，还可以clone一个元素。

方法

jQuery有一个功能.clone()，可以clone一个元素。

举例，把target2从左边克隆到右边，

$("#target2").clone().appendTo("#right-well");

这里用了两个功能，.clone()和.appendTo()，这叫做功能链function chaining。

练习

现在把target5克隆到你的左边。

代码


<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>

浏览器显示

image

来源： https://www.freecodecamp.org/challenges/clone-an-element-using-jquery

Tgaret the Parent of an Element Using jQuery

介绍

每个HTML元素都有一个父元素parent，可以从父元素中继承inherits特性

举例，h3元素有父元素div，div有父元素body

通过.parent()功能，可以实现通过定位子元素，改变父元素的特性。

方法

举例 选择#left-well的div，将其父元素的div特性改为红色背景。 $("#left-well").parent().css("background-color", "blue")

$("子元素选择器").parent().css("属性"，“属性值”);

练习

把#target1 元素的父元素改为红色背景。

代码


<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>

浏览器显示

image

来源： https://www.freecodecamp.org/challenges/target-the-parent-of-an-element-using-jquery

Target the Children of an Element Using jQuery

介绍

如同#119 所有，每个元素都有父元素，同样，每个元素也可能会有子元素。

方法

通过children功能，可以改变子元素的特性。

练习

举例给#right-well元素的子元素变成橙色 $("#right-well").children().css("color","orange");

$("父元素选择器").parent().css("属性"，“属性值”);

代码


<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>

浏览器显示

image

来源： https://www.freecodecamp.org/challenges/target-the-children-of-an-element-using-jquery

Target a Specific Child of an Element Using jQuery

介绍

你可以看到d属性如此方便jQuery选择器定位。但是你不会总是有这么灵巧的id去使用。

怎么办？

幸运的是，jQuery有很多定位元素的技巧。

css选择器target:nth-child(n)，可以让你选择class或元素类型中要定位的的某个元素。

方法

举例，让每个well的第三个子元素弹跳 $(".target:nth-child(3)").addClass("animated bounce");

练习

让你的每个well元素的第二个子元素弹跳。

代码


<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>

浏览器显示

image

来源： https://www.freecodecamp.org/challenges/target-a-specific-child-of-an-element-using-jquery

Target Even Numbered Elements Using jQuery

介绍

我们可以选择奇数或偶数的元素，来改变元素特性。

方法

$(".target:even").addClass("新class") $(".target:odd").addClass("新class")

举例，让所有的奇数元素闪动 $(".target:odd").addClass("animated shake");

注意：jQuery的索引是从0开始，所以选中odd元素其实是选中了偶数元素

练习

为偶数的元素添加闪动class。

代码


<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>

浏览器显示

image

来源： https://www.freecodecamp.org/challenges/target-even-numbered-elements-using-jquery

Use jQuery to Modify the Entire Page

介绍

jQuery可以定位body元素。

方法

$("body").addClass("animated fadeOut");

练习

给body加一个animated hinge的class

代码


<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>

浏览器显示

image

来源：

https://www.freecodecamp.org/challenges/use-jquery-to-modify-the-entire-page

| Wiki Home | Code | Issue |Projects |FreeCodeCamp|CodePen |Head First HTML& CSS |Responsive Web Design Certification (300 hours)

⚠️ **GitHub.com Fallback** ⚠️