前言： 由於這幾天在學習Jquery的一些知識，比以前的感覺就是Jquery太強大了，很多很簡單的功能以前在JavaScript要寫幾十行的程式碼而在Jquery中只用幾行程式碼就搞定了，所以我決定好好學習學習Jquery，支持我吧，呵呵，這幾天的學習Jquey使我感覺到其實Jquery的使用並不是很難，就我感覺Jquery只要把選擇器學的差不多，其他的基本都可以迎刃而解，多了解一些方法，事件等等。所以我在這裡實現了一個Jquery實現仿騰訊微薄的廣播發表。
1. 先新建HTML頁面與介紹我要實作什麼功能
(6)第五個功能，當使用者點擊表情的時候，會顯示QQ的常用表情，然後使用者可以選擇表情點擊顯示在文字方塊中，這個和第四個功能基本上一樣，下面一個一個的功能說以下
//實作點擊朋友按鈕的時候顯示出朋友的訊息
var friendList = ["代忠", "小猛", "任首龍", "戴偉", "瑪利亞", "韓迎龍", "盛敬恆", "飛飛", "小賢", "元芳"];
$("#funBox a.atSome").click(function () {
//在上面定義id為level的div層是position:absolution
$("
").appendTo ("#funBox");
//使用$.each循環遍歷數組的值加入層中
if ($("#level").text() == "") {
$.each(friendList, function () {
//遍歷給層中加入li樣式轉換
$("
@" this "").css("cursor", "pointer").mouseover(function () {
$(this).css("backgroundColor", "yellow").siblings().css("backgroundColor", "white");
}).appendTo($("#ul")).click(function () {
//實現點選樣式的時候講值寫入
$("#msgTxt").val($("#msgTxt").val() $(this).text());
})
})
};
//如何判斷一個使用者是否點選了一個按鈕
$("#level").mouseleave(function () {
$("#level").remove();
})
//擺放創造好的模組的位置
$("#level").css("top", $(this).offset().top $(this).height "px").css("left", $(this).offset(). left "px");
});
//實現QQ表情的功能
var userFaces = { '0.gif': '微笑', '1.gif': '撇嘴', '2.gif': '色', '3.gif': '發呆', '4.gif': '得意', '5.gif': '流淚', '6.gif': '害羞', '7.gif': '閉嘴', '8.gif': '睡覺', '9.gif' : '大哭', '10.gif': '尷尬', '11.gif': '發怒', '12.gif': '調皮', '13.gif': '呲牙', '14. gif': '驚訝', '15.gif': '難過', '16.gif': '酷', '17.gif': '冷汗', '18.gif': '抓狂', '19 .gif': '吐', '20.gif': '偷笑', '21.gif': '可愛', '22.gif': '白眼', '23.gif': '傲慢', ' 24.gif': '飢餓', '25.gif': '困', '26.gif': '驚恐', '27.gif': '流汗', '28.gif': '憨笑', '29.gif': '大兵', '30.gif': '奮鬥', '31.gif': '咒罵', '32.gif': '疑問', '33.gif': '噓', '34.gif': '暈', '35.gif': '折磨', '36.gif': '衰', '37.gif': '骷髏', '38.gif': '敲打', '39.gif': '再見', '40.gif': '擦汗', '41.gif': '摳鼻', '42.gif': '鼓掌', '43.gif': '糗大了', '44.gif': '壞笑', '45.gif': '左哼哼', '46.gif': '右哼哼', '47.gif': '哈欠', ' 48.gif': '鄙視', '49.gif': '委屈', '50.gif': '快哭了', '51.gif': '陰險', '52.gif': '親親', '53.gif': '嚇', '54.gif': '可憐', '55.gif': '菜刀', '56.gif': '西瓜', '57.gif': '啤酒', '58.gif': '籃球', '59.gif': '乒乓', '60.gif': '咖啡', '61.gif': '飯', '62.gif': '豬頭', '63.gif': '玫瑰', '64.gif': '凋謝', '65.gif': '示愛', '66.gif': '愛心', '67.gif': '心碎', '68.gif': '蛋糕', '69.gif': '閃電', '70.gif': '炸彈', '71.gif': '刀', '72.gif': '足球', '73.gif': '瓢蟲', '74.gif': '便便', '75.gif': '月亮', '76.gif': '太陽', '77.gif': '禮物', '78.gif': '擁抱', '79.gif': '強', '80.gif': '弱', '81.gif': '握手', '82.gif': '勝利', '83.gif': '抱拳', '84.gif': '勾引', '85.gif': '拳頭', '86.gif': '差勁', '87.gif': '愛你', '88.gif': 'NO', '89.gif': 'OK', '90.gif': '愛情', '91.gif': '飛吻', '92.gif' : '跳跳', '93.gif': '發抖', '94.gif': '慪火', '95.gif': '轉圈', '96.gif': '磕頭', '97. gif': '回頭', '98.gif': '跳繩', '99.gif': '揮手', '100.gif': '激動', '101.gif': '街舞', '102. gif': '獻吻', '103.gif': '左太極', '104.gif': '右太極', '105.gif': '淡定', '106.gif': '暈', '107.gif': '不滿', '108.gif': '睡覺', '109.gif': '小調皮', '110.gif': '咒罵', '111.gif': '發怒' , '112.gif': '偷笑', '113.gif': '微笑', '114.gif': '震驚', '115.gif': '囧' };
$("#funBox a.insertFace").click(function () {
$("
").appendTo("#funBox");
$.each(userFaces, function (key, value) {
$("
").css("cursor", "pointer").appendTo("#Userfaces").click(function () {
$("#msgTxt").val($("#msgTxt").val() "[" $(this).attr("title") "]");
});
});
//跟上面的一樣，如何判斷一個使用者是否點選了一個按鈕
$("#Userfaces").mouseleave(function () {
$("#Userfaces").remove();
});
//擺放位置
$("#Userfaces").css("top", $(this).offset().top $(this).height "px").css("left", $(this).offset(). left "px");
});
