12周精進計劃(第三週)：JQuery（JavaScript框架）

Think ★ Explore ★ Know
影響我的大學下半場，決定我們未來二十年
授課分享：S.F俱樂部、SunnyFutureClub張森鵬

一、筆記概要

注意：$ 即 JQuery

1、匯入JQ檔案

2、語句
1.show —— 顯示
2.hide —— 隱藏
3.animate —— 指定大小,透明度

4.fadeIn —— 淡入
5.fadeOut —— 淡出
6.append (appendTo) —— 末端新增子元素
7.prepend (prependTo) —— 前端新增子元素
8.after —— 新增相鄰兄弟
9.css（） —— 修改樣式
10.prop（） —— 修改屬性
11.empty —— 清空
12.each —— 遍歷
i ：索引 ，n ：值

3、選擇器

4、屬性選擇器
1.選擇器格式【屬性】
2.選擇器格式【屬性1】【屬性2】
3.選擇器格式【屬性】【屬性2 = ’ 有值的 '】

5、過濾器

注意：
用過濾器時與上一個元素不要有空格，否者會出錯，本人用是HBuilderX，不知道其他軟體會不會有這種情況。

first —— 首個
last —— 最後一個
even —— 過濾偶數
odd —— 過濾奇數
gt（索引） —— 大於索引
​lt (索引) —— 小於索引
eq (索引) —— 等於索引

6、JQ的開發步驟: (將我們頁面的JS程式碼和HTML頁面程式碼進行分離)

1. 匯入JQ相關的檔案
2. 文件載入完成事件: $(function) : 頁面初始化的操作: 繫結事件, 啟動頁面, 定時器
3. 確定相關操作的事件
4. 事件觸發函式
5. 函式裡面再去操作相關的元素

二、實踐效果

1、雙擊交換



2、聯動