---
# System prepended metadata

title: jQuery API 文件查詢使用
tags: [OKR, 共同教學, jQuery]

---

# jQuery API 文件查詢使用
###### tags: `OKR` `共同教學` `jQuery`
##### 2020/05/19(Update:2020/06/13)

## 參考資源網站
[jQuery官網-jQuery API Documentation](https://api.jquery.com/)
[easing函數速查表](https://easings.net/cn#)
[w3school jQuery animate()](https://www.w3schools.com/jquery/eff_animate.asp)

## 分享說明
針對jQuery官網上的API文件，將專案上可能較常使用的基本函式挑選出來學習，理解函式如何使用，若有寫的不清楚的地方歡迎提供補充。


## 一、Attributes(Dom屬性)

### addClass() 增加樣式

[addClass()與removeClass()CodePen範例](https://codepen.io/yuci0213/pen/PoPRWNR)

**一、使用方式**
```html=
.addClass(className) 
為某個元素增加指定的樣式名稱
Type: String (字串)
Type: Array (陣列)

.addClass(function(index, currentClass))
傳遞一個用來設置樣式類名的函數，返回一個或更多用空格隔開的要增加的樣式名
Type: function() (函數)
```

**二、範例寫法**
1. 為元素增加指定的樣式名稱可以是一個或多個，用空格隔開
```javascript=
$('p').addClass('className');
$('p').addClass('className1 className2');
```
2. 在jQuery3.3開始支援多個樣式使用Array(陣列)寫法，陣列請用[]，多樣式中間以逗號區隔
```javascript=
$('p').addClass(['className1','className2']);
```
3. 也可以搭配removeClass()相互切換元素樣式
```javascript=
$('p').removeClass('className1').addClass('className2');
```
4. addClass()方法的參數可以接收function()函數
```javascript=
//這範例是說可以為每個<li>增加class
//index代表回傳數字，從0開始

$('ul li').addClass(function(index) {
  return "item-"+index; //回傳item-0,item-1,item-2...
});
```
```javascript=
//這範例是說要在當前有class="red"裡，在增加一個class="green"

$('div').addClass(function(index,currentClass)){
    var classAdd; //宣告一個要增加的class

    if(currentClass==="red"){
        addClass="green";
        $('p').text("change text")；//然後p裡面的文字則會變更
    }
    return classAdd;
}
```

### removeClass() 移除樣式

[addClass()與removeClass()CodePen範例](https://codepen.io/yuci0213/pen/PoPRWNR)

**一、使用方式**
```htmlmixed=
.removeClass(className) 
為某個元素增加指定的樣式名稱
Type: String(字串)
Type: Array(陣列)

.removeClass(function(index, currentClass))
傳遞一個用來設置樣式類名的函數，返回一個或更多用空格隔開的要增加的樣式名
Type: function()
```

**二、範例寫法**
1. 為元素增加指定的樣式名稱可以是一個或多個，用空格隔開
```javascript=
$('p').removeClass('className');
$('p').removeClass('className1 className2');
```
2. 也可以搭配removeClass()相互切換元素樣式
```javascript=
$('p').removeClass('className1').addClass('className2');
```

### toggleClass() 切換樣式

[toggleClass()CodePen範例](https://codepen.io/yuci0213/pen/ExVRYqJ)

toggleClass()＝addClass()與removeClass
以下範例為當點選p標籤時，會切換class="hightlight"增加/移除
```html=
<p class="blue">Click to toggle</p>
```
```javascript=

$('p').click(function(){
  //當下點選的p區塊會增加class="hightlight"
  $(this).toggleClass('hightlight');
})
```


### hasClass() 判斷有否樣式

[hasClass()CodePen範例](https://codepen.io/yuci0213/pen/XWmqvrX)

```html=
<div id="mydiv" class="foo bar"></div>
```
```javascript=
//會去看id="mydiv"裡面是否有class="foo"
$('#mydiv').hasClass('foo')； 
```
```javascript=
//假如有class="foo"，console會回傳true，若沒有回傳false

var mydiv = $('#mydiv').hasClass('foo');
console.log(mydiv);
```


### attr() 獲取元素屬性值

[attr()／remoceAttr()／prop()CodePen範例](https://codepen.io/yuci0213/pen/bGVMzXo)

**一、使用方式**
```html=
.attr(attributeName) 
$('em').attr('title');

.attr(attributeName, value)
$('em').attr('title','hello,my friend');
```

**二、範例寫法**
1. 取得元素中的屬性值
```html=
<em title="hello,my friend">large</em> 
<div></div>
```
```javascript=
var title = $('em').attr('title');
$('div').text(title);
```
```htmlmixed=
//印出結果
hello,my friend
```
2. 取得元素中並設定/更改屬性值
```html=
<em title="hello,my friend">large</em> 
<div></div>
```
```javascript=
$('em').attr('title','Goodybye,my friend');
```
3. 一次設置多個屬性值
```htmlmixed=
//印出結果
<em title="Goodybye,my friend">large</em>
```
```html=
<img src="https://picsum.photos/200/300">
```
```javascript=
$('img').attr({
    width:"300",
    height:"180"
});
```
```htmlmixed=
//印出結果
<img src="https://picsum.photos/200/300" width="300" height="180">
```
4. 使用function()一次修改多個元素屬性
```htmlmixed=
//印出結果
<div class="demo4">
  <img title="img1.gif">
  <img title="img2.gif">
  <img title="img3.gif">
</div>
```
```javascript=
$('.demo4 img').attr('src',function(){
    return "/images/" + this.title;
    //新增src屬性，並給予圖片路徑的名稱抓取為title內容
})
```
```htmlmixed=
//印出結果
<div class="demo4">
  <img title="img1.gif" src="/images/img1.gif">
  <img title="img2.gif" src="/images/img2.gif">
  <img title="img3.gif" src="/images/img3.gif">
</div>
```
5. 取得屬性狀態值
```html=
//取值的時候，假如input本身有設定html屬性checked，就要使用.attr()取得字串checked
<input class="check1" type="checkbox" checked>

//若沒有設定，則會取到undefined
<input class="check2" type="checkbox">

//使用.prop()取該屬性checked值，則會取得布林值(boolean)
<input class="check3" type="checkbox" checked="true"> 
<input class="check4" type="checkbox" checked="false"> 
```
```javascript=
$('.check-1').attr('checked') //checked
$('.check-2').attr('checked') //undefined
$('.check-3').prop('checked') //true
$('.check-4').prop('checked') //false
```

### removeAttr() 刪除元素屬性值
可與attr()搭配應用

[attr()／remoceAttr()／prop()CodePen範例](https://codepen.io/yuci0213/pen/bGVMzXo)

```html=
.removeAttr(attributeName) 
$('em').removeAttr('title');

.removeAttr(attributeName, value)
$('em').removeAttr('title','hello,my friend');
```

### prop()與removeProp() 獲取/移除元素屬性值狀態
- prop()可以抓取元素屬性值，可以是String、Number、Boolean
- radio.checked當點選/取消時的狀態使用prop()。
- [attr()／remoceAttr()／prop()CodePen範例](https://codepen.io/yuci0213/pen/bGVMzXo)

```javascript=
.prop(propertyName) 
$('input').prop('disabled',false);
$('input').prop('checked',true);
$('input').removeProp('checked');
```

### val() 取值
[val() CodePen範例](https://codepen.io/yuci0213/pen/oNjdKyd)

```htmlmixed=
<input type="text" value="some text">
<p></p>
```
```javascript=
var inputVal = $('input').val();
console.log(inputVal);
$('p').text("取出值為：" + inputVal);
```
```htmlmixed=
//列印結果
取出值為：some text
```

## 二、CSS(獲取／設置CSS相關屬性)
### .css() 更改CSS
以下為修改box1的css顏色
```htmlmixed=
<div id="box1">1</div>
```
```javascript=
$('.box1').css("color","red");
```
### height() 獲取本身高度

[height()/innerHeight()/outerHeight() Codepen範例](https://codepen.io/yuci0213/pen/ExVRyYJ)

![計算height()高度的範圍](https://i.imgur.com/7cNcm9T.png)

獲取元素的當前計算高度
計算視窗高度，不包含margin.padding.border
```htmlmixed=
.height()
```
```javascript=
$(window).height();  //視窗高度
$(document).height(); //整個網頁的高度
```

### innerHeight() 獲取內部高度

[height()/innerHeight()/outerHeight() Codepen範例](https://codepen.io/yuci0213/pen/ExVRyYJ)

![計算innerHeight()高度的範圍](https://i.imgur.com/jtMJ2WU.png)

獲取元素的當前計算高度
計算視窗高度，包含padding，但不包含border.margin

### ourterHeight() 獲取外部高度

[height()/innerHeight()/outerHeight() Codepen範例](https://codepen.io/yuci0213/pen/ExVRyYJ)

![計算outerHeight()高度的範圍](https://i.imgur.com/SIFbPfL.png)

獲取元素的當前計算高度
計算視窗高度，包含padding.margin.border

### width() 獲取本身寬度

[width()/innerWidth()/outerWidth() Codepen範例](https://codepen.io/yuci0213/pen/mdeKXWN)

![計算width()高度的範圍](https://i.imgur.com/eH8V3U1.png)

獲取元素的當前計算寬度
計算視窗高度，不包含margin.padding.border
```htmlmixed=
.width()
```
```javascript=
$(window).width();  //視窗寬度
$(document).width(); //整個網頁的寬度
```

### innerWidth() 獲取內部寬度

[width()/innerWidth()/outerWidth() Codepen範例](https://codepen.io/yuci0213/pen/ExVRyYJ)

![計算innerWidth()寬度的範圍](https://i.imgur.com/UwgjVe7.png)

獲取元素的當前計算寬度
計算視窗寬度，包含padding，但不包含border.margin

### outerWidth() 獲取外部寬度

[width()/innerWidth()/outerWidth() Codepen範例](https://codepen.io/yuci0213/pen/ExVRyYJ)

![計算outerWidth()寬度的範圍](https://i.imgur.com/I5UwSlg.png)

### [重點]說明Offset()與position()差異
```
在介紹offset()與position()之前先稍了解以下兩者的差別，
主要是差在「相對位置」的不同，參閱兩者範例就可以了解！

offset() - 只會以整個document、body或是說整著網站作為相對位置來抓取元素座標
Position() - 會以指定元素的層級開始往上尋找、找到第一個position為relative元素作為此元素的相對位置來抓取元素座標
```

### offset() 獲取坐標

[offset() Codepen範例](https://codepen.io/yuci0213/pen/YzyvemX)

獲取元素的當前計算寬度
計算視窗寬度，包含padding.margin.border

1. 獲取或設置匹配元素當前坐標
```htmlmixed=
<p>我要偵測p坐標</p>
```
```javascript=
$('p').offset();
```
2. 返回包含屬性top/left
下方以codepen來說明，計算出top與left之坐標
```javascript=
$('p').offset().left;
$('p').offset().top;
```
```htmlmixed=
以範例結果為
left: 8,
top: 125.875
```
3. 若要計算出bottom與right兩者的坐標，就要透過top+height/left+width來計算
```javascript=
//left+計算區塊的寬度加總(outerWidth)＝right坐標寬度
//計算結果 8+400=408
$(".offsetBlock").offset().left +$(".offsetBlock").outerWidth();

//top+計算區塊的寬度加總(outerHeight)＝bottom坐標寬度
//計算結果 125.875+66=191.875
$(".offsetBlock").offset().top + $(".offsetBlock").outerHeight();
```
```htmlmixed=
以範例結果為
right: 408,
bottom: 191.875
```

### position() 獲取坐標

[position() Codepen範例]()

返回包含屬性top/left
1. 獲取或設置匹配元素當前坐標
```htmlmixed=
<p>我要偵測p坐標</p>
```
```javascript=
$('p').position();
```
2. 返回包含屬性top/left
下方以codepen來說明，計算出top與left之坐標
```javascript=
$('p').position().left;
$('p').position().top;
```
```htmlmixed=
以範例結果為
left: 8,
top: 147.875
```
3. 若要計算出bottom與right兩者的坐標，就要透過top+height/left+width來計算
```javascript=
//left+計算區塊的寬度加總(outerWidth)＝right坐標寬度
//計算結果 8+400=408
$(".positionBlock").position().left +$(".positionBlock").outerWidth();

//top+計算區塊的寬度加總(outerHeight)＝bottom坐標寬度
//計算結果 125.875+66=191.875
$(".positionBlock").position().top + $(".positionBlock").outerHeight();
```
```htmlmixed=
以範例結果為
right: 418,
bottom: 547.875
```

### scrollLeft() 獲取元素滾動條當前水平X軸

[scrollLeft()與scrollTop() CodePen範例](https://codepen.io/yuci0213/pen/XWmYYme)

- 在捲動時取得滾動水平X值
- 滾動條如果位於最頂部或不可滾動時，數字為0

1. 使用chrome開發者工具監聽滾動數值
```javascript=
var scrollLeft = $(".demo").scrollLeft();
console.log(scrollLeft);
```
2. 可以直接給定滾動數值參數
```javascript=
$(".demo").scrollLeft(10);
```

### scrollTop() 獲取元素滾動條當前垂直Y軸

[scrollLeft()與scrollTop() CodePen範例](https://codepen.io/yuci0213/pen/XWmYYme)

- 在捲動時取得滾動垂直Y值
- 滾動條如果位於最頂部或不可滾動時，數字為0

1. 使用chrome開發者工具監聽滾動數值
```javascript=
var scrollTop = $(".demo").scrollTop();
console.log(scrollTop);
```
2. 可以直接給定滾動數值參數
```javascript=
$(".demo").scrollTop(10);
```

## 三、Effects(動畫效果)
### hide() 隠藏
```javascript=
.hide([duration] [, complete])
```
類似.css("display","none")效果
```javascript=
$('.box').hide();
$('.box').hide("slow");
$('.box').hide(1000);
```


### show() 顯示
```javascript=
.show([duration] [, complete])
```
類似.css("display","block")效果
```javascript=
$('.box').show();
$('.box').show("slow");
$('.box').show(1000);
```

### toggle() 切換顯示／隠藏
```javascript=
.toggle([duration] [,complete])
```
```javascript=
$('.box').toggle();
$('.box').toggle("slow");
$('.box').toggle(1000);
```

### animate() CSS自定義動畫

**範例**
[使用CSS樣式效果寫法](https://codepen.io/yuci0213/pen/bGVKjbR)
[將平滑滾動添加到頁面錨點](https://codepen.io/yuci0213/pen/WNQygKe)

- animate()主要是透過CSS樣式來產生動畫效果
- CSS樣式是使用DOM名稱(ex.fontSize)來設置，而非原來的CSS名稱(ex.font-size)
- 有關CSS樣式對應Dom屬性，可參考此份清單 [MDN CSS屬性清單](https://developer.mozilla.org/zh-TW/docs/Web/CSS/CSS_Properties_Reference)
- 因官方提供的動畫範例不多，w3school有一些樣式動畫範例可參考[w3school jQuery animate()](https://www.w3schools.com/jquery/eff_animate.asp)

```javascript=
.animate(properties [,duration] [,easing] [,complete])

animate()寫法
$(selector).animate({styles},duration,easing,callback)
//{styles}：放樣式
//duration：動畫持續速度，values可以填數值(ex.100,1000,5000)，以毫秒為單位，1000代表1秒、"slow"、"fast"
//easing：動畫效果，ex.swing(預設效果)/linear
```
```javascript=
$('.box').animate({
  minHeight:'200', 
  width:'300'
},1500,"linear")
```

### fadeIn() 淡入動畫

[fadeIn()／fadeOut()／fadeTo()／fadeToggle() Codepen範例](https://codepen.io/yuci0213/pen/RwWJqgo)

```javascript=
.fadeIn( [duration ] [, complete ] )
```
duration是指動畫持續時間，values可以填數值(ex.100,1000,5000)、"slow"、"fast"
```javascript=
$('.box1').fadeIn('slow');
$('.box1').fadeIn(800);
```

### fadeOut() 淡出動畫

[fadeIn()／fadeOut()／fadeTo()／fadeToggle() Codepen範例](https://codepen.io/yuci0213/pen/RwWJqgo)

```javascript=
.fadeOut([duration ] [,complete])
```
- duration是指動畫持續時間，values可以填數值(ex.100,1000,5000)、"slow"、"fast"

```javascript=
$('.box1').fadeOut('slow');
$('.box1').fadeOut(800);
```

### fadeTo() 設定淡入淡出動畫

[fadeIn()／fadeOut()／fadeTo()／fadeToggle() Codepen範例](https://codepen.io/yuci0213/pen/RwWJqgo)

```javascript=
.fadeTo(duration, opacity [,complete])
```

- duration是指動畫持續時間，values可以填數值(ex.100,1000,5000)、"slow"、"fast"
- opacity為透明度，數值為0~1之間的數字
```javascript=
$(".box2").fadeTo("fast", Math.random());
$('.box2').fadeTo('slow',0.33);
$('.box2').fadeTo(250,0.25);
```

### fadeToggle() 切換淡入淡出動畫
設定淡入淡出來切換顯示/隠藏效果

[fadeIn()／fadeOut()／fadeTo()／fadeToggle() Codepen範例](https://codepen.io/yuci0213/pen/RwWJqgo)

```javascript=
.fadeToggle([duration] [,easing] [,complete])
```
- duration是指動畫持續時間，values可以填數值(ex.100,1000,5000)、"slow"、"fast"
- easing使用那種動畫效果，ex.swing(預設效果)/linear，更多種動畫效果可參考這個網站[easing函數速查表](https://easings.net/cn#)
```javascript=
$('.box1').fadeToggle('slow');
$('.box1').fadeToggle(800);
```

### slideDown() 向下滑動效果

[slideDown()／slideUp()／slideToggle() Codepen範例](https://codepen.io/yuci0213/pen/WNQKogo)

```javascript=
.slideDown([duration] [, complete])
```
duration是指動畫持續時間，values可以填數值(ex.100,1000,5000)、"slow"、"fast"
```javascript=
$('.box1').slideDown('slow');
$('.box1').slideDown(800);
```
### sliderUp() 向上滑動效果
[slideDown()／slideUp()／slideToggle() Codepen範例](https://codepen.io/yuci0213/pen/WNQKogo)

```javascript=
.slideUp([duration] [, complete])
```
duration是指動畫持續時間，values可以填數值(ex.100,1000,5000)、"slow"、"fast"
```javascript=
$('.box1').slideUp('slow');
$('.box1').slideUp(800);
```
### sliderToggle() 滑動切換效果
[slideDown()／slideUp()／slideToggle() Codepen範例](https://codepen.io/yuci0213/pen/WNQKogo)

```javascript=
.slideToggle([duration] [, complete])
```
duration是指動畫持續時間，values可以填數值(ex.100,1000,5000)、"slow"、"fast"
```javascript=
$('.box1').slideToggle('slow');
$('.box1').slideToggle(800);
```

### delay()
設置時間以延遲隊列中後續項目的執行。
```javascript=
.delay(duration [,queueName])
```
```javascript=
$('#foo').slideUp(300).delay(800).fadeIn(400);
```
### finish()
停止當前正在運行的動畫，並刪除排隊的動畫，結束動畫，一切重來
```javascript=
$('.box').finish();
```
### stop()
停止當前正在運行的動畫，並結束動畫，但不會刪除排隊的動畫
```javascript=
$('.box').stop();
$('.box').stop().slideToggle(1000);
```

## 四、Forms 表單事件

### focus()與blur() 點擊/離開焦點時
[focus()與blur() Codepen範例](https://codepen.io/yuci0213/pen/ExVpZgr)

blur()與focus()可以搭配應用，通常用在input焦點判斷上，實際可查看codepen範例

```htmlmixed=
<input id="target" type="text" value="請輸入文字">
```
```javascript=
$("#target").on("focus", function () {
    //點選input文字消失事件
     console.log('進到焦點')
});
$("#target").on("blur", function () {
    //離開input時文字顯示事件
    console.log('離開焦點')
});
```

### change() 更改

[change() Codepen範例](https://codepen.io/yuci0213/pen/xxwJgMb)
```
- 此事件僅限於用在<input>／<textarea>／<select>元素
- 當input.textarea有輸入文字變更或是select選取狀態時
```
```htmlmixed=
<input id="target" type="text" value="請輸入文字">
```
```javascript=
$('.input-target').on("change",function(){
  console.log('文字輪入有變更')
})
$('input[type='text']').change(function() {
  //也可以直接使用input[type='text']相關html屬性
});
```

### submit() 提交

[form表單簡單驗證欄位沒寫範例](https://codepen.io/yuci0213/pen/vYNamLQ)


## 五、event 事件
### 文件預載
Dom完全加載時執行，一般常見寫法如下
```javascript=
$(document).ready(function(){
    //html頁面加載後執行
})
```
但依據jQuery文件手冊提到從jQuery3.0開始，僅建議使用以下語法，其他語法雖仍然有效，但已棄用
```javascript=
$(function () {
  //html頁面加載後執行
});
```

### resize() 偵測調整大小

[resize()偵測尺寸](https://codepen.io/yuci0213/pen/ZEbjJjb)
可以綁定當偵測瀏覽器寬度或高度時之事件


### scroll() 滾動事件
可以綁定當偵測瀏覽器滾動時之事件




## 六、Manipulation>DOM Insertion,Inside(元素內插入新內容)
### text() 抓取文字

[text()與html()CodePen範例](https://codepen.io/yuci0213/pen/PoPeeRv)

1. 會抓取匹配元素中的內文，也包括他們的後代，但不包含html
```htmlmixed=
//html
<p><b>Test</b> Paragraph.</p>
<p></p>
```
```javascript=
//找到第一個<p>的內文，也包含<b>裡面，結果為Test Paragraph.
var firstText = $('p').first().text(); 

//找到後，放入最後一個<p>裡面
$('p').last().text(firstText);
```
2. 注意與比較跟html()的不同，text()所獲取的是文字，這邊主要是理解觀念差別，一般並不會在text()裡面放入相關HTML標籤
```htmlmixed=
//html
<p>Test Paragraph.</p>
```
```javascript=
$('p').text('<b>Some</b> new text.');//更換<p>裡面文字
```
```htmlmixed=
//印出結果
'<b>Some</b> new text.' >>>>注意這是一段文字，是字符串而非為HTML
```

### html() 抓取文字

[text()與html()CodePen範例](https://codepen.io/yuci0213/pen/PoPeeRv)

1. html()是抓取元素的html內容
```htmlmixed=
//html
<div class="demo-container">
  <div class="demo-box">Demonstration Box</div>
</div>
```
```javascript=
$('.demo-container').html()
```
```htmlmixed=
//印出結果
<div class="demo-box">Demonstration Box</div>
```
2. 也可以抓取後重新設置元素的html內容
```htmlmixed=
//html
<div class="demo-container">
  <div class="demo-box">Demonstration Box</div>
</div>
```
```javascript=
$('.demo-container').html('<p>All new content. <em>You bet!</em></p>');
```
```htmlmixed=
//印出結果
<div class="demo-container">
  <p>All new content. <em>You bet!</em></p>
</div>
```

### append()附加內容至元素最後

[addend()CodePen範例](https://codepen.io/yuci0213/pen/oNjdyWR)

**一、使用方式**
```htmlmixed=
.append(content[,content]) 
.append(function)
```

**二、範例寫法**
1. 將指定的內容(htmlString,Element)插入到元素的最後
```htmlmixed=
//html
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
```
```javascript=
$('.inner').append('<p>Test</p>');
```
```htmlmixed=
//印出結果是讓你知道增加到那裡，實際結果可參考codepen
<div class="container">
  <div class="inner">
      Hello
      <p>Test</p>
  </div>
  <div class="inner">
      Goodbye
      <p>Test</p>
  </div>
</div>
```
2. 將指定的內容(Element)插入到元素的最後
```htmlmixed=
//html
<div class="container">
  <div class="inner">Hello:</div>
</div>
```
```javascript=
$('.inner').append(document.createTextNode('我是小明'));
```
```htmlmixed=
//印出結果
Hello:我是小明
```
3. 搬動選擇的元素，插入到目標容器之最後
```htmlmixed=
//html
<h2>Greetings</h2> //原本在這裡
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
```
```javascript=
$('.inner').append($('h2'));
```
```htmlmixed=
//印出結果
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
  <h2>Greetings</h2> //跑到這裡
</div>
```

### appendTo() 附加內容至元素最後

>append()與appendTo()方法最後執行的結果都是一樣
>主要差別是在語意表達與程式撰寫時是顛倒過來的
>例如：A.append(B)意思是將B放到A裡面的最後一個位置；A.appendTo(B)意思是將A放到B中的最後一個位置

1. 將指定的內容(htmlString,Element)插入到元素的最後
```htmlmixed=
//html
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
```
```javascript=
$('<p>Test</p>').appendTo('.inner'); //在這邊就可以看到與append()的差別
```
```htmlmixed=
//印出結果是讓你知道增加到那裡，實際結果可參考codepen
<div class="container">
  <div class="inner">
      Hello
      <p>Test</p>
  </div>
  <div class="inner">
      Goodbye
      <p>Test</p>
  </div>
</div>
```
2. 搬動選擇的元素，插入到目標容器之最後
```htmlmixed=
//html
<h2>Greetings</h2> //原本在這裡
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
```
```javascript=
$('h2').appendTo($('.container')); ////在這邊就可以看到與append()的差別
```
```htmlmixed=
//印出結果
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
  <h2>Greetings</h2> //跑到這裡
</div>
```

### prepend() 附加內容至元素最前

剛好與append()相反
[prepend()CodePen範例](https://codepen.io/yuci0213/pen/YzyLjKq)

**一、使用方式**
```htmlmixed=
.prepend(content[,content]) 
.prepend(function)
```

**二、範例寫法**
1. 將指定的內容(htmlString,Element)插入到元素的最後
```htmlmixed=
//html
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
```
```javascript=
$('.inner').prepend('<p>Test</p>');
```
```htmlmixed=
//印出結果是讓你知道增加到那裡，實際結果可參考codepen
<div class="container">
  <div class="inner">
      <p>Test</p>
      Hello
  </div>
  <div class="inner">
      <p>Test</p>
      Goodbye
  </div>
</div>
```
2. 將指定的內容(Element)插入到元素的最後
```htmlmixed=
//html
<div class="container">
  <div class="inner">大家好</div>
</div>
```
```javascript=
$('.inner').prepend(document.createTextNode('我是小明，'));
```
```htmlmixed=
//印出結果
我是小明，大家好
```
3. 搬動選擇的元素，插入到目標容器之最後
```htmlmixed=
//html
<h2>Greetings</h2> //原本在這裡
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
```
```javascript=
$('.inner').prepend($('h2'));
```
```htmlmixed=
//印出結果
<div class="container">
  <h2>Greetings</h2> //跑到這裡
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
```

### prependTo() 附加內容至元素最前

>prepend()與prependTo()方法最後執行的結果都是一樣
>主要差別是在語意表達與程式撰寫時是顛倒過來的
>例如：A.prepend(B)意思是將B放到A裡面的最前一個位置；A.prependTo(B)意思是將A放到B中的最前一個位置

1. 將指定的內容(htmlString,Element)插入到元素的最後
```htmlmixed=
//html
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
```
```javascript=
$('<p>Test</p>').prependTo('.inner'); //在這邊就可以看到與prepend()的差別
```
```htmlmixed=
//印出結果是讓你知道增加到那裡，實際結果可參考codepen
<div class="container">
  <div class="inner">
      <p>Test</p>
      Hello
  </div>
  <div class="inner">
      <p>Test</p>
      Goodbye
  </div>
</div>
```
2. 搬動選擇的元素，插入到目標容器之最後
```htmlmixed=
//html
<h2>Greetings</h2> //原本在這裡
<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
```
```javascript=
$('h2').prependTo($('.container')); //在這邊就可以看到與prepend()的差別
```
```htmlmixed=
//印出結果
<div class="container">
  <h2>Greetings</h2> //跑到這裡
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
```

## 七、Traversing
### even() 偶數

**一、使用方式**
```htmlmixed=
.even() 
jQuery3.5支援，不能傳任何參數
```
**二、範例寫法**
找到該集合中的偶數，偶數計算從0開始編號
```javascript=
//這個範例假如<li>有六個，就會將偶數列增加背景顏色

$('li').even().css('background-color','red');
```

### odd() 奇數
**一、使用方式**
```htmlmixed=
.odd() 
jQuery3.5支援，不能傳任何參數
```
**二、範例寫法**
找到該集合中的奇數，奇數計算從1開始編號
```javascript=
//這個範例假如<li>有六個，就會將奇數列增加背景顏色

$('li').odd().css('background-color','red');
```

### eq() 指定index
**一、使用方式**
```htmlmixed=
eq(index)
```
將匹配元素指定index的位置(由0開始)，如果是負數，則從集合中的最後一個元素開始倒回去計數。
```htmlmixed
<ul>
  <li>list item 1</li> //基準0
  <li>list item 2</li>
  <li>list item 3</li> //eq(2)
  <li>list item 4</li> //eq(-2)
  <li>list item 5</li>
</ul>
```
```javascript
//eq(2)＝＝＞結果為將item3背景設為紅色
$('li').eq(2).css('background-color', 'red');
```
```javascript
//eq(-2)＝＝＞結果為將item4背景設為紅色
//說明：假如item1基準為0，往負值順序為-1,-2，從最後一個元素位置開始計算，也就是item5為eq(-1),item4就為eq(-2)
$('li').eq(2).css('background-color', 'red');
```
### siblings()相鄰兄弟
**一、使用方式**
```htmlmixed=
siblings(selector)
```
代表搜尋匹配元素的同胞元素
```htmlmixed
//html結構
<ul>
   <li>list item 1</li>
   <li>list item 2</li>
   <li class="third-item">list item 3</li>
   <li>list item 4</li>
   <li>list item 5</li>
</ul>
```
```javascript
//請找到class為"third-item"，相鄰的li都會背景變成紅色
$('li.third-item').siblings().css('background-color', 'red');
```
再看一個例子
```htmlmixed
//html結構
<div><span>Hello</span></div>
<p class="selected">Hello Again</p>
<p>And Again</p>
```
```javascript
//這個例子是請找到P元素，然後相鄰兄弟是.selected的class，然後背景變成黃色
$("p").siblings(".selected").css("background", "yellow");
```