JS小结

最新推荐文章于 2021-10-07 16:36:03 发布

原创最新推荐文章于 2021-10-07 16:36:03 发布 · 336 阅读

0 ·

CC 4.0 BY-SA版权

感谢您的阅读，本文为博主原创文章，未经博主允许不得转载。

文章标签：

#javascript

前端专栏收录该内容

14 篇文章

订阅专栏

本文深入解析JavaScript的基础语法，包括函数定义与闭包特性，详细讲解DOM与BOM的概念及应用，如节点操作与事件处理，同时演示了计时器和延时器的使用方法。

前言

基础语法

函数的定义——function和Function

闭包函数：

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

概念理解：

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

前言

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

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

基础语法

函数的定义——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的概念(重点)
   -> 知道如何对节点进行增删改查
   -> 理解事件

概念理解：

理解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的顶层对此昂，其他对象都是该对象的子对象。

计时器
   -> 开启计时器
       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>