上QQ阅读APP看书，第一时间看更新
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 标签突出显示