jQuery教程 - 從入門到使用

學習 jQuery 之前，務必掌握前端的HTML、CSS、JavaScript三大基礎
基礎、HTML、CSS常用操作

前程往事

HTML教程 - 從入門到使用

CSS教程 - 從入門到使用（此處不完善）

JavaScript教程 - 從入門到使用

jQuery教程 - 不同交互方的實踐

Sing：後來的我們 ~ 倒數 ~

基礎

jQuery 庫功能

jQuery 安裝

語法

選擇器

基於已存在的 CSS 選擇器進行封裝

jQuery 擴展的選擇器使用方式

實戰

事件

內容、屬性（attr）的獲取與設置

元素操作

基礎

jQuery ? What ?

jQuery是一個輕量級（壓縮包只有18KB左右）的"寫的少，做的多"的JavaScript函數庫

jQuery ? Why ?

JQuery不僅支持CSS裏的所有選擇器,還有JQuery獨有的選擇器.
JQuery封裝了大量常用的DOM操作
JQuery能夠在不同瀏覽器中兼容,同時還修復了一些瀏覽器之間的差異
即對發生在同一個JQuery對象上的一組動作,可以直接連寫而無需重複獲取對象,使得JQuery的代碼無比優雅.
當用JQuery找到帶有".class"類的全部元素,然後隱藏它們時,無需循環遍歷每個返回的元素

jQuery 庫功能

HTML 元素選取、操作（本文已有）
HTML 事件函數（本文已有）
CSS 操作本文已有
JavaScript 特效和動畫
HTML DOM 遍歷和修改
AJAX網絡請求
Utilities

jQuery 安裝

具體安裝可以百度查找，有比較詳細的全套流程 ~

下載地址

從jQuery官網下載較新的jQuery庫

版本

有兩個版本的 jQuery 可供下載

Production version - 用於實際的網站中，已被精簡和壓縮
Development version - 用於測試和開發（未壓縮，是可讀的代碼）

引用

<head>
<script src="jquery-1.10.2.min.js"></script>
</head>

語法

基礎語法

示例

 $(selector).action()
 
 大白文: $(選擇器).操作()

selector：一般爲選擇器
action()：一般爲用戶的操作目的

示例Demo

$(this).hide() - 隱藏當前元素

$("p").hide() - 隱藏所有 <p> 元素

$("p.test").hide() - 隱藏所有 class="test" 的 <p> 元素

$("#test").hide() - 隱藏所有 id="test" 的元素

基礎使用

$(document).ready(function(){
 
   // 開始寫 jQuery 代碼...
 
});

選擇器

基於已存在的 CSS 選擇器進行封裝

元素選擇器

語法： $(“p”) → p標籤元素

$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});

#id 選擇器

語法： $("#test") → #test中的test爲id

$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});

.class 選擇器

語法： $(".test") → .test爲style內聲明的樣式

$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});

jQuery 擴展的選擇器使用方式

實戰

事件

頁面對不同訪問者的響應叫做事件

事件種類

點擊元素
在元素上移動鼠標
選取單選按鈕

常見事件方法

click() - 點擊

  $("p").click(function(){
    $(this).hide();
  });

dblclick() - 雙擊

  $("p").dblclick(function(){
    $(this).hide();
  });

mouseenter() - 鼠標指針移動到元素上時，觸發該事件

  $("#p1").mouseenter(function(){
    alert('您的鼠標移到了該元素上!');
  });

mouseleave() - 鼠標指針離開元素時，觸發該事件

  $("#p1").mouseleave(function(){
    alert("再見，您的鼠標離開了該段落。");
  });

hover() - mouseenter()、mouseleave()倆者的組合版；內部包含用戶觸摸開始、觸摸完畢的狀態監聽

  $("#p1").hover(
    function(){
        alert("你進入了 #p1!");
    },
    function(){
        alert("拜拜! 現在你離開了 #p1!");
    }
  );

mousedown() - 鼠標按下的狀態監聽

  $("#p1").mousedown(function(){
    alert("鼠標在該段落上按下！");
  });

mouseup() - 鼠標擡起的狀態監聽

  $("#p1").mouseup(function(){
    alert("鼠標在段落上鬆開。");
  });

focus() - 獲取焦點的狀態監聽，一般用於input標籤

  $("input").focus(function(){
    $(this).css("background-color","#cccccc");
  });

blur() - 失去焦點的狀態監聽，一般用於input標籤

  $("input").blur(function(){
    $(this).css("background-color","#ffffff");
  });

內容、屬性（attr）的獲取與設置

示例代碼

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("#btn1").click(function(){
                alert("Text: " + $("#test").text());
            });
            $("#btn2").click(function(){
                alert("HTML: " + $("#test").html());
            });
             $("#btn3").click(function(){
    			alert($("#baidu").attr("href"));
 			 });
 			 $("#btn4").click(function(){
				alert("值爲: " + $("#inputdata").val());
 			 });
        });
    </script>
</head>
<body>
<p id="test">這是段落中的 <b>粗體</b> 文本。</p>
<p><a href="https://www.baidu.com/" id="baidu">百度</a></p>
<p>名稱: <input type="text" id="inputdata" value="開始的開始，我們都是孩子"></p>
<button id="btn1">顯示文本</button>
<button id="btn2">顯示 HTML</button>
<button id="btn3">顯示內容屬性</button>
<button id="btn4">顯示input值</button>
</body>
</html>

text() 獲取與設置

獲取文本內容

$("#test").text())

輸出：這是段落中的 粗體 文本。

設置文本

 $("#test_id").text("Happy Every Day");

html() 獲取與設置

返回所選元素的內容（包括 HTML 標記）

$("#test").html())

輸出：這是段落中的 <b>粗體</b> 文本

設置HTML

 $("#test_id").html("<b>Happy Every Day!</b>");

val() 獲取與設置

設置或返回表單字段的值

$("#inputdata").val())

輸出：開始的開始，我們都是孩子

設值

 $("#test_id").val("Happy Every Day");

attr() - 獲取與設置

獲取屬性

$("#baidu").attr("href"))

輸出：https://www.baidu.com/

設置屬性

 <!-- 單參 -->
 $("#test_id").attr("href","https://www.baidu.com/");

 <!-- 多參 -->
 $("#test_id").attr({"href" : "https://www.baidu.com/","title" : "Happy Day" });

CSS（）設置、獲取樣式屬性

css 屬性設置支持單參或多參
注： p爲id或標籤名，css入參爲屬性名
單參 $(“p”).css(“background-color”,“yellow”);
多參 $(“p”).css({“background-color”:“yellow”,“font-size”:“200%”});
獲取樣式屬性： $(“p”).css(“background-color”));

示例代碼

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("#btn1").click(function(){
                alert("背景顏色 = " + $("p").css("background-color"));
            });
            $("#btn2").click(function(){
                $("p").css("background-color","yellow");
            });

            $("#btn3").click(function(){
                $("p").css({"background-color":"yellow","font-size":"200%"});
            });
        });
    </script>
</head>

<body>
<h2>這是一個標題</h2>
<p style="background-color:#ff0000">這是一個段落。</p>
<p style="background-color:#0000ff">這是一個段落。</p>
<button id="btn1">返回第一個 p 元素的 background-color </button>
<button id="btn2">設置 p 元素的 background-color </button>
<button id="btn3"> 爲 p 元素設置多個樣式</button>
</body>
</html>

獲取、設置 CSS - class 屬性

增刪 CSS 類

addClass() - 向被選元素添加一個或多個類
removeClass() - 從被選元素刪除一個或多個類

addClass、removeClass 可以單參或多參
如：$(“p”).addClass(“blue measure”); 或 $(“p”).removeClass(“blue”);

示例代碼

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function () {
            $("#add").click(function () {
                $("h1,p").addClass("blue measure");
            });
            $("#remove").click(function () {
                $("h1,p").removeClass("blue");
            });
        });
    </script>
    <style type="text/css">
        .blue {
            color: blue;
        }
        .measure {
            font-size: 20px;
        }
    </style>
</head>
<body>

<h1>cheer ~</h1>
<p>Learning makes people happy</p>
<br>
<button id="add">爲元素添加 class</button>
<button id="remove">爲元素移除 class</button>

</body>
</html>

反向切換CSS類

toggleClass() - 對被選元素進行添加/刪除類的切換操作

CSS類切換操作建立在同等標籤的情況下，如下文中同爲p標籤的倆個段落 ~

示例代碼

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("p").toggleClass("blue");
            });
        });
    </script>
    <style type="text/css">
        .blue
        {
            color:blue;
        }
    </style>
</head>
<body>

<p class="blue">開始段落</p>
<p>結尾段落</p>

<br>
<button>切換 class</button>
</body>
</html>

元素操作

添加元素

以下是以 p 標籤使用API的，項目使用中也可以通過id設置

prepend() - 在被選元素的開頭插入內容
append() - 在被選元素的結尾插入內容
before() - 在被選元素之前插入內容
after() - 在被選元素之後插入內容

示例代碼

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function () {
            $("#btn1").click(function () {
                $("p").prepend("<b>追加文本</b>");
            });
            $("#btn2").click(function () {
                $("p").append("<b>追加文本</b>");
            });
            $("#btn3").click(function () {
                $("p").before("<b>追加文本</b>");
            });
            $("#btn4").click(function () {
                $("p").after("<b>追加文本</b>");
            });
            $("#btn5").click(function () {
                $("ol").append("<li>追加列表項</li>");
            });
        });
    </script>
</head>

<body>
<p id="p">這是一個段落</p>

<ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
</ol>
<button id="btn1">開頭插入</button>
<button id="btn2">結尾插入</button>
<button id="btn3">之前插入</button>
<button id="btn4">之後插入</button>
<button id="btn5">添加列表項</button>

</body>
</html>

刪除元素

remove()的使用場景可以是通過某標籤的class，屬性等條件進行模糊刪除，也可以是精確刪除

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

示例代碼

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#btn1").click(function(){
                $("p").remove(".test");
            });
            $("#btn2").click(function(){
                $("#div1").remove();
            });
            $("#btn3").click(function(){
                $("#div1").empty();
            });
        });
    </script>
</head>
<body>

<div id="div1" style="height:100px;width:300px;border:1px solid black;">
    div文本
    <p>div第一個段落</p>
    <p class="test">div第二段落</p>
</div>
<br>
<button id="btn1" >移除所有  class="test" 的 p 元素</button>
<button id="btn2">移除div元素</button>
<button id="btn3">清空div元素</button>
</body>
</html>