JavaScript
javascript是世界上最流行的一门脚本语言
1.1引入script
外部引入
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/qj.js"></script>
</head>内部引入
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
alert('hello,world')
</script>
</head>1.2基本语法
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var score=10;
if(score>70){
alert('ok');
}else{
alert('失败');
}
// console.log(score)在控制台打印变量
</script>
</head>1.3数据类型
1.3.1number
js不区分小数和整数，number
123//整数123 123.1//浮点数123.1 1.123e3//科学计数法 -99//负数 NaN //不是一个数 Infinity// 表示无限大
1.3.2字符串
'abc' "abc"
1.正常字符串我们用单引号，双引号包裹
2.注意转义字符\
\' \n 换行 \t table \ue2d \u#### Unicode字符 \x41 Ascll字符
3.多行字符串编写（tab键上面那个包裹起来）
var masg = `jsdbjn sdsdxdsa 你好呀`
4.模板字符串
'use script';
let name = "qinjiang";
let age = 3;
let masg = `你好呀，${name}`5.字符串长度不可变
1.3.3布尔值
true false
1.3.4逻辑运算
&& || ! 与或非
比较运算符：
=
== 等于（类型不一样，值一样，也会判断为true）
=== 绝对等于（类型一样，值一样）
1.3.5数组
var array = [1,2,3,4,5]
数组长度
1.array.length可以发生变化
2.indexof 获得下标索引
3.slice（） 截取array的一部分，返回一个新数组，类似于string中的substring
4.push，pop()尾部
push:压入到尾部
pop：弹出尾部的一个元素
5.unshift(),shift()头部
unshift： 压入到头部
shift：弹出头部的一个元素
6.元素反转 reverse
7.排序 sort()
8.concat()
并没有修改数组，只是会返回一个新的数组
9.连接符join
var arr =[1,2,3]
arr.join("-")
打印拼接数组，使用特定的字符串连接
'1-2-3'
10.多维数组
须知
1.NaN===NaN,这个与所有的数值都不相等，包括自己
2.只能通过isNaN（NaN）来判断这个数是不是NaN
3.null 空
4.undefined 未被定义的
5.数组是[]
6.对象是{} 每个对象用逗号隔开 最后一个不用添加分号
严格检查模式
<script>
'use strict';
// 'use strict';严格检查模式 ，要写在javascript的第一行
// 局部变量 建议用let
let i = 1;
</script>1.4对象
若干个键值对
JavaScript中的所有键都是字符串，值是任意对象
1.
var person = {
name:qiannan,
age:8,
hobby:sing
}
//js中对象，{.....}表示一个对象，键值对描述属性 xxx：xxx，多个属性用逗号隔开，最后一个不加逗号
2.动态的删减属性，通过delete
delete person.age true person
3.动态的添加，直接给新的属性添加值就可
4.判断属性值是否在这个对象中，xxx in xxx
"hobby" in person true "toString" in person true
5.判断一个属性是否是这个对象自身拥有的hasOwnProperty
1.5流程控制
1.forEach循环
var age = [1,2,3,458,55,22,556]
age.forEach(function (value) {
console.log(value)
})
就把这个数组打印出来了1.6Map和Set（ES6的新特性）
map
'use script'
var map = new Map([['tom',100], ['kven',56], ['haha', 99]]);
var a = map.get('tom');//通过key获得value
map.set('ni',1000)//新增或修改
console.log(a)Set：无序不重复的集合 可以去重
set.add(2)//添加 set.delete()//删除 console.log(set.has(3))//是否包含某个元素
1.7iterator
遍历数组
var arr = [3,5,8]
for (var x of arr) {
console.log(x)
}
//通过for of 打印值
//for in 下标
遍历Map
var map = new Map([['tom',100] ,['kitty',60]]);
for (let x of map) {
console.log(x)
}遍历set
2.函数
2.1定义函数
方式一：
function abs(x){
if(x>=0){
return x;
}else{
return -x;
}
}一旦执行return代表函数结束，返回结果
如果没有执行return，函数执行完也会返回结果，结构就是undefined
方式二：
function(x)是一个匿名函数，但是可以把结果赋值给abs，通过abs就可以调用函数
var abs = function(x){
if(x>=0){
return x;
}else{
return -x;
}
}2.2调用函数
abs(10)//10 abs(-10)//10 参数问题：JavaScript可以传任意一个参数，也可以不传递
var abs = function(x){
//手动抛出异常判断是否有无参数
if(typeof x!== 'number'){
throw 'is not number';
}
if(x>=0){
return x;
}else{
return -x;
}
}arguments
代表传递进来的所有参数，是一个数组！
var abs = function(x){
console.log("x=>"+x);
for (let i = 0; i < arguments.length; i++) {
console.log(arguments[i])
}
if(x>=0){
return x;
}else{
return -x;
}
}//arguments包含所有的参数，有时候想使用多余的参数进行操作，需要排除已有参数~
rest
获取除了已经定义的参数之外的所有参数~
function aaa (a,b,...rest){
console.log("a=>"+a);
console.log("b=>"+b);
console.log(rest);
}2.3变量的作用域
在javascript中，var定义变量实际是有作用域的
假设在函数体中声明，则在函数体外不可以使用（想用可以研究闭包）
function qj(){
var x =1;
x=x+1;
}
x=x+2;//Uncaught ReferenceError: x is not defined如果两个函数使用了相同的变量名，只要在函数内部，就不冲突
function qj(){
var x =1;
x=x+1;
}
function qj2(){
var x ='A';
x=x+1;
}内部函数可以访问外部函数的变量，反之不行
function qj2(){
var x ='A';
x=x+1;
function qj3(){
var y= x+1;
}
var z= y+1;// 这里报错 z未被定义
}假设在javascript中函数查找变量从自身函数开始，由内向外查找，如果外部存在这个同名的函数变量，内部函数就屏蔽外部函数的变量
变量的作用域：
先声明在定义后调用
全局对象window：
1.默认所有的全局对象都会自动绑定在windows对象下
2.alert()这个函数本身也是一个window变量
3.javascript实际上只有一个全局作用域，任何变量（函数也可以看作变量），假设没有在函数作用范围内找到，就会向外查找，如果还是没找到，报错 RefrenceError
4.常量
const：
const PI= '3.14';
3.方法
3.1定义方法
方法就是把函数放在对象里面，对象里只有两个东西：属性和方法
var kuang={
name:'秦将',
birth:'2020',
age:function (){
var now = new Date().getFullYear();
return now-this.birth;
}
}
//属性
kuang.name//方法 调用一定加括号
age（）
function getAge(){
let now = new Date().getFullYear();
return now-this.birth;
}
var kuang={
name:'秦将',
birth:2020,
age:getAge
}在js中，apply可以控制this的指向
getAge.apply(kuang,[]);//this指向了kuang这个对象，参数为空
4.内部对象
Date
var now = new Date();
now.getFullYear()//年
now.getMonth()//月 0~11
now.getDate()//日
now.getDay()//星期几
now.getMinutes()//分
now.getSeconds()//秒
now.getHours()//时
now.getTime()//时间戳，全国统一
console.log(new Date(1716448028359)) //得到现在的时间 时间戳转为时间
now = new Date(1716448028359)
Thu May 23 2024 15:07:08 GMT+0800 (中国标准时间)
now.toLocaleString()//zz注意，调用的时候用方法
'2024/5/23 15:07:08'JSON
在javascript中一切皆为对象，任何hs支持的类型都可以用JSON来表示，number，string
格式：
1.对象都用{}
2.数组用[]
3.所有的键值对 都是用key：value
4.JSON字符串和JS对象的转化
<script>
var user = {
name:"yang",
age:"3",
sex:"女"
}
//把对象转化为json字符串 {"name":"yang","age":"3","sex":"女"}
var a= JSON.stringify(user);
// 把json字符串转化为对象 参数为字符串
var b = JSON.parse('{"name":"yang","age":"3","sex":"女"}');
</script>5.面向对象原型继承
类：模板 原型对象
对象：具体的实例
var user = {
name:"yang",
age:"3",
sex:"女"
}
var xiaoming= {
name: "xiaoming"
}
//原型对象 指向谁，就可以用谁的属性
xiaoming._proto_ = user;
//name
:
"xiaoming"
_proto_
:
age
:
"3"
name
:
"yang"
sex
:
"女"
[[Prototype]]
:
Object
[[Prototype]]
:
Objecclass对象
定义一个类 属性方法
<script>
class student{
constructor(name) {
this.name = name;
}
hello(){
alert('hello')
}
}
var a= new student("xiaoming")//a.hello()去调用
</script>
class student{
constructor(name) {
this.name = name;
}
hello(){
alert('hello')
}
}
class pupil extends student{
constructor(name,grade) {
super(name);
this.grade = grade;
}
mygrade(){
alert('我是小学生')
}
}
var a= new student("xiaoming")
var b = new pupil("qiannan",1);
-----------------------------------------------------
pupil {name: 'qiannan', grade: 1}
grade
:
1
name
:
"qiannan"
[[Prototype]]//看原生对象
:
student原型链
_proto_:
6.操作BOM对象（重点）
javascript的诞生就是为了能够在浏览器中运行
BOM：浏览器对象模型
1.chrome
2.firebox
3.Opera
4.Safari
5.IE
window
代表浏览器窗口
Navigator
封装了浏览器的信息 navigator.appName
screen 屏幕尺寸
screen.width 1707 screen.height 1067
location(重要)
location代表当前页面的URL信息
host: "localhost:63342
href:"http://localhost:63342/javascript/lesson02/Date.html?_ijt=1ita28msee7
protocol: "http:"
reload: ƒ reload()//刷新网页
//设置新地址
location.assign(https://www.bilibili.com/read/cv5702420/?spm_id_from=333.999.0.0)document
1.代表当前页面 ，HTML DOM文档树
document.title '百度一下，你就知道' document.title="我爱你" '我爱你'
2.获取具体的文档树节点
<dl id="app">
<dt>Java</dt>
<dd>JavaSE</dd>
<dd>JavaEE</dd>
</dl>
<script>
var b = document.getElementById('app');
</script>3.获取cookie
服务器端可以设置：cookie：httpOnly
history
代表浏览器的历史记录
history.back 后退
history.forward 前进
操作DOM对象（重点）
DOM：文档对象模型
浏览器网页就是一个Dom树形结构
1.更新：更新Dom节点
2.遍历dom节点：得到Dom节点
3.删除：删除一个Dom节点
4.添加：添加一个新的节点
要操作一个Dom节点，就必须要先获得这个Dom节点
<h1 id="s">标题1</h1>
<p class="f">这是一个段落</p>
<p> 这也是</p>
<script>
var a1= document.getElementById('s');
var a2= document.getElementsByTagName('h1');
var a3= document.getElementsByClassName('f');
</script>更新节点
操作文本和css
a1.innerText="123" 修改文本的值
'123'
a1.innerHTML="<strong>123</strong>"
'<strong>123</strong>' 可以解析HTML文本标签
a1.style.color="red"//属性使用""字符串包裹
'red' //-转驼峰命名规则删除节点
先获取父节点，在通过父节点删除自己
<div id="a">
<h1>标题一</h1>
<P id="b"> 123</P>
</div>
<script>
var a1= document.getElementById('a')
var b1= document.getElementById('b')
</script>
a1.removechildren(b)
a1.removechildren(a1.children[0])//就把和h1这个标签删了，然后p标签就变成了0删除节点的时候，children下标时刻变化，删除节点的时候要注意
插入节点
一个已有的标签换位置
<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) //追加到后面 这样list就有4个孩子了
</script>创建一个新的标签实现插入
//通过js创建一个新节点
var newp= document.createElement('p');
newp.id='newp';
newp.innerText='hello';
list.appendChild(newp);
//创建一个标签节点（通过这个属性，可以设置任意的值）
var myscript = document.createElement('script');
myscript.setAttribute('type','text/javascript');
//list.appendChild(myscript)7.操作表单
<form action="post">
<p>
<span>用户名</span><input type="text" id="username" required>
</p>
<p>
<span>性别</span>
<input type="radio" name="sex" value="box" id="box1">男
<input type="radio" name="sex" value="girl" id="girl1">女
</p>
<input type="submit">
</form>
<script>
var a =document.getElementById('username')
//获取或者修改输入框的值
// a.value 只能取到当前的值
var b= document.getElementById('box1')
var c= document.getElementById('girl1')
//a.checked 查看返回的结果，如果为true就会被选中
//如果设置a.checked=true 就会让哪个被选中
</script>表单加密MD5加密
<form action="post">
<p>
<span>用户名</span><input type="text" id="username" name="username">
</p>
<p>
<span>密码</span><input type="password" id="password" name="password">
</p>
<!-- onclick 表示被点击的时候绑定事件-->
<button type="submit" onclick="aaa()">提交</button>
</form>
<script>
function aaa(){
var a= document.getElementById('username');
var b = document.getElementById('password');
console.log(a.value);
console.log(b.value);
b.value='***';
}
</script>8.jQuery库
里面存在大量的javascript函数
获取jQuery
公式： $(selector 选择器就是css的选择器).action()
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.1.min.js"></script> 引入jQ库
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.1.min.js"></script>//引入的jq库
</head>
<body>
<a href="" id="a">点我</a>
<script>
$("#a").click(function () {
alert('hello')
})
</script>
<script>
$('p').click();//标签选择器
$('#id1').click();//id选择器
$('.class1').click();//类选择器
</script>
学习文档站：jQuery API 1.11 中文文档 | jQuery API 在线手册 (yanzhihui.com)
jQuery API 中文手册 (github.net.cn)
事件
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.0.min.js"></script>
<style>
#divMove{
width:500px;
height: 200px;
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>操作dom
节点文本操作
<script>
$('#text-ul li[name=python]').text()//获得值
$('#text-ul li[name=python]').text("设置值")
$('#text-ul').html()获得样式
$('#text-ul').html('<strong>123</strong>>')修改
</script>
css操作
$('.js').css("color","red")
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
