JS基础--JavaScript实例集锦(初学)

Posted 筱风能动浪,岸树不遮山

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS基础--JavaScript实例集锦(初学)相关的知识,希望对你有一定的参考价值。

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>

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>

 




以上是关于JS基础--JavaScript实例集锦(初学)的主要内容,如果未能解决你的问题,请参考以下文章

JS对Cookie的应用--JavaScript实例集锦(初学)

JavaScript实现全选选项框的功能和鼠标划入出现下拉框的功能--JavaScript实例集锦(初学)

javascript基础集锦_Json

javascript基础集锦

javascript基础集锦_Json——原型继承

web前端开发初学者十问集锦