jQuery整理筆記七 幾個經典表單應用

2022-08-02 09:45:10 字數 2005 閱讀 1349

1、文字框獲得(失去)焦點

當文字框獲得輸入焦點時,將該文字框高亮顯示,算不得乙個應用,僅僅是乙個小技巧,能夠提高使用者體驗。

效果圖:

2、elastic彈性文字域

elastic是一款功能專一的表單外掛程式,他能夠控制頁面內表單域(

效果圖:

我們最初設定的標籤的rows屬性值為2 ,隨著文字內容的增多高度會自己主動新增。當然了,隨著內容的降低也能夠高度降低的。

3、autotab自己主動tab文字框

autotab也是一款功能專一的表單外掛程式,它提供了自己主動跳格的功能,當使用者輸入的字元數一旦超過已定義的最大長度,則會依據事先設定的目標自己主動跳轉到對應元素上。省卻了

使用者按【tab】鍵的麻煩。最典型的應用就是輸入ip位址、軟體啟用碼等地方了,我們做的web專案中也有非常多地方能夠用到這外掛程式。對於提高使用者體驗還是非常有幫助的。

除了能夠限定輸入長度外,還能夠通過autotab_filter()方法限定輸入的字元型別,這種方法還能過濾大寫、小寫、空格、字母等。詳細的用到了現查吧。

假設將上面的js改成:

$(function());

$('#autotab :input').autotab_magic().autotab_filter('numeric');

})

就是僅僅能輸入數字了。

4、passwordstrength密碼強度指標

passwordstrength外掛程式可以依據使用者輸入的password,以圖形化方式顯示password的強度。

上例用到乙個:

執行效果圖:

5、formtowizard表單填充嚮導

這個是什麼意思呢?事實上我們實際見的也非常多,有非常多站點填寫註冊資訊的時候是分步進行的,例如說,先填寫個人資訊,然後再填寫工作資訊...然後一起提交。這就避免了龐

大的資訊量都在乙個頁面上進行填寫。

效果圖:

6、checkbox核取方塊(全選反選等操作)

曾經經經常使用。不說了。

7、下拉框的應用

這回先看個圖:

曹操曹昂

曹丕曹彰

曹植曹熊

曹仁曹洪

曹休曹真

曹爽 選中加入到右邊》

所有加入到右邊》 曹芳

《選中刪除到左邊

《所有刪除到左邊

**實現的功能:

1)、將選中的選項加入給對方

2)、將所有選項加入給對方

3)、雙擊某個選項將其加入給對方

jQuery 學習筆記之七 jQuery 動畫

jquery中的動畫 一 show 和hide 方法 show 方法和hide 方法是jquery中最基本的動畫方。呼叫hide 會將元素的display樣式改為 none element.css display none 通過css方法隱藏元素。呼叫show 方法將元素的dispaly樣式設定為先...

jQuery原理整理筆記5

button click function 新增節點2,刪除節點 remove expr 刪除指定元素 empty 刪除指定元素的內容和子元素,指定元素自身不會被刪除 datach expr 刪除指定元素 button click function 刪除節點 我是div 我是段落 3,替換節點 替換...

jQuery學習筆記(五)JQ複習整理

jq層級選擇器 1,find 找到索引的子代 2,children 找到一級子代 3,next 找到下乙個兄弟元素 4,nextall 找到下面所有的兄弟 5,prev 找到上乙個兄弟 6,prevall 找到上面所有的兄弟 7,nextuntil 找到下面的所有兄弟,知道乙個元素為止 8,prev...