[ JQuery 教學 ] 如何使用 JQuery #1

標籤: , , , , , ,

 

廢話不多說直接來了解如何使用吧!

 

第一步:引用 JQuery

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>

JQ 有很多版本,大部分都可以通,我們就先引用最新版本的就好。也可以把檔案載下來引用,我這邊的示意是用網址的方式引用。
一定要確定引用式子在我們要寫的 JQ 程式之前,至於要不要放在 head 沒有絕對,代表你也可以放在 body 裡只是一定要注意位子和先後順序
要去哪裡找引用式?請打 JQuery CDN。

 

 

第二步:JQ必要的環境

JQ 一定得在寫在下方 document ready 裡面,算是一種宣告吧!跟執行的人說我這邊有一段 JQ 要讀唷的概念。

<script type="text/javascript">
  $(document).ready(function(){
      //要寫程式的地方  
 });
</script>

 

 

以上兩個步驟都準備好了之後,先來看一個例子吧!從這個例子了解使用方式選擇器的部分。

可以直接把這段貼去你的編輯器測試看看,或是在 Tryit Editor v3.5 – W3Schools 直接貼上看結果,會比較了解喔!

搜尋:Tryit Editor v3.5 – W3Schools ,它是一個線上編輯器可以馬上看到結果。

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script>
    $(document).ready(function () {
        //要寫程式的地方
        //這個功能是點擊含有 close class 的元素之後"隱藏/顯示"含有 service class 的元素
        $(".close").click(function () {
            $(".service").fadeToggle();
        });
    });
</script>
<style>
    /*樣式設定的部分就先跳過,有興趣或疑問可以留言討論*/
    .box {
        width: 100px;
        height: auto;
        position: relative;
        font-family: "微軟正黑體";
        margin: 50px;
        text-align: center;
    }

    .service {
        width: 100px;
        height: 100px;
        position: relative;
        background: lightblue;
        cursor: default;
    }

    .service p {
        line-height: 100px;
    }

    .close {
        position: absolute;
        top: -20px;
        right: -24px;
        color: lightblue;
        font-weight: bold;
        font-size: 20px;
        width: 20px;
        height: 20px;
        border: 1px solid;
        border-radius: 20px;
        line-height: 16px;
        cursor: pointer;
    }
</style>
<div class="box">
    <div class="close">
        <span> x </span>
    </div>
    <div class="service">
        <p> 聯絡客服 </p>
    </div>
</div>

 

可以看到 .close 和 .service 這兩個地方就是所謂的選擇器,概念其實就是 CSS selector ,主要的目的在於利用選擇器選取元素。

因為我們要告訴 JQ 是哪個東西要執行什麼事情,還有它的觸發點等等的。

不知道如何選取到該物件嗎?請參考此篇文章

這篇文章是教你如何使用選擇器了解選擇器可以選到什麼東西,要打好基礎才能繼續往下走阿!

 

如果知道如何選取到該物件了,知道如何使用選擇器了。那麼接下就是功能實作以及應用的部分了!

用舉例的方式可能比較容易了解JQ的使用方式。

 

本篇需要了解JQuery的使用方式

1.引用 ( JQ CDN ,可用網址也可以用檔案引入 )

2.寫在何處 ( script 的 document ready裡 )

3.如何選取 ( 選擇器 )

 

下一堂課~

#2 JQ 基本功能 淡入淡出與隱藏顯示

hide()
show()
fadeIn()
fadeout()
fadeToggle()

 

 



相關文章

滾動到此時執行動畫 Animate On Scroll   今天要介紹 AOS Animate On Scroll Library,他是一款蠻好手上的滾動式動畫的資料庫,對於有需求要自訂義動畫的人也相當方便。我覺得比較值得一提的是當滾輪滾回...
CSS和CSS3的差別?   怎麼說呢? CSS3和CSS本身不應該有區別,因為他們是同一個東西,CSS3是CSS的進化版,CSS3只是一個更新的版本還是有CSS為基底的,所以不可能說跳過CSS學CSS3...
變數的命名方式與注意事項 #2 不知道大家在使用SCSS的時候有沒有想過,變數要怎麼命名比較好?好不容易有一這麼方便的變數功能當然要充分的利用。 這邊跟大家介紹一下以小女子目前寫SCSS的經驗,提幾點需要注意的地方與怎麼命名比較好...
如何寫SCSS #1-1 上篇跟大家提到如何開始寫SCSS的時候有推薦一個工具,但是其實有更好的編譯方式,只要下載 VS code 的外掛就可以馬上編譯。 這款外掛就是:Live Sass Compiler 下載好VScod...