使用 jQuery 教學 語法 概論

Introduction of jQuery : How to use jQuery without painness

作者: 七味粉 |
文章2019-04-21
73 分享
9
    jQuery 使用 無痛 教學 第一課
  • 簡介
    jQuery 是一個超級無敵強大的工具,有了他, javascript 變得十分簡單。相信很多人都會跟我一樣,在剛學習的時候有一個問題:
    Q: 要先學會javascript 還是 jQuery ?
    A: 簡單一點來說,以C++ 做為舉例
    javascript 就等於是 C++,而 jQuery 就等於是 別人幫你寫好的Class,因此你還是要先懂一些C++的語法,有哪些語法呢?
    我覺得只要知道怎麼宣告變數、跟用迴圈就夠了。因為,其他javascript 辦得到得事情,jQuery 辦得更快。


  • 基本的jQuery 架構

  • 
    
    $(document).ready(function() {
    // Handler for .ready() called.
    });

    基本上任何的javascript 都寫在 document .ready 裡面就對了。
    這個code 的意思就是:在我的網頁(DOM) load 完成之後,我要做些甚麼事情!
    在jQuery 中, "$" 這個符號代表的就是jQuery。
    因此你也可以寫成
    
    
    jQuery(document).ready(function(){
    // Handler for .ready() called.
    });

  • 常用的語法

  • 通常我們最常用的就是按下按鈕時,我們希望叫javascript 幫我們做事情。
    因此其實jQuery 的概念就是:
    
    
    1.利用選擇器選取要操作的DOM
    2.修改他

    我舉個例子:
    <button id="click" class="me" type="button">Click Me!>/button>
    
    
    <input type="text" class="mouse" name="LastName" value="Mouse">

    上面是兩個基本的DOM,buttom 擁有id 與 class,而input 擁有 class 與 name。
    所以我們首先第一步要先選擇DOM,在選擇器方面通常我們會選的依據有兩種,id以及class。
    所以name在這邊沒屁用,假設我要選擇buttom這個東西的時候,我可以這樣寫
    第一步驟:選擇DOM
    $("#click") 或者是 $(".me")
    記住一定要有單引號或雙引號,不然你可能會很納悶程式怎麼都跑不出來
    我就在這邊吃了很多悶虧
    第二步驟:做事情
    通常我們會把事情寫在function 裡面,假設是click事件
    
    
    $(".me").click(function() {
    //要做的事情
    $(".mouse").attr("value", "hello");
    });

    如此一來我在點擊button 時就會將input 的值從mouse 改成 hello
    很簡單吧!設定 input 的屬性竟然只需要一行就完成!
    大致上這就是jQuery 基礎會用到的東西。
貼心小提醒
1.您目前未登入,若於此狀態進行文章收藏,紀錄可能無法長期保留。
2.建議登入後進行收藏,好文會幫你保存著,隨時要看也不怕找不到唷~

KiKiNote持續為您提供最優質的資訊內容,謝謝您!
不再顯示此視窗

複製成功