js总结大纲

最新推荐文章于 2022-11-04 14:15:46 发布

苏辰C

最新推荐文章于 2022-11-04 14:15:46 发布

阅读量229

点赞数

文章标签： javascript node.js html5

本文链接：https://blog.csdn.net/CSDN_ure001/article/details/120629984

版权

自从我们学习了js进行页面交互，才发现页面的多种动态效果。

从一开始的加减乘除运算到后来的if else判断，for循环等等，都极高的提高了对js这门语言兴趣与爱好相信大家也如同我一样，那就让我们一起来回顾我们热爱和神奇的js吧！

1运算符和if判断

运算符包含（+ - * / %）就如同我们之前数学学的一样，不过js运算期间可以进行隐式转换。

但是有一些不能转化成功我们可以通过parseInt（）或者parseFloat（）进行转换

if判断与三元运算符是我们js常用的判断句式

if通常与else if还有else连用

三元运算符用？表示判断：表示两个结果：前面是符合true：后面是false；flag？true：false

2数组

数组

push 数组末尾添加元素
shift 删除数组头部元素
unshift 头部添加元素
indexOf 获取元素在数组中的索引
lastIndexOf
sort 排序
reverse 翻转数组
join 加入

concat 合并数组

splice 删除、添加、替换

slice 截取数组

pop 删除数组末尾元素
...

数组的迭代方法

some 若数组中的有一个元素满足条件，则返回true，若都不满足，则返回false
every 若数组中每一个元素都满足条件，则返回true，有一个不满足，则返回false、

filter 过滤筛选满足条件的数据，组成新数组返回一个新数组

map 对原数组数据进行处理之后，返回新数组

reduce 接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值

3同步异步

同步：按照顺序执行，会阻塞

异步：不一定按照顺序，不会阻塞

注意：同步和异步同时出现，先执行同步

4正则表达式

表单校验和字符串处理

定义正则：

new RegExp()
/规则/修饰符
修饰符： g、i、m

| 或

元字符
[] 任意一个范围： [0-9] [a-z] [A-Z] [0-9a-zA-Z]
[^] 取反
^ 开头
$ 结尾
\ 转义字符
\d 数字 [0-9]
\w 单词 [0-9a-zA-Z_]
\s 空格、换行、制表符
\D 非数

正则搭配字符串

replace() 替换

search() 搜索返回第一个匹配元素的索引

注意：g修饰符无效

match() 筛选选出满足条件的元素

量词

? 零或一个{0,1}
+ 至少一个 {1，}
* 零或多个 {0,}
{m} 出现m次
{m,n} 大于等于m，小于等于n
{m,} 大于等于m

正则对象的方法

test() 校验字符串是否满足规则， true/false

表单

3.1 表单基础知识

表单又称为form表单

常用的属性：

action 表单提交的目标地址(服务器地址)
method GET/POST 网络请求方式
- GET
- POST
- GET 和POST区别
  - GET请求数据会在地址中携带 POST请求的参数在请求体
  - GET 大小有限制 POST无大小限制
  - POST更加安全
onsubmit 提交事件
常见方法：
focus() 获取焦点
submit() 提交
reset() 重置

DOM

找元素

- getElementById
- getElementsByClassName
- getElementsByTagName
- getElementsByName
- querySelector
- querySelectorAll
DOM节点的属性
- childNodes 子节点(文本节点和元素节点)
- children 子节点元素节点
- firstChild 第一个子节点
- lastChild最后一个子节点
- parentNode父节点
- previousSibling
- nextSibling
- 修改页面的样式
- 获取样式
  - 对象.style.样式名行内样式
  - getComputedStyle() 获取样式(行内和样式表) 不支持IE8之下
  - currentStyle IE低版本

兼容性写法：

      //样式的兼容性写法
        // function getStyle(o, property) {
        //     if (window.getComputedStyle) {
        //         return getComputedStyle(o)[property]
        //     }
        //     return o.currentStyle[property]
        // }
        function getStyle(o, property) {
            var tag = 'getComputedStyle' in window
            return tag ? getComputedStyle(o)[property] : o.currentStyle[property]
        }

操作元素总结

操作元素内容主要是包括 innerText（不识别html标签） innerHTML（识别html标签）
操作常见元素属性主要是src href title alt等等
操作表单元素属性主要是type value disabled
操作元素样式属性主要是 element.style className

修改页面的内容

修改文本内容（闭合标签、表单元素）
- innerHTML innerText
- value
属性
- 获取
  - 节点.属性名
  - 节点[属性名]
  - 节点.getAttribute(属性名)
- 设置
  - 节点.属性名=值
  - 节点[属性名]=值
  - 节点.setAttribute(属性名,值)

三种属性方案的区别：
getAttribute和setAttribute可以获取自定义标签属性的值

增加自定义属性 element.setAttribute('属性'，'属性值') 增
删除自定义属性 element.removeAttribute('属性') 删
修改自定义属性 element.setAttribute('属性'，'属性值') 改
获取自定义属性 element.getAttribute('属性') 查

DOM 核心

什么是DOM?
- 文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。
- 对于JavaScript，为了能够使JavaScript操作HTML，JavaScript就有了一套自己的dom编程接口。
- 对于HTML，dom使得html形成一棵dom树. 包含文档、元素、节点
- 关于dom操作，我们主要针对于元素的操作。主要有创建、增(插入)、删、改、查；关于自定义属性操作，增(插入)、删、改、查

创建元素（标签）

```
document.write('')
```
```
element.innerHTML
```
```
document.createElement('')
```

增加插入元素(标签)

```
parentNode.appendChild()
```

parentNode.insertBefore(创建的元素,指定元素的前面)

删除元素
- ```
parentNode.removeChild()
```
改
- 主要修改dom的元素属性，dom元素的内容、属性, 表单的值等
- 修改元素属性：
  - ```
  element.src、href、title等
```
- 修改元素样式：
  - ```
  style、className
```
- 修改元素内容：
  - ```
  element.innerHTML 、innerText
```
- 修改表单元素：
  - ```
  value、type、disabled等
```

查

主要获取查询dom的元素

DOM提供的API 方法：

getElementById、getElementsByTagName  // 古老用法 不太推荐

H5提供的新方法：

getElementsByClassName querySelector、querySelectorAll // 提倡

利用节点操作获取元素：

父(parentNode)、子(children)、兄(previousElementSibling、 nextElementSibling) // 提倡

属性操作
- 主要针对于自定义属性.
- 设置dom的属性值
  - ```
  setAttribute('属性名', 属性值)
```
- 得到dom的属性值
  - ```
  getAttribute('属性值')
```
- 移除属性
  - ```
  removeAttribute('属性名')
```

事件操作

给元素注册事件，采取事件三要素事件源.事件类型 = 事件处理程序

鼠标事件	触发条件
onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

BOM

BOM 概述

什么是BOM

BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。
BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。
BOM 缺乏标准，JavaScript 语法的标准化组织是 ECMA，DOM 的标准化组织是 W3C，BOM 最初是Netscape 浏览器标准的一部分

DOM和BOM的区别

DOM
- 文档对象模型，就是把[文档] 当做[对象]来看待；
- DOM的顶级对象是document
- DOM主要学习的是操作页面元素
- DOM是W3C标准规定
BOM
- 浏览器对象模型
- 把[浏览器]当做一个[对象]来看待
- BOM的顶级对象是window
- BOM学习的是浏览器窗口交互的一些对象
- BOM是浏览器厂商在各自浏览器上定义的，兼容性较差

Window常见事件onload加载事件

load 等页面内容全部加载完毕，包含页面dom元素图片 flash css 等等
DOMContentLoaded 等DOM加载完毕不包含图片 flash css 等就可以执行加载速度比load更快一些

setTimeout定时器与定时器之setInterval

setTimeout
- Timeout超时延时时间到了，就去调用这个回调函数，只调用一次，就结束这个定时器
setInterval
- Interval间隔每隔这个延时时间，就去调用这个回调函数，会调用很多次，重复调用这个函数

清除定时器用clearInterval / clearTimeout

使用定时器可以动画的封装

在动画完毕时，加入了回调函数，可以解决如何监听动画结束的问题.

备注：回调函数可以解决异步、同步的问题

function move(obj, property, step, target, callback) {
    clearInterval(obj.t);
    //根据起点和终点直接的关系，判别速度的正负
    step = parseFloat(getStyle(obj, property)) > target ? -step : step;
    //将定时器编号保存在对象的自定义属性上
    obj.t = setInterval(function () {
        var speed = parseFloat(getComputedStyle(obj)[property]) + step;
        //临界值判断
        if ((step > 0 && speed >= target) || (step < 0 && speed <= target)) {  //终点
            clearInterval(obj.t);
            speed = target;
            if (callback)           //动画完成的回调函数
                callback()
        }
        obj.style[property] = speed + 'px'
    })
}


function getStyle(obj, property) {
    if ("getComputedStyle" in window) {
        return window.getComputedStyle(obj)[property];
    }
    return obj.currentStyle[property]
}

this指向问题

一般情况下，this指向调用他们那个对象
在全局作用域下 this指向谁 window
普通函数里面this指向谁 window

function fn() {
    console.log(this);
};
fn();

定时器里面的this指向谁 window

window.setTimeout(function() {
    console.log(this);

}, 3000);

给指定元素绑定事件，this指向事件绑定者 btn

var btn = document.querySelector('button');
// btn.addEventListener('click', function() {
//     console.log(this);

// });
btn.onclick = function() {
    console.log(this);

};

对象的方法里面的this指向谁指向这个对象

var iu = {
    myname: '张磊',
    age: '18岁',
    sex: '女',
    skill: function() {
        console.log(this);
    }
};
iu.skill()

构造函数里面的this指向对象的实例化构造函数在调用的时候使用new

function Fun() {
    console.log(this);

}
var fun = new Fun();
fun.uname = '裤萨斯';
fun.age = '18岁';
fun.sex = '男';
console.log(fun);

call和apply

this在不同的地方，指向不同。

全局中this指向window

在事件函数中指向事件调用者

对象的方法中，this指向对象(this指向调用者，谁调用，this指向谁)

call和apply都可以修改函数中的this指向问题（功能一致，用法不一致）

call(obj,参数1,参数2,参数2)
apply()

哎呀！就到此为止吧。

苏辰C

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js总结大纲

自从我们学习了js进行页面交互，才发现页面的多种动态效果。从一开始的加减乘除运算到后来的if else判断，for循环等等，都极高的提高了对js这门语言兴趣与爱好相信大家也如同我一样，那就让我们一起来回顾我们热爱和神奇的js吧！1运算符和if判断运算符包含（+ - * / %）就如同我们之前数学学的一样，不过js运算期间可以进行隐式转换。但是有一些不能转化成功我们可以通过parseInt（）或者parseFloat（）进行转换if判断与三元运算符是我们js常用的判断句式i...
复制链接

扫一扫