JavaScript
Posted dadabai
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript相关的知识，希望对你有一定的参考价值。
1JS
（JS）是一种脚本语言，主要用于 Web。它用于增强 html 页面，通常可以嵌入 HTML 代码中。javascript 是一种解释型语言。因此，它不需要编译。JavaScript 以交互式和动态的方式呈现网页。这允许页面对事件做出反应，展示特殊效果，接受可变文本，验证数据，创建 cookie，检测用户的浏览器等。
一个合格的java工程师必须学好JS
2快速入门
2.1如何导入js代码
<!--script标签中，写JavaScript代码-->
<!--<script>-->
<!--alert("Hello World");-->
<!--</script>-->
?
<!--外部引入-->
<!--注意：script标签必须成双出现-->
<script src="js/dabai.js"></script>
2.2基础语法
<!--JavaScript严格区分大小写-->
<script>
//1.定义变量 变量类型 变量名=变量值
var score=90;
//alert(num);
//2.条件控制
if(score>60&&score<70){
alert("中等");
}else if(score>70&&score<80){
alert("良好");
}else{
alert("other");
}
?
//console.log(score) 在浏览器的控制台打印变量！ System.out.print()
<script>
//Person p=new Person{1,2,3,4,5}
var person={
name:"dabai",
age:23,
tags:[‘java‘,‘html‘,‘css‘]
}
</script>
//console.log(person.name); 在console控制台可以输出人名
?
2.3严格检查模式
<!--
前提：IEDA需要设置支持ES6的语法
‘use strict‘; 严格检查模式，预防JS的随意性导致的一些问题
必须放在第一行
局部变量都建议使用let来定义
-->
<script>
‘use strict‘;
//i=1;
let i=1;
</script>
3数据类型
3.1字符串
<script>
‘use strict‘;
let name=‘dabai‘;
let age=23;
let msg=`你好呀，${name}` //`键在tab键上面，里面可以包含多个字符串
</script>
3.2数组
Array可以包含任意的数据类型
var arr=[1,2,3,4,5]; //通过下标取值和赋值
arr[0]
arr[0]=1
1.长度
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()
7.元素反转 reverse()
8.concat() 拼接数组，没有修改原数组，只是返回一个新数组
9.join 打印拼接数组，使用特定的连接符连接
var arr=[‘a‘,‘b‘,‘c‘]
arr.join(‘-‘)
arr=["a-b-c"]
3.3对象
若干键值对
var 对象名={
属性名：属性值，
属性名：属性值，
属性名：属性值
}
?
var person={
name:"kuangshen",
age:23,
emali:"2234455@qq.com"
}
js中对象用{.....}表示 属性之间用逗号隔开，最后一个不加逗号
JS中所有的键都是字符串，值是任意类型
1.动态的删减属性，通过delete删除对象属性
delete person.name
true
2.多态的添加属性,直接给新的属性添加值即可
person.haha="haha"
"haha"
3.判断属性值是否在这个对象中 xxx in xxx
‘age‘ in person
true
3.4流程控制
for....in //尽量不用
var arr=[11,22,33,44,55,66];
//for(var index in Object)
for(var num in arr){
if(arr.hasOwnProperty(num)){
console.log("存在");
console.log(arr[num]);
}
}
3.5Map和Set
Map
/Es6 Map
//学生的成绩，学生的姓名
//var name=["tom","jack","haha"];
//var score=[100,90,80];
?
var map=new Map([[‘tom‘,100],[‘jack‘,90],[‘haha‘,80]]);
var score=map.get(‘tom‘); //通过key获取value
map.set(‘admin‘,89);
console.log(score);
Set:无序不重复的集合
set.add(2);//添加
set.delete(1);//删除
set.has(3);//判断是否包含
3.6Iterator
遍历数组
//通过for of遍历数组 for in 是遍历下标
var arr=[1,2,3];
for(var x of arr){
console.log(x);
}
遍历map
var map=new Map([[‘tom‘,100],[‘jack‘,90],[‘haha‘,80]]);
for(let x of map){
console.log(x);
}
4函数
4.1定义函数
定义方式一
绝对值函数
function abs(x){
if(x>0){
return x;
}else{
return -x;
}
}
一旦执行到return 代码函数执行结束，返回结果
如果没有执行return 函数也会返回结果，结果就是undefined
定义方式二
var abs=function(x){
if(x>0){
return x;
}else{
return -x;
}
}
可以通过abs调用 函数
参数传递问题
假设不存在参数，如何规避
var abs=function(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(var i=0;i<arguments.length;i++){
console.log(arguments[i]);
}
if(x>0){
return x;
}else{
return -x;
}
}
问题：arguments包含所有的参数，我们有时候想用多余的参数做附加的操作，需要排除已有的参数~
rest
eS6引入的新特性，获取处理已经定义的参数之外的所有参数
function aaa(a,b,...rest) {
console.log("a=>"+a);
console.log("b=>"+b);
console.log(rest);
}
rest参数只能写在最后面，必须用...标识
4.2变量的作用域
在JS中，var定义变量实际上是有作用域的
假设在函数体中声明，则在函数体外不可以使用 (非要使用的话，可以使用闭包)
function aaa() {
var x=1;
x=x+1;
}
x=x+2; //Uncaught ReferenceError: x is not defined
如果两个函数使用了相同的变量名，只要在函数内部，就不冲突
function aaa() {
var x=1;
x=x+1;
}
function bbb() {
var x=‘A‘;
x=x+1;
}
内部函数可以访问外部函数的成员，反之不行
提升变量的作用域
function db() {
var x="x"+y;
console.log(x);
var y="y";
}
结果 x is not defined
说明JS执行引擎，自动提升了y的声明，但不会提升y的赋值
注意规范：将函数的声明都写在头部
规范
由于我们所有的全局变量都会绑定到window上，如果不同的js文件，使用了相同的全局变量，就会冲突~
如何减少冲突
//唯一的全局变量
var kuangshen={}；
?
//定义全局变量
kuangshen.name=‘kuangshen‘;
kuangshen.add=function (a,b) {
return a+b;
}
把自己的代码全部放到自己定义的唯一空间名字中，降低全局命名冲突问题
局部作用域
function aaa() {
for(var i=0;i<100;i++){
console.log(i);
}
console.log(i+1); //问题 i出了作用域还可以使用
}
ES6 let关键字
function aaa() {
for(let i=0;i<100;i++){
console.log(i);
}
console.log(i+1); //不会执行
}
const常量
4.3方法
定义方法
方法就是把函数放在对象里面，对象只有两个东西，属性和方法
var kuangshen={
name:‘kuangshen‘,
brith:1997,
age:function () {
//今年-出生
var now=new Date().getFullYear();
return now - this.brith;
}
}
//属性
kuangshen.name
//方法 一定要带（）
kuangshen.age()
apply
可以控制this的指向
5内部对象
5.1Date
<script>
var now=new Date();
now.getFullYear();//年
now.getMonth();//月
now.getDate();//天
now.getDay(); //星期几
now.getHours();//时
now.getMinutes();//分
now.getSeconds();//秒
now.getTime();//时间戳 全世界统一
</script>
5.2JSON
在JS一切都为对象，任何JS支持的类型都可以用JSON来表示
对象都用{}
数组都用[]
所有的键值对都是用 key:value
JSON与JS的转换
<script>
var user={
name:"dabai",
age:23,
sex:"男"
}
//对象转换为json字符串
var jsonuser=JSON.stringify(user); //{"name":"dabai","age":23,"sex":"男"}
//json字符串转化为字符串
var obj=JSON.parse(‘{"name":"dabai","age":23,"sex":"男"}‘);
</script>
6面向对象编程
6.1
<script>
var Student={
name :"dabai",
age :23,
run:function () {
console.log(this.name+"run...");
}
}
?
var xiaoming={
name :"xiaoming"
}
?
//xiaoming的原型是Student
xiaoming._proto_=Student; //就可以调用Student中的run方法
</script>
class继承
class关键字，是在es6引入的
1.定义一个类，属性，方法
//定义一个学生类
class Student{
constructor(name){
this.name=name;
}
hello(){
alert("hello");
}
}
var xiaoming=new Student(xiaoming);
var xiaohong=new Student(xiaohong);
xiaoming.hello();
2.继承
//定义一个学生类
class Student{
constructor(name){
this.name=name;
}
hello(){
alert("hello");
}
}
?
class xiaoStudent extends Student{
constructor(name,grade){
super(name);
this.grade=grade;
}
myGrade(){
alert("我是一名小学生");
}
}
?
var xiaoming=new Student(xiaoming);
var xiaohong=new xiaoStudent(xiaohong,1);
7操作BOM对象（重点）
浏览器介绍
JS与浏览器的关系？
JS的诞生就是为了能够让它在浏览器中运行
BOM：浏览器对象模型
IE6-11
Chrome
Opera...
window
window代表浏览器窗口
window.alert(1)
window.innerHeight
Navigator
Navigator ,封装了浏览器的信息
navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36"
大多时候，我们不会使用navigator对象，因为会被人修改
screen
代表屏幕的尺寸
screen.width
1366
screen.height
768
location(重要)
location 代表当前页面的URL信息
host: "www.baidu.com"
href: "https://www.baidu.com/"
protocol: "https:"
reload:f reload() //刷新网页
//设置新的地址
location.assign("https://blog.kuangstudy.com/")
document
document代表当前页面，HTML DOM文档树
document.title
"百度一下，你就知道"
document.title=‘狂神说‘
"狂神说"
获取具体的文档树节点
<dl id="app">
<dt>
<dd>JavaSE</dd>
<dd>JavEE</dd>
</dt>
</dl>
?
<script>
var d1=document.getElementById(‘app‘);
</script>
获取cookie
document.cookie
history
代表浏览器的历史纪录
history.back() //后退
history.forward //前进
8操作DOM对象（重点）
核心
浏览器网页就是一个DOM树型结构
更新：更新DOM节点
遍历DOM节点：获得DOM节点
删除：删除DOM节点
添加：添加一个新节点
要操作一个DOM节点，首先要获得这个节点
获得DOM节点
<div id="father">
<h1>标题一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
//对应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; //获取父节点下的所有子节点
</script>
更新节点
<div id="id1">
?
</div>
?
<script>
var id1=document.getElementById(‘id1‘);
</script>
操作文本
id1.innerText=‘123‘ 修改文本的值
id1.innerHTML=‘<strong> 123 </strong>‘ 可以解析HTML文本标签
操作JS
id1.style.color=‘yellow‘;
id1.style.fontSize=‘20px‘;
id1.style.padding=‘2em‘;
删除节点
删除节点的步骤：先获取父节点，在通过父节点删除自己
<div id="father">
<h1>标题一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
var self=document.getElementById(‘p1‘);
var father=p1.parentElement;
father.removeChild(self);
//删除是一个动态的过程
father.removeChild(father.childer[0]);
father.removeChild(father.childer[1]);//此时1已经变为0
father.removeChild(father.childer[2]);//此时2已经变为1
</script>
插入节点
我们获得了某个Dom节点，假设这个dom节点是空的，我们通过innerHTML就可以增加一个元素了，但是这个Dom节点已经存在元素了，我们就不能这么干了，会产生覆盖
追加
<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>
创建一个新标签，实现插入
<script>
var js=document.getElementById(‘js‘); //已经存在的节点
var list=document.getElementById(‘list‘);
//list.appendChild(js);
?
//通过JS创建一个新的节点
var newP=document.createElement(‘p‘); //创建一个p标签
newP.id=‘newP‘;
newP.innerText=‘hello,kuangshen‘;
list.appendChild(newP);
</script>
创建一个新标签，实现插入
<script>
var js=document.getElementById(‘js‘); //已经存在的节点
var list=document.getElementById(‘list‘);
//list.appendChild(js);
?
//通过JS创建一个新的节点
var newP=document.createElement(‘p‘); //创建一个p标签
newP.id=‘newP‘;
newP.innerText=‘hello,kuangshen‘;
//list.appendChild(newP);
?
//创建一个标签节点
var myScript=document.createElement(‘script‘);
myScript.setAttribute(‘type‘,‘text/javascript‘);
?
//可以创建一个Style标签
var myStyle=document.createElement(‘style‘); //创建了一个空style标签
myStyle.setAttribute(‘type‘,‘text/css‘);
myStyle.innerHTML=‘body{}‘; //设置标签内容
document.getElementsByTagName(‘head‘)[0].appendChild(myStyle);
</script>
insert
var ee=document.getElementById(‘ee‘);
var js=document.getElementById(‘js‘);
var list=document.getElementById(‘list‘);
//要包含的点.insertBefore(newNode,targetNode)
list.insertBefore(js,ee);
9操作表单（验证）
表单是什么 form DOM树
文本框 text
下拉框 <select>
单选框 radio
多选框 checkbox
隐藏域 hidden
密码框 password
.......
<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‘);
var boy_radio=document.getElementById(‘boy‘);
var girl_radio=document.getElementById(‘girl‘);
//得到输入框的值
input_text.value;
//修改输入框的值
input_text.value=‘123‘;
//对于单选框，多选框等等固定的值，boy_radio.value只能取到当前的值
boy_radio.checked; //查看返回的结果，是否为true,如果为true，则被选中
girl_radio.checked=true; //赋值
</script>
提交表单
<title>Title</title>
<!--MD5工具类 加密用的-->
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<!--
表单绑定提交事件
onsubmit=绑定一个提交检测的函数，true,false
将这个结果返回给表单，使用onsubmit接收
onsubmit="return aaa()"
-->
<form action="#" method="post" onsubmit="return aaa()">
<p>
<span>用户名：</span><input type="text" id="username" name="username">
</p>
<p>
<span>密码：</span><input type="password" id="input_password">
</p>
<input type="hidden" id="md5-password" name="password">
<!--绑定事件 onclick被点击-->
<button type="submit">提交</button>
?
<script>
function aaa() {
var uname=document.getElementById(‘username‘);
var pwd=document.getElementById(‘input_password‘);
var md5pwd=document.getElementById(‘md5-password‘);
md5pwd.value=md5(pwd.value);
//可以检验判断表单内容，true就是通过提交，false就是阻止提交
return true;
}
</script>
10jQuery
JavaScript
jQuery库，里面存在大量的JS函数
获取jQuery
公式 ： $(selector).action()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<script src="https://cdn.bootcss.com/jquery/3.4.1/core.js"></script>-->
?
<script src="lib/jquery-3.4.1.js"></script>
</head>
<body>
<!--
公式 ： $(selector).action()
-->
<a href="" id="test-jquery">点我</a>
<script>
//选择器就是css的选择器
$(‘#test-jquery‘).click(function () {
alert(‘hello,jQuery‘);
})
</script>
</body>
</html>
选择器
<script>
//原生JS，选择器少，麻烦不好记
//标签
document.getElementsByTagName();
//id
document.getElementById();
//类
document.getElementsByClassName();
//jQuery css中的选择器它全部都可以用
$(‘p‘).click();//标签选择器
$(‘#id1‘).click();//id选择器
$(‘.class1‘).click();//类选择器
</script>
文档工具站：https://jquery.cuishifeng.cn/
事件
鼠标事件，键盘事件，其他事件
<!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>
//当网页元素加载完毕后，响应事件
$(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(‘设置值‘);//设置值
css的操作
$(‘#test_ul li[name=python]‘).css("color","red")
元素的显示和隐藏：本质 display:none;
$(‘#test_ul li[name=python]‘).show();
$(‘#test_ul li[name=python]‘).hide();
小技巧
2.巩固HTML,CSS（扒网站，全部down下来，然后对应修改看效果）
Layer弹窗组件
以上是关于JavaScript的主要内容，如果未能解决你的问题，请参考以下文章