文章目录
JavaScript
-世界最流行的脚本语言
- ECMAScript是JavaScript的一种标准:现在到6了,浏览器支持5
一个合格的后端程序员,必须要精通JavaScript
引入JavaScript
- 可以放在网页head或者body的JavaScript标签中
<!--JavaScript代码标签-->
<script>
//注释
alert('hello word');
</script>
- 可以通过文件引入:
<script src="01.js"></script>
基本语法
定义变量
- 一切变量都是var
- 弹窗:alert();
- 控制台打印:console.log();
var name=1;
var sex='nan';
条件控制
- if else
var name=1;
if(name>10)
alert(name);
else
alert("小于10");
/**
* 多行注释
*/
严格检查模式
- ‘use strict’;严格检查模式,写在第一行
- 预防JavaScript的随意性导致产生的一些问题
- 局部变量建议使用(let)定义
'use strict';
let i=0;
数值类型
-
数值、文本、图形、音频、视频
-
数值 js不区分小数和整数:number
- 数值:整数、浮点数、科学计数法、复数、NaN(不是一个数)、Infinity(无限大)
- 避免使用浮点数运算,有精度损失
-
字符串:‘abc’、“abc”
-
布尔值:true、false
-
逻辑运算:&&(与)、||(或)、!(非)
-
比较运算符:
- =
- ==等于(类型不一样,值一样,也会判断为true)
- ===绝对等于(类型一样,值也一样,结果为true)
- NaN与所有的数值都不相等,包括自己
- 只能通过(isNaN())来比较
-
空指针
- null:空
- undefined:未定义
-
数组、对象:可以包含任意类型的变量
- 去数组下标:如果下标越界,会出现undefined
- 数组是中括号([ ])
- 对象用大括号({ })
- 去对象的值:点(.)
var a=[1,2,"ss",true];
new Array(1,2,"",true);
var person{
name:"huang",
age:3,
tar:[1,2,3,"",true]
}
字符串
- 正常字符串用单引号,或者双引号包裹
- 转义字符 “\”
\'
\n
\t
- 多行字符串:反引号:tab键上面的
let name=`
ha
ha
ha
`;
- 模板字符串:${ }
let age="10";
let msg=`你好啊,${age}`;
- 字符串长度:
str.length
-
字符串的可变性,不可变
str[0]=1; //错误,不可变 -
大小写转换:使用方法转换
str.toUpperCase(); //转换为大写
str.toLowerCase(); //转换为小写
- 获取字符串第一个‘t’的位置:str.indexOf(‘t’);
- 截取字符串的第1-3位:包含前面,不包含后面的:str.substring(0,3);
数组类型
- Array可以包含任意的数据类型
- 给arr.length赋值,数组大小会发生变化,增大的是undefined,缩小元素会丢失
- indexOf:通过元素获取下标索引:字符串的1和数字1是不一样的
- slice():截取Array的一部分,返回一个新数组,类似于string中的substring
- push:压入到尾部,pop:弹出尾部一个元素
- unshift():压入到头部,shift():弹出头部的一个元素
- 排序:sort();
- 元素反转:arr.reverse();
- 拼接数组:arr.concat([1,2,3]);没有修改数组,返回拼接数组
- 连接符:join();:打印拼接数组,使用特殊的字符串连接
- 多维数组:arr=[[1,2,3],[4,5,6].[7,8,9]];
对象
JavaScript中所有的键都是字符串,值是任意对象
var 对象名={
属性名:属性值,
属性名:属性值,
属性名:属性值
}
- js对象,{…}表示一个对象,键值对描述对象属性,多个属性之间用逗号隔开,最后一个属性后不加逗号。
- 使用一个不存在的对象属性,不会报错:undefined
- 动态删减属性:通过delete删除对象的属性
delete person.name;
- 动态的添加属性:直接给新属性添加值
person.hhh='hhs';
- 判断属性值是否在这个对象中:xxx in xxx :’age‘ in person;在返回true。
- 可以找到父类的方法
- 判断一个属性是否是这个对象自身拥有的hasOwnProperty();
- 只能找到自己定义的
流程控制
- if判断:和Java一样
let age=9;
if(age>5){
alert(age);
}else{
alert("太小了");
}
- while,for循环:和Java一样
while(age<15){
age++;
console.log(age);
}
for (let i = 0; i < 1; i++) {
alert(i);
}
- 数组循环:
- forEach(函数){}
- for(let index in 元数){}:index是索引
let a=[1,2,3,4,5,6,7];
a.forEach(function (e) {
console.log(e);
})
//aKey是索引
for (let aKey in a) {
console.log(a[aKey]+'hahha');
}
//akey是值,也可以便利Map和Set
for(let akey of a){
console.log(a[akey]+'hahha');
}
Map和Set
Map
let map=new Map([["tom",100],["jack",56],['sss',90]]);
map.set("admin",1234); //添加
map.delete('tom'); //删除
console.log(map.get('tom')); //获取
console.log(map);
Set 无序不重复集合
let set=new Set([3,1,1,1]);
set.add(2); //添加
set.delete(1); //删除
console.log(set);
console.log(set.has(3)); //判断是存在
函数
函数定义
- 一旦return代表函数结束,返回结果
- 如果没有执行return,函数执行完也会返回结果,结果就是undefined
//方法一
function abs(x){
if(x>10)
return x;
else
return x-1;
}
//方法二(与方法一等价)
var abs=function(x){
if(x>10)
return x;
else
return x-1;
}
- function(x){…}是一个匿名函数,但是可以把结果赋值给abs,通过abs可以调用函数
- 参数问题:
- JavaScript可以传任意个参数,也可以不传参数
- 可以手动抛出异常来解决
- arguments:关键字,代表传递进来的所有参数,是一个数组
- arguments:包含所有的参数,如果想使用多余的参数进行附加操作,需要排除已有的参数
- 可以使用…rest
//rest只能放在最后
function abs(x,y,...rest){
console.log(x);
console.log(y);
console.log(rest);
return;
}
变量的作用域
- JavaScript中,var定义变量实际是有作用域的
- 在函数体中声明,则在函数体外不可以使用(闭包可以实现)
- 和Java一样
- 所有变量放在函数头部,便于维护
全局对象window
var x='aaa';
alert(x);
alert(window.x);
全局作用域
- JavaScript实际上只有一个全局作用域,任何变量(函数也可以是为变量)假设在函数作用范围内没有找到,就会向外查找,如果在全局作用域都没有找到 报错“RefrenceError”
- 所有对象都会绑定到window上如果js变量使用了相同的全局变量:
//把自己的代码全部放入自己定义的唯一空间名字中,减少命名冲突
//唯一全局变量
var myWindow={};
//定义全局变量
myWindow.name="aaa";
myWindow.add=function(a,b){
return a+b;
}
局部作用域:let
function adad(){
for(var i=0;i<100;i++){
console.log(i);
}
console.log(i); //这个i还可以打印出来
}
//把var换成let就可以了
function adad(){
for(let i=0;i<100;i++){
console.log(i);
}
console.log(i); //这个i会报错:i is not defined
}
常量:const
- 在ES6之前:用全部大写字母命名的变量作为常量
- 引入const
const PI=3.14;
方法
- 定义在内部
var people={
name:"huang",
age:20,
haha:function() {
console.log(this.name);
}
}
people.haha();
- 定义在外部的函数:this指向调用者,外部无法调用
function ha() {
console.log(this.name);
}
var people={
name:"huang",
age:20,
haha:ha
}
people.haha();
- 通过apply可以指向调用对象
ha.apply(people,[]);
对象
标准对象
日期对象Date
- 基本使用
let date=new Date();
console.log(date);//Wed Jul 15 2020 09:46:38 GMT+0800 (中国标准时间)
date.getDate(); //天
date.getDay(); //星期
date.getHours(); //小时
date.getMonth(); //月
date.getSeconds(); //秒
date.getFullYear(); //年
date.getYime(); //时间戳
JSON对象
- 轻量级的数据交换格式
- 简洁和清晰的层次结构
- 在JavaScript中,一切皆为对象
- js支持的类型都可以用JSON表示
- 格式:
- 对象都用 {}
- 数组都用 []
- 所有的键值对都用 key:value
//对象
let user={
"name":"huang",
'age':9,
'sex':'nan'
}
//对象转JSON字符串
let userJson=JSON.stringify(user);
console.log(userJson);
//JSON字符串转对象
let user2=JSON.parse(userJson);
console.log(user2);
面向对象编程
- JavaScript中的原型
let user={
"name":"huang",
'age':9,
'sex':'nan',
run:function () {
console.log(this.name+'run----')
}
}
//原型对象
let student={
name:"哈哈哈"
}
//类似于继承
student.__proto__=user;
student.run();
- class:ES6之后出现的
class student{
//构造器
constructor(name) {
this.name=name;
}
hello(){
console.log('hello');
}
}
- 继承:
class student{
constructor(name) {
this.name=name;
}
hello(){
console.log('hello');
}
}
class student2 extends student{
constructor(name) {
super(name);
}
}
var s=new student2('qqqqqqqqqq');
s.hello();
原型链
- 在JavaScript中每一个函数都有一个prototype属性,这个属性指向函数的原型对象
操作BOM对象
- JavaScript就是为了在浏览器中运行
- BOM:浏览器对象模型
- IE、Chrome、Safari、Firefox
window:浏览器窗口
window.innerHeight; //窗口外部高度
window.innerWidth; //窗口内部宽度
window.outerHeight; //窗口外部高度
window.outerWidth; //窗口外部宽度
Navigator:浏览器的信息:不建议使用
- 大多数不使用这个对象,会被人使用
- 不用这些属性来判断编写代码
screen:屏幕尺寸
//屏幕尺寸
screen.width
screen.height
location(重要):当前页面URL信息
document:代表当前页面,HTML DOM文档树
- document可以获取cookie
document,title; //获取当前页面的title
//获取文档树节点
var a=document.getElementByID("你的ID");
- 劫持cookie原理:,恶意人员获取你的cookie上传到他的服务器
- 服务器端可以设置cookie:httpOnly
history:获得浏览器历史记录
history.back();//后退
history.forward();//前进
浏览器的核心:
浏览器网页就是一个DOM树结构
- 更新:Dom节点
- 便利dom节点:得到Dom所有的节点
- 删除:删除一个Dom节点
- 添加:添加一个Dom节点
获得DOM节点
<script>
"use strict"
//对应CSS选择器
let h1=document.getElementsByTagName('h1'); //通过元素类型获得
let p1=document.getElementById('p1'); //通过ID获得
let p2=document.getElementsByClassName('p2'); //通过类名获得
let father=document.getElementById('father');
let all=father.children; //获取所有的子节点
//father.firstChild
//father.lastChild
console.log(all);
</script>
更新节点
//修改文本的值
p1.innerText='haung';
//innerHTML可以解析HTML标签
p1.innerHTML='<strong>huang</strong>';
//修改样式CSS:属性使用字符串包裹,驼峰命名法
p1.style.fontSize='20px';
p1.style.fontSize='30px';
p1.style.padding='2em'
删除节点
删除方法:先获得父节点,通过父节点删除自己
let father= p1.parentElement;//获得父节点
father.removeChild(p1);
//删除多个节点的时候,children时时刻变化的,删除节点时一点要注意
father.removeChild(father.children[0]);
插入节点
- 当我们获得了某个Dom节点,如果是空的可以通过innerHTML增加一个新元素,如果已经存在,会产生覆盖
- 使用追加的方式添加元素
//添加一个已有的元素
let father=document.getElementById('father');
father.appendChild(p1);
//添加一个新标签
let newP=document.createElement('p');
newP.id='newp';
newP.innerText='huang';
father.appendChild(newP);
//在元素前插入
father.insertBefore();
//万能设置属性的方法:
newP.setAttribute('class','haung');
操纵表单form(验证)
- 获得要提交的信息;
- 对于单选框和多选框的值,不能用value获取
- 要用checked查看返回结果,来判断
<script>
let name=document.getElementById("username");
let boy=document.getElementById("boy");
//查看文本框的值
console.log(name.value);
//查看是否被选中
console.log(boy.checked);
</script>
提交表单和表单验证
<!--表单提交验证:
οnsubmit=绑定一个提交检测的函数:true false
将这个结果返回表单,使用onsubmit接收
-->
<form action="post" onsubmit="return sub()">
<p>
<span>用户名:</span> <input type="text" id="username">
</p>
<p>
<span>密码:</span> <input type="password" id="input-password">
<input type="hidden" id="password">
</p>
<!--可以在点击提交按钮添加调用验证函数,也可以在表头添加函数-->
<button type="button" onclick="isRight()">提交</button>
</form>
<script>
function isRight() {
let name=document.getElementById("username");
let inputPwd=document.getElementById("input-password");
let md5Pwd=document.getElementById("password");
//调用md5加密
md5Pwd.value=md5(inputPwd);
console.log(name.value);
console.log(md5Pwd.value);
}
function sub() {
//在这校验判断表单是否合适
return false;
}
</script>
JQuery
导入JQuery
<!--在线CDN导入-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
- 使用JQuery
<!--公式:
$(选择器).action();
这个选择器就是CSS选择器
-->
<script>
$('#jQuery').click(function () {
alert('hello');
})
</script>
选择器
//原生选择器和JQuery选择器对比
//通过元素类型获得
let h1=document.getElementsByTagName('h1');
$('h1').innerText=444;
//通过ID获得
let p1=document.getElementById('p1');
$('#p1').innerText=222;
//通过类名获得
let p2=document.getElementsByClassName('p2');
$('.p2').innerText=111;
事件
- 鼠标事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件</title>
<script src="../../lib/jquery-3.5.1.js"></script>
<style>
div{
height: 300px;
width: 300px;
border: solid 2px red;
}
</style>
</head>
<body>
鼠标位置: <span id="location"></span>
<div id="move">鼠标移动范围</div>
<script>
//当前网页加载完毕后响应时间
$(function () {
//获取到移动范围标签
$('#move').mousemove(function (e) {
//获取显示标签
$('#location').text('x:'+e.pageX+'\ty:'+e.pageY)
})
});
</script>
</body>
</html>
操作DOM元素
<script>
//节点文本操作
$('#test li[name=p1]').text();//获得值
$('#test li[name=p1]').text("java");//改变值
$('#test li[class=p2]').html();//获得值
$('#test li[class=p2]').html('<strong>haha</strong>');//修改值
//CSS操作
$('#p3').css({'color':'red'})
//元素的隐藏和显示:display:none
$('#p3').show();
$('#p3').hide();
</script>