JQuery學習筆記

2022-09-24 05:15:09 字數 4351 閱讀 8793

引入

src標籤

dom物件與

jquery

包裝物件

只有jq物件能使用

jq方法,

$(xx)

把dom

物件包起來

基礎選擇器

id選擇器    #id       $(「#id」)           選擇id為指定值的元素物件

(多個返回陣列

)類選擇器     .class       $(「.class」)          選class為指定值的元素物件

元素選擇器   標籤名/元素名    $(「標籤/元素」) .       所有指定標籤

.通用選擇器   *         $(「*」)            頁面中所有元素物件

組合選擇器   選擇器1,選擇器

2,... $(「選擇器1,選擇器

2」)     指定選擇器中的元素物件

層次選擇器

後代選擇器

格式 父元素

指定元素  (空格隔開

)例項 $(「父元素

指定元素」)

選擇 父元素的所有指定元素(包含第一代、第二代等

)子代選擇器

格式 父元素》指定元素

(大於號隔開

)例項 $(「父元素》指定元素」)

選擇 父元素的所有第一代指定元素

相鄰選擇器

格式 元素+指定元素

例項 $(「元素+指定元素」)

選擇 元素的下乙個指定元素(只找下乙個,不存在則獲取不到

)同輩選擇器

格式 元素~指定元素

例項 $(「元素+指定元素」)

選擇 元素的下乙個指定元素(找到有為止

)表單選擇器

表單選擇器       :input   查詢所有的input元素

:$(「:input」)   會匹配所有的input textarea select button

文字框選擇器   :text    ...              ...

密碼框選擇器   :password  ...

單選鈕選擇器   :radio  ...

多選鈕選擇器   :checkbox

提交鈕選擇器   :sunmit

影象鈕選擇器   :image

重置鈕選擇器   :reset

檔案域選擇器   :file

按鈕選擇器    :button

操作元素的屬性

屬性的分類

固有屬性:元素本身就有的屬性

(id name class style value...)

返回值是boolean的屬性

:checked selected disabled

自定義屬性:使用者自己定義的屬性

attr()和

prop()

的區別1.如果是固有屬性,

attr()

和prop()

都能操作

2.自定義屬性,

attr()

可操作,

prop()

不能操作

3.返回

boolean

的屬性若設定了屬性,attr()返回具體的值,

prop()

返回true

若未設定屬性,attr()返回

undefined

,prop()

返回false

內容1.獲取屬性 attr(「屬性名」) prop(「屬性名」)

2.設定屬性 attr(「屬性名」 , 」屬性值」) prop(「屬性名」 , 」屬性值」)

3.移除屬性 removeattr(「屬性名」);

總結如果屬性的型別是boolean,則使用

prop()

方法,否則使用

attr()

方法操作元素的樣式

attr(「class」)       獲取元素的樣式名

attr(「class」,」樣式名」)   設定元素的樣式 (設定的話原本的會被覆蓋

)addclass(「樣式名」)     新增樣式(在原來的基礎上新增,原有的保留,重複的以最後一次為準

)css(「class」)       新增具體的樣式(行內樣式

)css(「具體樣式名」,』』樣式值」);              設定單個樣式

css();   設定多個樣式

removeclass(「樣式名」) 移除樣式

操作元素的內容

操作元素的內容

html()         獲取元素的內容,包含html標籤

(非表單元素

)html(「內容」)     設定元素的內容,包含html標籤

(非表單元素

)text()        獲取元素的純文字內容,不識別html元素

(非表單元素

)text(「內容」)      設定元素的純文字內容,不識別html元素

(非表單元素

)val()         獲取元素的值(表單元素

)val(「值」)        設定元素的值(表單元素

)表單元素

文字框text 密碼框

password

單選框radio

核取方塊checkbox

隱藏域hidden

文字域textarea

下拉框select

非表單元素

div、

span

、 h1~h6

、 table

、 tr

、 td

、 li、 p

等建立元素和新增元素

建立元素

$(「內容」)

新增元素

1.前追加子元素

2.後追加子元素

3.前追加同級元素

4.後追加同級元素

注:在新增元素時,如果元素本身不存在(新建的元素),此時會將元素追加到指定位置

如果元素本身存在(已有元素

),會將原來元素直接剪下設定到指定位置

刪除和遍歷元素

刪除元素

remove();

刪除元素及對應的子元素,標籤和內容一起刪除

指定元素.remove();

empty();

清空元素內容,保留標籤

指定元素empty();

遍歷元素

each()

$(selector).each(function(index,element))

引數function為遍歷時的**函式

index為遍歷元素的序列號,從0開始

element是當前的元素,此時是

dom元素

ready載入事件

ready載入事件

預載入事件

當頁面的dom結構載入完畢後執行

類似於js中的

load

事件ready事件可以寫多個

語法:

$().ready(function

())

簡寫

$(function

())

繫結事件

bind繫結事件

為被選元素新增乙個或多個事件處理程式,並規定事件發生時的執行函式

語法:

$(selector).bind(

eventtype[,eventdata],

handler(eventobject)

);

eventtype:是乙個字串型別的事件型別,就是你需要繫結的事件

[,eventdata]:傳遞的引數,格式:(名

:值,名

2:值2)handler(eventobject)該事件觸發執行的函式

繫結單個事件

bind繫結

$(「元素」).bind(「onclick」,function());

直接繫結

$(「元素」).事件名

(function());

繫結多個事件

bind繫結

1.多事件同乙個函式

指定元素.bind(「事件

事件2 事件

3」,function())

2多事件並設定對應函式

指定元素.bind(「事件」,function()).bind(「事件2」,function());

3.多事件並設定對應函式

指定元素.bind(,

"事件2":

function

()})

直接繫結

指定元素.事件名

(function()).事件名

(function());

後續缺ajax(在ajax中統一整理)

jsajax

jqajax

jquery學習筆記

判斷checkbox是否被選中if attr checked true 檢查元素是否存在 if tt length 0 if tt 0 檢查元素是否隱藏 alert dvtest is visible 判斷元素顯示或隱藏狀態 多選框操作 獲取一組radio被選中項的值 var item input ...

Jquery 學習筆記

text 和 val 的區別 text 方法是取得所有匹配元素的內容。結果是由所有匹配元素包含的文字內容組合起來的文字。這個方法對html和xml文件都有效。獲取span,div p之類才用text 或html 方法。例子 b a p text 將得到 ba 單行文字不能用text 方法獲得值,必須...

Jquery學習筆記

1.給一組相同的css加事件,要使用bind,live在新的版本已經過期。testcss bind click function e else 未選中 3.改變checkbox選中狀態 mycheckbox prop checked true mycheckbox prop checked fals...