[ 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()

 

 



相關文章

HTML5 Video & Fullscreen Video 如何製作全螢幕影片?...   今天要和大家介紹 Video HTML 標籤常用的屬性以及一些時常看到全螢幕影片(Fullscreen Video)當成背景的炫泡作法喔~   要匯入一個影片...
網頁滑動式手機菜單 (類似APP菜單)   今天要來和大家分享滑動式的手機菜單如何達成,要製作這個功能需要的是CSS和JS概念。 這個菜單類似手機APP的菜單顯示的方式,這樣子的菜單形式使用在網頁上是相當符合使用者經驗...
CSS selector 選擇器     今天要介紹的主題是CSS選擇器,很多時候我們會寫css但是對其選擇器代表的意思卻不是非常了解,我們可能知道  "." 代表 class 或是 "#" 代表 id ,但...
如何寫SCSS #1-1 上篇跟大家提到如何開始寫SCSS的時候有推薦一個工具,但是其實有更好的編譯方式,只要下載 VS code 的外掛就可以馬上編譯。 這款外掛就是:Live Sass Compiler 下載好VScod...