JS的作用域
作用域其实就是作用范围。JS的作用域主要是说变量的作用范围。
JS的作用域从大类分的话是两种：
-
局部作用域：在局部作用域声明的变量叫局部变量。它的作用是局部的，在函数里声明的变量，只能函数内部可以访问，在块作用域声明的变量，只能在块里访问。局部变量是私有的，外部是访问不了的。局部作用域又可以分为函数作用域和块作用域。
-
全局作用域: 在全局作用域声明的变量叫全局变量。它的作用是全局的，网页里所有的脚本和函数都能访问它。
不同函数中可以使用相同的变量名。
注意：函数的参数也属于局部变量。
块作用域
在JS中，代码可以放到{}里，我们称为代码块。一个{}就是一个块。
我们声明变量，之前一直用关键词var。用var声明的变量是没有块作用域的。即使在块里声明了变量，外部也是可以访问到的。比如：
{
var a = 10;
}
alert(a);//输出10
声明变量
声明变量的关键词有三个：var、let、const。
它们三个有什么区别呢？后面细讲它们三个的区别。
- const 定义常量的
- let: 作用和var类似, 有作用域的概念
- var 特点:没有作用域
我们可以通过 let、const 关键词声明拥有块作用域的变量。这样，我们在块里声明的变量，外部是访问不到的。比如：
{
let a = 10;
const b = 20;
}
alert(a);//此处会报错 a is not defined
alert(b);//此处会报错 b is not defined
变量的生命周期
全局变量在声明时被创建，在关闭页面时被删除。
局部变量在函数调用时创建，在函数完成后被删除。
自动全局
如果给一个没有声明的变量赋值，这个变量会成为全局变量，即使变量是在函数里赋值的。比如：4
<p id="demo"></p>
<script>
function test() {
a = "hello";
}
test();
document.getElementById("demo").innerHTML = a; //输出hello
</script>
网页中，全局作用域是window，所有的全局变量都属于window对象。比如：
<p id="demo"></p>
<script>
var a = "hello";
document.getElementById("demo").innerHTML = window.a; //输出hello
</script>
注意：我们应该尽量避免使用全局变量。
因为window对象有一套自己的属性和方法。你的全局变量或函数能够覆盖 window 自带的变量或函数。window 自带的变量或函数也会覆盖你的全局变量和函数。这样，就容易引起冲突。比如：
var name = 10;
console.log(typeof name);//输出string
我们声明的全局变量name赋值一个数值10，它的数据类型应该是number才对，为什么会是string呢？
这是因为window对象有一个自带的name属性，它的类型是字符串。你声明的全部变量名和window自带的属性名冲突了。
要想知道window自带的属性和方法有哪些，我们可以在浏览器的开发者模式里的Console标签里输入window按回车，就会输出window所有的属性和方法。如下图：
window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
在Jquery中$ (function(){ })和 $ (document).ready(function(){ })的效果是一样，是在DOM树加载完成之后（DOM树加载完不代表全部资源加载完，例如图片，音频和视频等还没加载）就会执行。所以$ (document).ready(function(){ })是比window.onload要先执行的。
JS的函数的定义
方式一
function 函数名(参数列表){
函数体
}
定义无参函数
function a(){
var a = [1,2,3,4,5]; //定义数组
var sum = 0; //定义变量
for (var i = 0; i < a.length; i++){
if(a[i]%2==0){
sum+=a[i];
}
}
alert(sum);
}
a();//函数调用
定义含参函数
function b(x,y){
alert(x+y);
}
b(1,"2");//函数调用
b(1,2);//函数调用
int + string 会转成字符串拼接
int+int 算术运算
方式二
var 函数名称 = function([参数列表]){
函数体
}
定义无参函数
var fn2 = function(){
alert(100);
}
fn2(); //函数调用
定义含参函数
var fn3 = function(x,y){
alert(x*y);
}
fn3(0.32,100);//函数调用
定义有返回值含参函数
var e = function(x,y){
return x-y;
}
alert(e(1,2))
alert("函数返回值:"+ e(1.1,10.9) ); //函数调用
JS的对象的定义
创建对象方式一
//创建类
function Person(){};
//声明对象
var p = new Person();
//定义属性
p.name = "张飞";
p.age = 18;
p.loc = "蜀国";
console.log(p);//Person {name: "张飞", age: 18, loc: "蜀国"}
//定义方法
p.eat = function(){//创建类方法
console.log("吃猪肉");
}
console.log(p.eat());
上面展示了js的强大！js的牛X之处就在于，它的属性可以边写边创建，非常灵活，而java不行，必须先定义。
创建对象方式二
var p2 = {
//绑定了属性
//JS属性定义，名称带引号不带引号都行
pname:"李四",
"pname1":"李四",
"page":100,
//绑定了函数
"psay":function(a){
console.log(this.pname+this.page);
}
}
console.log(p2);
p2.psay(10);
JQuery
jq语法：$(选择器).事件
JQuery 的基础用法
<html>
<head>
<meta charset="utf-8">
<title>初识jq</title>
<script src="../js/jquery-3.6.0.min.js"></script>
<script>
function fun(){
//dom获取元素，点击p标签，修改文字
console.log(
window.document.getElementsByTagName("p")[0].innerHTML = "我变了。。。") ;
//jq获取元素--jq语法：$(选择器).事件
//$("p").hide();//隐藏元素
$("p").text("我变了23333333")//修改文字
}
</script>
</head>
<body>
<p onclick="fun()">你是p</p>
</body>
</html>
JQuery的文档就绪
什么时候该使用文档就绪事件函数？
如果在获取元素时，获取元素的代码执行的时机（时间）比元素本身加载的时间还要早，如果元素还没有加载到就获取，必然是获取不到的！
将获取元素的代码放在文档就绪事件函数中，等浏览器加载完整个网页后，文档就绪事件函数才会执行，此时所有的元素都被加载过了，再获取任何元素都能获取到！
<html>
<head>
<meta charset="utf-8">
<title>测试jq的文档就绪</title>
<script src="../js/jquery-3.6.0.min.js"></script>
</script>
<script >
//修改h1的内容
// 方式1:还没加载到h1元素,a是null,调用null的资源f12时会出问题
window.document.getElementsByTagName("h1")[0].innerHTML = "我变了！！！";
// 方式2: 使用jQuery的文档就绪函数,整个DOM都加载完了才执行
//jQuery语法:$(选择器).action{ } ;
$(document).ready(
function(){
console.log( document.getElementsByTagName("h1")[0].innerHTML = "我变了！！！");
}
);
// 方式3: 简写
$(function(){
//console.log( document.getElementsByTagName("h1")[0].innerHTML = "我变了！！！");
$("h1").text("我变了啊啊啊啊啊！！！")
});
</script>
</head>
<body>
<h1>我是h1</h1>
</body>
</html>
JQuery的Ajax
<html>
<head>
<meta charset="utf-8">
<title>添加数据，连接后台入库</title>
<script src="js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
function fun(){
$.ajax({
type:"get" ,//要使用的请求方式
url:"http://localhost:8080/car/set",//要使用的请求路径
data:{
"id":"488",
"brand":"法拉利",
"type":"CaymanT",
"color":"红色",
"price":"641000.0"
}, //要拼接的数据
dataType: "jsonp",//数据类型
success: function(data){ //成功时的方案
console.log("添加成功！")
console.log(data);
console.log(data.id);
}
error: function(data){ //失败时的方案
}
})
}
</script>
</head>
<body>
<button onclick="fun()" type="button">点我传输数据</button>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用户列表demo</title>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
$(function(){
var url= "http://localhost:8090/getAll"
var data = {id:100,name:"tom"}
$.get(url,data,function(data){
for(user of data){
//将当前对象的属性动态添加到页面上
var tr =
`<tr align="center">
<td>${user.id}</td>
<td>${user.name}</td>
<td>${user.age}</td>
<td>${user.sex}</td>
<td>
<button οnclick="update()">修改</button>
<button οnclick="deletedate(${user.id})">删除</button>
</td>
<tr>`
$("#tab1").append(tr)
}
})
})
// function update(obj,uid){
// $.ajax({
// url: "http://localhost:8090/deletedate",
// type: "get",
// data: {user:obj},
// success: function(data){
// console.log(data)
// },
// error: function(data){//浏览器的返回值
// console.log(data)
// },
// async: true //默认为true 异步 false 同步调用
// })
// }
function deletedate(uid){
$.ajax({
url: "http://localhost:8090/deletedate",
type: "get",
data: {id:uid},
success: function(data){
location.reload();
},
error: function(data){//浏览器的返回值
console.log(data)
},
async: false //默认为true 异步 false 同步调用
})
}
</script>
</head>
<body>
<table id="tab1" border="1px" align="center" width="80%">
<tr>
<td colspan="5" align="center">
<h1>用户列表</h1>
</td>
</tr>
<tr>
<td align="center">编号</td>
<td align="center">姓名</td>
<td align="center">年龄</td>
<td align="center">性别</td>
<td align="center">操作</td>
</tr>
</table>
</body>
</html>
5700
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
