jQuery

是JavaScript程式庫，是對JavaScript對象和函數的封裝。

引入jQuery方法

<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js" ></script>
		<!--<script src="js/jquery-1.12.4.js" type="text/javascript"></script>-->
           

選擇公式：

$(selector).action()

<a href="" id="a">點我</a>
//選擇器就是css的選擇器
$("#a").click(function(){
    alert("hello,jquery");
})
           

頁面加載時運作：

$(document).ready(function(){...})

可簡寫為：

$(function{...})

等同于：

window.onload()

方法

方法	方法說明
$(selector).addClass()	添加class
$(selector).css("屬性","屬性值")	設定單個css屬性
$(selector).({"屬性1":"值","屬性2":"值"})	設定多個css屬性
$(selector).show()	顯示
$(selector).hide()	隐藏

選擇器

基本選擇器

選擇器文法	說明
element	标簽選擇器
.class	類選擇器
#id	ID選擇器
selector,selector	并集選擇器
*	全局選擇器

層次選擇器

選擇器	選擇器文法	說明	執行個體
後代選擇器	ancestor descendant	選取ancestor元素裡的所有descendant（後代）元素	$("#menu span" )選取#menu下的元素
子選擇器	parent>child	選取parent元素下的child（子）元素	$(" #menu>span" )選取#menu的子元素
相鄰元素選擇器	prev+next	選取緊鄰prev元素之後的next元素	$(" h2+dl " )選取緊鄰 元素之後的同輩元素
同輩元素選擇器	prev~sibings	選取prev元素之後的所有siblings元素	$(" h2~dl " )選取 元素之後所有的同輩元素

屬性選擇器

選擇器文法	說明
[attribute]	選取包含給定屬性的元素
[attribute=value]	選取等于給定屬性是某個特定值的元素
[attribute !=value]	選取不等于給定屬性是某個特定值的元素
[attribute^=value]	選取給定屬性是以某些特定值開始的元素
[attribute$=value]	選取給定屬性是以某些特定值結尾的元素
[attribute\*=value]	選取給定屬性是以包含某些值的元素

過濾選擇器

基本過濾選擇器

選擇器文法	說明	執行個體
:first	選取第一個元素	$(" li:first" )選取所有 元素中的第一個 元素
:last	選取最後一個元素	$(" li:last" )選取所有 元素中的最後一個 元素
:not(selector)	選取去除所有與給定選擇器比對的元素	$(" li:not(.three)" )選取class不是three的元素
:even	選取索引是偶數的所有元素（index從0開始）	$(" li:even" )選取索引是偶數的所有 元素
:odd	選取索引是奇數的所有元素（index從0開始）	$(" li:odd" )選取索引是奇數的所有 元素
:eq(index)	選取索引等于index的元素（index從0開始）	$(“li:eq(1)” )選取索引等于1的 元素
:gt(index)	選取索引大于index的元素（index從0開始）	$(" li:gt(1)" )選取索引大于1的 元素（注：大于1，不包括1）
:lt(index)	選取索引小于index的元素（index從0開始）	$(“li:lt(1)” )選取索引小于1的 元素（注：小于1，不包括1）
:header	選取所有标題元素，如h1~h6	$(":header" )選取網頁中所有标題元素
:focus	選取目前擷取焦點的元素	$(":focus" )選取目前擷取焦點的元素
:animated	選擇所有動畫	$(":animated" )選取目前所有動畫元素

可見性過濾選擇器

更多操作選擇器文法	說明	執行個體
:visible	選取所有可見的元素	$(":visible" )選取所有可見的元素
:hidden	選取所有隐藏的元素	$(":hidden" )選取所有隐藏的元素

事件

滑鼠事件

滑鼠事件是當使用者在文檔上移動或單擊滑鼠時而産生的事件。

文法	說明	執行時機
click( )	觸發或将函數綁定到指定元素的click事件	單擊滑鼠時
mouseover( )	觸發或将函數綁定到指定元素的mouseover事件	滑鼠指針移過時
mouseout( )	觸發或将函數綁定到指定元素的mouseout事件	滑鼠指針移出時
mouseenter( )	觸發或将函數綁定到指定元素的mouseenter事件	滑鼠指針進入時
mouseleave( )	觸發或将函數綁定到指定元素的mouseleave事件	滑鼠指針離開時

相同點與不同點

方法	相同點	不同點
mouseover( )	滑鼠進入被選元素時會觸發	滑鼠在其被選元素的子元素上來回進入時： 觸發mouseover( )不觸發mouseenter
mouseout( )	滑鼠離開被選元素時會觸發	滑鼠在其被選元素的子元素上來回離開時： 觸發mouseout不觸發mouseleave

鍵盤事件

使用者每次按下或者釋放鍵盤上的鍵時都會産生事件。

方法名	說明	執行時機
keydown( )	觸發或将函數綁定到指定元素的keydown事件	按下鍵盤時
keyup( )	觸發或将函數綁定到指定元素的keyup事件	釋放按鍵時
keypress( )	觸發或将函數綁定到指定元素的keypress事件	産生可列印的字元時

複合事件

hover()

hover()

方法相當于mouseover與mouseout事件的組合。

文法格式：

hover(enter,leave)

$(".top-m .on").hover(function(){
	$(".topDown").show();
          },
         function(){
	 $(".topDown").hide();
         }
);
           

toggle()

toggle()

方法用于模拟滑鼠連續click事件。

toggle()

方法不帶參數，與show( )和hide( )方法作用一樣。

文法格式：

toggle(fn1,fn2,...,fnN);

$("input").toggle(
    function(){$("body").css("background","#ff0000");},
    function(){$("body").css("background","#00ff00");},
    function(){$("body").css("background","#0000ff");}
)
           

toggleClass()

toggleClass( )

可以對樣式進行切換

文法格式：

toggleClass(className);

方法對比

• toggle( fn1,fn2...)

  ：實作單擊事件的切換，無須額外綁定click事件

• toggle( )

  ：實作事件觸發對象在顯示和隐藏狀态之間切換

• toggleClass( )

  ：實作事件觸發對象在加載某個樣式和移除某個樣式之間切換

動畫效果

元素的顯示與隐藏

$(selector).show([speed],[callback])

$(selector).hide([speed],[callback])

• speed

  ：可選，表示速度，預設為“0”，可能值：毫秒（如1000）、slow、normal、fast
  • slow ：緩慢的
  • normal ：正常的
  • fast ：迅速的

• callback

  ：可選，show函數執行完後，要執行的函數

淡入淡出

fadeIn()

和

fadeOut()

可以通過改變元素的透明度實作淡入淡出效果。

$(selector).fadeIn([speed],[callback])

$(selector).fadeOut([speed],[callback])

動态顯示/隐藏

slideDown()

可以使元素逐漸延伸顯示。

slideUp()

則使元素逐漸縮短直至隐藏。

$(selector).slideDown([speed],[callback])

$(selector).slideUp([speed],[callback])

動畫

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

• 必需的 params 參數定義形成動畫的 CSS 屬性。
• 可選的 speed 參數規定效果的時長。它可以取以下值：“slow”、“fast” 或毫秒。
• 可選的 callback 參數是動畫完成後所執行的函數名稱。