jQuery的基本操作
（1）遍历键值对和数组
var arr = [9, 8, 7, 6, 5, 4]; $.map(arr, function (ele, index) { alert(ele + '===' + index); //第一个参数是数组里面的值，第二个参数是索引 }) //=========================================// var keyWord = { "name": "老牛", "age": 90, "gender": "男" }; for (var key in keyWord) { alert(key + '====' + keyWord[key]); } $.each(keyWord, function (k, v) { alert(k + '===' + v); alert(k); if (k == 'age') { return false; //break在这里面不能用，jQuery里面封装的就是判断是false再break，直接给他break他不认 } }); //========================================// var arr = [1, 2, 3, 4, 5]; $.each(arr, function myfunction(k, v) {// //alert(k+'=='+v); if (k > 3) { return false; } else { alert(v) } }) //$.map方法可以遍历数组，偶尔可以便利键值对，但是一般不用 //$.each方法可以遍历键值对还有数组，通常我们用它来遍历键值对
（2）jQuery方法获取对象
$(function () { $('#btn').click(function () {//ID 选择器 alert($(this).val()); }); $('input').click(function () {//标签选择器 $(this).val('这是按钮'); }); $('#btn').click(function () {//jquery里面隐式迭代所以不需要循环 $('p').text('我们都是P'); $('.cls').css('backgroundColor', 'red'); //类选择器，可以获得写好的css }); })
（3）jQuery中的各种选择器
$(function () { $('#btn').click(function () { $('div span').css('backgroundColor', 'red'); //获得层中所有的span $('div>span').css('backgroundColor', 'red'); //获得层中所有直接的span $('div+span').css('backgroundColor', 'red'); //获得层下面的一个span $('div~span').css('backgroundColor', 'red'); //获得层下面的所有span $('*').css('backgroundColor', 'red'); }); }); //===========================// $(function () { $('div.cls').css('backgroundColor','blue');//标签加类选择器 $('div,input,#btn').css('backgroundColor','orange');//可以用逗号隔开一次选择多个 }); //============================// $(function () { $('#btn').click(function () { //下面是几个获取兄弟元素的方法 注意是！！方法！！ $('div').next().css('backgroundColor', 'red'); //获取当前元素紧邻的下一个元素，相当于div+ $('div').nextAll().css('backgroundColor', 'red'); //获取当前元素紧邻着的所有元素，相当于div~ $('div').prev().css('backgroundColor', 'red'); //获取当前元素紧邻的上一个元素 $('div').prevAll().css('backgroundColor', 'red'); //获取当前元素上的紧邻的所有元素 $('div').siblings().css('backgroundColor', 'red'); //获取当前元素的所有兄弟元素 }); }); //==============================// $(function () { $('#btn').click(function () { $('div:first').css('backgroundColor', 'blue'); //获取第一个或者最后一个，推荐用first（）.这样的形式，有智能提示不容易写错 $('div').first().css('backgroundColor', 'blue'); $('div').last().css('backgroundColor', 'blue'); $('div:last').css('backgroundColor', 'blue'); $('div:even').css('backgroundColor', 'blue'); //偶数索引 $('div:odd').css('backgroundColor', 'blue'); //奇数索引 }); });
（4）元素each 的案例
$(function () { //获取被选中的所有的checkbox $('#dv input[type=checkbox]').click(function () {//click（） 而不是click= 注意jQuery和DOM是有区别的 var cks = $('#dv :checked'); //获取length 并保存起来 var len = cks.length; var arr = []; // 遍历所有chenckbox cks.each(function (k, v) {//这里k表示索引 v表示元素对象 // 把val的值保存起来 arr[arr.length] = $(v).val(); }); //把内容显示到p标签里面 $('#msgName').text('一共选中了' + arr.length + ',分别是' + arr); }); });
（5）jQuery的DOM操作
1、使用html()方法读取或者设置元素的innerHTML：
alert($("a:first").html());//innerHTML
$("a:first").html("hello");
2、使用text()方法读取或者设置元素的innerText：
alert($("a:first").text());
$("a:first").text("hello");
3、使用attr()方法读取或者设置元素的属性，对于jQuery没有封装的属性（所有浏览器没有差异的属性）用attr进行操作。
alert($("a:first").attr("href"));
$("a:first").attr("href", "http://www.baidu.com");
attr({‘key’:’value’,’k’:’v’});
4、使用removeAttr删除属性。删除的属性在源代码中看不到，这是和清空属性的区别。attr(‘name’,’’)
案例一
$(function () { var dic = { "imgs/11.png": "imgs/1.png", "imgs/22.png": "imgs/2.png", "imgs/33.png": "imgs/3.png" }; for (var key in dic) { var liObj = $('<li></li>'); var imgObj = $('<img src="' + key + '"/>').appendTo(liObj); liObj.appendTo($('#uu')); imgObj.mouseover(function () { $('#dvImg').empty(); var img = $('<img src="' + dic[$(this).attr('src')] + '" />');//这里直接用dic[key] 只能取到一个值所以用$(this).attr('src') img.appendTo($('#dvImg')); }); }; });
综合案例：qq微博
css 的代码已经被删除了
<!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> <script src="jquery-1.8.3.js" type="text/javascript"></script> <script type="text/javascript"> $.fn.selectRange = function (start, end) { var curObj = $(this).get(0); if (!curObj) return; else if (curObj.setSelectionRange) { curObj.focus(); curObj.setSelectionRange(start, end); } /* WebKit */ else if (curObj.createTextRange) { var range = curObj.createTextRange(); range.collapse(true); range.moveEnd('character', end); range.moveStart('character', start); range.select(); } /* IE */ else if (curObj.selectionStart) { curObj.selectionStart = start; curObj.selectionEnd = end; } }; $(function () { //第一步 按钮的高亮显示 $('#sendBox .sendBtn').mouseover(function () { $(this).css('backgroundPosition', '0px -195px'); }).mouseout(function () { $(this).css('backgroundPosition', '-117px -165px'); }); //第二步 话题的高亮显示 $('#funBox .creatNew').click(function () { if ($('#msgTxt').text().length == 0) { $('#msgTxt').text('#输入话题标题#').selectRange(1, 7); } }); //第三步 计算文本框的字数 $('#msgTxt').change(function () { var len = 140 - $('#msgTxt').text().length; if (len > 0) { $('#sendBox span').html('还能输入<em><font size="5" color="red">' + len + '</font></em>个字'); } else { $('#sendBox span').html('已经超出了<em><font size="9" color="red">' + Math.abs(len) + '</font></em>个字'); } }); //计时器 setInterval(function () { $('#msgTxt').change(); }, 100); //第四部 显示朋友圈 $('#funBox .atSome').click(function () { var friendsList = ['凤姐', '黑山', 'gay', '郭德纲', '老杨', '老苏', '老蒋', '老牛', '老王', '老虎', '老马']; if ($('#dv').length == 0) { //创建层 var dvFriend = $('<div id="dv" style="width:100px;border:1px solid blue;background-color:white;position:absolute"></div>').appendTo('body'); //设置层的位置 var xdv = $(this).offset().left + 'px'; var ydv = $(this).offset().top + $(this).height(); +'px'; $(dvFriend).css({ "left": xdv, "top": ydv }); //创建span标签并且添加到层中，点击关闭 $('<span style="background-color:gray;float:right;cursor:pointer;">关闭</span>').click(function () { $(this).parent().remove(); //这里注意this是的是这个span标签 他的parent标签就是这个div }).appendTo($('#dv')); //添加朋友 创建列表 var ulObj = $('<ul style="clear:both;list-style-type:none;margin:0;padding:0;cursor:pointer;"></ul>').appendTo(dvFriend); for (var i = 0; i < friendsList.length; i++) { $('<li>@' + friendsList[i] + '</li>').mouseover(function () { $(this).css('backgroundColor', 'yellow').siblings().css('backgroundColor', ''); }).click(function () { if ($('#msgTxt').text() == '#输入话题标题#') { $('#msgTxt').text($(this).text()); } else { $('#msgTxt').text($('#msgTxt').text() + $(this).text()); } }).appendTo(ulObj); } } }); //======================================================================================================== 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 .insertFace').click(function () { //创建层 if ($('#dv1').length == 0) { var dvImg = $('<div id="dv1" style="width:370px;border:1px solid blue;background-color:white;position:absolute;"></div>').appendTo('body'); var xdvImg = $(this).offset().left - 50 + 'px'; var ydvImg = $(this).offset().top + $(this).height + 'px'; $(dvImg).css({ "left": xdvImg, "top": ydvImg }); //创建两个span标签 $('<span style="float:left">表情</span>').appendTo($('#dv1')); $('<span style=" float:right;background-color:gray;cursor:pointer;">关闭</span>').click(function () { $(this).parent().remove(); }).appendTo($('#dv1')); //导入图片 var dv = $('<div style="clear:both"></div>').appendTo($(dvImg)); for (var key in userFaces) { $('<img src="faces/' + key + '" title="' + userFaces[key] + '"style=" cursor:pointer"/>').click(function () { //把图片的title加到文本框中 $('#msgTxt').text($('#msgTxt').text()+'['+$(this).attr('title')+']'); }).appendTo($(dv)); } } }); }); </script> </head> <body> <img id="logo" src="img/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>
大概就是这么个效果，能实现前面的话题，朋友和表情三个功能。
基本上就是这些，下面入手三层项目，听着外面的鞭炮声有点儿静不下心来，还是好好过年吧。