JavaScript

您所在的位置：网站首页 › navigator对象可用来描述 › JavaScript

JavaScript

2023-03-11 21:40| 来源: 网络整理| 查看: 265

JavaScript 1.1、引入方式

直接引入

alert('hello world');

外部引入

qj.js

1.2、基本语法 Title // 1,定义变量变量类型变量名 = 变量值 var score = 71; // 2,条件控制 if(score>60 && score70 && score "use strict"//必须写在第一行 // i =1; //默认为全局变量 let i = 1; //局部变量 var修饰页为局部变量 2.1、字符串

1，正常字符串我们使用单引号或者双引号包裹

2，注意转义字符

\' \n \t \u4e2d \u#### unicode字符 \x41 Ascll字符

3，多行字符串编写

//tab上面那个键多行字符串 var msg =` hello 你好西巴西巴 ` console.log(msg)

4，模板字符串

let name = "韩信"; let age = 3; //tab上面那个键多行字符串 let msgs = `你好吧，${name}`; console.log(msgs)

5，字符串长度

console.log(str.length)

6，字符串的可变性，不可变

7，大小写转换

//注意。这里是方法，不是属性 student.toUpperCase() student.toLowerCase()

8，返回匹配字符的下标位置

student.indexOf('t')

9，截取字符串

[ ) 左闭右开 student.substring(1)//从第二个字符串截取到最后一个 student.substring(1,3)//[1,3) 2.2、数组

Array可以包含任意的数据类型

var arr = [1,2,3,4,5,6];//通过下标取值和赋值 arr[0] = 1

1，长度

arr.length

注意：假如给arr.length赋值，数组大小就会发生变化~,如果复制过小，数据就会丢失

2，indexOf，通过元素获取下标索引

arr.indexOF(2) 1

字符串的“1”和数字1是不同的

3，slice() 截取Array的一部分，返回一个新数组，类似于String的substring方法

4，push()，pop()尾部

push:压入到尾部 pop:弹出尾部的一个元素

5，unshift()，shift()头部

unshift:压入到头部 shift:弹出头部的一个元素

6，排序sort

arr.sort()

7，元素反转reverse()

arr.reverse()

8，拼接concat()

var arr = [1,2,3,4] arr.concat(["A","B","c"]) //[1,2,3,4,"A","B","c"]

注意：concat()并没有修改数组，只是会返回一个新的的数组

9，连接符join

打印拼接数组，使用特定的字符串连接

["C","B","A"] arr.join('-') "C-B-A"

10，多维数组

arr = [[1,2],[3,4],["5","6"]] arr[1][1] 4 2.4、对象

若干个键值对

var 对象名 = { 属性名：属性值，属性名：属性值，属性名：属性值 } //定义了一个person对象，它有四个属性 var person = { name:"hanxin", age:3, email:"[email protected]", score:59 }

JS中对象，{……}表示一个对象，键值对描述属性 XXX：XX，多个属性之间用逗号隔开，最后一个属性不加逗号

JS中所有的键都是字符串，值是任意对象

1，对象赋值

person.name = "libai"

2，使用一个不存在的对象属性，不会报错，undefined

3，动态删减属性，通过delete删除对象属性

delete person.name

4动态的添加，直接给新的属性添加值即可

person.haha= "hahha"

5，判断属性值是否在这个对象中 XXX in XX

'age' in person //别忘记使用引号 true //继承 'toString' in person true

6，判断一个属性是否是这个对象自身拥有的hasOwnProperty()

person.hasOwnProperty('tostring') false person.hasOwnProperty('age') true 2.5、循环

for while do while循环

var arr = [12,34,56,8,5,21,84,1]; //forEach循环 arr.forEach(function (value) { console.log(value) }) //forin循环 for (var arrKey in arr) { console.log(arr[arrKey]) } 2.6、Map和Set

ES6新特性

Map

var map = new Map([['tom',80],['jack',90],['march',10]]); var name = map.get('tom'); //通过key获得value console.log(name); map.set('admin',1243); //新增或修改 map.delete('tom'); //删除！

Set：无序不重复的集合

var set = new Set([3,1,5,4,3,7,1]); set.add(2);//增加 set.delete(7);//删除 console.log(set.has(3));//判断是否包含 2.6、iterator

遍历数组

var arr = [1,2,3,4,5,6]; for (let value of arr) { console.log(value) }

遍历map

//遍历Map var map = new Map([["tom",80],["jack",12],["marly",30]]); for (let mapElement of map) { console.log(mapElement) }

遍历set

//遍历set var set = new Set([1,1,1,2,3,5,5,7]) for (let number of set) { console.log(number) } 3、函数 3.1、定义函数 //方式一 function abs(x){ if(x>=0){ return x; }else{ return -x; } } //方式二 var abss = function(x){ if(x>=0){ return x; }else{ return -x; } }

一旦执行到return代表函数结束，返回结果！

如果没有执行return，函数执行完也会返回结果，结果就是undefined

function(x){……}这是一个匿名函数。但是可以把结果赋值给abs，

调用函数

abs(10) abs(-10)

参数问题：js可以传任意个参数，也可以不传递参数~

参数进来是否存在问题？

假设不存在参数，如何规避？

function abs(x){ //手动抛出异常来判断 if(typeof x!== 'number'){ throw 'Not a Number' } if(x>=0){ return x; }else{ return -x; } }

arguments

arguments是一个JS免费赠送的关键字；

代表，传递进来的所有的参数，是一个数组！

var abs = function(x){ console.log("x=>"+x); for (let i = 0; i < arguments.length; i++) { console.log(arguments[i]); } if(x>=0){ return x; }else{ return -x; } }

问题：arguments包含所有的参数，我们有时候想使用多余的参数来进行附加操作。需要排除已有的参数。

rest

以前：

for (let i = 0; i < arguments.length; i++) { console.log(arguments[i]); }

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

function aaa(a,b,...rest){ console.log("a=>"+a); console.log("b=>"+b); console.log(rest) }

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

3.2、变量的作用域

在js中，var定义变量是有作用域的

假设在函数体中声明，则在函数体外不可以使用~ （非要使用，需要使用闭包）

function qj() { var x= 1; x = x + 1; } x = x + 2;//Uncaught ReferenceError: x is not defined

如果两个函数是用来相同的变量名，互不影响

function qj() { var x= 1; x = x + 1; } function qj2() { var x = A; x = x + 1; }

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

function f() { var x = 1; //内部函数可以访问外部函数的成员，反之则不行 function f1() { var y = x + 1; //2 } var z = y + 1; //Uncaught ReferenceError: y is not defined }

提升变量的作用域

//不报错 function f() { var x = "x" + y ; console.log(x); var y = 'y'; }

结果：xunfefined

说明：js执行引擎，自动提升了y的生命更，但不会提升变量的赋值；

function f() { var y; var x = "x" + y ; console.log(x); y = 'y'; }

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

function f1() { var x = 1, y = x + 1, z,i,a;//undefined //之后随便用 }

全局函数

//全局变量 x = 1; function f() { console.log(x); } f(); console.log(x);

全局对象 window

var x = 'xxx'; alert(x); alert(window.x);//默认所有的全局变量都自动绑定在window对象上

alert()这个函数本身也是一个window变量

var x = 'xxx'; window.alert(x); var old_alert = window.alert; old_alert(x); window.alert = function () { }; //发现alert()失效了 window.alert(123); //恢复 window.alert = old_alert; window.alert(456);

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

规范

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

//唯一的全局变量 var App = {}; //定义全局变量 App.name = 'hanxin'; App.add = function (a,b) { return a+b; }

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

例如：jQuery

局部作用域 let

function aa(){ for (let i = 0; i < 100; i++) { console.log(i); } console.log(i+1); }

建议大家都用let取定义局部作用域的变量；

常量 const

4.3、方法

定义方法

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

var hanxin = { name:'韩信', birth:2000, //方法 age:function () { //今年-出生的年 var now = new Date().getFullYear(); return now-this.birth; } } //属性 hanxin.name //方法，一定要带() hanxin.age();

this.代表什么？分开写

function getage(){ var now = new Date().getFullYear(); return now-this.birth; } var hanxin = { name:'韩信', birth:2000, age:getage //不加括号 } hanxin.age();//ok geyage() //NaN

this是无法指向的，是默认子项调用它的那个对象；

apply

在js中可以控制this指向！

function getage(){ var now = new Date().getFullYear(); return now-this.birth; } var hanxin = { name:'韩信', birth:2000, age:getage } hanxin.age(); getage.apply(hanxin,[]);//this,指向韩信，参数为空

5，内部对象 5.1、Data var now = new Date();//Sun Mar 27 2022 10:09:55 GMT+0800 (中国标准时间) {} now.getFullYear(); now.getMonth(); //0~11 now.getDate(); now.getDay(); //星期几 now.getHours(); now.getMinutes(); now.getSeconds(); now.getTime(); //自1970.1.1的毫秒数 console.log(new Date(1648347156566)); //时间戳转时间 //转换 now = new Date(1648347156566); now.toLocaleString(); 5.2，JSON

json是什么

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

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式

简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。

并有效地提升网络传输效率。

在js中一切皆为对象，任何js支持的类型都可以用JSON来表示：

格式：

对象都用{}

数组都用[]

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

JSON字符串和JS对象的转换

'use strict' var user = { name:"hanxin", age:3, sex:'男' } //js对象转为JSON格式 var userJSON = JSON.stringify(user); //'{"name":"hanxin","age":3,"sex":"男"}' //JSON转为js对象 var obj = JSON.parse('{"name":"hanxin","age":3,"sex":"男"}'); //{name: 'hanxin', age: 3, sex: '男'}

很多人搞不清楚，JSON和JS对象的区别

var obj = {name: 'hanxin', age: 3, sex: '男'} var userJSON = '{"name":"hanxin","age":3,"sex":"男"}' 5.3、Ajax

原生的js写法 xhr异步请求

jQuey封装好的方法 $("#name").ajax("")

axios请求

6、面向对象编程 6.1、什么是面向对象

javascript 、java、C#.....面向对象。javascript有些不同

类：模板

对象：具体的实例

在javaScript这个需要大家换一下思路

原型：

class继承

class关键字，是ES6引入的

//定义一个学生的类 class student{ constructor(name) { this.name = name; } hello(){ alert('hello'); } } var xiaoming = new student("xiaoming"); var xiaohong = new student("xiaohong"); xiaoming.hello();

继承

class student{ constructor(name) { this.name = name; } hello(){ alert('hello'); } } class xiaostudent extends student{ constructor(name,grade) { super(name); this.grade = grade; } maGrade(){ alert('我是一名小学生') } } var xiaoming = new student("xiaoming"); var xiaohong = new xiaostudent("xiaohong",1); xiaoming.hello(); xiaohong.maGrade();

原型链

7、操作BOM对象（重点）

浏览器介绍

js和浏览器的关系

js诞生就是为了能够让它在浏览器中运行

BOM：浏览器对象模型

IE6~11

Chorme

Safari

FireFox

三方

QQ浏览器

360浏览器

window（重要）

window代表浏览器窗口

window.alert(1) undefined window.innerHeight 506 window.innerWidth 150 window.outerHeight 592 window.outerWidth 563

Navigator(不建议使用)

Navigator，封装了浏览器的信息

navigator.appName 'Netscape' navigator.appVersion '5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.74 Safari/537.36 Edg/99.0.1150.46' navigator.userAgent 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/99.0.4844.74 Safari/537.36 Edg/99.0.1150.46' navigator.platform 'Win32'

大多数时候，我们不会使用navigator对象，因为会被人修改，不建议使用这些属性来判断和编写代码

screen

代表屏幕尺寸

screen.width 1220 px screen.height 686 px

location (重要)

location代表当前页面的URL信息

location.host 'www.baidu.com' location.href 'https://www.baidu.com/' location.protocol 'https:' location.reload()//刷新网页 //设置新的网址 location.assign('https://www.bing.com')

document(内容：DOM)

document代编当前的页面，HTML DOM文档树

document.title='360' '360'

获取具体的文档树节点

Java JavaSE JavaEE var dl = document.getElementById('app')

获取cookie

document.cookie 'RT="z=1&dm=baidu.com&si=hvjepf3mdm&ss=l18o6alq&sl=2&tt=2z5&bcn=https%3A%2F%2Ffclog.baidu.com%2Flog%2Fweirwood%3Ftype%3Dperf&ld=376&ul=yed&hd=ygk"; BIDUPSID=A374440AE4DFC39C8EE0573FEDBC553B; PSTM=1648356813; BAIDUID=A374440AE4DFC39C71DA56082D68F81F:FG=1; BD_HOME=1; H_PS_PSSID=35835_31253_35978_36165_34584_36120_36075_35993_35955_35322_26350_36047_36103; BAIDUID_BFESS=A374440AE4DFC39C71DA56082D68F81F:FG=1; BD_UPN=12314753; BA_HECTOR=0h01ala10l0l20209i1h3vro70r'

history

history代表浏览器的历史记录

history.back()//后退 history.forward()//前进 8，操作DOM对象（重点）

核心

浏览器网页就是一个DOM树形结构！

更新：更新Domain节点

遍历dom节点：得到Dom节点

删除：删除一个Dom节点

添加：添加一个新的节点

要操作一个Dom节点，就必须要先获得这个Dom节点

获取Domain节点

//对应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.firstChild // father.lastChild

这是原生代码，之后我们尽量都是用jQuery();

更新节点

操作文本

id1.innerText = '李白'修改文本的值

id1.innerHTML = '韩信' 可以解析HTML文本标签

操作CSS

id1.style.color = 'red' //属性使用字符串包裹 id1.style.fontSize = '100px' // 有“-”的转为驼峰命名

删除节点

删除节点的步骤：先获取父几点，再通过父节点删除自己

标题一 p1 p2 //删除节点 var self = document.getElementById('p1'); var father = p1.parentElement; father.removeChild(self) //删除是一个动态的过程 father.removeChild(father.children[0]); father.removeChild(father.children[1]); father.removeChild(father.children[2]); //不存在了

注意；删除多个节点的时候，children是在时刻变化的，

插入节点

//新建节点 var newP = document.createElement('p'); newP.id = 'newP' newP.innerText = '我是新建的'; list.appendChild(newP); //创建新的标签 var myScript = document.createElement('script'); myScript.setAttribute('type','text/javascript'); list.appendChild(myScript); var myStyle = document.createElement('style');//新建一个style属性 // myStyle.setAttribute('type','text/css'); myStyle.innerHTML = 'body{}';//添加内容 document.getElementsByTagName('head')[0].appendChild(myStyle);

insertBefore

//插到前面 var se = document.getElementById('se'); var ee = document.getElementById('ee'); list.insertBefore(ee,se);

9、操作表单（验证）

表单是什么 form DOM树

文本框 text

下拉框

单选框 radio

多选框 chenckbox

隐藏域 hidden

密码框 password

.........

表单的目的：提交信息

获取要提交的信息

用户名：性别：男女 var username = document.getElementById('username'); var boy = document.getElementById('boy'); var girl = document.getElementById('girl'); username.value;//获取值 username.value= '12466'//赋值 boy.checked //若为true，选中，反之没选中 boy.checked = 'true'//赋值

提交表单，md5Jami密码，表单优化

DOCTYPE html> Title 用户名：密码：提交 function aaa() { var unme = document.getElementById('username'); var pwd = document.getElementById('password'); console.log(unme.value); pwd.value = md5(pwd.value); console.log(pwd.value); return true; }

优化，过滤，双密码框

Title

用户名：

密码：

提交 function aaa() { var unme = document.getElementById('username'); var pwd = document.getElementById('input-password'); var md5pwd = document.getElementById('md5-password') md5pwd.value = md5(pwd.value); return true; }

9、jQuery

9.1、初始jQuery

Title 点我 //选择器就是CSS的选择器 $('#text-jQuery').click(function () { alert(1); })

选择器

//js的选择器方式document.getElementsByTagName()document.getElementById()document.getElementsByClassName()

//jQuery的选择器方式$('p').click();$('#id1').click();$('.class1').click();

事件

Title #divMove{ width: 500px; height: 500px; border: 1px solid red; } mouse:

//当页面元素夹杂完毕之后，响应事件 // $(document).ready(function () { // // }) 简写为 $(function () { $('#divMove').mousemove(function (e) { $('#mouseMove').text('X:'+e.pageX+'Y:'+e.pageY) }) });

操作DOM

文本操作

$('#text-ul li[name=python]').text(); //获得值$('#text-ul li[name=python]').text('123');//设置值

$('#text-ul').html();//获得值$('#text-ul').html('123');//设置值

css的操作

$('#text-ul li[name=python]').css({"color":"red","font-size":"20px"});

元素的显示和隐藏本质display：none；

$('#text-ul li[name=python]').show()$('#text-ul li[name=python]').hide()

小技巧

1,巩固JS（看jQuery源码，看游戏源码！）

2，巩固HTML，CSS（扒网站，全部down下来，然乎对应修改看效果）

Layer弹窗组件

Element-ui

【本文地址】

JavaScript

JavaScript

今日新闻

推荐新闻