1. 全栈程序员必看首页

js之（定时器、运动函数、Math、Date、String、Array、DOM、表单、BOM）

全栈程序员-站长 • • 未分类 • 阅读 1

js之（定时器、运动函数、Math、Date、String、Array、DOM、表单、BOM）day01

定时器 （时间：ms ===.001s）

  • 概念：JavaScript提供了一些原生的方法来实现延迟某些时间执行某段代码。
  • setTimeout延迟定时器：
    • ①含义： 设置延迟定时器 设置延迟定时器之后，代码可以延迟指定的时间之后再执行
    • ②语法：setTimeout(函数,延迟时间) 延迟时间不带单位
    • 应用场景：广告弹窗
 <style> img { 
    display: none; } </style> <img src="./img/ta.jpg" alt=""> <script> /* 需求：过3秒之后，图片显示 */ var oImg = document.getElementsByTagName('img')[0] setTimeout(show, 3000) //注意，这里不用调用函数，而是选择这个函数 function show(){ 
    oImg.style.display = 'block' } </script> 
 <style> div { 
    position: relative; width: 608px; display: none; } button { 
    position: absolute; top: 0; right: 0; } </style> <div> <button>点我</button> <img src="./img/ta.jpg" alt=""> </div> <script> /* 需求：页面一进来是隐藏的，过2秒后显示，点击按钮图片隐藏，再过2秒图片又显示出来 */ var oDiv = document.getElementsByTagName('div')[0] var btn = document.getElementsByTagName('button')[0] setTimeout(function () { 
    oDiv.style.display = 'block' }, 2000) btn.onclick = function () { 
    oDiv.style.display = 'none' setTimeout(function () { 
    oDiv.style.display = 'block' }, 2000) } </script>
  • setInterval间歇定时器：
    • ①含义：设置间歇定时器 设置间歇定时器之后，代码会每隔一段时间执行一次
    • ②语法：setInterval(函数,间隔时间) 间隔时间不带单位
    • ③间歇定时器一旦设置好之后，是不会自动停止的，会比较消耗计算机性能
    • 使用场景：倒计时，轮播图的切换
document.body.innerHTML 操作body的内容部分 document.write() 操作body的内容部分，会覆盖掉之前body中第一次显示的内容，但是通过这种方式显示的，不会覆盖能识别的标签
  • 定时器ID
    • ①我们每设置一个定时器，定时器都会自动生成一个id，这id就是当前定时器的唯一标识， 可以表示这个定时器。
    • ②定时器id的获取方式：定时器id就是定时器的返回值
      • 1)函数的返回值就是函数调用表达式的值返回值===函数名()
      • 2)定时器id===setTimeout(函数,时间)/setInterval(函数,时间)
    • ③定时器id是一个数字，这个数字按照定时器在代码中出现的顺序，从1开始依次排列
 var num1 = setTimeout(function () { 
    console.log('我爱你，塞北的雪'); }, 1000) var num2 = setTimeout(function () { 
    console.log('但我更爱南方姑娘'); }, 2000) var num3 = setTimeout(function () { 
    console.log('云想衣裳花想容，春风拂槛露华浓'); }, 2000) var num4 = setInterval(function () { 
    }, 1000) console.log(num1, num2, num3, num4);//1,2,3,4
  • 清除定时器
    • ①clearTimeout(要清除定时器的ID) 清除延迟定时器
    • ②clearInterval(要清除定时器的ID) 清除间歇定时器
 //倒计时----------------------------------------------------- var oDiv = document.getElementsByTagName('div')[0] var num = 10 var timer3 = setInterval(function () { 
    num-- if (num <= 0) { 
    clearInterval(timer3) } oDiv.innerHTML = num }, 1000)

函数运动封装

  • 实现div移动动画
    • ①设置动画的三要素：起点、终点、步长
    • ②向前迈一只脚 更新起点位置
    • ③后一只脚跟上 定位div(新位置=旧位置+步长)
    • ④判断是否到达终点
  • 实现div的双向移动
    • ①大体思路和div移动一样，区别在运动方向的变化
    • ②三要素中步长的正负，表示运动的方向；正表示运动方向为正，负表示运动方向为负。
 <style> div { 
    width: 100px; height: 100px; background: pink; position: relative; } </style> <div></div> <button>向前移动</button> <button>向后移动</button> <script src="./ujiuye.js"></script> <script> /* 1、把主要代码放入函数中 2、找出其中不确定的值 3、把参数带入不确定的值中 4、测试调用 */ var oDiv = document.getElementsByTagName('div')[0] var btn = document.getElementsByTagName('button') var timer = null btn[0].onclick = function () { 
    move(oDiv, 'left', 10, 500) } btn[1].onclick = function () { 
    move(oDiv, 'left', 10, 0) } //不确定的值 ele元素、target终点、sped步长、attr样式 function move(ele, attr, sped, target) { 
    //隐式var sped = 10 clearInterval(timer) //判断：如果当前值<目标值sped+10；如果当前值>目标值sped-10 sped = parseInt(getStyle(ele, attr)) < target ? sped : -sped //定时器是可以叠加的，在可以被频繁触发的地方设置定时器之前一定要先清除定时器 timer = setInterval(function () { 
    //起点， 每次都要更新新的位置 新位置=起点+步长 var start = parseInt(getStyle(ele, attr)) + sped //判断是否到达终点 向右——>sped>0&&start>=target 向左——>sped<0&&start<=target if ((start >= target && sped > 0) || (start <= target && sped < 0)) { 
    start = target clearInterval(timer) } //设置div的新位置 ele.style[attr] = start + 'px' }, 30) } </script>

移动动画

Math方法

用户可以通过调用内置对象方法来实现一些基础性的效果

  • Math.floor()：向下取整，去掉小数部分
  • Math.ceil()：向上取整，去掉小数部分(进一位)
  • Math.round()：四舍五入
  • Math.max()：获取数字序列中最大的值
  • Math.min()：获取数字序列中最小的值
  • Math.pow(底数，指数)：计算某个数字的次方数
  • Math.sqrt()：开根号 开二次方
  • Math.random()：生成一个0-1之间的随机数 取得到0，取不到1
  • parseInt(Math.random()*(y-x)+x) 取x-y之间随机数
 //向下取整 console.log(Math.floor(3.64)); //3 //向上取整 console.log(Math.ceil(5.36)); //6 //四舍五入 console.log(Math.round(2.34)); //2 console.log(Math.round(2.74)); //3 //获取数字序列中最大的值 console.log(Math.max(2, 3, 4, 5, 6)); //6 //获取数字序列中最小的值 console.log(Math.min(2, 3, 4, 5, 6, 7, 8, 9)); //2 //计算某个数字的次方数 console.log(Math.pow(2, 4)); //16 2*2*2*2 //开根号 console.log(Math.sqrt(36)); //6 //生成0-1之间随机数 可以取到0，但是取不到1 console.log(Math.random()); 
 /* 生成0-1随机数 Math.random() */ //生成0-10之间随机整数 console.log(parseInt(Math.random() * 10)); //生成x-y之间随机整数 parseInt(Math.random()*(y-x)+x) console.log(parseInt(Math.random() * (20 - 10) + 10)); /* parseInt(Math.random() * (20 - 10) + 10) Math.random() * (20 - 10) 先取出0-10之间的随机数 +10 在0-10之间直接+10 */ 
 <div>字母</div> <button>停止</button> <script> var oDiv = document.getElementsByTagName('div')[0] var btn = document.getElementsByTagName('button')[0] var arr = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'] var timer = setInterval(function () { 
    //获取随机数 var num = parseInt(Math.random() * arr.length) oDiv.innerHTML = arr[num] }, 100) btn.onclick = function () { 
    clearInterval(timer) } </script>

日期对象

  • 获取系统时间
    • 创建时间对象：new Date() 获取当前系统时间
    • get/setFullYear()：返回或设置年份，用四位数表示。
    • get/setMonth()：返回或设置月份。0为一月，比实际少1个月（0-11）
    • get/setDate()：返回或设置日期。
    • getDay()：返回星期 0为星期天 setDay()已废弃 （0-6）
    • get/setHours()：返回或设置小时，24小时制
    • get/setMinutes()：返回或设置分钟数。
    • get/setSeconds()：返回或设置秒钟数。
    • getTime()：返回时间戳（毫秒为单位） setTime()禁止使用
 //创建时间对象 var date = new Date() /* Tue Sep 22 2020 10:05:44 GMT+0800 (中国标准时间) 星期 月份 日期 年份 具体时间 时区(东八区) */ console.log(date); //获取年份 console.log(date.getFullYear()); //2020 //设置年份 // date.setFullYear(2018) console.log(date.getFullYear()); //2018 //获取月份 在js中，月份是0-11 console.log(date.getMonth()); //8 //设置月份 // date.setMonth(3) console.log(date.getMonth()); //3 //获取日期 console.log(date.getDate()); //22 //设置日期 // date.setDate(20) console.log(date.getDate()); //20 /* 获取星期 星期获取出来的是0-6 0表示周日 1表示周一 2表示周二 3表示周三 4表示周四 5表示周五 6表示周六 */ console.log(date.getDay()); //2 // date.setDay(4) //已经被废弃了 //获取小时 console.log(date.getHours()); //10 //获取分钟 console.log(date.getMinutes()); //16 //获取秒 console.log(date.getSeconds()); //22 /* 时间戳 从1970-1-1 00:00:00 到当前日期的毫秒数 */ console.log(date.getTime()); //39

案例：电子表

 <h1></h1> <script> var oH = document.getElementsByTagName('h1')[0] getD() setInterval(getD, 1000) function getD() { 
    //创建时间对象 var date = new Date() //获取年份 var y = date.getFullYear() //获取月份 获取的月份要比当前月份小1，那么在使用的时候就要+1 var m = date.getMonth() + 1 //获取日期 var d = date.getDate() //获取星期 var week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'] var w = date.getDay() //获取小时 var h = date.getHours() < 10 ? '0' + date.getHours() : date.getHours() //获取分钟 var mi = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes() //获取秒 var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds() //设置h1的内容 oH.innerHTML = y + '年' + m + '月' + d + '日    ' + week[w] + '    ' + h + ':' + mi + ':' + s } </script>
  • 获取特定格式时间
    • toDateString()：Tue Nov 27 2019
    • toLocaleDateString()： 2018/11/27
    • toTimeString()：14:34:25 GMT+0800 (中国标准时间)
    • toLocaleTimeString()：下午2:35:06
    • toLocaleString()：2018/11/27 下午2:35:05
    • 如果上面的格式不能满足要求，就需要获取单个的时间进行拼接。
 //创建时间对象 var date = new Date() console.log(date.toDateString()); //Tue Sep 22 2020 console.log(date.toTimeString()); //10:56:28 GMT+0800 (中国标准时间) console.log(date.toLocaleDateString()); //2020/9/22 console.log(date.toLocaleTimeString()); //上午10:57:26 console.log(date.toString()); //Tue Sep 22 2020 10:57:46 GMT+0800 (中国标准时间) console.log(date.toLocaleString()); //2020/9/22 上午10:58:03 /* 如果以上格式还不能满足你的需求，那么就是用字符串拼接 */

案例：倒计时

 <h1></h1> <script> /* 倒计时 需求：获取出来当前日期距离2020/12/12的倒计时 时间戳相减 目标时间戳 - 当前时间戳 = 相差的时间戳 通过时间戳转换成相应的格式 */ var oH = document.getElementsByTagName('h1')[0] fn() setInterval(fn, 1000) function fn() { 
    //创建时间对象 var date = new Date() //获取当前时间戳 var currentDate = date.getTime() //设置目标时间 var date1 = new Date(2020, 11, 12, 0, 0, 0) //获取目标时间戳 var targetDate = date1.getTime() //相差的时间戳 var cha = targetDate - currentDate /* 一天 = 24*60*60*1000 天数 = parseInt(cha/) 小时 = 60*60*1000 小时 = parseInt(cha%/) 分钟 = 60*1000 分钟 = parseInt(cha%/60000) 秒 = 1000 秒 = parseInt(cha%60000/1000) */ var d = parseInt(cha / ) var h = parseInt(cha %  / ) var m = parseInt(cha %  / 60000) var s = parseInt(cha % 60000 / 1000) oH.innerHTML = '距离双12还有' + d + '天' + h + '小时' + m + '分钟' + s + '秒' } </script>

Moment.js

  • 概念Moment.js是一个轻量级的JavaScript时间库，它方便了日常开发中对时间的操 作，提高了开发效率。
  • 官方网址： 链接: link.
  • 简单使用：
    • var d = moment()； // 没有参数，则为当前时间
    • var d = moment(“”)；// 参数为字符串，1995年12月25日 00:00:00
    • var d = moment(“ 12:20:25”)；// 1995年12月25日 12:20:25
    • var d = moment(Date.now())；//获取当前时间戳
    • var d = moment(Date.now() – 24 * 60 * 60 * 1000)； // 参数为时间戳 昨天
    • var d = moment(new Date(2011, 9, 16, 12, 20, 25))； // 参数为时间对象，2011年10月 16 日 12:20:25
 var d = moment("2008-12-12") var d = moment("2008-12-12 12:12:12") var d = moment({ 
    year: 2018, month: 3, day: 18, hour: 6, minute: 29, second: 55 }) var d = moment() console.log(d._d); //Tue Sep 22 2020 11:43:42 GMT+0800 (中国标准时间)
  • 格式化当前时间
 var d = moment().format() //2020-09-22T11:47:06+08:00 var d = moment().format('M') //9 var d = moment().format('MM') //09 var d = moment().format('Q') //3 季度 var d = moment().format('DD') //22 当前月份的日期 var d = moment().format('DDD') //266 当前年份的日期 var d = moment().format('d') //2 0-6
  • 设置和获取时间
    • ①设置 以年份为例
      • var d = moment().year(2021)
      • var d = moment().set(‘year’,2022)
      • var d = moment().set({‘year’:2023})
    • ②获取 以年份为例 moment().year()
  • 检查
    • isBefore() 之前
    • isSame() 相同
    • isAfter() 之后
    • isBetween() 是否在某两个日期之间
 //isBefore() 之前 console.log(moment('2018-6-11').isBefore('2018-6-12')); //true console.log(moment('2018-6-11').isBefore('2018-6-12', 'year')); //false console.log(moment('2018-6-12').isBefore('2018-6-11')); //false //isSame() 相同 console.log(moment('2018-6-11').isSame('2018-6-12')); //false console.log(moment('2018-6-11').isSame('2018-6-12', 'year')); //true //isAfter() 之后 console.log(moment('2018-6-11').isAfter('2018-6-12')); //false console.log(moment('2018-6-11').isAfter('2018-6-12', 'year')); //false console.log(moment('2018-6-12').isAfter('2018-6-11')); //true //isBetween() 之间 console.log(moment('2018-6-11').isBetween('2018-6-10', '2018-8-10')); //true console.log(moment('2018-6-11').isBetween('2017-6-11', '2019-6-11', 'year')); //true

字符串对象

  • length属性：获取字符串的长度
  • charAt(下标)：获取对应位置的字符
  • charCodeAt(下标)：获取对应位置字符的编码
 var str = 'abcdefg2' //获取长度 console.log(str.length); //7 //通过下标获取对应位置的字符 console.log(str[2]); //c console.log(str.charAt(4)); //e //获取对应位置的字符编码 console.log(str.charCodeAt(2)); //99 console.log(str.charCodeAt(4)); //101 console.log(str.charCodeAt(7)); //50
  • indexOf(str[,index])：返回某个指定的字符串值在字符串中首次出现的位置（[ ]表示可不写），如果查找不到这个指定的字符就返回-1
 var str = 'web123web' console.log(str.indexOf('e')); //1 console.log(str.indexOf('2')); //4 console.log(str.indexOf('m')); //-1 console.log(str.indexOf('e', 3)); //7 var str = 'abcabcabcabcabc' console.log(str.indexOf('b')); //1 console.log(str.indexOf('b', 7)); //7 console.log(str.indexOf('c', 12)); //14 console.log(str.indexOf('c', 4)); //5 console.log(str.indexOf('ca')); //2
  • lastIndexOf(str[,index])：返回某个指定的字符串值在字符串中最后一次出现的位置 ，如果查找不到就返回-1
 var str = 'web123web' console.log(str.lastIndexOf('e')); //7 var str = 'abcdefgabcdefg' console.log(str.lastIndexOf('c')); //9 console.log(str.lastIndexOf('cde')); //9 console.log(str.lastIndexOf('f')); //12 console.log(str.lastIndexOf('m')); //-1
  • substring([start,[stop]])：截取字符串,从start到stop,包括开始不包括结束 。
  • slice([start,[stop]])：截取字符串
  • substring和slice区别
    • ①如果接收的参数是负数，substring会直接转换为0，slice则是使用当前负数加上字符串长度
    • ②如果两个位数相反（开始>结束），substring会自动更换两个位置，slice则返回空
 var str = 'abcdefg' console.log(str.substring(3)); //defg console.log(str.substring(3, 5)); //de console.log(str.slice(3)); //defg console.log(str.slice(3, 6)); //def //substring会自动调整位置 var str = 'abcdefghijk' console.log(str.substring(8, 4)); //efgh console.log(str.slice(8, 4)); //空 //如果参数是负数的话 console.log(str.substring(-5, 4)); //abcd //slice参数如果是负数的话，会自动转换 参数=负数+长度 长度11 参数=-7+11 console.log(str.slice(-7, 7)); //efg console.log(str.slice(-2, 7)); //空
  • 数字字符串比较：按照索引项的值一位一位进行比较
 var str1 = '36' var str2 = '7' if (str1 > str2) { 
    console.log('str1比较大'); } else { 
    console.log('str2比较大');//打印 }
  • toUpperCase（）：转换为大写
  • toLowerCase（）：转换为小写
 var str1 = 'abcdefghij' //需求：前5个小写，后5个大写 //截取前5个 var l = str1.substring(0, 5).toLowerCase() //截取后5个 var r = str1.substring(5).toUpperCase() console.log(l + r);
  • split(分割标准，[数组的长度])：将字符串按特定标志分割成数组
  • 合并数组的每一项 arr=[1,2,3,4,5]
    • arr.join()=‘12345’ arr.join(’-’) = ‘1-2-3-4-5’
      oDiv.innerHTML = arr.join(’’+txtVal2+’’)

  • replace(被替换的字符串，替换的字符)：替换特定的字符
  • search()：用于检索字符串中指定的子字符串
  • match()：可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配 
 var str = 'a-b-c-d-e-f' console.log(str.split('-')); //["a", "b", "c", "d", "e", "f"] console.log(str.split('-', 4)); //["a", "b", "c", "d"] var str = 'https://www.baidu.com/s?wd=hahaha&username=admin' console.log(str.split('?')); // ["https://www.baidu.com/s", "wd=hahaha&username=admin"] var str = 'abcdef' console.log(str.replace('c', '-')); //ab-def var str = '哈哈ab123哈哈ab123哈哈ab123哈哈ab123哈哈ab123' var n = str.replace('哈哈', '嘻嘻') console.log(n); //嘻嘻ab123哈哈ab123哈哈ab123哈哈ab123哈哈ab123 var n = str.replace(/哈哈/g, '嘻嘻') // / /g 全局 console.log(n); //嘻嘻ab123嘻嘻ab123嘻嘻ab123嘻嘻ab123嘻嘻ab123 var str = 'abcdef' console.log(str.search('c')); //2 console.log(str.match('cd')); //["cd", index: 2, input: "abcdef", groups: undefined] var str = '' console.log(str.replace('2222', '')); // //str.substring(3,7) // console.log(str.substring(3,7)); console.log(str.replace(str.substring(3, 7), ''));
  • trim()：去掉首尾空格
    字符串创建：

 //字面量创建 用单引或双引包起来的 var str1 = "abcdefg" //string关键字创建 var str2 = String() //构造函数创建 String { 
   "a b c"} var str3 = new String('a b c') console.log(str3);

案例：点击展开隐藏

 <style> p { 
    width: 200px; } </style> <p>嘻嘻哈哈哈哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或哈哈哈哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或</p> <button>收起</button> <script> var oP = document.getElementsByTagName('p')[0] var btn = document.getElementsByTagName('button')[0] //存储p标签的内容 var pInner = oP.innerHTML //定义一个flag来表示当前的状态 true展开 false收起 var flag = true btn.onclick = function () { 
    if (flag) { 
    this.innerHTML = '展开' oP.innerHTML = oP.innerHTML.substring(0, 20) flag = false } else { 
    this.innerHTML = '收起' oP.innerHTML = pInner flag = true } } </script>

数组

  • 概念：存储数据的容器， 可以存储任意类型
  • 创建方式：
    • ①字面量创建 var arr = [1,2,3]
    • ②构造函数创建 var arr = new Array(1,2,3)
    • ③Array关键字创建 var arr = Array(1,2,3)
    • 注意：var arr = new Array(X) 如果参数为1个整数，则创建长度为X的空数组
 /* 时间对象、字符串对象、Math对象 js提供了一些内置方法 数组： 用来存储数据的容器，可以存储任意类型 */ //普通数组创建 var arr = [1, 2, 3, 'a', 'b', 'c', true] //Array关键字 var arr = Array(1, 2, 3, 4) var arr = Array(4) //创建一个长度为4的空数组 console.log(arr);//[empty × 4] //构造函数创建 var arr = new Array(1, 2, 3, 'a', 'b', 'c') console.log(arr);//[1, 2, 3, "a", "b", "c"] var arr = new Array(4) //创建一个长度为4的空数组 console.log(arr);//[empty × 4]
  • 数组方法：
    • 数组栈方法：（重点）
      • push() ：向数组的末尾添加一个或多个元素，并返回新的长度
      • pop()：删除并返回数组的最后一个元素
      • unshift()：向数组的开头添加一个或更多元素，并返回新的长度。
      • shift()： 删除并返回数组的第一个元素
 //数组方法 var array = [1, 4, 2, 'a', 'c'] //push()末尾添加 array.push(3, 'b') console.log(array)//[1, 4, 2, "a", "c", 3, "b"] //pop()末尾删除,调用一次，删除一个 array.pop() array.pop() console.log(array)//[1, 4, 2, "a", "c"] //unshift()头部添加 array.unshift('b', 7) console.log(array)//["b", 7, 1, 4, 2, "a", "c"] //shift()头部删除,需要删除几个就调用几次 array.shift() array.shift() array.shift() console.log(array)//[4, 2, "a", "c"]
  • splice()：删除/替换/添加
    • ①删除：第一个参数表示开始位置，第二个参数表示删除的个数
    • ②替换：第一个参数表示开始位置，第二个参数表示删除的个数，后面的参数表示添加的数组项
    • ③添加：第一个参数表示开始位置，第二个参数一定为0，后面的参数表示添加的数组项
 //splice()删除/替换/添加 var array = [1, 4, 2, 7, 0, 'a', 3, 'c'] //参数为一个,从当前索引值开始删除所有 array.splice(6) console.log(array)//[1, 4, 2, 7, 0, "a"] //参数为两个，从当前索引值开始删除几个 array.splice(1, 2) console.log(array)//[1, 7, 0, "a"] //参数为n个，前两项表示从当前索引值开始删除几个，后面项表示替换添加进来的值 array.splice(1, 1, 'b', 2, 3) console.log(array)//[1, "b", 2, 3, 0, "a"] //添加：从第几个索引值开始删除0个，再加入需要的值（添加在索引值之前） array.splice(0, 0, 'a') console.log(array)//["a", 1, "b", 2, 3, 0, "a"]
  • join(): 将数组按特定标志组合成字符串
  • reverse() : 将数组倒序表示
  • concat()： 将多个数组组合成一个新数组返回
  • indexOf()：在数组中查找指定的元素，找到返回对应的位置，找不到返回-1
  • slice() ：从已有的数组中返回选定的元素。
 //数组方法： //join()数组合并成字符串，可为合并处传值 var array = [2, 4, 1, 'a', 'b', 'c'] console.log(array.join())//2,4,1,a,b,c console.log(array.join('-'))//2-4-1-a-b-c //reverse()将数组倒叙排列 console.log(array.reverse())//["c", "b", "a", 1, 4, 2] //concat()合并多个数组 var a1 = ['hello', ' '] var a2 = ['world', '!'] var a3 = [1, 2, 3] console.log(a1.concat(a2, a3))//["hello", " ", "world", "!", 1, 2, 3] //indexof()查找数组中的元素，有的话返回索引值，没有返回-1 var array = [1, 4, 2, 5, 3, 'haha', 8, 4] console.log(array.indexOf(4))//1 console.log(array.indexOf('hello'))//-1 //slice()返回开始索引到结束索引(不包括结束)之间的元素 console.log(array.slice(3, 6))//[5, 3, "haha"] console.log(array.slice(3, 15))//[5, 3, "haha", 8, 4] console.log(array.slice(-1, 3))//[]
  • 数组迭代方法
    • every ：针对数组元素做些判断，如果结果都为true 则返回的结果为true
    • some : 针对数组元素做些判断，如果结果有一个为true 则返回的结果为true
    • filter : 针对数组元素做些判断,满足条件的元素，会组成一个新的数组，并且返回
    • map ： 返回一个新的数组
    • forEach : 没有返回值，就是一个简单的循环
 //数组迭代,传入参数可以为value,index,array的函数 //every()元素都为true时，才返回true var arr = [3, 5, 3, 6, 2, 9] var bool = arr.every(function (value) { 
    return value > 4 }) console.log(bool)//false //some()元素至少有一个为true时，就返回true var bool = arr.some(function (value) { 
    return value > 4 }) console.log(bool)//true //filter()过滤，返回满足条件的元素组成的新数组 var bool = arr.filter(function (value) { 
    return value > 4 }) console.log(bool)//[5, 6, 9] //map()//若为判断返回判断结果组成的数组 var bool = arr.map(function (value) { 
    return value > 4 }) console.log(bool)//[false, true, false, true, false, true] //forEach()没有返回值 arr.forEach(function(value){ 
    console.log(value)//遍历打印数组的每个元素 })
  • sort()排序：对数组的元素进行比较 默认从小到大
    • return a-b 从小到大
    • return b-a 从大到小
    • parse可以解析一个时间对象，返回距离1970-1-1 0:0:0的时间戳，使用Date.parse(时间格式)
 //数组值为一位数时,直接调用，默认从小到大 var array = [2, 4, 1, 7, 4, 8, 3, 9, 5, 7, 3] console.log(array.sort())//[1, 2, 3, 3, 4, 4, 5, 7, 7, 8, 9] //有两位数时，传入带（a,b）两个参数的函数，返回a-b(从小到大排序)，返回b-a(从大到小排序)，a为b后面的数 var array = [2, 11, 3, 27, 54, 24, 2, 4, 67, 10] var array1 = array.sort(function (a, b) { 
    return a - b }) console.log(array1)//[2, 2, 3, 4, 10, 11, 24, 27, 54, 67] var array1 = array.sort(function (a, b) { 
    return b - a }) console.log(array1)//[67, 54, 27, 24, 11, 10, 4, 3, 2, 2] //根据多个条件排序 //商品排序 默认按date排序，如果date相等则按DIU排序 var arr4 = [ { 
    "date": "2018-08-03", "DIU": 1525, "country": "CN" }, { 
    "date": "2018-08-01", "DIU": 1209, "country": "US" }, { 
    "date": "2018-08-02", "DIU": 680, "country": "GB" }, { 
    "date": "2018-08-01", "DIU": 2311, "country": "CN" }, { 
    "date": "2018-08-02", "DIU": 1526, "country": "CN" }, { 
    "date": "2018-08-02", "DIU": 879, "country": "US" } ]; //parse可以解析一个时间对象，返回距离1970-1-1 0:0:0的时间戳，使用Date.parse(时间格式) var array = arr4.sort(function(a,b){ 
    if(a.date == b.date){ 
    return a.DIU - b.DIU } return Date.parse(a.date) - Date.parse(b.date) }) console.log(array)

在这里插入图片描述

  • 数组去重
 //数组去重：从索引值为0开始，依次和后面的数比较，相等则删除后面的那个数，此时删除了的数后面的数组位置整体向前移一位 var array = [2, 4, 6, 2, 7, 8, 5, 6, 2] for (var i = 0; i < array.length; i++) { 
    for (var j = i + 1; j < array.length; j++) { 
    if (array[i] == array[j]) { 
    array.splice(j, 1) j-- } } } console.log(array)//[2, 4, 6, 7, 8, 5]

数组排序：

  • 选择排序： 拿当前值和后面每一项进行比较，如果当前值大于/小于后面每一项，就交换位置
  • 冒泡排序： 拿相邻的两个进行比较
  • 快速排序：（去重+排序）
    • 先取出数组中中间的那一个数midValue
    • 使用midValue与每一个数进行比较
    • 如果比midValue小的放到left中，如果比midValue大的放到right中
    • 重复以上步骤（递归）
  • sort()方法
  • 中文排序：调用sort()方法，在里面传入一个带有a,b两个参数的函数，返回a.localeCompare(b,‘zh’)
 var arr = ['张三', '李四', '王五', '赵六', '田七'] //localeCompare 以本地特定的字符排序 var arr1 = arr.sort(function (a, b) { 
    return a.localeCompare(b, 'zh') }) console.log(arr1); //["李四", "田七", "王五", "张三", "赵六"] //lisi tianqi wangwu zhangsan zhaoliu L T W Z Z 
 //选择排序：从索引值为0开始，依次和后面的数比较，大于/小于则交换位置 var array = [2, 4, 1, 6, 50, 34, 23, 7, 9] for (var i = 0; i < array.length; i++) { 
    for (var j = i + 1; j < array.length; j++) { 
    if (array[i] > array[j]) { 
    var temp = array[i] array[i] = array[j] array[j] = temp } } } console.log(array)//[1, 2, 4, 6, 7, 9, 23, 34, 50] //冒泡排序：从索引值为0开始，依次相邻的两个数比较，大于/小于则交换位置 var array = [2, 4, 1, 6, 50, 34, 23, 7, 9] for (var i = 0; i < array.length; i++) { 
    for (var j = 0; j < array.length - i; j++){ 
    if(array[j] > array[j+1]){ 
    var temp = array[j] array[j] = array[j+1] array[j+1] = temp } } } console.log(array)//[1, 2, 4, 6, 7, 9, 23, 34, 50] //快速排序 function quickSort(arr) { 
    //隐式 var arr = [1, 3, 2, 6, 4, 7, 5, 9, 8] if (arr.length <= 1) { 
    return arr } //1获取中间那个数的索引 var num = parseInt(arr.length / 2) //2通过索引来取出对应的值 var numValue = arr[num] //3定义两个空数组left和right， 比numValue小的放到left中，比numValue大的放到right中 var left = [] var right = [] //使用numValue比较数组的每一项 for (var i = 0; i < arr.length; i++) { 
    if (arr[i] < numValue) { 
    left.push(arr[i]) } else if (arr[i] > numValue) { 
    right.push(arr[i]) } } //合并每一项left+numValue+right return quickSort(left).concat(numValue, quickSort(right)) } var arr = [1, 3, 2, 6, 4, 3, 3, 4, 5, 6, 7, 7, 6, 8, 8, 9, 5, 4, 7, 5, 9, 8] var aaa = quickSort(arr) console.log(aaa); //[1, 2, 3, 4, 5, 6, 7, 8, 9]

DOM

1、DOM：Document Object Model 文档对象模型
2、概念：是针对 HTML 和 XML 的一个 API，即开发者可以通过 DOM 来操作 HTML文档 或者 XML文档。
XML：主要用来存储和传输数据，和HTML很类似
HTML：主要用来展示数据
3、获取子节点
①children：非标准属性，返回指定元素的子元素集合（父元素.children）
②childNodes：标准属性，返回指定元素子元素集合 （标准浏览器下会获取到折行）（父元素.childNodes）












 //非标准属性 var child = oUl.children console.log(child); //[li, li, li] //标准属性 var child = oUl.childNodes console.log(child); //[text, li, text, li, text, li, text]

4、判断节点类型
①nodeType：返回节点类型(1:标签节点。2:属性节点。3:文本节点)
②nodeName：返回节点名称（标签名）
③nodeValue：获取/设置文本节点内容，不能识别标签 只有文本节点支持






 <ul> <li>哈哈哈</li> <li></li> <li></li> </ul> var oUl = document.getElementsByTagName('ul')[0] //nodeType var child = oUl.childNodes console.log(child);//[text, li, text, li, text, li, text] console.log(child[0].nodeType); //3 console.log(child[1].nodeType); //1 //nodeName console.log(child[0].nodeName); //#text console.log(child[1].nodeName); //LI //nodeValue child[0].nodeValue = '广州' child[0].nodeValue = '南沙'

5、获取父节点
①parentNode：获取元素的父元素
②offsetParent：获取定位父元素
注意：通过offsetParent获取父元素，如果没有定位父元素，会找到body






<div> <p></p> </div> <ul style="position: relative;"> <li></li> <li></li> <li></li> <li> <span></span> </li> </ul> var oP = document.getElementsByTagName('p')[0] //parentNode var par = oP.parentNode console.log(par); //<div>...</div> //offsetParent var oLi = document.getElementsByTagName('li')[0] var par = oLi.offsetParent console.log(par); //<ul>...</ul> var oSp = document.getElementsByTagName('span')[0] var par = oSp.offsetParent console.log(par); //<ul>...</ul>

6、获取其他节点
①firstChild/firstElementChild：第一个子元素/子节点
②lastChild/lastElementChild：最后一个子元素/子节点
③nextSibling/nextElementSibling：下一个元素/节点
④previousSibling/previousElementSibling：前一个元素/节点
兼容：父元素.firstElementChild || 父元素.firstChild










 var oUl = document.getElementsByTagName('ul')[0] var oLi = document.getElementsByTagName('li')[2] var aa = oUl.firstElementChild || oUl.firstChild aa.style.background = 'pink' var bb = oUl.lastElementChild || oUl.lastChild bb.style.background = 'red' var cc = oLi.nextElementSibling || oLi.nextSibling cc.style.background = 'green' var dd = oLi.previousElementSibling || oLi.previousSibling dd.style.background = 'yellow'

7、创建节点
①创建标签节点：document.createElement(‘标签名’)
②创建文本节点：document.createTextNode(‘文本内容’)
8、插入节点
①在父元素末尾追加节点：父元素.appendChild(子节点)
②在某个元素之前加入节点：父元素.insertBefore(newChild,refChild)










 //创建标签节点 var cLi = document.createElement('li') //创建文本节点 var cInner = document.createTextNode('庄周') //添加标签内容 标签节点.appendChild(文本节点) 标签节点.innerHTML cLi.appendChild(cInner) cLi.innerHTML = '鲁班' cLi.style.background = 'pink' console.log(cLi); oUl.appendChild(cLi) var cLi1 = document.createElement('li') cLi1.innerHTML = '关羽' oUl.insertBefore(cLi1, cLi) //注意：当插入一个已经存在的节点，会发生物理偏移 oUl.appendChild(cLi1)

9、删除节点
①删除当前元素：元素.remove()
②删除父元素中的子元素：父元素.removeChild(子节点)
10、替换节点
父元素.replaceChild(newChild,oldChild)
11、克隆节点
节点.cloneNode(boolean)
注意：默认false。false复制标签没有内容；true既复制标签又复制内容














 var oUl = document.getElementsByTagName('ul')[0] var oLi = document.getElementsByTagName('li') //创建标签节点 var cLi = document.createElement('li') //创建文本节点 var cInner = document.createTextNode('庄周') cLi.appendChild(cInner) // oUl.appendChild(cLi) //删除节点 cLi.remove() oLi[0].remove() oUl.removeChild(cLi) oUl.removeChild(oLi[0]) //替换节点 oUl.replaceChild(cLi, oLi[0]) //克隆节点 //默认false false复制标签没有内容 true既复制标签又复制内容 var clone = cLi.cloneNode(true) console.log(clone);

12、获取元素方式
①document.querySelector() 选择器符合的第一个
②document.querySelectorAll() 选择器符合的所有
可以根据css选择器匹配对应的元素。兼容到IE8
13、获取和设置属性
①获取节点属性：元素.getAttribute(属性名)
②设置节点属性：元素.setAttribute(属性名,属性值)
可以获取到行内自定义属性














 <div class="haha" tag="tag">王者不可阻挡</div> <script> /* 获取节点属性：元素.getAttribute(属性名) 设置节点属性：元素.setAttribute(属性名,属性值) */ var oDiv = document.querySelector('div') //回顾 // console.log(oDiv.className); // oDiv.className = 'lala' // console.log(oDiv.className); //获取节点属性 var a = oDiv.getAttribute('class') console.log(a); //设置节点属性 oDiv.setAttribute('class','lala') console.log(oDiv.getAttribute('class')); //区别 console.log(oDiv.tag); //undefined 以前的这种方式不能获取到行内自定义属性 console.log(oDiv.getAttribute('tag')); //tag </script> 
 <ul> <li>马超</li> <li>李信</li> <li>娜可露露</li> <li>鲁班大师</li> </ul> <div id="box"> <p></p> <p></p> <h6 class="one" tag='title'></h6> <p class="one"></p> </div> <script> var oUl = document.getElementsByTagName('ul')[0] //创建子节点 var oLi1 = document.createElement('li') //创建文本节点 var oLi1Cont = document.createTextNode('百里玄策') //将文本节点插入到元素中 oLi1.appendChild(oLi1Cont) //在父元素末尾插入一个子节点 // oUl.appendChild(oLi1) var oLi = oUl.children //在父元素的某个子节点之前插入一个新的子节点 oUl.insertBefore(oLi1,oLi[2]) //删除节点 //删除当前子节点 oLi[1].remove() //删除父元素下的某个子节点 oUl.removeChild(oLi[1]) //替换父元素下的节点 oUl.replaceChild(oLi1,oLi[2]) //克隆节点 //false只克隆标签，true克隆包括内容 var clone = oLi1.cloneNode(false) console.log(clone)//<li></li> var clone = oLi1.cloneNode(true) console.log(clone)//<li>百里玄策</li> //获取元素方式（新增）静态获取 var oDiv = document.querySelector('#box') console.log(oDiv)//<div id='box'>...</div> var first = document.querySelector('p') console.log(first)//<p>...</p> var oP = document.querySelectorAll('p') console.log(oP)//[p, p, p.one] var two = document.querySelector('.one') console.log(two)//<h6 class='one'>...</h6> var one = document.querySelectorAll('.one') console.log(one)//[h6.one, p.one] //获取和设置属性 two.className = 'title' console.log(two.className)//title //操作行内自定义属性 var a = two.setAttribute('tag1','title1') console.log(two.getAttribute('tag'))//title console.log(two.getAttribute('tag1'))//title1

14、获取表格的方式
①表格.tHead：获取表格中的tHead
②表格.tFoot：获取表格中的tFoot
③表格.tBodies：获取表格中的tBody。获取到的是一个数组，在使用的时候要[索引]
④表格.rows：获取表格中的行
⑤表格.tBodies[0].rows：获取tbody中的tr
⑥表格.rows[i].cells ：获取单元格，单元格必须通过tr来获取












 <input type="text"> <input type="text"> <button>添加</button> <table border="1" width="500" cellspacing="0" style="text-align: center;"> <tHead> <tr> <td>序号</td> <td>姓名</td> <td>年龄</td> <td>操作</td> </tr> </tHead> <tBody> <tr> <td>1</td> <td>庄周</td> <td>23</td> <td><button>删除</button></td> </tr> <tr> <td>2</td> <td>周瑜</td> <td>36</td> <td><button>删除</button></td> </tr> <tr> <td>3</td> <td>曹操</td> <td>27</td> <td><button>删除</button></td> </tr> </tBody> <tFoot></tFoot> </table> <script> /* 表格.tHead：获取表格中的tHead 表格.tFoot：获取表格中的tFoot 表格.tBodies：获取表格中的tBody 获取到的是一个数组，在使用的时候要[索引] 表格.rows：获取表格中的行 表格.tBodies[0].rows：获取tbody中的tr 表格.rows[0].cells ：获取单元格，单元格必须通过tr来获取 */ var inp = document.querySelectorAll('input') var btn = document.querySelector('button') var tab = document.querySelector('table') //1添加点击事件 btn.onclick = function () { 
    //2获取input的内容 var inp1 = inp[0].value var inp2 = inp[1].value //3、创建行 var cTr = document.createElement('tr') //创建删除按钮 var bt = document.createElement('button') bt.innerHTML = '删除' //创建td var td = document.createElement('td') td.appendChild(bt) //4、创建每一个td // var cTd1 = document.createElement('td') // cTd1.innerHTML = tab.tBodies[0].rows.length + 1 // cTr.appendChild(cTd1) // var cTd2 = document.createElement('td') // cTd2.innerHTML = inp1 // cTr.appendChild(cTd2) // var cTd3 = document.createElement('td') // cTd3.innerHTML = inp2 // cTr.appendChild(cTd3) // var cTd4 = document.createElement('td') // cTd4.innerHTML = '' // cTr.appendChild(cTd4) cTr.appendChild(fn('td', tab.tBodies[0].rows.length + 1)) cTr.appendChild(fn('td', inp1)) cTr.appendChild(fn('td', inp2)) cTr.appendChild(td) tab.tBodies[0].appendChild(cTr) //删除 bt.onclick = function(){ 
    this.parentNode.parentNode.remove() } } function fn(nodeName, nodeValue) { 
    var element = document.createElement(nodeName) element.innerHTML = nodeValue return element } </script> 
 <script> var oDiv1 = document.querySelector('#form') var oInp = oDiv1.querySelectorAll('input') var addBtn = oDiv1.querySelector('button') var tab = document.getElementsByTagName('table')[0] addBtn.onclick = function () { 
    var inpName = oInp[0].value var inpSex = oInp[1].checked ? '男' : '女' var inpAge = oInp[3].value var tR = document.createElement('tr') var inp = document.createElement('input') inp.type = 'checkbox' var tD = document.createElement('td') tD.appendChild(inp) tR.appendChild(tD) tR.appendChild(fn('td', inpName)) tR.appendChild(fn('td', inpSex)) tR.appendChild(fn('td', inpAge)) tab.tBodies[0].appendChild(tR) } function fn(nodeName, nodeValue) { 
    var element = document.createElement(nodeName) element.innerHTML = nodeValue return element } //获取里面所有的多选框 var checkBox = tab.getElementsByTagName('input')//动态获取 // console.log(checkBox) //全选按钮 var checkAll = checkBox[0] //tbody中只要有一个未被选中，全选按钮就不被选中 for (var i = 1; i < checkBox.length; i++) { 
    $(document).on('click', checkBox[i], function () { 
    var aaa = true for (var j = 1; j < checkBox.length; j++) { 
    if (checkBox[j].checked == false) { 
    aaa = false } } checkAll.checked = aaa }) } //全选和全不选 checkAll.onclick = function () { 
    for (var i = 1; i < checkBox.length; i++) { 
    if (checkAll.checked) { 
    checkBox[i].checked = true } else { 
    checkBox[i].checked = false } } } var oDiv2 = document.querySelector('#div1') var delBtn = oDiv2.getElementsByTagName('button')[0] delBtn.onclick = function () { 
    for (var i = 1; i < checkBox.length; i++) { 
    if (checkBox[i].checked == true) { 
    checkBox[i].parentNode.parentNode.remove() //删除元素后长度自动-1 i-- } } } </script>

表单操作

1、获取表单
语法：oForm. 表单Name名
action 表示你要提交的地址,如果action不填，默认提交到当前页面




 <!-- action 表示你要提交的地址 --> <!-- 如果action不填，默认提交到当前页面 --> <form action="https://www.baidu.com"> <input type="text" name="userName"> <input type="password" name="password"> <input type="submit" name="sub"> <input type="reset" name="res"> </form> <script> var oForm = document.getElementsByTagName('form')[0] /* 获取表单元素可以通过表单.name来获取 */ //获取用户名 console.log(oForm.userName); //获取密码框 console.log(oForm.password); //获取提交按钮 console.log(oForm.sub); //获取重置按钮 console.log(oForm.res); </script>

2、表单事件
2.1、表单.onsubmit：提交时调用 默认return ture表示允许表单提交，return false表示禁止表单提交
2.2、表单.onreset：重置时调用 默认return ture表示允许表单重置，return false表示禁止表单重置
2.3、表单元素.onfocus：获得焦点
2.4、表单元素.onblur：失去焦点
3、表单方法
3.1、表单.submit()：表单提交方法
3.2、表单.reset()：表单重置方法
3.3、表单元素.focus()：获取焦点
3.4、表单元素.blur()：失去焦点
3.5、表单元素.select()：仿placeholder，并直接获得焦点，输入的时候可以覆盖之前的 value




















BOM­-window对象

 //对话窗口 //警告框 alert('哈哈哈') //打印 console.log('你好') //带确认的消息 console.log(confirm('你确定吗'))//true //带输入的对话框 console.log(prompt('请输入要跳转的页面',2))//null

3、open和close
open(URL,name,features,replace)：打开一个新的浏览器窗口或查找一个已命名的窗 口。
close()：关闭当前窗口
注意：行间不能省略window






 <!-- <a href="https://www.baidu.com">去百度</a> --> <!-- <div onclick="window.open('http://ujiuye.com')">跳转</div> --> <button>点我</button> <button onclick="window.close()">关闭</button> <script> /* 打开： open写在行内 一定不能省略window open写在js中 open(URL,name,features,replace) url：打开的路径 name：打开的方式 _blank在新页面打开 _self在当前页面打开 features：打开窗口的大小 replace：是否在浏览器中记录 ture false 关闭： close关闭当前页面 一定不能省略window */ var btn = document.getElementsByTagName('button')[0] btn.onclick = function () { 
    open('https://www.baidu.com', '_blank', 'width:600px;height:400px') } </script>

4、location
4.1、概念：loaction是最有用的 BOM 对象之一，它提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。location是一个很特别的对象，它既是window对象的属性，也是document对象的属性。
4.2、window.location=”路径地址”： 跳转页面
4.3、window.loaction.reload()：刷新当前页面
4.4、location其它属性
hash：#contents” 返回URL中的hash（#号后跟零或多个字符），如果URL中不包含散列， 则返回空字符串
host：返回服务器名称和端口号(如果有)
hostname：返回不带端口号的服务器名称
href：返回当前加载页面的完整url
toString()：返回当前加载页面的完整url
pathname：返回url中的目录和文件名
port：返回url中指定的端口号。如果没有端口号则返回空字符串
protocol：返回页面使用的协议 http:或者https:
search：?username=baidu 返回url中查询字符串 这个字符串以问号开头


























 var btn = document.getElementsByTagName('button')[0] btn.onclick = function () { 
    // window.location = 'http://www.ujiuye.com' //跳转页面 window.location.reload() //刷新当前页面 } console.log(window.location); //hash #contents 返回url中的hash(#后面跟的多个字符)，如果url中不包含散列，则返回空字符 console.log(window.location.hash); //#contents //host 返回服务器名称和端口号(如果有) console.log(window.location.host); //127.0.0.1:5500 //hostname 返回服务器名称 console.log(window.location.hostname); //127.0.0.1 //href 返回当前加载页面的完整url console.log(window.location .href); //http://127.0.0.1:5500/%E8%AF%BE%E4%BB%B6/day10/BOM-window%E5%AF%B9%E8%B1%A1/04location.html
    //toString() 返回当前加载页面的完整url console.log(window.location .toString()); //http://127.0.0.1:5500/%E8%AF%BE%E4%BB%B6/day10/BOM-window%E5%AF%B9%E8%B1%A1/04location.html
    //pathname  返回url中的目录和文件名
    console.log(window.location.pathname); // /%E8%AF%BE%E4%BB%B6/day10/BOM-window%E5%AF%B9%E8%B1%A1/04location.html
    //port  端口号， 返回url中指定的端口号，如果没有端口号则返回空字符串
    console.log(window.location.port); //5500 //protocol 返回页面使用的协议 console.log(window.location.protocol); //http: //search console.log(window.location.search); //?username=baidu&password=123456
    //  http://127.0.0.1:5500/        http:协议   127.0.0.1域名  5500端口号
    /* 
      假设页面路径为
      http://127.0.0.1:5500/课件/day10/BOM-window对象/04location.html?username=baidu&password= */ var str = window.location.search console.log(str); //?username=baidu&password= /* var obj = { 
    username : baidu, password :  } */ //截取字符串中的? var arr = str.split('?') var str1 = arr[1] var arr1 = str1.split('&') console.log(arr1); //创建一个空数组用来接收 var a = [] for (var i = 0; i < arr1.length; i++) { 
    var b = arr1[i].split('=') for (var j = 0; j < b.length; j++) { 
    a.push(b[j]) } } console.log(a); //["username", "baidu", "password", ""] var obj = { 
   } for (var i = 0; i < a.length; i++) { 
    obj[a[i]] = a[i + 1] i++ } console.log(obj); //{ 
   username: "baidu", password: ""} 
 <script> /* obj = { 
    键:值, 键:值 } */ var str = "http://item.taobo.com/item.html?a=1&b=2&c=3&d=xxx"; //创建一个对象用来接收 var obj = { 
   } //获取?的索引值 var num = str.indexOf('?') + 1 //32 var str1 = str.substring(str.indexOf('?') + 1) //a=1&b=2&c=3&d=xxx // 按照&分割后面的数据 var arr = str1.split('&') //["a=1", "b=2", "c=3", "d=xxx"] // 遍历数组，在数组内进行分割 for (var i = 0; i < arr.length; i++) { 
    obj[arr[i].split('=')[0]] = arr[i].split('=')[1] } console.log(obj);//{ 
   a: "1", b: "2", c: "3", d: "xxx"} </script>

5、navigator
5.1、概念：包含有关浏览器的信息
5.2、navigator其它属性
浏览器代号：navigator.appCodeName
浏览器名称：navigator.appName
浏览器版本：navigator.appVersion
是否启动cookies：navigator.cookieEnabled
硬件平台：navigator.platform
用户代理：navigator.userAgent
用户代理语言：navigator.language


















 <h2></h2> <script> /* navigator 包含有关浏览器的信息 */ var oH = document.getElementsByTagName('h2')[0] var text = '' text += "
浏览器代号"
 + navigator.appCodeName + "" text += "
浏览器名称"
 + navigator.appName + "" text += "
浏览器版本"
 + navigator.appVersion + "" text += "
是否启动cookies"
 + navigator.cookieEnabled + "" text += "
硬件平台"
 + navigator.platform + "" text += "
用户代理"
 + navigator.userAgent + "" text += "
用户代理语言"
 + navigator.language + "" oH.innerHTML = text </script>

6、history
6.1、概念：对象包含用户（在浏览器窗口中）访问过的URL
6.2、history其它方法
back()：加载 history 列表中的前一个 URL。(相当于后退按钮)
forward()：加载 history 列表中的下一个 URL。(相当于前进按钮)
go()：加载 history 列表中的某个具体页面。(相当于具体跳到哪里)










BOM­元素系列

1、client系列
1.1、元素.clientWidth：获取元素的可视宽 (width+左右的padding)
1.2、元素.clientHeight：获取元素的可视高 (height+左右的padding)
1.3、元素.clientTop：上边框
1.4、元素.clientLeft：左边框
1.5、document.documentElement.clientWidth：获取屏幕的可视宽
1.6、document.documentElement.clientHeight：获取屏幕的可视高












 var oDiv = document.getElementsByTagName('div')[0] //获取元素的可视宽 console.log(oDiv.clientWidth); //210 //获取元素的可视高 console.log(oDiv.clientHeight); //410 //获取元素上边框 console.log(oDiv.clientTop); //2 //获取元素左边框 console.log(oDiv.clientLeft); //2 //获取屏幕可视宽 console.log(document.documentElement.clientWidth); //1125 //获取屏幕可视高 console.log(document.documentElement.clientHeight); //442

2、offset系列
2.1、元素.offsetWidth：获取元素的占位宽（width+左右padding+左右border）
2.2、元素.offsetHeight：获取元素的占位高（height+上下padding+上下border）
2.3、元素.offsetTop：当前元素的顶部，到定位父元素的距离，没有定位父元素， 到 body的距离
2.4、元素.offsetLeft：当前元素的左边，到定位父元素的距离，没有定位父元素，到body 的距离








 var oP = document.getElementsByTagName('p')[0] //div样式 width 200 height 400 padding 5 border 2 //获取元素的占位宽 console.log(oP.offsetWidth); //214 //获取元素的占位高 console.log(oP.offsetHeight); //414 //offsetTop console.log(oP.offsetTop); //0 //offsetLeft console.log(oP.offsetLeft); //50

3、scroll系列
3.1、元素.scrollTop : 获取元素被卷去的高
3.2、元素.scrollLeft：获取元素被卷去的宽
3.3、元素.scrollWidth : 获取元素实际内容宽
3.4、元素.scrollHeight : 获取元素实际内容高
3.5、document.documentElement.scrollTop || document.body.scrollTop：获取页面被卷去的高
案例：返回顶部












 div { 
    width: 100px; height: 5000px; } button { 
    position: fixed; bottom: 100px; right: 20px; display: none; } <span>我是顶部</span> <div></div> <button>返回顶部</button> <script> var btn = document.getElementsByTagName('button')[0] document.body.onscroll = function () { 
    //在滚动的时候要时刻获取页面被卷去的高度 var scroll = document.documentElement.scrollTop || document.body.scrollTop if (scroll >= 2500) { 
    btn.style.display = 'block' } else { 
    btn.style.display = 'none' } } btn.onclick = function () { 
    /* 分析：点击之后要干什么 1、页面滚动的距离变成0 */ (document.documentElement.scrollTop = 0) || (document.body.scrollTop = 0) } </script>

4、onscroll
4.1、概念：滚动条滚动时调用
4.2、调用方式：元素.οnscrοll=function(){}
5、onresize
5.1、概念：当窗口大小发生变化时调用
5.2、调用方式：元素.οnresize=function(){}
6、懒加载
概念： 图片设置自定义属性为路径，并不设置src路径，当图片到达可视区底部的时候把自定义属性转化为src路径
当(图片距离顶部的距离<=页面卷去的高度+可视区高度)的时候加载图片
















 <style> * { 
    margin: 0; padding: 0; } img { 
    /* 在获取元素到页面顶部的距离：img.offsetTop时，必须要设置固定宽高，或者在外面包裹一个盒子 */ width: 180px; height: 135px; } </style> <script> var oImg = document.getElementsByTagName('img') //元素到顶部的距离<页面可视高度+被卷去的高度时，将其图片路径设置为_src fn() document.body.onscroll = function () { 
    fn() } function fn(){ 
    //页面被卷高度 var scrollH = document.documentElement.scrollTop || document.body.scrollTop //页面可视高度 var clientH = document.documentElement.clientHeight for (var i = 0; i < oImg.length; i++) { 
    //img到顶部的距离 var imgH = oImg[i].offsetTop if (imgH <= scrollH + clientH){ 
    oImg[i].src = oImg[i].getAttribute('_src') } } } </script>

懒加载

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/179343.html原文链接：https://javaforall.net

赞 (0)
0 0

关于作者

全栈程序员-站长的头像

全栈程序员-站长

133.5K 文章
3 粉丝
本网站汇聚当前互联网主流语音，持续更新，欢迎关注公众号“全栈程序员社区”
上一篇 2026年3月26日 下午3:48
下一篇 2026年3月26日 下午3:48


相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号