什麼是 jQuery ?

 


1. jquery的介紹

jQuery 是一套物件導向式簡潔輕量級的 JavaScript Library。透過 jQuery 你可以用最精簡少量的程式碼來輕鬆達到跨瀏覽器 DOM 操作、事件處理、設計頁面元素動態效果、AJAX 互動等。

簡單來說 jquery就是用javascript編寫出來的 , 而jquery的目的是為了簡化javascript。


2. 如何使用jquery

方法一

先下載 jQuery Library http://jquery.com/download/

接著將此 JS 檔放進你網頁 HTML 的 <head> 及 </head> 之間

<!DOCTYPE html>
<html>
<head>
	<!-- 引入jquery -->
	<script src="你的 jQuery 檔案路徑"></script>
</head>
<body>

</body>
</html>

方法二

透過 Google CDN 載入 jQuery

<!DOCTYPE html>
<html>
<head>
	<!-- 引入jquery -->
	<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>

</body>
</html>


3. jquery 與 javascript的差別

獲取ID

javascript

document.getElementById('idName')

jquery

$('#idName')

獲取Class

javascript

document.getElementsByClassName('classname')

jquery

$('.className')

說明 : 由上述兩個例子而見 , jquery是不是省去了很多語法呢 ?


4. jquery語法

取得選取到的元素之屬性值

.attr(attributeName)

例如，取得第一個連結的 title 值：

$('a').attr('title');

替選取到的元素設定屬性值

.attr(attributeName, value)

例如，替所有連結的 title 屬性設為 Enjoy jQuery：

$('a').attr('title', 'Enjoy jQuery');

你也可以用 key/value object 的方式來替所有匹配到的元素設定多個屬性值

.attr(attributes)

例如，同時改變 alt 和 title 屬性：

$( "#greatphoto" ).attr({
    alt: "Beijing Brush Seller",
    title: "photo by Kelly Clark"
});

移除元素屬性也很簡單

.removeAttr(attributeName)

例如，移除所有連結的 title 屬性：

$('a').removeAttr('title');
// 上面同等於這樣做
$('a').attr('title', null);

對於 class，jQuery 另外提供個別的函式來作 class 增刪的動作，這是為了可以方便疊加與移除特定的 class。

增加 class:

.addClass(className)

例如，幫所有的段落加入 selected 和 highlight 類別：

$('p').addClass('selected highlight');

移除 class：

.removeClass(className)

例如，移除 id 為 wrapper 的元素其 blue 這個類別：

$('#wrapper').removeClass('blue');

val，一個很常用到的方法，用來取得和設定表單元素的 value 值：

.val() // get
.val(value) // set

例如，取得表單元素的值：

// 取得下拉選單 (select box) 的值
$('select.foo').val();

// 取得 checkbox 欄位的選取值
$('input:checkbox:checked').val();

// 取得 radio 欄位的選取值
$('input:radio[name=bar]:checked').val();

例如，設定表單元素的值：

// HTML
<input type="text">
// 設定欄位值
$('input').val('Hello World!');
// 設定後的結果
<input type="text" value="Hello World!">

傳統 JavaScript 在處理 CSS 的問題上簡直頭大，設定一個 background-color 你得先知道其實要改用 elem.style.backgroundColor；對透明度 opacity 設定上你要了解舊 IE 是用 filter··。jQuery 的寫法很簡單，就直接用 key/value 成對的一組屬性來設定，我們只要知道 CSS 的表達式就沒問題。

取得第一個匹配到的元素之樣式：

.css(propertyName)

例如，取得第一個段落的字體顏色：

$("p").css("color", "red");

替所有匹配到元素設定一種樣式：

.css(propertyName, value)

例如，替所有段落的透明度設為半透明：

$('p').css('opacity', '0.5');
// 是的，設 opacity 就可以，jQuery 已經幫你處理好跨瀏覽器問題

你也可以用 key/value 對的方式指定給所有匹配的元素多個樣式：

.css(properties)

例如，替所有段落的字體設為紅色，背景設為藍色：

$('p').css({
  'color': 'red',
  'background-color': 'blue'
});

還有很多很多的function可以上jquery查詢 , 或者遇到問題的時候在上網爬文~


5. jquery ajax 🔥超級重要🔥

首先我們先來了解什麼是 Ajax，AJAX 即「Asynchronous JavaScript and XML」 (非同步的JavaScript與XML技術)，指的是一套綜合了多項技術的瀏覽器端網頁開發技術。

傳統的 Web 應用允許用戶端填寫表單 (form)，當送出表單時就向網頁伺服器傳送一個請求，伺服器接收並處理傳來的表單，然後送回一個新的網頁，但這個做法浪費了許多頻寬，因為在前後兩個頁面中的大部分HTML碼往往是相同的，由於每次應用的溝通都需要向伺服器傳送請求，應用的回應時間依賴於伺服器的回應時間，這導致了使用者介面的回應比本機應用慢得多。

與此不同，AJAX 應用可以僅向伺服器傳送並取回必須的資料，並在用戶端採用 JavaScript 處理來自伺服器的回應，因為在伺服器和瀏覽器之間交換的資料大量減少，伺服器回應更快了，同時很多的處理工作可以在發出請求的用戶端機器上完成，因此 Web 伺服器的負荷也減少了。

現代的網站幾乎都採取前後端分離的方式 , 而ajax就像是一個橋梁 , 把前端的需求或要處理的資料傳送到後端做處理 , 處理完成後在回傳給前端處理完的資料 , 前端再把資料顯示出來

範例如下 :

html (index.php)

<form id="demo">
    暱稱：<input type="text" id="nickname">
    性別：
    <select id="gender">
        <option value="">請選擇</option>
        <option value="男">男</option>
        <option value="女">女</option>
        <option value="其他">其他</option>
    </select>
    <button type="button" id="submitExample">執行範例</button>
</form>
<div id="result"></div>

jQuery

// 等全部的DOM元素下載完後就會觸發,觸發時間較早 
// 補充 : window.onload是等整個網站都下載完成才會跑,如果有100張圖 , 要等100張圖下載完才會執行 , 適合用在廣告的載入
$(document).ready(function() {
    $("#submitExample").click(function() { //ID 為 submitExample 的按鈕被點擊時
        $.ajax({
            type: "POST", //傳送方式 , 常用的傳送方式有 post 和 get
            url: "service.php", //傳送目的地
            dataType: "json", //資料格式 , 傳送文字訊息都用json , 圖片的話用formdata
            data: { //傳送資料
                nickname: $("#nickname").val(), //表單欄位 ID nickname
                gender: $("#gender").val() //表單欄位 ID gender
            },
            success: function(data) {
                if (data.result == 'success') { //如果後端回傳 json 是成功的話
                    $("#demo")[0].reset(); //重設 ID 為 demo 的 form (表單)
                    $("#result").html('<font color="#007500">您的暱稱為「<font color="#0000ff">' + data.nickname + '</font>」，性別為「<font color="#0000ff">' + data.gender + '</font>」！</font>');
                } else { //否則讀取後端回傳 json 資料 errorMsg 顯示錯誤訊息
                    $("#demo")[0].reset(); //重設 ID 為 demo 的 form (表單)
                    $("#result").html('<font color="#ff0000">' + data.errorMsg + '</font>');
                }
            },
            error: function(jqXHR) {
                $("#demo")[0].reset(); //重設 ID 為 demo 的 form (表單)
                $("#result").html('<font color="#ff0000">發生錯誤：' + jqXHR.status + '</font>');
            }
        })
    })
});

php (service.php)

<?php

header('Content-Type: application/json; charset=UTF-8'); //設定資料類型為 json，編碼 utf-8

if ($_SERVER['REQUEST_METHOD'] == "POST") { //如果是 POST 請求
    $nickname = $_POST["nickname"]; //取得 nickname POST 值
    $gender = $_POST["gender"]; //取得 gender POST 值
    if ($nickname != null && $gender != null) { //如果 nickname 和 gender 都有填寫
        //回傳 執行結果 , nickname 和 gender json 資料
        echo json_encode(array(
            'result' => 'success',
            'nickname' => $nickname,
            'gender' => $gender
        ));
    } else {
        //回傳 errorMsg json 資料
        echo json_encode(array(
            'errorMsg' => '資料未輸入完全！'
        ));
    }
} else {
    //回傳 errorMsg json 資料
    echo json_encode(array(
        'errorMsg' => '請求無效，只允許 POST 方式訪問！'
    ));
}
?>


引用網址 : 

https://jquery.com/

https://www.fooish.com/jquery/attributes-and-css.html

https://blog.reh.tw/archives/662

留言

張貼留言

這個網誌中的熱門文章

網頁入門教材目錄

  0.網頁運作原理 網頁運作原理與專業名詞 1.程式編輯器sublime 3 介紹 sublime 3 使用介紹 2. PHP開發環境介紹  Xampp介紹 3. 認識HTML HTML介紹 4. 認識CSS CSS基礎篇 CSS基礎語法 5.認識 Javascript Javascript基礎 6. 認識 Jquery Jquery與ajax介紹 7. Bootstrap 4 基礎介紹 Bootstrap 4 介紹 Bootstrap 4 範例製作 8. 資料庫入門 MariaDB入門教學 9. PHP介紹 PHP基礎用法 - 1 PHP基礎用法 - 2 PHP物件導向 PHP與資料庫連線 10. Laravel框架入門 Laravel 基礎概念 Laravel下載安裝、MVC流程編寫、資料庫設定 Laravel 新增資料與顯示資料 Laravel 資料修改與刪除 Laravel 完整筆記本範例
閱讀完整內容

什麼是HTML?

圖片
  1. HTML 是什麼呢 ? html介紹 HTML 的英文原文是 HyperText Markup Language ，中文譯為「超文字標示語言」。為什麼要說「 超文字 」呢？如果你曾經用過 Windows 上的「記事本」打過字，你應該知道一般的純文字輸入是無法顯示不同的字型大小、不同的文字顏色、甚至插入與文字說明相關的圖片的。而 超文字則可包含這些不同的文字變化、加入圖片或影音多媒體、畫表格、甚至可做一些基本的排版功能 。而「標記語言」指的是 HTML 透過一些定義好的結構化標籤 (Tag) 語法，讓你把超文字放到你所想要的位置、或去指定它的呈現方式。因此，再簡單的說， HTML 就是可以讓你將您所想要呈現給別人看的資料，儘可能以較豐富的方式去呈現。 我可以用什麼工具編寫 HTML 網頁？ 很簡單，用 Windows 內建的「記事本」小軟體，就可以拿來練習編寫網頁了。但如果可以的話，真心推薦您使用以下其中一套「免費的進階版記事本」小軟體：  Notepad++  、  sublime ，因為它們可以幫您將 HTML 語法和您的網頁文章內容用不同的顏色做一些區隔，讓您更方便閱讀 HTML 內容，並且也可以及早讓您發現可能的編寫錯誤，讓您的學習之路更為順暢。 我要如何瀏覽及測試我的 HTML 網頁呢？ 當您使用前述的「記事本」工具編寫完內容後， 可以將檔案儲存成 test.html 這樣的檔名 ， test 即是您網頁的主檔名，而 .html 則為網頁的副檔名。假設您的檔案是儲存在「桌面」，您可用檔案總管或是任何可能的方式到桌面去找到 .html 的檔案，例如前述的 test.html 檔，然後用 滑鼠在 test.html 檔案上按左鍵快速點選兩下 ，則電腦即會自動以您系統預設的  網頁瀏覽器  開啟這個練習的網頁 2. HTML 基本語法 基本的HTML文件格式 < HTML > 　 < HEAD > 　　 < TITLE > 網頁主題 </ TITLE > 　　 < Meta > 　 </ HEAD > 　 < BODY > 　　網頁內容的主要呈現部分 　 </ BODY > </ H...
閱讀完整內容

網頁是怎麼運作的呢?

圖片
  短期來看，在撰寫網站程式碼時，這些理論並不是非懂不可，但在之後，了解這些背後原理，對你會很有幫助。 網頁know-how : 用戶端與伺服器端 用戶端 是網路用戶的典型上網設備（像是連到 Wi-Fi 的電腦、或是連到手機網路的手機），這些設備通常有能夠上網的軟體（通常是 Firefox 或 Chrome 之類的瀏覽器）。 伺服器端 是放著網頁、網站、或著 app 的電腦。當用戶端設備要訪問網頁時，網頁的副本會從伺服器下載到用戶端，以便顯示在用戶的瀏覽器。 IP位址 為Internet Protocol Address的縮寫，中文被稱為網際協議位址。 是一種在Internet上的給主機編址的方式。  IP位址可以說是網頁伺服器的門牌 讓系統可以透過這個號碼找到正確的網頁伺服器在哪裡。 DNS Domain Name System的縮寫，中文又稱領域名稱解析系統。 是網際網路的一項的服務，是個可將網址和IP位址相互對應的資料庫，能夠使人更方便的存取網際網路。( 不用記長長一串的數字啦！ ) 伺服器 伺服器作為硬體來說，通常是指那些具有較高計算能力，能夠提供給多個使用者使用的電腦。伺服器與PC機的不同點太多了，例如PC機在一個時刻通常只為一個使用者服務。伺服器與主機不同，主機是透過終端給使用者使用的，伺服器是透過網路給用戶端使用者使用的。 而近期 雲端伺服器 越來越盛行,常見的雲端服務有 AWS , GCP , AZURE 等.... , 雲端伺服器擁有非常多的服務, 可以節省開發時間 , 直接使用服務(但通常都不便宜...) 、擁有高擴展的硬體資源, 隨時調整你的硬體資源、安全性高等等.... , 想必之後會成為伺服器的主流 網頁伺服器 又叫做 Web Server 。 Apache是接洽的服務員負責將網頁畫面傳遞給瀏覽器，只要網頁中有需要資料的部分Apache就會向DB索取資料後一起交給瀏覽器。 DB(Data Base)就是存放資料的地方。 web server 的種類有： apache、nginx、iis apache 和nginx的差別在於nginx可能速度會比較快，用的資源少。 iis是微軟做的，如果是寫 asp.net  就可用這套iis但環境就是要在window server上。 瀏覽器輸入網址的流程 :...
閱讀完整內容