JS(javascript)

JS(javascript)

1、什么是javaScript

1.1、概述

javaScript(行为):是一种弱类型的脚本语言,其源代码不需要经过编译,而是由浏览器解释运行,用于控制网页的行为。

1.2、历史

ECMAScript可以理解为javascript的一个标准。

2、基本使用

2.1、引入javaScript

内部标签:
<script>
alert("hello,world");弹窗
</script>
外部标签:
<script type="text/javascript" src="js/qj.js" ></script>	

2.2、基本语法入门

		<script>
			//严格区分大小写
			//1、定义变量 变量类型 变量名=变量值;
			var num=0;
			var name="徐冲";
			//alert(name);
			//2、条件控制
			if(num > 0 && name=="徐冲"){
				alert("ok");
			}else{
				alert("fail");
			}
			//多行注释
			/*console.log("xuchong"); 在浏览器控制台打印变量*/
		</script>

2.3、数据类型快速浏览

数值(number 不区分小数和整数)、文本,图形,音频,视频。。。。

数值:
123 //整数
123.1 //浮点数
1.1231e3 //科学计数法
-99// 负数
Nan// 不是一个数字 与所有的数值均不相等,包括自己。只能通过isNaN(NaN)来判断
infinity //无限大
字符串:
"abc" 'abc'
boolean值:
true false
逻辑运算:或&&||!

比较运算符:= ==等于(类型不一样,值一样 true) ===绝对等于(类型一样,值一样 true)

浮点数问题:console.log((1/3)===(1-2/3));
避免使用浮点数计算。存在精度问题。
Math.abs(1/3-(1-2/3))<0.0000000001;浮点数判断相等

null和undefined区别:null 空;undefined 未定义

数组:一些类型相同的对象。

var num=[1,2,3,'hello',2.2];

image-20201118101030553.png

对象用大括号;数组用中括号;

每个属性之间使用“,”隔开。最后一个不需要添加。

var object ={
				name:"xuchong",
				age:3,
				tags:['45','648','das']
			}

image-20201118101511926.png
变量:不要以数字开头。

2.4、严格检查模式strict

<script>
			'use strict'//写在第一行
			//全局变量 加上let就变为局部变量
			let i = 1;
</script>

image-20201118102525673.png

3、数据类型

3.1、字符串类型的详解

1、正常字符串用"单引号"或者”双引号“包裹。

2、注意转义字符

image-20201118103705751.png
3、多行字符换编写``

<script>
			'use strict'
			var msg=
			`hello
			world
			nihao`
		</script>

image-20201118104603758.png

4、模板字符串

<script>
			'use strict'
			let msg="world";
			let age=3;
			let name=`hello,${msg}`
		</script>

image-20201118105055651.png

5、字符串长度
image-20201118105245625.png
6、字符串的可变性,不变性
image-20201118105426333.png

7、大小写转化
image-20201118105700010.png

8、获取指定下标(indexof)
image-20201118105937244.png
9、截取元素(substring)
image-20201118110121855.png

3.2、数组(内容和长度均可变)

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

1、定义以及打印
image-20201118110437711.png
2、长度
image-20201118110551300.pngimage-20201118110620975.pngimage-20201118110732251.png
长度过小会导致数据丢失。(不会报数组越界的错误)

3、根据元素获得下标索引indexof
image-20201118111118090.png
字符串的1和数字1不一样

4、slice() 数组版的subString()
image-20201118111327217.png

5、push,pop(尾部)

image-20201118112753908.png
image-20201118112812497.png
6、unshift() shift() 头部
image-20201118133038170.png

7、sort 排序

image-20201118133259193.png
8、元素反转 reverse

image-20201118133406464.png

9、拼接concat
image-20201118133559005.png
这个方法并没有修改数组,只是返回了一个新的数组。

10、连接符 join
image-20201118133726494.png
11、多维数组
image-20201118133843928.pngimage-20201118133950868.png

3.3、对象

若干个键值对

定义对象:

var 对象名={
属性名:属性值,
属性名:属性值
}
<script>
'use strict'
var person={
			name:"徐冲",
			age:3
			}
</script>

1、对象赋值
image-20201118135030812.png

2、使用一个不存在的对象属性不会报错
image-20201118135127714.png
3、动态的删减属性
image-20201118135252691.png

4、动态添加属性
image-20201118135410890.png

5、判断属性值是否在这个对象中 xxx in xxx

js中对象的key都是字符串,值是任意对象。
image-20201118135737851.png

6、判断一个属性是否是这个对象自身拥有的
image-20201118140118113.png
image-20201118140158164.png

3.4、分支和循环详解

if判断:

	<script>
			'use strict'
			var age=4;
			if(age>3){
				alert("haha");
			}else{
				alert("cry");
			}
		</script>

循环:避免死循环

<script>
while(age<100){
            	age=age+1;
            	console.log(age);
            }
		</script>
<script>  
for (let i = 0; i < 100; i++) {
	console.log(i);
}
    	</script>

数组循环:

<script>
			'use strict'
			var age=[1,2,3,4,5,6,7,8,9];
for (var i = 0; i < age.length; i++) {
	console.log(age[i])
}
		</script>
<script>
			'use strict'
			var age=[1,2,3,4,5,6,7,8,9];
            age.forEach(function (value) {
	        console.log(value)
            })
		</script>
<script>
			'use strict'
			var age=[1,2,3,4,5,6,7,8,9];
			/*for(var index in age) 可以通过for of实现*/
            for (var num in age){
            	if(age.hasOwnProperty(2)){
            		console.log("存在");
            		console.log(age[num]);
            }
          }
</script>

3.5、Map和Set集合

map:

<script>
		'use strict'
		var map=new Map([['tom',100],['jerry',120],['host',150]]);
		var name=map.get('tom');//通过key值获取value
	    map.delete('tom');	
        console.log(name);
</script>

image-20201118143802121.png
set:去重

var set=new Set([3,1,1,1]);
set.add(2);
set.delete(1);
set.has(2);

image-20201118144132334.png
image-20201118144400888.png
image-20201118144931203.png

3.6、iterator迭代

5.1引入的

遍历数组,map,set均可用for of;

for of可以解决for in的bug。

4、函数

方法:对象(属性,方法)

函数:

4.1、定义并调用函数以及函数获取

方式一

绝对值函数

function abs(x){
    if(x>0){
        return x;
}else{
    return -x;
}
}

image-20201119091034017.png
一旦执行到return代表函数结束,返回结果。
如果没有执行return,函数执行完也会返回结果undedined。

方式二

var abs =function(x){
       if(x>0){
        return x;
}else{
    return -x;
}
}

参数进来是否存在的问题?假设不存在参数,如何规避。

arguments

arguments是一个js免费赠送的关键字。

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

    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;
}
}

image-20201119092832684.png
问题:arguments会包含所有的参数,想使用多余的参数来进行附加操作,排除已有的参数。

rest

以前:

if(arguments.length>2){
	for (var i = 2; i < arguments.length; i++) {
		arguments[i]
	}
}

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

现在:

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

image-20201119094413939.png
rest只能写在最后面,必须用…标识。

4.2、变量的作用域

在js中,var定义的变量实际是有作用域的。

假设在函数体中声明,则在函数体外不可以使用。(可以研究下闭包可以解决)

function a(){
			var x=1;
			x=x+1;
		}
		x=x+2;

如果两个函数都使用了相同的变量名

function a(){
			var x=1;
			x=x+1;
		}
		function a1(){
			var x=1;
			x=x+1;
		}

嵌套:

function a(){
			var x=1;
			x=x+1;
			function a1(){
			var y=1;
			y=x+1;
		}
			z=x+y;
		}

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

内部和外部变量同名:

	function a(){
			var x=1;
			console.log("x=>"+x);
			function a1(){
			var x='A';
			console.log('x=>'+x);
		}
		a1()
		}
		a()

image-20201119100043582.png

假设在javascript中函数查找变量从自身函数开始,由内向外查找,假设外部存在同名变量,内部会屏蔽外部的同名变量。

提升变量的作用域

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

image-20201119100641436.png
说明:js执行引擎,自动提升了y的声明,但不会提升y的赋值。

全局函数

    var x=1;
	function a(){
		console.log(x);
	}a();
	console.log(x);

image-20201119101326044.png

全局对象 window

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

image-20201119101621484.png
alter()本身就是window的一个变量。

var x='aaaa';
	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);

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

规范

由于所有的全局变量都会绑定代我们的window上,如果不同的js文件,使用了相同的全局变量,就会冲突。如何减少冲突。

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

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

jQuery

局部作用域 let 解决局部区域冲突

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

const 常量

在ES6之前,怎么定义常量:只有用全部大写字母命名的变量就是常量

现在:

const a=1;

4.3、方法的定义及调用

定义方法

方法就是把函数定义在对象中,对象只有两个东西:属性和方法。

<script>
			var xyc={
				name:'徐冲',
				birth:1998,
				//方法
				age:function(){
					//今年减去出生的年月
					var now=  new Date().getFullYear();
					return now - this.birth;
				}
			}
</script>

分开看:

<script>
			function getage(){
					//今年减去出生的年月
					var now=  new Date().getFullYear();
					return now - this.birth;
				}
			var xyc={
				name:'徐冲',
				birth:1998,
				//方法
				age:getage
				}
			}
		</script>

apply

在js中可以控制this的指向

function getAge(){
					//今年减去出生的年月
					var now=  new Date().getFullYear();
					return now - this.birth;
			}
			var xyc ={
				name:'徐冲',
				birth:1998,
				age:getAge
			};
			getAge.apply(xyc,[]);//this,指向了xyc

image-20201119114517339.png

5、内部对象

标准对象

typeof 判断类型

typeof 123
"number"
typeof '1'
"string"
typeof true
"boolean"
typeof NaN
"number"
typeof []
"object"
typeof {}
"object"
typeof Math.abs
"function"
typeof undefined
"undefined"

5.1、Date

基本使用

<script>
			var date =new Date();
			var year =date.getFullYear();//年
			date.getMonth();//月
			date.getDate();//日
			date.getDay();//星期几
			date.getHours();//时
			date.getMinutes();//分
			date.getSeconds();//秒
			date.getTime();//时间戳 全世界统一 1970年1月1号0:00到至今的毫秒数。
            new Date(1578151515321);//时间戳转化为时间
</script>

转化

date.tolocaleString();//调用是一个方法,不是一个属性。

5.2、JSON

JSON是什么

早期,所有的数据传输习惯使用XML文件。

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

在javaScript一切皆为对象,任何js支持的类型都可以使用JSON来表示。

格式:

  • 对象用{};
  • 数组用[];
  • 所有的键值对都是用key:value
<script>
			var user={
			"name":'徐冲',
			"age":3,
			"sex":'男'
			}
			console.log(user);
</script>
            //对象转化为JSON字符串
			var json=JSON.stringify(user);
			console.log(json);

image-20201119133159650.png

       <script>
			//JSON字符串转化为对象
			var json=JSON.parse('{"name":"徐冲","age":3,"sex":"男"}');
			console.log(json);
		</script>

image-20201119133626913.png

js和json的区别:

var obj={a:'hello',b:'world'};
var json='{"a":"hello","b":"world"}'

6、面向对象编程

6.1、什么是面向对象

类:模板,对象:具体的实例。

原型:模板

	<script>
			var xian={
				name:"xian",
				age:3000,
				run:function(){
					console.log("run..."+this.name);
				}
			};
			var xiao={
				name:"xiao"
			}
//父类(原型)
			xiao.__proto__=xian;
		</script>

class继承:

class关键字,是在ES6引入的。

定义一个类:属性、方法

//定义一个学生的类
			class Student{
				constructor(name){
					this.name=name;
				}
				hello(){
					alert("hello");
				}
			}
//继承
class xiaoxuesheng extends Sutent{
    constructor(name,grade){
        super(name);
        this.grade=name;
    }
    mygrade(){
        alert("我是一个小学生");
    }
}
var xiaoming= new Student("小明");
var xiaohong= new Student("小红");

原型链 环形 proto

img

7、操作BOM对象(重点)

浏览器的介绍

js和浏览器的关系:

js的诞生为了能在浏览器中运行!

BOM:浏览器对象模型

内核:

  • IE6-11
  • Chrome
  • Safari
  • FireFox

三方:

  • qq浏览器
  • 360浏览器

7.1、window对象

window代表浏览器窗口。

window.alert(1)
undefined
window.innerHeight//内部高度
754
window.innerWidth//内部宽度
990
window.outerHeight
824
window.outerWidth
1536

7.2、Navigator

Navigator,封装了浏览器的信息。

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

7.3、屏幕 screen

screen.height
864px
screen.width
1536px

7.4、location 定位

location表示当前页面的URL信息

location.host
"127.0.0.1:8020"
location.href
"http://127.0.0.1:8020/%E5%87%BD%E6%95%B0/class%E7%BB%A7%E6%89%BF.html?__hbt=1605765881600"
location.assign()
location.reload()

7.5、document

document代表当前页面,HTML,DOM文档树。

document.title
""
document.title="李白"
"李白"

可以获取文档书的节点

<di id="app">
			<dt>java</dt>
			<dd>javaEE</dd>
			<dd>javaSE</dd>
		</di>
		<script>
			var a=document.getElementById('app');
			console.log(a);
		</script>

获取cookie的原理

document.cookie
"UM_distinctid=175d0a5181561-007563d9e27fc9-930346c-144000-175d0a518162ed; CNZZDATA155540=cnzz_eid%3D1301800198-1605520672-http%253A%252F%252F127.0.0.1%253A8020%252F%26ntime%3D1605520672"

截取cookie的原理

<script src="aa.js"></script>

history 历史记录

image-20201119145539678.png

8、操作DOM对象(重点)

DOM:文档对象模型

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

  • 更新:更行Dom节点
  • 遍历:得到Dom节点
  • 删除:删除Dom节点
  • 添加:添加Dom节点

8.1、获得节点

要操作Dom节点,就必须要先获得这个Dom节点。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>获得节点</title>
		
	</head>
	<body>
		<div id="father">	
		<h1></h1>
		<p id='p1'>p1</p>
		<p class='p2'>p2</p>
		<script>
			var h1=document.getElementsByTagName('h1');
			var p1=document.getElementById('p1');
			var p2=document.getElementsByClassName('p2');
			var father=document.getElementById('father');
		</script>
		</div>
	</body>
</html>

8.2、更新节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="father">
			
		</div>
		<script>
			var father=document.getElementById('father');
		</script>
	</body>
</html>
father.innerText='123'修改文本的值
father.innerHTML='<strong>123</strong>'可以解析文本标签。
father.style.属性名='';

8.3、删除节点

删除节点的步骤,获取父节点。

var father=p1.parentElement;
father.removeChild(p1);

image-20201119155930938.png

8.4、插入节点

我们获得了某个Dom节点,假设这个节点是空的,我们通过innerHTML就可以增加一个元素了,若存在,不可。

追加操作:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>	
	</head>
	<body>
		<p id="js">javascript</p>
		<div id="list">
		<p id="se">javaSE</p>	
		<p id="ee">javaEE</p>
		<p id="me">javaME</p>
		</div>
		<script>
			var js=document.getElementById('js');
			var list=document.getElementById('list');
            list.appendChild(js);
		</script>
	</body>
</html>

image-20201122085407127.png
创建并添加:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>	
	</head>
	<body>
		<p id="js">javascript</p>
		<div id="list">
		<p id="se">javaSE</p>	
		<p id="ee">javaEE</p>
		<p id="me">javaME</p>
		</div>
		<script>
			var js=document.getElementById('js');
			var list=document.getElementById('list');
			//通过js创建一个新的节点
			var newP=document.createElement('p');
			newP.id='newP';
			newP.innerText='时间就是最好的安排。';
			list.appendChild(newP);
		</script>
	</body>
</html>

创建一个标签节点:

	//创建一个标签节点
			var Script=document.createElement('script');
			Script.setAttribute("type","text/javascript");
			list.appendChild(Script);
//创建style标签
			var myStyle=document.createAttribute("style");
			myStyle.setAttribute("type","text/css");
			myStyle.innerHTML="body(background: red;)";
			//加入到位置
			document.getElementsByTagName('head')[0].appendChild(myStyle);

image-20201122090248623.png
在一个节点前插入

	<body>
		<p id="js">javascript</p>
		<div id="list">
		<p id="se">javaSE</p>	
		<p id="ee">javaEE</p>
		<p id="me">javaME</p>
		</div>
		<script>
		var se=document.getElementById('se');
		var ee=document.getElementById('ee');
		var list=document.getElementById('list');
		//要包含的节点.insertBefore(new,before)
		list.insertBefore(ee,se);
		</script>
	</body>

image-20201122093051699.png

9、操作表单(验证)

表单是什么 form DOM树

  • 文本框 (text)

  • 下拉框 (select)

  • 单选框 radio

  • 多选框 checkbox

  • 隐藏域 hidden

  • 密码框 password

表单的目的:提交信息

获得提交的信息

<body>
		<form action="post">
			<p>
			<span>用户名:</span><input type="text" id="username"/>
			</p>
			<!--多选框的值,就是定义好的value-->
			<p>
				<span>性别:</span>
				<input type="radio" name="sex" vaLue="man"  id="boy"/><input type="radio" name="sex" value="woman" id="girl"/></p>
		</form>
		<script>
			var input_text=document.getElementById('username');
			//得到输入框的值input_text.value;只能获得一个值
			//修改输入框的值input_text.value=1234;
			var boy=document.getElementById('boy');
			var girl=document.getElementById('girl');
			boy.checked;//查看返回的结果是否为true
            boy.checked=true;//可以设置结果
		</script>
	</body>

image-20201122095345166.png

提交表单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/md5.css"></script>
	</head>
	<body>
		<form action="https://www.baidu.com/" method="post" onsubmit="">
			<p>
			<span>用户名:</span><input type="text" id="username" name="username"/>
			</p>
			<p>
				<span>密码:</span>
				<input type="text" id="pwd" name="pwd"/>
			</p>
			<p><!--onclick 被点击的时候执行一件事-->
				<button type="submit" onclick="aaa()">提交</button>
			</p>
		</form>
		<script>
			function aaa(){
				var pwd=document.getElementById("pwd");
				var username=document.getElementById("username");
				//Md5算法
				pwd.value=md5(pwd.value);
				console.log(username.value);
				console.log(pwd.value);
				
			}
		</script>
	</body>
</html>

10、jQuery

javaScript

JQuery库,里面存在大量的javaScript函数

获取JQuery

image-20201122103726258.png

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	</head>
	<body>
		<!--公式:$(selector).action-->
		<a href="" id="jquery">点我</a>
	<script>
		$('#jquery').click(function(){
			alert("呵呵哒");
		})
	</script>
	</body>
</html>

选择器

<!--标签选择器-->
$('p').click();
<!--id选择器-->
$('#id').click();
<!--class选择器-->
$('.class').click();

事件

鼠标事件、键盘事件、其他事件。

image-20201122110132295.png

<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title>Title</title>
        <script src="lib/jquery-3.4.1.js"></script>
        <style>
            #divMove{
                width:500px;
                height:500px;
                border:1px solid red;
            }
        </style>
    </head>
    <body>
        <!--要求:获取鼠标当前的一个坐标-->
        mouse:<span id = "mouseMove"></span>
        <div id = "divMove">
            在这里移动鼠标试试
        </div>
        <script>
        	//当网页元素加载完毕之后,响应事件
            //$(document).ready(function(){})
            $(function(){
                $('#divMove').mousemove(function(e){
                    $('#mouseMove').text('x:'+e.pageX+"y:"+e.pageY)
                })
            });
        </script>
    </body>
</html>

操作DOM

节点文本操作

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

CSS的操作

$('#test-ul li[name=python]').css({"color","red"});

元素的显示和隐藏,:本质display:none

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

娱乐测试

$(window).width()
$(window).height()
$('#test-ul li[name=python]').toggle();

未来ajax();

$('#form').ajax()

$.ajax({url:"test.html",context:document.body,success:function(){
	$(this).addClass("done");
}})

小技巧

1、如何巩固JS(看jQuery源码,看游戏源码!)

2、巩固HTML、CSS(扒网站,全部down下来,然后对应修改看效果~)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值