转载：原生js

最新推荐文章于 2022-01-29 09:39:59 发布

Mmrh.

最新推荐文章于 2022-01-29 09:39:59 发布

阅读量233

点赞数

分类专栏： js初步理解

本文链接：https://blog.csdn.net/weixin_46878085/article/details/106750127

版权

js初步理解专栏收录该内容

3 篇文章 0 订阅

订阅专栏

@[事件：用户的操作，行为(js) 结构(html) 样式(css) 三者分离！

一、获取元素：

document.getElementById 没获取到返回一个null

不兼容：ie67 a. 忽略大小写 b. 表单name充当id

2 .document.getElementsByTagName 没获取到返回一个空数组

document.getElementsByClassName
document.getElementsByName

二、函数：

function 函数名(参数列表){ 函数定义

arguments

js代码

return ;

}

函数名(参数列表); 函数的调用

变量：var 变量名 = 值;

a.只有函数的定义没有函数的调用什么都不会发生

b.只有函数的调用没有函数的定义报错！

c.函数每执行一次都会复制一份，包括里面的参数！

d.变量：变量的值以调用为准！

三、循环：while for 没有区别！

while 次数不定, for 次数固定

循环4个条件：a. 条件初始化 b. 条件判断 c. 执行语句 d. 自增自减

四、数据类型：

1、“string” “number” “boolean” “undefined” “object” “function”

基本数据类型： string number boolean undefined

复合数据类型：object function （function——有争议！前端属于复合数据类型分的标准：能分出新的数据类型）

2.类型转换：隐式强制

强制：parseInt/float/Number 隐式： + : a 字符串连接 b 数字加 c - ：数字减

字符串连接：字符跟任意一个东西进行连接都是字符串！

五、符号

```
=    赋值     
```
== 比较勤快 1 类型转换 2 比较
=== 比较 1 直接比较值
< >=
true 1 false 0
null 0 undefined – 》 NaN
假：0 “” null undefined NaN false

六、return 返回值

变量参数返回值没有数据类型由值决定！

特性：

1 函数的返回值没有类型

2 函数后的代码不执行

3 return; 返回一个undefined

4 没有return 返回一个undefined 系统给

七、null 跟 undefined区别？（没有！）

1.null a. 元素获取失败 b. 直接赋值 null c. 事件默认值 null

2.undefined

a. 定义了没赋值

b. 真的没定义

c. 函数没有明确返回值

d. 访问一个不存在的属性

e. 直接赋值 undefined

八、break continue

break continue; 终止循环语句

1.break 暴力直接终止整个循环

2.continue 终止当前循环，进入下一轮循环

break 流程控制语句 switch

流程控制语句

switch

switch(变量){

case 值：

执行语句

break;

default: —— else

}

三目条件？语句1：语句2;

if(条件){

语句;

}

&& : 条件 && 语句;

if(条件1 && 条件2 &&。。。。){

}

九、运算符：

算术、比较、逻辑、赋值

十、定时器：

set/clearInterval(fn,time) （多次）

set/clearTimetout(fn,time) （一次）

十一、字符串与数组：

字符串操作：

a. str.length（字符串长度）

b. str.indexOf(找东西) 从前往后 index -1

c. str.lastIndexOf 从后往前

d. str.charAt(index) 字符

e. str.substring(beginIndex[,endIndex]) （字符串截取）

eg: "abcdef".substring(2,4); -->cd     截取的个数：endIndex - beginIndex,不包含最后一位

f. str.split(切的规则) 返回数组

g. str.toLowerCase 小写 str.toUpperCase 大写

h. str.replace(str1|re,str2|fn);

i. str.match(re); 数组没匹配到null

j. str.charCodeAt(index)— > 返回code

k. String.fromCharCode(code) —> 返回字符

数组：

a. shift() 方法：把数组的第一个元素删除，并返回第一个元素的值

b. concat() 方法：用于连接两个或多个数组,并返回一个新数组，新数组是将参数添加到原数组中构成的

c. join() 方法：用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。

返回一个字符串。该字符串是通过把 arrayObject 的每个元素转换为字符串，然后把这些字符串连接起来，在两个元素之间插入separator字符串而生成的

d. pop() 方法：用于删除并返回数组的最后一个(删除元素)元素,如果数组为空则返回undefined ,把数组长度减 1

e. push() 方法：可向数组的末尾添加一个或多个元素，并返回新的长度，（用来改变数组长度）

f. reverse() ：方法用于颠倒数组中元素的顺序

g. slice() 方法：可从已有的数组中返回选定的元素。slice(开始截取位置，结束截取位置)

h. splice() ：方法向/从数组中添加/删除项目，然后返回被删除的项目,splice() 方法可删除从 index 处开始的零个或多个元素，并且用参数列表中声明的一个或多个值来替换那些被删除的元素

i. unshift：将参数添加到原数组开头，并返回数组的长度

j. sort(orderfunction)：按指定的参数对数组进行排序

arr.sort(function(n1,n2){//比较函数

return n1 - n2;// 从小大大

}) 排序

十二、json

json: 存数据 arr:

比较值 json arr 区别

a. length 没有有

b. 循环for in for for in 性能低

c. 下标字符串数字

d. 顺序无序有序

json：{key:value} 键值对键唯一！去重！

字符串转 json

a. eval("("+strJson+")")

b. JSON.parse(strJson); 格式严格需要一个标准的json, 标准的json 字符串, 必须都是双引号！

c. json 转字符串 JSON.stringify(json);

d. 兼容：eval全兼容 JSON 不兼容 ie8+

十三、样式的操作：

style 操作的是行间 obj.style.样式名 = value; cssText: 行间怎么写 cssText 就怎么写！
```
obj.style.cssText = "样式名:value";       cssText: 读 写     写： 会覆盖行间样式！
```
获取非行间样式： obj.currentStyle.样式名 getComputedStyle(obj,false/null).样式名 w3c规范
false:伪类
不能获取复合样式！

十四、作用域：

全局定义在函数外全局可用
局部定义在函数内仅函数内可用
闭包子函数可以访问父函数的东西（变量 + 函数）

十五、封闭空间：闭包！

(function(){

})(参数列表);

解决什么问题:1. 事件里面的i 2. 定时器里面的i 好处：省了一个函数名防止重名

十六、预解析：把变量的定义(仅仅是定义)提升到最顶上（作用域）！

范围： a. script b. 作用域
变的定义：var a = 12; a. 定义 var a; b. 赋值 a = 12;
变量不带var 不会预解析！
return 后的代码不执行但是会预解析 return 返回的代码不会预解析
变量不会重复定义

十七、字符编码：

中文范围：4e00-9fa5
0x —— 十六进制
\u —— unicode编码
utf-8 3字节
gbk 2字节

十八、try:异常 if

try{

可能出错的代码

}catch(e){

补救的代码或者提示

}

不要使用try 性能低！

十九、js组成：

ECMAScript 核心解释器语法 BOM browser object model 操作浏览器的能力 DOM docuemnt object model 操作文档的能力
BOM：

a. alert √; window.navigator.userAgent √ ; window.loaction √

b. href 地址; hash 锚点 #name; host 主机名; pathname 资源路径; search 数据？

protocol  协议http:// file://;   window.open();    √

c. 打开新窗口: open(url,打开方式);

打开方式：_self / _blank（默认值）用户体验、安全： 用户自己点击的操作！

d. document.write(); window.close(); window.confirm(); window.prompt();

节点 == 标签 == 元素;

a. 父节点 parentNode 一个对象;

b. 子节点 children; 数组

c. 兄弟节点：

上一个 previousElementSibling ||previousSibling

下一个 nextElementSibling ||nextSibling

d. 节点：元素节点文本节点

previousElementSibling 高级浏览器 元素节点

previousSibling 所有浏览器  包含文本节点

首尾：firstElementChild || firstChild  children[0]

          lastElementChild || lastChild    children[len-1]

e. 创建节点

obj.tagName  标签名 都是大写;  var oDiv = documemnt.createElement("标题名");

(a) 只能从document 创建元素

(b) 是添加到某一个具体的元素内 不能是document

(c) 创建忽略大小写

(d) 创建只能是英文 不能是中文 不兼容ie

f. 添加节点

父级.appendChild(obj);    父级.insertBefore(obj，谁前面);

g. 删除节点

父级.removeChild(obj);    obj.parentNode.removeChlild(obj);

二十、盒子模型

offset:

offsetWidth/Height

offsetTop/Left

offsetParent

offsetWidth/Height:盒模型大小

盒模型：一个元素实际所占位置的大小

1 组成：width + padding + border 不包含margin

2 display：none; 没有盒模型

3 元素不设置宽高也有盒模型内容决定

offsetTop/Left 一个元素距离定位父级的左边距上边距

offsetParent 定位父级

function getPos(obj){

var l = 0;

var t = 0;

while(obj){

l += obj.offsetLeft;

t += obj.offsetTop;

obj = obj.offsetParent;

}

return {left:l,top:t};

}

根：

节点根：document 虚拟节点 parentNode -> null

定位的跟：body offsetParent-> null

scrollLeft/Top/Height

document.documentElement.scrollLeft/Top ie ff

document.body.scrollLeft/Top chrome

documentElement html

二十一、瀑布流

瀑布流：等宽不等高！

往最短的div 插入元素！

二十二、事件

1.事件运动 seajs/requirejs ajax jsonp 正则

addMouseWheel lagou 翻转 chrome webqq

事件:用户的操作

事件对象：描述事件的详细信息

event ie chrome

ev 高级浏览器 ie9+

var oEvent = ev || event;

oEvent 什么属性？

clinetX/Y:可视区的坐标最好把scrollTop/Left

键盘事件 keyCode:

回车：13

方向：37 - 40

a-z: 65 - 97

0-9: 48 - 57

pageX/Y 鼠标距离页面的左上角的距离

pageX = clientX + scrollLeft

pageY = clentY +　scrollTop

功能键：

shift/alt/ctrilKey

冒泡：cancelBubble = true;

什么叫冒泡？子元素的事件可以传播到父级身上！

特性：

a. 元素的不添加事件也会冒泡

b. 跟位置无关只跟父子级关系

c. 冒泡可以取消

默认事件：浏览器自带的行为、功能

都可以取消：return false;

事件绑定 return false失效?

哪个绑定会失效？

addEventListener —— ev.preventDefault();

2个绑定：

ie: obj.attachEvent(on+事件名，事件函数);

高级浏览器：

obj.addEventListener(事件名，事件函数,false);

事件流：事件捕获 + 冒泡

false 可以省略但是不能省！

  冒泡

true:事件捕获

99.9999% 都不会用！ —— 面试！
解绑定：

detachEvent

removeEventListener

注意：匿名函数不能解除绑定！

鼠标事件

onmouseover/out – bug

onmouseover:判断一个来源

fromElement ie chrome

relatedTraget 高级浏览器

onmouseout：判断一个去向

toElement ie chrome

relatedTraget 高级浏览器

父级.contains(子元素); 是 true 不是 false

事件委托：srcElement ie chrome

target 高级浏览器

好处:性能推荐用事件委托！

滚轮 :

wheelDelta —— onmousewheel ie chrome

detail —— DOMMouseScroll ff

addMouseWheel ——方向上下

下 true 火狐

wheelDelta 上120 下 -120

detail 上-3 下 3

onclik onmouseover onmouseover onmouseenter

onmouseleave onkeydown onkeyup onmousemove

onmoseup onmousedown onscroll onresize onload

onreadystatechange oncontextmenu onmosewheel

onfocus onblur onchange DOMMouseScroll

DOMContentLoaded onsubmit onpropertychange oninput

DOMContentLoaded —— onload

onreadystatechange

dom树：documet

onreadystatechange

readyState: interactive 正在渲染 complete 渲染完成

二十三、运动

运动的三要素：起点终点时间

   1. 定时器：30ms 

      距离:终点 - 起点 dis

      次数：时间/30 count

      n

      位置： 起点 + 距离*n/count

 2. 360角度 = 2PI弧度

    n*1弧度 = n*180/Pi角度

二十四、seajs：

1 “自动”帮你引入代码

2 “自动”解决依赖

模块化开发：

模块：一个js文件就是一个模块！

如何定义一个模块

define(function(require,exprots,module){

注意事项：

1 变量名不能修改

2 exprots module 不能共存  module优先！

  module.exprots == exprots true

});

如何使用一个模块

seajs.use(str/[js1,js2],function(mod1,mod2…){

});

请求模块：

use html —> js

require js —> js

二十四、requirejs

使用模块

require([js1,js2],function(mod1,mod2…){

});

二十五、ajax 状态码只有三位

ajax: 请求数据

创建

a.XMLHttpRequest(); ie7+ 给高级浏览器用

b.ActiveXObject(“Microsoft.XMLHTTP”); IE678

c.兼容：

(a) window

(b) try catch  不推荐

(c) 判断浏览器

(d) addEventListener

(e)  in

连接

 open(方式，地址，是否异步 true);

 方式: get post

 get  数据在地址栏上  不安全            小32k  有缓存

 post  不在          相对安全https      1G    没有缓存

 https  数据加密    银行  钱  "慢"

 http  数据不安全  明文传输  快

 缓存:浏览器对同一个地址只会访问一次！

 解决：地址不一样

  添加一个随机因子（随机数）

  a. Math.random()  √

   b. 时间戳

   c. Math.random() + 时间戳

发送
```
 xhr.send();
```

接收

 xhr.onreadystatechange = 回调函数;

readyState:

          (0) 对象创建完成

          (1)  连接完成

          (2) 数据发送完成

          (3) 接收数据  报文头  响应头

          (4) 接收数据  报文体  响应正文

           if(xhr.readyState == 4){//完成  并不代表成功

                 //http的状态 xhr.status[200,300)  304

                     if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){

                                 //成功

                             内容： xhr.responseText

                                 } else {

                                         //失败

                             }

              }

http的状态: 一共三位第一位代表类型

 1xx  服务器正在响应请求、处理

 2xx  成功

 3xx  重定向

         304 Not Modified  缓存

 4xx  失败  —— 前端失败

           404 not found

           414 Request-URI Too Large

           自己查百度 4xx

5xx  失败  —— 后端失败

           503 宕机

            http状态组成：状态码status + 文字描述 statusText

post:

 a. open

 b. 设置一个请求头

   xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

 c. send(数据)

ajax 请求数据不能跨域

jsonp 跨域请求数据

 跨域：只要 协议 域名 后缀 端口 任意一个不同 就算跨域！

 为什么不能跨域？

 安全：—— 同源策略！浏览器限制的！

 http组成：

         http://    www.    zhinengshe  .com      :80  /index.html

         协议      二级域名    主域名  后缀类型  端口  资源

         http://www.baidu.com

         http://mp3.baidu.com

         http://tieba.baidu.com

         http://map.baidu.com

         http://d.c.b.a.baidu.com

         可以

         http://www.baidu.com/a.html

         http://www.baidu.com/b.html 

         不可以

         http://www.baidu.com/a.html

         https://www.baidu.com/b.html

         不可以

         http://mp3.baidu.com/a.html

         http://www.baidu.com/b.html

         不可以

         http://www.baidu.com:80/a.html

         http://www.baidu.com:8080/b.html

8.jsonp原理：

    a. 文件后缀对计算机没有任何意义 —— 给人看的

    b. script标签可以访问任何网站的文件

    baidu:

            https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=aaa&&cb=xxxx

            wd:word

            cb:callback

    360:

        http://sug.so.360.cn/suggest?callback=xxxx&word=aaaa

二十六、script

script标签是一次性！

总结：

        1. 创建script

        2. 准备一个全局函数

toUTCString : 世界标准时间 √

toGMTString : 格林威治时间

二十七、正则表达式

正则：用计算机的语言描述一个规则！

正则大陆——正则表达式台湾——规则表达式

正则对象：RegExp

var re = new RegExp(“规则”,“选项”);

var re = /规则/选项;

选项：三种img 没有顺序

i: ignore 忽略大小写

m: mutil-line 多行匹配

g: global 全局匹配

str.match(re); 数组没匹配到 null

str.search(re); index -1

str.replace(str1|re,str2|fn);

function(匹配到的东西){

必须有返回值！

}

re.test(str) true匹配到了 false没找到

正则的脾气：

1 懒 g

2 蠢加量词 + 若干

3 贪婪尽可能多的匹配东西

正则规则：

中括号：[];

一范围

[a-z]

[4-6]

二任选一个

/[abcdef]/ a b c d e f

/a[bcd]/

abi ac ad

/a[bcd]+/

abbbbbb

acccc

adddd

** 量词只管一个

/a(bc)+/

abcbcbc…

() 分组要么都出现要么都不出现！

三排除 ^ 必须出现在第一位！

[^a-z]

[0-9^a-z] ×

转义：转换一种含义 \

只有特定字母才有！

计算机： \n \r \t tab \f \b \u

\d 数字

\w wrod 单词字母数字下划线 [a-zA-Z0-9_]

\s 空字符

\b 单词边界

\D 非数字 [^0-9]

\W 非单词 [^a-zA-Z0-9_]

\S 非空字符

\B 非单词边界

. 任意字符

量词：个数

{n} 正好n个 /\d{5}/

{n,m} 最少n个最多m个

{n,} 最少n个多了不限

{,m} ×

若干 {1,} 至少有一个

任意 {0,} 可以没有慎用！

? 可有可无 {0,1}

^ 行首

$ 行尾

二十八、表单三要素：

1 action 数据提交到哪

2 name 叫什么

3 value 值是什么

表单：

用户名：32位第一位必须是英文必须六位以上

/^[a-z]\w{5,31}$/i

邮箱：chen00jian@sina.com.cn

  chen00jian    @  sina      .com    .cn

\w+ @ [a-z0-9-]+ (.[a-z]{2,6}){1,2}

电话号码：区号[3,4] + 号码[7,8]

      (0\d{2,3}  -)?    [1-9]\d{6,7}

年龄：16-100

16-19 20-99 100

1[6-9]|[2-9]\d|100

性能优化 mvc

Mmrh.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
转载：原生js

@[事件：用户的操作，行为(js) 结构(html) 样式(css) 三者分离！一、获取元素：document.getElementById 没获取到返回一个null不兼容：ie67 a. 忽略大小写 b. 表单name充当id2 .document.getElementsByTagName 没获取到返回一个空数组document.getElementsByClassNamedocument.getElementsByName二、函数：f
复制链接

扫一扫