JavaScript 简介
JavaScript 是什么
如需在 HTML 页面中插入 JavaScript，请使用 <script> 标签
<script> 和 </script> 会告诉 JavaScript 在何处开始和结束
<script> 和 </script> 之间的代码行包含了 JavaScript
在浏览器页面 Fn + F12 ——>
检查元素、修改样式、调试代码、网络分析、控制台输出等浏览器开发者工具功能
console.log() 打印日志
变量
JavaScript 是⼀⻔动态弱类型语⾔，变量可以存放不同类型的值(动态)
随着程序的运⾏, 变量的类型可能会发⽣改变
var a = 10;
var b = "10";
console.log(a==b);
console.log(a===b);
== ⽐较相等(会进⾏隐式类型转换)=== ⽐较相等(不会进⾏隐式类型转换)
数据类型
<script>
var a = 10;
console.log("a" + typeof a);
a = "你好";
console.log("a" + typeof a);
let b = 20;
console.log("b" + typeof b);
var c = true;
console.log("c" + typeof c);
var d;
console.log("d" + typeof d);
</script>
JavaScript对象
数组
1. 如果下标超出范围读取元素, 则结果为 undefined2. 不要给数组名直接赋值, 此时数组中的所有元素都没了相当于本来 arr 是⼀个数组, 重新赋值后变成字符串了
var a = new Array();
a[0] = 1; //增
a[1] = "你好";
console.log(a);
console.log(a[1]); //查
a[0] = 2; //改
console.log(a);
var b = [1,2,"你好啊",true];
console.log(b);
b.splice(2,1); //删
console.log(b);
b[100] = 3;
b['h'] = "hello"
console.log(b);
函数
函数定义并不会执⾏函数体内容, 必须要调⽤才会执⾏. 调⽤⼏次就会执⾏⼏次调⽤函数的时候进⼊函数内部执⾏, 函数结束时回到调⽤位置继续执⾏. 可以借助调试器来观察函数的定义和调⽤的先后顺序没有要求. (这⼀点和变量不同, 变量必须先定义再使⽤)实参和形参之间的个数可以不匹配. 但是实际开发⼀般要求形参和实参个数要匹配1. 如果实参个数⽐形参个数多, 则多出的参数不参与函数运算2. 如果实参个数⽐形参个数少, 则此时多出来的形参值为 undefined此时形如 function() { } 这样的写法定义了⼀个匿名函数, 然后将这个匿名函数⽤⼀个变量来表示后⾯就可以通过这个 c 变量来调⽤函数了
var a = function add(x,y){
console.log(x+y);
}
console.log(typeof add);
console.log(typeof a);
function add(x,y){
console.log(x+y);
}
add(1,2);
var b = function add(x,y){
console.log(x+y);
}
b(1,2);
var c = function (x,y){
console.log(x+y);
}
c(1,2);
c(1);
c(1,2,3);
c("你好");
对象
在 JS 中, 字符串, 数值, 数组, 函数都是对象每个对象中包含若干的属性和⽅法• 属性: 事物的特征• ⽅法: 事物的⾏为
1. 使⽤ 字⾯量 创建对象 [常⽤] 使⽤ { } 创建对象• 使⽤ { } 创建对象• 属性和⽅法使⽤键值对的形式来组织• 键值对之间使⽤ , 分割. 最后⼀个属性后⾯的 , 可有可⽆• 键和值之间使⽤ : 分割• ⽅法的值是⼀个匿名函数/ 1. 使⽤ . 成员访问运算符来访问属性 `.` 可以理解成 " 的 "console . log (student.name);// 2. 使⽤ [ ] 访问属性 , 此时属性需要加上引号console . log (student[ 'height' ]);// 3. 调⽤⽅法 , 别忘记加上 ()student. sayHello ();2. 使⽤ new Object 创建对象var student = new Object (); // 和创建数组类似student.name = " 明云 " ;student.height = 175 ;student[ 'weight' ] = 170 ;student.sayHello = function () {console . log ( "hello" );}console . log (student.name);console . log (student[ 'weight' ]);student. sayHello ();注意, 使⽤ { } 创建的对象也可以随时使⽤ student.name = "明 "; 这样的⽅式来新增属性3. 使⽤ 构造函数 创建对象function 构造函数名 ( 形参 ) {this . 属性 = 值 ;this . ⽅法 = function ...}var obj = new 构造函数名 ( 实参 );注意:• 在构造函数内部使⽤ this 关键字来表⽰当前正在构建的对象• 构造函数的函数名⾸字⺟⼀般是⼤写的• 构造函数的函数名可以是名词• 构造函数不需要 return• 创建对象的时候必须使⽤ new 关键字this 相当于 "我"
var a = {}; //创建空对象
var student = {
name:'明云',
height:175,
weight:170,
sayHello:function(){
console.log("hello");
}
};
//获取对象的属性
console.log(student.height);
console.log(student['weight']);
//添加属性
student.ago = 18;
student['gender'] = "男";
console.log(student);
a.age = 13;
console.log(a);
JQuery
jQuery是⼀个快速、简洁且功能丰富的JavaScript框架
引⼊依赖
在使⽤jQuery CDN时，只需要在HTML⽂档中加⼊如下代码
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
网站地址 jQuery CDN
JQuery 语法
jQuery 语法是通过选取 HTML 元素, 并对选取的元素执⾏某些操作
$(selector).action()
JQuery 选择器
<p><a href="https://www.sogou.com/">搜狗</a></p>
<img src="D:\前端代码\微信图片_20240524141849.jpg" width="200px"/>
<script src="D:\前端代码\JQrery.js"></script>
<script>
//获取元素属性
var a = $("p a").attr("href");
console.log(a);
$("p a").attr("href","http://www.baidu.com");
// $("img").attr("width","500px");
$("#test").click(function(){
$("img").attr("width","500px");
});
JQuery事件
操作元素
text() 设置或返回所选元素的⽂本内容
html() 设置或返回所选元素的内容（包括 HTML 标签)val() 设置或返回表单字段的值这三个⽅法即可以获取元素的内容, ⼜可以设置元素的内容有参数时, 就进⾏元素的值设置, 没有参数时, 就进⾏元素内容的获取
attr() ⽅法⽤于获取属性值
css() ⽅法设置或返回被选元素的⼀个或多个样式属性1. append() : 在被选元素的结尾插⼊内容2. prepend() : 在被选元素的开头插⼊内容3. after() : 在被选元素之后插⼊内容4. before() : 在被选元素之前插⼊内容5. remove() : 删除被选元素（及其⼦元素）6. empty() : 删除被选元素的⼦元素
<ol>
<li>List1</li>
<li>List2</li>
<li>List3</li>
</ol>
<script>
$("ol").append("<li>append</li>");
$("ol").prepend("<li>prepend</li>");
$("ol").before("before");
$("ol").after("after");
</script>
<ol>
<li>List1</li>
<li>List2</li>
<li>List3</li>
</ol>
<div id="div1">我是一个div</div>
<button id="remove">删除div</button>
<button id="empty">清空ol</button>
<script>
$("#remove").click(function(){
$("#div1").remove();
// $("div").remove();
});
$("#empty").click(function(){
$("ol").empty();
})
综合案例
