1. 程式人生 > >小白學前端-----------jQuery

小白學前端-----------jQuery

一.jQuery

1.jQuery基本使用

1.1文件就緒事件

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

//簡寫
$(function(){
    code...
})

1.2 jQueryDOM和原生DOM

jQuery  通過$(選擇器) 獲取元素,該元素物件是jqueryDOM,,與原生DOM不同
jQeryDOM是在原生DOM基礎上進行的封裝,本質上是由原生DOM組成的類陣列物件
可以通過所有得到原生DOM
$(原生DOM)可以轉為jQuery DOM

2.jQuery選擇器

2.1基本選擇器

同CSS3基本選擇器

2.2層級選擇器

同CSS3的層級選擇器

2.3基本篩選器

  • :first
  • :last
  • :eq(n) 從0開始
  • :odd 基數
  • :even 偶數
  • :not(選擇器)
  • :lt() 小於
  • :gt() 大於

2.4內容選擇器

  • :contains(text) 包含指定文字的元素
  • :has(選擇器) 包含指定子元素的元素
  • :empty 沒有子元素且沒有內容
  • :parent 有子元素或者有內容的li

2.5可見性選擇器

  • :hidden
  • :visible

2.6屬性選擇器

  • [attr$=val] 屬性值不等於val jquery獨有

  • [attribute]

  • [attribute=value]

  • [attribute!=value]

  • [attribute^=value]

  • [attribute$=value]

  • [attribute*=value] 包含

  • [attrSel1][attrSel2][attrSelN]

    ​ 少了~= 和|=

2.7子元素選擇器

:first-child
:first-of-type
:last-child
:last-of-type
:nth-child
:nth-last-child()
:nth-last-of-type()
:nth-of-type()
:only-child
:only-of-type

2.8表單選擇器

:input    所有表單控制元件  input,select,textarea,button
:text
:password
:radio
:checkbox
:submit
:reset
:button
:file

2.9表單物件選擇器

:enabled
:disabled
:checked
:selected

3.jquery篩選器(都是物件方法)

3.1過濾

  • first()
  • last()
  • eq(n)
  • filter(選擇器)
  • not(選擇器)
  • has(選擇器)
  • slice(start,end) 顧頭不顧尾

eq(index|-index)        獲取當前鏈式操作中第N個jQuery物件,返回jQuery物件
first()                    獲取第一個元素
last()                    獲取最後個元素
filter(expr|obj|ele|fn)    篩選出與指定表示式匹配的元素集合。
not(expr|ele|fn)        從匹配元素的集合中刪除與指定表示式匹配的元素
has(expr|ele)            保留包含特定後代的元素,去掉那些不含有指定後代的元素。
slice(start,[end])        選取一個匹配的子集

3.2查詢

children([expr])        取得一個包含匹配的元素集合中每一個元素的所有子元素的元素集合。
find(e|o|e)                搜尋所有與指定表示式匹配的元素。這個函式是找出正在處理的元素的後代元素的好方法

parent([expr])            取得一個包含著所有匹配元素的唯一父元素的元素集合
parents([expr])            取得一個包含著所有匹配元素的祖先元素的元素集合(不包含根元素)
parentsUntil([e|e][,f]) 查詢當前元素的所有的父輩元素,直到遇到匹配的那個元素為止
offsetParent()            返回第一個匹配元素用於定位的父節點。

next([expr])            取得一個包含匹配的元素集合中每一個元素緊鄰的後面同輩元素的元素集合
nextAll([expr])            查詢當前元素之後所有的同輩元素
nextUntil([e|e][,f])    查詢當前元素之後所有的同輩元素,直到遇到匹配的那個元素為止
prev([expr])            取得一個包含匹配的元素集合中每一個元素緊鄰的前一個同輩元素的元素集合
prevall([expr])            查詢當前元素之前所有的同輩元素
prevUntil([e|e][,f])    查詢當前元素之前所有的同輩元素,直到遇到匹配的那個元素為止
siblings([expr])        取得一個包含匹配的元素集合中每一個元素的所有唯一同輩元素的元素集合

closest(e|o|e)            1.7* 從元素本身開始,逐級向上級元素匹配,並返回最先匹配的元素

3.3串聯

add(e|e|h|o[,c])           1.9* 把與表示式匹配的元素新增到jQuery物件中
andSelf()                1.8- 加入先前所選的加入當前元素中
addBack()                  1.9+ 新增堆疊中元素集合到當前集合,一個選擇性的過濾選擇器。
contents()                查詢匹配元素內部所有的子節點(包括文字節點) 瞭解
end()                    回到最近的一個"破壞性"操作之前