jQuery基礎內容梳理

2021-06-29 10:23:11 字數 3487 閱讀 4482

jquery選擇器返回的是jquery包裝集,這個包裝集只能只用jquery自己的方法,而不能用普通dom物件的方法。可以把包裝集看成是乙個陣列,裡面的元素是匹配到的dom節點物件,這個陣列裡可以只有乙個元素,也可以有多個元素,比如用id選擇器返回的包裝集就只有乙個元素,而用class選擇器返回的包裝集就可能有多個物件,這也就是說可以用

$( " # id " )[ 0 ] 得到普通的dom物件,然後就可以用普通js語句對其進行操作。由此可見,jquery包裝集與dom物件是可以相互轉化的:如果要把包裝集物件轉化為js中普通dom物件,除了上面說的 $( " # id " )[ 0 ] 的方法,還可以用get( )方法,如 

$( " #id " ).get( 0 ) 也可以得到普通dom物件;如果要把普通dom物件轉換為jquery包裝集物件,直接用$( "  " )包裝起來即可,如 

var new = $( " document.getelementbyid("  ") " ); 。當然一般情況下我們更願意用jquery的簡便方法,如果要具體選擇某個元素,我們可以用

eq( )方法,其功能類似與get( )方法,但eq( )返回的還是jquery包裝集。

下面是一些常用的jquery選擇器:

1.id選擇器: $( " # id " )  

2. 元素選擇器:  $( " div " )   括號裡標記名

3.類名選擇器:  $( " .class " )

4.復合選擇器:  $( "select1  ,  select2  ,  select3 " )   括號裡是多個選擇條件,用逗號隔開,最後返回的是選擇結果的並集而不是交集

5.萬用字元:$( " * " )  表示頁面上所有元素

6.祖先子孫選擇器:$( " div  span " )  括號裡前乙個selector是祖先後乙個子孫,他們之間可以跨代不一定是父子關係,匹配出的是子孫元素

7.父子選擇器:$( " div  > span " )   這裡必須是父子關係,匹配出的是子代元素

8.前後緊挨選擇器:  $( " p + b " )  匹配緊挨在p元素後面的b元素

8.前後非緊挨選擇器:  $( " p ~ b  " )  匹配在p後面的b元素,不要求緊挨

9.過濾選擇器:   $( " tr : first " )  匹配**中的第一行

$( " tr : last " )  匹配**中的最後一行

$( " tr : even " )  匹配行數為偶數的行

$( " tr : odd " )  匹配行數為奇數的行

10.屬性選擇器:  $( " div[ name ] " ) 匹配有name屬性的div

$( " div[ name ] = ' myname '  " ) 匹配name為myname的div

$( " div[ name ] ! = ' myname '  " ) 匹配name不為myname的div

$( " div[ name ] * = ' myname '  " ) 匹配name含有myname的div

$( " div[ name ] ^ = ' myname '  " ) 匹配name為myname的div

$( " div[ name ] $ = ' myname '  " ) 匹配name以myname結尾的div

11.表單選擇器:   $( " :input " )  匹配所有input元素

$( " form  :input " ) 匹配form中所有input元素,form與:中要有乙個空格

$( "  :button " ) 匹配button元素

元素的內容是指起始標記到結束標記之間的內容,元素的內容又分為文字內容和html內容,其中文字內容是不包含html標記的純文字內容,html是指包含html標記的所有內容。元素的值是指元素的value屬性。jquery中通過

text( )獲取文字內容,通過

text( " val " )修改文字內容,通過

html( )獲取html內容,通過

html( " val " )修改html內容,如果val中含有html標記,則text( " " )會把html標記當作純文字寫入,而html( " " )會把html標記解析後寫入。另外,通過

var( )返回元素的值,通過

var( " val " )修改元素的值

1.插入節點

$( " #b " ).prepend( " a

" )   向b中插入乙個p元素,插入在最前面 ,插入的只能是html**,不能是頁面上現有的元素

$( " #b " ).prependto( "#a " )   把b插入a中,並放在最前面,b這個元素既可以是現有元素,也可以是html**

以上四種方式都是插入元素內部,前兩個中b是被插入元素,後兩個中b是待插入元素

下面是在元素外部插入的方法:

$( " #b " ).after( " a

" )$( " #b " ).before( " a

" )$( " #b " ).insertafter( "#a " )

$( " #b " ).insertbefore( "#a " )

以上四種的分別對應插入內部的四種方法,只不過這是插入在元素外部的方法

2.刪除節點

jquery有兩種刪除節點的方式,remove( )是刪除這個元素,empty( )是刪除這個元素裡所有子元素,並不刪除這個元素自身

3.替換節點

jquery提供兩種替換方法,( " " ).replaceall( " #b " )是用前面替換後面,而( " #b" ).replacewith( " " )是用後面的替換前面

1.  

attr( " id " )   返回屬性的值,括號裡是元素的屬性名

2.  

attr( " value " , " 123 " )  修改屬性的值,括號裡前面是屬性名,後面是希望的屬性的值

3.  

attr( 名 : " 值 "  ,  名 : " 值 "  , 名 : " 值 " )  同時修改多個屬性

4. removeattr( " id " )   刪除乙個屬性

1.通過增加class改變css樣式

addclass( " 類名 " )  為匹配的元素新增乙個指定的類名,如果要刪除多個類名,用空格間隔即可

removeclass( " 類名 " )  為匹配元素刪除制定的類名

2.修改單個css樣式

css( " color " )  返回相應css屬性值

css( " color "  ," #ffffff " )  修改相應的css屬性值

1. $(document).ready(function())

這是頁面載入響應,只要dom元素載入完畢就可以呼叫

2.為元素繫結事件可以用

$( " " ).bind( " click " , function() )

實現,也可以直接

$( " " ).click(  function() )

3.為元素繫結一次性事件 $( " " ).one( "click", function() )

jQuery基礎內容

fadeto time,0.6 指定透明度達到某個值就停止 animate time 自定義動畫 如需對位置進行操作,要記得首先把元素的 css position 屬性設定為 relative fixed 或 absolute!css屬性值逐漸變換,color不可用 delay 1000 動畫延遲執...

jQuery基礎知識梳理

語法 jquery語法是為html元素的選取編制的,可以對元素執行某些操作。基礎語法 selector action 美元符號定義jquery 選擇符 selector 查詢 和 查詢 html元素 jquery的action 執行對元素的操作 文件就緒函式 為防止文件在完全載入之前裕興jquery...

Jquery基礎知識點梳理

1 第乙個jq程式 a jq物件和dom物件的方法不能混用 b dom物件轉換成jq物件 dom jq物件轉換成dom物件jq 0 轉換之後方法就可以使用了 2 jq選擇器 基本選擇器 body 標籤選擇器 btn id選擇器 class 類選擇器 p odd 奇偶行選擇器 p even p fir...