js，jQuery和DOM操作的总结（二）

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>

大概就是这么个效果，能实现前面的话题，朋友和表情三个功能。

基本上就是这些，下面入手三层项目，听着外面的鞭炮声有点儿静不下心来，还是好好过年吧。