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...