---
# System prepended metadata

title: Jquery

---

參考網址:[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>
```