JS(javascript)

最新推荐文章于 2023-06-30 08:35:58 发布

API工程师@

最新推荐文章于 2023-06-30 08:35:58 发布

阅读量617

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/ghjgjhyfht/article/details/114779486

版权

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

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

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

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

变量：不要以数字开头。

2.4、严格检查模式strict

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

3、数据类型

3.1、字符串类型的详解

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

2、注意转义字符

3、多行字符换编写``

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

4、模板字符串

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

5、字符串长度

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

7、大小写转化

8、获取指定下标（indexof）

9、截取元素（substring）

3.2、数组（内容和长度均可变）

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

1、定义以及打印

2、长度

长度过小会导致数据丢失。(不会报数组越界的错误)

3、根据元素获得下标索引indexof

字符串的1和数字1不一样

4、slice（）数组版的subString（）

5、push，pop（尾部)

6、unshift() shift() 头部

7、sort 排序

8、元素反转 reverse

9、拼接concat

这个方法并没有修改数组，只是返回了一个新的数组。

10、连接符 join

11、多维数组

3.3、对象

若干个键值对

定义对象：

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

1、对象赋值

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

3、动态的删减属性

4、动态添加属性

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

js中对象的key都是字符串，值是任意对象。

6、判断一个属性是否是这个对象自身拥有的

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>

set:去重

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

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

一旦执行到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;
}
}

问题：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);
}

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()

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

提升变量的作用域

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

说明：js执行引擎，自动提升了y的声明，但不会提升y的赋值。

全局函数

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

全局对象 window

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

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

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

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

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

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 历史记录

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

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>

创建并添加：

<!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);

在一个节点前插入

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

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>

提交表单

<!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

<!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();

事件

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

<!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下来，然后对应修改看效果~）

API工程师@

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫