学习2021-7-23

最新推荐文章于 2022-05-02 16:51:29 发布

weixin_45666540

最新推荐文章于 2022-05-02 16:51:29 发布

阅读量61

点赞数

本文链接：https://blog.csdn.net/weixin_45666540/article/details/119038640

版权

学习

js组成

在这里插入图片描述
APl
APl( Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。
简单理解∶API是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能。
Web API
Web API是浏览器提供的一套操作浏览器功能和页面元素的API( BOM和DOM).

DOM

什么是DOM

在这里插入图片描述

DOM树

操作元素
JavaScript的 DOM操作可以改变网页内容、结构和样式，我们可以利用DOM操作元素来改变元素里面的内容、属性等。注意以下都是属性
在这里插入图片描述
DOM把以上内容都看作是对象

获取元素

在这里插入图片描述

根据id获取

1.文档页面从上往下加载所以先得有标签，所以script写到标签下面
2.get获得element元素by通过驼峰命名法
3.参数id是大小敏感的字符串
4.返回的是一个元素对象
使用getElementById()5.console.dir() 打印我们返回的元素对象，更好的查看里面的属性和方法在这里插入图片描述

根据标签名获取

使用getElementsByTagName()可以返回带有指定标签名的对象的集合，以伪数组的形式存储
在这里插入图片描述
注意:
1．因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历。
2．得到元素对象是动态的
3.不管怎样，返回的还是伪数组的形式
4.没有这个形式，返回空的伪数组

不常用

通过HTML5新增的方法获取

在这里插入图片描述

获取特殊元素（body和html元素）

获取body元素：document.body;
获取html元素：document.documentElement;

事件基础

事件概述

在这里插入图片描述

事件三要素

事件源、事件类型、事件处理程序

在这里插入图片描述

事件执行步骤

在这里插入图片描述

常见的鼠标事件

在这里插入图片描述

元素属性

获取元素的属性值

Element.属性
Element.getAtrtibute(‘属性’);
区别:
element.属性:获取内置属性值(元素本身自带的属性)
element.getAttribute( ‘属性’);主要获得自定义的属性（标准）我们程序员自定义的属性index

设置属性值

element.属性=‘值’
element.setAttribute(‘属性’,’值’);
区别:
element.属性设置内置属性值
element . setAttribute ( ‘属性’);主要设置自定义的属性（标准)
在这里插入图片描述

移除属性

element.removeAttribute(属性);

H5自定义属性

有些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。H5给我们新增了自定义属性

自定义属性目的∶是为了保存并使用数据。有些数据可以保存到页面中而不用保存到数据库中。

设置H5自定义属性

H5规定自定义属性data-开头并作为属性名并且赋值。
比如：<div data-index="1"></div>
在这里插入图片描述
dataset是一个集合里面存放了所有以data开头的属性

获取H5自定义属性

在这里插入图片描述

改变元素内容

element.innerText
element.innerHTML
在这里插入图片描述
可以不用添加事件类型直接使用
innerText和innerHTML的区别：
innerText不识别HTML标签会去除空格和换行
innerHTML识别HTML标签保留空格与换行
这两个属性是可读写的可以获取元素里面的内容

修改元素属性

常用元素的属性操作

在这里插入图片描述

表单元素的属性操作

在这里插入图片描述
表单里面的值文字内容是通过value来修改的

样式属性操作

通过js修改元素的大小、颜色、位置等样式
在这里插入图片描述
注意:
1.Js里面的样式采取驼峰命名法比如fontSize、backgroundColor
2.Js修改style样式操作，产生的是行内样式，css权重比较高
Element.style

样式的显示和隐藏：display:none隐藏元素 display:block 显示元素

Element.className 设置或返回元素的class属性
修改元素的className更改元素的样式适合样式较多或功能复杂的情况
在这里插入图片描述
保留原先类名方法
element.className=’ 后来改的类目‘（空格+后来的类名）

css精灵图

核心原理∶将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了。
精灵技术目的︰
为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度
在这里插入图片描述
(千万注意网页中的坐标:x轴右边走是正值，左边走是负值，y轴同理。)

在这里插入图片描述
或者

循环精灵图

利用for循环，改变background-position的位置

Onfocus事件
onfocus 事件在对象获得焦点时发生。

Onfocus 通常用于 , , 和.

提示： onfocus 事件的相反事件为 onblur 事件。

CSS 中的cursor属性

cursor 属性规定要显示的光标的类型（形状）。
该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状

pointer	光标呈现为指示链接的指针（一只手）

cursor:pointer;
获取body元素：document.body
鼠标事件：鼠标经过：onmouseover
鼠标离开：onmousesout

节点操作

在这里插入图片描述

节点概述

在这里插入图片描述

利用DOM树可以把节点划分为不同的层级关系，常见的是父子兄层级关系。

父级节点

parentNode 离元素最近的父级节点如果找不到就返回null

语法：node.parentNode

子节点

包含所有的子节点包含元素节点文本节点等
语法：1.parentNode.childNode ----------标准
在这里插入图片描述
2.parentNode.children ----------非标准
3.parentNode.firstChild
firstChild返回第一个子节点，找不到则返回null。同样，也是包含所有的节点。
4.parentNode.lastChild

兄弟节点

在这里插入图片描述

创建节点

在这里插入图片描述

添加节点

appendChild后面追加元素类似数组的push
数组push
在这里插入图片描述

数字转字符串在这里插入图片描述

在这里插入图片描述

InsertBefore

添加一个元素两个步骤：1创建元素2添加元素

删除节点

在这里插入图片描述
删除元两个步骤：1获取元素 2删除元素
阻止链接跳转需要添加javascript:void(0);或者javascript:;
复制节点（克隆节点）

生成数据

单个

 var datas = [
            {
                name: 'z',
                subject: 'sj',
                grade: '100',
            }];

多个

   var datas = [
            {
                name: 'z',
                subject: 'sj',
                grade: '100',
            },
            {
                name: 'x',
                subject: 'sj',
                grade: '100',
            },
            {
                name: 'c',
                subject: 'sj',
                grade: '100',
            },
            {
                name: 'v',
                subject: 'sj',
                grade: '100',
            }
        ];