JS小结

悠悠 2022-04-24 06:22 198阅读 0赞

**目录**

前言

基础语法

函数的定义——function和Function

闭包函数：

DOM（Document Object Model，文档对象模型）

概念理解：

BOM(Browser Object Model)浏览器对象模型

--------------------

# 前言 #

JavaScript 是一种轻量级，解释型的Web开发语言

> JavaScript  
>     -> 基础语法  
>     -> DOM(文档对象模型)  
>     -> BOM  
>     -> jQuery(DOM、BOM)  
>     -> js高级

# 基础语法  #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htbDE5OTY_size_16_color_FFFFFF_t_70][]

###  函数的定义——function和Function ###

//Function 通过他来构造函数
    //其中，包含2个参数，和主体部分 效果是：张三：Hi!
    var say = new Function("name","say","document.write('< h1 >'+name+':'+say+'< h1 >');");;
    say("张三"，"Hi!");
    
    
    //function 通过他来声明函数
    var say = function(name,say){
        document.write('< h1 >'+name+':'+say+'< h1 >');
    }
    say("张三"，"Hi!");

### 闭包函数： ###

**外部函数被调用之后，他的变量不会消失，仍然被内部函数所使用的，并且内部函数都拥有对外部函数的访问权**

/*a 是外层函数，闭包函数
     *n 是私有变量
     *b 是内部函数
     */
    
    function a(){
       var n=0;
       function b (m){
          n=n+m；
            return n;
       }
    return b;
    }
    var b=a();
    document.write(b(3));//输出3
    document.write(b(3));//输出6
    document.write(b(3));//输出9
    document.write(b(3));//输出12

# DOM（Document Object Model，文档对象模型） #

是W3C执行的一套技术规范，用来描述JavaScript脚本怎么与HTML和XML文档进行交互的Webbiaozhuan ,DOM规定了一系列标准接口，允许开发人员通过标准方法访问文档结构，操作网页内容，控制样式和行为

> DOM文档对象模型  
>     -> 理解DOM的概念(重点)  
>     -> 知道如何对节点进行增删改查  
>     -> 理解事件

### ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htbDE5OTY_size_16_color_FFFFFF_t_70 1][] ###

### 概念理解：  ###

>  理解DOM  
>     <html>  
>         <head>  
>             <title>理解DOM</title>  
>         </head>  
>         <body>  
>             <p>  
>                 今天天气<span style="color:red;font-size:30px;">很好</span>，昨天很冷...</p>  
>         </body>  
>     </html>

>  对节点进行增删改查  
>     -> 节点是有类型(文件节点,元素节点,属性节点)  
>         -> 标准DOM定义中有12种  
>         -> 元素节点        1  
>         -> 文本节点        3  
>         -> 属性节点        2  
>         -> 获得方式  
>             <node>.nodeType  
>     -> 为节点添加事件的方法  
>         <node>.onclick = function() \{\};  
>     -> 如何获得节点  
>         -> 节点对象 document.getElementById("id的字符串")  
>             获得页面中指定id的节点对象  
>         -> 节点集合 document.getElementsByTagName("标签名"); // 可以使用"\*"  
>             获得页面中所有标签名符合要求的标签  
>         -> 节点集合 父节点.getElementsByTagName("标签名");  
>             获得指定父节点下的所有名字符合要求的节点  
>         -> 属性(如果是元素节点，那么他可以有子节点)  
>             <node>.childNodes    获得节点下的所有子节点  
>             <node>.firstChild    <node>.childNodes\[0\]      
>             <node>.lastChild    <node>.childNodes\[<node>.childNodes.length - 1\]  
>     -> 修改节点  
>         -> 所谓的修改节点就是修改节点的属性与包含的文本  
>         -> 获得节点  
>         -> 修改属性的标准方法（DOM-Core）  
>             <node>.setAttribute("属性名", "值");  
>             文本 <node>.getAttribute("属性名");  
>         -> DOM-html  
>             <node>.属性名 = 值;  
>             var v = <node>.属性名;

<html>
    <head>
        <meta charset="utf-8" />
        <title>走马灯</title>
        <script type="text/javascript">
            onload = function () {
                var hello = document.getElementById("hello");//获取id节点
                setInterval(function () {
                    var txt = hello.innerHTML;
                    var head = txt.charAt(0);
                    var body = txt.substr(1);
                    hello.innerHTML = body + head;
                }, 200);
            };
        </script>
    </head>
    <body>
        <p id="hello">一天不要只做一件事情，累得很</p>
    </body>
    </html>

# BOM(Browser Object Model)浏览器对象模型 #

主要用于管理浏览器窗口，提供了独立的，可以与浏览器窗口进行互动的功能，这些功能与任何网页内容无关。BOM由多个对象组成，其中代表浏览器窗口的window对象是BOM的顶层对此昂，其他对象都是该对象的子对象。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htbDE5OTY_size_16_color_FFFFFF_t_70 2][]

>  计时器  
>     -> 开启计时器  
>         number window.setInterval(callback, millisecond);  
>         每隔制定毫秒后调用一次回调函数，返回一个ID  
>     -> 关闭计时器  
>         window.clearInterval(intervalId);
> 
> 延时器  
>     -> 等待制定时间再来执行代码，语法与计时器类似，但是只执行一次  
>     -> 开启  
>         number window.setTimeout(callback, millisecond);  
>         等待制定时间调用回调函数，注意只会执行一次，返回的是延时器id  
>     -> 关闭  
>         clearTimeout(timeoutId);  
> 在javascript要求是不允许访问本地资源的  
>     -> 设置值  
>         clipboardData.setData("text", 值);  
>     -> 取值  
>         clipboardData.getData("text");

<html>
    <head>
        <meta charset="utf-8" />
        <title>计时器</title>
        <script >
            onload = function () {
                window.date.innerHTML = new Date().toLocaleString();
                var isRun = true;
                var inter = setInterval(function () {
                    if (isRun) {
                        window.date.innerHTML = new Date().toLocaleString();
                    }
                }, 1000);
                document.getElementById("btnstop").onclick = function () {
                    //if (this.value == "stop") {
                    //    isRun = !isRun;
                    //    this.value = "begin";
                    //} else {
                    //    isRun = !isRun;
                    //    this.value = "stop";
                    //}
                    isRun = !isRun;
                    this.value = "stop,begin".split(',')[Number(isRun)];
                };
            }
        </script>
    </head>
    <body>
        <div>
            <a>Now Time:<span id="date"></span></a>
            <input type="button" name="btn" value="stop" id="btnstop">
        </div>
    </body>
    </html>

<html>
    <head>
        <meta charset="utf-8" />
        <title>倒数跳转</title>
    
        <script type="text/javascript">
            onload = function() {
                setInterval(function () {
                    //获取当前秒数5
                    var num = document.getElementById("second");
                    //对当前的内容-1
                    var newnum = num.innerHTML - 1;
                    //把-1后的内容，赋值给当前显示时间，获得一个标签下的内容
                    num.innerHTML = newnum;
                },1000)
            }
        </script>
    </head>
    <body>
        <p>
            请等待<span id="second">5</span>秒后跳转
        </p>
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htbDE5OTY_size_16_color_FFFFFF_t_70]: /images/20220218/2271cc3b23124d95a93ee39f374626b6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htbDE5OTY_size_16_color_FFFFFF_t_70 1]: /images/20220218/b8565c9b1e334a1eab2d8d43fa4711df.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htbDE5OTY_size_16_color_FFFFFF_t_70 2]: /images/20220218/35f9a91be88247b6bc658c61b13f69ac.png