前端学习之js（二）

程序媛刘刘

已于 2022-07-15 09:06:49 修改

阅读量173

点赞数

分类专栏：前端学习文章标签：前端 javascript 学习

于 2022-07-15 08:00:00 首次发布

本文链接：https://blog.csdn.net/weixin_53105591/article/details/125768876

版权

前端学习专栏收录该内容

19 篇文章 1 订阅

订阅专栏

BOM：

含义：

浏览器对象模型，提供了独立于内容与浏览器窗口进行交互的对象

由一系列的对象构成，每个对象都提供了很多属性和方法

js访问浏览器窗口的一个接口

是一个全局对象，定义在全局作用域的变量和函数会变成window对象的属性和方法

核心(顶级)对象：

window对象

window对象:

window对象下的常用方法：alert() confirm() prompt()
在ES5中，使用var声明的全局变量，都会成为window的属性
window对象下，有许多常用的对象，例如 document,location...
window对象是可以省略window的，除了一种情况，调用window的事件时不能省略
window.onload() 等页面全部加载完毕，再执行load方法。只能写一次！

窗口加载：
window.onload=function(){}            (只能写一次，执行最后一个)
window.addEventListener('load',function(){})  （没有限制）
      第一个参数：
         DOMContentLoaded DOM加载完毕（标签显示完，比load快）
         resize            调整窗口大小            window.innnerWidth当前屏幕的宽度

定时器：

 延时定时器：
     window.setTimeout(调用函数，[延迟的毫秒数])     可以省略window
    调用函数（回调函数）：可以是函数，函数名，‘函数名（）（不提倡）’
     给定时器起标识符，名称
停止定时器：
     window.clearTimeout(定时器的名称) 可以省略window
重复定时器：
     window.setInterval(调用函数，[延迟的毫秒数])     可以省略window
停止定时器：
     window.clearSetInterval(定时器的名称) 可以省略window

history对象:

history.forword     前进
history.back         后退
history.go（参数）   前进和后退（前进正值，后退负值）

属性
   history.length  浏览器的历史记录条数

location对象：

含义：
用于获取和设置窗口的URL，并可用来解析URl 返回：对象
URL：
含义：统一资源定位符，是互联网上标准资源的地址
例如：https://www.baidu.com:80/index/demo/a?cl=3&fr=top1000&hisfilter=1#1
组成：

1.协议 http 或 https
2.域名 www.baidu.com 或 192.168.0.1
3.端口 :80
4.路径 index/demo/a
5.参数 cl=3&fr=top1000&hisfilter=1
6.锚点 #1


属性：
      location.href                  获取或设置整个URL
      location.host                   主机域名
      location.port                   端口号    未填写返回空字符串
      location.pathname               路径
      location.search                 参数
      location.hash                   片段#后面的内容常见于链接和锚点
      location.protocol               获取协议
方法：
      location.assign()              记录浏览记录，可以实现后退功能
      location.replace()              替换页面，不记录浏览记录，不可以实现后退功能
      location.reload()              重新加载页面，参数为true强制刷新

navigator对象：

含义：包含有关浏览器的信息

常用：userAgent

screen对象：

height	       返回屏幕的总高度(以像素记)
width	       返回屏幕的总宽度(以像素记)
availHeight	   返回屏幕的总高度(不包括任务栏)
availWidth	   返回屏幕的宽度(不包括任务栏)
pixelDepth	   返回屏幕的颜色分辨率(每像素的位数)

console.log(screen.width);
console.log('实际高度'+screen.height);
console.log('可用高度'+screen.availHeight);

DOM：

含义：

处理可扩展标记语言的标准编程接口，可以改变网页的内容，结构和样式。

顶级对象：

document

DOM树：

文档（documnent）：一个页面就是一个文档

元素（element）：页面中的所有的标签都是元素

根元素：html

节点（node）：网页中的所有内容都是节点（标签，属性，文本，注释）

获取元素：

获取：   
  1 ID：   document.getElementById('id名')；
      返回：元素对象  ==>  console.dir()
      参数：id是大小写敏感的字符串
  2 class：document.getElementsByClassName('class名')
  3 标签名：document.getElementsTagName('标签名')；
        返回：获取元素对象的集合 ，伪数组的形式存储
  4 获取第一个 document.querySelector('选择器')   需要加上符号
  5 获取所有   document.querySelectorAll('选择器')  需要加上符号
  6 获取元素里某些标签   父element.getElementsByTagName()
  7 获取body     document.body()
       返回：元素对象
  8 获取html     document.documentElement()

文本操作：

innerHTML（普通合作）获取/修改元素的内容（可以识别html的标签标准,保留空格和换行
innerText 获取/修改元素的内容,非标准
区别：
1.innerHTML：解析HTML
2.innerText：纯文本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本操作</title>
</head>
<body>
    <div id="box">大白</div>
    <button id="btn">点我</button>
    <script>
        // 绑定事件的格式 on + 事件名
        btn.onclick = function(){
            // alert('点了')
            document.getElementById('box').innerHTML = '<a href="http://www.baidu.com">百度一下 我就知道</a>'
            document.getElementById('box').innerText = '<a href="http://www.baidu.com">百度一下 我就知道</a>'            
        }
 
    </script>
</body>
</html>

属性操作：

行内属性：

 获取：elem.style.属性名
    console.log(document.getElementById('box').style.width);
     console.log(document.getElementById('box').style.backgroundColor);

 设置：elem.style.属性名 = ''
      document.getElementById('box').style.width = 300 + 'px'

计算属性(存在兼容性)：

获取：getComputedStyle(elem)['属性名'] 
  console.log(getComputedStyle(box1)['width']);

不能设置！！

自定义属性：

自定义属性（由data开头的属性名）：
    获取：
        element.属性                自身的属性
        element.getAttribute('属性')自定义属性
        element.dataset.属性   兼容性问题，IE11，仅支持data开头
        element.dataset.[属性] 如果自定义属性里面有多个链接的单词，我们获取时使用驼峰命名法
    设置：
        element.属性 ='值'                     自身属性
        element.setAttribute（'属性'，'值'）    自定义属性
    移除：
        element.removeAttribute（'属性'）

input[0].getAttribute('placeholder');
input[0].removeAttribute('name');
input[1].setAttribute('type','search');

样式操作：

行内样式：(用于样式少的情况)
     修改：element.style.样式=
    行内样式权重高
内联样式：
     修改：getComputedStyle(element[属性])
类名样式：
     修改：element.className='css名'
  注意：会更改之前的类名，覆盖之前的类名
  解决方法：多类名选择器，在修改时，加上他原来的类名

box.style.width='200px';
box.style.height='400px';

类名操作：

 类名操作
    新增：element.classlist.add()
    删除：element.classlist.remove()
    包含：element.classlist.contains()

  1.新增类名
        document.getElementById('box').classList.add('foo')
        document.getElementById('box').classList.add('bar')
  2.删除类名
        document.getElementById('box').classList.remove('foo')
  3.是否包含,包含返回true，不包含返回false
        console.log(document.getElementById('box').classList.contains('bar'));

        const oBox = document.getElementById('box')
        oBox.onclick = function(){
            this.classList.add('new-style')
        }

节点操作：

含义：

网上的所有内容都是节点

节点的基本属性：

节点类型，nodeType 元素节点1 属性节点2，文本节点3

节点名称，nodename

节点值(只针对属性节点和文本节点)，nodeValue

判断节点的类型：

nodeType（）

获取节点：

父级节点：
   获取最近的父节点：element.parentNode   
子级节点：
   获取子节点（包含元素节点和文本节点， 包括空格,返回NodeList）parentNode.childNodes()
   获取子元素节点（不包含空格,返回HTML集合）    parentNode.children
   获取第一个子节点： parentNode.firstChild
   获取第一个子元素节点： parentNode.firstElementChild    
                        parentNode.children[索引/父元素的长度减一]
兄弟节点：
    获取下一个兄弟节点：node.nextSibling
    获取下一个兄弟元素节点：node.nextElementSibling
    获取上一个兄弟节点：node.previousSibling
    获取上一个兄弟元素节点：node.previousElementSibling

节点操作：

创建节点：
    元素节点： document.createElement(节点)
    文本节点： document.createTextNode(节点)
               元素.innerHTML = ''
               元素.innerText = ''

添加节点：
     末尾添加：  父级node.appendChild(子级节点)
     开头添加：  node.insertBefore(子级节点，指定元素)
   注意：创建和添加节点要结合使用才能展示在页面中

删除节点：
     node.removeChild(子节点)   返回删除的节点

复制节点：
     node.cloneNode()

浅拷贝：（）里为空或者写false  只复制标签不复制内容
深拷贝：（）里为true           复制标签和内容
   注意：复制后的节点要说明复制的地址在哪里

动态创建元素：
    document.write()
  注意：直接写入会导致页面重绘
     element.innerHTML
   注意：创建效率高，但是使用时要使用数组的方式拼接，结构较复杂
     document.createElement()
   注意：创建效率低，但是结构清晰

var ul=document.getElementsByTagName('ul')[0];
   //首个节点
console.log(ul.firstChild);
  //最后一个节点 
console.log(ul.lastChild);

表单操作：

修改：标签名.属性=''
禁用：事件者(this).disabled=true
      this指向的是事件函数的调用者
注意：表单里的值由value决定

事件：

三要素：
事件源：事件被触发的对象
事件类型：如何触发
事件处理程序：通过什么方式完成
使用：
获取事件源
绑定事件
添加事件处理程序

事件流（事件的3个关键阶段）

含义：

事件传播的过程

分类：

1.事件捕获：从外向内找
2.目标事件：找到了
3.事件冒泡：从内向外，触发事件，会触发父元素相同的事件

注意：JS代码中只能执行捕获或者冒泡其中的一个阶段

on/addEventListener,只能得到冒泡阶段

捕获阶段：addEventListener（事件类型，事件执行函数，true）

冒泡阶段：addEventListener（事件类型，事件执行函数，空值/false）

事件绑定：

行内绑定(不要用！！！！)
 <button onclick="alert('111')"></button>

 on + 事件类型
 会覆盖掉之前绑定的事件

addEventListener(事件类型,事件处理程序,事件在什么阶段触发，默认是false)
 不会覆盖掉之前绑定的事件
 存在兼容性

事件解绑的方式
box.onclick = null
removeEventListener('事件类型')

document.getElementById('btn').onclick = function(){
            console.log('点击了');
        }
document.getElementById('btn').addEventListener('click',function(){
            console.log('1111');
        },false)

事件类型：

鼠标事件：

 1.点击事件              click
 2.双击事件              dblclick
 3.移入事件              mouseenter  (IE8以下，不支持)
 4.移出事件              mouseleave  (IE8以下，不支持)
 5.移动事件              mousemove
 6.按下事件              mousedown
 7.抬起事件              mouseup
 8.移入事件              mouseover   (移入子元素时，也会触发)
 9.移出事件              mouseout    (移出子元素时，也会触发)

 oBox.addEventListener('dblclick',function(){
     console.log('双击');
 },false)

键盘事件：

 1.按下事件
     keydown         任意键
     keypress        字符键
 2.抬起事件
     keyup

 window.onkeydown = function(){
   console.log('键盘按下了');
 }

表单事件：

 1.获取焦点事件          focus
 2.失去焦点事件          blur
 3.内容改变事件          change  内容改变，并且失去焦点
 4.输入事件              input   只要输入了，就会触发

 document.getElementById('input').oninput = function(){
    console.log('input');
 }

window事件：

 1.页面加载事件      load        等页面全部加载完毕时执行
 2.滚动事件          scroll
 3.窗口改变事件      resize

window.onload = function () {
    // console.log(document.getElementById('box'));
    window.onscroll = function(){
        console.log('滚了');
    }
    window.onresize = function(){
        console.log('窗口改变了');
    }
}

事件对象：

含义：

event事件对象简写为e，写到侦听函数的括号内，可以当作形参

注意：只有有事件时才会存在

系统自动创建的

不需要传递参数

事件对象可以自定义命名

有兼容性问题 e=e||window.event;

属性：

e.target            返回触发事件的对象,即目标对象
  this   返回绑定事件的对象
e.srcElement        返回触发事件的对象(IE6-8使用)
e.type              返回时间的类型
e.cancelBubble      阻止冒泡（IE6-8使用）
e.returnValue       阻止默认事件（IE6-8使用）

 // 目标对象: 触发事件的对象(不一定是绑定事件的对象)
 document.getElementById('ul').onclick= function(e){
     // 获取目标对象
     // console.log(e.target.innerText);
     console.log(e.target,this);
     // console.log(this.innerText);
 }

方法：

e.preventDefault()  阻止默认事件 
return false        阻止默认事件（仅限于on绑定事件，return后面的代码
e.stopPropagation() 阻止冒泡

鼠标事件对象：

1 e.clientX       返回鼠标相对于浏览器窗口可视区的X坐标
2 e.clientY       返回鼠标相对于浏览器窗口可视区的Y坐标
3 e.pageX         返回鼠标相对于文档页面的X坐标（IE9以上支持）
4 e.pageY         返回鼠标相对于文档页面的Y坐标（IE9以上支持）
5 e.screenX       返回鼠标相对于电脑屏幕的X坐标
6 e.screenY       返回鼠标相对于电脑屏幕的Y坐标

键盘事件对象：

  keyCode  返回按键的AScLL值
  keydown和keyup不区分字母大小写
  keypress区分字母大小写

事件冒泡：

事件委托

原理：给父节点添加侦听器，利用事件冒泡影响每一个子节点

// 事件流（三大阶段）：1.事件捕获   2.目标事件  3.事件冒泡
// 事件冒泡：从内向外触发相同事件
const divs = document.querySelectorAll('div')
for (let i = 0; i < divs.length; i++) {
    divs[i].onclick = function(e){
        e.stopPropagation()
        console.log('click'+i);
    }
}
child1.onmouseenter = function(){
    console.log('enter');
}
// 事件冒泡的应用：事件委托
document.getElementById('ul').onclick = function(){
    console.log('1111');
}
// 阻止事件冒泡行为
e.stopPropagation()
   // 阻止事件默认行为
   document.getElementById('a').onclick = function(e){
    e.preventDefault()