javascript笔记总结

最新推荐文章于 2024-08-27 13:38:21 发布

天空之城的宽容

最新推荐文章于 2024-08-27 13:38:21 发布

阅读量292

点赞数

文章标签： javascript 前端开发语言

原文链接：https://blog.csdn.net/m0_52725909/article/details/118229089

版权

本文详细介绍了JavaScript中的DOM操作，包括创建、查询、插入、删除节点，以及事件处理如点击、鼠标、键盘和表单事件。还讲解了事件委托、事件流和阻止默认行为。此外，探讨了数据类型转换、函数和作用域、数组方法以及正则表达式。最后，总结了BOM中的窗口、历史、屏幕和事件监听。

摘要由CSDN通过智能技术生成

javascript笔记总结

oopsWeb!

于 2021-06-25 21:39:12 发布

1169

已收藏 38

分类专栏： javascript 文章标签： javascript

本文链接： https://blog.csdn.net/m0_52725909/article/details/118229089

收起

javascript 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

文章目录

## JavaScript基础

JS是支持面向对象编程的跨平台脚本弱类型的语言

面向对象是一种思想
跨平台：ios、Android、windows、Linux
脚本：依赖其他才能解析
弱类型：变量在声明后还可以改变

js组成

DOM：文档对象
BOM：浏览器对象
ECMAScript：规范

js的变量是用来储存数据的容器

js的输出方式

alert（） /浏览器弹窗、用户提示
document.write（） //可在浏览器的显示区域显示文本
console.log（） /控制台日志
confirm（） //提示用户下一步操作
prompt（） //用于提醒用户输入

数据类型的分类

number //数字型
string //字符串类型（加了引号都是字符串）
undefind //未定义（只声明为赋值）
Boolean //布尔类型
object //对象（数组、对象、null）

转化为数字类型方法

Number（）
parseInt（） //转为数字类型并取整
parseFloat（） //转化为浮点数保留小数
Math.round（） //小数后一位四舍五入进行取整
.toFixed（3） //保留三位小数

拓展不常见转化为数字类型

布尔类型转化为数字
- Number（）和Math.round（） //会转化为1或者0
- parseInt（）和parseFloat（） //会显示为NaN (not a number)
将undefined转化为数字 //所有方法都会显示NaN

将null转化为数字
- Number（）和math.round（） //会转化为0
- parseInt（）和parseFloat（） //会显示NaN

转化为字符串方法

String（）
被转换的数据.tostring（）

undefiend转换为字符串 .tostring会报错
null转换为字符串 .tostring会报错
其它类型转字符串类似加上引号正常显示

转换为布尔类型方法

Boolean（）

数字中除了0都是true
字符串中有内容都为true，无内容都为false
undefiend和null都为false

if和switch

switch和if区别：判断当前的值是否相等（switch），在一个区间范围内（if）

switch比较相等的时候用的是===
case后面接的是值，值结束需要一个冒号
break表示终止当前的程序运行，下面的代码就不会继续往下执行

隐式转换

除了加号其它的符号都会隐式转换为数字类型进行计算

在比较运算符中

字符串和数字是不具有可比性的，字符串会隐式转换为数字
字符串和字符串进行比较（特殊情况）
字符串进行比较需要根据ASCLL进行比较

三元（目）运算符：简写if-else语句

语法 : 判断条件 ? 条件为true时执行 : 条件为false时执行

函数 function

函数执行完毕后函数体内的执行环境被销毁不会将数据常驻在内存中

函数的创建

第一种方法声明式

function 函数的名称（参数）{
                   //执行的代码段
           }

     
     
     
     1
2
3

第二种方式赋值式将函数赋值给一个变量

var 变量名称 = function（参数）{
            //执行的代码段
         }

     
     
     
     1
2
3

函数的调用
声明式：函数的名称（）
赋值式：变量名（）

获取函数的实参

//可以获取传入实参的长度 arguments.length
console.log(arguments.length,arguments[0]       //参数 对象

     
     
     
     1
2

返回值

函数没有return的话默认返回的是undefined
如果有return表示返回的是当前函数运行的结果
如果加了return后面的代码就不执行了

代码预解析

预解析：代码在显示结果之前，经过了预解析的过程（对代码加载顺序进行调整）
预解析会把变量的定义和函数的声明放在代码的最前面加载
在预解析的过程中有函数有变量以函数为准

作用域

全局：不在函数内部定义的变量，在页面的任何位置都可以起作用
局部：定义在函数内部的变量，只能在函数内部起作用

变量的访问规则

当访问输出或者运算的时候先在当前的作用域中查找，如果当前的作用域中有的话就直接使用输出
如果没有就往上一级查找，知道找到全局作用域中有这个值
如果全局中也没有这个变量的时候，就直接报错 a is not defined

赋值规则

当一个变量赋值的时候如果在当前作用域中没有定义这个变量就会往上一级查找
会查找到全局如果有就直接使用
如果全局中也没有的话就在全局中定义/声明这个变量

递归

递归函数的表现就是自己调用自己注意返回条件避免产生死递归

 function fn(n) {
        if(n == 1){
            return 1
            }
       return fn(n- 1)
    }
    fn(10)

     
     
     
     1
2
3
4
5
6
7

事件

用户在页面中的行为
绑定dom事件标签的id名字.事件

           //第一种将函数赋值给事件
        btn.onclick = function(){
            console.log('输出')
        }
    <span class="token comment">//第二种</span>
    <span class="token keyword">function</span> <span class="token function">fn</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
       console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'输出'</span><span class="token punctuation">)</span>
       <span class="token punctuation">}</span>
       btn<span class="token punctuation">.</span>onclick <span class="token operator">=</span> fn

鼠标类事件

click //单机事件
dblclick //双击事件
contextmenu //右击
mouseover //移上去
mouseout //移出去
mousedown //按下
mouseup //松开抬起

键盘事件

keydown //键盘按下去
keyup //键盘抬起
keypress //键盘敲击

表单事件

onfocus //获取焦点
onblur //失去焦点
onchange //改变内容

console.log()控制台打印

console.log() //普通控制台打印
console.info() //带提示标志
console.warn() //警告消息
console.error() //错误提示
//打印dom页面结构
console.log(document); // 如果是一个dom元素他默认以dom结构在页面关联展示
console.dir(document); // 以对象的数据类型展示
console.dirxml(document);

obiect对象

对象是命名数据的集合也叫做键(key)值(value)对

定义对象的方法

        //通过字面量定义
    var obj = {
            name : '张三',
            sex : '男',
            fn ( ) {
            //代码块
                }
    <span class="token comment">//Object构造器 构造函数</span>
 <span class="token keyword">var</span> obj <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Object</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span>
 object<span class="token punctuation">.</span>name <span class="token operator">=</span> <span class="token string">'张三'</span><span class="token punctuation">;</span>
 objext<span class="token punctuation">.</span>sex <span class="token operator">=</span> <span class="token string">'男'</span><span class="token punctuation">;</span>
 object<span class="token punctuation">.</span><span class="token function-variable function">fn</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
    <span class="token comment">//代码块</span>
 <span class="token punctuation">}</span>
 
 
 <span class="token comment">//拓展</span>
 <span class="token comment">//在对象中如果属性名是变量，需要动态设置该属性，可用[ ]</span>
 <span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token string">'baz'</span>
 <span class="token keyword">var</span> o <span class="token operator">=</span> <span class="token punctuation">{<!-- --></span>
        name <span class="token operator">:</span> <span class="token string">'张三'</span><span class="token punctuation">,</span>
        <span class="token punctuation">[</span>a<span class="token punctuation">]</span> <span class="token operator">:</span> <span class="token string">'李四'</span>
        <span class="token punctuation">}</span>

运用document.write打印对象

如果对象中没有设置toString，则会隐式调用继承过来的toString从而输出[object Object] 第一个表示数据类型第二个表示构造器
如果对象中手动设置了toString,则输出toString中return返回的值

将对象用于数学环境时

var ls = {
    naem : 'lisi',
    age : 38,
    //用来将对象转化为数值
    valueOf ( ) {
        return this.age;
        }
     }
   ls.valueOf ( )         //38
   console.log(ls - 10)       //28

 
 
 
 1
2
3
4
5
6
7
8
9
10

检测对象中是否包含某个属性

console.log(o.baz); //没有属性的话返回undefined
// 1、使用专门的语法 in
console.log(“foo” in o); //true
console.log(“baz” in o); //false
// in 可以检测到非对象自身从父级继承的属性
console.log(“toString” in o) //true
//2、使用hasOwnProperty的方法，继承属性不算(亲生)
console.log(o.hasOwnProperty(“foo”)); //true
console.log(o.hasOwnProperty(“baz”)); //false
console.log(o.hasOwnProperty(“toString”)); //false

js文件中函数的文档注释

/**
* 文档注释 可以用来生成 函数说明的文档
*
* @param {number} m 第一个数
* @param {number} n 第二个数
* @returns 两个数的和
*/
function add(m, n) {
    return m + n;
}

 
 
 
 1
2
3
4
5
6
7
8
9
10

Array数组

数组的本质也是对象

        //通过字面量定义
var arr = [ ] ;     //空数组 或 var arr ['a', 'b']
//往里面添加元素
arr[0] = 'a'
arr[1] = 'b'
console.log(arr)      //其打印的是对象（数组）快照信息
console.log(arr)      //打印的是对象结构

//如果使用console.write(arr) 打印arr数组它会隐式调用继承的toString(),返回一个以逗号拼接的字符串

//使用构造器创建数组
var arr = new Array( ); //空数组或 var arr = new Array(‘a’ , ‘b’)
//如果给构造器传入一个数值则表示数组元素的个数
var arr = new Array(10) //10个空元素empty * 10

关联数组

所谓关联数组就是以字符串作为下标

 // 所谓的关联数组指以字符串作为下标的元素
        var arr = ["a", "b", "c"];
        // arr[0] = "a"
        // arr[1] = "b"
        // arr[2] = "c"
    arr<span class="token punctuation">[</span><span class="token string">"foo"</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token string">"hello"</span><span class="token punctuation">;</span>
    arr<span class="token punctuation">[</span><span class="token string">"bar"</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token string">"world"</span><span class="token punctuation">;</span>
    console<span class="token punctuation">.</span><span class="token function">dir</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span><span class="token punctuation">;</span>
     <span class="token comment">// 字符串编号的元素 被视作对象的属性</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>arr<span class="token punctuation">[</span><span class="token string">"foo"</span><span class="token punctuation">]</span><span class="token punctuation">,</span> arr<span class="token punctuation">.</span>bar<span class="token punctuation">)</span><span class="token punctuation">;</span>       <span class="token comment">//hello world</span>

// js中的数组和对象完全互通的，除了在数组里面定义字符串下标外，也可以在对象里面定义数字属性
var obj = {
// 数字编号的属性
0 : “a”,
1 : “b”,
2 : “c”,
foo : “foo”,
bar : “bar”,
}
console.dir(obj);
console.log(obj.foo, obj.bar); // foo bar
console.log(obj[0], obj[1], obj[2]); // a b c

// 数组本质上就是对象只不过具有额外功能层的对象，就是在对象基础上延伸了数字编号的属性，其中数字编号的部分被理解成数组成员，并支持[]语法来操作
var arr = [‘a’, ‘b’, ‘c’];
arr[“foo”] = “foo”;
arr[“bar”] = “bar”;
// 显示数组的长度（个数）
console.log(arr.length); // 3

遍历数组
for循环遍历数组元素有两个限制条件
1、数组的编号必须是连续的
2、for循环的是数字编号下标，不能是字符串属性不然不输出字符串为下标的元素

for…in 语句

使用for…in遍历对象属性，有两个限制条件
1、遍历出来的属性顺序不可控
2、不能遍历继承的属性

 var person = {
            name : "zhangsan",
            sex : "male",
            age : 18,
            study () {
                return "床前明月光，疑是地上霜"
            },
            sing () {
                return "一人我饮酒醉，错把佳人成双对"
            }
        }
        // 定义变量p 用来接收person中的属性
        // p始终代表在person对象里面的某个属性
        // for的过程 会自动循环 p值一直在更新
        var i = 0;
        for (var p in person) {
            console.log(i++, p);
            // 接下来取属性的值 .运算符后面跟着的只能是硬编码的字符(标志符) 不能解析变量名
            // 只用[]里面可以解析变量
            console.log(person.p, person[p]);  	//undefined , name
            //person.p    意为取person中为p的属性名,没有则返回undefined
            //person[p]   意为取person中当前p的属性值
        }

//例如
var arr = [‘a’, ‘b’, ‘c’];
arr[“foo”] = “foo”;
arr[“bar”] = “bar”;
for (var p in arr) {
console.log(p, arr[p]);
//左边取下标，右边取元素
}

数组的方法

学习内置函数方法的几个关键点：
1、函数名
2、函数参数，有几个参数，分别代表的意思
3、函数的返回值是什么！！

1、查询索引的方法

    console.log(arr.indexOf('b'));  //1  元素在数组中的位置    找不到返回-1
    console.log(arr.lastindexOf('b'));  //3 元素在数组中最后出现的位置

 
 
 
 1
2

2、检测元素

console.log(arr.includes('e');   //false 判断数组中是否存在此元素
console.log(arr.includes('b');   //true

 
 
 
 1
2

3、截取数组元素

//截取数组的一部分，它有两个参数，分别是截取的起始位置和结束位置（结束位置不包含此数<）
//它返回的是截取出来组成的新数组，原数组不变，其实slice是在赋值
console.log(arr.slice(1,3));    //['b','c']
console.log(arr)    //['a', 'b', 'c', 'b']

//还可以利用slice筛取数组元素
let arr = [‘a’, ‘b’, ‘c’];
arr.foo = “foo”;
arr.bar = “bar”;
console.log(arr); // [0:“a”, 1:“b”, 2:“c”, foo: “foo”, bar: “bar”]
console.log(arr.slice()); // [“a”, “b”, “c”]

4、删除数组元素

//它返回的是删除数组的元素，原数组发生改变
// 第二个参数删除元素个数
console.log(arr.splice(1,3);    //['b','c','b']
console.log(arr);   //['a']

 
 
 
 1
2
3
4

队列方法

var arr = ['a', 'b', 'c', 'd']

//在数组的头部添加元素，返回操作之后数组的长度
console.log(arr.unshift(0)); //5
//原数组发生改变
console.log(arr); //[0, ‘a’, ‘b’, ‘c’, ‘d’];

//在数组头部删除元素，返回被删除的元素
console.log(arr.shift()); //0 原数组发生改变

//在数组尾部添加元素，返回操作后数组的长度
console.log(arr.push(‘e’)) //5
console.log(arr); // [‘a’, ‘b’, ‘c’, ‘d’, ‘e’];

//在数组尾部删除元素，返回被删除的元素
console.log(arr.pop()) //e
console.log(arr); //[0, ‘a’, ‘b’, ‘c’, ‘d’];

//将数组元素拼接成字符串
var arr = [1,2,3,4,5];
console.log(arr.join(“<”); //1<2<3<4<5
//合并数组
var arr2 = [6,7,8,9,10];
console.log(arr.concat(arr2)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

在这里插入图片描述

字符串方法

创建字符串 - 数组类型

var str = "hello world"; // 字面量
// 创建字符串 - 对象类型
var str = new String("hello world"); // 构造器 
console.dir(str);

 
 
 
 1
2
3
4

查看字符串长度

console.log(str.length);       //11

 
 
 
 1

通过编号取字符

console.log(str[1]);       //e
console.log(str.charAt(1))     //e

 
 
 
 1
2

由值找索引

console.log(str.indexOf("o");      //4
console.log(str.lastindexOf("o")        //7

 
 
 
 1
2

字符串截取

    //不包含第二个位置，如果不传第二个参数，则表示截取到末尾
    //第二个参数表示结束位置
console.log(str.slice(6,11));       //world
    //第二个参数表示截取的长度
console.log(str.substr(6,5);        //world

 
 
 
 1
2
3
4
5

字符串检测，是否包含某个内容

        var gname = "神舟十二号航天员指定太空用奶 伊利 纯牛奶 真正的牛奶"
        if (gname.includes("伊利")) {
            console.log("显示该商品")
        }

 
 
 
 1
2
3
4

检测字符串开头

var name = "#user",
   cont = "神舟十二号航天员指定太空用奶 伊利 纯牛奶 真正的牛奶.";

if (name.startsWith(“#”)) {
console.log(“id选择器”);
} else if (name.startsWith(“.”)) {
console.log(“类选择器”);
}

检测字符串结尾

        if (cont.endsWith(".")) {
            console.log("一句完整的话")
        } else {
            console.log("没有结束的话");
        }

 
 
 
 1
2
3
4
5

设置分隔符分隔元素组成数组

  split("&")      //foo=bar&a=1&b=2" 为 [foo=bar,a=1,b=2]      

 
 
 
 1

大小写转化

        var code = "Xi2d"; // 系统生成的验证码
        var user = "xI2d"; // 用户输入的验证码
        // 比较的要求是不区分大小写，所以需要统一转化
        // toLowerCase(小写) , toLocaleUpperCase(大写)
        if (code.toLowerCase() == user.toLowerCase()) {
            console.log("输入正确");
        } else {
            console.log("输入不正确");
        }

 
 
 
 1
2
3
4
5
6
7
8
9

删除头尾空格

        str.trim()

 
 
 
 1

替换字符

	str.replace(exp,new)	//将exp替换为new 	exp可为正则

 
 
 
 1

查询字符可使用正则

	str.match(exp);	// 找到返回字符

 
 
 
 1

查询字符可使用正则

	str.search(exp); // 找到返回索引 ，找不到返回-1

 
 
 
 1

合并字符

	"hello".concat("world");	// hellowworld

 
 
 
 1

尾部填充

	str.padEnd(8,"!");	// 总长度为8位，不够在尾部添加"!"

 
 
 
 1

头部填充

	str.padStart(8,"~");  // 总长度为8位，不够在头部添加"~"

 
 
 
 1

字符复制

	"a".repeat(4);	// aaaa

 
 
 
 1

Date 内置日期对象

Date是js内置对象，用来管理时间日期

//首先创造时间对象 Date构造函数 可以有参数
    //如果不传参，则表示当前时间对象
var d = new Date ( );

// 快照打印字符串形式的值相当于隐式调用d.toString()
//Thu Jun 17 2021 09:36:50 GMT+0800 (中国标准时间)
console.log(d);

//本土格式的日期时间
console.log(d.toLocaleString ( )); // 2021/6/17上午9:39:48

//创建指定日期时间
var d = new Date (“2008-08-08 20:08:08”)
var d = new Date (2008,7,8,20,8,8); //分别传入值

// 分别查看某一部分的值，年份，月份，日期，星期，时分，秒
console.log(d.getFullYear()); // 2008
console.log(d.getMonth()); // 7 范围0-11分别代表12个月份
console.log(d.getDate()); // 8
console.log(d.getDay()); // 1-6 周一到周六周日是0
console.log(d.getHours()); // 20
console.log(d.getMinutes()); // 8
console.log(d.getSeconds()); // 8

// 返回一个毫秒数当前时间距离1970年元旦（gmt）相隔的时间
// 该时间对我们而言就是用来帮助计算日期差值
console.log(d.getTime()); // 1623897079473 - 时间戳(unix)

// 计算北京奥运会距今过去多少天
// 2021-6-17 2008-8-8
var d1 = new Date(2008, 7, 8), // 指定日期
d2 = new Date(); // 当前时间
var unix1 = d1.getTime(),
unix2 = d2.getTime();
var days = (unix2 - unix1) / 1000 / 60 / 60 / 24;
console.log(days); // 4696.444517662037
// 向上取整数 1.1 -> 2
var result = Math.ceil(days);
console.log(result); // 4697

Math 数学对象

Array、String、Date 实际上是构造函数都需要new来创建对象，但是Math不需要

//取整数值的方法
var num = 3.14;
    //向上取整 取最近的最大值
console.log(Math.ceil(num))     //4
   //向下取整  舍掉小数部分
console.log(Math.floor(num))     //3

//四舍五入
var num = 1.5
console.log(Math.round(num)) //2

//取一组最大值和最小值这里是挨个传参数
console.log(Math.max(1,2,3)) //3
console.log(Math.min(1,2,3)) //1

//在实际使用中，往往是求数组中的最大值
var arr = [1,2,3]
console.log(Math.max(…arr)) //3 借助 … 展开语句

//取随机数随机生成一个 0 - 1 之间的数
console.log(Math.random())

//随机生成 1-10
console.log(Math.floor(Math.random() * 10) + 1)

//随机数组中的元素
var arr = [‘a’, ‘b’, ‘c’, ‘d’];
var i = Math.floor(Math.radom() * arr.length ))
console.log(arr[i])

在这里插入图片描述

js中的数据类型

number 、 boolean 、 string 单一类型基本类型
object （对象、数组、null）复合类型引用类型
不同类型的数据在操作时（赋值、比较、传参）有不同的行为
赋值操作
基本数据类型都是单一值在内存中所占的空间比较小因此赋值时会单独创建副本也就是两个值互不影响
引用类型是复合数据，往往比较大会占用一定的内存空间因此赋值时它只复制地址无论修改谁都会影响共同对象

基本数据类型赋值会把目标值拷贝一份再进行赋值
复合类型拷贝的是目标的地址也叫做引用地址始终是对应的同一个对象

比较运算符
基本数据类型只要里面的值相等"=="就返回true
复合类型只要其中的地址不相等就为false

BOM

window是BOM顶层对象，代表浏览器打开的当前窗口
并且是javascript代码执行的宿主环境，js寄生在window中执行，页面中的所有全局变量都是window的属性

标准 url: 统一资源定位符
协议://域名(或IP)/:端口号/路径/?查询字符串#锚点

window对象：当前页面窗口对象
navigator对象：记录浏览器特性（版本、厂商、内核、产品名等）
screen对象：查看客户机屏幕信息
history对象：访问浏览器历史记录
location对象：操作当前页面地址栏

没有var声明的全局变量就是 window.a = 2

window对象除了执行js代码，还用来(脚本化)渲染(操作)当前窗口

window方法

alert(‘弹窗’)
confirm(‘用户选择弹窗’)
prompt(‘用户输入弹窗’) //可以接两个值第一个提示文本，第二个输入框默认值
open()

/*
<input type="button" value="打开新窗口" οnclick="open_win()">
<input type="button" value="关闭新窗口" οnclick="close_win()">
<input type="button" value="移动新窗口" οnclick="move_win()">
<input type="button" value="重置新窗口" οnclick="reset_win()">
*/

//作为对象提供了属性和方法来访问窗口现代浏览器不允许上来就加在弹窗，一般在按钮点击后再弹窗
function open_win ( ) {
//该方法返回新窗口对象所以不声明用全局变量让其他方法使用
new_win = window.open(“http//localhost” , “” , “width=400,height=400,left=300,top=300”)

    window<span class="token punctuation">.</span><span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"在父级窗口显示弹窗"</span><span class="token punctuation">)</span>
    new_win<span class="token punctuation">.</span><span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"在新窗口显示弹窗"</span><span class="token punctuation">)</span>
    new_win<span class="token punctuation">.</span>document<span class="token punctuation">.</span><span class="token function">write</span><span class="token punctuation">(</span><span class="token string">"操作新窗口中dom元素"</span><span class="token punctuation">)</span>

}

function close_win ( ) {
//关闭当前窗口
window.close(); //关闭父级窗口
new_win.close(); //关闭新窗口
}

function move_win ( ) {
//相对当前位置移动
new_win.moveBy (200,200) //相对当前位置移动X 轴 Y轴
//new_win.moveTo(500,500) 绝对位置移动

<span class="token comment">//重新获取焦点 显示窗口</span>
<span class="token comment">//该方法会请求系统将键盘焦点赋予窗口，而blur()方法则会放弃焦点 此外focus还会将       窗口移到堆栈的顶部。</span>
new_win<span class="token punctuation">.</span><span class="token function">focus</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

function reset_win ( ) {
//重置固定大小
new_win.resizeTo(500,500);
//相对原来增长
new_win.resizeBy(200,200);
//事件监听窗口大小改变
new_win.onresize = function ( ) {
new_win.alert(“你正在修改窗口大小”)
}
}

其他方法

//window对象的onerror方法(事件)用来监听当前页面的脚本代码错误
window.onerror = function (msg, file , line , col)) {
    alert("错误提示:" +msg + "/n" + "第" + line +"行"+ col + "列");
}

//页面视口的大小网页可视区域的大小
window.onresize = function ( ) {
console.clear(); //清除控制台打印
console.log(window.innerWidth, window.innerHeight); //网页尺寸
}

//target一个命名的窗口还有几个特定的值 _blank , _self , _parend
/
<a href=“http://localhost” target=“aaa”>本地</a>
<a href=“http://www.baidu.com” target=“aaa”>百度</a>
<a href=“http://www.ifeng.com” target=“aaa”>凤凰网</a>

//location 对象访问地址信息
console.log(location)

//href 属性可读可写
console.log(location.href); //读取地址
//重新设置地址不能返回
location.href = “http://www.baidu.con”

//地址参数一般也称为查询字符串 queryStr = “?foo=bar&a=1&b=2”

//例提取地址栏中的参数转化为对象形式
// 转化成对象便于使用 result = {foo:“bar”, a:1, b:2}
function getArgs(queryStr) {
var result = { };
// 一系列计算
var str = queryStr.slice(1); // foo=bar&a=1&b=2
// 拆分成对
var pairs = str.split(“&”); // [“foo=bar”, “a=1”, “b=2”]
// 循环分别提取每一对中的参数和值的部分
for (var i = 0; i < pairs.length; i++) {
pairs[i]; // foo=bar
var pos = pairs[i].indexOf(“=”);
var name = pairs[i].slice(0, pos);
var value = pairs[i].slice(pos+1);
result[name] = value;
}
return result;
}
var result = getArgs(location.search);
console.log(result);

  <span class="token comment">// = 赋值 他会将当前页面 放入历史记录中 可以回退</span>

function assign() {
location.assign(“http://www.baidu.com”);
}
/
<a href=“javascript:history.forward();”>前进</a>
<a href=“javascript:history.go(1);”>前进</a>
<a href=“javascript:history.go(0);”>刷新</a>
<a href=“javascript:history.go(-1);”>后退</a>

总结

BOM包含DOM

window 根节点
winodw.document 文档 DOM的根节点
window.location 本地
window.history 历史
window.screen 屏幕
window.navigator 导航信息

Location

location.href 既可以跳转也可以获取地址
location.assign 仅仅作为跳转使用
location.replace 不产生历史
location.hash 地址栏#后面的锚点内容
location.search 地址栏中?后面的内容/
location.hostname/location.port
location.pathname 可设置或返回当前URL的路径部分
location.protocol 可设置或返回当前URL的协议
location.reload(true) 不经过浏览器缓存强制从服务器重载

history

history.back() 回退
history.forward 前进
history.go(0) 刷新
history.go(1) 前进一个页面
history.go(-1) 后退一个历史记录
history.pushState 添加历史记录
history.replaceState 修改历史记录

screen

screen.width , screen.height 屏幕宽高
screen.availWidth , screed.availHeight 不包含任务栏的宽高

navigator

navigator.userAgent 当前浏览器信息(浏览器内核)

DOM

w3c标准化之前的dom模型，称为，遗留dom，也叫0级dom

0级dom中，主要通过标签取得元素例如document.forms 获取所有表单
console.log(document.forms); // 返回HTMLCollection集合哪怕就一个也是集合

// 通过标号取某一个
console.log(document.forms[0]);
// 如果表单经过命名还可以通过名字取得
console.log(document.forms.login);

伪数组对象

dom查询返回HTMLCollection对象有编号和length属性，它类似数组，但不是数组，称为伪数组对象

// 伪数组如果希望能够向真正意义上的数组使用，可以被转化
// 手动实现伪数组转化成真数组
var arr = Array.from(obj);
w3c标准化之后提供了专门的接口方法用来查询页面中的元素，类似scc获取元素

创建节点

节点有8中类型，常见的有

元素节点，指页面中的标签 element
文本节点，页面的文本内容每个内容都有属于自己的节点
属性节点，标签的属性也视作一个节点
只要是节点就可以按照节点对象来进行操作

js除了能查询页面已有的元素和节点外，还可以手动创建节点，插入页面元素中


 // 创建元素节点
        var p = document.createElement("p");
        console.log(p);
    <span class="token comment">// 创建内容节点</span>
    <span class="token keyword">var</span> cont <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createTextNode</span><span class="token punctuation">(</span><span class="token string">"hello world"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>cont<span class="token punctuation">)</span><span class="token punctuation">;</span>
    p<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>cont<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 将文本放入标签内</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>p<span class="token punctuation">)</span><span class="token punctuation">;</span>
    
    <span class="token comment">// 创建属性节点</span>
    <span class="token keyword">var</span> attr <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createAttribute</span><span class="token punctuation">(</span><span class="token string">"align"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    attr<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token string">"center"</span><span class="token punctuation">;</span>
    p<span class="token punctuation">.</span><span class="token function">setAttributeNode</span><span class="token punctuation">(</span>attr<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 给标签设置属性</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>p<span class="token punctuation">)</span><span class="token punctuation">;</span>

    <span class="token comment">// &lt;p align="center"&gt;hello world&lt;/p&gt;</span>
    <span class="token comment">// 将创建好的内容 放入页面</span>
    document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>p<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 在body最后插入</span>

节点对象的通用属性

节点自身描述的属性：节点名称、节点类型、节点的值
所有的节点都有这几个属性，不同类型的节点返回值不一样。

获取节点的名称

console.dir(document.body.nodeName)     //BODY 返回标签名大写形式

 
 
 
 1

查看节点的类型
12种类型每种类型都有对应的数字标识

console.log(document.body.nodeType);    //1     元素节点
var txt = document.createTextNode("hello world");
console.log(txt.nodeType);      //3     文本节点
var  attr = document.createAttribute("align");
attr.value = "center";
console.log(attr.nodeType);     //2     属性节点

 
 
 
 1
2
3
4
5
6

节点的值

console.log(document.body.nodeValue);   //元素返回 null
console.log(txt.nodeValue);     // 文本节点返回的是文本的内容 -hello world
console.log(attr.nodeValue);    //属性节点返回的是属性值  center

 
 
 
 1
2
3

节点对象的标准属性

js 集合了 html标签的标准属性(可解析的属性)作为节点对象的属性，意味着但凡html中已有的属性都可以通过节点对象直接操作

var input = document.querySelector("p input");

//控件的类型
console.log(input.type); //text
console.log(input.name); //uname
console.log(input.placeholder); //请输入昵称
//自定义的非标准属性无法直接获取需要使用getAttribute
console.log(input.foo) //undefined
//可以通过专门的方法
console.log(input.getAttribute(“foo”); //bar
//该方法也可以用来获取标准属性但没必要
console.log(input.getAttribute(“value”)); //瑞桑

盒子属性

var cont = document.querySelector("#cont");

//查看元素在页面的真是位置 = 坐标 + margin
console.log(cont.offsetLeft , cont.offsetTop); //100 100
//查看元素在页面中占据的尺寸 = 内容区 + padding
console.log(cont.clientWidth , cont.clientHeight); //160 160
//如果要包含边框的话尺寸 = 内容区 + padding + 边框
console.log(cont.offsetWidth , cont.offsetHeight); // 200 200

滚动距离

查看垂直方向和水平方向滚动距离

//onscroll 可以监听滚动条移动触发
cont.onscroll = function () {
            console.log(cont.scrollTop, cont.scrollLeft);
}

 
 
 
 1
2
3
4

节点内容

节点对象.nodeValue
页面或标签的内容可以通过节点对象来操作，但比较麻烦
dom中还有2个非常强大的属性用来操作节点内容

var p = document.querySelector("p");

console.log(p.innerHTML); //包含空白文本以及标签在内的所有内容

//如果想要去除标签部分只剩下文本可用innerText
console.log(p.innerText) //hello world

自定义属性操作

读取用户自定义的属性 - 非html标准属性

    var input = document.querySelector("input");
    console.log(input.getAttribute("foo");      //foo

 
 
 
 1
2

设置或者修改自定义属性的值

    input.setAttribute("foo","bar");

 
 
 
 1

删除属性

    input.removeAttribute("foo");

 
 
 
 1

检测是否有某个属性

input.hasAttribute("color") // true

 
 
 
 1

查询节点

document.querySelector( ) 查找整个页面中的元素

var p = document.querySelector("p");
console.log(p.querySelector("a");   // a[谷歌]
console.log(p.querySelectorAll("a") //  {0:a[谷歌]}
//除了querySelector和getElementById 返回的是单个元素以外，其他的查询节点返回的都是伪数组的形式

 
 
 
 1
2
3
4

插入节点

//创建hr元素节点
var hr = document.createElement("hr");
//在dom中 插入节点 都是基于父节点来完成的
var ul = document.querySelector("#ul");
//在父元素中最后的位置插入
ul.appendChild(hr);

//在父元素中指定某个子元素前面插入
ul.insertBefore(hr,first);
ul.insertBefore(hr,second);

删除节点

//通过父元素wrap操作子元素cont
wrap.removeChild(cont)

 
 
 
 1
2

替换节点

在容器中显示一个表单替代a链接的按钮
我们可以在页面中预设一个表单避免手动创建的过程更加方便

 //用页面中已有的表单form  替换 wrap中的a链接
    wrap.replaceChild(form , a);

 
 
 
 1
2

克隆节点

注意：节点对象是引用类型不能直接通过赋值方式克隆
在dom中有专门的方法 cloneNode
cloneNode有一个参数默认值是false 表示浅复制，就是不包含子元素中的元素

//将origin 克隆 给duplicate     浅复制
var duplicate = origin.cloneNode();

//cloneNode参数为true 表示深复制包含里面的内容
var duplicate = origin.cloneNode(true);

判断是否包含子节点

// 会包含 空白  文本节点 
console.log(p.hasChildNodes());     //true

 
 
 
 1
2

节点关联查询

查询ul的父节点

console.log(ul.parentNode)  //直接父节点

 
 
 
 1

查询ul所有子节点包含空白文本返回集合

ul.childNodes   // NodeList(7)

 
 
 
 1

只返回子元素节点不包含空白文本

console.log(ul.children)    //HTMLCollection(3)

 
 
 
 1

查询第一个子元素节点和最后一个子元素节点

console.log(ul.firstElementChild)   //first 
console.log(ul.lastElementChild)    //third

 
 
 
 1
2

查找下一个兄弟节点

    //从第一个开始的下一个的下一个的下一个包含文本空格节点
console.log(ul.firstChild.nextSibling.nextSibling.nextSibling);
   //从第一个开始的下一个 不包含文本空格节点
 console.log(ul.firstElementChild.nextElementSibling);

 
 
 
 1
2
3
4

查找前一个兄弟节点

console.log(ul.lastChild.previousSibling.previousSibling.previousSibling);
console.log(ul.lastElementChild.previousElementSibling);    //去除文本节点

 
 
 
 1
2

节点样式操作

style属于节点的标准属性 dom.style来操作

dom.style只能读取标签定义的内联样式
并且以对象集合形式返回，每个css属性都以驼峰的形式出现在对象中

// 因为box.style只能读取标签内定义的样式 内部样式和外部样式无法获取
console.log(box.style.width);   //空 

 
 
 
 1
2

多个样式写入可以使用cssText，以css格式写入多个样式以 ; 分隔

box.cssText = "boxder : 5px solid pink; box-shadow : 0px 0px 20px #333; border-radius : 5px " ;

 
 
 
 1

查看css样式表定义的样式需要使用 getComputedStyle

//该方法返回两部分
//1、所有css属性的集合  以编号形式展示
//2、该元素的计算属性值
var cssStyle = getComputedStyle(box);
console.log(cssStyle.width);     //100px
console.log(cssStyle.backgroundColor);  //rgb(204,204,204)

 
 
 
 1
2
3
4
5
6

练习

判断滚动条是否到达页面底部
页面的实际高度 = 页面视口大小 + 页面滚动距离
满足条件：滚动距离 >= 网页实际高度 - 页面视口大小

// html元素在页面的实际高度 html.offsetHeight
// 页面的视口大小 : window.innerHeight / html.clientHeight
// 页面的滚动距离：html.scrollTop

//scroll 滚动条滚动时触发
window.onscroll = function () {
// 返回文档中的根节点root对象即为html标签
var html = document.documentElement;
if(html.scrollTop >= html.offsetHeight - html.clientHeight) {
console.log(“到底部了”)
}

事件

在原始事件模型中，它使用通过给事件源dom 添加事件属性的方式来绑定事件

//执行事件代码比较多时 可以将他们放在一个函数中
/
 <input type="button" value="点我" onclick="fn();">
    function fn( ) {
        alert(1');
    // 声明式函数 它体内的this 默认指向window对象
        console.log(this);
    //相当于 var a;  // window.a

 
 
 
 1
2
3
4
5
6
7
8

通过属性添加事件

事件可以看作是dom的标准属性 name可以通过节点对象来动态添加
通过dom动态添加的事件，使得js代码和html标签做到完全分离，可读性和维护性更高，称为 无干扰的javascript

//给事件设置事件属性 作为一个匿名函数 相当于onclick方法
input.onclick = function () {
      alert(1);
    //this 为事件源dom
        console.log(this);
}

 
 
 
 1
2
3
4
5
6

添加多个事件

事件函数本质就是给 dom 添加了一个方法

如果想要同时执行多个事件处理程序多个函数
可以先引用原来事件函数然后重新定义新的事件

//把之前button声明的事件函数地址赋值给oldHandler
var oldHandler = button.onclick;
button.click = function( ) {
    //调用赋值完的新变量
    oldHandler();
    //调用声明好的第二个执行函数
    extHandler();

 
 
 
 1
2
3
4
5
6
7

取消事件

如果1个dom元素被从页面中移除了，name它对应的事件函数也就没有存在的意义了，因此需要我们手动来删除事件函数
原始事件取消

    // 移除事件 给事件设为null
    a.onclick = null

 
 
 
 1
2

高级事件取消
如果事件是匿名函数定义的则无法取消，没有名字的话，你就无法引用定义的事件函数

// 如果要取消 必须给事件函数 创建引用的变量
btn.removeEventListener("click" , handler);

 
 
 
 1
2

事件流

捕获和冒泡都是针对目标的父元素定义的，先往内捕获，再到事件源本身，最后冒泡出去
0级dom的事件流
所有使用原始事件模型定义的事件都是冒泡型的事件流机制

box.onclick = function () {
    console.log("冒泡")
    }

 
 
 
 1
2
3

高级事件模型的事件流

// 给按钮的父元素  定义捕获阶段执行的事件流
document.body.addEventListener("click" , function () {
    console.log("捕获");
  }, true)

// 给按钮的父元素定义冒泡阶段执行的事件流
document.body.addEventListener(“click”, function () {
console.log(“冒泡到body上了”);
}, false); // fase是默认值可不写表示冒泡阶段执行

// 给按钮定义的事件目标阶段执行的事件
var btn = document.querySelector(“input”);
btn.addEventListener(“click”, function () {
console.log(“btn自身被触发”);
})

事件监听

在标准化之后的事件模型（高级事件模型）中通过事件监听的方式来绑定事件

btn.addEventListener("click", function () {
        alert(1);
 },false);  // 第三个参数默认为false 表示在冒泡阶段会触发该函数

 
 
 
 1
2
3

使用事件监听添加多个事件处理程序

var handler = function () {
    alert(2);
}
// 将要添加的另一个事件函数命名 再次给btn添加
 btn.addEventListener("click" , handler)

 
 
 
 1
2
3
4
5

事件对象

定义事件后事件调用时js会隐式传递一个事件对象

input.onclick = function (event) {
    // event 事件对象   存储了事件信息的对象数据
    console.log(event)
    }

 
 
 
 1
2
3
4

事件对象的特性

// 给按钮的父元素来定义捕获阶段执行的事件流
document.body.addEventListener("click", function (event) {
    console.log("body捕获" , event.eventPhase);   //1 捕获阶段

 
 
 
 1
2
3

事件对象还提供了一些辅助信息用来更好的处理事件

    div.onclick = function (event) {
        //鼠标相对事件源的坐标
        console.log(event.offsetX , event.offsetY);
        //鼠标在页面中的坐标
        console.log(event.clientX , event.clientY);
        //鼠标在屏幕中的坐标
        console.log(event.screenX , event.screenY);

 
 
 
 1
2
3
4
5
6
7

获取事件源

document.body.addEventListener("click" , function (event) {
    console.log(event.eventPhase);  //冒泡阶段值 3
<span class="token comment">//event.target;     事件源dom - 元素节点</span>
<span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"你点击了"</span> <span class="token operator">+</span> event<span class="token punctuation">.</span>target<span class="token punctuation">.</span>nodeName <span class="token operator">+</span><span class="token string">"元素"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

在这里插入图片描述

事件委托

利用事件冒泡的原理让最外层来代理它内部元素的事件执行过程 - 事件代理（委托）
事件代理：让父元素来代理它内部元素的事件执行
事件委托：子元素的事件处理委托给父元素来执行

//只需要给它们最外层的盒子添加点击事件
document.body.onclick = function (event) {
    // 检测事件源  获取事件源标签 转化为小写
   switch (event.target.nodeName.toLowerCase()) {
        // 在内部各个选项中放入执行代码即可
        case "div" :  
                console.log("点击div");
                break;
         case "p":
                console.log("点击p");
                break;
         case "span":
                console.log("点击span");
                break;
    }

 
 
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

阻止事件冒泡

0级dom定义的事件会冒泡导致除了事件源本身外它的父元素有可能被触发带来意料之外的效果

p.onclick = function (event) {
    console.log("点击");
    //阻止冒泡的操作
    event.stopPropagation ( );

 
 
 
 1
2
3
4

阻止默认行为

有些html标签在触发时会有自己的默认行为例如：a链接默认跳转、表单submit 会默认提交跳转到服务器
有时候我们需要阻止他们的默认行为例如表单验证不通过就不提交

document.login.onsubmit = dunction(event) {
    alert(111);
    // 验证不通过就不提交
    event.preventDefault();
<span class="token comment">//或者</span>
<span class="token keyword">return</span> <span class="token boolean">false</span>

}

load事件

window窗口对象的load事件是当前窗口内容加载完毕后出发的事件它是页面中最后执行的部分，

window.onload = function () {
    console.log(1);
}

 
 
 
 1
2
3

load和error通常成对出现 load是加载完成 error是加载失败

//  window.onerror 是窗口加载发生错误的回调函数
//参数为（错误提示, 脚本文件, 行号, 列号）
window.onerror = function (msg , file , line , col) {
    alert(msg);
 }
// 例如 打印未声明的变量
console.log(x);     // ReferenceError : x is ont defined

 
 
 
 1
2
3
4
5
6
7

图片的load事件

使用load管理图片的加载能够控制加载的过程，例如图片发生错误时的处理
通过load事件动态的加载图片实现对图片加载的管理

function loadImg(url) {
    //创建图片
  var img = document.createElement("img");

//监听图片的加载状态 - 先定义回调函数
img.onerror = function() {
//使用发生错误时显示的图片替代原图
img.src = “./error.jpg”;
//将图片放入页面中
document.querySelector(“#cont”).appendChild(img);
}

// 加载成功直接放入页面
img.onload = function () {
document.querySelector(“#cont”).appendChild(img);
}

//请求图片它是异步的独立的线程
// 等它加载结束后会到主线程找回调函数
img.src = url;

// 一般是要将元素插入页面中才会真正发起请求，例如script标签，但是图片是特殊情况
}

loadImg(“./meinv.jpeg”);

DOMContLoaded

DOMContLoaded是在dom树生成后加载的事件
而load事件是整个窗口一切资源就绪之后也是最后一步执行的事件

网页加载的过程

解析html文档
加载外部的js和css链接文件
执行页面的js脚本
绘制dom树，创建dom结构 – DOMContLoaded
加载嵌入的资源文件，加载图片视频等
页面解析全部完成 - load

load会等待页面中所有的资源都加载完才执行
它的好处在于能够访问页面的一切元素
不足之处就是可能会很慢会等异步的图片等资源请求完才执行

//<script>
    window.onload = function() {
        var img = document.querySelector("img");
        // 查看图片原始尺寸     312 , 208
        console.log(img.naturalWidth , img.naturalHeight);
// </script>

// 图片在js代码后
<img src=“meinv.jpeg” alt=“”>

而DOMContLoaded会在dom数生成后就执行不会等异步的图片资源请求完

    window.addEventListener("DOMContentLoaded", function() {
            var img = document.querySelector("img");
            console.log(img)    // html imgElement
      // 查看图片的原始尺寸  0 , 0
            console.log(img.naturalWidth , img.naturalHeight);  

 
 
 
 1
2
3
4
5

resize 窗口重置事件

窗口大小发生改变时触发的事件

   window.onresize = function() {
           // 清除控制台打印的信息
       console.clear();
       // 页面视口大小
      console.log(window.innerWidth , window.innerHeight);
<span class="token comment">// node.clientWidth 查看在页面中占据的尺寸</span>
<span class="token comment">// 如果node为html元素 则是页面视口大小</span>
<span class="token keyword">var</span> html <span class="token operator">=</span> document<span class="token punctuation">.</span>documentElement<span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>html<span class="token punctuation">.</span>clientWidth <span class="token punctuation">,</span> html<span class="token punctuation">.</span>clientHeight<span class="token punctuation">)</span><span class="token punctuation">;</span>

scroll 滚动条事件

scroll事件两种场景

窗口内容发生位移，也就是拖拽页面的滚动条时，会触发window.onscroll
容器内容发生位移，也就是拖拽容器内的滚动条时，会触发 div.onscroll

window.onscroll = function () {
    var html = document.documentElement;
    // 计算滚动条进度 = 已拖拽的距离 / 总的滚动条高度
<span class="token comment">// 已拖拽距离</span>
<span class="token keyword">var</span> scrollTop <span class="token operator">=</span> html<span class="token punctuation">.</span>scrollTop<span class="token punctuation">;</span>     

<span class="token comment">// 总的页面高度 -  页面视口高度 = 总的滚动条高度</span>
<span class="token keyword">var</span> total <span class="token operator">=</span> html<span class="token punctuation">.</span>offsetHeight <span class="token operator">-</span> html<span class="token punctuation">.</span>clientHeight<span class="token punctuation">;</span>  

<span class="token comment">// 已滚动进度 0.1234</span>
<span class="token keyword">var</span> rate <span class="token operator">=</span> scrollTop <span class="token operator">/</span> total<span class="token punctuation">;</span>
<span class="token keyword">var</span> progress <span class="token operator">=</span> <span class="token punctuation">(</span>rate <span class="token operator">*</span><span class="token number">100</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token operator">%</span><span class="token punctuation">;</span>  <span class="token comment">// 12.34%</span>

焦点事件

获取焦点 focus
失去焦点blur

psw.onfocus = function () {
    // 获取焦点执行
    }

psw.onblur = function () {
// 失去焦点执行
}

表单submit事件

onsubmit是表单提交时触发事件，一般用于验证用户输入信息，该函数需要设置一个返回值，是否提交表单，为true提交，为false则不提交，onsubmit事件由submit按钮来触发
submit事件，需要定义在form上面，而不是submit按钮上面

document.login.onsubmit = function(event) {
<span class="token keyword">if</span><span class="token punctuation">(</span><span class="token operator">!</span>a<span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
    <span class="token comment">// 如果表单验证返回值a为false 则清除表单默认提交事件</span>
    event<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

// 很多元素的默认行为都可以通过return false取消
if (!a) return false

FormData 表单数据对象

FormData是js的内置对象，它用来将表单DOM对象转化为一个数据对象，这样可以快速读取表单信息。

<form name="login">
 <p>
            账号：<input type="text" name="uname" value="" />
        </p>
        <p>
            密码：<input type="password" name="usrpwd" value="" />
        </p>
        <p>
            性别：<input type="radio" name="sex" value="男" /> 男、
                <input type="radio" name="sex" value="女" />女
        </p>
 </form>
//input...
//input...
//普通按钮 不会触发表单的提交事件 需要单独设置点击事件 
 <input type="button" name="commit" value="立即注册">
</body>

<span class="token comment">// 提取获取到的数据</span>
<span class="token keyword">var</span> uname <span class="token operator">=</span> fd<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">"uname"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">trim</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 去除头尾空白部分</span>
<span class="token keyword">var</span> password <span class="token operator">=</span> fd<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">"usrpwd"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> sex <span class="token operator">=</span> fd<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">"sex"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 多个值使用getAll</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>uname<span class="token punctuation">,</span>password<span class="token punctuation">,</span>sex<span class="token punctuation">)</span><span class="token punctuation">;</span>

</script>

循环绑定事件

使用for绑定

for (var i = 0; i < lis.length; i++) {
    lis[i].onclick = function () {
        //...
        }
 }

 
 
 
 1
2
3
4
5

使用forEach绑定

// li变量是循环时的当前元素节点，index变量是当前元素的下标
lis.forEach(function (li , index) {
    li.onclick = function () {
        //...
        }
 )}  

 
 
 
 1
2
3
4
5
6

sort排序

默认按照升序排列

var arr = [1, 6, 2, 4, 8, 3];
// 默认按照升序
console.log(arr.sort());	//[1, 2, 3, 4, 6, 8]

var arr = [‘a’, ‘d’, ‘c’, ‘b’];
console.log(arr.sort()); // [‘a’, ‘b’, ‘c’, ‘d’]

// 字符串会把每个元素的第一位去比较大小，相等则比第二位，以此类推
// 排序原则需要想将数字元素转化成字符串然后逐个字符比较
// 数值排在字母前面
var arr = [‘a’, ‘188’, ‘d’, ‘33’];
console.log(arr.sort()); // [188, 33, “a”, “d”]

根据数组中对象属性值进行排序
users.sort(function (m, n) {
// m, n分别表示两个对象
// 提取出比较的条件
var dm = m.age,
dn = n.age;
if (dm <= dn) return -1; // 返回-1则dm 和 dn不调换位置
else if (dm > dn) return 1; //返回1则dm和dn互换位置
});

ES5 新增数组常用方法

forEach

用于遍历数组和for循环一个道理
语法:数组.forEach(function (item,index,arr) {} )

arr.forEach(function (item,index,arr) {
		//  当前元素，当前下标，数组
	console.log(item,index,arr);
}

 
 
 
 1
2
3
4

map

用于遍历数组，和forEach基本一致，只不过只有一个返回值，返回一个新数组
语法：数组.map(function (item,index,arr) {} )

let newArr = arr.map(function(item,index,arr) {
	//返回每次对数组的操作
	return item + "!";
})
console.log(newArr)	//新数组中都是操作过后的新元素

 
 
 
 1
2
3
4
5

filter

将数组遍历一遍，按照条件把数组中复合条件的元素过滤出来，返回到新数组中
语法：数组.filter(function (item,index,arr) {} )

		//第三个参数 arr 不需要可省略不写
let result = arr.filter(function (item,index) {
	// 设置筛选条件，当返回true时，表示取得该项
	return item.age >= 18;	//筛选数组中当前元素的age属性值大于等于18
})
console.log(result)	//新数组中都是筛选通过的元素

 
 
 
 1
2
3
4
5
6

断言方法 every和some

every

判断数组中每个元素，是否都符合要求，如果是都符合，才返回true，只要有一个不通过则返回false

let res = arr.every(function(item) {
	return item >= 'a';		//判断每个元素是否都大于a
});
console.log(res);	// true 因为arr数组中每个元素都大于等于a

 
 
 
 1
2
3
4

some

只要数组中，有一个符合要求的元素，就返回true，一个都不符合，则返回false；

let res = arr.some(function(item) {
	return item > 'f'	// 判断数组中 有没有元素大于f
})
console.log(res);	// true 因为arr数组中，有元素大于f

 
 
 
 1
2
3
4

json

json数据，js object notation （js对象标识）
利用js对象数据集合的特征存储数据，它和不同对象有3点区别：

作为纯粹的数据对象，它不需要方法
对象内部的key和value 必须加 " " , 格式需要
它的结构是对象但必须以字符串形式存在这样才能进行持久化存储和用于http的传输
例如：
let user = '{"naem" : "zhangsan" , "sex" : "male" , "age" : 18}' ;

es5扩充的解析json数据的对象 - JSON
它提供了一队方法用来编码和解析json数据
JSON.pase()和JSON.stringify()

解析json字符串为对象

let obj = JSON.parse(user);
console.log(obj);	//转为为对象的数据
console.log(obj.name , obj.sex);	//可正常提取转化后对象中的值

 
 
 
 1
2
3

转化为json格式

// 对象数据在地址栏传输时，必须要转化为字符串，而对象默认的toString()转化时，会丢失对象内容
// 又要转字符串，又要保留原始数据，只能是json格式
let str = JSON.stringify(obj);

//事实上stringify可以编码任何类型的数据，说白了就是给你套上引号

this 关键字

每一个函数内部都有一个关键字 this可以让我们直接使用
函数内部的this只和函数的调用方式有关系，和函数的定义方式没有关系

对象内部方法调用时，this指向调用者

let A = {
    name : "zhansan",
    f () {
    	console.log(this);		// A{}
       console.log(this.name);	// zhansan
       }
 }
A.fn()	

 
 
 
 1
2
3
4
5
6