时间戳

首页 > 技术文章 > JS基础--JavaScript实例集锦（初学）

JS基础--JavaScript实例集锦（初学）

cheryshi 2018-02-05 18:24 原文

1.子节点childNodes：

<!DOCTYPE html>
<html>
<head>
    <title>childNodes</title>
</head>
<script type="text/javascript">
    window.onload=function(){
        var oUl=document.getElementById('ul1');
        //alert(oUl.childNodes.length);
        for(var i=0;i<oUl.childNodes.length;i++){
            /*if(oUl.childNodes[i].nodeType==1){
                oUl.childNodes[i].style.background='red';
            }*/    
            oUl.children[i].style.background='red';
        }
        
        
    }
</script>
<body>
    <ul id="ul1">
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

2.父节点parentNodes

<!DOCTYPE html>
<html>
<head>
    <title>ParentNpdes</title>
    <script type="text/javascript">
        window.onload=function(){
            var oUl=document.getElementById('ul1');
            var aA=document.getElementsByTagName('a');
            for(var i=0;i<aA.length;i++){
                aA[i].onclick=function(){
                    this.parentNode.style.display='none';
　　　　　　　　　　　　//设置a的父节点li为隐藏
                }
            }
        }
    </script>
</head>
<body>
    <ul id="ul1">
        <li>gfhfhghgh<a href="javascript:;">hide</a></li>
        <li>hhhh<a href="javascript:;">hide</a></li>
        <li>hhbb<a href="javascript:;">hide</a></li>
        <li>erere<a href="javascript:;">hide</a></li>
        <li>gggg<a href="javascript:;">hide</a></li>
    </ul>
</body>

3.className

<!DOCTYPE html>
<html>
<head>
    <title>className</title>
</head>
<script type="text/javascript">
    function getByClass(oParent,sClass){
        var aEle=oParent.getElementsByTagName('*');//all elements
        var aResult=[];//save the find elements
        for(var i=0;i<aEle.length;i++){
            if(aEle[i].className==sClass){
                aResult.push(aEle[i]);
            }
        }
        return aResult;
    }
    window.onload=function(){
        var oUl=document.getElementById('ul1');
        var aOn=getByClass(oUl,'on');
        for(var i=0;i<aOn.length;i++){
            aOn[i].style.background='yellow';
        }
    }
</script>
<body>
<ul id="ul1">
    <li></li>
    <li class="on"></li>
    <li></li>
    <li class="on"></li>
    <li></li>
</ul>
</body>
</html>

4.removeChild方法

<!DOCTYPE html>
<html>
<head>
    <title>removeChild</title>
</head>
<script type="text/javascript">
    window.onload=function(){
        var aA=document.getElementsByTagName('a');
        var oUl=document.getElementById('ul1');
        for(var i=0;i<aA.length;i++){
            aA[i].onclick=function(){
            oUl.removeChild(this.parentNode);
            }
        }
    }
</script>
<body>
    <ul id="ul1">
        <li>ssss  <a href="javascript:;">remove</a></li>
        <li>tryyy  <a href="javascript:;">remove</a></li>
        <li>kkkk  <a href="javascript:;">remove</a></li>
        <li>ggg   <a href="javascript:;">remove</a></li>
        <li>hjjhk  <a href="javascript:;">remove</a></li>
    </ul>

</body>
</html>

5.使用函数，便于获取css样式

<!DOCTYPE html>
<html>
<head>
    <title>css function</title>
    <style type="text/css">
        #div1{width:200px;height: 200px;background: red;}
    </style>
    <script type="text/javascript">
        //获取哪个，哪个样式
        function getStyle(obj,attr){
            if(obj.currentStyle){
                return obj.currentStyle[attr];
            }else{
                return getComputedStyle(obj,false)[attr];
            }

        }
        function css(obj,attr,value){
            if(arguments.length==2){
                return getStyle(obj,attr);
            
        }else if(arguments.length==3){
            obj.style[attr]=value;
        }
    }
        window.onload=function(){
            var oBtn=document.getElementById('btn');
            var oDiv=document.getElementById('div1');
            oBtn.onclick=function(){
                css(oDiv,'background','green');
                alert(css(oDiv,'width'));
            }
        }
    </script>
</head>
<body>
    <input type="button" id="btn" value="type">
    <div id="div1"></div>
</body>
</html>

6.创建DOM元素

<!DOCTYPE html>
<html>
<head>
    <title>create Dom elements</title>
</head>
<script type="text/javascript">
    window.onload=function(){
        var OBtn=document.getElementById('btn');
        var oUl=document.getElementById('ul1');
        var oTxt=document.getElementById('txt1');
        OBtn.onclick=function(){
            var oLi=document.createElement('li');
            //oUl.appendChild(oLi);创建li元素
            var aLi=oUl.getElementsByTagName('li');//获取所有的li元素
            oLi.innerHTML=oTxt.value;//写入文字
            if(aLi.length==0){
                oUl.appendChild(oLi);//如果ali的长度为0，则新添加一个li元素
            }else{
                oUl.insertBefore(oLi,aLi[0]);//如果不为0，则在li前面添加新的li元素

            }
            
        }
    }
</script>
<body>
    <input type="text" id="txt1">
    <input id="btn" type="button" value="createli">
    <ul id="ul1"></ul>
</body>
</html>

7.JS的json运用

<!DOCTYPE html>
<html>
<head>
    <title>json</title>
</head>
<script type="text/javascript">
    var obj={a:5,b:6,c:'abc',d:[1,2,3,4]};
    //var arr=[{a:5,b:12},{a:6,b:19}];
    //alert(obj.d[0]);
    //alert(arr[1].b);
    var attr='';
    for(attr in obj){
        alert(attr+'='+obj[attr]);
    }
</script>
<body>

</body>
</html>

如果是Json只能用 for...... in;如果是array可以用for循环和for...in，一般array用for循环

8.JS操作键盘，keycode
1.运用数字所在的键盘值，来设置输入值只为数字

<!DOCTYPE html>
<html>
<head>
    <title>Only Input Number</title>
</head>
<script type="text/javascript">
    window.onload=function(){
    var oTxt=document.getElementById('txt1');
    oTxt.onkeydown=function(ev){
        var oEvent=ev||event;
        //alert(oEvent.keyCode);
        //0---48 9----57 small keyboard 0---96 9----105
        if (oEvent.keyCode!=8&&(oEvent.keyCode<48||oEvent.keyCode>57)&&(oEvent.keyCode<96||oEvent.keyCode>105)) {
            return false;
        }
    

    };
};
</script>
<body>
<input type="text" id="txt1">
</body>
</html>

2.利用键盘上的上下左右键控制物体的运动

<!DOCTYPE html>
<html>
<head>
    <title>keycode-div</title>
    <style type="text/css">
    #div1{width:100px;height: 100px;background: #ccc;position: absolute;}
</style>
<script type="text/javascript">
    document.onkeydown=function(ev){
        var oEvent=ev||event;
        var oDiv=document.getElementById('div1');
        //alert(oEvent.keyCode);
        //← 37→ 39 ↓ 40 ↑38
        if(oEvent.keyCode==37){
            oDiv.style.left=oDiv.offsetLeft-10+'px';
        }else if(oEvent.keyCode==39){
            oDiv.style.left=oDiv.offsetLeft+10+'px';
        }else if(oEvent.keyCode==38){
            oDiv.style.top=oDiv.offsetTop-10+'px';
        }else if(oEvent.keyCode==40){
            oDiv.style.top=oDiv.offsetTop+10+'px';
        }



    }
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>

3.使用KeyCode控制输入的值只能是数字

<!DOCTYPE html>
<html>
<head>
    <title>Only Input Number</title>
</head>
<script type="text/javascript">
    window.onload=function(){
    var oTxt=document.getElementById('txt1');
    oTxt.onkeydown=function(ev){
        var oEvent=ev||event;
        //alert(oEvent.keyCode);
        //0---48 9----57 small keyboard 0---96 9----105
        if (oEvent.keyCode!=8&&(oEvent.keyCode<48||oEvent.keyCode>57)&&(oEvent.keyCode<96||oEvent.keyCode>105)) {
            return false;
        }
    

    };
};
</script>
<body>
<input type="text" id="txt1">
</body>
</html>

5.使用keycode的ctrl+enter提交留言

<!DOCTYPE html>
<html>
<head>
    <title>ctrl+enter submit the messages </title>
</head>
<script type="text/javascript">
    window.onload=function(){
        var oBtn=document.getElementById('btn');
        var oTxt1=document.getElementById('txt1');
        var oTxt2=document.getElementById('txt2');
        oBtn.onclick=function(){
            oTxt1.value+=oTxt2.value+'\n';
            oTxt2.value='';
        };
        oTxt2.onkeydown=function(ev){
            var oEvent=ev||event;
            if(oEvent.ctrlKey&&oEvent.keyCode==13){
                oTxt1.value+=oTxt2.value+'\n';
                oTxt2.value='';
            }
        }
    }
</script>
<body>
    <textarea id="txt1" rows="10" cols="40"></textarea><br/>
    <input type="text" id="txt2">
    <input id="btn" type="button" value="Note">

</body>
</html>

9.利用window的scrollTop去判断物体所在的位置和弹出自定义的右键菜单

<!DOCTYPE html>
<html>
<head>
    <title>siderbarAd</title>
    <style type="text/css">
        #div1{width:100px;height:100px;position: absolute;right: 0;background: red;}
    </style>
    <script type="text/javascript">
    window.onresize=window.onload=window.onscroll=function(){
            var oDiv=document.getElementById('div1');
            var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
            var t=(document.documentElement.clientHeight-oDiv.offsetHeight)/2;
            oDiv.style.top=scrollTop+t+'px';
        }
    </script>
</head>
<body style="height: 2000px;">
    <div id="div1"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <title>弹出自定义的右键菜单</title>
    <style type="text/css">
        *{margin:0;padding: 0;}
        #ul1{width: 100px;background: #ccc;border:1px solid black;position: absolute;display: none;}
    </style>
    <script type="text/javascript">
        document.oncontextmenu=function(ev){
            var oEvent=ev||event;
            var oUl=document.getElementById('ul1');
            var scrollTop=document.documentElementscrollTop||document.body.scrollTop;
            var scrollLeft=document.documentElementscrollLeft||document.body.scrollLeft;
            oUl.style.display="block";
            oUl.style.left=oEvent.clientX+scrollLeft+'px';
            oUl.style.top=oEvent.clientY+scrollTop+'px';
            return false;
        };
        document.onclick=function(){
            var oUl=document.getElementById('ul1');
            oUl.style.display='none';
        };
    </script>
</head>
<body>
    <ul id="ul1">
        <li>Login</li>
        <li>Back to home</li>
        <li>Logout</li>
        <li>add in VIP</li>
        <li>cancel</li>
</ul>
</body>
</html>

 

推荐阅读