jQuary學習 三 效果展示

2022-09-04 10:18:06 字數 3007 閱讀 5905

一、隱藏顯示

1.$(selector).hide(speed,callback);

2.$(selector).show(speed,callback);

可選的 speed 引數規定隱藏/顯示的速度,可以取以下值:"slow"、"fast" 或毫秒。

可選的 callback 引數是隱藏或顯示完成後所執行的函式名稱。

3.$(selector).toggle(speed,callback);(隱藏顯示之間的切換。)

可選的 speed 引數規定隱藏/顯示的速度,可以取以下值:"slow"、"fast" 或毫秒。

可選的 callback 引數是隱藏或顯示完成後所執行的函式名稱。

二、淡入淡出

fadein()用於淡入已經隱藏的元素(引數同上,可取slow,fast或者毫秒)

fadeout()用於淡出可見元素

fade toggle()方法可以在fadein和fadeout之間進行切換。

jquery fadeto() 方法允許漸變為給定的不透明度(值介於 0 與 1 之間)。

$(selector).fadeto(speed,opacity,callback);

必需的 speed 引數規定效果的時長。它可以取以下值:"slow"、"fast" 或毫秒。fadeto() 方法中必需的 opacity 引數將淡入淡出效果設定為給定的不透明度(值介於 0 與 1 之間)。可選的 callback 引數是該函式完成後所執行的函式名稱。

三、滑動

slidedown()方法用於向下滑動元素

slideup()方法用於向上滑動元素

jquery slidetoggle() 方法可以在 slidedown() 與 slideup() 方法之間進行切換。如果元素向下滑動,則 slidetoggle() 可向上滑動它們。如果元素向上滑動,則 slidetoggle() 可向下滑動它們。

四、動畫

jquery animate() 方法用於建立自定義動畫。

$(selector).animate(,speed,callback);

必需的 params 引數定義形成動畫的 css 屬性。

也可以定義相對值(該值相對於元素的當前值)。需要在值的前面加上 += 或 -=:

甚至可以把屬性的動畫值設定為 "show"、"hide" 或 "toggle":

預設地,jquery 提供針對動畫的佇列功能。這意味著如果您在彼此之後編寫多個 animate() 呼叫,jquery 會建立包含這些方法呼叫的"內部"佇列。然後逐一執行這些 animate 呼叫。

五、停止動畫

stop() 方法適用於所有 jquery 效果函式,包括滑動、淡入淡出和自定義動畫。

$(selector).stop(stopall,gotoend);

可選的 stopall 引數規定是否應該清除動畫佇列。預設是 false,即僅停止活動的動畫,允許任何排入佇列的動畫向後執行。

可選的 gotoend 引數規定是否立即完成當前動畫。預設是 false。

因此,預設地,stop() 會清除在被選元素上指定的當前動畫。

六、callback 函式在當前動畫 100% 完成之後執行。

在隱藏函式後面新增後繼函式引數,來達到callback效果。

七、鏈結技術(chaining)

舉例如下:$("#p1").css("color","red").slideup(2000).slidedown(2000);

八、捕獲內容和屬性:

text() - 設定或返回所選元素的文字內容

html() - 設定或返回所選元素的內容(包括 html 標記)

val() - 設定或返回表單字段的值

三者在函式後面加相應引數即可完成文字輸出等操作,同時,其**函式有兩個引數:被選元素列表中當前元素的下標,以及(原始)舊的值,然後以函式新值返回您希望使用的字串。

attr() 方法用於獲取屬性值,屬性值必須在後面的引數中。

attr設定屬性可以多個設定,且設定時需要存在兩個引數,並且可知attr的**函式使用時和其他三個相同引數設定。

九、新增元素

prepend() - 在被選元素的開頭插入內容

after() - 在被選元素之後插入內容

before() - 在被選元素之前插入內容

十、刪除元素

remove() - 刪除被選元素(及其子元素)

remove接受jquary選擇器的引數,則變成乙個過濾刪除操作。

empty() - 從被選元素中刪除子元素

十一、jquaryのcss操作

addclass() - 向被選元素新增乙個或多個類

removeclass() - 從被選元素刪除乙個或多個類後面如果有多個類引數,類之間使用空格隔開即可,不需使用逗號和分號。前邊的$("x","y","z")中xyz之間使用逗號分隔開。

toggleclass() - 對被選元素進行新增/刪除類的切換操作

css() - 設定或返回樣式屬性返回css的值與設定css的值,其中設定css的值時,可以同時多值設定,但需要在每次設定後面新增乙個逗號。

十二、jquary尺寸

width()

height()

innerwidth()

innerheight()

outerwidth()

outerheight()

設定或返回元素的高度和寬度。

專案效果展示

1.校園呵護系統效果展示 人臉檢測跟蹤 人臉 表情識別 該系統只是乙個效果展示,基於這項技術可以開發與交通標識識別 車牌號識別 刷臉支付 安全帽檢測 口罩檢測等和目標跟蹤檢測以及重新識別相關的技術場景的應用,本實現使用的跟蹤演算法是kcf,也可以改為kalman濾波器。2.車道線檢測效果展示 低難度...

輪播效果展示

由於本人新手 還沒學js 我是用bootstrap來做的 很簡單 直接把那坨 複製到 webstorm裡面 下面我會用我的某一次作業 來做實際解釋裡面的某部分各代表什麼意思 由於這個 到底什麼意思 老師沒有教過 我自行理解 有錯的地方 望海涵 男友秋裝上新 這個地方 就是個輪播 一共3個小點 也就是...

Qt動畫效果展示

該程式使用應用程式單視窗,主視窗繼承於qmainwindow 主視窗有5個qtoolbutton部件 視窗底部的四個以及視窗 的乙個 單擊視窗底部的qtoolbutton部件可以使視窗 的那個qtoolbutton有動畫效果 具體效果請自己嘗試。1 生成部件以及定位部件 在主視窗的建構函式中生成部件...