CSS：親代選取器

發表於 2020-01-22 更新於 2020-09-28 分類於 css

親代選取器

『+』選取器

親代選取器會選取你指定的屬性後面那個，

例如： h1 + a

那就會選取到 h1 後面的 a ，

實用技巧如下

html

<ul>
	<li>選單一</li>
	<li>選單二</li>
	<li>選單三</li>
	<li>選單四</li>	
</ul>

閱讀全文 »

jQuery：操控網頁元素

發表於 2020-01-22 更新於 2020-09-28 分類於 jQuery

this 操控自身元素

this可以選取自己點選、選取的元素

  $('.menu li').click(function(event) {
    /* Act on the event */
    $(this).addClass('active');
  });
});

假設 menu li 裡面有很多個 li，上方程式碼的意思是你點選了 .menu li 的話，
你點選的那個li就會增加active這個class。

閱讀全文 »

jQuery：on與click的差別

發表於 2020-01-21 更新於 2020-09-28 分類於 jQuery

on與click的差別

在jQuery當中，時常會使用到 on、click 這兩種方式來操控你要的DOM，那兩者差別在哪？

閱讀全文 »

CSS：overflow 搭配 CSS 做出滑動效果

發表於 2020-01-20 更新於 2020-09-28 分類於 css

overflow搭配CSS做出滑動效果

codePen 範例參考

HTML環境設置：

1
2
3

<div class="box">
  <h1 class="title">商品標題</h1>
</div>

這個效果是讓滑鼠hover到box的時候，讓title滑動出來的 transition 特效。

閱讀全文 »

jQuery：利用 toggleClass 搭配 CSS 做出動畫效果

發表於 2020-01-18 更新於 2020-09-28 分類於 jQuery

利用toggleClass搭配CSS做效果優化網站效能！

jQuery雖然本來就可以直接用fadeToggle、slideToggle等.. 做效果，但是這樣的形式沒辦法讓網頁效能保持得很好，這時候就可以試試看用jQuery的toggleClass搭配CSS做一些效果吧！

toggleClass 開關效果

codePen 範例參考

toggleClass是可以在class裡面增加、刪除一個class，如果裡面有這個class就會刪除，反之增加。

閱讀全文 »

Git 筆記

發表於 2020-01-17 更新於 2020-10-11 分類於 git

git 筆記

Github 是前端工程師在業界當中不可或缺的版本控制工具，所以必須熟練熟練再熟練！！！

基本指令

git init - 建立一個本地的數據庫。
git add . - 將所有修改過或是沒有 commit 過的檔案加入索引。
git status - 檢查本地數據庫的檔案狀態。
git commit -m 備註 - 把索引內檔案提交到本地數據庫。
git log - 查詢目前分支所有 commit 的紀錄。
git reset –hard - 還原工作目錄與索引，會跟最後一次 commit 保持一樣。
git reset HEAD - 全部檔案取消索引。
git blame - 檢視檔案每一行是誰編輯的紀錄。

branch 分支

branch 是在開發上非常重要的一個環節，開發新功能之類的都必須在 branch 上面開發並修復 bug，結束後才會去合併到主分支。

git branch - 查詢現在這個 repository 有哪些分支。
git branch 分支名稱 - 新增一個分支。 Ex: git branch develop1 ( 新增一個 develop1 的分支 )
git checkout 分支名稱 - 讓現在的位置轉移到你所輸入的分支名稱的分支上。 Ex: git checkout develop1 ( 把現在的位置轉移到 develop1 的分支上 )
git checkout 標籤名稱 - 讓現在的 commit 回到你所輸入的標籤上。 Ex: git checkout v1 ( 把現在的 commit 位置轉移到 v1 的標籤上 )

merge 合併

當分支開發好了之後，就會跟在支線與支線之間進行合併，這時候就會利用到 merge。

git merge 分支名稱 - 合併分支。 Ex: git merge develop1 ( 將當前所在的分支與 develop1 進行合併 )

tag 標籤

如果在這個 commit 的位置上有什麼特別想要標記的，例如說這個 commit 是網站的第二版，那就很適合用 git tag 來標記起來，未來如果需要在回來看看之前第二版的網站的話就很方便囉！

git tag - 查詢現在這個 repository 有哪些標籤。
git tag -n - 使用 git tag 的話只會看到簡易的標籤名稱，如果想要看到備註內容的話可以輸入這個指令，簡易標籤會預設輸入 commit 的名稱。
git tag 標籤名稱 - 新增一個簡易標籤。 Ex: git tag v2 ( 新增一個 v2 簡易標籤 )
git tag -am ‘標籤內容’ 標籤名稱 - 新增一個有標記的標籤。 Ex: git tag -am ‘only test’ test ( 新增一個標籤內容 ‘only test’；名為 test 的標籤 )
git tag -d 標籤名稱 - 刪除標籤，可以指定一個標籤名稱進行刪除。 Ex: git tag -d v2 ( 刪除名為 v2 的標籤 )

stash 暫存

暫存在專案開發有著不可或缺的價值，那它主要的作用有：

當我們臨時要去處理其他分支時，可以將現在的資料站存起來。
可以利用暫存把資料轉移到其他分支上面。

那就讓我們來看看指令 ↓

git stash - 暫時儲存當前的目錄，會回到最新 commit 後初始的樣子。
git stash list - 瀏覽所有 stash(暫存) 的列表。
git stash pop - 還原暫存紀錄。 ( 還原後暫存紀錄也會自動移除 )
git stash drop - 清除最新的暫存紀錄。
git stash clear - 清除所有的暫存紀錄。

遠端數據庫

遠端數據庫的操作可以利用下面這些方法 ↓

git clone ‘git連結’ - 複製遠端的數據庫資料下來，也會自動追蹤這個遠端數據庫。
git remote - 查詢遠端的數據庫。
git remote rename 原名稱新名稱 - 更改遠端數據庫的名稱。 Ex: git remote rename origin main ( 把名為 ‘origin’ 的數據庫更名為 ‘main’ )
git remote add 主機名稱 git連結 - 能夠連結遠端數據庫，並且設定一個主機名稱給它。 Ex: git remote test https://github.com/hoongyuu/Git-practice.git ( 新增一個主機名稱為 test 連接到網址上的數據庫 )
git push 遠端主機名稱分支名稱 - 把資料傳送到遠端數據庫上。 Ex: git push origin develop1 ( 把分支 develop1 傳送到名為 origin 的遠端數據庫上 )

下載遠端數據庫

當我們在製作專案時，可能同事會先 push 檔案到遠端數據庫，那就應該要把遠端數據庫的資料下載下來進行更新。

git pull - 下載遠端數據庫的資料進行更新。
git fetch - 下載遠端資料庫的資料，資料會移到一個名為 FETCH_HEAD 的分支，可以先看過確保檔案沒有問題再進行合併。 pull 就是 fetch + merge 的組合技。

結語

這篇文章將會隨著自己的成長不斷的增加！未完待續 …

Git 常用指令

發表於 2020-01-17 分類於筆記

Git 常用指令

來源：六角

工作目錄：是處理你現在處理檔案下的目錄，而 GIT 的相關操作都會在你路徑的目錄下完成。

索引：處於工作目錄、本地數據庫的中間 ( 如上圖 )，是提交到數據庫前的暫存區。

數據庫：是紀錄檔案、目錄狀態的地方，也會儲存內容的修改、歷史紀錄。
而數據庫又有分為本地數據庫、遠端數據庫。

本地數據庫：自己方便使用，在個人電腦上配置的數據庫。
遠端數據庫：配置專門的伺服器，為了能讓多人共享而建立的數據庫。

設定識別資料

輸入自己的資訊，目的是確認是誰上傳該版本的資料庫，這樣也比較方便做維護。指令如下

1 2	git config --global user.email "使用者email" git config --global user.name "`使用者名字"

輸入完可以用 git config --list 確認，會出現結果如下。

有出現user.name 、email 代表有輸入進去了！ (紅色圈起來的)

基礎指令

移動路徑： cd (路徑)

例：

前往C槽的指令 cd c:
回上一層的指令 cd ..
如果說C槽有一個 test 資料夾，裡面有一個 next 資料夾，想要前往的指令： cd test/next
甚至說也能夠直接把資料夾拉近 git bush 裡面，他也會自動幫你產生路徑！

展開列表：ls

這個功能可以拿來檢查資料夾內的檔案，看看 ‘資料夾’、’檔案’ 是否新增成功。

新增檔案：touch

如果說你想要在當前資料夾新增一個 index.html ，指令： touch index.html。

新增資料夾：mkdir

如果說你想要在當前資料夾新增一個 css 資料夾，指令： mkdir css

git init：是用來追蹤當前路徑的目錄，同時也建立一個本地數據庫。

git add .：把所有檔案加入索引。

如果想要只新增在當前目錄下的檔案，指令如下
例如 index.html，可以輸入 git add index.html
或者是當前目錄下子資料夾裡的檔案 git add css/all.css 類似這樣。

git status：加入索引後用來檢查狀態的指令。

git commit -m ‘備註’：把索引裡面的東西提交到本地數據庫的指令。

git log：是查詢提交到本地數據庫的紀錄，用來檢查 commit 有沒有正確把指令傳送。

gitignore：在目錄下新增一個 .gitignore 的檔案，裡面輸入指令可以忽略檔案。

例如：index.html 可以忽略 index.html檔案，*.html 可以忽略所有 html 檔案，
css/ 可以忽略 css 資料夾裡所有檔案。

git reset –hard HEAD^：這個指令可以刪除最近一次的 commit。

git reset –hard ORIG_HEAD：如果 git reset –hard HEAD^ 刪除錯了，那這個語法可以還原它。

在這邊也可以用 git reset [commit 的 sha-1] 來還原！

git reset HEAD：把所有正在索引內的檔案取消索引。

git reset HEAD 檔案名稱：如果你指定的檔案在索引當中，指定的檔案取消索引。

例如：git reset HEAD index.html 假設 index.html 現在索引內，那他會取消索引。

git reset –hard：可以把路徑目錄還原成最新一次 commit 的狀態，切記要先把所有檔案加入索引
git add .，否則檔案依然會留存。

git clone 網址：把你的遠端數據庫連接到你的本地數據庫。

git push：把你的本地數據庫裡的資料傳送/更新到你連接的遠端數據庫。

git pull：從遠端數據庫拉其他工程師更新的資料。

branch 分支

HEAD 是一個指標，指向某一個分支，也可以把 HEAD 當作目前所在分支看待。

git branch：查詢目前有哪些分支。

git branch -a：當你在新的工作環境要 pull 專案開發時，可以使用這個查分支，
因為pull下來用 git branch 查不到。

git branch 分支名稱：建構分支的指令。

git checkout 前四碼：回到你想要觀看commit的版本，輸入版本編號前四碼，就可以回到那個版本觀看當時的CODE。

git checkout 分支名稱：可以回到你要看的分支。

git checkout 標籤名稱：可以回到你要看的標籤。

git checkout master：回到 master 分支。

git merge 分支名稱：可以把目前所在分支跟你輸入的分支合併。

tag 標籤

git tag：查詢目前有哪些標籤。

git tag 標籤名抽：這個指令可以新增一個標籤。例：git tag v1 ，等於新增一個 v1標籤。

git tag -am “備註” 標籤名稱：這個指令可以為標籤增加備註，可以用 git tag -n 來查，如果沒有標籤備註會顯示 commit 的備註。

git tag -n：可以查標籤的備註，或者是如果標籤沒有備註也會顯示 commit 的備註。

git tag -d：刪除指定的標籤。例如：git tag -d v1 就會刪除 v1 標籤。

git checkout 標籤名稱：可以回到你要看的標籤。

stash 暫存

git stash：暫存當前的目錄。

git stash list：瀏覽所有 stash 的列表。

git stash pop：還原暫存。

git stash apply：還原最新的暫存。

git stash apply stash@{n}：指定還原的暫存版本。

git stash drop：刪除最新的暫存。例：有 {0}{1}{2} 的 stash，那輸入指令會把 {2} 刪掉。

git stash clear：刪除所有暫存。

remote 遠端數據庫

git remote：查詢遠端數據庫。

git remote rename 原名稱新名稱：遠端數據庫預設名稱會是origin，這個指令可以修改遠端數據庫名稱。例：git remote origin newName 就會把原本 origin 的遠端數據庫改名為 newName

git push：把你的本地數據庫裡的資料傳送/更新到你連接的遠端數據庫。

git push 遠端數據庫名稱分支名稱：push 分支到遠端數據庫上。例：git push origin develop 就是把 develop push 到 origin 的遠端數據庫上。

git fetch：會移到一個名為 FETCH_HEAD 的分支，可以拿來合併。 pull 就是 fetch + merge 的組合技。

Markdown 常用指令

發表於 2020-01-16 更新於 2020-09-28 分類於 markdown

Markdown 學習筆記

標題

# = h1，## = h2，以此類推最多可以6個。

超連結

[超連結內容](網址)
例如： [Yahoo！](http://www.yahoo.com.tw) 會變成 Yahoo！

程式碼標記

單行的用 ` 包住，多行的用 ``` 包住。

粗體、刪除線

這是粗體 = **這是粗體**
~~這是刪除線~~ = ~~這是刪除線~~

閱讀全文 »