🎉🎉🎉点进来你就是我的人了
博主主页：🙈🙈🙈戳一戳,欢迎大佬指点!欢迎志同道合的朋友一起加油喔🤺🤺🤺
目录
🍋五. JavaScript 的对象和 Java 的对象的区别
2. JavaScript 对象不区分 “属性” 和 “方法”
3. JavaScript 对象没有 private / public 等访问控制机制.
🥕一. 初识JavaScript
JavaScript简称JS，是一个脚本语言，通过解释器运行，主要在客户端（浏览器）运行，现在也可以基于node.js在服务端运行
🍀JavaScript能做的事情：
- 网页开发（复杂的特效和用户交互）
- 网页游戏开发
- 服务器开发（基于node.js）
- 桌面程序开发（如VSCode）
- 手机app开发
🍁JavaScript与HTML和CSS之间的联系：
HTML：网页的结构（骨架）
CSS：网页的样式（皮）
JavaScript：网页的功能（魂）
🍃JavaScript的组成：
- ECMAScript：JavaScript语法
- DOM：页面文档对象模型，对页面的元素进行操作
- BOM：浏览器对象模型，对浏览器窗口进行操作
🌴JS是一个动态类型语言,JS是一个弱类型语言
- 一个变量在程序运行过程中,类型可以发生改变,这就是动态类型 (js,python,php...)
- 一个变量在程序运行过程中,类型学不能发生改变,这就是静态类型(c,java,c++,go..)
- 可以发生隐式类型转换的就是弱类型语言
- 不可以发生隐式类型转换的就是强类型语言
🍈二. JavaScript的书写格式
- 行内式：直接嵌入到html元素内部
- 内嵌式：写到script标签中
🧂注意：script标签可以写在body标签中，也可以写在body标签外,建议放在body标签底部,也就是</body>之前
- 外部式：写到单独的.js文件中
🧂注意：使用的工具js的时候通常写在head标签中
- 注释：
🥕单行注释：//
🥕多行注释：/* */
//注释
/*
注释1
注释2
*/🧂注意：多行注释/**/不能嵌套
- 输入(prompt)：弹出一个输入框
<script> prompt("请输入姓名："); prompt("请输入年龄："); </script>
- 输出(alert)：弹出一个警示对话框，输出结果
<script> alert("姓名年龄输入完毕！"); </script>
- 输出(console.log)：在控制台打印一个日志
<script>
console.log("这是一条日志");
</script>
重要概念：
🥕console是一个js中的对象
🥕表示对象中某个属性或者方法，可以理解成“的”
🥕console.log就可以理解成：使用“控制台”对象“的”log方法
🥭三. JavaScript的基础语法
🌴1. 变量的用法
🥕创建变量：
<script>
var a = 10;
var name = "张三";
let flag = true;
</script>
- var与let都可以创建变量，他俩只表示这是一个变量，
- 而不指定具体的类型，具体类型由后面具体的赋值确定
- var与let的区别是作用域不同，var定义的是全局变量,let定义的是局部变量
- 建议使用let
🥕使用变量：
<script> var a = 10; var name = "张三"; let flag = true; a = 20; //修改变量的值 console.log(name); //控制台打印变量 </script>👁️🗨️代码示例：创建变量接收输入，然后再输出
var name = prompt("请输入姓名："); var age = prompt("请输入年龄："); var gender = prompt("请输入性别："); alert("姓名："+name+"\n"+"年龄："+age+"\n"+"性别："+gender);
+ 表示字符串的拼接
\n 表示换行
🥕理解动态类型
JS的变量类型是程序运行过程中才确定的，随着程序的运行，变量的类型可能会发生改变
var a = 10; var name = "小花"; a = "张三"; name = 10;
🌾2. 基本数据类型
🥕Number数字类型
JS不区分整数和浮点数，统一用数字类型来表示
可以用不同的进制表示：
var a = 10; //十进制 var b = 07; //八进制，以0开头 var c = 0xa; //十六进制，以0x开头 var d = 0b10;//二进制，以0b开头特殊的数字值：
- Infinity：无穷大，大于任何数字，表示数字已经超过了JS能表示的范围
- -Infinity：负无穷大，小于任何数字。表示数字已经低于了JS能表示的范围
- NaN:表示当前的结果不是一个数字
var max = Number.MAX_VALUE; console.log(max*2); //得到Infinity console.log(-max*2);//得到-Infinity console.log("haha"-10);//得到NaN
注意：
- 负无穷大和无穷小不是一回事，无穷小是无限趋近0，值为1/Infinity
- “haha”-10得到NaN，但是“haha”+10不是NaN，而是进行字符串拼接得到“haha10”
- 可以使用isNaN判断是不是一个数字：
console.log(isNaN(10)); //true console.log(isNaN("haha"-10)); //false
🥕String字符串类型
字符串字面量需要用单引号或者双引号引起来
var a = "aaa"; var b = 'bbb'; var c = ccc; //运行出错
如果字符串中已经包含了引号咋办？
var msg = "my name is 'zhangsan'"; //正确，双引号包裹单引号 var msg = 'my name is "zhangsan"'; //正确，单引号包裹双引号 var msg = "my name is \"zhangsan\""; //正确，使用转义字符，\"表示内部的引号 var msg = "my name is "zhangsan""; //出错转义字符：
- \n，表示换行
- \\，表示\
- \'，表示'
- \"，表示"
- \t ，表示制表符
求字符串的长度：使用String的length属性即可
var s = "haha"; console.log(s.length); //4 var c = "hello"; console.log(c.length); //5
字符串拼接：使用+进行拼接
var a = "hello"; var b = "word"; console.log(a+b);//helloword
数字和字符串也可以拼接
var a = "my age is "; var b = 16; console.log(a+b); //my age is 16
🥕Boolean布尔类型
表示真true或假false，参与运算时当作1和0
var a = true; var b = false; console.log(2+a+b);//3
注意：实际开发不这么用
🥕undefined未定义的数据类型
如果一个变量没有被初始化，就是undefined类型，结果也是undefined
var a; console.log(a);//undefined
undefined和字符串相加，结果为字符串拼接的结果
var a; console.log(a+"haha"); //undefinedhaha
undefined和数字相加，结果为NaN，表示不是一个数字类型
var a; console.log(a+10);//NaN
🥕null空值类型
null表示当前变量为一个“空值”
var a = null; console.log(a+10); //10 console.log(a+"haha"); //nullhaha
注意：null和undefined都为取值非法情况，但是侧重不一样，null表示当前的值为空（相当于有一个空盒子），undefined表示当前变量未定义（相当于连盒子都没有）
🌵3. 运算符
JavaScript中的运算符和Java中的运算符基本相同，此处不详细介绍
🥕typeof运算符
使用typeof操作符可以用来检查一个变量的数据类型。
使用方式：
typeof 数据示例代码：
console.log(typeof 123); console.log(typeof "Hello,World!"); console.log(typeof true); console.log(typeof undefined); console.log(typeof null);
🥕算数运算符：
- +
- -
- *
- /
- %
🥕赋值运算符和复合赋值运算符：
- =
- +=
- -=
- *=
- /=
- %=
🥕自增自减运算符：
- ++
- --
🥕比较运算符：
- <
- >
- <=
- >=
- ==（会进行隐式类型转换）
- !=
- ===（不会进行隐式类型转换）
- !==
==（双等号）是一个宽松相等操作符。当使用==比较两个值时，如果它们的类型不同，JavaScript 会尝试进行类型转换以使两个值具有相同的类型，然后再进行比较。这可能导致一些非预期的结果，例如：
'5' == 5; // true，因为字符串 '5' 被转换为数字 5
0 == false; // true，因为数字 0 被转换为布尔值 false
null == undefined; // true，null 和 undefined 被认为是宽松相等的
===（三等号）是一个严格相等操作符。当使用===比较两个值时，它们的类型和值必须完全相同，才会被认为是相等的。没有进行任何类型转换：
'5' === 5; // false，因为它们的类型不同（字符串和数字）
0 === false; // false，因为它们的类型不同（数字和布尔值）
null === undefined; // false，因为它们的类型不同（null 和 undefined）
总之，== 在比较之前会尝试进行类型转换，而 === 不会。为了避免可能的错误和意外结果，推荐在 JavaScript 代码中使用严格相等操作符 === 进行比较。
🥕逻辑运算符：用于计算多个boolean表达式的值，此处与Java中略有不同
- &&
- ||
- !
不同：Java中严格要求表达式两边为boolean类型，但是JavaScript中可以为数值类型
对于数值型，哪个数值能确定最终表达式的值，结果就为哪个值
👁️🗨️比如：
2&&3，3才确定了最终为true，结果就为3
3&&0，0确定了最终为false，结果为0
2||3，2就可以确定最终为true，结果为2
0||3，3确定了最终结果为true，结果为3
console.log(2&&3); //3
console.log(3&&0); //0
console.log(2||3); //2
console.log(0||3); //3
🥕位运算符：
- &
- |
- ~
- ^
🥕移位运算符：
- <<
- >>
- >>>
🌴4. 条件语句
🥕if语句
与Java中用法相同
👁️🗨️示例：判断一个数是奇数还是偶数
var num = 10; if(num == 1){ console.log(num+"既不是偶数也不是奇数"); }else if(num % 2 == 0){ console.log(num+"是偶数"); }else { console.log(num+"是奇数"); }
🥕三元表达式
与Java用法相同
👁️🗨️示例：将一个boolean表达式的值取反
var a = true; a = a?false:true; console.log(a);
🥕switch分支
与Java用法相同
👁️🗨️示例：用户输入一个数，判断是星期几
var day = prompt("请输入一个数字："); switch(parseInt(day)){ //day为一个字符串，必须转为数字 case 1: alert("星期一"); break; case 2: alert("星期二"); break; case 3: alert("星期三"); break; case 4: alert("星期四"); break; case 5: alert("星期五"); break; case 6: alert("星期六"); break; case 7: alert("星期天"); break; default: alert("输入有误"); }
🌾5. 循环语句
🥕while循环
与Java用法相同
👁️🗨️示例：打印1到10
var num = 1; while(num <= 10){ console.log(num); num++; }
🥕for循环
与Java用法相同
👁️🗨️示例：计算5的阶乘
var result = 1; for(var i = 1;i <= 5;i++){ result *= i; } console.log(result);
🥕continue与break
与Java的用法相同，continue跳出本趟循环，继续执行下一次循环，break结束整个循环
🌵6. 数组
🥕数组的创建
- 使用new关键字创建
var arr = new Array();- 直接使用 [ ] 创建 (常用方式)
var arr = [];- 使用字面量方式创建
var arr = [1,2,3,"hehe",5,true];👁️🗨️注意：
JavaScript使用[]包裹数组元素，而不是{}
JavaScript不要求数组中是同一类型元素
🥕遍历数组的三种方式
let arr = ['咬人猫','兔总裁','阿叶君'];
//for循环遍历
for(let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
for(let i in arr) {
//此处i是数组下标
console.log(arr[i]);
}
for(let elem of arr) {
//此处elem是数组元素
console.log(elem);
}🥕获取数组元素
使用下标方式获取数组元素，从0开始
var arr = [1,2,3,"hehe",5,true]; console.log(arr[0]); console.log(arr[3]); console.log(arr[5]);
👁️🗨️注意：如果下标超过数组读取范围，则结果为undefined
console.log(arr[100]);
🥕新增数组元素
- 通过修改length新增
var arr = [1,2,3,4]; arr.length = 6; console.log(arr[5]); //新增元素默认值为undefined console.log(arr);
- 使用push进行元素追加
👁️🗨️示例：将一组数的奇数放到一个新数组中
var arr = [1,2,3,4,5,6,7,8,9]; var newArr = []; for(var i = 0;i < arr.length;i++){ if(arr[i] == 1){ continue; } if(arr[i] % 2 != 0){ newArr.push(arr[i]); } } console.log(newArr);
🥕删除数组中的元素
使用splice方法删除数组中的元素，第一个参数表示从下标为几开始删除，第二个参数表示要删几个
var arr = [1,2,3,4,5]; arr.splice(2,2);//删除3，4 console.log(arr);//打印1，2，5
splice方法相当于一个万能方法
常见方法：
| 方法 | 描述 |
|---|---|
| concat() | 连接数组 |
| pop() | 删除数组最后一个元素 |
| push() | 向数组末尾添加一个元素 |
| shift() | 删除并返回数组第一个元素 |
| sort() | 对数组元素排序 |
| toString() | 将数组转为字符串 |
| toSource() | 返回该对象源代码 |
| splice() | 删除元素 |
🌴7. 函数
🥕函数的创建格式：
function 函数名 (参数列表) {
函数体;
return 返回值;
}👁️🗨️示例：创建一个可以实现两数和的函数
function add1(a,b){ //带有返回值的函数
return a+b;
}
function add2(a,b){ //没有返回值的函数
console.log(a+b);
}
console.log(add1(1,2));
add2(3,4);
👁️🗨️注意：
- 实参和形参的个数可以不匹配, 但是实际开发一般要求形参和实参个数要匹配
- 实参个数比形参个数多，多出的不参与运算
- 实参个数比形参个数少，多出的形参值为undefined
function sum(a,b,c){
console.log(a+b);
}
sum(10,20,30); //10+20 = 30
sum(10); //10+undefined = NaN
另一种函数创建的格式：
var add = function(){
var sum = 0;
for(var i = 0;i < arguments.length;i++){
sum += arguments[i];
}
return sum;
}
console.log(add(10,20,30));//60
console.log(add(1,2,3));//6
console.log(typeof add);//function说明：
- function(){}定义了一个匿名函数，用变量来表示，后 面就可以用这个变量来调用函数了
- arguments为传入的参数，将参数作为一个数组
- typeof add 输出的是add这个变量的类型
🥕作用域
- 全局作用域：在整个script标签，或者单独的js文件中生效
- 局部作用域/函数作用域：在函数内部生效
var a = 10;//全局变量
function test (){
var a = 20;//局部变量
console.log(a);//优先找自己的局部变量，若没有则找全局变量
}
test();
注意: 创建变量如果不写var或者let，得到的是一个全局变量
function test(){
a = 10;
b = 20;
}
test();
console.log(a);
console.log(b);
🥕var与let的区别
作用域不同,let定义的是局部变量
function test(){
var a = 10;
let b = 20;
}
console.log(b); //报错
console.log(a); //报错
👁️🗨️说明：在函数中var与let定义的变量，在函数外边都不能使用
while(1 > 0){
var a = 10;
let b = 20;
break;
}
console.log(a);
console.log(b);
👁️🗨️说明：在条件/循环中var定义的变量外边还能用，let定义的变量外边用不了
🌵8. 对象
JavaScript与Java中的对象概念差不多，只是具体使用语法差别较大
🥕对象的创建
- 使用{}创建对象：
var student = {
name: "张三",
age: 23,
sex: "男",
play: function(){
console.log("正在玩耍");
}
};👁️🗨️注意：也可以使用student.name = "xxx";这样的方式来增加属性
student.height = 230; //新增了height属性🧂属性和对应的值用键值对的形式来组织
🧂键值对之间用“，”分割，最后一个属性“，”可有可无
🧂键和值用: 分割
🧂方法的值是一个匿名函数
👁️🗨️对象属性和方法的使用：
console.log(student.name);
console.log(student.age);
student.play();//调用方法要加()
- 使用new Object()创建对象：
var student = new Object();
student.name = "牛魔王";
student.age = 500;
student.play = function(){
console.log("正在吃唐僧肉");
}
console.log(student.name);
console.log(student.age);
student.play();
- 使用构造函数创建对象：
function 构造函数名(参数列表){
this.属性 = 值;
this.方法 = function...
}
var obj = new 构造函数名(实参);👁️🗨️示例：创建几个猫咪对象
function Cat(name,color,type,sound){
this.name = name;
this.color = color;
this.type = type;
this.miao = function(){
console.log(sound);
}
}
var nuomi = new Cat("糯米","白色","波斯猫","喵喵~");
var wanzi = new Cat("丸子","灰色","中华田园猫","咪咪");
var tuanzi = new Cat("团子","黑色","狸猫","喵呜");
console.log(wanzi);
nuomi.miao();
👁️🗨️注意：
🧂在构造方法中使用this关键字表示当前正在构建的对象
🧂构造函数的名字一般是大写的
🧂构造函数不需要return
🧂创建对象的时候要使用new关键字
🥕理解 new 关键字
new 的执行过程:
- 先在内存中创建一个空的对象 { }
- this 指向刚才的空对象(将上一步的对象作为 this 的上下文)
- 执行构造函数的代码, 给对象创建属性和方法
- 返回这个对象 (构造函数本身不需要 return, 由 new 代劳了)
参考new 运算符 - JavaScript | MDN
🌴四. WebAPI
什么是WebAPI
前面学习的 JS 分成三个大的部分 ：ECMAScript: 基础语法部分；DOM API: 操作页面结构；BOM API: 操作浏览器; WebAPI 就包含了 DOM + BOM.
DOMAPI
①什么是DOM？9
DOM 全称为 Document Object Model（文档指的是界面显示的部分，对象指的是js中代码操作的部分，通过这两个配合使界面产生改变）
DOMAPI是js提供给浏览器的一组用来操作页面元素的API。主要是进行以下三个部分元素的操作。
1.获取元素（.querySelector/querySelectorAll）
2.事件处理（.onclick）
3.操作元素内容（.innerHTML）
②什么是DOM树？
一个页面的结构是一个树形结构 , 称为 DOM 树。类似于我们前面学的文件的存储路径，也可以通俗地说成家谱。下面我们列出一个页面结构的DOM树的结构，便于理解。
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
4.1获取元素
①什么是获取元素：
这部分工作类似于 CSS 选择器的功能。要想操作页面上的元素，就需要先拿到对应的js对象。
②怎么获取元素呢？（这里只介绍下面这两种相对重要的API）
我们常使用querySelector/querySelectorAll来实现。这两个元素其实是一个document这样的对象的属性。（当一个页面加载好之后，就会自动生成一个全局变量，叫做document），在这里面就会有一些属性和方法，通过这些属性和方法来操作页面的内容
③演示querySelector:(核心代码如下)
<body> <div class="one"> hello </div> <div id="two"> hello1 </div> <ul> <li>aaa</li> </ul> <script> //基于选择器选择元素，方便进行后续的操作。而这里querySelector的参数，就是一个css的选择器（id选择器，类选择器等等） //这个变量名是任意的，只不过对象中填写的值要以div中的为主 let obj=document.querySelector('.one'); let syb=document.querySelector('#two'); let div=document.querySelector("ul li"); //类选择器 console.log(obj); //id选择器 console.log(syb); //后代选择器 console.log(div); </script> </body>注意！！！
当querySelector的参数的选择器，匹配到了多个元素的时候，这个时候返回的对象是匹配的第一个元素，演示如下：
要是，我们想所有的元素都被选中，那么我们就应该用querySelectorAll。
④演示querySelectorAll:(核心代码如下)
body> <ul> <li>aaa</li> <li>bbb</li> </ul> <script> //基于选择器选择元素，方便进行后续的操作。而这里querySelector的参数，就是一个css的选择器（id选择器，类选择器等等） //这个变量名是任意的，只不过对象中填写的值要以div中的为主 let div=document.querySelectorAll("ul li"); //后代选择器 console.log(div); </script> </body>显示结果如下：
这个时候，是以数组的方式对结果进行呈现。但是准确地来说，它返回的不是一个真正意义上的原生数组，而是一个对象，只不过这个对象有length，也能够通过下标来访问内部元素。这样的对象使用起来和数组非常相似，我们称其为“伪数组”。
4.2事件初识
①什么是事件？
在js中，很多代码都是通过事件来实现的。事件就是浏览器对于用户的操作的一个统称（准确的说,事件也不一定全是用户操作产生的,但是大部分是的）。
通俗的举个例子，我们使用鼠标进行移动光标是一个事件，我们使用鼠标在页面的某个位置进行点击，也是一个事件等待。其中js主要的工作就是在不同的事件中进行不同的处理。
事件 说明 onclick 鼠标单击事件 onmouseover 鼠标移入事件 onmouseout 鼠标移出事件 onmousedown 鼠标按下事件 onmouseup 鼠标松开事件 onmousemove 鼠标移动事件 ②事件的三要素：
a.事件源：哪个HTML产生的元素
b.事件类型：鼠标移动，鼠标点击，窗口大小切换
c.事件处理程序：当事件产生之后，执行什么样的js代码
③举个典型例子（点击事件）
换一种写法：（核心代码）
<body> <!-- 创建一个按钮 --> <!-- 事件源：这个button对象 --> <button onclick="f()">请按按钮</button> <script> let cell=document.querySelector('button'); // 事件类型：onclick 表明这是一个点击事件 function f(){ alert('hello'); } </script> </body>但在实际上，我们更建议使用第一种写法。这种写法使得页面 更加整洁。
4.3操作元素
①操作元素的含义：
操作元素中，操作=获取+修改
②操作的形式：
a.获取标签之间的值）
但是当我们不断按按钮时，会出现相同结果叠加的情况
那么，怎么才能使我们的结果不叠加呢？其实很简单，我们只需要对其进行基本的设置就OK。如下图所示：
刚刚我们操作的都是获取内容的按钮，下面我们写一下修改内容的核心代码：
案例一：修改原内容
<body> <div id="screen">welcome to js</div> <button id="one">获取内容的按钮</button> <button id="two">修改内容的按钮</button> <script> //首先要获取到这个获取内容的按钮 let btn=document.querySelector('#one'); //使它能够产生获取点击的事件类型 btn.onclick=function(){ let screen=document.querySelector('#screen'); //获取到div中的welcome to js的内容 console.log(screen.innerHTML); } let btn2=document.querySelector('#two'); btn2.onclick=function(){ let screen=document.querySelector('#screen'); //这是修改后的内容 screen.innerHTML += 'a'; } </script> </body>效果如下:
案例二：实现plus操作（核心代码）
<body> <div id="screen">0</div> <button id ="plus" >+</button> <script> let plusBtn = document.querySelector("#plus"); plusBtn.onclick = function () { //1.获取screen里面的值 let screen = document.querySelector("#screen"); //这个时候得到的类型是字符串类型，可以用typeof进行检测 let val = screen.innerHTML; //因为是字符串类型，直接加的话只能够实现拼接，所以这个时候，我们先将它转化为数字类型 val=parseInt(val); //2.将其＋1 val += 1; //3.将这个值写回原来的位置 screen.innerHTML=val; } </script> </body>通过input标签来添加一个边框，来实现加的操作。（核心代码如下：）
<body> <input type="text" id="screen" value="0"> <button id ="plus" >+</button> <script> let plusBtn = document.querySelector("#plus"); plusBtn.onclick = function () { //1.获取screen里面的值 let screen = document.querySelector("#screen"); //这个时候得到的类型是字符串类型，可以用typeof进行检测 let val = screen.value; //因为是字符串类型，直接加的话只能够实现拼接，所以这个时候，我们先将它转化为数字类型 val=parseInt(val); //2.将其＋1 val += 1; //3.将这个值写回原来的位置 screen.value=val; } </script> </body>效果如下:
b.操作元素的属性：
通过dom对象.属性名来进行操作。
案例一：（通过以下代码实现点击切换图片的效果）
<style> img { height: 400px; } </style> <body> <img src="1.png"> <script> let img = document.querySelector('img'); img.onclick = function(){ let s = img.src; if(s.indexOf('1.png') >= 0){//是否包含这个地址,与java中的indexOf的用法差不多 console.log(img.src); img.src = '2.png'; }else if(s.indexOf('2.png') >= 0){ console.log(img.src); img.src = '3.jpg'; } } </script> </body>效果如下:
下面我们介绍几个表单的专有属性。
- value： input 的值.
- disabled：禁用;
- checked：复选框会使用;
- selected：下拉框会使用;
- type：input 的类型(文本, 密码, 按钮, 文件等);
案例二：切换密码的显示状态
<body> <input type="text"> <button>隐藏密码</button> <script> let input = document.querySelector('input'); let button = document.querySelector('button'); button.onclick = function() { if(input.type == 'text') { input.type = 'password'; button.innerHTML = '显示密码'; }else { input.type = 'text'; button.innerHTML = '隐藏密码'; } } </script> </body>效果如下:
- 在input中选中元素是 .value不是用 .innerHTML
- .innerHTML是获取标签的内容,就也是开始标签和结束标签夹着的部分
案例三：通过切换checked值来实现全选效果
<body> <input type="checkbox" id="all">all<br> <input type="checkbox"class='fruit'>apple<br> <input type="checkbox" class="fruit">watermelon<br> <input type="checkbox" class="fruit">grape<br> <input type="checkbox" class="fruit">strawberry<br> <script> //1.获取到元素 let all=document.querySelector('#all'); let fruits=document.querySelectorAll('.fruit'); //2.给all注册点击事件 all.onclick=function(){ for(let i=0;i<fruits.length;i++){ //通过控制当all选择时全选择 fruits[i].checked=all.checked; } } //3.对每个水果注册点击事件，实现对all的取消 for(let i=0;i<fruits.length;i++){ fruits[i].onclick=function(){ all.checked=checkFruits(fruits); } } function checkFruits(fruits){ //判定是不是所有都被选中 for(let i=0;i<fruits.length;i++){ if(!fruits[i].checked){ return ''; } } //均选中 return 'checked'; } </script> </body>结果展示:
c.操作元素的样式：
本质上也是操作元素的属性。我们这里有两个操作。注意：css中一般不用驼峰，而js通常用驼峰，css中的-转换成下个字母的驼峰。
案例一：点击字体放大
一个是style对应行内样式（直接把样式写到style里面）
<body> <div style="font-size:20px">这是个文本</div> <script> let div=document.querySelector('div'); div.onclick=function(){ //1.获取字体的大小 console.log(div.style.fontSize); //2.在当前字体大小的基础上，多增加5px //①将字符串类型转化为数字类型，才可以进行加减 let fontSize=parseInt(div.style.fontSize); fontSize+=5 //打印出来，别忘了添加单位，修改CSS属性值时，单位不合适会被当做无效值来处理 div.style.fontSize=fontSize+'px'; } </script> </body>效果如下:
案例二：实现一个夜间模式
第二个是className/classList对应内部样式/外部样式。应用了一个/一组css类名。
在HTML中,表示类名的属性就是class,但是在
JS里,属性名变成了className/classList为啥不直接使用class这个名字？class在js中也是一个关键字。对于修改样式较多的来说，通过style进行修改就显得非常麻烦，所以我们可以直接借助CSS类来修改，把要修改的属性放在一个类里。
核心代码如下:
<body> <style> div{ height: 300px; width: 500px; } .light{ background-color: #fff; color: black; } .dark{ background-color: black; color: #fff; } </style> <div class="light">一段文字</div> <button id="btn">关灯</button> <script> // 夜间模式: let div = document.querySelector('.light'); let btn = document.querySelector('#btn'); btn.onclick = function(){ if(div.className == 'light'){//通过class来切换样式 div.className = 'dark'; btn.innerHTML = '开灯'; }else if(div.className == 'dark'){ div.className = 'light'; btn.innerHTML = '关灯'; } } </script> <body>得到的效果，如下所示：
4.4操作节点
对于节点的操作，实质上就是新增节点和删除节点。下面我们就对这两个 操作进行详细的讲解。
①新增节点：
a.创建新节点:使用createElement来创建一个元素
b.把节点挂在dom树上:使用appendChild把节点插入到某个节点的子元素中
核心代码：
<body> <div class="container"> </div> <script> //1.创建新节点,createElement就可以创建一个新的元素 let newDiv = document.createElement('div'); newDiv.id = 'newDiv'; newDiv.className = 'one'; newDiv.innerHTML = 'hello'; //2.把节点挂在dom树上 可以使用appendChild把节点插入到某个节点的子元素中 let container = document.querySelector('.container'); //通过appendChild来插入 container.appendChild(newDiv); </script> <body>效果如下:
②删除节点：（通过removeChild来对节点进行删除）
先拿到父节点然后在拿到待删除的子节点就可以进行删除了
在上述新增节点的基础上来对节点进行删除，核心代码如下：
<body> <div class="container"> </div> <button id="btn"> 点击删除 </button> <script> let newDiv = document.createElement('div'); newDiv.id = 'newDiv'; newDiv.className = 'one'; newDiv.innerHTML = 'hello'; let container = document.querySelector('.container'); container.appendChild(newDiv);//这样就可以插入元素了 console.log(newDiv); //通过removeChild就可以进行删除了 let btn = document.querySelector('#btn'); btn.onclick = function(){ container.removeChild(newDiv); console.log(newDiv); } </script> <body>效果如下:
4.5 小结
- 选中元素querySelector / querySelectorAll
- 事件 onclick
- 修改元素内容 innerHTML
- 修改元素属性 元素.属性
- 修改表单属性元素.value 元素.type
- 元素样式 元素.style.样式名=值元素.className = css类名
- 创建元素 createElement
- 把元素放到dom 树上 appendChild
- 删除元素 removeChild
🍋五. JavaScript 的对象和 Java 的对象的区别
1. JavaScript 没有 “类” 的概念
对象其实就是 “属性” + “方法” .
类相当于把一些具有共性的对象的属性和方法单独提取了出来, 相当于一个 “月饼模子”
在 JavaScript 中的 “构造函数” 也能起到类似的效果.
而且即使不是用构造函数, 也可以随时的通过 { } 的方式指定出一些对象。
在 ES6 中也引入了 class 关键字, 就能按照类似于 Java 的方式创建类和对象了.
2. JavaScript 对象不区分 “属性” 和 “方法”
JavaScript 中的函数是 “一等公民”, 和普通的变量一样. 存储了函数的变量能够通过 ( ) 来进行调用执行.
3. JavaScript 对象没有 private / public 等访问控制机制.
对象中的属性都可以被外界随意访问.
4. JavaScript 对象没有 “继承”
继承本质就是 “让两个对象建立关联”. 或者说是让一个对象能够重用另一个对象的属性/方法.
JavaScript 中使用 “原型” 机制实现类似的效果.
例如: 创建一个 cat 对象和 dog 对象, 让这两个对象都能使用 animal 对象中的 eat 方法.
通过 proto 属性来建立这种关联关系 (proto 翻译作 “原型”)
当eat方法被调用的时候，先在自己的方法列表中寻找， 如果找不到，就去找原型中的方法， 如果原型中找不到， 就去原型的原型中去寻找… 最后找到Object那里， 如果还找不到， 那就是未定义了。
5. JavaScript 没有 “多态”
多态的本质在于 “程序猿不必关注具体的类型, 就能使用其中的某个方法”.
C++ / Java 等静态类型的语言对于类型的约束和校验比较严格. 因此通过 子类继承父类, 并重写父类的方法的方式 来实现多态的效果.
但是在 JavaScript 中本身就支持动态类型, 程序猿在使用对象的某个方法的时候本身也不需要对对象的类型做出明确区分. 因此并不需要在语法层面上支持多态.
例如:
在 Java 中已经学过 ArrayList 和 LinkedList. 为了让程序猿使用方便, 往往写作List list = new ArrayList<>()
然后我们可以写一个方法:
void add(List<String> list, String s) {
list.add(s);
}
我们不必关注 list 是 ArrayList 还是 LinkedList, 只要是 List 就行. 因为 List 内部带有 add 方法.
当我们使用 JavaScript 的代码的时候
function add(list, s) {
list.add(s)
}
add 对于 list 这个参数的类型本身就没有任何限制. 只需要 list 这个对象有 add 方法即可. 就不必像 Java 那样先继承再重写绕一个圈子.
🦋六. 猜数字
我们实现一个网页版的猜数字
1.生成一个1 - 100之间的随机数字
2.用户输入一个数字
3.判断用户输入的数字大小关系给出提示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>猜数字</title>
</head>
<body>
<div>请输入要猜的数字:</div>
<input type="text" >
<button>提交</button>
<!-- 显示提示信息 -->
<div class="result">
</div>
<script>
//生成一个1 - 100之间的随机数
let toGuess = parseInt(100 * Math.random()) + 1;
// 因为Math.rondom()生成的是[0,1)之间的随机数，我们需要进行转换
console.log(toGuess);
//进行猜数字操作
let button = document.querySelector('button');
let input = document.querySelector('input');
let information = document.querySelector('.result');
button.onclick = function() {
//取出输入框内容
if(input.value == '') {
return;
}
let inputNum = parseInt(input.value);
if(inputNum < toGuess) {
information.innerHTML = '猜小了';
}else if(inputNum > toGuess) {
information.innerHTML = '猜大了';
}else {
information.innerHTML = '恭喜你，猜对了！';
}
}
</script>
</body>
</html>
💕七. 表白墙
<body>
<h1>表白墙</h1>
<span>谁: </span>
<input type="text">
<span>对谁: </span>
<input type="text">
<span>说: </span>
<input type="text">
<button>提交</button>
</body>
这算什么表白墙，下面的才是我们要实现的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表白墙</title>
<style>
* {
/* 消除浏览器默认样式 */
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 600px;
margin: 20px auto;
}
h1 {
text-align: center;
}
p {
text-align: center;
color: #666;
margin: 20px auto;
}
.row {
/* 开启弹性布局 */
display: flex;
height: 40px;
/* 水平方向居中 */
justify-content: center;
/* 竖直方向居中 */
align-items: center;
}
.row span {
width: 80px;
}
.row input {
width: 200px;
height: 30px;
}
.row button {
width: 280px;
height: 30px;
color: white;
background-color: orange;
/* 去掉默认边框 */
border: none;
border-radius: 3px;
}
.row button:active {
background-color: gray;
}
</style>
</head>
<body>
<div class="container">
<h1>表白墙</h1>
<p>输入内容后点击提交,信息将显示到下方表格</p>
<div class="row">
<span>谁: </span>
<input type="text">
</div>
<div class="row">
<span>对谁: </span>
<input type="text">
</div>
<div class="row">
<span>说: </span>
<input type="text">
</div>
<div class="row">
<button>提交</button>
</div>
<div class="row">
<button id="revert">撤销</button>
</div>
</div>
<script>
// 实现将提交的内容呈现在页面显示
let containerDiv = document.querySelector('.container');
let inputs = document.querySelectorAll('input');
let button = document.querySelector('button');
button.onclick = function() {
//分别获取三个输入框的内容
let from = inputs[0].value;
let to = inputs[1].value;
let msg = inputs[2].value;
if(from == '' || to == '' || msg == '') {
return;
}
//构建一个新的div
let rowDiv = document.createElement('div');
//此处class属性名不构造row防止撤销把自己删除了
rowDiv.className = 'row message';
rowDiv.innerHTML = from + ' 对 ' + to + ' 说 ' + msg;
containerDiv.appendChild(rowDiv);
// 完成提交后 清空输入框内的内容
for(let input of inputs) {
input.value = '';
}
let revertButton =document.querySelector('#revert');
revertButton.onclick = function() {
//删除最后一条消息
//选中所有的row message,找出最后一个row message,然后进行删除
let rows = document.querySelectorAll('.message');
//如果没有数据就不删了
if(rows == null || rows.length == 0) {
return;
}
containerDiv.removeChild(rows[rows.length-1]);
}
}
</script>
</body>
</html>
520
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
