JS map/set函数对象面向对象BOM表单JQuery#20230714

2023-07-14 15:02 作者:Biehmltym 0人读过 | 我要投稿

## 3。js中 !==和 !=的区别

### 1、用法

都是用来比较值的。

### 2、比较过程

#### != 比较时，若类型不同，会偿试转换类型；

#### !== 只有相同类型才会比较。

### 3、比较结果

#### !=返回同类型值比较结果；

#### !== 不同类型不比较，且无结果，同类型才比较；

### 4、举例

var num = 1; var str = '1'; var test = 1;

test !== num //false test与num类型相同，其值也相同，非运算肯定是false。

num != str //false == 的非运算。

num !== str //true num 与 str类型不同意味着其两者不等，非运算自然是true啦。

#### 3 “2” + 默认拼接 - 只能运算

```javascript

var a = 2;

var b = "3";

alert(a + b) //弹出23

```

### 3.5 Map和Set （ES6）

#### Map:

```javascript

//ES6 Map

1 //ES6 Map

//学生的成绩，学生的名字

// var names = ["tom","jack", "haha"];

// var scores = [100,90,80];

var map = new Map([['tom', 100], ['jack', 90], ["haha',80]]);var name = map.get('tom');

//通过key获得valuemap.set('admin',123456); //新增或修改map.delete("tom");

//删除

```

#### Set:无序不重复的集合

```javascript

set.add(2); //添加

set.delete(1); //删除

console

og(set.has(3)); //是否包含某个元素

```

我的练习：

```javascript

var map = new Map([['tom', 100], ['kavl', 90], ['dfg', 67]]);

var name0 = map.get('dfg');

map.set('bella', 234567);

map.delete('dfg');

console.log('kavl');

var set = new Set([3, 1, 1, 1, 1, 1]);

set.add(2);

set.add(5);

set.delete(2);

console.log(set.has(5));

</script>

````

### 3.6 iterator

#### 遍历数组

```javascript

//通过for of / for in 下标

var arr = [3,4,5]

for (var x of arr){console.1og(x)

```

#### 遍历map

```javascript

var map = new Map([["tom", 100], ["jack", 90], ["haha", 80]]);

for (let x of map) {

console.1og(x)

```

#### 遍历set

```javascript

var set = new Set([5, 6, 7]);

for (let x of set) [

console.1og(x)

```

## 4、函数

### 4.1 定义函数

函数 vs方法对象（属性，方法）

#### 定义方法1

```java

function abs(x) {

if (x >= 0) {

return x;

} else {

return -x;

}

```

一旦执行到 return 代表函数结束，返回结果!如果没有执行 return，函数执行完也会返回结果，结果就是 undefined

#### 定义方法2

匿名函数直接赋值给一个变量

```java

var abs = function (x) {

if (x >= 0) {

return x;

} else {

return -x;

}

```

function(x）{.....}这是一个匿名函数。但是可以把结果赋值给 abs，通过abs 就可以调用函数

#### 调用函数

直接abs（10）//10

abs（-10）//10

#### 手动抛出异常

```java

var abs = function (x) {

//手动抛出异常

if (typeof x !== 'number') {

throw 'Not a Number ~~';

}

(x >= 0) {

return x;

} else {

return -x;

}

```

#### arugements

是一个免费赠送的关键字;arguments代表，传递进来的所有的参数，是一个数组!

```java

var abs = function (x) {

console.log("x====>" + x);

for (var i = 0; i < arguments.length; i++) {

console.log(arguments[i]);

}

if (x >= 0) {

return x;

} else {

return -x;

}

```

#### rest

ES6 引入的新特性，获取除了已经定义的参数之外的所有参数

rest 参数只能写在最后面，必须用 ... 标识。

```javascript

function aaa(a, b, ...rest) {

console.log(a);

console.log(b);

console.log(rest);

}

```

### 4.2 变量的作用域

在javascript中， var 定义变量实际是有作用域的

#### 1 假设在函数体中声明，则在函数体外不可以使用

~(非要想实现的话，后面可以研究一下

闭包

```javascript

function qj() {

var x = 1;

X = x + 1;

}

x = x + 2; //Uncaught ReferenceError: x is not defined

```

#### 2 如果两个函数使用了相同的变量名，只要在函数内部，就不冲突

```javascript

function qj() {

var x = 1;

x = x + 1;

}

function qj2() {

var x = 'A';

x = x + 1;

}

```

#### 3 内部函数可以访问外部函数的成员，反之则不行

```javascript

function qj() {

var x = 1;

function qj2() {

var y = x + 1;//y=2

}

// 内部函数可以访问外部函数的成员，反之则不行

var z = y + 1;

// 报错找不到 not defined

}

```

#### 4 就近原则。假设在javaScript 中函数查找变量从自身函数开始~，由“内“向“外“查找.假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量。

```javascript

function qj() {

var x = 1;

function qj2() {

var x = 'A';

console.log('inner' + x);

}

qj2();

//innerA

console.log('outer' + x);

}

qj();

//outer1

```

#### 5 js存在变量提升机制，JS引擎遇到var声明，会将其声明提到作用域顶端

##### 5.1 全局变量

```javascript

x = 1;

function f(){

console.1og(x);

};

f();//1

console.1og(x);//1

```

这个是在JavaScript建立之初就存在的特性。养成规范: 所有的变量定义都放在函数的头部，不要乱放，便于代码维护;

##### 5。2全局函数

```javascript

//全局变量定义在函数之外的就是全局变量

x = 1;

function fO fconsole.1og(x);

2fO;

console.1og(x);

```

##### 5.2 全局对象 window

变量是对象的变量，变量都要绑定在对象上。

而默认所有的全局变量，都会自动绑定在 window对象下;

```javascript

var x ='xxx';

alert(x);

alert(window.x);

// 默认所有的全局变量，都会自动绑定在 window对象下;

```

##### 5.3alert这个函数本身也是一个 window 变量

```javascript

var x = 'xxx';

window.alert(x);

var old_alert = window.alert;

//old_alert(x);

window.alert = function () {

};

// 发现 alert() 失效了 I

window.alert(123);

//恢复

window.alert = old_alert;

window.alert(456);

```

Javascript 实际上只有一个全局作用域，任何变量 (函数也可以视为变量)，假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，报错RefrenceError

##### 5，4 规范

由于我们所有的全局变量都会绑定到我们的 window 上。如果不同的is 文件，使用了相同的全局变量，冲突~>如果能够减少冲突?

jQuery.XXX

$.XXX

```javascript

// 唯一全局变量

var Zyy = {};

// 定义全局变量

Zyy.name = 'kuangshen', Zyy.add = function (a, b) {

return

a + b;

}

```

把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突的问题

jQuery

#### 7 局部作用域let

```javascript

function aaa() {

for (var i = 0; i < 100; i++) {

console.log(i)

}

console.log(i + 1); //问题? i 出了这个作用域还可以使用

}

```

ES6. let 关键字，解决局部作用域冲突问题

```javascript

function aaa() {

for (let i = 0; i < 100; i++) {

console.log(i)

}

console.log(i + 1);

//uncaught ReferenceError: i is not defined

}

```

在 ES6 引入了常量关键字const

```javascript

const PI ='3.14';// 只读变量

console.1og(PI);

PI ='123'， // TypeError: Assignment to constant variable.

console.1og(PI);

```

### 4.3、方法的定义和调用

#### 定义方法

##### 1 方法就是把函数放在对象的里面，对象只有两个东西 : 属性和方法

```javascript

var zyy = {

bitrh: 1996,

// 方法

age: function () {

// 今年 - 出生的年

var now = new Date().getFullYear();

return now - this.bitrh;

}

//属性 zyy.name

//方法，一定要带zyy. age()

```

##### 2 或者将方法分开写，让对象的属性值调用方法。

```javascript

function getAge() {

// 今年 - 出生的年

var now = new Date().getFullYear();

return now - this.bitrh;

}

var zyy = {

bitrh: 1996,

// 方法

age: getAge

}

```

java ：this是无法指向的，是默认指向调用它的那个对象;

javascript：

##### 3 apply 在js 中可以控制 this 指向

```javascript

function getAge() {

// 今年 - 出生的年

var now = new Date().getFullYear();

return now - this.bitrh;

}

var zyy = {

bitrh: 1996,

// 方法

age: getAge

}

var ls= {

bitrh: 2000,

// 方法

age: getAge

}

getAge.apply(b,[]);

//this，指向了ls，参数为空

```

#### 调用

getAge.apply(ls,[])

ls.age()

主动调用和被动调用

## 5.内部对象

标准对象

```java

typeof 123

"number"

typeof '123'

"string"

typeof true

"boolean"

typeof NaN

"number"

typeof []

"object"

typeof {}

"object"

typeof Math.abs

"function"

typeof undefined

"undefined"

```

### 5.1 Date 日期类型

```javascript

var now = new Date();//sat Jan 04 2020 10:47:06 GMT+0800 (中国标准时间)now.getFu11Year(; //年

now.getMonth();// 月0~11 代表月now.getDate(); // 日now.getDay(;// 星期几now.getHours(); // 时

now.getMinutes(;// 分now.getSeconds();// 秒

now.getTime();// 时间戳全世界统一 1970 1.1 0:00:00毫秒数

console.1og(new Date(1578106175991)) //时间戳转为时间

now = new Date(1578106175991)sat Jan 04 2020 10:49:35 GMT+0800 (中国标准时间)

now.toLocalestring

// 注意，调用是一个方式，不是一个属性!f toLocalestring() f [native code] ]now.toLocalestring()"2020/1/4 上午10:49:35"

now.toGMTstring(

"sat，04 Jan 2020 02:49:35 GMT"

Date()

如何使用 Date() 方法获得当日的日期。

Date.getFullYear()

使用 getFullYear() 获取年份。

Date.getTime()

Date.getTime() 返回从 1970 年 1 月 1 日至今的毫秒数。

Date.setFullYear()

如何使用 setFullYear() 设置具体的日期。

Date.toUTCString()

如何使用 toUTCString() 将当日的日期（根据 UTC）转换为字符串。

Date.getDay()

如何使用 getDay() 和数组来显示星期，而不仅仅是数字。

Date.Display a clock

如何在网页上显示一个钟表。

```

### 5.2 JSON

json 是什么

早期，所有数据传输习惯使用 XML 文件!

·JSONUavaScript Object Notation,J 对象简谱)是一种轻量级的数据交换格式简洁和清晰的层次结构使得JSON 成为理想的数据交换语言.易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率

在JavaScript 一切皆为对象、任何is 支持的类型都可以用SON来表示

格式:

###### 对象都用 {}

###### 数组都用[]

###### 所有的键值对都是用 key:value

#### 对象转化为json字符串

var user = {

age: 3,

sex: '女'

}

{"name":"qinjiang"，"age":3,"sex":"男"]

var jsonUser = JSON.stringify(user);

调用：jsonUser

#### json 字符串转化为对象参数为 json 字符串

var obj = JSON.parse('{"name":"wangqian","age":3, "sex":"女"}');

调用：

console.log(obj)

### 5.3、Ajax

。原生的js写法 xhr 异步请求。jQuey 封装好的方法 $(“#name").ajax("axios 请求

## 6. 面向对象编程 class继承

javascript、Java、c#。。。。面向对象;javascript有些区别!

##### 类: 模板原型

##### 对象: 具体的实例

在JavaScript这个需要大家换一下思维方式!

原型:

### 6.1 原型 xiaoming.__proto__ = Bird;

```javascript

var Student = {

age: 3,

run: function () {

console.log(this.name + " run....");

}

};

var xiaoming = {

}

//原型对象

xiaoming.__proto__ = Student;

var Bird = {

fly: function () {

console.log(this.name + " fly....");

}

};

// 小明的原型是 student

xiaoming.__proto__ = Bird;

```

### 6.2 class 继承

关键字，是在ES6引入的class

##### 定义一个类，属性，方法

class 示例

```javascript

//定义一个学生类属性和方法

class Student {

constructor(name) {

this.name = name;

}

hello() {

alert("hello")

}

class XiaoStudent extends Student {

constructor(name, grade) {

super(name);

this.grade = grade;

}

myGrade() {

alert('hi 我是一名小学生')

}

var xi = new XiaoStudent("xi");

// //调用： xi.hello()

// xi.myGrade()

// xi.name

```

```javascript

//ES6之后

//定义一个学生类属性和方法

class Student {

constructor(name) {

this.name = name;

}

hello() {

alert("hello")

}

var xiaoming = new Student("xiaoming");

//调用： xiaoming.hello(); 对象小明的hello方法

//调用： xiaoming.name 对象小明的name属性

var lisi = new Student("lisi");

//lisi.hello()

// lisi.name

```

```javascript

console.log(xi);

XiaoStudent {name: 'xi', grade: undefined}grade: undefinedname: "xi"[[Prototype]]: Studentconstructor: class XiaoStudentmyGrade: ƒ myGrade()[[Prototype]]: Objectconstructor: class Studenthello: ƒ hello()[[Prototype]]: Object

```

## 7 操作BOM对象（重点）

### 7，1 浏览器介绍

JavaScript 和浏览器关系?

#### JavaScript 诞生就是为了能够让他在浏览器中运行!

#### BOM:浏览器对象模型

IE6~11

Chrome

Safari

FireFox

Opera

三方

。QQ浏览器

。360浏览器

### 7.2window 窗口

window 代表浏览器窗口

```javascript

window.alert(1)

undefined

window.innerHeight

window.innerwidth

window.outerHeight

window.outerwidth

// 大家可以调整浏览器窗口试试...

```

### 7.3 navigator 不建议用

```javascript

navigator. appName

“Netscape"

navigator.appVersion

"5.0 (windows NT 10.0; wOW64) AppleWebKit/537.36 (KHTML，1ike Gecko)chrome /63.0.3239.132 safari /537.36"

navigator.userAgent"

Mozi11a/5.0 (windows NT 10.0;wOW64)ApplewebKit/537.36 (KHTML，1ikeGecko) chrome /63.0.3239.132 Safari/537.36"

navigator.platform

"win32"

数时候，我们不会使用

对象，因为会被人为修改.navigator

```

### 7.4 screen 屏幕信息

screen.width

screen.height

677

### 7.5 location （重要）

```html

location

location 代表当前页面的URL信息

host: "www. baidu.com"

href:"https ://www.baidu.com/"

protocol:"https:"

reload:f reload() // 刷新网页

// 设置新的地址

1ocation .assign('https://blog. zyy.com/')

```

### 7.6 document 内容表单

#### 1 document.title

'新标签页'

#### 2 document.title="haohao"

'haohao'

#### 3 获取具体的文档树节点 document.getElementById('app');

```javascript

<!DOCTYPE html>

<html>

<head>

<title>Title</title>

</script>

</head>

<body>

<dd>JavaSE</dd>

<dd>JavaEE</dd>

</dl>

var dl = document.getElementById('app');

</script>

</body>

</html>

```

### 7.7 获取cookie

##### 1 获取 cookie

document.cookie

guid=111872281.88375976493059340.1578110638877.133;monitor_count=1"

##### 2 劫持 cookie 原理

www.taobao.com

##### 服务器端可以设置 cookie: httpOnly

### 7.8 history浏览器的历史记录

history 代表浏览器的历史记录

history.back() //后退

history.forward() //前进

## 8 操作DOM对象（对象）增删改查

### 8.1核心

浏览器网页就是一个Dom 树形结构!

#### 更新:更新Dom节点

#### 遍历dom节点: 得到Dom节点

#### 删除: 删除一个Dom节点

#### 添加: 添加一个新的节点要操作一个Dom节点，就必须要先获得这个Dom节点

### 8.2获得dom节点

对应css选择器

#### 1标签document.getElementsByTagName('h1');

var h1 = document.getElementsByTagName('h1');

#### 2通过元素iddocument.getElementById('p1');

var p1 = document.getElementById('p1');

#### 3通过类名document.getElementsByClassName('p2')

var p2 = document.getElementsByClassName('p2');

#### 4获取夫类的节点后.children获取所有子元素

var father = document.getElementById('father');

var childrens =father.children;

4以下是源代码：

```javascript

<body>

</div>

//对应css选择器

var h1 = document.getElementsByTagName('h1');

var p1 = document.getElementById('p1');

var p2 = document.getElementsByClassName('p2');

var father = document.getElementById('father');

var childrens =father.children;

* father.children

HTMLCollection(3)[h1, p#p1, p.p2, p1: p#p1]

* 获取父节点下的所有子节点

</script>

</body>

```

### 8.3更新节点

#### 1 操作文本

##### id1.innerText='hello world'

##### document.getElementById('id1').innerText='hello 122345'

##### id1.innerHTML='<strong>1243</strong>'

可以解析HTML文本标签

```javascript

<!--document.getElementById('id1')

得到此标签

-->

var id1 = document.getElementById('id1');

id1.innerText='hello world'

//结合获取节点加调用innerText 进行代码块内容的修改

// document.getElementById('id1').innerText='hello 122345'

</script>

```

#### 2 操作CSS

##### id1.style.color='red'//属性使用字符串进行包裹

##### id1.style.fontSize='200px'

不需要方法直接结合获取节点加调用style方法进行

##### document.getElementById('id1').style.color='blue'

##### id1.style.paddding = '2em'

#### 3删除结点

注意: 删除多个节点的时候，children 是在时刻变化的，删除节点的时候一定要注意!

//删除元素p1

var p1 = document.getElementById('p1');

//找到p1的父结点

var father = p1.parentElement;

//通过父节点调用removeChildren方法向下查找进行删除操作

// 调用 father.removeChild(p1);

```javascript

<body>

</div>

//删除元素p1

var p1 = document.getElementById('p1');

//找到p1的父结点

var father = p1.parentElement;

//通过父节点调用removeChildren方法向下查找进行删除操作

// 调用 father.removeChild(p1);

</script>

</body>

```

#### 4插入节点

创建一个新的标签，实现插入

```javascript

<body>

<p id="js"> JavaScript</p>

<p id="se">javaSE</p>

<p id="ee">javaEE</p>

<p id="me">javaME</p>

</div>

var js = document.getElementById('js');

var list = document.getElementById('list');

//调用：

//list.appendChild(js) 追加到后面

var newP = document.createElement('p');//创建一个p标签

newP.id = 'newP';

newP.innerText = 'Hello,bella';

list.appendChild(newP);

var myScript = document.createElement('script');//创建一个标签节点

myScript.setAttribute('type', 'text/javascript');

myScript.setAttribute('id', 'js123');

list.appendChild(myScript);

//操作：list.appendChild(myScript) 讲myScript标签作为子结点添加到list列表内

// 创建一个Style 标签

var myStyle1 = document.createElement('style');//创建一个空style标签

myStyle1.setAttribute('type','text/css');//设置标签的属性

myStyle1.innerHTML='body{background-color:red;}';//设置标签的内容

document.getElementsByTagName('head')[0].appendChild(myStyle1)

//插入到head的头部

</script>

</body>

```

###### insert

## 9、操作表单（验证）

### 9.1表单是什么 form DOM 树

##### 。文本框 text

##### 。下拉框< select >

##### 。单选框radio

##### 。多选框checkbox

##### 。隐藏域 hidden

##### 。密码框password

##### 。表单的目的: 提交信息

```javascript

<body>

<p>

</p>

<p>

</p>

</form>

var input_text = document.getElementById('username');

</script>

<!--input_text.value 获取输入框的值

input_text.value= 修改输入框的值

-->

</body>

```

### 9.2 获得要提交的信息

```javascript

<body>

<p>

</p>

<p>

<input type="radio" name="sex" value="man" id="boy">男

<input type="radio" name="sex" value="women" id="girl"> 女

</p>

</form>

var input_text = document.getElementById('username');

var boy_radio = document.getElementById('boy');

var girl_radio = document.getElementById('girl');

</script>

</body>

```

```javascript

<!DOCTYPE html>

<html>

<head>

<title>Title</title>

</head>

<body>

<p>

</p>

</p>

</form>

function aaa() {

alert(1);

var uname = document.getElementById('username');

var pwd = document.getElementById('input-password');

var md5pwd = document.getElementById('md5-password');

// pwd.value = md5(pwd.value);

md5pwd.value = md5(pwd.value);

//可以校验判断表单内容，true就是通过提交 false就是阻止提交

}

</script>

</body>

</html>

```

## 10、初识jQuery及公式

### 10.1 公式：$(selector).action()

document.getElementById('id');

//选择器就是css的选择器获取id

$('#test-jquery').click(function () {

alert('hello，jQuery');

})

</script>

```javascript

<!DOCTYPE html>

<html>

<head>

<title>Title</title>

</head>

<body>

document.getElementById('id');

//选择器就是css的选择器

$('#test-jquery').click(function () {

alert('hello，jQuery');

})

</script>

</body>

</html>

```

### 10.2选择器

#### 1 原生js，选择器少，麻烦不好记

##### document.getElementsByTagName();//标签

##### document.getElementById();//ID

##### document.getElementsByClassName(); //类

#### 2 jQuery css 中的选择器它全部部能用!

##### $('p').click(); //标签选择器

##### $('#id1').click(); //id选择器'

##### $('.class1').click() //cLass选择器

### 文档工具站：https://jquery.cuishifeng.cn

### 10.3事件

鼠标事件

键盘事件

其他事件

$(selector).action()

```javascript

$('.class1').click() //cLass选择器

$('.class1').mousedown()(jQuery)

$('.class1').mouseenter()(jQuery)

$('.class1').mouseleave()(jQuery)

$('.class1').mousemove()(jQuery)

$('.class1').mouseout()(jQuery)

$('.class1').mouseover()(jQuery)

$('.class1').mouseup()(jQuery)

```

标签：

JS map/set函数对象面向对象BOM表单JQuery#20230714

JS map/set函数对象面向对象BOM表单JQuery#20230714的评论 (共条)

你可能也喜欢这些文章

最新发布的文章

JS map/set函数对象面向对象BOM表单JQuery#20230714

本文作者的其他文章

JS map/set函数对象面向对象BOM表单JQuery#20230714的评论 (共 条)

你可能也喜欢这些文章

最新发布的文章

JS map/set函数对象面向对象BOM表单JQuery#20230714的评论 (共条)