JavaScript基础（DOM、BOM）

其他 2021-03-08 10:10:24 阅读次数: 0

学习笔记输出来源：拉勾教育Java就业急训营

修改时间：2021年1月24日
作者：pp_x
邮箱：[email protected]

文章目录

JavaScript

js的特点

  • 可以使用任何文本编辑工具编写，只需要浏览器就可以执行程序
  • 解释执行：事先不编译，逐行执行
  • 基于对象：内置大量的线程现成对象
  • 适合：
    • 客户端数据计算
    • 客户端表单合法验证
    • 浏览器事件的触发
    • 网页特殊显示效果制作

js的组成

  • ECMAScript：定义核心语法，关键字，运算符，数据类型等系列标准
  • DOM：文档对象模型，将一个html页面的所有节点看成是一个一个的对象。更有层次感的管理每一个节点。
  • BOM：浏览器对象模型，是对浏览器窗口进行访问和操作。使用 BOM，开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。
    • 弹出新的浏览器窗口
    • 移动、关闭浏览器窗口以及调整窗口大小
    • 提供** Web 浏览器详细信息的定位对象**
    • 提供用户屏幕分辨率详细信息的屏幕对象
    • 对 cookie的支持
    • IE 扩展了 BOM，加入了 ActiveXObject 类，可以通过 JavaScript 实例ActiveX对象，进而实现ajax局部刷新技术

js和html的结合

行内脚本

  • 点击触发
  • 弹框
<button onclick="alert('弹框测试')">点我一下</button>

内部脚本

<body><script> alert("弹框"); </script> </body>

外部脚本

  • 在项目根目录下创建一个目录js
  • 在js目录中创建一个文件，后缀名是.js
<script src="js/xx.js"></script>

优先级

  • 优先级，谁在上，谁先执行。因为是解释性语言。

变量

  • 为js是弱类型语言，所以，在定义变量的时候，所有的数据类型都是var
  • 数值类型：number
    • 不区分整型和浮点型
    • 所有数字采用64位浮点格式，类似于double
  • 字符串：string
    • 由单引号或者双引号括起
  • 布尔类型

自动类型转换

数字 + 字符串：数字转换为字符串 10+’a’ -> 10a 
数字 + 布尔值：true转换为1，false转换为0 true+5->6 
字符串 + 布尔值：布尔值转换为字符串true或false true+’a’->truea 
布尔值 + 布尔值：布尔值转换为数值1或0 true+true->2

数据类型转换函数

  • parseInt：强制转换成整数
    • 如果不能转换，则返回NaN
  • parseFloat：强制转换成浮点数
    • 如果不能转换，则返回NaN
  • typeof ：查询当前数值类型
    • 返回 string / number / boolean / object

null和undefined

  • null
    • 在程序中代表“无值”或者“无对象”
    • 可以通过给一个变量赋值 null 来清除变量的内容
  • undefined
    • 声明了变量但从未赋值或者对象属性不存在
var a = 10 + "a";
      var b = true + 5;
      var c = true + "a";
      var d = true + true;

      console.log(a +"|" + typeof(a) ); // 10a, string
      console.log(b +"|" + typeof(b)); //6, number
      console.log(c +"|" + typeof(c)); //truea , string
      console.log(d +"|" + typeof(d)); //2 , number

      var x = "6.32";
      console.log( parseInt(x) +"|" + typeof(parseInt(x))); // number:6
      console.log( parseFloat(x) +"|" + typeof(parseFloat(x))); // number:6.32

      var y1 = "10";
      var y2 = 10;
      var b1 = y1 == y2; // 判断值
      var b2 = y1 === y2; //严格判断
      console.log( b1 ) ; // true
      console.log( b2 ) ; // 虽然值相等，但类型不相等，所以false

数组

初始化数组的三种方式

 var arr1 = new Array();
      arr1[0] = 110;
      arr1[1] = 119;
      arr1[2] = 120;

      var arr1 = new Array(10, "hello", true);

      var arr1 = [10,"sun",false];

数组的常用方法

  • tostring()：将数组转换成字符串
  • join(连接符号)：将数组中的每个元素用连接符号连接成一个新的字符串
 var arr = [1,2,3,4];
var str = arr.join("-"); // 将数组中每个元素用-进行连接，并形成一个全新的字符串
console.log( str +",类型为：" + typeof( str ) );
  • concat(新元素)：将原来的数组连接新元素，原数组不变。
var arr = [1,2,3,4];
var arrnew = arr.concat(5,6); // 在arr数组的后面添加新的元素，形成一个新数组，但是原数组是不变的
console.log( arrnew +",类型为：" + typeof( arrnew ) );
console.log("原数组：" + arr);
  • slice(开始，结束)：在数组中提取一部分，形成新的数组。
var arr = ['a','b','c','d','e','f','g','h'];
var arrnew = arr.slice( 2,4 ); // 在arr数组中截取，从2开始（包含），4结束（不包含）
console.log( arrnew ); // cd
  • `reverse()：数组的反转（倒序）
var arr = [31,12,111,444];
console.log( arr.toString() );
arr.reverse(); // 将数组中的元素倒置
console.log( arr.toString() );
  • sort()：数组排序
var arr = [31,12,111,444];
arr.sort(); // 字符排序（不会按照字面量的大小）
console.log( arr );

Math数学对象

  • Math对象用于执行数学任务
  • 没有构造函数Math()
  • 对象的方法：
    -

Number对象

  • Number.fixed(2); 自带四舍五入技能
 var n = 12.345;
    var n1 = n.toFixed(2); // 12.35，固定两位小数，第三位小数四舍五入
    console.log( n1 );

    var x = new Number(12.3);
    var n2 = x.toFixed(2); // 12.30，固定两位小数，位数不够，0来补齐
    console.log( n2 );

日期对象

 var time = new Date();
        console.log( time ); // Tue Jul 14 2020 11:09:46 GMT+0800 (中国标准时间)

        var year = time.getFullYear(); // 年份
        var month = time.getMonth() + 1; //月份从0开，11结束，所以国内习惯要+1
        var day = time.getDate(); // 几号
        var hour = time.getHours(); // 几点
        var mm = time.getMinutes(); // 分钟
        var s = time.getSeconds(); //秒
        var ms = time.getMilliseconds(); // 毫秒， 1000毫秒 = 1秒

        var timestr = year+"年"+month+"月"+day+"号 "+hour+"点"+mm+"分"+s+"秒"+ms+"毫秒";
        console.log( timestr );

函数

  • 使用function定义函数
function 函数名( 形参列表 )
{
    
     
// 函数体 
return 返回值; 
}
  • 函数声明后需要调用才能执行
  • 注意：
    • 形参不要带数据类型
    • 分号是用来分隔可执行JavaScript语句。 由于函数声明不是一个可执行语句，所以不以分号
      结束。

无返回值

function qiuhe(a, b) {
    
    
    var he = a + b;
   console.log(he);
}

有返回值

 function qiuhe(a, b) {
    
    
     return a + b;
  }
  var he = qiuhe(1, 3);
  console.log( he );

参数对象

function test(a, b, c) {
    
    
    console.log("传入" + arguments.length + "个参数");
    console.log("第2个参数是：" + arguments[1]);
   }
   test(1, 2, 3);

构造函数

var fn = new Function("a","b","return a * b");
var ji = fn(3,4);
 console.log(ji);

注意：以分号结尾

匿名函数

var fn = function(a, b) {
    
    
        // 没有名字的函数，应该用一个变量来接收
        return a * 10 + b;
      };
console.log(fn(3, 4));

全局函数

  • isNaN：检查其参数是否是非数字值
  • eval：用来转换字符串中的运算
  • encodeURI 与 decodeURI
	console.log( isNaN( 123 ) );  // 数字，false
	console.log( isNaN( "hello" ) );  // 非数字，true
	console.log( isNaN( 4-1 ) );  // 数字，false
	console.log( isNaN( 123 ) );  // 数字，false
	console.log( isNaN( -10 ) );  // 数字，false
	console.log( isNaN( "123" ) );  // 数字，false
	console.log( isNaN( "1a23" ) );  // 非数字，true

	 var str = "1+3";
	console.log( str ); // 1+3 , +会认定为一种字符符号而已，没有加法的作用
	 console.log( eval( str ) ); // 让字符串中的运算符号生效

        var name  = "拉勾网";
        console.log( "转码前：" + name );
        name =  encodeURI(name);
        console.log( "转码后：" + name );
        name = decodeURI(name);
        console.log( "解码后：" + name );

闭包

  • 闭包的概念：指有权访问另一个函数作用域中的变量的函数，一般情况就是在一个函数中包含另一个函数
  • 闭包的作用：：访问函数内部变量、保持函数在环境中一直存在，不会被垃圾回收机制处理
function test1(){
    
    
        var count = 0; //局部变量
        function jia(){
    
    
            return count+=1; 
        }
        return jia;
    }
    var fn = test1(); // 0
    fn();
    fn();

    console.log( fn() ); // 相当于调用三次

弹框输出

  • alert()：普通弹框
  • console.log()：控制台日志输出
  • document.write()：网页中输出
  • confirm()：弹出确定框
  • prompt()：弹出输入框
<script>
        // for(var i = 1;i<=5;i++){
    
    
        //     document.write( "<h1>hello,拉勾</h1>" );
        // }

        var b = confirm("确定删除吗？");
        if(b){
    
    
            document.write( "<h1>删除成功！</h1>" );
        }else{
    
    
            document.write( "<h1>你取消了操作</h1>" );
        }

        var name =  prompt("请输入你的名字：");
        document.write( "<h1>大名："+name+"！</h1>" );
    </script>

DOM操作

  • 在一个html页面中，会使用很多标签来规划制作页面。
  • 每个标签都有它存在的意义，如果我们想要动态的修改某个标签的值。那我们就需要在页面中查找
    到这个标签元素
  • 如何查找到这个元素是个难题，W3C组织的工程师们，突然看到了一棵大树。我要是想找到某一
    片叶子，应该怎么做？
  • “顺藤摸瓜”，主树干有分支，每个分支还有许多小分支，只要把这个分支的结构整理清楚，任何一
    片叶子都不是难事了
  • 叶子和大树的一些启发，工程师们开会讨论就定了这个理论“文档对象模型”，
  • 文档对象模型，就是将页面中所有的标签元素都看成是一个对象（一片叶子），主树干定义为根节点（根元素），所有的标签都是从根元素延伸出去的，摸清结构，找到某个标签就不再困难了
    • 在节点树中，顶端节点就是根节点（root）
    • 每个节点都有父节点（除了根节点）
    • 任何一个节点都可以拥有任意数量的子节点
    • 同胞是拥有相同父节点的节点

DOM访问

  • getElementById：通过id属性获取元素节点对象
    • 实现登录
<form action="xxx" onsubmit="return login()">
      <p>帐号：<input id="username"/></p>
      <p>电话：<input id="phone"/></p>
      <p><button>登录</button></p>
    </form>

    <script>
      function login() {
    
    
         var name = document.getElementById("username").value ;
         if(name == ""){
    
    
            alert("帐号不能为空！");
            return false; // 阻止表单的提交
         }
         return true; // 放行，让表单提交
      }
    </script>
  • getElementByName：通过name属性来获取元素节点对象
    • 实现购物车全选
<h2>我的购物车</h2>
    <table border="1" cellspacing="0">
      <tr>
        <td><input type="checkbox" onchange="quan(this)" /> 全选</td>
        <td>名称</td>
        <td>单价</td>
      </tr>
      <tr>
        <td><input type="checkbox" name="one" />1</td>
        <td>功能性饮料-尖叫</td>
        <td>4.0</td>
      </tr>
      <tr>
        <td><input type="checkbox" name="one" />2</td>
        <td>火腿肠</td>
        <td>2.0</td>
      </tr>
      <tr>
        <td><input type="checkbox" name="one" />3</td>
        <td>包子</td>
        <td>1.5</td>
      </tr>
    </table>

    <p>
      <button>提交订单</button>
    </p>

  <script>
      function quan(all) {
    
    
        var arr = document.getElementsByName("one");
        for (var i = 0; i < arr.length; i++) {
    
    
          arr[i].checked = all.checked; // 将全选框的状态，赋值给每一个复选框
        }
      }
    </script>
  • getElementsByTagName：通过标签名来获取元素节点对象
    • 实现表格隔行变色
<body>
    <table border="1" cellspacing="0">
      <tr>
        <td><input type="checkbox" onchange="quan(this)" /> 全选</td>
        <td>名称</td>
        <td>单价</td>
      </tr>
      <tr>
        <td><input type="checkbox" name="one" />1</td>
        <td>功能性饮料-尖叫</td>
        <td>4.0</td>
      </tr>
      <tr>
        <td><input type="checkbox" name="one" />2</td>
        <td>火腿肠</td>
        <td>2.0</td>
      </tr>
      <tr>
        <td><input type="checkbox" name="one" />3</td>
        <td>包子</td>
        <td>1.5</td>
      </tr>
      <tr>
        <td><input type="checkbox" name="one" />4</td>
        <td>包子</td>
        <td>1.5</td>
      </tr>
      <tr>
        <td><input type="checkbox" name="one" />5</td>
        <td>包子</td>
        <td>1.5</td>
      </tr>
      <tr>
        <td><input type="checkbox" name="one" />6</td>
        <td>包子</td>
        <td>1.5</td>
      </tr>
      <tr>
        <td><input type="checkbox" name="one" />7</td>
        <td>包子</td>
        <td>1.5</td>
      </tr>
    </table>

<script>
      var rows = document.getElementsByTagName("tr"); //通过标签名获得元素对象集合
      for (var i = 0; i < rows.length; i++) {
    
    
          if(i % 2 == 1){
    
     // 奇数
            rows[i].style.backgroundColor = "pink";
          }
      }
    </script>

DOM修改

  • 修改 HTML DOM 意味着许多不同的方面：
    • 改变 HTML 内容
    • 改变 CSS 样式
    • 改变 HTML 属性
    • 创建新的 HTML 元素
    • 删除已有的 HTML 元素
    • 改变事件（处理程序）
  • 改变元素内容
document.getElementById("hello").innerHTML = "走哇，喝点去~！";
  • 改变元素样式
document.getElementById("hello").style.color = "red";
document.getElementById("hello").style.fontFamily = "华文彩云";

添加节点

 function add(){
    
    
            var img = document.createElement("img"); //  <img>
            img.setAttribute("src","../lagou-html/img/cat.gif"); //  <img src="../lagou-html/img/cat.gif">
            img.setAttribute("title","小猫咪"); // <img src="../lagou-html/img/cat.gif" title="小猫咪">
            img.setAttribute("id","cat"); // <img src="../lagou-html/img/cat.gif" title="小猫咪" id="cat">

            var divs = document.getElementsByTagName("div");
            divs[0].appendChild(img);
        }

删除节点

function del(){
    
    
            var img = document.getElementById("cat");
            img.parentNode.removeChild(img);  // 必须通过父节点，才能删除子节点
        }

替换节点

function rep(){
    
    
            var imgold = document.getElementById("cat");
            // 通过修改元素的属性，做的替换
            // img.setAttribute("src","../lagou-html/img/2.jpg");

            var imgnew = document.createElement("img"); 
            imgnew.setAttribute("src","../lagou-html/img/1.jpg"); 

            imgold.parentNode.replaceChild( imgnew, imgold );

        }

事件

窗口事件

  • onload ：当文档被载入时执行脚本
<body onload="test()">
    <script>
      function test() {
    
    
        //document.write("哈哈哈哈");
      }

表单元素事件

  • 仅在表单元素中有效
    • onblur ：当元素失去焦点执行脚本
    • onfocus：当元素获得焦点执行脚本
function a() {
    
    
        console.log("获得焦点==被激活");
      }
      function b() {
    
    
        console.log("bbb");
      }
    </script>

    <form action="">
      <p>帐号：<input onfocus="a()" onblur="b()" /></p>
      <p>密码：<input /></p>
    </form>

鼠标事件

  • onclick当鼠标被单击时执行脚本
  • ondblclick 当鼠标被双击时执行脚本
  • onmouseout 当鼠标指针移出某元素时执行脚本
  • onmouseover当鼠标指针悬停于某元素之上时执行脚本
<style>
img{
    
    
    width: 30%;
    border: 5px solid white;
}
</style>
<body>
    
    <img src="img/logo.png" onmouseover="shang(this)" onmouseout="xia(this)" onclick="dan()">
    <img src="img/logo.png" onmouseover="shang(this)" onmouseout="xia(this)" ondblclick="shuang()">
    <img src="img/logo.png" onmouseover="shang(this)" onmouseout="xia(this)" >

    <script>
    function dan(){
    
    
        alert("点了一下");
    }

    function shuang(){
    
    
        alert("连续快读点两下");
    }

    function shang(img){
    
    
        img.style.border = "5px solid red";
    }
    function xia(img){
    
    
        img.style.border = "5px solid white";
    }

    </script>

键盘事件

  • onkeydown 按下去
  • onkeyup 弹上来
<script>
        window.onkeydown = function(){
    
    
            // event：事件源（按键）
            // console.log( "按键编码："+event.keyCode );
            if(event.keyCode == "13"){
    
    
                alert("登录成功！");
            }
        }

        window.onkeyup = function(){
    
    
            console.log(event.keyCode); // 按住按键不松手是不会触发的。当松手时，按键回弹则触发
        }
    </script>

事件冒泡

  • 即点击子元素后，子元素执行完事件，父元素随之执行
  • e.stopPropagation()：子元素取消冒泡机制，e位子元素执行函数的参数
<style>
    #father {
    
    
      width: 200px;
      height: 200px;
      background: black;
      padding: 10px;
    }

    #child {
    
    
      width: 100px;
      height: 100px;
      background: greenyellow;
    }
  </style>
  <body>
    <div id="father">
      <div id="child"></div>
    </div>
    <script>

      document.getElementById("father").addEventListener("click", function() {
    
    
        alert("父级元素的事件被触发：" + this.id);
      });

      document.getElementById("child").addEventListener("click", function(e) {
    
    
        e.stopPropagation()  //取消事件的冒泡机制
        alert("子级元素的事件被触发：" + this.id);
      });
    </script>
  </body>

事件捕获

  • 即点击父元素后，父元素执行完事件，子元素随之执行
  • 激活事件捕获：父元素监听事件后添加一个ture
<style>
    #father {
    
    
      width: 200px;
      height: 200px;
      background: black;
      padding: 10px;
    }

    #child {
    
    
      width: 100px;
      height: 100px;
      background: greenyellow;
    }
  </style>

  <body>
    <div id="father">
      <div id="child"></div>
    </div>

    <script>
        document.getElementById("father").addEventListener("click",function(){
    
    
            alert("父级：" + this.id);
        },true);
        document.getElementById("child").addEventListener("click",function(){
    
    
            alert("子级：" + this.id);
        });
    </script>
  </body>

面向对象OOP

  • 使用Object创建通用对象
var user = new Object();
 user.name = "吕布";
user.age = 21;
user.say = function(){
    
    
    console.log("大家好，我叫："+this.name+"，我今年"+this.age+"岁了！");
 }

 user.say();


 var dog = new Object();
dog.nickname = "屎尿多";
dog.wang = function(){
    
    
}
dog.wang();
  • 使用构造函数
function userinfo(name , age){
    
    
     this.name = name;
     this.age = age;
     this.say = function(){
    
    
        console.log("大家好，我叫："+this.name+"，我今年"+this.age+"岁了！");
     }
 }

 var user = new userinfo("詹姆斯",35);
 user.say();
  • 使用直接量
var user = {
    
    
            username : "孙悟空",
            age : 527,
            say : function(){
    
    
                console.log("大家好，我叫："+this.username+"，我今年"+this.age+"岁了！");
            }
        };

        user.say();

JSON

  • JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。
<script>
      var json1 = {
    
     username: "吕布", age: 31 };
      console.log("姓名：" + json1.username + "，年龄：" + json1.age + "岁");

      // json数组
      var josnarr = [{
    
     name: "貂蝉", age: 18 }, {
    
     name: "小乔", age: 17 }];
      console.log("貂蝉" + josnarr[0].age + "岁了");
      console.log("小乔" + josnarr[1].age + "岁了");

      // 复杂的json对象
      var long = {
    
    
        name: "赵云",
        sex: "男",
        hobby: ["玉兰白龙驹", "龙胆亮银枪", "青釭剑"]
      };
      console.log(long.name + "的主攻武器：" + long.hobby[1]);
    </script>

BOM操作

Windows对象

  • windows.open(“网址”,“网站名”,“窗口特征”)
    在这里插入图片描述

screen屏幕对象

 <button onclick="test()">获取</button>

    <script>
    function test(){
    
    
        console.log("宽:"+ screen.width +"px，高:"+screen.height+"px");
    }
    </script>

location定位

<button onclick="test()">测试</button>
    <script>
        function test(){
    
    
            console.log( "当前页面的URL路径地址："+ location.href );
            location.reload(); // 重新加载当前页面（刷新）
            location.href = "http://lagou.com";  // 跳转页面
        }
    </script>

history浏览器历史

  • history.go(-1)：返回上一个页面
  • history.back：返回上一个页面
<button onclick="hui()">返回</button>
    <script>
    function hui(){
    
    
        history.go(-1); //上一级页面
        // history.back();
    }
    </script>

navigator导航对象

 <script>
    var str = "";
    str += "<p>浏览器的代号："+ navigator.appCodeName +"</p>";
    str += "<p>浏览器的名称："+ navigator.appName+"</p>";
    str += "<p>浏览器的版本："+ navigator.appVersion+"</p>";
    str += "<p>硬件平台："+ navigator.platform+"</p>";
    str += "<p>用户代理："+ navigator.userAgent +"</p>";
    str += "<p>启用Cookies："+navigator.cookieEnabled+"</p>";
    
    document.write(str);
    </script>

存储对象

  • 和map很相似，都是以键值对的方式存储数据

本地存储

  • 关闭窗口或标签页之后将会删除这些数据
  • 三种方式保存数据
// 三种方式保存数据
        localStorage["a"] = 1;
        localStorage.b = 2;
        localStorage.setItem("c",3);
  • 三种方式读取数据
 // 第一种方式读取
        var a = localStorage.a;
        console.log(a);
        
        // 第二种方式读取
        var b = localStorage["b"];
        console.log(b);

        // 第三种方式读取
        var c = localStorage.getItem("c");
        console.log(c);
  • 删除数据
localStorage.removeItem("name");

会话存储

  • 开启浏览器则开启一次会话，关闭浏览器则关闭会话
  • 保存数据
sessionStorage.setItem("name", "klay");
  • 提取数据
var lastname = sessionStorage.getItem("name");
  • 删除指定键的数据
sessionStorage.removeItem("name");
  • 删除会话全部数据
sessionStorage.clear();

计时操作

周期性定时器

  • setInterval(1,2)：周期性触发代码 （常用）
    • 1：执行语句
    • 2：时间周期，单位为毫秒
  • 停止计时器：将计时器对象赋给一个变量timer，使用clearInterval(timer)

一次性定时器

  • setTimeout(1,2);
    • 1：执行语句
    • 2：延时时间

猜你喜欢

转载自blog.csdn.net/weixin_46303867/article/details/113046679
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022