> For the complete documentation index, see [llms.txt](https://ayugioh2003.gitbook.io/free-code-camp-practice/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ayugioh2003.gitbook.io/free-code-camp-practice/front-end-development-certification/jquery.md).

# jQuery

01 - Learn how Script Tags and Document Ready Work

* 先添加 document ready function
* 若沒有添加 `$(document).ready(function() { });`， js 會在 html 渲染前就先執行，這樣會產生 bug

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

02 - Target HTML Elements with Selectors Using jQuery

* $ dollar sign operator, bling
* 選擇器
* 添加跳動動畫
* 已經預載 jQuery.js, animated bounce.css

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

03-Target Elements by Class Using jQuery

* 替 div.well 添加 shake 特效

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

04-Target Elements by ID Using jQuery

* 替 div#target3 添加 fadeout 特效

```javascript
<script>
  $(document).ready(function() {
    $("button").addClass("animated bounce");
    $(".well").addClass("animated shake");
    $("#target3").addClass("animated fadeout")
  });
</script>
```

05-Delete your jQuery Functions

* 教學說 jQurey 的特效會讓人分心，要我先把三個語句都刪掉 XD

06-Target the same element with multiple jQuery Selectors

* 從前面知道了 type: `$("button")`, class:`$(".btn")`, id:`$("target3")` 三種選擇方式
* 讓一個元素能被 jQuery Selectors 選擇多次

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

07-Remove classes from an element with jQuery

* 移除某個元素 or 選擇器的 class
* 但我根本看不出效果啊 @@
* 有啦就是 button 從灰色變成白色

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

08-Change the CSS of an Element Using jQuery

* 用 jQuery 改變 css
* 有 quote，用 comma instead of colon

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

  });
</script>
```

09-Disable an Element Using jQuery

* 直接用 jQuery 修改除了 css 以外的元素的屬性&#x20;
* 例如，讓按鈕不可選

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

10-Change Text Inside an Element Using jQuery

* 覆蓋某個元素中的 html 內容
* 用 `.html()`

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

11-Remove an Element Using jQuery

* 移除某個元素
* `.remove()`

```javascript
<script>
  $(document).ready(function() {
    $("#target1").css("color", "red");
    $("#target1").prop("disabled", true);
    $("#target4").remove();
  });
</script>
```

12-Use appendTo to Move Elements with jQuery

* 把 div 中的某個元素，移動到另外一個 div 中
* `appendTo()`

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

13-Clone an Element Using jQuery

* 複製元素
* clone()
* function chaining，方法鏈，串起兩個方法

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

14-Target the Parent of an Element Using jQuery

* 每個元素都有父元素
* 可用 `parent()` 訪問父元素

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

15-Target the Children of an Element Using jQuery

* 訪問該元素底下的所有子元素
* `children()`

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

16-Target a Specific Child of an Element Using jQuery

* 沒有辦法選 id 的時候
* `target:nth-child(n)` 選擇目標元素的所有子元素
* [使用 CSS3 :nth-child(n) 選取器教學 | CSS 可樂](http://csscoke.com/2013/09/21/%E4%BD%BF%E7%94%A8css3-nth-childn-%E9%81%B8%E5%8F%96%E5%99%A8%E8%A9%B3%E8%A7%A3/)
* [使用 CSS nth-child 必須要注意的事情 « MUKI space\*](http://muki.tw/tech/css-nth-child-notice/)

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

17-Target Even Numbered Elements Using jQuery

* 選擇索引為奇數或是偶數的元素

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

18-Use jQuery to Modify the Entire Page

* 整個頁面 `$("body")`
* fadeout, hinge

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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ayugioh2003.gitbook.io/free-code-camp-practice/front-end-development-certification/jquery.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.