jquery basic

Beginning jquery

本節提供了jquery從零開始寫起的寫法。建議初學者應該將4.1節的過程反覆操作數遍，以便非常熟悉jquery語言的撰寫形式。

jQuery的教學內容

  1. jQuery的三個部件, e.g., media query

    1. 用jQuery取得頁面元素的特徵

    2. 用jQuery修改頁面元素

    3. （視需要）用Listener監聽頁面的變化

  2. 用if-else監測捲動是否超過指定位置，

  3. 將捲動換算為操作元素的數據，數學！數學！數學 e.g., status bar, move object, move div horizontally

  4. 用class來反覆運用jQuery的Code

  5. 用data attribute結合class來指定不同參數給不同物件

Videos

jquery01 structure: using media query as example

jquery02: syntax and callback function

jquery03: why document ready

import jquery

Can be added in<head> or the end of <body>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

Document ready

$為jquery的代號，近似於CSS Selector選擇的意思。例如jquery的開頭通常這樣寫，選擇整個document，並在documnet ready時做什麼事情（也就是網頁成功被瀏覽器Parse成DOM時）。

$(document).ready();

上一行jquery可以簡化成以下的寫法。

$();

Callback function

保證前面執行完後面才執行。

jQuery Callback Functions

jquery callback functions

JavaScript statements are executed line by line. But, since jQuery effect takes some time to finish the next line code may execute while the previous effect is still running. To prevent this from happening jQuery provides a callback function for each effect method.

A callback function is a function that is executed once the effect is complete. The callback function is passed as an argument to the effect methods and they typically appear as the last argument of the method. For example, the basic syntax of the jQuery slideToggle() effect method with a callback function can be given with

$(selector).slideToggle(duration, callback);

那要怎麼加入ready時要做什麼事？就直接在裡面塞一個function(){}，並且在大括號{}中寫下你要執行的動作。

$(function(){});

例如，我打算偵測螢幕捲動

$(function(){
    $(window).scroll();
});

而捲動時要做什麼事，也以function(){}的方式寫在.scroll()中。

$(function(){
  $(window).scroll(function(){
   //some code goes here
  });
});

First jquery example: Console log

// A $( document ).ready() block.
$(document ).ready(function() {
    console.log( "ready!" );
});
// Shorthand for $( document ).ready()
$(function() {
    console.log( "ready!" );
});

Why document ready

試考慮下面三種情形，哪一個會正確彈出Alert？

Case 1: javascript without document ready then html

<head>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script>
//        $(document).ready(function() {
            $("#button").click(function() {
                alert("Alert");
            });
//        });
    </script>
</head>

<body>
    <botton id = "button">Click Me</botton>
</body>

Case 2: javascript with document ready then html

<head>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script>
        $(document).ready(function() {
            $("#button").click(function() {
                alert("Alert");
            });
        });
    </script>
</head>

<body>
    <botton id = "button">Click Me</botton>
</body>

Case 3: html then javascript without document ready

<head>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
</head>

<body>
    <botton id = "button">Click Me</botton>
    <script>
//        $(document).ready(function() {
            $("#button").click(function() {
                alert("Alert");
            });
//        });
    </script>
</body>

A typical jquery structure: media query as an example

See CSS - Media Query

  1. Observation: 偵測頁面上的狀態或變更

  2. Modification: 根據偵測到的變更來改變自身或其他元素

  3. Listening: 用監聽器（Listener）來持續偵測頁面上的狀態變更，並指定要監測哪一種變更。

以下面這個來說，

$(window).on('resize', function() {
    var winw = $(window).width();
    console.log(winw);
    $("#winwidth").html(winw);
});

Suspended

Guide to understand jquery grammar

$(); // an empty query
$(window); // a window query, e.g., scrolling
$(document); // a document query
$("#winwidth"); // a query to select element with id "winwidth"
$("#winwidth").on(); // An on() function applied to the query object
$("#winwidth").on("resize"); // An on() function listening resizing action applied to the query object

// Add function(){} to hold actions to be done when resizing actions are detected
$("#winwidth").on("resize", function(){}); 

// Add function(){} to hold actions to be done when resizing actions are detected
$("#winwidth").on("resize", function(){
    // actions should be added here
}); 


// Adding actions
$("#winwidth").on("resize", function(){
    var winw = $(window).width();
    console.log(winw);
    $("#winwidth").html(winw);
});

Waypoints

jQuery/Zepto • Waypoints

PreviousComponent CheatsheetNextstick top

Last updated

Was this helpful?