1. 程式人生 > >Jquery知識點記錄

Jquery知識點記錄

語法
操作HTML元素
$(selector).action();
$("#choose").hide();

文件就緒事件:等DOM結構載入完成後就執行jQuery程式碼。一個頁面可以寫多個ready()。【window.onload一個頁面只可以寫一個,要等到所有的內容包括圖片載入完畢才可以執行onload(),不能簡寫】
$(document).ready(function(){

})
簡寫:
$(funtion() {…});

注意,若是需要在JS或者圖片都載入完畢才能進行操作的話,建議用window.onload。

選擇器
$(“p”) //元素選擇器
$("#txt") //ID選擇器
$(this) //獲取當前HTML元素
$(“p:first”) //選取第一個p元素
$("[href]") //選取帶href屬性的元素
$(“ul li:first-child”) //選取每個<ul> 元素的第一個 <li> 元素
$(“ul li:first”) //選取第一個 <ul> 元素的第一個 <li> 元素

事件
在這裡插入圖片描述
hover觸發mouseenter和mouseleave方法

$("p").hover(
    function(){ alert("進入了p")},
    function(){  alert("離開了p")};
);

隱藏顯示
----hide()、show()、toggle()切換hide和show方法
----fadeIn()淡入,fadeOut()淡出、fadeToggle()、fadeTo()漸變效果(0-1)
動畫
animate()
$(selector).animate({params},speed,callback);
必需的 params 引數定義形成動畫的 CSS 屬性。
可選的 speed 引數規定效果的時長。它可以取以下值:“slow”、“fast” 或毫秒。
可選的 callback 引數是動畫完成後所執行的函式名稱。

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

animate()屬性名用駝峰命名法,paddingLeft、marginRight.

清除動畫
$(selector).stop(stopAll, goToEnd);
stop():當有多個動畫時,stop用於停止當前正在進行的動畫。
stopAll為true時會 停止所有的動畫。預設值是false。
GoToEnd: 是否立即完成當前動畫,預設是false。

jQuery鏈
在一個元素上鍊接多個動作
$("#p1").css(“color”,“red”).slideUp(2000).slideDown(2000);

新增元素
append(): 在被選元素結尾插入內容
prepend():在被選元素開頭插入內容,都是在元素內部嵌入
after()、before()在元素外面追加

jQuery獲取元素的盒子尺寸
width() /height()返回或者設定元素的內容盒子的寬/高,不包括內邊距、邊框或外邊距
innerWidth().innerHeight()返回或設定元素包括內邊距的寬/高。
outerWidth()/outerHeight()返回或設定元素包括內邊距和邊框的寬/高。
outerWidth(true)/outerHeight(true)返回或設定元素包括內邊距、邊框、外邊距(如果有的話)的寬/高。
遍歷
parent():返回被選元素的直接父元素,無引數
parents():返回被選元素的所有祖先元素,一直到根元素,無引數
parentsUtil():返回在兩個給定元素之間的所有祖先元素,有引數。
若是選擇器和引數為同一個,會變成返回該元素的所有祖先元素。
若是選擇器是引數的父元素,那麼返回的是選擇器的所有祖先元素。
若是選擇器是引數的子元素,那麼會返回選擇器的在引數元素以內的父元素。結果不會包含引數元素。

$(document).ready(function() {
	$('span').parentsUtil('div');  //返回在span和div之間的所有祖先元素
})

遍歷後代
children():返回被選元素的所有直接子元素(不包括子孫元素),引數如果存在則有點條件篩選的意思。
find():返回被選元素的所有子元素包括子孫元素。

遍歷兄弟元素
siblings():被選元素的所有同胞元素。不包括同胞元素中的子元素
next():被選元素的下一個相鄰同胞元素。沒有引數
nextAll():被選元素的所有跟隨同胞元素,往下找。沒有引數
nextUtil():給定兩個被選元素之間的同胞元素。有引數
若是選擇器元素在引數之前,返回兩者之間的同胞元素。
若是選擇器在引數元素之後,則會返回選擇器的相鄰下代同胞元素。
prev(),prevAll(),prevUtil(),與上述類似,但是是向前查詢