任务视频V2.0

任务视频V1.0

知识点

事件绑定

在JavaScript的学习中，我们掌握了很多常用的事件：click、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、change、select、submit、keydown、keypress、keyup、blur、focus、load、resize、scroll、error等。

jQuery 通过.bind()方法来为元素绑定这些事件，bind方法的语法如下：

$(selector).bind(type， [data]，function)

其中：

• type 表示一个或多个类型的事件名字符串；

• [data]是可选的，作为event.data 属性值传递一个额外的数据，这个数据是一个字符串、一个数字、一个数组或一个对象；

• function表示绑定到指定元素的处理函数。

事件移除

有时候事件执行完了，想取消事件的效果可以通过一定的办法来处理。比如bind()方法，可以通过unbind()方法来移除事件的效果。unbind()方法语法如下：

$(selector).unbind(type， [data]，function)

简写事件

为了使开发者更加方便的绑定事件，jQuery 封装了常用的事件以便节约更多的代码。我们称它为简写事件，常用的简写事件如表所示。                                                                                                                            

教学课件V2.0

教学课件V1.0

微博字数统计

任务描述

在页面中，允许用户在文本域输入100个字符，当用户每输入一个字符，提示文字则显示还可以输入多少个字符，如图所示，当用户输入的字符长度超过100时，提示用户输入的字符超长了，并使文本域不可用。

任务分析

在页面统计用户输入的字数，可以采用以下步骤：

1. 完成静态页面设计，标识文本域和提示部分。

2. 加载DOM后添加处理函数。

3. 按键弹起事件触发时，统计文本域中字符长度。

4. 在提示字符数处显示还可以输入（100-文本域长度）个字符，此处添加判断，若用户输入长度大于100时，提示用户输入的字符超长了，并通过attr方法设置文本域为只读。

任务实现

script type="text/javascript"src="js/jquery-1.11.1.min.js"></script>

<script language="javascript">

$(document).ready(function(){

   var text=$("#edit_myfrom textarea").val();    //获取文本域内容

   var counter=text.length;                                 //获取文本域内容长度

   $("#numtj var").text(100-counter);                 //提示还有多少

   $(document).keyup(function() {                             //按键弹起时触发

        var text=$("#edit_myfromtextarea").val();    //重新获取文本域内容

        var counter=text.length;                                 //重新获取文本域内容长度

                if(counter>=100)                                                   

          {

                $("#numtj var").text("对不起，输入的字符超长了！");//文本域长度大于100时提示

                $("#edit_myfromtextarea").attr("readonly"，true);//设置文本域为只读

          }

                else

                $("#numtjvar").text(100-counter);

   });

});

</script>

根据所给素材，完成如图所示的页面，文本框获得焦点时提示文字消失，如果用户没有输入内容，在文本框失去焦点时，默认的提示文字显示在文本框中；

参考答案