2. 程式人生 > 實用技巧 >jQuery基礎教程

jQuery基礎教程

阿新 • • 發佈：2020-11-18

jQuery是什麼？

jQuery是一個JavaScript常用的工具函式庫。jQuery是一個輕量級的"寫的少，做的多"的JavaScript庫。

jQuery當中包含有以下一些常用功能：

  • HTML 元素選取
  • HTML 元素操作
  • CSS 操作
  • HTML 事件函式
  • JavaScript 特效和動畫
  • HTML DOM 遍歷和修改
  • AJAX
  • Utilities

下面的內容當中，我們會逐一的介紹jQuery的常用內容。

學習jQuery的心態

  • 以練為主，多看多練
  • 以js為基礎，更好的理解jQuery
  • jQuery只是js的一個函式庫，不能忘記js

jQuery的版本問題

目前jQuery有三個大版本，1.xx 、 2.xx 和 3.xx ，三個版本當中，1版本相容性最高，可以有效的相容ie瀏覽器，
6，7，8，9都能得到一個很好的相容，2版本則最低只能相容到ie9，而3版本則徹底放棄了ie9以下的瀏覽器。但是卻新增加
了很多的使用的方法，並且程式碼的安全性也增加很多，例如可以很好的防止xss攻擊等。

jQuery的使用

首先，我們可以根據需要下載一個指定版本的jquery檔案，當然也可以選擇使用cdn檔案。

js 官方網址: http://jquery.com/

常用CDN: 
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>  百度CDN中的jQuery
    <script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"> </script> 右拍雲
    <script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script> 新浪

jQuery 中的核心語法

在jQuery當中，jQuery是一個核心方法，用來查詢元素從而方便對元素的操作，可以簡寫為$。

jQuery("#btn").click(function() {
        alert(123);
    });

// 上邊的程式碼也可以改為
$("#btn").click(function(){
    alert(123)
})

基礎語法

$(selector).action();
  • 美元符號定義 jQuery
  • 選擇符（selector）"查詢"和"查詢" HTML 元素
  • jQuery 的 action() 執行對元素的操作

文件就緒函式

在js當中，存在一個window.onlaod = function(){}

，函式當中的程式碼會在整個文件載入完畢之後執行，而在jq當中
也有類似的方法，如下:

$(document).ready(function(){
    // jq 程式碼
});

// 上述程式碼也可以簡寫為:
$(function(){
    // jq 程式碼
})

這是為了防止文件在完全載入（就緒）之前執行 jQuery 程式碼。

和window.onload的區別：
a: window.onload 必須等到頁面所有的元素都載入完成才能使用 ，而(function())則只是dom結構加載完成就會執行，例如頁面中存在許多的圖片，window.onload會等到頁面全部加載完成才能執行，圖片不加載完是不會執行的除非超過請求時間。而(function())則只是dom結構載入完成就會執行，例如頁面中存在許多的圖片，window.onload會等到頁面全部載入完成才能執行，圖片不載入完是不會執行的除非超過請求時間。而(function(){})在程式碼dom執行完成後就會執行，
而不會等待圖片載入完成。

b： window.onload 一個頁面只能有一個，而$(function(){})可以有多個，執行順序從上向下

jQuery 選擇器

在jq當中，我們可以通過選擇器任意的選取html元素，並且操作html元素。

jQuery 選擇器基於元素的 id、類、型別、屬性、屬性值等"查詢"（或選擇）HTML 元素。它基於已經存在的 CSS 選擇器，除此之外，它還有一些自定義的選擇器。

三個基礎選擇器如下:

$("p") 元素選擇器
$("#d1") id選擇器
$(".class") class選擇器

還有一個常用的css選擇器.css(),可以用來幫助我們更改css樣式。

$("#d1").css("background-color","red");

還有一些其他的選擇器:

$("*") 選取所有元素
$(this) 選取當前 HTML 元素
$("p.intro") 選取 class 為 intro 的 <p> 元素
$("p:first")    選取第一個 <p> 元素
$("ul li:first")    選取第一個 <ul> 元素的第一個 <li> 元素
$("ul li:first-child") 選取每個 <ul> 元素的第一個 <li> 元素
$("[href]") 選取帶有 href 屬性的元素
$("a[target='_blank']") 選取所有 target 屬性值等於 "_blank" 的 <a> 元素
$("a[target!='_blank']") 選取所有 target 屬性值不等於 "_blank" 的 <a> 元素
$(":button") 選取所有 type="button" 的 <input> 元素 和 <button> 元素
$("tr:even") 選取偶數位置的 <tr> 元素
$("tr:odd") 選取奇數位置的 <tr> 元素

常用選擇器可以訪問:https://www.w3cschool.cn/jquery/jquery-ref-selectors.html

jQuery事件

在jq當中，基本上所有的js事件都有一個對應的jq事件，下面是jq當中常用的事件。

滑鼠事件:

  • click
  • dblclick
  • mouseenter
  • mouseleave

鍵盤事件:

  • keypress
  • keydown
  • keyup

表單事件:

  • submit
  • change
  • focus
  • blur

文件/視窗事件:

  • load
  • resize
  • scroll
  • unload

鍵盤事件的差異:

  • keydown：在鍵盤上按下某鍵時發生，一直按著則會不斷觸發（opera瀏覽器除外），它返回的是鍵盤程式碼;
  • keypress：在鍵盤上按下一個按鍵，併產生一個字元時發生, 返回ASCII碼。注意: shift、alt、ctrl等鍵按下並不會產生字元，所以監聽無效，換句話說，只有按下能在螢幕上輸出字元的按鍵時keypress事件才會觸發。若一直按著某按鍵則會不斷觸發。
  • keyup：使用者鬆開某一個按鍵時觸發，與keydown相對，返回鍵盤程式碼.

全部事件方法可以訪問：https://www.w3cschool.cn/jquery/jquery-ref-events.html

jQuery 效果

顯示和隱藏

在 jQuery 中可以使用 hide() 和 show() 方法來隱藏和顯示 HTML 元素，以及使用 toggle() 方法能夠切換 hide() 和 show() 方法。

在hide()和show()方法中，我們可以讓元素隱藏和顯示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #d1 {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <button id="btn1">隱藏</button>
    <button id="btn2">顯示</button>
    <div id="d1"></div>
</body>
<script src="dist/jquery-3.0.0.js"></script>
<script>
    $(()=>{
        $("#btn1").click(()=>{
            $("#d1").hide();
        }),
        $("#btn2").click(()=>{
            $("#d1").show();
        })
    })
</script>
</html>

我們也可以給顯示和隱藏加上時間，例如:

$(()=>{
        $("#btn1").click(()=>{
            $("#d1").hide(2000);
        }),
        $("#btn2").click(()=>{
            $("#d1").show(2000);
        })
    })

除了時間，我們還可以加上回調函式，例如:

$(()=>{
        $("#btn1").click(()=>{
            $("#d1").hide(2000,()=>{
                alert("隱藏完畢!");
            });
        }),
        $("#btn2").click(()=>{
            $("#d1").show(2000,()=>{
                alert("顯示完畢!");
            });
        })
    })

除了上述的兩個方法，還存在一個toggle()方法，可以對顯示和隱藏效果進行取反。

$("#btn3").click(()=>{
            $("#d1").toggle(1000,()=>{
                alert("取反操作執行完畢!");
            })
        });

淡入淡出

jq當中，提供了四個方法實現淡入淡出，如下:

  • fadeIn() 淡入隱藏元素
  • fadeOut() 淡出可見元素
  • fadeToggle() 淡入淡出效果切換
  • fadeTo() 漸變到給定透明度 引數: speed,opacity(0-1),callback

例如:

$(()=>{
        $("#btn1").click(()=>{
            $("#d1").fadeIn(300, function() {
                // "slow"、"fast" 或毫秒。
                alert("淡入完畢")
            });
            
        })
        

        $("#btn2").click(()=>{
            $("#d1").fadeOut(300, function() {
                // "slow"、"fast" 或毫秒。
                alert('淡出完畢')
            });
            
        })
        $("#btn3").click(()=>{
            $("#d1").fadeToggle(300, function() {
                // "slow"、"fast" 或毫秒。
                alert('取反完畢')
            });
            
        })
        $("#btn4").click(()=>{
            $("#d1").fadeTo(300,.4, function() {
                // "slow"、"fast" 或毫秒。
                alert('變化完畢')
            });
            
        })

    });

滑動效果

jQuery 滑動方法可使元素上下滑動。

  • slideDown()
  • slideUp()
  • slideToggle()
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin:0;
            padding:0;
        }
        .main {
            width: 400px;
            border:2px solid lightblue;
            /*overflow: hidden;*/
            /*height: 50px;*/
        }
        h1 {
            font-size:25px;
            width: 100%;
            height: 50px;
            background-color: lightblue;
            line-height: 50px;
            text-align: center;
            color: white;
        }
        .info {
            height: 200px;
            background-color: lightblue;
            display: none;
        }
    </style>
</head>
<body>
    <div class="main">
        <h1 id="h1">hello,world</h1>
        <div class="info">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, ipsa doloribus earum quasi qui dolorum maiores pariatur, quibusdam quidem, consequuntur a soluta deserunt fugit placeat nulla modi, maxime neque tempora.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur soluta qui cum aliquid, perferendis tempore voluptas sapiente nostrum, aperiam voluptatem, eos repellendus iure dicta delectus voluptatibus architecto sed vitae maxime.
        </div>
        
    </div>
</body>
<script src="dist/jquery-3.0.0.js"></script>
<script>
    $(()=>{

        // $("h1").click(()=>{
        //  $(".info").slideDown(300, function() {
        //      alert("完畢");
        //  });
        // });

        // $("h1").click(()=>{
        //  $(".info").slideUp(300, function() {
        //      alert("完畢");
        //  });
        // });
        $("h1").click(()=>{
            $(".info").slideToggle(300, function() {
                alert("完畢");
            });
        });
    });
</script>
</html>

動畫

jq當中可以通過animate()來實現動畫效果，語法如下:

 $(selector).animate({params},speed,callback);

例如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #d1{
            width: 80px;
            height: 50px;
            font-size: 12px;
            border:2px solid lightblue;
        }
    </style>
</head>
<body>
    <div id="d1">
        hello,world
    </div>
</body>
<script src="dist/jquery-3.0.0.js"></script>
<script>
    $(()=>{
        $("#d1").click(()=>{
            $("#d1").animate({
                width:"200px",
                height:"150px"
            },1000,()=>{
                alert("變化完成")
            })
        });
    });
</script>
</html>

也可以再上一次的基礎上繼續執行動畫:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #d1{
            width: 80px;
            height: 50px;
            font-size: 12px;
            border:2px solid lightblue;
        }
    </style>
</head>
<body>
    <div id="d1">
        hello,world
    </div>
</body>
<script src="dist/jquery-3.0.0.js"></script>
<script>
    $(()=>{
        $("#d1").click(()=>{
            let a = $("#d1").animate({
                width:"200px",
                height:"150px"
            },1000,()=>{
                alert("變化完成")
            }).animate({
                fontSize:"30px"
            },1000)
        });

    });
</script>
</html>

animate()幾乎支援所有的css屬性，其中設定屬性以小駝峰的寫法，同時這個方法不支援顏色屬性，如果想要支援
顏色屬性，需要下載顏色外掛:https://plugins.jquery.com/color/

在設定值的時候也可以使用相對值:

$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
});

停止動畫

我們可以通過stop()方法停止動畫。

語法如下:

 $(selector).stop(stopAll,goToEnd);

jQuery stop() 方法用於停止動畫或效果，在它們完成之前。

stop() 方法適用於所有 jQuery 效果函式，包括滑動、淡入淡出和自定義動畫。

可選的 stopAll 引數規定是否應該清除動畫佇列。預設是 false，即僅停止活動的動畫，允許任何排入佇列的動畫向後執行。

可選的 goToEnd 引數規定是否立即完成當前動畫。預設是 false。

因此，預設地，stop() 會清除在被選元素上指定的當前動畫。

例如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin:0;
            padding:0;
        }
        .main {
            width: 400px;
            border:2px solid lightblue;
        }
        h1 {
            font-size:25px;
            width: 100%;
            height: 50px;
            background-color: lightblue;
            line-height: 50px;
            text-align: center;
            color: white;
        }
        .info {
            height: 200px;
            background-color: lightblue;
            overflow: hidden;
            display: none;
        }
    </style>
</head>
<body>
    <button id="btn1">停止動畫</button>
    <div class="main">
        <h1 id="h1">hello,world</h1>
        <div class="info">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, ipsa doloribus earum quasi qui dolorum maiores pariatur, quibusdam quidem, consequuntur a soluta deserunt fugit placeat nulla modi, maxime neque tempora.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur soluta qui cum aliquid, perferendis tempore voluptas sapiente nostrum, aperiam voluptatem, eos repellendus iure dicta delectus voluptatibus architecto sed vitae maxime.
        </div>
        
    </div>
</body>
<script src="dist/jquery-3.0.0.js"></script>
<script>
    $(()=>{

        $("h1").click(()=>{
            $(".info").slideToggle(3000, function() {
                alert("完畢");
            });
        });

        $("#btn1").click(()=>{
            $(".info").stop();
        });
    });
</script>
</html>

獲取元素內容

可以通過下面的三個方法獲取元素的內容。

  • text() - 設定或返回所選元素的文字內容
  • html() - 設定或返回所選元素的內容（包括 HTML 標記）
  • val() - 設定或返回表單欄位的值
  • attr() - 用於獲取屬性值。
$("button").click(function(){
  alert($("#w3s").attr("href"));
});

設定屬性值

上面說的三個方法同樣可以用於設定屬性值:

  • text() - 設定或返回所選元素的文字內容
  • html() - 設定或返回所選元素的內容（包括 HTML 標記）
  • val() - 設定或返回表單欄位的值
$("#btn1").click(function(){ 
  $("#test1").text("Hello world!"); 
}); 
$("#btn2").click(function(){ 
  $("#test2").html("<b>Hello world!</b>"); 
}); 
$("#btn3").click(function(){ 
  $("#test3").val("Dolly Duck"); 
});

attr()方法同樣可以設定屬性值，並且也可以同時設定多個屬性值。

$("button").click(function(){ 
  $("#w3s").attr("href","//www.baidu.com/"); 
});

$("button").click(function(){ 
  $("#w3s").attr({ 
    "href" : "//www.baidu.com", 
    "title" : "jQuery 教程" 
  }); 
});

新增元素

jq當中，可以通過下面的方法新增元素:

  • append() - 在被選元素內部的結尾插入指定內容
  • prepend() - 在被選元素內部的開頭插入指定內容
  • after() - 在被選元素之後插入內容
  • before() - 在被選元素之前插入內容
$("p").append("Some appended text.");

也可以通過上述四個方法新增多個元素：

function appendText() 
{ 
var txt1="<p>Text.</p>";               // 使用 HTML 標籤建立文字  
var txt2=$("<p></p>").text("Text.");   // 使用 jQuery 建立文字 
var txt3=document.createElement("p");   
txt3.innerHTML="文字。";               // 使用 DOM 建立文字 text with DOM 
$("p").append(txt1,txt2,txt3);         // 追加新元素 
}

刪除元素

jq當中刪除元素的方法如下：

  • remove() - 刪除被選元素（及其子元素）
  • empty() - 從被選元素中刪除子元素

刪除元素過濾

jQuery remove() 方法也可接受一個引數，允許您對被刪元素進行過濾。

該引數可以是任何 jQuery 選擇器的語法。

下面的例子刪除 class="italic" 的所有

元素：

$("p").remove(".italic");

CSS類的操作

jQuery 擁有若干進行 CSS 操作的方法。如下:

  • addClass() - 向被選元素新增一個或多個類
  • removeClass() - 從被選元素刪除一個或多個類
  • toggleClass() - 對被選元素進行新增/刪除類的切換操作
  • css() - 設定或返回樣式屬性
// 新增類
$("button").click(function(){
  $("h1,h2,p").addClass("blue");
  $("div").addClass("important");
});

// 新增多個類
$("button").click(function(){
  $("#div1").addClass("important blue");
});

通過css()方法，可以設定或者查詢元素的屬性樣式。

例如:

// 返回首個匹配元素的 background-color 值：
$("p").css("background-color");

//為所有匹配元素設定 background-color 值：
$("p").css("background-color","yellow");

//所有匹配元素設定 background-color 和 font-size：
$("p").css({"background-color":"yellow","font-size":"200%"});

類似的還有如下的幾個方法:

  • height() 設定或返回匹配元素的高度。
  • offset() 返回第一個匹配元素相對於文件的位置。
  • offsetParent() 返回最近的定位祖先元素。
  • position() 返回第一個匹配元素相對於父元素的位置。
  • scrollLeft() 設定或返回匹配元素相對滾動條左側的偏移。
  • scrollTop() 設定或返回匹配元素相對滾動條頂部的偏移。
  • width() 設定或返回匹配元素的寬度。

元素尺寸查詢

通過下列方法我們可以查詢元素的尺寸:

  • width()
  • height()
  • innerWidth()
  • innerHeight()
  • outerWidth()
  • outerHeight()

根據元素關係獲取元素

獲取祖先元素

下面的方法可以獲取祖先元素:

  • parent() 方法返回被選元素的直接父元素。
  • parents() 返回被選元素的所有祖先元素，它一路向上直到文件的根元素 ()
  • parentsUntil() 方法返回介於兩個給定元素之間的所有祖先元素。
$(document).ready(function(){
  $("span").parentsUntil("div");
});

獲取後代元素

下面的方法可以獲取後代元素

  • children() 方法返回被選元素的所有直接子元素。
  • find() 方法返回被選元素的後代元素，一路向下直到最後一個後代。

例如：

//  返回屬於 <div> 後代的所有 <span> 元素：
$(document).ready(function(){
  $("div").find("span");
});

// 返回 <div> 的所有後代
$(document).ready(function(){
  $("div").find("*");
});

獲取兄弟元素

下面的方法可以獲得兄弟元素 ：

  • siblings() 方法返回被選元素的所有同胞元素。
  • next() 方法返回被選元素的下一個同胞元素。
  • nextAll() 方法返回被選元素的所有跟隨的同胞元素。
  • nextUntil() 方法返回介於兩個給定引數之間的所有跟隨的同胞元素。
  • prev()
  • prevAll()
  • prevUntil()

過濾

所謂的過濾，就是查詢指定的元素，常用方法有以下的幾種:

  • first() 返回被選元素的首個元素
  • last() 返回被選元素的最後一個元素
  • eq() 返回被選元素中帶有指定索引號的元素
  • filter() 方法允許您規定一個標準。不匹配這個標準的元素會被從集合中刪除，匹配的元素會被返回。
  • not() 方法返回不匹配標準的所有元素

相關推薦

jQuery基礎教程

jQuery是什麼？ jQuery是一個JavaScript常用的工具函式庫。jQuery是一個輕量級的\"寫的少，做的多\"的JavaScript庫。

Ognl 語法基礎教程

本文將力求用最簡單的語言和例項，介紹一下 OGNL 的語法規則，文章主要內容參考自官方檔案commons.apache.org/proper/comm…

Hive 基礎教程

前言 Hive 由 Facebook 實現並開源，是基於 Hadoop 的一個資料倉儲工具，可以將結構化的資料對映為一張資料庫表，並提供 HQL(Hive SQL)查詢功能，底層資料是儲存在 HDFS 上。Hive的本質是將 SQL 語句轉換為 MapRe

零基礎教程！一文教你使用Rancher 2.3和Terraform執行Windows容器

本文來自Rancher Labs 介紹 在Kubernetes 1.14版本中已經GA了對Windows的支援。這一結果凝結了一群優秀的工程師的努力，他們來自微軟、Pivotal、VMware、紅帽以及現在已經關閉的Apprenda等幾家公司。我在Apprenda工作

安裝win10+黑蘋果雙系統零基礎教程(圖文)

一、準備工作 準備8g以上的U盤 安裝TransMac 下載地址：https://www.jb51.net/softs/596307.html

SQL基礎教程之行轉列Pivot函式

前言 未來的一個月時間中，會總結一系列SQL知識點，一次只總結一個知識點，儘量說明白，下面來說說SQL 中常用Pivot 函式（這裡是用的資料庫是SQLSERVER，與其他資料庫是類似的，大家放心看就好）

Python連線Mssql基礎教程之Python庫pymssql

前言 pymssql模組是用於sql server資料庫（一種資料庫通用介面標準）的連線。另外pyodbc不僅限於SQL server，還包括Oracle,MySQL,Access,Excel等。

全網最詳細的vscode基礎教程

本文主要介紹vscode在工作中常用的快捷鍵及外掛，目標在於提高工作效率 本文的快捷鍵是基於mac的，windows下的快捷鍵放在括號裡 Cmd+Shift+P(win Ctrl+Shift+P)

MySQL資料庫基礎教程(一)-簡介

1 歷史背景 1970 年 IBM 的 E.F. Codd 博士發表了論文《A Relational Model of Data for Large Shared Data Banks》

SQL筆記1：基礎教程

SQL語法 SQL 對大小寫不敏感。 SQL 語句後面的分號  某些資料庫系統要求在每條 SQL 命令的末端使用分號。在我們的教程中不使用分號 

Webpack基礎教程之名詞解釋

一、概念介紹 本質上，webpack 是一個現代JavaScript 應用程式的靜態模組打包器(module bundler)。當 webpack 處理應用程式時，它會遞迴地構建一個依賴關係圖(dependency graph)，其中包含應用程式需要的每個模組，然

Spring Boot 2.x基礎教程：使用JdbcTemplate訪問MySQL資料庫

在第2章節中，我們介紹瞭如何通過Spring Boot來實現HTTP介面，以及圍繞HTTP介面相關的單元測試、文件生成等實用技能。但是，這些內容還不足以幫助我們構建一個動態應用的服務端程式。不論我們是要做App、小程式、

C++ 基礎教程之虛擬函式例項程式碼詳解

虛擬函式的定義 虛擬函式：就是在基類的成員函式前加關鍵字virtual(即被virtual關鍵字修飾的成員函式)，並在一個或多個派生類中被重新定義的成員函式；虛擬函式：就是在編譯的時候不確定要呼叫哪個函式，而是動態決定

Zookeeper基礎教程（五）：C#實現Zookeeper分散式鎖

　　分散式鎖　 　　網際網路初期，我們系統一般都是單點部署，也就是在一臺伺服器完成系統的部署，後期隨著使用者量的增加，伺服器的壓力也越來越大，響應速度越來越慢，甚至出現伺服器崩潰的情況。

c#中值型別和引用型別的基礎教程

前言 值型別和引用型別，是c#比較基礎，也必須掌握的知識點，但是也不是那麼輕易就能掌握，今天跟著老胡一起來看看吧。

Spring Boot 2.x基礎教程：Spring Data JPA的多資料來源配置

上一篇我們介紹了在使用JdbcTemplate來做資料訪問時候的多資料來源配置實現。接下來我們繼續學習如何在使用Spring Data JPA的時候，完成多資料來源的配置和使用。

Spring Boot 2.x基礎教程：MyBatis的多資料來源配置

前兩天，我們已經介紹了關於JdbcTemplate的多資料來源配置以及Spring Data JPA的多資料來源配置，接下來具體說說使用MyBatis時候的多資料來源場景該如何配置。

asp.net core2 mvc 基礎教程-- model 模型驗證

例子 public class StudentCreateViewModel { [Display(Name = \"名\")] [Required][XssCode(ErrorMessage = \"請不要填寫特殊字元\")]//自定義驗證特性

asp.net core2 mvc 基礎教程--ASP.NET Core Identity 入門

ASP.NET Core Identity 身份認證和授權系統 成員管理 預設使用 MSSQL 支援外部的 Provider

html基礎教程2

HTML CSS HTML 編輯器 HTML 連結 通過使用 HTML4.0，所有的格式化程式碼均可移出 HTML 文件，然後移入一個獨立的樣式表。