文章目录
JavaScript
-世界最流行的脚本语言
- ECMAScript是JavaScript的一种标准：现在到６了，浏览器支持５
一个合格的后端程序员，必须要精通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>
252
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
