CH07-JQuery事件二
本章目标
- 掌握表单事件的使用
- 掌握change事件的使用
- 掌握给元素绑定事件的使用
一、讲解内容
1、表单事件
当元素获得焦点时会触发focus事件，失去焦点时会触发blur事件，详见下表：
例：用户名文本框获得焦点时，文本框添加背景颜色，失去焦点时，文本框背景颜色还原添加一个背景颜色的样式
效果图：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <script src="js/jquery.min.js"></script>
<script>
$(function(){
$("#name").focus(function () {
$(this).addClass("bg");
});
$("#name").blur(function () {
$(this).removeClass("bg");
});
})
</script>
用户名：<input type="text" id="name" />
|
2、change事件
元素的值发生改变时，发生
该事件适用于select元素， input元素，textarea元素
例：设置下拉框在改变时，弹出对应的索引，后台值及文本
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <script src="js/jquery.min.js"></script>
<script>
$(function(){
$("#company").change(function () {
var index = "索引：" + $(this).find("option:selected").index() + "\n";
var value = "值：" + $(this).val()+"\n";
var text = "文本：" + $(this).find("option:selected").text();
alert(index+value+text);
});
})
</script>
<select id="company">
<option value="baidu">百度</option>
<option value="alibaba">阿里巴巴</option>
<option value="tencent">腾讯</option>
</select>
|
3、给元素绑定事件
bind()方法：给列表项，绑定一个点击事件，点击列表项时，弹出对应的文本
效果图：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <script src="js/jquery.min.js"></script>
<script>
$(function(){
$("#coffee li").bind("click", function () {
alert($(this).text());
});
})
</script>
<ul id="coffee">
<li>老镇</li>
<li>雀巢</li>
<li>江小白</li>
</ul>
|
绑定多个事件：
例：指定索引绑定移入移入事件
效果图：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <script src="js/jquery.min.js"></script>
<script>
$(function(){
$("#coffee li:eq(2)").bind("mouseover", function () {
$("p").show();
}).bind("mouseout", function () {
$("p").hide();
})
})
</script>
<ul id="coffee">
<li>老镇</li>
<li>雀巢</li>
<li>江小白</li>
</ul>
<p style="display:none;">水果味江小白:包含白葡萄味、卡曼橘味、混合水果味、蜜桃味等6款果味高粱酒</p>
|
**unbind()**：移除所绑定元素的事件
例：移出li元素点击事件
效果图：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <script src="js/jquery.min.js"></script>
<script>
$(function(){
$("#coffee li").bind("click", function () {
alert($(this).text());
});
$("input[name=event]").click(function () {
$("#coffee li").unbind("click");
});
})
</script>
<ul id="coffee">
<li>老镇</li>
<li>雀巢</li>
<li>江小白</li>
</ul>
<p style="display:none;">水果味江小白:包含白葡萄味、卡曼橘味、混合水果味、蜜桃味等6款果味高粱酒</p>
<input name="event" type="button" value="移除点击事件" />
|
注：bind方法只能给当前存在的元素绑定事件，对于事后采用JS等方式新生成的元素无效
例：点击添加新列表项 但是bind绑定的点击事件对新生成的元素无效
效果图：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| <script src="js/jquery.min.js"></script>
<script>
$(function(){
//给li元素绑定一个点击事件 点击列表项弹出对应的值
$("#coffee li").bind("click", function () {
alert($(this).text());
});
//找到input标签下name=event的属性
$("input[name=event]").click(function () {
//点击的时候移除li元素绑定的点击事件
$("#coffee li").unbind("click");
});
//点击btnAdd按钮给#coffee添加一个li元素
$("#btnAdd").click(function () {
$("#coffee").append("<li>星巴克</li>");
});
})
</script>
<ul id="coffee">
<li>老镇</li>
<li>雀巢</li>
<li>江小白</li>
</ul>
<input type="button" id="btnAdd" value="添加新列表项"/>
|
4、动态绑定事件on
on() 方法是 bind()方法的新的替代品。在被选元素及子元素上添加一个或多个事件处理程序。
适用于尚未创建的元素,可以给动态添加的元素加上绑定事件。
使用 off() 方法移除绑定的事件
例：给列表项绑定点击事件
效果图：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <script src="js/jquery.min.js"></script>
<script>
$(function(){
$("#coffee").on("click", "li",function () {
alert($(this).text());
});
})
</script>
<ul id="coffee">
<li>老镇</li>
<li>雀巢</li>
<li>江小白</li>
</ul>
|
5、只能执行一次的事件
one为每一个匹配元素的特定事件，绑定一个一次性的事件处理函数。
例：给列表项绑定点击事件
效果图：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <script src="js/jquery.min.js"></script>
<script>
$(function(){
$("#coffee").on("click", "li",function () {
alert($(this).text());
});
})
</script>
<ul id="coffee">
<li>老镇</li>
<li>雀巢</li>
<li>江小白</li>
</ul>
|
二、课后作业
1.需求说明：
文本框获得焦点时，文本框边框的显示效果（颜色）
改变文本框失去焦点时，文本框边框的颜色还原
效果图：
2.需求说明：
表格的编辑，支持键盘操作鼠标
点击数据单元格，变成编辑状态
按下回车键保存数据，按下取消键恢复原状
效果图：
3.选项卡效果：
鼠标移动到某个选项卡上面，改变选项卡的背景色为黑色
鼠标移动到某个选项卡上面,内容区的文本相应发生修改
效果图：
