q9俱乐部

書名： 15天學會jQuery編程與實戰（視頻教學版）（Web前端技術叢書）
作者名：劉鑫
本章字數： 399字
更新時間： 2020-11-28 16:21:48

4.1 添加或刪除樣式

jQuery提供了addClass()方法用來向元素添加一個或多個類，同時提供了removeClass()方法從元素刪除一個或多個類。兩個方法的使用比較簡單，我們舉例進行說明。在表單中一般都會擁有文本框、密碼框和文本域等標簽元素，在實際開發中通常使用焦點事件改變標簽的樣式，讓控件突出顯示。該種效果可以極大地提升用戶體驗，使用戶的操作可以得到及時反饋。

【示例4-1】form_focus.html

        01         <form >
        02               <fieldset>
        03                 <legend>登錄頁面</legend>
        04                      <div>                                          <! —用戶文本框-->
        05                           <label  for="username">用戶：</label>
        06                                <input id="username" type="text" />
        07                          </div>
        08                      <div>                                           <! --密碼文本框--
        09                           <label for="pass">密碼：</label>
        10                                <input id="pass" type="password" />
        11                          </div>
        12               </fieldset>
        13         </form>

設置一個類樣式。作為標簽突出顯示的樣式，具體代碼如下：

        .focus {
          border: 1px solid #f00;
          background: #fcc;
        }

編寫jQuery代碼，實現在標簽觸發焦點事件使用上述樣式，具體代碼如下：

        01    $(function(){
        02        $(":input").focus(function(){                          //獲取焦點
        03               $(this).addClass("focus");                       //添加樣式
        04         })
        05        .blur(function(){                                         //失去焦點
        06               $(this).removeClass("focus");                    //刪除樣式
        07         });
        08    })

在上述代碼中，為<input>標簽綁定了獲取焦點事件focus和失去焦點事件blur。獲取焦點后，添加focus類樣式；如果失去焦點，就移除focus類樣式。

在瀏覽器中運行頁面，效果如圖4.1所示。單擊用戶文本框，獲取焦點，效果如圖4.2所示。

圖4.1 加載頁面

圖4.2 標簽突出顯示

官术网_书友最值得收藏!

15天學會jQuery編程與實戰（視頻教學版） （Web前端技術叢書）

4.1 添加或刪除樣式

15天學會jQuery編程與實戰（視頻教學版）（Web前端技術叢書）