任务1：微博字数统计
任务要求
在页面中，允许用户在文本域输入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>
任务2：jQuery页面加载事件的使用
任务要求：
掌握jQuery页面加载事件的操作。
任务实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-3.6.0.min.js"></script>
</head>
<body>
<script>
$(function () {
$('div').css('background-color', 'pink')
});
</script>
<div>页面加载事件</div>
</body>
</html>
任务3：事件方法的使用
任务要求：
定义一个<div>标签，为了验证事件是否注册成功，需要为div元素设置初始样式，然后为div元素注册事件，通过改变div元素的样式来检验事件是否会被触发。
任务实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-3.6.0.min.js"></script>
<style>
div { width: 100px; height: 100px; background-color: gray; }
</style>
</head>
<body>
<div></div>
<script>
// 注册单击事件
$('div').click(function () {
$(this).css('width', '150px');
});
// 注册鼠标移出事件
$('div').mouseout(function () {
$(this).css('height', '200px');
});
</script>
</body>
</html>
