JS基础知识和实例：_js基础知识总结例子-CSDN博客

本文链接：https://blog.csdn.net/Wlcf258/article/details/54291840

1.json的使用

  JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写，同时也易于机器解析和生成。它基于JavaScript（Standard ECMA2623rd Edition December1999）的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C, C++, C#, Java,JavaScript, Perl, Python等）。这些特性使JSON成为理想的数据交换语言。

例子：
<script type="text/javascript"> // var arr=[1,2,3] 伪数组 var json={ a:1, b:2, c:3 } for(var i in json){ // for in 的使用 console.log(json[i]); } </script>

2.arguments的使用以及如何获取和设置行间样式：

   arguments：可变参，可以存储所有的参数

获取和设置行间样式实例：

<script type="text/javascript">
            function css(){
                //  自定义函数css
                if(arguments.length==2){
                    //  return oDiv.style.width;  //  ==2 获取样式的值
                    return arguments[0].style[arguments[1]];
                }
                else if(arguments.length==3){
                //   return oDiv.style.width='600px';  //   ==3 设置样式的值
                return arguments[0].style[arguments[1]]=arguments[2];
                }
            }
            window.onload=function(){
               var oDiv=document.getElementById('div');
               //  css(oDiv,'width'); //     获取自定义css的样式                        
            //  var wd=css(oDiv,'width','700px');   //     设置自定义css的样式
              css(oDiv,'width','700px');   //设置宽度为700px
              css(oDiv,'height','300px');   //设置高度为700px
              css(oDiv,'background','yellow');//设置背景颜色为700px
               css(oDiv,'border','3px solid blue');//设置边框，1px blue
                var bor=css(oDiv,'border','3px solid blue');            
            }
        </script>

3.数组的应用

(1.)数组的定义：var arr=[3, 5, 8, 9];
(2.)数组的属性length:1.既可以获取，又可以设置
                2.快速清空数组
(3.）数组对象：
      ![对象数组](https://img-blog.csdn.net/20170109192631124?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvV2xjZjI1OA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)

 实例:

           var arr2=['10','5','8','6','1']; //  创建数组
            arr2.sort(function(n1,n2){   //   能够帮数组字符串里面的内容进行升序
                return n1-n2;
            })
            console.log(arr2);  //输出升序后的数组

4.定时器

 定义方法：
 定时器的名字 = setInterval(函数，毫秒值);
 setInterval(fn,1000);
 setInterval("fn()",1000);
 setInterval(functong fn(){},1000);

定时器练习：

<script type="text/javascript">
            window.onload=function(){
            function show(){   // 自定义函数
                alert('a');
            }           
        //      setInterval(show,1000) // 间隔器（像定时炸弹）函数名，时间毫秒，不断的重复
        //  setTimeout(show,1000);   //  延迟，只执行一次           
        var oBtn1=document.getElementById('btn1');//获取id
        var oBtn2=document.getElementById('btn2');
        var timer=null;  //  清空秒表时数     
        oBtn1.onclick=function(){   //单击开始计时
            // SetInterval为自动重复，setTimeout不会重复
            timer=setInterval(function(){
                alert('a');
            },5000);   //  5000 表示5秒后开始计时
        }
        oBtn2.onclick=function(){
            clearInterval(timer);  //清除已设置的setTimeout对象 
        }               
        }   
        </script>
    </head>
    <body>
        <input id="btn1" type="button" value="开启" />
        <input id="btn2" type="button" value="关闭" />
    </body>

5.DOM基础

   1.什么是DOM：文档对象模型。赋予js操作节点的能力。当网页被加载时，浏览器会创建页面的文档对象模（DocumentObjectModel）。
   2 .childNodes nodeType
     .获取子节点
     . children
   3.parentNode：获取父节点

例子：(3.)点击链接，隐藏整个li

<script>
            window.onload = function() {
                var aA = document.getElementsByTagName('a'); //  获取id节点
                for(var i = 0; i < aA.length; i++) {
                    aA[i].onclick = function() {   //  设置点击效果
                        this.parentNode.style.display = 'none'; //  获取父节点,同时设置为隐藏
                    };
                }
            };
        </script>
    </head>
    <body>
    <ul id="ul1">
        <li>隐藏
            <a href="javascript:;">隐藏</a></li>
        <li>隐藏
            <a href="javascript:;">隐藏</a></li>
        <li>隐藏
            <a href="javascript:;">隐藏</a></li>
        <li>隐藏
            <a href="javascript:;">隐藏</a></li>
        <li>隐藏
            <a href="javascript:;">隐藏</a></li>
    </ul>
    </body>

 4.DOM方式操作元素属性:
      获取：getAttribute(名称)
      设置：setAttribute(名称, 值)
      删除：removeAttribute(名称)

  5.首尾子节点:
      有兼容性问题
      firstChild、firstElementChild
      lastChild 、lastElementChild

 6.兄弟节点:
      有兼容性问题
      nextSibling、nextElementSibling
      previousSibling、previousElementSibling

6.DOM应用

  1、创建DOM元素
       createElement(标签名) 创建一个节点
       appendChild(节点) 追加一个节点

<body>
        <div id="div1">
            <p id="p1">This is a paragraph.</p>
            <p id="p2">This is another paragraph.</p>
        </div>
    </body>
    <script>
        var para = document.createElement("p");//创建文本节点
        var node = document.createTextNode("This is new.");//向 <p> 元素追加文本节点
        para.appendChild(node);//向已有元素追加这个新元素
        var element = document.getElementById("div1");//找到一个已有的元素
        element.appendChild(para);// 向这个已存在的元素追加新元素
    </script>

  2、插入DOM元素
      insertBefore(节点, 原有节点) 在已有元素前插入

  3、删除DOM元素
      removeChild(节点) 删除一个节点