因为这几天一直在学习Jquery的一些知识，感觉Jquery比以前太强大了，很多简单的函数都是用JavaScript写几十行代码就解决了，但是Jquery里面只有几行代码，所以决定好好学习Jquery，支持我。呵呵，这几天对Jquery的学习让我觉得用Jquery并不是很难。就我而言，只要jquery学习了选择器，其他基本的东西都可以满足。所以我在这里实现了一个Jquery，模仿腾讯微薄的广播发布。

1.首先，创建一个新的HTML页面，并介绍我想要实现的功能

(1)创建一个新的HTML页面，如下所示

(2)第一个功能，当鼠标滑过广播画面时，会变成另一个颜色较浅的画面，离开时恢复原状。

(3)第二个功能，当输入框没有输入单词时，底部提示的单词数减少1。如果超出，会提示用户超出多少字。

(4)第三个功能，点击主题按钮，如果文本框为空，输入#请输入主题信息#，并请输入主题信息进行高亮显示，如果文本框不为空，则不输入任何内容。

(5)第四个功能，当你点击好友时，会在底部生成一个图层，显示用户的好友，当用户点击好友时，名称会显示在文本框中。

(6)第五个功能，当用户点击表情时，会显示QQ的常用表情，然后用户可以选择要点击的表情，显示在文本框中。这与第四个函数基本相同，下面的函数如下。

2.第一个功能

(1)功能显示图

由于这只是一个简单的滑动效果，截图看起来并不明显，所以只发布了代码

(2)代码

复制代码代码如下：//实现图片$ ('# sendbox3360button)上下移动的变化反应。send BTN’)。mouseover (function () {$ (this))。CSS('背景位置'，' 0-196 px ')；}).mouseout(函数(){ $(this))。css('backgroundPosition '，'-117 px-165 px ')；});

3.第二个功能

(1)功能截图

(2)代码

复制代码如下：//实现输入字数$ ('# msgtxt ')的变化。change(function(){ var world=$(' # msgtxt ')。val()；可变长度=140世界长度；If (length0) {$ ('# sendboxspan。count txt’)。html('您已经超过了em style=' color3360 # e56c0amath . ABS(length)'/em word ')；} else {$ ('# sendboxspan。count txt’)。html('您也可以输入em ' length '/em word ')；} });setInterval(函数(){$('#msgTxt '))。change()；}, 20);

4.第三个功能

(1)功能截图

(2)代码

复制代码如下：//确认输出信息的文本(请输入主题信息并以红色显示)/*扩展一种为jQuery选择文本的方法*/$ . fn . select range=function(start，end) {var curobj=$ (this)。get(0)；if(！curObj)返回；else if(curobj . setselectionrange){ curobj . focus()；curObj.setSelectionRange(开始，结束)；}/* WebKit */else if(curobj . createTextRange){ var range=curobj . createTextRange()；range . collapse(true)；range.moveEnd('字符'，end)；range.moveStart('字符'，start)；range . select()；}/* IE */else if(curobj . selectionstar){ alert(' aaaaaaaa ')；curObj.selectionStart=startcurObj.selectionEnd=end} };//点击主题输出#，请输入主题信息# $ ('# funboxa.creatnew ')。单击(function () {if ($)。修剪($ ('# msgtxt ')。val())。长度==0) {$ ('# msgtxt ')。val(。} });

5.第四个功能

(1)功能截图

(2)代码

复制代码代码如下：//实现单击朋友按钮的时候显示出朋友的信息var friendList=['代忠', '小猛', '任首龙', '戴伟', '玛利亚', '韩迎龙', '盛敬恒', '飞飞', '小贤', '元芳'];$('#funBox a.atSome ').单击(函数(){ //在上面定义编号为水平的差异层是位置：赦免$(' div id=' level ' ul id=' ul ' style=' margin :0；划水：0;列表样式-type:none'/ul/div ').appendo(' # funBox ')；//使用$.每个循环遍历数组的值加入到层中if ($('#level ').text()=='') { $ .每个(friendList，function () { //遍历给层中加入里样式变换$('li@' this '/li ').css(“”光标','指针')。mouseover(函数(){ $(this)).css('backgroundColor '，'黄色')。兄弟姐妹()。css('backgroundColor '，' white ')；}).appendo($(' # ul ').单击(函数(){ //实现单击样式的时候讲值写入到$('#msgTxt ').val($('#msgTxt ').val() $(this).text())；}) }) };//如何判断一个用户是否点击了一个按钮$('#level ').mouseleave(函数(){ $(“# level”).移除();}) //摆放创建好的模块的位置$('#level ').css('top '，$(this).偏移量()。top $(这个)。高度px ').css('left '，$(this).偏移量()。左“px”)；});

6.第五个功能

(1)功能截图

(2)代码

文案代码如下：//实现QQ表情功能：var userFaces={ ' 0.gif ' : '微笑'，' 1.gif': '撇嘴'，' 2.gif': '颜色'，' 3.gif': '发呆'，' 5.gif': '流泪'，' 6.gif': '害羞'，' 7.gif': '闭嘴'，' 8 . gif ' 3333333612.gif': '淘气'，' 13.gif': '呲牙'，' 14.gif': '惊讶'，' 15.gif': '难过'，' 16.gif': '爽。19.gif': '呕吐'，' 20.gif': '窃笑'，' 21.gif': '可爱'，' 22.gif': '目空一切'，' 23.gif': '傲慢'，26.gif': '恐慌'，' 27.gif': '汗水'，' 28.gif': '憨笑'，' 29.gif': '战士'，' 30.gif': '奋斗'，33.gif': '嘘'，' 34.gif': '晕'，' 35.gif': '折磨'，' 36.gif': '没落'，' 37.gif': '骷髅'，' 40.gif': '擦汗'，' 41.gif': '捏捏捏鼻子'，' 42.gif': '鼓掌'，' 43.gif': '54.gif': '穷'，' 55.gif': '菜刀'，' 56.gif': '西瓜'，' 57.gif': '啤酒'，' 58.gif': '篮球'，' 61.gif': '大米'，' 62.gif': '猪'，' 63.gif': '玫瑰'，' 64.gif': '枯萎68.gif': '蛋糕'，' 69.gif': '闪电'，' 70.gif': '炸弹'，' 71.gif': '小刀'，' 72.gif': '足球'，' 75.gif': '月亮'，' 76.gif': '太阳'，' 77.gif': '礼物'，' 78.gif': '拥抱'，'89.gif': 'OK '，' 90.gif':' Love '，' 91.gif':' Air Kiss '，' 92.gif':' Jump '，' 93.gif': '颤抖'，96.gif': '磕头'，' 97.gif': '回头'，' 98.gif': '跳绳'，' 99.gif ' :103.gif': '左太极'，' 104.gif': '右太极'，' 105.gif': '冷静点'，' 106.gif': '头晕'，' 107.gif':' 110.gif': '咒骂'，' 111.gif': '发火'，' 112.gif': '士力架'，' 111.gif '单击(function(){ $(' div id=' userface '/div ')。appendo(' # funBox ')；$.每个(userFaces，function (key，value){ $(' img src=' faces/' key ' ' title=' value ' ')。css('光标'，'指针')。appendo(' # user faces ')。单击(function () { $('#msgTxt ')。val($('#msgTxt ')。val() '[' $(this)。attr(' title ')']')；});});//如上，如何判断用户是否点击了按钮$(' # user face ')。mouse leave(function(){ $(' # user faces '))。移除()；});//放置位置$ ('# userfaces ')。CSS ('top '，$ (this)。偏移量()。top $(这个)。高度' px ')。CSS ('left '，$ (this)。偏移量()。左“px”)；});

嗯，所有功能都有，美化是朋友自己做的