03-JS学习(1)

0、序

在script标签中写JS代码，script标签可以放在html文件中的任意位置，但一般放在body的最后。script标签可以有多个 script可以在body标签结束之前引入内部脚本，也可以在head标签里通过script标签的src的属性外部引入。 JS大小写敏感 var 关键字命名变量 变量类型由值决定 JS拥有动态类型 可以使用typeof 查看变量类型。

JS三种输出方式 1、alert 弹出警告框 2、document.write() 内容写到HTML文档中 3、控制台输出

1、5种基本数据类型

number(包含整型和浮点型)、null(空)、undefined(当函数没有返回值时打印)、Boolean、string。

Object为对象类型 字符串单双引号均可。但是唯一不能写在内部的是外部定义时用的引号。 undefined 用来表示数据类型未知或存在类型错误。 null表示对象为空。 undefined类型和null类型在页面种表现的效果是相同的，但是undefined用于变量类型，null用于对象类型。

2、常用函数

typeof 和Pythono中type函数功能一样，trim()函数和python的strip()函数功能一样。

NaN只要参与比较，结果一定是false。

比较运算符两侧如果一个是数字类型,一个是其他类型,会将其类型转换成数字类型. 比较运算符两侧如果都是字符串类型,比较的是最高位的asc码,如果最高位相等,继续取第二位比较.

3、创建字符串：

自动创建字符串对象： var str1= "hello world"; 调用字符串的对象属性或方法时自动创建对象，用完就丢弃 手工创建字符串对象： var str1= new String( "hello word"); 采用 new创建字符串对象str1，全局有效

4、大小写转换

var str1 = "Lab"; var str2=str1.toLowerCase(); 变成小写 var str3=str1.toUpperCase(); 变成大写

5、获取指定字符

var str1 = "lab" str1.charAt(index) charAt返回index位置的字符 str1.charCodeAt(index) charCodeAt返回index位置的Unicode编码

6、定位字符元素

var str1 = "laal"; var str2=str1.indexOf( "l"); 只会定位第一个元素的位置 var str3=str1.lastIndexOf( "l"); 只会定位最后一个元素的位置

7、截取子字符串

var str1 = "coconut"; str1.substr(start, length) str1.substring(start, end) str1.slice(start, end) 和python的切片一样

8、字符串操作

var str1 = "coconut"; 替换子字符串：str1.replace(findstr,tostr) 分割字符串: str1.split( ",") 连接字符串：str1.concat(addstr) 返回 str1+addstr

替换字子符串功能的拓展：格式化字符串

首先要知道在JS中字符串的方法例如 trim()、length()都是在 String.prototype方法中  (String原型类) 。

所以顺着这个思路进行重写

// 自定义一个方法 String.prototype.format = function (args) { console.log( this) // this指的是当前调用方法的对象 var v = this.replace( /\{(\w+)\}/g, function (km,m) { // km是匹配到的结果 m 是索引 如果加上分组m就是分组的值 return args[m] // replace return什么匹配的位置就会被替换成什么 }); // 这里写正则表达式 g代表全局表达式写在两个斜杠中间 return v // 将格式化的字符串返回 } console.log( "卓哥哥年龄{age}性别{gender}".format({ "age": 18, "gender": "男"}))

9、创建数组

赋值法：attr=[ 1, 2, 3] attr1 = new Array(size)、 attr2= new Array(“msg”) 可以放长度，或者放数组的内容(不能是整型) attr.join() 拼接字符串，和python 的一样，只不过是数组才能调用。拼接完后成了字符串 attr.concat() 拼接数组或着添加新元素，并不会修改原数组。 attr.sort(可以放函数) 排序 正数返回值大于 0 负数小于 0 attr.splice(start, length) 删除、 attr.splice(start, 0,value...) 添加多个值

10、压栈、出栈

var str1 = [ 1, 2, 3, 4, 5]; str1.pop() 出栈 str1.push( 6) 压栈 str1.shift() 从头删除 str1.unshift( 6) 从头添加

11、创建函数：

在js中，执行js文件时会先加载所有的function 所以函数的调用写在哪里都可以，但是如果要是匿名函数，就只能乖乖的写在下面了。

new Function(参数1，...参数n，函数体); 过于繁琐一般不用。

函数的length属性是说明参数有几个。用arguments接受多个参数，类似python的*arg  ， **kwarg。

但是用上这个函数就不一样了：

window.οnlοad=function (){函数体} 页面加载完成时才执行的动作。

12、window对象下的方法

alert( "msg")弹出警告框。 prompt( "msg") 返回值是输入的值，没有就是 null。 confirm( "msg")选择对话框 有一个返回 Boolean值 open(url)打开一个窗口。 close(url)关闭一个窗口。 window[ "key"] = 123 这样key就是全局变量 setInterval(函数名，间隔时间) 每过几秒执行一次，定时器，返回一个定时器的名字 clearInterval(取消的定时器的名字) 取消有setInterval设置的timeout setTimeout(函数名，间隔时间) 在指定的时间后调用该函数 clearTimeout() 取消有setTimeout设置的timeout

实现自动的时钟：

var clock; function begin() { show_time(); if (clock== null){ // 防止创建多把锁 clock = setInterval(show_time, 1000); } } function show_time() { var curr = new Date().toLocaleString(); var id1 = document.getElementById( "id1"); id1.value=curr; } function che() { clearInterval(clock); // 删除要把clock定义为undefined clock= undefined; }

※ window.open()和window.location.href区别：

1、window.location.href="http://www.jb51.net";     //在同当前窗口中打开窗口

2、window.open("http://www.jb51.net");                 //在另外新建窗口中打开窗口

13、history对象：

back()返回上一个页面、后退 等价于 go( -1)。 go(num)跳转到指定的页面，正数向前找，负数向后找。 foward()前进 等价于 go( 1)

14、location对象

assign(url)加载一个页面，直接跳转到url reload()刷新 replace(url)用另一个页面替代另一个页面，这种情况下没有后退的功能，两个页面用的是同一个url

15、事件：存在一个默认的时间event。

e.preventDefault()阻止默认事件，会阻止时间发生的方式。 e.stoppropagation()阻止事件传播，小范围去绑定，去绑定小的范围。

阻止事件传播的例子：

<div id= "div1" οnclick= "fun1()"> <div id="div2" onclick="fun2()"></div> < /div> <script> var ele1 = document.getElementById("div1"); var ele2 = document.getElementById("div2"); ele1.onclick = function () { alert("2333") } ele2.onclick = function (e) { alert("666"); e.stopPropagation(); } </script>

当点击小范围时出现两个弹框，是因为没有阻止其事件传播，当阻止时间传播以后就会出现一个弹框。

※：补充一个oninput事件是当输入的时候每输入一个字符就会执行一次。

16、classList

标签名.classList 获取当前标签所有的类名 标签名.classList.add( "name") 往当前标签添加一个类名name 标签名.classList.remove( "name") 从当前标签删除一个类名name

可以用来做遮罩层 ：

所谓的遮罩层分为三个部分，第一部分就是网页的整个主体，第二部分就是遮罩层类似蒙上一层面纱通过透明度调整，第三部分就是弹出的对话框。当第一次进入该页面时，只显示第一部分，其他两部分不显示，通过触发某些事件来显示第二部分和第三部分。

ele.οnclick= function () { big.classList.remove( "hide"); model.classList.remove( "hide"); // 删除使其隐藏的类 } btn.onclick = function () { big.classList.add( "hide"); model.classList.add( "hide"); // 增加隐藏的类使其隐藏 }

17、循环

两种循环方式：

(1)、推荐用这种方式

var attr = [ 1, 2, 3, 4, 5, 6]; for( var i= 0;i<attr.length;i++){ console.log(attr[i]); }

(2)、不推荐用这种方式， 因为会遍历出一些属性(length, item)，会出现想象不到的错误。

var attr = document.getElementsByTagName( "li"); for( var i in attr){ console.log(i); }

18、异常

try { throw new Date(); } // 抛出当前时间对象 catch (e) { alert(e.toLocaleString()); } // 使用本地格式显示当前时间

19、节点

ele.nextelementsibling 下一个兄弟元素 ele.children 子节点 ele.parentElement 父母节点 ele.removechild(ele) 删除节点 ele.appendchild(ele) 添加节点 ele.replace(old， new) 替换节点。

※：  关于DOM下创建一个节点：

var attr1 = document.createElement( "li").innerText = "666"; // 这样会创建不成功 var attr2 = document.createElement( "li"); // 这样就会创建成功 attr2.innerText = "666";

关于div.appendChild is not a function  这个问题，真的是中了邪了，实际上当拿到多个div时就会报错，写成div[0].appendChild()就解决了。

a标签无动作：

<a href="javascript:void(0);"> // 表示一个死链接,void(0) 是一段javascript代码，返回值是undefined

20、this关键字

var name = "root"; var age = 18; function Func(name,age){ this.name = name; // 在一个类函数中，this代表这个类的对象 this.age = age; this.func = function(){ console.log( this.age); // 10086 console.log( this.name); // pp function inner(){ console.log( this.name); // root 在一个函数中，this始终代表window对象 console.log( this.age); // 18 } return inner(); } } oop = new Func( "pp", 10086) oop.func()

在JS中没有字典，只有对象。

21、JS中的自执行函数

( function () { // 自执行函数 function time(){ alert( "2019-05-04"); } $.extend({ "NB": function(){ // jquery 的自定义插件机制 time(); } }) })() ------------------------------------------------------ $( function () { // 在外面直接通过调用NB就能执行该函数 $.NB( "233"); })

通过js写插件应该将函数写在自执行函数内，因为这样作用域不会混，在外部拿不到自执行函数内部的东西。

附：chrome浏览器js断电调试

在页面按F12或者单击右键检查，点击source选项卡，如图

CTRL+O 选择要调试的 js 文件，如图

选择好文件以后，在要调试的一行上单击代码行，如图会出现蓝标：

此时就已经打上断点了，按F5刷新页面重新加载页面，程序会在停在断点处，如图：

右面的区域：watch选项卡，单击 “+“ 输入表达式， 可以帮你监控执行当前断点所在作用域任何表达式的执行结果，如图

Call Stack 表示这个函数的调用堆栈，也就是 setState 是被哪个上层函数调用的，上层函数又是谁调用的，如图：

Scope 是当前断点的作用域以及所有的闭包作用域以及全局作用域，你可以看到所有作用域的变量，如图：

此时单击蓝色的按钮，程序会自动向下执行，并停在下一个断点处。这样一个简单的断点调试就完成了。