JQuery學習

---

 jQuery 選擇器

---

 

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

$(this).hide()  隱藏當前的 HTML 元素。

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

$("p").hide()  隱藏全部 <p> 元素。

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

$(".test").hide()  隱藏全部 class="test" 的元素。

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

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

---

 

jQuery 事件

---

 

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

click()

click() 方法是當按鈕點擊事件被觸發時會調用一個函數。

該函數在用戶點擊 HTML 元素時執行。

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

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

dblclick()

當雙擊元素時，會發生 dblclick 事件。

dblclick() 方法觸發 dblclick 事件，或規定當發生 dblclick 事件時運行的函數：

$(document).ready(function(){
  $("#p1").mouseenter(function(){
    alert('您的鼠標移到了這裏!');
  });
})

mouseenter()

當鼠標指針穿過元素時，會發生 mouseenter 事件。

mouseenter() 方法觸發 mouseenter 事件，或規定當發生 mouseenter 事件時運行的函數：

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

mouseleave()

當鼠標指針離開元素時，會發生 mouseleave 事件。

mouseleave() 方法觸發 mouseleave 事件，或規定當發生 mouseleave 事件時運行的函數：

$(document).ready(function(){
    $("#p1").hover(
        function(){
            alert("光標進入！");
        },
        function(){
            alert("光標離開了！");
        }
    )
});

hover()

hover()方法用於模擬光標懸停事件。

當鼠標移動到元素上時，會觸發指定的第一個函數(mouseenter);當鼠標移出這個元素時，會觸發指定的第二個函數(mouseleave)。

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

focus()

當元素得到焦點時，發生 focus 事件。

當經過鼠標點擊選中元素或經過 tab 鍵定位到元素時，該元素就會得到焦點。

focus() 方法觸發 focus 事件，或規定當發生 focus 事件時運行的函數

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

blur()

當元素失去焦點時，發生 blur 事件。

blur() 方法觸發 blur 事件，或規定當發生 blur 事件時運行的函數

---

 

jQuery 效果- 隱藏和顯示

---

 

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

jQuery hide() 和 show()

經過 jQuery，您可使用 hide() 和 show() 方法來隱藏和顯示 HTML 元素

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

語法：

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

可選的 speed 參數規定隱藏/顯示的速度，能夠取如下值："slow"、"fast" 或毫秒。

可選的 callback 參數是隱藏或顯示完成後所執行的函數名稱

$(document).ready(function(){
  $(".hidebtn").click(function(){
    $("div").hide(1000,"linear",function(){
      alert("Hide() 方法已完成!");
    });
  });
});

下面的例子演示了帶有 speed 參數的 hide() 方法，並使用回調函數  linear表示 隱藏/顯示 時直線運動

jQuery toggle()

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

經過 jQuery，您可使用 toggle() 方法來切換 hide() 和 show() 方法。

顯示被隱藏的元素，並隱藏已顯示的元素：

---

 

jQuery 效果 - 淡入淡出

---

 jQuery Fading 方法

經過 jQuery，您能夠實現元素的淡入淡出效果。

jQuery 擁有下面四種 fade 方法：

• fadeIn()
• fadeOut()
• fadeToggle()
• fadeTo()

jQuery fadeIn() 方法

jQuery fadeIn() 用於淡入已隱藏的元素。

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

jQuery fadeOut() 方法

jQuery fadeOut() 方法用於淡出可見元素。

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

jQuery fadeToggle() 方法

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

 

jQuery fadeToggle() 方法能夠在 fadeIn() 與 fadeOut() 方法之間進行切換。

若是元素已淡出，則 fadeToggle() 會向元素添加淡入效果。

若是元素已淡入，則 fadeToggle() 會向元素添加淡出效果。

jQuery fadeTo() 方法  （此方法相似於 hide show 方法）

$("button").click(function(){
  $("#div1").fadeTo("slow",0.15);
  $("#div2").fadeTo("slow",0.4);
  $("#div3").fadeTo("slow",0.7);
});

 

jQuery fadeTo() 方法容許漸變爲給定的不透明度（值介於 0 與 1 之間）。

$(selector).fadeTo(speed,opacity,callback);

 

必需的 speed 參數規定效果的時長。它能夠取如下值："slow"、"fast" 或毫秒。

fadeTo() 方法中必需的 opacity 參數將淡入淡出效果設置爲給定的不透明度（值介於 0 與 1 之間）。

可選的 callback 參數是該函數完成後所執行的函數名稱。

---

 

jQuery 效果 - 滑動

---

 

jQuery 滑動方法

經過 jQuery，您能夠在元素上建立滑動效果。

jQuery 擁有如下滑動方法：

• slideDown()
• slideUp()
• slideToggle()

jQuery slideDown() 方法

jQuery slideDown() 方法用於向下滑動元素。

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

jQuery slideUp() 方法

jQuery slideUp() 方法用於向上滑動元素。

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

jQuery slideToggle() 方法

jQuery slideToggle() 方法能夠在 slideDown() 與 slideUp() 方法之間進行切換。

若是元素向下滑動，則 slideToggle() 可向上滑動它們。

若是元素向上滑動，則 slideToggle() 可向下滑動它們。

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

 

---

jQuery 效果- 動畫

---

jQuery 動畫 - animate() 方法

jQuery animate() 方法用於建立自定義動畫。

語法：

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

必需的 params 參數定義造成動畫的 CSS 屬性。  CSS屬性值是必須的

可選的 speed 參數規定效果的時長。它能夠取如下值："slow"、"fast" 或毫秒。

可選的 callback 參數是動畫完成後所執行的函數名稱。

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

動畫的效果：它把 <div> 元素往右邊移動了 250 像素

jQuery animate() - 操做多個屬性

請注意，生成動畫的過程當中可同時使用多個屬性：

 $("button").click(function(){
    $("div").animate({
      left:'250px',//向左移動
      opacity:'0.2',//透明度
      height:'150px',//移動後的高
      width:'150px'//移動後的寬
    });
  });
});

jQuery animate() - 使用相對值

也能夠定義相對值（該值相對於元素的當前值）。須要在值的前面加上 += 或 -=：

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

jQuery animate() - 使用預約義的值

您甚至能夠把屬性的動畫值設置爲 "show"、"hide" 或 "toggle"：

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

jQuery animate() - 使用隊列功能

默認地，jQuery 提供針對動畫的隊列功能。

這意味着若是您在彼此以後編寫多個 animate() 調用，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");
});

---

 jQuery 中止動畫

---

 

jQuery stop() 方法

jQuery stop() 方法用於中止動畫或效果，在它們完成以前。

 

stop() 方法適用於全部 jQuery 效果函數，包括滑動、淡入淡出和自定義動畫。

 

語法:

$(selector).stop(stopAll,goToEnd);

可選的 stopAll 參數規定是否應該清除動畫隊列。默認是 false，即僅中止活動的動畫，容許任何排入隊列的動畫向後執行。

可選的 goToEnd 參數規定是否當即完成當前動畫。默認是 false。

所以，默認地，stop() 會清除在被選元素上指定的當前動畫。

 $("#flip").click(function(){
    $("#panel").slideDown(5000);
  });
  $("#stop").click(function(){
    $("#panel").stop(true,true);
  });

---

 jQuery Callback 方法

---

Callback 函數在當前動畫 100% 完成以後執行。

jQuery 動畫的問題

許多 jQuery 函數涉及動畫。這些函數也許會將 speed 或 duration 做爲可選參數。

使用 callback 實例   先執行隱藏再彈窗

$("button").click(function(){
  $("p").hide("slow",function(){
    alert("段落如今被隱藏了");
  });
});

沒有 callback(回調)   先執行彈窗再隱藏

$("button").click(function(){
  $("p").hide(1000);
  alert("段落如今被隱藏了");
});

---

 jQuery - 鏈(Chaining)

---

 經過 jQuery，能夠把動做/方法連接在一塊兒。

Chaining 容許咱們在一條語句中運行多個 jQuery 方法（在相同的元素上）。

 css()、slideUp() 和 slideDown() 連接在一塊兒。"p1" 元素首先會變爲紅色，而後向上滑動，再而後向下滑動：

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