jquery版小型婚礼（可动态添加祝福语）

原文:jquery版小型婚礼（可动态添加祝福语）

　　前两天在网上不小心看到“js许愿墙”这几个字，我的神经就全部被调动了。然后就开始我的百度生涯，一直寻觅许愿墙背景图片和便利贴图片，觅了好久……一直没找到满意的……无意间看到祝福语和一些卡通婚礼图片。最终我决定用jquery制作一个小型婚礼，并且实现添加祝福语的功能。

　　音乐响起来，开始我的婚礼进行曲~

　　一、婚礼演示图

　　场景一：

　　

　　场景二：

　　场景三：

　　场景四：

　　场景五：

　　场景六：

　　场景七：

　　

　　添加祝福语：

　　二、html代码

        <div class="box">
            <!-- 场景一 -->
            <div class="first-box">
                <div class="first-horn">
                    <img src="images/first_horn.jpg"/>
                </div>
                <div class="first-txt">
                    <div class="txt1"><img src="images/first_txt1.jpg"/></div>
                    <div class="txt2"><img src="images/first_txt2.jpg"/></div>
                </div>
            </div>

            <!-- 场景二 -->
            <div class="second-box">
                <div class="second-people">
                    <img src="images/second_people.jpg"/>
                </div>
                <div class="second-txt">
                    <img src="images/second_txt.jpg"/>
                </div>
            </div>

            <!-- 场景三 -->
            <div class="three-box">
                <div class="three-img">
                    <img src="images/three_img.jpg"/>
                </div>
            </div>

            <!-- 场景四 -->
            <div class="fore-box">
                <div class="fore-img">
                    <img src="images/fore_img.jpg"/>
                </div>
            </div>

            <!-- 场景五 -->
            <div class="five-box">
                <div class="five-img">
                    <img src="images/five_img.jpg"/>
                    <div class="u-enter">进入婚礼</div>
                </div>
            </div>

            <!-- 场景六 -->
            <div class="six-box">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>

            <!-- 场景七 -->
            <div class="seven-box">
                <div class="clickMe">点我送祝福</div>
                <div class="seven-content">
                    <div class="note-a1"></div>
                    <div class="note-a2"></div>
                    <div class="note-a3"></div>
                    <div class="note-a4"></div>
                    <div class="note-a5"></div>
                    <div class="note-a6"></div>
                    <div class="note-a7"></div>
                    <div class="note-a8"></div>
                    <div class="note-a9"></div>
                    <div class="note-a10"></div>
                    <div class="note-a11"></div>
                    <div class="note-a12"></div>
                    <div class="note-1">一定要幸福哦~</div>
                    <div class="note-2">祝你们白头偕老！</div>
                    <div class="note-3">早生贵子~</div>
                    <div class="note-4">新婚快乐~</div>
                    <div class="note-5">生个宝宝认我做干妈！</div>
                    <div class="note-6">喜结良缘O(∩_∩)O哈哈哈~</div>
                    <div class="note-1">一定要幸福哦~</div>
                    <div class="note-2">祝你们白头偕老！</div>
                    <div class="note-3">早生贵子~</div>
                    <div class="note-4">新婚快乐~</div>
                    <div class="note-5">生个宝宝认我做干妈！</div>
                    <div class="note-6">喜结良缘O(∩_∩)O哈哈哈~</div>
                </div>
            </div>
        </div>

        <!-- 遮罩层 -->
        <div class="mask"></div>
        <div class="pop-box">
            <h1>送上祝福语</h1>
            <textarea id="write">写上您的祝福吧~</textarea>
            <div class="u-sure" id="uSure">确定</div>
        </div>

　　三、js代码

　　场景一：

    var $firstHorn = $(".first-horn"), /* 场景一左边喇叭 */
        $firstTxt = $(".first-txt"), /* 场景一文字div */
        firstTxtWidth = $firstTxt.width(), /* 文字div的宽度 */
        $secondBox = $(".second-box"), /* 场景二box */
        $secondPeople = $(".second-people"), /* 场景二左边人物 */
        $secondTxt = $(".second-txt"), /* 场景二右边文字 */
        $threeBox = $(".three-box"), /* 场景三box */
        $threeImg = $(".three-img"), /* 场景三图片 */
        $foreBox = $(".fore-box"), /* 场景四box */
        $foreImg = $(".fore-img"), /* 场景四图片 */
        $fiveBox = $(".five-box"), /* 场景五box */
        $fiveImg = $(".five-img"), /* 场景五中间图片 */
        $uEnter = $(".u-enter"), /* 进入婚礼按钮 */
        $sixBox = $(".six-box"), /* 场景六box */
        $sixDiv = $sixBox.find("div"), /* 场景六里面小块div */
        sixDivWidth = $sixDiv.width(), /* 场景六里面小块div的宽度 */
        sixDivHeight = $sixDiv.height(), /* 场景六里面小块div的高度 */
        sixBoxWidth = $sixBox.width(), /* 场景六宽度 */
        sixBoxHeight = $sixBox.height(),/* 场景六高度 */
        $sevenBox = $(".seven-box");

    /* 场景一 */
    $firstHorn.animate({left: 0},1000);
    $firstTxt.animate({left: "435px"},function(){
        $firstTxt.fadeIn(1000);
        showTxt($firstTxt.find("div:eq(0)")); /* 显示第一行文字 */
        setTimeout(function(){showTxt($firstTxt.find("div:eq(1)"));},3000); /* 显示第二行文字 */
        setTimeout(scene2,7000); /* 进入场景二 */
    });

    /* 显示文字 */
    function showTxt($obj){
        for(var i = 0; i < 8; i++){
            (function(){
                $obj.animate({width: firstTxtWidth*(i+1)+"px"}); /* 根据i值，width逐渐变大 */
            })(i)
        }
    }

 　　描述：场景一主要有两个功能，第一个是控制左边图片，第二个是让右边文字逐一显示。

　　场景二：

    /* 场景二 */
    function scene2(){
        $firstTxt.fadeOut();
        $firstHorn.animate({left: "-422px"},function(){
            $secondBox.show();
            $secondPeople.animate({left: "0"});
            $secondTxt.animate({left: "230px"},function(){
                $secondTxt.fadeIn(1000);
                setTimeout(scene3,2000); /* 进入场景三 */
            });
        });
    }

 　　描述：场景二功能简单一点，只控制左边人物出现，紧接着是文字显示。

　　场景三：

    /* 场景三 */
    function scene3(){
        $secondBox.hide();
        $threeBox.fadeIn();
        for(var i = 0; i < 6; i++){ /* 控制图片跳转频率 */
            if(i==0){
                $threeImg.css({left:0,top:0});
            }else if(i%2==0){
                $threeImg.animate({left: 40*i+"px",top: 30*i+"px"},80*(6-i));
            }else{
                $threeImg.animate({left: 40*i+"px",top: "200px"},80*(6-i));
            }
        }
        setTimeout(scene4,2500); /* 进入场景四 */
    }

　　描述：场景三功能控制图片弹跳显示，我用for循环控制弹跳距离。

　　场景四：

    /* 场景四 */
    function scene4(){
        $threeBox.hide();
        $foreBox.fadeIn();
        $foreImg.animate({top: "80px"},1000);
        setTimeout(scene5,2500); /* 进入场景五 */
    }

　　描述：场景四控制图片从顶部往下滑落，停留1秒然后滑向右侧直至消失。

　　场景五：

    /* 场景五 */
    function scene5(){
        $foreImg.animate({left: "960px"},function(){
            $fiveBox.fadeIn();
            $fiveBox.find("img").css({"transform": "scale(1)"});
            $uEnter.click(function(){
                $fiveBox.hide();
                setTimeout(scene6,400); /* 进入第六场景 */
            })
        });
    }

　　描述：场景五慢慢显现，可点击进入婚礼。

　　场景六：

    /* 场景六 */
    var colCount = 4, /* 多少列 */
        rowCount = 4; /* 多少行 */
    function scene6(){
        $sixBox.fadeIn();
        /* 聚合 */
        $sixDiv.each(function(){
            var _index = $(this).index(),
                col = _index%colCount, /* 第几列 */
                row = Math.floor(_index/rowCount), /* 第几行 */
                cssLeft = sixBoxWidth/2 - colCount/2*sixDivWidth + col*sixDivWidth, /* left的值 */
                cssTop = sixBoxHeight/2 - rowCount/2*sixDivHeight + row*sixDivHeight, /* top的值 */
                divLeft = -col*sixDivWidth, /* 背景定位的宽度 */
                divTop = -row*sixDivHeight; /* 背景定位的高度 */
            $(this).css({"left": cssLeft,"top": cssTop, "background-position": divLeft+"px "+divTop+"px"}); /* 先设置成为聚合，定位好背景图片 */
            setTimeout(scatter,1600); /* 调用散开 */
        })
        setTimeout(scene7,3000); /* 进入第七场景 */
    }
    /* 散开 */
    function scatter(){
        $sixDiv.each(function(){
            var _index = $(this).index(),
                col = _index%colCount, /* 第几列 */
                row = Math.floor(_index/rowCount), /* 第几行 */
                cssLeft = (col-1)*(sixBoxWidth+sixDivWidth)- sixDivWidth, /* 我这里的水平间距大小为盒子大小加上它自身的宽度 */
                cssTop = (row-1)*(sixBoxHeight+sixDivHeight)- sixDivWidth; /* 我这里的水平间距大小为盒子大小加上它自身的宽度 */
                $(this).animate({"left": cssLeft,"top": cssTop},1200);
        })
    }

　　描述：场景六显现停留1.6秒，然后以碎片的形式向外散开，这个代码解释和jquery版相片墙（鼠标控制图片聚合和散开）类似，参考那边即可。

　　场景七：

  /* 场景七 */
    var $sevenDiv = $(".seven-content div"),
        $clickMe = $(".clickMe"),
        /* 送上祝福 */
        $mask = $(".mask"),
        $popBox = $(".pop-box"),
        $write = $("#write"),
        $uSure = $("#uSure"),
        $sevenContent = $(".seven-content");

    function scene7(){
        $sixBox.hide();
        $sevenBox.fadeIn(1000);
        $sevenDiv.each(function(){
            defineSevenDiv($(this));
        })

        function defineSevenDiv($own){
            var _obj = defineRandom();
            $own.css({"transform":"rotate("+_obj.rotate+"deg)"}); /* 设置随机旋转值 */
            $own.animate({left: _obj.left+"px",top: _obj.top+"px"}); /* 随机排布 */
        }

        /* 定义随机left，top和旋转值 */
        function defineRandom(){
            var randomLeft = Math.floor(680*(Math.random())) + 30, /* 图片left值 */
                randomTop =  Math.floor(400*Math.random()) + 30, /* 图片top值 */
                randomRotate = 20 - Math.floor(40*Math.random()); /* 图片旋转角度 */
            return {
                left: randomLeft,
                top: randomTop,
                rotate:randomRotate
            }
        }

        /* 拖动祝福卡片 */
        draggableNote();
        /* 拖动图片 */
        function draggableNote(){
            $(".seven-content div").draggable({
                containment: $sevenContent,
                zIndex: 2700,
                start: function(){
                    $(this).css({"transform":"rotate(0deg)","cursor": "crosshair"}); /* 开始拖动图片旋转为0，鼠标样式改变 */
                },
                stop: function(){
                    var _obj = defineRandom();
                    $(this).css({"transform":"rotate("+_obj.rotate+"deg)","cursor": "pointer"}); /* 停止拖动，旋转为随机的 */
                }
            })
        }

　　描述：场景七祝福贴纸随机排布，并且可拖动祝福贴纸。

　　添加祝福语：

    /* 点我送祝福 */
        $clickMe.click(function(){
            $write.val("送上您的祝福吧~");
            $mask.fadeIn();
            $popBox.animate({top: "50%"});
        })

        /* 获取焦点时 */
        $write.focus(function(){
            var _val = $(this).val();
            if(_val == "送上您的祝福吧~"){
                $(this).val("");
            }
        })
        /* 丢失焦点时 */
        $write.blur(function(){
            var _val = $(this).val();
            if(_val.length == 0){
                $(this).val("送上您的祝福吧~");
            }
        })

        /* 点击确定 */
        $uSure.click(function(){
            var _writeVal = $write.val();
            var _randomNum = Math.ceil(Math.random()*6);
            if(_writeVal != "送上您的祝福吧~"){
                var _div = '<div class="note-'+_randomNum+'">'+_writeVal+'</div>';
                $sevenContent.append(_div); /* 如果输入祝福语，将此标签添加的尾部 */
                defineSevenDiv($sevenContent.find("div:last"));
                $popBox.animate({top: "-300px"},function(){
                    $mask.fadeOut();
                    draggableNote(); /* 可拖动卡片，给新添加的标签赋予拖动功能 */
                });
            }else{
                alert("请输入祝福语！");
            }
        })

　　描述：添加祝福语中，需填写祝福语，否则不让提交。可提交的祝福语便随机散布在祝福墙中，可实现随意拖动功能。

　　js所有代码：

/**
 * User: wei ya
 * Date: 14-6-12
 * Time: 下午8:08
 * 小型婚礼
 */
$(function(){
    var $firstHorn = $(".first-horn"), /* 场景一左边喇叭 */
        $firstTxt = $(".first-txt"), /* 场景一文字div */
        firstTxtWidth = $firstTxt.width(), /* 文字div的宽度 */
        $secondBox = $(".second-box"), /* 场景二box */
        $secondPeople = $(".second-people"), /* 场景二左边人物 */
        $secondTxt = $(".second-txt"), /* 场景二右边文字 */
        $threeBox = $(".three-box"), /* 场景三box */
        $threeImg = $(".three-img"), /* 场景三图片 */
        $foreBox = $(".fore-box"), /* 场景四box */
        $foreImg = $(".fore-img"), /* 场景四图片 */
        $fiveBox = $(".five-box"), /* 场景五box */
        $fiveImg = $(".five-img"), /* 场景五中间图片 */
        $uEnter = $(".u-enter"), /* 进入婚礼按钮 */
        $sixBox = $(".six-box"), /* 场景六box */
        $sixDiv = $sixBox.find("div"), /* 场景六里面小块div */
        sixDivWidth = $sixDiv.width(), /* 场景六里面小块div的宽度 */
        sixDivHeight = $sixDiv.height(), /* 场景六里面小块div的高度 */
        sixBoxWidth = $sixBox.width(), /* 场景六宽度 */
        sixBoxHeight = $sixBox.height(),/* 场景六高度 */
        $sevenBox = $(".seven-box");

    /* 场景一 */
    $firstHorn.animate({left: 0},1000);
    $firstTxt.animate({left: "435px"},function(){
        $firstTxt.fadeIn(1000);
        showTxt($firstTxt.find("div:eq(0)")); /* 显示第一行文字 */
        setTimeout(function(){showTxt($firstTxt.find("div:eq(1)"));},3000); /* 显示第二行文字 */
        setTimeout(scene2,7000); /* 进入场景二 */
    });

    /* 显示文字 */
    function showTxt($obj){
        for(var i = 0; i < 8; i++){
            (function(){
                $obj.animate({width: firstTxtWidth*(i+1)+"px"}); /* 根据i值，width逐渐变大 */
            })(i)
        }
    }

    /* 场景二 */
    function scene2(){
        $firstTxt.fadeOut();
        $firstHorn.animate({left: "-422px"},function(){
            $secondBox.show();
            $secondPeople.animate({left: "0"});
            $secondTxt.animate({left: "230px"},function(){
                $secondTxt.fadeIn(1000);
                setTimeout(scene3,2000); /* 进入场景三 */
            });
        });
    }

    /* 场景三 */
    function scene3(){
        $secondBox.hide();
        $threeBox.fadeIn();
        for(var i = 0; i < 6; i++){ /* 控制图片跳转频率 */
            if(i==0){
                $threeImg.css({left:0,top:0});
            }else if(i%2==0){
                $threeImg.animate({left: 40*i+"px",top: 30*i+"px"},80*(6-i));
            }else{
                $threeImg.animate({left: 40*i+"px",top: "200px"},80*(6-i));
            }
        }
        setTimeout(scene4,2500); /* 进入场景四 */
    }

    /* 场景四 */
    function scene4(){
        $threeBox.hide();
        $foreBox.fadeIn();
        $foreImg.animate({top: "80px"},1000);
        setTimeout(scene5,2500); /* 进入场景五 */
    }

    /* 场景五 */
    function scene5(){
        $foreImg.animate({left: "960px"},function(){
            $fiveBox.fadeIn();
            $fiveBox.find("img").css({"transform": "scale(1)"});
            $uEnter.click(function(){
                $fiveBox.hide();
                setTimeout(scene6,400); /* 进入第六场景 */
            })
        });
    }

    /* 场景六 */
    var colCount = 4, /* 多少列 */
        rowCount = 4; /* 多少行 */
    function scene6(){
        $sixBox.fadeIn();
        /* 聚合 */
        $sixDiv.each(function(){
            var _index = $(this).index(),
                col = _index%colCount, /* 第几列 */
                row = Math.floor(_index/rowCount), /* 第几行 */
                cssLeft = sixBoxWidth/2 - colCount/2*sixDivWidth + col*sixDivWidth, /* left的值 */
                cssTop = sixBoxHeight/2 - rowCount/2*sixDivHeight + row*sixDivHeight, /* top的值 */
                divLeft = -col*sixDivWidth, /* 背景定位的宽度 */
                divTop = -row*sixDivHeight; /* 背景定位的高度 */
            $(this).css({"left": cssLeft,"top": cssTop, "background-position": divLeft+"px "+divTop+"px"}); /* 先设置成为聚合，定位好背景图片 */
            setTimeout(scatter,1600); /* 调用散开 */
        })
        setTimeout(scene7,3000); /* 进入第七场景 */
    }
    /* 散开 */
    function scatter(){
        $sixDiv.each(function(){
            var _index = $(this).index(),
                col = _index%colCount, /* 第几列 */
                row = Math.floor(_index/rowCount), /* 第几行 */
                cssLeft = (col-1)*(sixBoxWidth+sixDivWidth)- sixDivWidth, /* 我这里的水平间距大小为盒子大小加上它自身的宽度 */
                cssTop = (row-1)*(sixBoxHeight+sixDivHeight)- sixDivWidth; /* 我这里的水平间距大小为盒子大小加上它自身的宽度 */
                $(this).animate({"left": cssLeft,"top": cssTop},1200);
        })
    }

    /* 场景七 */
    var $sevenDiv = $(".seven-content div"),
        $clickMe = $(".clickMe"),
        /* 送上祝福 */
        $mask = $(".mask"),
        $popBox = $(".pop-box"),
        $write = $("#write"),
        $uSure = $("#uSure"),
        $sevenContent = $(".seven-content");

    function scene7(){
        $sixBox.hide();
        $sevenBox.fadeIn(1000);
        $sevenDiv.each(function(){
            defineSevenDiv($(this));
        })

        function defineSevenDiv($own){
            var _obj = defineRandom();
            $own.css({"transform":"rotate("+_obj.rotate+"deg)"}); /* 设置随机旋转值 */
            $own.animate({left: _obj.left+"px",top: _obj.top+"px"}); /* 随机排布 */
        }

        /* 定义随机left，top和旋转值 */
        function defineRandom(){
            var randomLeft = Math.floor(680*(Math.random())) + 30, /* 图片left值 */
                randomTop =  Math.floor(400*Math.random()) + 30, /* 图片top值 */
                randomRotate = 20 - Math.floor(40*Math.random()); /* 图片旋转角度 */
            return {
                left: randomLeft,
                top: randomTop,
                rotate:randomRotate
            }
        }

        /* 拖动祝福卡片 */
        draggableNote();
        /* 拖动图片 */
        function draggableNote(){
            $(".seven-content div").draggable({
                containment: $sevenContent,
                zIndex: 2700,
                start: function(){
                    $(this).css({"transform":"rotate(0deg)","cursor": "crosshair"}); /* 开始拖动图片旋转为0，鼠标样式改变 */
                },
                stop: function(){
                    var _obj = defineRandom();
                    $(this).css({"transform":"rotate("+_obj.rotate+"deg)","cursor": "pointer"}); /* 停止拖动，旋转为随机的 */
                }
            })
        }

        /* 点我送祝福 */
        $clickMe.click(function(){
            $write.val("送上您的祝福吧~");
            $mask.fadeIn();
            $popBox.animate({top: "50%"});
        })

        /* 获取焦点时 */
        $write.focus(function(){
            var _val = $(this).val();
            if(_val == "送上您的祝福吧~"){
                $(this).val("");
            }
        })
        /* 丢失焦点时 */
        $write.blur(function(){
            var _val = $(this).val();
            if(_val.length == 0){
                $(this).val("送上您的祝福吧~");
            }
        })

        /* 点击确定 */
        $uSure.click(function(){
            var _writeVal = $write.val();
            var _randomNum = Math.ceil(Math.random()*6);
            if(_writeVal != "送上您的祝福吧~"){
                var _div = '<div class="note-'+_randomNum+'">'+_writeVal+'</div>';
                $sevenContent.append(_div); /* 如果输入祝福语，将此标签添加的尾部 */
                defineSevenDiv($sevenContent.find("div:last"));
                $popBox.animate({top: "-300px"},function(){
                    $mask.fadeOut();
                    draggableNote(); /* 可拖动卡片，给新添加的标签赋予拖动功能 */
                });
            }else{
                alert("请输入祝福语！");
            }
        })

    }

})

 　　总结：做完这个小型婚礼，我自己都喜欢自己了，嘿嘿，小小自恋下，希望这个动画也能给大家一个小惊喜。如果大家觉得不错，希望大家能动动小手给我一个小小的赞，促使我不断努力不断去发现，谢谢~ O(∩_∩)O~~

　　点击这里下载

时间： 2024-10-01 21:33:06

jquery版小型婚礼（可动态添加祝福语）的相关文章

jQuery给指定的table动态添加删除行的操作方法_jquery

最近写程序,碰巧有动态增加删除行的,下面就记录一下. $("#mytable tr").find("td:nth-child(1)") 1表示获取每行的第一列 $("#mytable tr").find("td:nth-child(3)") 3表示获取每行的第三列 今天在项目中,刚好用到给指定的table添加一行.删除一行,就直接找google,搜出来的东西不尽如人意,不是功能不好就是千篇一律,简直浪费时间还不讨好,于是乎就自

利用jquery给指定的table动态添加一行、删除一行的方法_jquery

$("#mytable tr").find("td:nth-child(1)") 1表示获取每行的第一列 $("#mytable tr").find("td:nth-child(3)") 3表示获取每行的第三列 今天在项目中,刚好用到给指定的table添加一行.删除一行,就直接找google,搜出来的东西不尽如人意,不是功能不好就是千篇一律,简直浪费时间还不讨好,于是乎就自己动手封装个,现就把代码分享出来,避免大伙重复造轮子,

jQuery实现表格数据的动态添加与统计

某物流信息系统中的功能要求如图1.1所示,表格中每一行代表一笔运送货物的信息,在录入每行的计费重量和费率后,要求能按一定的公式,自动计算运送费用,并且能自动统计所有运送货物的总运费.运送货物信息的数据量(即表格的行数)不定,要求能动态增加.删除,即表格的数据行数是动态可维护的.同时为了方便操作,需要在页面中能像使用键盘的上下左右方向键,在录入的文本框之间进行切换.每行的数据有一定的校验要求,比如单号必须为8位数字,件数和重量必须为数字... 单行货物信息计算运费不难实现,只需要在计费重量和费率的

基于jQuery实现表格数据的动态添加与统计的代码_jquery

                                                          图(1.1)    某物流信息系统中的功能要求如图1.1所示,表格中每一行代表一笔运送货物的信息,在录入每行的计费重量和费率后,要求能按一定的公式,自动计算运送费用,并且能自动统计所有运送货物的总运费.运送货物信息的数据量(即表格的行数)不定,要求能动态增加.删除,即表格的数据行数是动态可维护的.同时为了方便操作,需要在页面中能像使用键盘的上下左右方向键,在录入的文本框之间进行切换

jQuery Easyui学习之datagrid 动态添加、移除editor_jquery

 使用easyui行编辑的时候完成编辑的功能比较简单,但是如果要根据一个框的值动态改变别的值或者编辑的时候禁用某个框的时候就比较麻烦了. 比如像下面这样:添加行的时候每个值都是手动输入,修改的时候第一个值不能修改.我们来看下怎么实现这样的效果. easyui本身是不提供这么细节的功能的,需要我们自己拓展下: 在编辑的时候移除第一列的editor属性,添加的时候,添加第一列的属性. //扩展datagrid:动态添加删除editor $.extend($.fn.datagrid.methods,

jquery的append动态添加输入框后class无效的问题？

问题描述 用jquery的append方法table动态添加一行,有一个输入框,用了easyui的class做验证,但是不起作用,用属性获取的方式class和precision的值都是有的,但是无法起到验证的效果,有什么解决办法?代码:<input class="easyui-numberbox" precision="2" type="text"></input> 解决方案 easyui 有自己添加行的方法,请查阅API

JQuery动态添加Select的Option元素实现方法_jquery

如下所示: var selector=$('<select></select>'); for(var i=0;i<5;i++){ selector.append('<option value="'+i+'">'+i+'</option>'); } 以上这篇JQuery动态添加Select的Option元素实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持. 以上是小编为您精心准备的的内容,在的博客.问答

原生JS和JQuery动态添加、删除表格行的方法

  本文实例讲述了原生JS和JQuery动态添加.删除表格行的方法.分享给大家供大家参考.具体分析如下: 下面HTML代码作用:提交一个表单,将复选框的值提交(复选框的值等于后面的文本框,复选框和文本框处在同一行,可以动态添加和删除). 原生态JS版: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 4

jQuery给动态添加的元素绑定事件的方法

 这篇文章主要介绍了jQuery给动态添加的元素绑定事件的方法,对比了jQuery中事件绑定的方法以及常见版本使用绑定的区别,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了jQuery给动态添加的元素绑定事件的方法.分享给大家供大家参考.具体分析如下: jquery中绑定事件一般使用bind,或者click,但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定.在1.7版本以前使用live.但是在1.8版本以后推荐使用on.这里介绍jQuery中如何给