jqurey制作qq简易聊天框使用数组保存聊天者的头像和昵称 使用val()获取输入框中的内容，使用length属性判断是否输入内容 获取当前聊天内容 使用html( )把当前聊天内容显示在聊天区域 使用addClass( ) 为当前聊天内容添加背景样式

在使用jQuery制作QQ风格的简易聊天框时，如果想使用数组存储聊天者头像和昵称，你可以这样做：

1. **初始化数据**：
创建一个包含用户信息的对象数组，比如 `var chatUsers = [{ avatar: 'avatar1.png', name: '小明' }, { avatar: 'avatar2.png', name: '小红' }];`

2. **获取输入内容**：
使用 `$("#message-input").val()` 获取输入框中的文本。

3. **判断输入内容**：
判断输入内容长度是否大于0，可以使用 `.length` 属性，例如：

   if ($("#message-input").val().length > 0) {
       // 发送消息操作
   }

4. **获取当前聊天内容**：
这部分通常会涉及到与服务器的交互，这里假设我们已经从服务器得到了新的聊天记录。获取方式取决于数据结构，如果服务器返回的是类似JSON的数据，可以用`$.parseJSON()`解析：

   var newMessage = {
     user: chatUsers[currentUserIndex], // 根据用户索引获取对应头像和昵称
     content: serverResponse.message,
   };

5. **显示聊天内容**：
将新的聊天内容作为HTML插入到`<div id="chat-log">`元素中：

   $("#chat-log").append('<div class="chat-message">' +
                        '<img src="' + newMessage.user.avatar + '" alt="头像">' +
                        '<span class="username">' + newMessage.user.name + '</span>' +
                        '<span class="content">' + newMessage.content + '</span>' +
                      '</div>');

6. **添加背景样式**：
使用`.addClass()`添加新的背景样式，比如一个新的消息标记：

   $(".chat-message:last-child").addClass('new-message');