參考網址:[https://www.runoob.com/jquery/jquery-css.html](https://www.runoob.com/jquery/jquery-css.html)
# 匯入
最常使用是CDN，其他部分可以透過[https://jquery.com/download/](https://jquery.com/download/) 查看

<script src="http://code.jquery.com/jquery-3.1.1.min.js">
</script>

參考網站:[https://www.runoob.com/jquery/jquery-hide-show.html](https://www.runoob.com/jquery/jquery-hide-show.html)
# 使用
$('selector').event(fuction(){ ... });
範例

$('button').click(function(){
   ...
});

## 方法串聯
链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。

提示： 这样的话，浏览器就不必多次查找相同的元素。

如需链接一个动作，您只需简单地把该动作追加到之前的动作上。

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

# 設置内容和屬性
## 獲得内容
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标签）
val() - 设置或返回表单字段的值

$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});

## 獲得屬性
prop()、attr() - 获取属性值
对于 HTML 元素本身就带有的固有属性，在处理时，使用 prop 方法。

对于 HTML 元素我们自己自定义的 DOM 属性，在处理时，使用 attr 方法。

<a href="https://www.runoob.com" target="_self" class="btn">菜鸟教程</a>

$("button").click(function(){
  alert($("#runoob").attr("href"));
});

这个例子里 <a> 元素的 DOM 属性有: href、target 和 class，这些属性就是 <a> 元素本身就带有的属性，也是 W3C 标准里就包含有这几个属性，或者说在 IDE 里能够智能提示出的属性，这些就叫做固有属性。处理这些属性时，建议使用 prop 方法

## text()、html() 以及 val()的回调函数
text()、html() 以及 val()，同样拥有回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。

下面的例子演示带有回调函数的 text() 和 html()：

$("#btn1").click(function(){
    $("#test1").text(function(i,origText){
        return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")"; 
    });
});
 
$("#btn2").click(function(){
    $("#test2").html(function(i,origText){
        return "旧 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")"; 
    });
});

## 设置属性
attr() 方法也用于设置/改变属性值。

下面的例子演示如何改变（设置）链接中 href 属性的值

$("button").click(function(){
  $("#runoob").attr("href","http://www.runoob.com/jquery");
});
//同時設置多個屬性
$("button").click(function(){
    $("#runoob").attr({
        "href" : "http://www.runoob.com/jquery",
        "title" : "jQuery 教程"
    });
});

## 添加元素
### append() - 在被选元素的结尾插入内容

$("p").append("追加文本");

### prepend() - 在被选元素的开头插入内容

$("p").prepend("追加文本");

function appendText(){
    var txt1="<p>文本-1。</p>";              // 使用 HTML 标签创建文本
    var txt2=$("<p></p>").text("文本-2。");  // 使用 jQuery 创建文本
    var txt3=document.createElement("p");
    txt3.innerHTML="文本-3。";               // 使用 DOM 创建文本 text with DOM
    $("body").append(txt1,txt2,txt3);        // 追加新元素
}

### after() - 在被选元素之后插入内容

$("img").after("在后面添加文本");

### before() - 在被选元素之前插入内容

$("img").before("在前面添加文本");

function afterText()
{
    var txt1="<b>I </b>";                    // 使用 HTML 创建元素
    var txt2=$("<i></i>").text("love ");     // 使用 jQuery 创建元素
    var txt3=document.createElement("big");  // 使用 DOM 创建元素
    txt3.innerHTML="jQuery!";
    $("img").after(txt1,txt2,txt3);          // 在图片后添加文本
}

# 刪除元素/内容
## remove() - 删除被选元素（及其子元素）

$("#div1").remove();

## empty() - 从被选元素中删除子元素

$("#div1").empty();

# 設置CSS
## addClass() - 向被选元素添加一个或多个类

$("button").click(function(){
  $("h1,h2,p").addClass("blue");
  $("div").addClass("important");
});

## removeClass() - 从被选元素删除一个或多个类

$("button").click(function(){
  $("h1,h2,p").removeClass("blue");
});

## toggleClass() - 对被选元素进行添加/删除类的切换操作

$("button").click(function(){
  $("h1,h2,p").toggleClass("blue");
});

# 顯示效果
## 顯示、隱藏
### show()、hide()
$(selector).show(speed,callback);
$(selector).hide(speed,callback);

$("#show").click(function(){
  $("p").show();
});

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

### toggle()
$(selector).toggle(speed,callback);
切换 hide() 和 show() 方法

$("button").click(function(){
  $("p").toggle();
});

## 淡入淡出
### jQuery fadeIn()
淡入可見元素。

$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});

### jQuery fadeOut()
淡出可見元素。

$("button").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
});

### jQuery fadeToggle()
jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

$("button").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
});

## 滑動
在我看來這個效果比較像是展開
### slideDown()

$("#flip").click(function(){
  $("#panel").slideDown();
});

### slideUp()

$("#flip").click(function(){
  $("#panel").slideUp();
});

### slideToggle()
slideDown() 与 slideUp() 方法之间进行切换

$("#flip").click(function(){
  $("#panel").slideToggle();
});

## 動畫
### animate()
$(selector).animate({params},speed,callback);
#### 使用相對值

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

#### 使用預設值
可以把属性的动画值设置为 "show"、"hide" 或 "toggle"：

$("button").click(function(){
  $("div").animate({
    height:'toggle'
  });
});

#### 隊列功能
jQuery 会创建包含这些方法调用的"内部"队列。然后逐一运行这些 animate 调用

$("button").click(function(){
  var div=$("div");
  div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({width:'300px',opacity:'0.8'},"slow");
  div.animate({height:'100px',opacity:'0.4'},"slow");
  div.animate({width:'100px',opacity:'0.8'},"slow");
});

### 停止動畫
$(selector).stop(stopAll,goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false

$("#stop").click(function(){
  $("#panel").stop();
});

# event
## 觸發事件
|事件 |觸發條件|
|-|-|
|blur |物件失去焦點時|
|change |物件內容改變時
|click |滑鼠點擊物件時
|dblclick |滑鼠連點二下物件時|
|error |當圖片或文件下載產生錯誤時|
|focus |當物件被點擊或取得焦點時|
|keydown |按下鍵盤按鍵時|
|keypress |按下並放開鍵盤按鍵後|
|keyup |按下並放開鍵盤按鍵時|
|load |網頁或圖片完成下載時|
|mousedown |按下滑鼠按鍵時|
|mousemove |介於over跟out間的滑鼠移動行為|
|mouseout |滑鼠離開某物件四周時|
|mouseover |滑鼠離開某物件四周時|
|mouseup |放開滑鼠按鍵時|
|resize |當視窗或框架大小被改變時|
|scroll| 當捲軸被拉動時|
|select| 當文字被選取時|
|submit |當按下送出按紐時|
|beforeunload| 當使用者關閉 (或離開) 網頁之前|
|unload |當使用者關閉 (或離開) 網頁之後|
## 綁定事件處理函式
### .on() .off()
.on() 可以用來綁定事件處理在現在已經存在或還沒存在的 DOM 元素，像是你可以綁在 $(document).on() 監聽 DOM 的所有事件

 function greet(event) {
  alert('Hello ' + event.data.name);
}

//on的第三個參數可以作爲傳資料進事件處理函式
$('button').on('click', {
  name: 'Addy'
}, greet);

.off() 來移除事件處理函式

  // 移除所有 p 元素的事件處理
$('p').off();
// 移除所有 p 元素的 click 事件處理
$('p').off('click');
// 移除 #foo 的 click 事件委任
$('p').off('click', '#foo');

### .hover(handlerIn, handlerOut)
當滑鼠移動到一個匹配的元素上面時，會觸發第一個函數 (handlerIn)；當滑鼠移出該元素時，會觸發第二個函數 (handlerOut)。

### .bind(eventType, handler) unbind(eventType)
除了直接用特定的事件函式來綁定事件 (i.e. .click())，你也可以用 .bind() 來做。

$('#foo').bind('click', function() {
  alert('User clicked on foo.');
});

unbind() 用來移除事件處理函式

// 移除 foo 元素上所有綁定的事件處理函式
$('#foo').unbind();
// 只移除 foo 元素上所有綁定的 click 事件處理函式
$('#foo').unbind('click');

// 只移除特定事件的特定處理函式
var handler = function() { alert('hi'); };
$('#foo').bind('click', handler);
$('#foo').unbind('click', handler);

### .trigger(eventType [, extraParameters])
觸發事件，其中 extraParameters 為要傳給事件處理函式的參數 (一個陣列或物件)。

觸發上面的自訂 myEvent 事件：

$('#foo').trigger('myEvent');
當然也可以用來觸發一般事件：

$('#foo').trigger('click');

### .one(events, handler)
如果只是觸發 "一次" 事件，就使用 one 函式來作 bind 的動作，當該事件被觸發一次之後就會自己自動 unbind。

$('#foo').one('click', function() {
  alert('This will be displayed only once.');
});

### $(document).ready(function() {})
確定頁面文件已經完全下載好才開始執行你的程式

$(document).ready(function() {
  // 這裡放你要執行的程式碼
});

# 表單驗證
需要引用jQuery.validate

<form id="form" method="post" action="">
  <div>
    <label for="fname">姓名:</label>
    <input type="text" id="fname" name="fname"></input>
  </div>
  <div>
    <label for="phone">電話:</label>
    <input type="text" id="phone" name="phone"></input>
  </div>
  <div>
    <label for="address">地址:</label>
    <input type="text" id="address" name="address"></input>
  </div>
  <div>
    <label for="email">Email:</label>
    <input type="text" id="email" name="email"></input>
  </div>
<div>
    <label for="url">網址:</label>
    <input type="text" id="url" name="url"></input>
  </div>


<div>
    <input type="submit" value="送出" />
  </div>
</form>

<script>
/* 常用檢測屬性
       required:必填
       noSpace:空白
       minlength:最小長度
       maxlength:最大長度
       email:信箱格式
       number:數字格式
       url:網址格式https://www.hackmd.io
       
       其他:https://www.runoob.com/jquery/jquery-plugin-validate.html
       */
    $(function(){
        $('#form').validate({
       onkeyup: function(element, event) {
         //去除左側空白
         var value = this.elementValue(element).replace(/^\s+/g, "");
         $(element).val(value);
        },
        rules: {
          fname: {
            required: true
          },
          phone:{
            required: true,
            minlength: 8,
                    number: true
          },
          address: 'required',
          url:{
            url: true
          },
          email: {
            required: true,
            email: true
          }
        },
        messages: {
          fname: {
            required:'必填'
          },
          phone: {
            required:'必填',
            minlength:'不得少於8位',
            number:'電話需為數字'
          },
          address: '必填',
          email: {
            required:'必填',
            email:'Email格式不正確'
          },
          url:'網址格式不正確'
        },
        submitHandler: function(form) {
          form.submit();
        }
  });


});
</script>