jQuery——標籤、事件、動畫

一、查詢標籤

1.1 基本選擇器

// id選擇器
$('#d1') 
// class選擇器
$('.c1')
//  標籤選擇器
$('div')

2.2 組合選擇器

// 查詢含有c1樣式類的span標籤
$('span.c1')
// 查詢div、span、p標籤
$('div,span,p')
// 查詢id是d1或者class含有c1或者含有span的標籤
$('#d1,.c1,span')

1.3 層級選擇器

// 查詢div裡面所有的後代p標籤
$('div p')
// 查詢div裡面的子標籤p
$('div>p')
// 查詢div同級下緊挨著的p
$('div+p')
// 查詢div同級下所有的p
$('div~p')
 

1.4屬性選擇器

// 查詢含有username屬性名的標籤
$('[username]')
// 查詢input含有username屬性名並值等於maria的標籤
$('input[username="maria"]')

1.5 基本選擇器

// 第一個
:first
// 最後一個
:last
// 索引等於index的那個元素
:eq(index)
// 匹配所有索引值為偶數的元素
:even
// 匹配所有索引值為奇數的元素
:odd
// 匹配所有大於給定索引值的元素
:gt(index)
// 匹配所有小於給定索引值的元素
:lt(index)
// 移除所有滿足not條件的標籤
:not(元素選擇器)
// 取所有包含一個或多個標籤在其內的標籤(從後代元素找)
:has(元素選擇器)
 

1.6 表單選擇器

$(':text')
$(':password')

$(':checked')		checked與selected都會找到
$(':selected')		selected

1.7 篩選器方法

//
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")
$("#id").parent()
$("#id").parents()  // 查詢當前元素的所有的父輩元素
$("#id").parentsUntil() // 查詢當前元素的所有的父輩元素，直到遇到匹配的那個元素為止。
$("#id").children();// 兒子們
$("#id").siblings();// 兄弟們
 

二、操作標籤

2.1 class操作

addclass()
removeClass()
hasClass()
toggleClass()

2.2位置操作

$(window).scrollTop()

2.3文字操作

text()					innerText
html()					innerHTML
val()					value
jQuery物件[0].files	  files[0]

2.4建立標籤

document.createElement()  $('<a>')

2.5屬性操作

attr()/removeAttr()					 xxxAttribute()
attr針對動態變化的屬性獲取會失真
prop('checked') prop('selected')

2.6文件處理

$(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B
$(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B

$(A).after(B)// 把B放到A的後面
$(A).insertAfter(B)// 把A放到B的後面
$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面

remove()// 從DOM中刪除所有匹配的元素。
empty()// 刪除匹配的元素集合中所有的子節點。

三、jQuery事件

JS繫結事件
	標籤物件.on事件名 = function(){}
jQuery事件繫結
	方式1:
		jQuery物件.事件名(function(){})
 	方式2:
    	jQuery物件.on('事件名稱',function(){})
 	ps:預設就用方式1 不行了再用方式2
ps:補充
    clone屬性
    	clone(true)  預設不克隆事件 加true就可以

3.2事件相關補充

1.取消後續事件
	事件函式的最後return false即可
2.阻止事件冒泡
	事件函式的最後return false即可
3.等待頁面載入完畢再執行程式碼
	$(function(){})				   縮略寫法
 	$(document).ready(function(){})  完整寫法
4.事件委託
	主要針對動態建立的標籤也可以使用繫結的事件
 	$('body').on('click','button',function(){})
 	將body內所有的單擊事件委託給button標籤執行

3.3jQuery動畫

// 基本
show([s,[e],[fn]])
hide([s,[e],[fn]])
toggle([s],[e],[fn])
// 滑動
slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])
// 淡入淡出
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
fadeToggle([s,[e],[fn]])
// 自定義（瞭解即可）
animate(p,[s],[e],[fn])