jQuery學習記錄

• 主要內容

1. jQuery入口函數 
2. 什麼是'$'?
3. dom對象與jQuery對象相互轉化
4. jQuery選擇器
5. jQuery類操作
6. jQuery動畫
7. jQuery部分方法
8. jQuery屬性操作
9. jQuery節點操作
10. jQuery事件

jQuery入口函數

①方法一
$(document).ready(function(){
    ...
});
②方法二
$(function(){
    ...
});

<script>
	$(function(){
		console.log('第一個入口函數');
	});
	$(document).ready(function(){
		console.log("第二個入口函數");
	});
</script>

什麼是'$'?

$是一個函數
①當參數爲函數時，爲入口函數
$(function(){})
②當參數爲字符串時，爲選擇器/創建一個標籤
$('#tag')
$('<div></div>')
③當參數爲dom對象，就會把dom對象轉化成jQuery對象
$(dom對象)
dom對象是原生js選擇器獲取到的對象
jQuery對象是利用jQuery選擇器獲取到的對象，只能調用jQuery方法和屬性，不能使用原生js的方法或屬性

dom對象與jQuery對象相互轉化 

dom對象轉化成jQuery對象

var div = document.getElemById("one")
var $div = $(div)

jQuery對象轉化成dom對象

1、使用下標取出來
var $divs = $(div)
var div_1 = $divs[0]

2、使用jQuery的get()
var $divs = $(div)
var div_1 = $div.get(0)

jQuery選擇器

基本選擇器（跟css選擇器用法一樣）
ID選擇器：$('#id')
類選擇器：$('.class')
標籤選擇器：$('div')
並集選擇器：$('div,p')
交集選擇器：$('div.Class')

層級選擇器（跟css選擇器用法一樣）
子代選擇器：$('ul > li')
後代選擇器：$('ul li')

過濾選擇器
:eq(index)：$('div:eq(2)') //獲取到div元素中索引號爲2的元素，index從0開始
:odd：$('div:odd') //獲取到div元素中索引號爲奇數的所有元素
:even：$('div:even') //獲取到div元素中索引號爲偶數的所有元素

篩選選擇器
children(selector)：$('ul').children('li') //相當於$('ul-li')
find(selector)：$('ul').find('li') //相當於$('ul li')
sibling(selector)：$('#first').sibling('li') //查找兄弟節點不包括自身
parent()：$('#first').parent() //查找父節點
eq(index)：$('div').eq(2) //相當於$('div:eq(2)')
next()：$('div').next() //下一個兄弟節點
prev()：$('div').prev() //上一個兄弟節點

jQuery類操作

addClass()： $('div').addClass('類名1 類名2 ...') //給所有div添加類 
removeClass()：$('div').removeClass('類名1 類名2 ...') //移除div指定的類，不加參數默認移除所有類
hasClass()：$('div').hasClass('類名') //判斷div是否含有指定的類
toggleClass()：$('div').toggleClass('類名') //如果元素有指定的類則移除，如果沒有則添加

jQuery動畫

show(speed,callback) //顯示元素，不加參數沒有動畫效果，display設置爲block
hide(speed,callback) //隱藏元素，不加參數沒有動畫效果，display設置爲none
slideDown(speed,callback) //滑入
slideUp(speed,callback) //滑出
slideToggle(speed,callback) //切換滑出/入
fadeIn(speed,callback) //淡入
fadeOut(speed,callback) //淡出
fadeToggle(speed,callback) //切換淡出/入
fadeTo(speed,to) //淡入到指定透明度

speed：執行動畫的時長
callback：動畫執行完畢後的回調函數

自定義動畫
$('div').animate(prop,speed,easing,callback)
prop：必選的對象，表示需要做動畫的屬性
speed：可選，執行動畫的時長
easing：可選，表示緩動還是勻速 linear swing
callback：可選，執行完畢後的回調函數

停止動畫
$('div').stop(true,false)
第一個參數：是否清除動畫隊列
第二個參數：是否跳轉到最終結果

 

jQuery部分方法

設置/獲取文本
①設置
$('div').text("設置文本") 
②獲取
$('div').text() //將獲取所有div的文本內容

設置/獲取樣式
①設置
設置單樣式
$('div').css('color','blue')
設置多樣式
$('div').css({
    'height':'100px',
    'width':'200px'
})
②獲取
$('div').css('color') //只能獲取到第一個div的樣式值

尺寸和位置操作
$('#Elem').width() //獲取寬度，不包括padding/margin/border
$('#Elem').width(value) //設置寬度，不包括padding/margin/border
$('#Elem').height() //獲取高度，不包括padding/margin/border
$('#Elem').height(value) //設置高度，不包括padding/margin/border

$('#Elem').innerWidth()/innerHeight() //返回元素寬度/高度，包括內邊距
$('#Elem').outerWidth()/outerHeight() //返回元素寬度/高度，包括內邊距和邊框
$('#Elem').outerWidth(true)/outerHeight(true) //返回元素寬度/高度，包括內邊距、外邊距和邊框
$(window).width()/heigth() //返回頁面可視區域寬高

$('#Elem').offset() //獲取一個對象，對象包括top和left的值,元素到document的距離
$('#Elem').position() //獲取一個對象，對象包括top和left的值，元素到定位父級的距離

獲取/設置滾動條位置
$('#Elem').scrollLeft()/scrollTop() //獲取元素內容/頁面（window）被捲曲出去的寬度/高度
$('#Elem').scrollLeft(value)/scrollTop(value) //設置元素內容/頁面（window）被捲曲出去的寬度/高度

獲取/設置表單值
①獲取
$('#txt').val()
②設置
$('#txt').val("設置的值")

jQuery屬性操作

非布爾屬性（不能操作布爾屬性）
$('#Elem').attr(屬性,屬性值) //設置/修改屬性，可以用對象設置多屬性
$('#Elem').attr(屬性) //獲取屬性值
$('#Elem').removeAttr(屬性) //移除屬性，可以同上移除多個屬性，屬性間用空格隔開

操作布爾屬性
$('#Elem').prop(布爾屬性) //獲取屬性值
$('#Elem').prop(布爾屬性,布爾值) //獲取屬性值

 

jQuery節點操作

$('div').html() //設置/獲取內容
①獲取
$('div').html() //不加參數
②設置
$('div').html(文本/html標籤) //會覆蓋原本內容

$() //創建節點
$div = $(<div>新創建的div</div>)
$('#first').append($div) //添加節點

添加/移動節點
$('#Elem').append($div) //添加到子節點最後一個位置
$('#Elem').prepend($div) //添加到子節點第一個位置
$('#Elem').before($div) //添加兄弟節點到#Elem前面
$('#Elem').after($div) //添加兄弟節點到#Elem後面
$($div).appendTo('#Elem') //添加到#Elem的最後一個子節點後面

刪除節點
$('#Elem').empty() //清空#Elem的所有子節點
$('#Elem').remove() //移除#Elem元素

克隆節點
$('#Elem').clone(true) //克隆#Elem,參數爲true則會克隆事件，默認是false

jQuery事件

事件註冊
$('#Elem').on('事件',函數) //簡單註冊事件，不支持動態註冊
$('#Elem-parent').on('事件','#Elem',函數) //委託註冊事件，支持動態註冊

<script>
	$(function(){
		//簡單註冊事件
		$('div').eq(0).on('click',function(){
			console.log('點擊了div標籤');
		})
		//委託事件
		$('div').eq(0).on('click','input',function(){
			console.log('點擊了input標籤');
		})
	});
</script>

事件解綁
$('#Elem').off('事件') //不給參數默認解綁所有事件

事件觸發
$('#Elem').trigger('事件') //觸發#Elem元素指定的事件，可觸發自定義事件

事件對象(e)
e.screenX/Y：觸發事件那一點距離屏幕最左上角的值
e.clientX/Y：觸發事件那一點距離可視區左上角的值
e.pageX/Y：觸發事件那一點距離頁面左上角的值
阻止事件冒泡：e.stopPropagation()
阻止默認行爲：e.preventDefaule()
獲取鍵盤按下的鍵：e.keyCode()

<script>
	$(function(){
		$('div').eq(0).on('click',function(e){
			console.log(e);
		})
	});
</script>

 

鏈式編程

使用條件：元素調用一個方法，這個方法有返回值，並且返回值是一個jQuery對象，就可以繼續調用jQuery方法

$('#Elem').end() //回到上一個狀態(上一個對象)

顯示迭代

<script>
	$(function(){
		$('li').each(function(index,elem){
			console.log(index) //每個div標籤的索引
    		console.log(elem) //每個div標籤，dom對象
		})
	});
</script>