1. 什麼是jquery

1.1定義

jquery是JavaScript世界中使用最廣泛的一個庫。

1.2優點

1. 消除瀏覽器差異：你不需要自己寫冗長的程式碼來針對不同的瀏覽器來繫結事件，編寫AJAX等程式碼；
2. 簡潔的操作DOM的方法：寫 $('#test') 肯定比 document.getElementById('test') 來得
   簡潔；

1.3版本

兩個版本，uncompressed開發版,compressed（壓縮了）執行版
或者線上cdn

1.4匯入

CDN:<script src="//code.jquery.com/jquery-1.11.3.min.js"></script

1.5公式

$(selector).action()

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

2. 選擇器

2.1 id查詢

// 查詢<div id="abc">:
var div = $('#abc');

2.2 tag查詢

var ps = $('p'); // 返回所有<p>節點
ps.length; // 數一數頁面有多少個<p>節點

2.3 class查詢

var a = $('.red'); // 所有節點包含`class="red"`都將返回
// 例如:
// <div class="red">...</div>
// <p class="green red">...</p>
 

2.4 按屬性查詢

var email = $('[name=email]'); // 找出<??? name="email">
var passwordInput = $('[type=password]'); // 找出<??? type="password">
var a = $('[items="A B"]'); // 找出<??? items="A B">

var icons = $('[name^=icon]'); // 找出所有name屬性值以icon開頭的DOM
// 例如: name="icon-1", name="icon-2"
var names = $('[name$=with]'); // 找出所有name屬性值以with結尾的DOM
// 例如: name="startswith", name="endswith"

 

3. 操作DOM

3.1 獲取和更新文字和HTML(文字)

$('#test-ul li[name=book]').text(); // 'Java & JavaScript'
$('#test-ul li[name=book]').html(); // 'Java & JavaScript'，解析成html,可修改html

無引數呼叫 text() 是獲取文字，傳入引數就變成設定文字

一個jQuery物件可以包含0個或任意個DOM物件，它的方法實際上會作用在對應的每個DOM節點上。在上面的例子中試試：

$('#test-ul li').text('JS'); // 是不是兩個節點都變成了JS？

3.2 修改CSS

css('name', 'value')

var div = $('#test-div');
div.css('color'); // '#000033', 獲取CSS屬性
div.css('color', '#336699'); // 設定CSS屬性
div.css('color', ''); // 清除CSS屬性

3.3顯示和隱藏DOM

要隱藏一個DOM，我們可以設定CSS的 display 屬性為 none ，利用 css() 方法就可以實現。
不過，要顯示這個DOM就需要恢復原有的 display 屬性，這就得先記下來原有的 display 屬性到
底是 block 還是 inline 還是別的值。
考慮到顯示和隱藏DOM元素使用非常普遍，jQuery直接提供 show() 和 hide() 方法，我們不用關
心它是如何修改 display 屬性的，總之它能正常工作：

var a = $('a[target=_blank]');
a.hide(); // 隱藏
a.show(); // 顯示

注意，隱藏DOM節點並未改變DOM樹的結構，它隻影響DOM節點的顯示。這和刪除DOM節點是不同的。

3.4獲取DOM資訊（屬性）

第一種方法

// 瀏覽器可視視窗大小:
$(window).width(); // 800
$(window).height(); // 600
// HTML文件大小:
$(document).width(); // 800
$(document).height(); // 3500
// 某個div的大小:
var div = $('#test-div');
div.width(); // 600
div.height(); // 300
div.width(400); // 設定CSS屬性 width: 400px，是否生效要看CSS是否有效
div.height('200px'); // 設定CSS屬性 height: 200px，是否生效要看CSS是否有效

第二種方法：更好
attr() 和 removeAttr() 方法用於操作DOM節點的屬性：

// <div id="test-div" name="Test" start="1">...</div>
var div = $('#test-div');
div.attr('data'); // undefined, 屬性不存在
div.attr('name'); // 'Test'
div.attr('name', 'Hello'); // div的name屬性變為'Hello'
div.removeAttr('name'); // 刪除name屬性
div.attr('name'); // undefined

3.5操作表單

對於表單元素，jQuery物件統一提供 val() 方法獲取和設定對應的 value 屬性

var
    input = $('#test-input'),
    select = $('#test-select'),
    textarea = $('#test-textarea');
input.val(); // 'test'
input.val('[email protected]'); // 文字框的內容已變為[email protected]
select.val(); // 'BJ'
select.val('SH'); // 選擇框已變為Shanghai
textarea.val(); // 'Hello'
textarea.val('Hi'); // 文字區域已更新為'Hi'

3.6新增DOM

要新增新的DOM節點，除了通過jQuery的 html() 這種暴力方法外，還可以用 append() 方法，例
如：

<div id="test-div">
<ul>
<li><span>JavaScript</span></li>
<li><span>Python</span></li>
<li><span>Swift</span></li>
</ul>
</div>

如何向列表新增一個語言？首先要拿到 <ul> 節點：
var ul = $('#test-div>ul');
然後，呼叫 append() 傳入HTML片段：
ul.append('<li>Haskell');

append() 把DOM新增到最後， prepend() 則把DOM新增到最前。
如果要把新節點插入到指定位置，例如，JavaScript和Python之間，那麼，可以先定位到JavaScript，然後用 after() 方法：

var js = $('#test-div>ul>li:first-child');
js.after('<li><span>Lua</span></li>');

也就是說，同級節點可以用 after() 或者 before() 方法。

3.7刪除節點

要刪除DOM節點，拿到jQuery物件後直接呼叫 remove() 方法就可以了。如果jQuery物件包含若干
DOM節點，實際上可以一次刪除多個DOM節點：

var li = $('#test-div>ul>li');
li.remove(); // 所有<li>全被刪除

4. 事件

4.1 概述

jQuery能夠繫結的事件主要包括：

滑鼠事件：
click: 滑鼠單擊時觸發； dblclick：滑鼠雙擊時觸發； mouseenter：滑鼠進入時觸發； mouseleave：滑鼠移出時觸發； mousemove：滑鼠在DOM內部移動時觸發； hover：滑鼠進入和退出時觸發兩個函式，相當於mouseenter加上mouseleave。

鍵盤事件；
鍵盤事件僅作用在當前焦點的DOM上，通常是 和 。
keydown：鍵盤按下時觸發； keyup：鍵盤松開時觸發； keypress：按一次鍵後觸發。

其他事件
focus：當DOM獲得焦點時觸發； blur：當DOM失去焦點時觸發； change：當 、 或 的內容改變時
觸發； submit：當 提交時觸發； ready：當頁面被載入並且DOM樹完成初始化後觸發。

4.2 初始化

我們自己的初始化程式碼必須放到 document 物件的 ready 事件中，保證DOM已完成初始化：
簡化寫法：

$(function () {
// init...
});

4.3 事件引數

例如：e.pageX

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#testMouseMoveDiv{
width: 300px;
height: 300px;
border: 1px solid black;
}
</style>
</head>
<body>
mousemove: <span id="testMouseMoveSpan"></span>
<div id="testMouseMoveDiv">
在此區域移動滑鼠試試
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
$(function () {
$('#testMouseMoveDiv').mousemove(function (e) {
$('#testMouseMoveSpan').text('pageX = ' + e.pageX + ', pageY = '
+ e.pageY);
});
});
</script>
</body>
</html>