zoukankan      html  css  js  c++  java
  • 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="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="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>

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

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

  • 相关阅读:
    数据库第1,2,3范式学习
    node.js安装及小例子
    WorkSkill整理之 技能体系
    PTE 准备之 Read aloud
    PTE 准备之 Personal introduction
    PTE准备的时候,用英式英语还是美式英语
    sqlserver2014无法打开报Cannot find one or more components_修复方案
    beego 框架用的页面样式模板
    Go语言开发中MongoDB数据库
    xmind8 破解激活教程
  • 原文地址:https://www.cnblogs.com/codersun/p/4295822.html
Copyright © 2011-2022 走看看