jquery基础总结(五)
来源：互联网 发布：手机护眼软件 编辑：程序博客网 时间：2024/06/08 12:45
1.动态创建表格
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>02-jQuery-动态创建表格案例</title><script src="jquery-1.11.3.js"></script><style>* { padding: 0; margin: 0; }table {border-collapse: collapse;border-spacing: 0;border: 1px solid #c0c0c0;}th,td {border: 1px solid #d0d0d0;color: #404060;padding: 10px;}th {background-color: #09c;font: bold 16px "微软雅黑";color: #fff;}td {font: 14px "微软雅黑";}tbody tr {background-color: #f0f0f0;}tbody tr:hover {cursor: pointer;background-color: #fafafa;}</style><script>var data = [{name: "传智播客",url: "http://www.itcast.cn",type: "IT最强培训机构"},{name: "黑马程序员",url: "http://www.itheima.com",type: "大学生IT培训机构"},{name: "传智前端学院",url: "http://web.itcast.cn",type: "前端的黄埔军校"}];$(function(){//第一种：动态创建表格的方式，使用拼接html的方式 （推荐）// var html = "";// for( var i = 0; i < data.length; i++ ) {// html += "<tr>";// html += "<td>" + data[i].name + "</td>"// html += "<td>" + data[i].url + "</td>"// html += "<td>" + data[i].type + "</td>"// html += "</tr>";// }// $("#J_TbData").html(html);//第二种： 动态创建表格的方式，使用动态创建dom对象的方式//清空所有的子节点$("#J_TbData").empty();//自杀// $("#J_TbData").remove();for( var i = 0; i < data.length; i++ ) {//动态创建一个tr行标签,并且转换成jQuery对象var $trTemp = $("<tr></tr>");//往行里面追加 td单元格$trTemp.append("<td>"+ data[i].name +"</td>");$trTemp.append("<td>"+ data[i].url +"</td>");$trTemp.append("<td>"+ data[i].type +"</td>");// $("#J_TbData").append($trTemp);$trTemp.appendTo("#J_TbData");}});</script></head><body><table><thead><tr><th>标题</th><th>地址</th><th>说明</th></tr></thead><tbody id="J_TbData"></tbody></table><br><!-- 整个表格：ｔａｂｌｅ --><table><thead><tr> <!-- tr：table row：表格的行 --><th>一个格</th><th>一个格</th><th>一个格</th></tr></thead><tbody><tr><!-- rowspan:跨度两个行 --><td rowspan="2">一个格</td><!-- clospan：跨度两个列 --><td colspan="2">一个格</td><!-- <td>一个格</td> --></tr><tr><!-- <td>sd</td> --><td>ss</td><td>ss</td></tr></tbody></table></body></html>
2.回到顶部案例
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>05-jQuery- 回到顶部案例</title><style>.bk-top-box {position: fixed;bottom: 40px;right: 10px;cursor: pointer;}</style><script src="jquery-1.11.3.js"></script><script>$(function(){$("#J-bk-top").on('click',function(){$(window).scrollTop(0);$(window).scrollLeft(0);});$("#J_Box").on('click','h1',function(){//this jQuery的事件响应方法中，this指向被点击的 dom对象this.innerHTML += '-';//dom对象转换成 jQuery对象$(this).text($(this).text() + 1);});});</script></head><body><div class="bk-top-box" id="J-bk-top"><img src="imgs/bk-top3.jpg" height="44" width="44" alt=""></div><!-- ctrl + shift + g 自动包裹标签 --> <div id="J_Box"> <h1>传智播客1</h1> <h1>传智播客2</h1> <h1>传智播客3</h1> <h1>传智播客</h1> <h1>传智播客</h1> <h1>传智播客</h1> <h1>传智播客</h1> <h1>传智播客</h1> <h1>传智播客</h1> <h1>传智播客</h1> <h1>传智播客</h1> <h1>传智播客</h1> <h1>传智播客</h1> <h1>传智播客</h1> <h1>传智播客</h1> <h1>传智播客</h1> <h1>传智播客</h1> <h1>传智播客</h1> <h1>传智播客</h1> <h1>传智播客</h1> <h1>传智播客</h1> <h1>传智播客</h1> <h1>传智播客</h1> <h1>传智播客</h1> <h1>传智播客</h1> <h1>传智播客</h1> <h1>传智播客</h1> <h1>传智播客</h1> <h1>传智播客</h1> <h1>传智播客</h1> </div></body></html>3.城市选择案例
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>04-jQuery-城市选择案例</title><style type="text/css" media="screen">select {width: 200px;background-color: teal;height: 200px;font-size: 20px;}.btn-box {width: 30px;display: inline-block;vertical-align: top;}</style><script src="jquery-1.11.3.js"></script><script>// $(function(){// $("#btn-sel-none").on('click',function(){// $("#tar-city option").appendTo('#src-city');// });// $("#btn-sel-all").on('click',function(){// $("#src-city option").appendTo('#tar-city');// });// $("#btn-sel").on('click',function(){// $("#src-city option:selected").appendTo('#tar-city');// });// $("#btn-back").on('click',function(){// $("#tar-city option:selected").appendTo('#src-city');// });// });$(function(){$("#btn-sel-all").on('click',function(){//把所有的 城市从左边 移动到右边select中$("#src-city option").appendTo("#tar-city");});$("#btn-sel-none").on('click',function(){//把所有的 城市从左边 移动到右边select中$("#tar-city option").appendTo("#src-city");});$("#btn-sel").on('click',function(){//把所有的 城市从左边 移动到右边select中$("#src-city option:selected").appendTo("#tar-city");});$("#btn-back").on('click',function(){//把所有的 城市从左边 移动到右边select中$("#tar-city option:selected").appendTo("#src-city");});});</script></head><body> <select id="src-city" name="src-city" multiple> <option value="1">北京</option> <option value="2">上海</option> <option value="3">深圳</option> <option value="4">广州</option> <option value="5">西红柿</option> </select><div class="btn-box"><button id="btn-sel-all"> >> </button><button id="btn-sel-none"> << </button><button id="btn-back"> < </button><button id="btn-sel"> ></button></div> <select id="tar-city" name="tar-city" multiple> </select></body></html>
4.省市选择
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>06-jQuery-省市选择</title><style>select {width: 200px;font-size: 14px;}</style><script src="jquery-1.11.3.js"></script><script> var CITYS = { "北京": ["北京"], "上海": ["上海"], "天津": ["天津", "塘沽"], "重庆": ["重庆", "涪陵", "江津", "巫山"], "河北": ["石家庄", "张家口", "承德", "秦皇岛", "唐山", "廊坊", "保定", "沧州", "衡水", "邢台", "邯郸", "张北", "蔚县", "丰宁", "围场", "怀来", "遵化", "青龙", "坝县", "乐亭", "饶阳", "黄骅", "南宫"], "山西": ["太原", "大同", "朔州", "阳泉", "长治", "晋城", "忻州", "晋中", "临汾", "运城", "吕梁", "右玉", "河曲", "五台山", "五寨", "兴县", "原平", "离石", "榆社", "隰县", "介休", "候马", "阳城"], "内蒙古": ["呼和浩特", "包头", "乌海", "赤峰", "通辽", "呼伦贝尔", "鄂尔多斯", "乌兰察布", "巴彦淖尔", "兴安盟", "锡林郭勒盟", "阿拉善盟", "额尔古纳右旗", "图里河", "满州里", "海拉尔", "小二沟", "新巴尔虎右旗", "新巴尔虎左旗", "博克图", "扎兰屯", "科前旗阿尔山", "索轮", "乌兰浩特", "东乌珠穆沁旗", "额济纳旗", "拐子湖", "巴音毛道", "阿拉善右旗", "二连浩特", "那仁宝力格", "满都拉", "阿巴嘎旗", "苏尼特左旗", "海力素", "朱日和", "乌拉特中旗", "百灵庙", "四子王旗", "化德", "集宁", "吉兰太", "临河", "鄂托克旗", "东胜", "伊金霍洛旗", "阿拉善左旗", "西乌珠穆沁旗", "扎鲁特旗", "巴林左旗", "锡林浩特", "林西", "开鲁", "多伦", "翁牛特旗", "宝国图"], "辽宁": ["沈阳", "朝阳", "阜新", "铁岭", "抚顺", "本溪", "辽阳", "鞍山", "丹东", "大连", "营口", "盘锦", "锦州", "葫芦岛", "彰武", "开原", "清原", "叶柏寿", "新民", "黑山", "章党", "桓仁", "绥中", "兴城", "岫岩", "宽甸", "瓦房店", "庄河"], "吉林": ["长春", "白城", "松原", "吉林", "四平", "辽源", "通化", "白山", "延吉", "乾安", "前郭尔罗斯", "通榆", "长岭", "三岔河", "双辽", "蛟河", "敦化", "汪清", "梅河口", "桦甸", "靖宇", "东岗", "松江", "临江", "集安", "长白"], "黑龙江": ["哈尔滨", "齐齐哈尔", "黑河", "大庆", "伊春", "鹤岗", "佳木斯", "双鸭山", "七台河", "鸡西", "牡丹江", "绥化", "大兴安岭", "漠河", "塔河", "新林", "呼玛", "嫩江", "孙吴", "北安", "克山", "富裕", "海伦", "明水", "富锦", "泰来", "安达", "铁力", "依兰", "宝清", "肇州", "通河", "尚志", "虎林", "绥芬河"], "江苏": ["南京", "徐州", "连云港", "宿迁", "淮安", "盐城", "扬州", "泰州", "南通", "镇江", "常州", "无锡", "苏州", "赣榆", "盱眙", "淮阴", "射阳", "高邮", "东台", "吕泗", "溧阳", "吴县东山"], "浙江": ["杭州", "湖州", "嘉兴", "舟山", "宁波", "绍兴", "衢州", "金华", "台州", "温州", "丽水", "平湖", "慈溪", "嵊泗", "定海", "嵊县", "鄞县", "龙泉", "洪家", "玉环"], "安徽": ["合肥", "宿州", "淮北", "阜阳", "亳州", "蚌埠", "淮南", "滁州", "马鞍山", "芜湖", "铜陵", "安庆", "黄山", "六安", "巢湖", "池州", "宣城", "砀山", "宿县", "寿县", "霍山", "桐城", "芜湖县", "宁国", "屯溪"], "福建": ["福州", "南平", "三明", "莆田", "泉州", "厦门", "漳州", "龙岩", "宁德", "邵武", "武夷山市", "浦城", "建瓯", "福鼎", "泰宁", "长汀", "上杭", "永安", "屏南", "平潭", "崇武", "东山"], "江西": ["南昌", "九江", "景德镇", "鹰潭", "新余", "萍乡", "赣州", "上饶", "抚州", "宜春", "吉安", "修水", "宁冈", "遂川", "庐山", "波阳", "樟树", "贵溪", "玉山", "南城", "广昌", "寻乌"], "山东": ["济南", "聊城", "德州", "东营", "淄博", "潍坊", "烟台", "威海", "青岛", "日照", "临沂", "枣庄", "济宁", "泰安", "莱芜", "滨州", "菏泽", "惠民县", "羊角沟", "长岛", "龙口", "成山头", "朝城", "泰山", "沂源", "莱阳", "海阳", "石岛", "兖州", "莒县"], "河南": ["郑州", "三门峡", "洛阳", "焦作", "新乡", "鹤壁", "安阳", "濮阳", "开封", "商丘", "许昌", "漯河", "平顶山", "南阳", "信阳", "周口", "驻马店", "济源", "卢氏", "孟津", "栾川", "西峡", "宝丰", "西华", "固始"], "湖北": ["武汉", "十堰", "襄樊", "荆门", "孝感", "黄冈", "鄂州", "黄石", "咸宁", "荆州", "宜昌", "随州", "仙桃", "天门", "潜江", "神农架", "恩施", "郧西", "房县", "老河口", "枣阳", "巴东", "钟祥", "广水", "麻城", "五峰", "来风", "嘉鱼", "英山"], "湖南": ["长沙", "张家界", "常德", "益阳", "岳阳", "株洲", "湘潭", "衡阳", "郴州", "永州", "邵阳", "怀化", "娄底", "吉首", "桑植", "石门", "南县", "沅陵", "安化", "沅江", "平江", "芷江", "双峰", "南岳", "通道", "武冈", "零陵", "常宁", "道县"], "广东": ["广州", "清远", "韶关", "河源", "梅州", "潮州", "汕头", "揭阳", "汕尾", "惠州", "东莞", "深圳", "珠海", "中山", "江门", "佛山", "肇庆", "云浮", "阳江", "茂名", "湛江", "南雄", "连县", "佛冈", "连平", "广宁", "增城", "五华", "惠来", "南澳", "信宜", "罗定", "台山", "电白", "徐闻"], "广西": ["南宁", "桂林", "柳州", "梧州", "贵港", "玉林", "钦州", "北海", "防城港", "崇左", "百色", "河池", "来宾", "贺州", "融安", "凤山", "都安", "蒙山", "那坡", "靖西", "平果", "桂平", "龙州", "灵山", "东兴", "涠洲岛"], "海南": ["海口", "三亚", "文昌", "琼海", "万宁", "东方", "澄迈", "定安", "儋县", "琼中", "陵水", "西沙", "昌江", "乐东", "白沙", "临高"], "四川": ["成都", "广元", "绵阳", "德阳", "南充", "广安", "遂宁", "内江", "乐山", "自贡", "泸州", "宜宾", "攀枝花", "巴中", "达川", "资阳", "眉山", "雅安", "阿坝", "甘孜", "西昌", "石渠", "若尔盖", "德格", "色达", "道孚", "马尔康", "红原", "小金", "松潘", "都江堰", "平武", "巴塘", "新龙", "理塘", "稻城", "康定", "峨眉山", "木里", "九龙", "越西", "昭觉", "雷波", "盐源", "会理", "万源", "阆中", "奉节", "梁平", "万县市", "叙永", "酉阳"], "贵州": ["贵阳", "六盘水", "遵义", "安顺", "毕节", "铜仁", "凯里", "都匀", "兴义", "威宁", "盘县", "桐梓", "习水", "湄潭", "思南", "黔西", "三穗", "兴仁", "望谟", "罗甸", "独山", "榕江"], "云南": ["昆明", "曲靖", "玉溪", "保山", "昭通", "丽江", "思茅", "临沧", "德宏", "怒江", "迪庆", "大理", "楚雄", "红河", "文山州", "德钦", "贡山", "中甸", "维西", "华坪", "会泽", "腾冲", "元谋", "沾益", "瑞丽", "景东", "泸西", "耿马", "澜沧", "景洪", "元江", "勐腊", "江城", "蒙自", "屏边", "广南", "勐海"], "西藏": ["拉萨", "那曲", "昌都", "林芝", "山南", "日喀则", "阿里", "狮泉河", "改则", "班戈", "安多", "普兰", "申扎", "当雄", "拉孜", "尼木", "泽当", "聂拉木", "定日", "江孜", "错那", "隆子", "帕里", "索县", "丁青", "嘉黎", "洛隆", "波密", "左贡", "察隅"], "陕西": ["西安", "延安", "铜川", "渭南", "咸阳", "宝鸡", "汉中", "榆林", "安康", "商洛", "定边", "吴旗", "横山", "绥德", "长武", "洛川", "武功", "华山", "略阳", "佛坪", "镇安", "石泉"], "甘肃": ["兰州", "嘉峪关", "金昌", "白银", "天水", "武威", "酒泉", "张掖", "庆阳", "安西", "陇南", "临夏", "甘南", "马鬃山", "敦煌", "玉门镇", "金塔", "高台", "山丹", "永昌", "民勤", "景泰", "靖远", "榆中", "临洮", "环县", "平凉", "西峰镇", "玛曲", "夏河合作", "岷县", "定西"], "青海": ["西宁", "海东", "海北", "海南", "黄南", "果洛", "玉树", "海西", "茫崖", "冷湖", "祁连", "大柴旦", "德令哈", "刚察", "门源", "格尔木", "都兰", "共和县", "贵德", "民和", "兴海", "同德", "同仁", "杂多", "曲麻莱", "玛多", "清水河", "达日", "河南", "久治", "囊谦", "班玛"], "宁夏": ["银川", "石嘴山", "吴忠", "固原", "中卫", "惠农", "陶乐", "中宁", "盐池", "海源", "同心", "西吉"], "新疆": ["乌鲁木齐", "克拉玛依", "石河子", "阿拉尔", "喀什", "阿克苏", "和田", "吐鲁番", "哈密", "克孜勒", "博尔塔拉", "昌吉", "库尔勒", "伊犁", "塔城", "阿勒泰", "哈巴河", "吉木乃", "福海", "富蕴", "和布克赛尔", "青河", "阿拉山口", "托里", "北塔山", "温泉", "精河", "乌苏", "蔡家湖", "奇台", "昭苏", "巴仑台", "达板城", "七角井", "库米什", "巴音布鲁克", "焉耆", "拜城", "轮台", "库车", "吐尔尕特", "乌恰", "阿合奇", "巴楚", "柯坪", "铁干里克", "若羌", "塔什库尔干", "莎车", "皮山", "民丰", "且末", "于田", "巴里坤", "伊吾", "伊宁"], "香港": ["香港"], "澳门": ["澳门"], "台湾": ["台北", "台中", "高雄"] };$(function(){//初始化 所有的省的数据//each: array:要遍历的数组//i:key,索引编号//e:索引对应的值$.each(CITYS,function(key, value){var $option = $("<option></option>");$option.text(key);//获取当前省的名字$("#province").append($option);});//当省的数据发生改变的时候执行 加载市的数据$("#province").on("change",function(){//拿到当前省的名字var pro = $("#province option:selected").text();//清空原有的city数据$("#city").empty()//根据省名，拿到所有的城市，然后根据城市创建option添加到cityselect中$.each(CITYS[pro],function(i, value){$("#city").append("<option>"+ value +"</option>");});});//上来后初始化一下城市的数据$("#province").triggerHandler('change');});</script></head><body> <select name="province" id="province"> </select> <select name="city" id="city"> </select></body></html>5.QQ微博
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>腾讯微博</title> <style type="text/css"> body { margin: 0px; background: url('imgs/wrapBg.jpg') no-repeat #EBF1F1; } #logo { margin: 30px 0 0 300px; } #myBody { width: 800px; height: 200px; border: 1px solid #000; } #myBdLeft { width: 590px; height: 100%; background: #fff; float: left; } #talkBox { text-align: left; margin: 0 0 0 25px; } #msgTxt { width: 540px; height: 80px; overflow: hidden; font-family: Tahoma, Arial; font-size: 14px; border: 1px solid gray; } #talkBox h2 { text-align: left; padding: 0px; margin: 0px; font: normal normal normal 18px/29px 'MicroSoft YaHei', SimHei; } #funBox { width: 540px; } #funBox a { color: #000; text-decoration: none; font-size: 14px; } .creatNew, .atSome, .insertFace, .uploadPic, .uploadVideo { background-position: -170px -33px; display: inline-block; height: 16px; padding-left: 18px; } .countTxt { color: #999; float: right; line-height: 33px; margin: 0 15px 0 0; } .countTxt em { font-family: Georgia, Tahoma, Arial; font-size: 26px; position: relative; top: -5px; vertical-align: middle; } .sendBtn { float: right; margin: 0 20px 0 0; padding: 0px; background: url(imgs/bg1.png) -117px -165px no-repeat; line-height: 33px; margin-left: 14px; height: 30px; width: 112px; border: 0px; cursor: pointer; } .sendBtn:hover { background: url(imgs/bg1.png) 0px -195px no-repeat; } #btnCloFri { cursor: pointer; } #myBdRight { background: #CCEBF4; width: 210px; height: 100%; float: right; } .atSomeList { position: absolute; background-color: #f0f0f0; border: 1px solid #a0a0a0; width: 60px; list-style: none; } .atSomeList a { text-decoration: none; color: #c0c0c0; } .showFace { position: absolute; background-color: #f0f0f0; border: 1px solid #a0a0a0; width: 200px; } </style> <!-- <script src="jquery-1.11.3.js" type="text/javascript"></script> --> <script src="jquery-1.8.2.min.js"></script> <script src="js/06weibo.js" type="text/javascript"> </script></head><body> <imgs id="logo" src="imgs/b3_100901.png" alt="" /> <center> <div id="myBody"> <div id="myBdLeft"> <div id="talkBox"> <h2> <a>夏天来了，你懂得......</a></h2> <textarea id="msgTxt"></textarea> <div id="funBox"> <a href="javascript:void(0);" class="creatNew">话题</a> <a href="javascript:void(0);" class="atSome">朋友</a> <a href="javascript:void(0);" class="insertFace">表情</a> <a href="javascript:void(0);" class="uploadPic">照片</a> <a href="javascript:void(0);" class="uploadVideo">视频</a> </div> <div id="sendBox"> <input type="button" class="sendBtn" value="" /> <span class="countTxt">还能输入<em>140</em>字</span> </div> </div> </div> <div id="myBdRight"> </div> </div> </center></body></html>var friendsList = ['中国', '日本', '韩国', '朝鲜','蒙古'];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': '囧' };$(function(){});window.onload = function() {//初始化atsomeinitAtSome();//初始化图片initFaces();};function initFaces(){var str = "<div class='showFace'>";for( var key in userFaces) {str += "<img alt='"+ userFaces[key] +"' src='faces/"+key+"'>"}str += "</div>";var $faceDiv = $(str);$faceDiv.appendTo( ".insertFace" ).hide().css({left: $( ".insertFace" ).offset.left + "px",top: $(".insertFace").offset.top + 16 + "px",}).find( "img" ).click(function() {setText( "[" + $(this).attr("alt") + "]" );});$(".insertFace").hover(function() {$faceDiv.show();},function() {$faceDiv.hide();});}function initAtSome() {var h = $(".atSome").height();var str = "";str += "<ul class='atSomeList'>";for( var i = 0; i < friendsList.length; i++ ) {str += "<li>";str += "<a herf='javascript:'>@"+friendsList[i]+"</a>";str += "</li>"}str += "</ul>";var $atSomeList = $(str);$(".atSome").append($atSomeList).hover(function(){$atSomeList.show();},function(){$atSomeList.hide();});$atSomeList.css({top: ($(".atSome").offset().top + h - 15) +"px",left: ($(".atSome").offset().left + 14) + "px"}).hide().find("a").click(function(){setText($(this).text());});}function setText(str) {$("#msgTxt").text($("#msgTxt").text() + str);}
阅读全文
0 0
- jquery基础总结(五)
- jquery基础（五）
- jQuery基础总结
- jQuery基础总结
- jQuery基础总结
- jQuery基础学习总结
- JQuery基础学习总结
- jquery基础总结一
- jquery基础总结
- JQuery基础总结
- Jquery基础总结
- jQuery基础总结
- jQuery基础总结3
- Jquery基础总结2
- jQuery基础总结1
- jquery 基础总结
- 【JQuery】入门基础总结
- 【总结】慕课网 jQuery基础
- windos下面搭建ELK服务
- 算法分析与设计——LeetCode Problem.24 Swap Nodes in Pairs
- seq命令总结
- Java单体测试之JUnit4
- python爬虫学习笔记
- jquery基础总结(五)
- 1074. 宇宙无敌加法器(20)
- 关于android app上传文件服务端的搭建
- python装饰器
- 爬取网页的两种方法（python3）
- Java并发学习之定时任务的几种玩法
- 面向对象的程序设计(1)
- leetCode-Non-decreasing Array
- Octave 入门
