JQuery的基本操作及案例

2022-09-11 21:09:28 字數 2026 閱讀 2532

jquery是乙個快速、簡潔的j**ascript框架,本質上就是一些js檔案,封裝了js的原生**。

一、jquery的dom操作

1. 內容操作

1.html(): 獲取/設定元素的標籤體內容   內容

--> 內容

2.text(): 獲取/設定元素的標籤體純文字內容   內容

--> 內容

3.val(): 獲取/設定元素的value屬性值

2. 屬性操作

1. 通用屬性操作

1.attr(): 獲取/設定元素的屬性

2. removeattr():刪除屬性

3.prop():獲取/設定元素的屬性

4. removeprop():刪除屬性

* attr和prop區別?

1. 如果操作的是元素的固有屬性,則建議使用prop

2. 如果操作的是元素自定義的屬性,則建議使用attr

2. 對class屬性操作

1. addclass():新增class屬性值

2. removeclass():刪除class屬性值

3.toggleclass():切換class屬性

* toggleclass("one"): 

* 判斷如果元素物件上存在class="one",則將屬性值one刪除掉。  如果元素物件上不存在class="one",則新增

4.css():改變樣式

二、jquery動畫的三種顯示方式:

1. 預設顯示和隱藏方式

1.show([speed,[easing],[fn]])

引數:1. speed:動畫的速度。三個預定義的值("slow","normal", "fast")或表示動畫時長的毫秒數值(如:1000)

2. easing:用來指定切換效果,預設是"swing",可用引數"linear"

* swing:動畫執行時效果是 先慢,中間快,最後又慢

* linear:動畫執行時速度是勻速的

3. fn:在動畫完成時執行的函式,每個元素執行一次。

2.hide([speed,[easing],[fn]])

3.toggle([speed],[easing],[fn])

2.滑動顯示和隱藏方式

1.slidedown([speed],[easing],[fn])

2.slideup([speed,[easing],[fn]])

3.slidetoggle([speed],[easing],[fn])

3.淡入淡出顯示和隱藏方式

1.fadein([speed],[easing],[fn])

2.fadeout([speed],[easing],[fn])

3. fadetoggle([speed,[easing],[fn]])

三、案例:廣告顯示和隱藏

需求:1. 當頁面載入完,3秒後。自動顯示廣告

2. 廣告顯示5秒後,自動消失。

分析:1. 使用定時器來完成。settimeout (執行一次定時器)

2. 分析發現jquery的顯示和隱藏動畫效果其實就是控制display

3. 使用  show/hide方法來完成廣告的顯示

正文部分

jquery基本操作

終於像擠牙膏一樣開始了在的第一篇隨記,一直想寫博,又都沒時間 其實都是忽悠自已 經歷了乙個電商平台的開發,真心很疲憊,想休息下,但我不敢。今天若休息,明天呢,最終會發現一直是在自已忽悠自己。以前經常看別人的部落格,某些寫的真的很好,是書本上根本看不到的,現在我也要用部落格來記錄下我的所學所悟。以下是...

jquery 基本操作

id id選擇器 div 元素選擇器 classname 類選擇器 classname,classname1,id1 組合選擇器 id classname 子元素選擇器 id classname 後代元素選擇器 id classname 緊鄰下乙個元素選擇器 id classname 兄弟元素選擇器...

jQuery基本操作

jquery新增標籤屬性 div attr class 返回文件中所有div元素的class屬性值 div attr class box 設定所有div的class屬性值為box div removeattr class 刪除文件中所有div的class屬性 不建議使用 img removeprop...