什么是JavaScript
1、 概述
JavaScript 是一门世界上最流行的脚本语言。
== 一个合格的后端人员，必须精通JavaScript。==
基本使用及HelloWorld
内部标签：
<script>
//....
</script>
外部标签：
abc.js
//.....
.html
<script src="abc.js"></script>
测试代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- script标签内写js代码 -->
<!--<script>
alert("Hellow,World!")
</script>-->
<script src="js/qg.js"></script><!--script标签 必须成对出现-->
<script type="text/javascript"></script><!--不写type 也是默认的-->
</head>
<body>
<!-- 这里也可以存放J -->
</body>
</html>
基本语法入门
<!--js严格区分大小写-->
<script>
// 定义变量
var num = 70;
var name= "hua";
"helloword";
// 条件控制
if(num>90 && num <100){
alert("90 ~ 100")
}else if(num<90 && num>60){
alert("60 ~ 90")
}else {
alert("other");
}
//console.log(变量) 在浏览器控制台 打印变量
</script>
数据类型
数值，文本，音频，视频，图形。。。
number
js不区分小数和整数
123//整数123
123.1//浮点数
1.123e3//科学计数法
-99//复数
字符串
‘abc’ “abc”
布尔值
true , false
逻辑运算
&& 、 ||、 |
比较运算符
1=
2==（类型不一样，值一样）
3===绝对等于（类型一样结果一样）
这是js一个缺陷 坚持不用2比较
- NaN，这个与所有数值都不相等，包括自己
- 只能通过isNaN(NaN)来判断这个数是NaN
浮点数问题：
console.log(1/3===1-2/3);//false
console.log(Math.abs(1/3===1-2/3)<0.000001)//true
尽量避免使用浮点数进行运算，存在精度问题
null 和 undefined
数组
var arr = [1,2,3,'hello',true,null];
new Array(1,2,3,'hello',true);
取数组下标如果越界了就会显示undefined
对象
对象是大括号，数组是中括号
var Person = {
name : 'hua',
age :10,
tags : [1,2,343,2324,23]
}
严格检查格式
<script>
'use strict'; //严格检查模式，预防js的随意性导致产生的一些问题 如下 i=1
//必须卸载第一行 仅ES6及以上版本支持
//局部变量建议使用let定义
//全局变量
i=1;
//局部变量
let i1 = 2;//ES6 let
</script>
字符串类型
正常字符串我们使用"" ''包裹
注意转义字符
’ \t \n \u####(Unicode字符) \x41(Ascll字符)
多行字符编写
var str =`
hello
word
你好
`
模板字符串
var name ="hua"
let n = `你好呀，${name}`
字符串长度
var str ='';
str.length
字符串是不可变的
大小写转化
str.toUperCase()
str.toLowerCase()
str.indexOf("t")
str.substring(1)//1到结束
str.substring(1,3)//1-2
数组类型
Array可以包含任意的 数据类型
var arr = [1,2,3,4,5,6]
长度
arr.length//给arr.length赋值，数组大小就会变化，如果赋值过小元素就会丢失
indexOf()， 通过元素获得小标索引
arr.indexof(2);//1 字符串的2和数字的2不同
slice（） 截取Array的一部分 返回一个新数组 类似于subString
push(),pop() 尾部
arr.push('a'); //arr=[1,2,3,4,5,'a'] 返回值类型是数组长度
arr.pop();//arr=[1,2,3,4,5] 返回值为'a'
unshift() , shift() 头部 对应push() 和 pop()
排序sort()
元素反转
arr.resverse(); //即反着输出
连接符join() 打印拼接数组，使用特定的字符串连接
arr.join('-');//"1-2-3-4-5"
多维数组
对象类详解
对象 ： 若干个键值对
var Person{
name : "hua",
age : 22,
score : 100
}
函数
定义方式一：绝对值函数
function abs(x){
if(x>0){
return x;
}else{
return -x;
}
}
一旦执行return 代表函数结束，返回结果！
定义方式二：
var abc = function(x){//匿名函数
if(x>0){
return x;
}else{
return -x;
}
}
调用函数=>可以传任意个参数，也可以不传参数
abs(10);//10
abc(-10);//-10
如果不存在参数如何规避{
if(typeof x!== Number){ throw 'Not A Number!'}
arguments
arguments是一个免费赠送的关键词
function abs(x){
for (let i = 0; i < arguments.length; i++) {
console.log(arguments[i]);
}
if(x>0){
return x;
}else{
return -x;
}
}
//打印传入的参数 返回第一个绝对值
rest ES6新特性：获取已经定义的参数之外的所有参数
function abc(a,b,...rest){
console.log(rest)
}
rest参数只能写在最后面，必须用…标识
变量的作用域
变量的查找其实是双亲委派机制（向上查找的记过） 由内而外的查找
变量 的定义放在前面，不要乱放，便于代码的维护
- 全局对象window （所有全局的方法，变量 都可以用window来调用）
当我们使用了相同的全局变量
//唯一全局变量
var hua = {}
//定义全局变量
hua.name="huazi";
hua.add = function(a,b){
return a+b;
}
- 局部作用域let
使用let在循环外就不能再使用let 定义的变量
function (){
for（var i=0;i<100:i++）{
}
console.log(i+1);//这里的i继续上边的相加
}
- 常量const
之前定义常量用var 大写变量名 但实际可以改变值
const PI =3.14;
方法
就是把函数放在对象中，对象只有两个东西：属性和方法
"user strict";
var person = {
name : "hua",
birth : 1999,
//方法
age : function(){
let age = new Date().getFullYear();//当前年份
return age-this.birth;
}
}
console.log(person.age())
- apply 可以指向调用的对象
想要调用person对象age的值 必须用 getAge.apply(person,[]) 而person.age返回的是方法
"use strict";
function getAge(){
return new Date().getFullYear() - this.birth;
};
var person = {
name : "hua",
birth : 1999,
age : getAge
}
getAge.apply(person,[]);//22
Date日期对象
var now = new Date();//Date Thu Jul 15 2021 12:11:40 GMT+0800 (中国标准时间)
now.getFullYear();//年
now.getMonth();//月
now.getDate();//日
now.getDay();//星期几
now.getHours();//时
now.getMinutes();//分
now.getSeconds();//秒
now.getTime();//时间戳
json 对象
JSON是一个轻量级的数据交换格式。
JavaScript一切皆为对象，任何js支持的类型都可以用JSON来表示
格式：
– 对象都用{}
– 数组都用{}
–所有键值对都是用key:value
"use strict";
var user = {
name : 'hua',
age : 1,
id : 2
}
//对象转化为字符串
var str = JSON.stringify(user)
console.log(user)
console.log(str)
//字符串转化为对象
var ogj = JSON.parse('{ "name": "hua", "age": 1, "id": 2 }')
console.log(ogj)
JSON对象
var json = '{ "name": "hua", "age": 1, "id": 2 }'
Ajax
- 原生的js写法 xhr异步请求
- jQuey封装好的方法 $("#name").ajax("")
- axios 请求
面向对象编程
类：模板
对象：实例
原型：
"use strict";
var Student = {
name : '',
age : 10,
run : function(){
console.log(this.name+"run...")
}
}
var hua = {
name: 'hua'
}
//hua的原型是Student
hua.__proto__=Student;
/*
hua.run
function run()
hua.run()
huarun... 原型（继承）.html:12:17
undefined
console.log(hua)
Object { name: "hua" }
name: "hua"
<prototype>: Object { name: "", age: 10, run: run()
}
age: 10
name: ""
run: function run()
<prototype>: Object { … }
*/
面向对象class继承
ES6引入的 class关键字
"use strict";
//定义一个类
class Student{
constructor(age) {
this.age = age
}
setName(name){
this.name=name;
}
run(){
alert("run");
}
}
var xiaoming = new Student(10);
继承：
//定义一个类
class Student{
constructor(age) {
this.age = age
}
setName(name){
this.name=name;
}
run(){
alert("run");
}
}
var xiaoming = new Student(10);
class XiaoStudent extends Student{
constructor(age,score) {
super(age);
this.score = score
}
}
var xiaoxiao = new XiaoStudent(9,100)
========================================
console.log(xiaoxiao)
Object { age: 9, score: 100 }
age: 9
score: 100
<prototype>: Object { … }
原型链
操作BOM对象（重点）
JavaScript和浏览器的关系?
JavaScript的诞生就是为了在浏览器中运行
BOM：浏览器对象模型（Chrome Firefox 。。。。）
window
window代表浏览器窗口
Navigator
Navaigator， 封装了浏览器的信息
不过，大多数我们不会使用navigator对象，因为会被人为修改！
screen
screen.width;
screen.height;
locaation(重要)
location代表当前页面的URL信息
host:"wwww.baidu.com"
href:"https://wwww.baidu.com/"
protocol:"https"
reload:f reload() //刷新页面
//设置新地址
location.assign('https://blog.kuangstudy.com/')
document
document 代表当前的页面，HTML DOM文档树
document.title;
"百度一下，你就知道"
document.title = "hua"
"hua"
获取具体的文档树节点
<dl id ="app">
<dt>Java</dt>
<dd>JavaSE</dd>
<dd>JavaEE</dd>
</dl>
<script>
var dl = document.getElementById("app")
</script>
获取cookie
document.cookie
劫持cookie原理
<script src="as.js"></script>
//恶意人员：获取你的cookie上传到他的服务器
服务器端可以设置 cookie：httpOnly（只读）
history（不建议使用）
history.back()//后退
history.forword()//前进
BOM节点（重点）
BOM：文档对象模型
核心
浏览器网页就是一个DOM树形结构
- 更新节点
- 遍历dom节点
- 删除节点
- 添加节点
要操作一个DOM节点就必须先获得这个dom节点
获得dom节点
//原生代码，之后尽量使用jQuery
var h1 = document.getElementsByTagName("h1")
var h2 = document.getElementById("p1")
var h3 = document.getElementsByClassName("p2")
var father = document.getElementById("father")
更新节点
<div id ="id1">
</div>
var id1 = document.getElementById("id1")
id1.innerText="123"//更新节点文本
id1.innerHTML="<strong>"+id1.innerText+"</strong>"//更新文本的值 可以解析HTML文本标签
id1.style.color = 'red'
删除节点
步骤：先获取父节点，然后通过父节点删除自己(狂老师讲的)
我自己发现其实可以自己删自己
father.remove(p1)
id1.remove()
//删除多个节点的时候，children是在时刻变化的
创建 和 插入节点
我们获得了某个Dom节点假设是空的，我们通过innerHTML就可以增加一个元素了，但是已经有这个节点，我们就不能这么干了
追加
<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)//将js节点放到list节点下
</script>
创建一个新的标签，实现插入
var js = document.getElementById("js")
var list = document.getElementById("list")
list.appendChild(js)//将js节点放到list节点下
var newP = document.createElement('p');//创建一个新节点 p标签
newP.id="new_p" //设置id名为new_p
newP.innerText="this is newP"//更新文本
list.appendChild(newP)//加入到list节点下
//============================================或者
var myScript = document.createElement("script")
myScript.setAttribute('type','text/javascript')//这样赋值属性以及值也可以
//改变body的背景颜色
var body = document.getElementsByTagName('body')
body[0].setAttribute('style','background-color: rgb(169, 71, 91);');
//body[0].style.backgroundColor = '#a9475b';
操作表单（验证）
表单是什么 form DOM树
文本框 text
下拉框
单选框 radio
多选框 checkbox
隐藏域 hidden
密码框 password …
获得要提交的信息
<form action="post">
<p><span>用户名</span> <input type="text" id="username"></p>
<span>性别：</span>
<input type="radio" name="sex" value="man" id="boy">男
<input type="radio" name="sex" value="woman" id="gril">女
</form>
<script>
var input_user = document.getElementById('username')
var boy_radio = document.getElementById('boy')
var gril_radio = document.getElementById('gril')
//得到输入框的值
input_user.value
//修改输入框的值
input_user.value = '123'
boy_radio.checked;//判断结果是否为true 从而获取其值boy_radio.value;
boy_radio.value;
提交表单md5加密密码
终极md5方案
<form action="https://www.baidu.com" method="post" onsubmit="return ckecked()">
<p><span>用户名</span> <input type="text" id="username" name="username"></p>
<p><span>密码：</span><input type="password" id="input-password"></p>
<input type="hidden" name="password" id ="md5-password">
<input type="submit" value="提交">
</form>
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
<script>
function ckecked(){
var username = document.getElementById('username')
var password = document.getElementById('input-password')
var md5_password = document.getElementById('md5-password')
md5_password.value=md5(password.value)
//return true or return false 校验后
return true;
}
</script>
jQuery
JavaScript 和
jQuery库，里面存在大量的JavaScript函数
公式： $(’#…’).click(action)
公式 ：$(selector).action()
-->
<a href="" id="test-jqeury">点我 </a>
<script>
document.getElementById('id')
//选择器就是css选择器
$('#test-jqeury').click(function (){
alert('1')
})
</script>
选择器
文档工具站：https://jquery.cuishifeng.cn/
//标签
document.getElementsByTagName('p')
//id 选择器
document.getElementById('id')
//类选择器
document.getElementsByClassName('class')
$('p').click()
$('#id').click()
$('.calss').click()
</script>
jquery事件
鼠标事件 键盘事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.6.0min.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 (){
$('#divMove').mousemove(function (e){
$('#mouseMove').text("x:"+e.pageX+",y:"+e.pageY)
})
});//化简$(function(){});
</script>
</body>
</html>
jquery操作DOM
在这里插入图片描述
split(字符分割)
- split(".")——通过“.”分割字符串成为数组
- split(".")[0]——获取分割后数组的第一个(小数点左边的数)
- split(".")[1]——获取分割后数组的第二个(小数点右边的数)
扫一扫
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
