https://www.runoob.com/jquery/jquery-syntax.html

jQuery 使用 $ 符號作為 jQuery 的簡寫，

jQuery 簡介什么是 jQuery ？

什么是CDN

jQuery 語法

jQuery 入口函式:

jQuery 選擇器

元素選擇器

#id 選擇器

.class 選擇器

jQuery 事件

jQuery 事件方法語法

常用的 jQuery 事件方法

$(document).ready()

click()

jQuery hide() 和 show()

設定隱藏時間 1000（1秒）?

隱藏完成后彈窗

jQuery toggle() 實作顯示和隱藏

jQuery 效果 - 淡入淡出

jQuery 效果 - 滑動

樣式使用 #

jQuery 影片 - animate() 方法

jQuery DOM 操作

DOM = Document Object Model（檔案物件模型）

jquary return：val 回呼?

attr屬性

attr 設定 href 和 title 屬性

attr() 的回呼函式：實質就是回傳值

jQuery - 添加元素

jQuery - 添加元素:append

jQuery - 添加元素:prepend

remove

jQuery 操作 CSS

addClass

toggleClass

id和class的區別

設定多個 CSS 屬性

jQuery 尺寸方法

jQuery width() 和 height() 方法

jQuery innerWidth() 和 innerHeight() 方法

jQuery outerWidth() 和 outerHeight() 方法

遍歷 DOM

向上遍歷 DOM 樹

jQuery parentsUntil() 方法

向下遍歷 DOM 樹

jQuery find() 方法

jQuery 遍歷 - 同胞(siblings)

jquary nextutil

jquery eq 1

jquery filter?

什么是 AJAX？

關于 jQuery 與 AJAX

jQuery load() 方法

id="p1" #p1

load 里面定義 function?

jQuery - AJAX get() 和 post() 方法

HTTP 請求：GET vs. POST

get 請求內嵌function

post請求 function回傳函式?

jQuery 使用 $ 符號作為 jQuery 的簡寫，

jQuery 簡介什么是 jQuery ？

jQuery 是一個 JavaScript 函式庫，

jQuery 是一個輕量級的"寫的少，做的多"的 JavaScript 庫，

jQuery 庫包含以下功能：

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

提示： 除此之外，jQuery 還提供了大量的插件，

jQuery 庫是一個 JavaScript 檔案，您可以使用 HTML 的 <script> 標簽參考它：

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

什么是CDN

jQuery 語法

jQuery 語法是通過選取 HTML 元素，并對選取的元素執行某些操作，

基礎語法： $(selector).action()

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

實體:

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

jQuery 入口函式:

$(document).ready(function(){
    // 執行代碼
});
或者
$(function(){
    // 執行代碼
});

JavaScript 入口函式:

window.onload = function () {
    // 執行代碼
}

load 和ready 的區別

jQuery 選擇器

元素選擇器

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鳥教程(runoob.com)</title> 
<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>

<body>
<h2>這是一個標題</h2>
<p>這是一個段落，</p>
<p>這是另一個段落，</p>
<button>點我</button>
</body>
</html>

#id 選擇器

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鳥教程(runoob.com)</title> 
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#test").hide();
  });
});
</script>
</head>

<body>
<h2>這是一個標題</h2>
<p>這是一個段落</p>
<p id="test">這是另外一個段落</p>
<button>點我</button>
</body>

</html>

.class 選擇器

jQuery 事件

jQuery 事件方法語法

在 jQuery 中，大多數 DOM 事件都有一個等效的 jQuery 方法，

頁面中指定一個點擊事件：

$("p").click();

下一步是定義了點擊后觸發事件，您可以通過一個事件函式實作：

$("p").click(function(){ // 動作觸發后執行的代碼!! });

常用的 jQuery 事件方法

$(document).ready()

$(document).ready() 方法允許我們在檔案完全加載完后執行函式，

click()

click() 方法是當按鈕點擊事件被觸發時會呼叫一個函式，

該函式在用戶點擊 HTML 元素時執行，

在下面的實體中，當點擊事件在某個 <p> 元素上觸發時，隱藏當前的 <p> 元素：

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

jQuery hide() 和 show()

設定隱藏時間 1000（1秒）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#hidden").click(function(){
    $("p").hide(1000);
  });
	 
  $("#show").click(function(){
    $("p").show(1000);
  });
});
</script>
</head>
<body>
<button id="hidden">隱藏</button>
<button id="show">顯示</button>
<p>這是個段落，內容比較少，</p>
<p>這是另外一個小段落</p>
</body>
</html>

隱藏完成后彈窗

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<style>
div{
width: 130px;
height: 50px;
padding: 15px;
margin: 15px;
background-color: green;
}
</style>

<script>
$(document).ready(function(){
  $(".hidebtn").click(function(){
    $("div").hide(1000,"linear",function(){
      alert("Hide() 方法已完成!");
    });
  });
});
</script>
</head>
<body>
	
<div>隱藏及設定回呼函式</div>
<button class="hidebtn">隱藏</button>
	
</body>
</html>

jQuery toggle() 實作顯示和隱藏

jQuery 效果 - 淡入淡出

jQuery fadeIn()
演示 jQuery fadeIn() 方法，

jQuery fadeOut()
演示 jQuery fadeOut() 方法，

jQuery fadeToggle()
演示 jQuery fadeToggle() 方法，

jQuery fadeTo()
演示 jQuery fadeTo() 方法，

<!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(){
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(5000);
  });
});
</script>
</head>

<body>
<p>以下實體演示了 fadeIn() 使用了不同引數的效果，</p>
<button>點擊淡入 div 元素，</button>
<br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>

</body>
</html>

jQuery 效果 - 滑動

jQuery slideDown()
演示 jQuery slideDown() 方法，

jQuery slideUp()
演示 jQuery slideUp() 方法，

jQuery slideToggle()
演示 jQuery slideToggle() 方法，

樣式使用 #

jQuery 影片 - animate() 方法

jQuery animate() 方法用于創建自定義影片，

語法：

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

必需的 params 引數定義形成影片的 CSS 屬性，

可選的 speed 引數規定效果的時長，它可以取以下值："slow"、"fast" 或毫秒，

可選的 callback 引數是影片完成后所執行的函式名稱，

下面的例子演示 animate() 方法的簡單應用，它把 <div> 元素往右邊移動了 250 像素：

$("button").click(function(){ $("div").animate({left:'250px'}); });

jQuery DOM 操作

DOM = Document Object Model（檔案物件模型）

text() - 設定或回傳所選元素的文本內容
html() - 設定或回傳所選元素的內容（包括 HTML 標記）
val() - 設定或回傳表單欄位的值

jquary return：val 回呼

attr屬性

attr 設定 href 和 title 屬性

<!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(){
    $("#runoob").attr({
      "href" : "http://www.runoob.com/jquery",
      "title" : "jQuery 教程"
    });
	// 通過修改的 title 值來修改鏈接名稱
	title =  $("#runoob").attr('title');
	$("#runoob").html(title);
  });
});
</script>
</head>

<body>
<p><a href="//www.runoob.com" id="runoob">菜鳥教程</a></p>
<button>修改 href 和 title</button>
<p>點擊按鈕修改后，可以查看 href 和 title 是否變化，</p>
</body>
</html>