JavaScript知识概要

Posted 2020-10-13 泡☆影

javascript  

 1.简介    

JavaScript简介：
        JS是运行在浏览器端的一门脚本语言，一开始主要用来做浏览器验证，但现在功能已经不止于此。
        所谓脚本语言就是指，代码不需要编译，直接运行，并且读入一行运行一行
        
        JavaScript目前应用非常广泛，例如：浏览器端的验证，Ajax，客户端等，甚至也有服务器端的JavaScript--node.js     

2.编写位置      

 　　（1）网页内部
            <script type="text/javascript">
             alert("这是啥");
             </script>
         （2）外部的.js文件

　　　　JavaScript一般单独写在一个.js文件中，通过以下方法来引用
            <script type="text/javascript"  src="script.js"></script>
        （3）基本语法
             ①注释
             单行注释 //
             多行注释 /**/
             ②变量
             Ⅰ声明：JS是一门弱类型语言，声明变量时不需要指定变量的类型，只需要使用var关键字
                例如：var a；
                    
            Ⅱ赋值：
                JS是一门动态类型的语言，可以给一个变量赋任意类型的值，同时在使用过程中可以任意修改变量
                变量的类型
                a=123;
                a="hello";
            
            Ⅲ声明和赋值同时进行
                var b=123;
                var c="hello";
                var d=true;
            
            ③函数
                在JS中函数也是一个对象，也可以将一个函数的引用赋值给一个变量
                1)声明函数使用function关键字
                第一种方式：
                var sum=function(a,b){
                    return a+b;
                };
                第二种方式：
                function sum2(a,b,c){
                    return a+b+c;
                };
                sum2(2,3,4);
                
                2)函数的调用：
                    -函数的引用+（）;
                    -sum(123,234)
                    -sum2(123,"abc",true)
                调用函数不会检查参数类型和个数，所以在js中不存在重载这回事

例如：

            
            ④对象
                Ⅰ对象的创建
                    (1)var obj=new Object();
                    (2)var obj ={}
            
                Ⅱ动态的为对象添加属性
                    对象.属性名=属性值
                    例：obj.name="张三";
                        obj.age=16;
                        obj.fun=function(){
                            alert("hello");
                        };
                Ⅲ在创建对象时，直接添加属性
        

　　注意：键值对之间使用 “ ：”隔开。

 

3.事件

　　(1)用户操作网页或者浏览器所发生的交互行为称为事件。比如：点击按钮，最小化窗口，修改文本框内容等。
       (2)JS为我们定义许多浏览器中的事件。比如：单击、双击、移动 等。
       (3)我们可以通过为事件设置一个响应函数来对事件进行响应。可以通过两种方式为元素绑定响应函数：
            1)直接通过标签的属性来设置，这种方式是结构与行为耦合，不推荐使用
                 <button onclick="alert(\'hello\')">按钮</button>
                 -这种方式叫做结构与行为耦合，不推荐使用这种方式
            2)在<script>标签来设置
                <button id="btn">按钮</button>
                <script>
                    //获取到按钮的对象
                    var btn =document.getElementById("btn");
                    //为btn绑定一个单击响应函数
                    btn.onclick=function(){
                        alert("hello");
                    }
                </script>
            3)几种鼠标事件
                //鼠标单击事件
                <button id="btn" onclick="alert(\'你点我干嘛\')">点我</button>
                

　　　　　　鼠标单击按钮事件触发

　　　　
                //鼠标双击事件
                <button id="btn" ondblclick="alert(\'你点我干嘛\')">点我</button>
                //鼠标移到按钮上事件触发
                <button id="btn" onmouseover="alert(\'鼠标移动上来了！\')">点我</button>
                //鼠标从按钮上移走事件触发
                <button id="btn" onmouseout="alert(\'鼠标移走！\')">点我</button>
            
            
            

4.加载方式 

        (1)浏览器加载网页代码时是由上到下依次加载的。
        (2)如果我们在浏览器还尚未加载网页中的元素，那么将无法确定，控制台将会报错。
        解决该问题有两种方式：
            1)将JS代码编写到body标签的下边。但是我们习惯上将JS、CSS等代码都编写在head标签中，
            这种形式不符合使用规则
            2)将js代码编写到window.onload=function(){}中，推荐使用方式
            注意：编写js时，上来就把window.onload=function(){}写上

            程序是一行一行执行的，如果var btn=document.getElementById("btn1");代码之前没有写window.onload=function(){}

那么在执行的时候是找不到body里面的id="btn1",因此window.onload=function(){}作用就是加载完整个页面之后再执行里面的内容。

　　但是如果将javascript写在body里面，之前已经加载完了id="btn1"，所以var btn=document.getElementById("btn1");再运行就没有问题了。

　　注意：<button>标签只能写在body里面。

5.DOM编程 

    DOM全称：Document Object Model    

    DOM编程是JavaScript中非常重要的一部分内容 。  
    DOM主要是通过JavaScript来控制网页中的各种元素，从而达到使网页可以和用户进行动态交互的作用。
    DOM的操作主要分为四部分：增、删、改、查。
    

 　（1）document对象:
       　　 document是一个文档节点，代表整个文档，所有节点都是它的后代节点。
       　　 document也是window的对象的属性，可以直接使用。

    （2）节点类型：
               ① 元素节点：html文档中的HTML标签
               ②文本节点：元素的属性
               ③ 属性节点：HTML标签中的文本内容

　　（3）节点属性

　　（4）元素节点的属性：                

　　　　1.获取元素对象.属性名              

 　　　　例：element.value
                    element.id
                    element.className
               　 2.设置元素对象.属性名=新的值
                例：element.value="hello"
                    element.id="id01"
                    element.className="newClass"

            其它属性：
                innerHTML:元素节点通过该属性获取和设置标签内部的html代码
                nodeValue：文本节点可以通过nodeValue属性获取和设置文本节点的内容

     （5）***DOM查询
         通过document对象查询：
             document.getElementById()
            -通过id属性获取一个元素节点对象
            document.getElementsByTagName()
            -通过标签名获取一组元素节点对象
            document.getElementByName()
            -通过name属性获取一组元素节点对象,一般用来获取表单项
    
        通过具体的元素对象查询：
            element.getElementsByTagName
            -查找当前元素节点内指定标签名的子节点
   　　 element.childNodes
            -查找当前节点的所有子节点
            element.firstChild
            -查找当前节点的第一个子节点
            element.lastChild
            -查找当前节点的最后一个子节点
            element.parentNode
            -查找当前节点的父节点
            element.previousSibling
            -查找当前节点的前一个兄弟节点
            element.nextSibling
            -查找当前节点的后一个兄弟节点
      例：     

注意：1.function myQuery(idStr,func){
       　　 var btn=document.getElementById(idStr);
        　　btn.onclick=func;
        }

这段代码为4个查询中共有的内容，所以封装成一个方法，下面直接调用就可以了，避免写重复代码，起到了简化代码的作用。

　　2.在查询  “#city的所有子节点” 的时候，其实只有四个--北京，上海，东京，首尔；但是在用火狐浏览器和谷歌浏览器运行时会把

节点与节点之间的空格也当作了一个节点，所有此时应该根据元素节点的属性，用if语句判断一下if(liEle5[i].nodeType==1){} ，当nodeType==1时才是元素节点。

  
   （6）***DOM增删改
               ①创建元素节点
                document.createElement(标签名)
             ②添加子节点
                父节点.appendChild(子节点)
             ③插入节点
                父节点.insertBefore(新节点,旧节点)
             ④替换节点
                父节点.replaceChild(新节点,旧节点)
             ⑤删除节点
                父节点.removeChild(子节点)
                子节点.parentNode.removeChild(子节点) *****
             ⑥读写元素内部HTML代码
                读取
                    元素.innerHTML
                设置
                    元素.innerHTML = 新值

需要注意点：在设置元素节点时有以下两种方式：

　　　　1.document.getElementById("bj").innerHTML = "天津";
              2.document.getElementById("bj").firstChild.nodeValue="天津";

  请参照以上（4）元素节点的属性中其他属性部分。