js基础学习:

    

       能够通过一个外部js动态创建网页里的dom节点,练习:通过引入一个外部js在当前页面实现一个IM聊天窗口,并能简单点击发送消息和拖拽窗口移动效果:

       

    部分代码:

    

 var oDiv=document.createElement('div');
    var oDiv1=document.createElement('div');
    var oDivH=document.createElement('div');
    var oA1=document.createElement('a');
    var oA2=document.createElement('a');
    var oA3=document.createElement('a');
    var oDivB=document.createElement('div');
    var oDivF=document.createElement('div');
    var oForm=document.createElement('form');
    var oTextarea=document.createElement('textarea');
    var oInput=document.createElement('input');
    oDivH.appendChild(oA1);
    oDivH.appendChild(oA2);
    oDivH.appendChild(oA3);
    oDiv.appendChild(oDivH);
    oDiv.appendChild(oDivB);
    oDiv.appendChild(oDivF);
    oDivF.appendChild(oForm);
    oForm.appendChild(oTextarea);
    oDivF.appendChild(oInput);
    document.body.appendChild(oDiv1);
    document.body.appendChild(oDiv);

    document.body.style.cssText="background:papayawhip;position:relative;min-height:900px;min-width:900px;";
    oDiv.style.cssText="width:400px;height:450px;background:#cbcbcb;border:1px solid #000;position: absolute;top:100px; left:300px;";
    oDiv1.style.cssText="width:60px;height:20px;display:none;position:fixed;bottom :10px;right:10px;border:1px solid #000;font-size:12px;";
    oDivH.style.cssText="width:400px;height:29px;background:yellow;position:relative;border-bottom:1px solid #000;position: absolute;top:0 left:0;";
    oDivB.style.cssText="width:380px;height:300px;display:block;position: absolute;top:30px; left:0;padding:10px;overflow-y:scroll;word-break:break-all";
    oDivF.style.cssText="width:400px;height:99px;display:block;border-top:1px solid #000;position:absolute;top:350px; left:0";
    oA1.style.cssText="margin-left:355px;padding:0 3px;cursor:pointer";
    oA2.style.cssText="padding:0 3px;cursor:pointer";
    oA3.style.cssText="padding:0 3px;cursor:pointer";
    oA1.innerHTML="-";
    oA2.innerHTML="+";
    oA3.innerHTML="x";
    oDiv1.innerHTML="...对话中";
    oTextarea.style.cssText="width:350px;height:60px;margin:5px auto auto 5px;";
    oInput.type="button";
    oInput.value="发送";
    oInput.style.cssText="margin-left:5px;";
    oInput.onclick=function()
    {
        if (oTextarea.value.length>0)
        {
            oDivB.innerHTML += "刘静静说:"+oTextarea.value+"
";
            oTextarea.value='';
        }
    };
    oA1.onclick=function()
    {
        if((oDiv.style.display='block'))
        {
            oDiv1.style.display='none';
        }
         if(oDiv.style.display='none')
        {
            oDiv1.style.display='block';
            oDiv1.onclick=function()
            {
                oDiv.style.display='block';
                oDiv1.style.display='none';
            }
        }
    };
    oA3.onclick=function()
    {
     oDiv.style.display='none';
    };
    var disX=0;
    var disY=0;

    oDivH.onmousedown=function(ev)
    {
        var oEvent=ev||event;

        disX=oEvent.clientX-oDiv.offsetLeft;
        disY=oEvent.clientY-oDiv.offsetTop;

        document.onmousemove=function(ev)
        {
            var oEvent=ev||event;
            var l=oEvent.clientX-disX;
            var t=oEvent.clientY-disY;
            if(l<0)
            {
                l=0;
            }
            else if(l>document.documentElement.clientWidth-oDiv.offsetWidth)
            {
                l=document.documentElement.clientWidth-oDiv.offsetWidth;
            }
            if(t<0)
            {
                t=0;
            }
            else if(t>document.documentElement.clientHeight-oDiv.offsetHeight)
            {
                t=document.documentElement.clientHeight-oDiv.offsetHeight;
            }

            oDiv.style.left=oEvent.clientX-disX+'px';
            oDiv.style.top=oEvent.clientY-disY+'px';

            oDiv.style.left=l+'px';
            oDiv.style.top=t+'px';
        };
        document.onmouseup=function()
        {
            document.onmousemove=null;
            document.onmouseup=null;
        };
        return false;    //阻止低版本火狐空的div第二次拖拽会出bug
    };


 jquery学习总结:
     
    这里贴一个JQ中实现拖拽的代码:
    
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{width: 100px;height: 100px;background: red;position: absolute;}
    </style>
    <script src="js/jquery-1.11.2.min.js"></script>
    <script type="text/javascript">
        $(function(){
            var disX = 0;
            var disY = 0;

            $('div').mousedown(function (ev) {
                disX = ev.pageX - $(this).offset().left;
                disY = ev.pageY - $(this).offset().top;

                $(document).mousemove(function (ev) {
                    $('div').css('left', ev.pageX - disX);
                    $('div').css('top', ev.pageY - disY);
                });
                $(document).mouseup(function () {
                    $(this).off();
                });
                return false;
            })
        });
  /*      $.fn.extend({
                drag:function() {
                    //this:$(#div1)
                    var disX = 0;
                    var disY = 0;
                    var This = this;

                    this.mousedown(function (ev) {
                        disX = ev.pageX - $(this).offset().left;
                        disY = ev.pageY - $(this).offset().top;


                        $(document).mousemove(function (ev) {
                            This.css('left', ev.pageX - disX);
                            This.css('top', ev.pageY - disY);
                        });
                        $(document).mouseup(function () {
                            $(this).off();
                        });
                        return false;
                    })
                }
            });*/

    </script>
    <script>
    /*    $(function()
        {
            $('#div1').drag()
        });*/
    </script>
</head>
<body>
<div></div>
</body>
</html>
下面是用的第三方验证框架实现的表单验证: