小张小张啊 - 个人主页动态

2022-03-18 15:49

已编辑

JavaScript 学习笔记（一）JavaScript基础，JavaScript的基本DOM操作

javaScript中的DOM操作 1. 获取浏览器窗口尺寸 宽度：widnow.innerwidth 高度：widnow.innerHeight  //获取浏览器可视窗口的宽度 var w = window.innerWidth //获取浏览器可是窗口的高度 var h = window.innerHeight console.log(w) console.log(h)  2. 浏览器的弹出层 提示框：window.alert(‘提示信息’) 询问框：window.confirm(‘询问信息’) 输入框：window.prompt(‘输入信息’) //提示框 var res = window...

0 点赞评论收藏

2022-03-18 15:49

中国民用航空飞行学院前端工程师

JavaScript 学习笔记（二）JavaScript基础，JavaScript的基本DOM操作（二）

文章目录  JavaScript 学习笔记（一）JavaScript基础，JavaScript的基本DOM操作（二） 一、DOM介绍 二、获取元素的方式   1. 根据id名称获取 2. 根据元素 类名 获取 3. 根据元素 标签名 获取 4. 根据 选择器 获取一个 5. 根据 选择器 获取一组  三、操作元素内容   1.操作元素 文本 内容 2. 操作元素 超文本 内容  四、操作元素属性   1. 原生属性 2. 自定义属性  五、操作元素类名 六、操作元素行内样式 七、获取元素非行内样式 总结     1.获取元素 2.操作元素内容 3. 操作元素原生属性 4. 操作元素自定义属性 ...

0 点赞评论收藏

2022-03-18 15:49

中国民用航空飞行学院前端工程师

JavaScript 学习笔记（三）JavaScript基础，JavaScript的基本DOM操作（三）

文章目录  JavaScript 学习笔记（三）JavaScript基础，JavaScript的基本DOM操作（三） 一、节点操作   1. 创建节点 2. 插入节点 3. 删除节点 4. 替换节点 5. 克隆节点  二、获取元素的尺寸 总结   一、节点操作   1. 创建节点 2. 插入节点 3. 删除节点 4. 替换节点 5. 克隆节点  二、获取元素的尺寸     JavaScript 学习笔记（三）JavaScript基础，JavaScript的基本DOM操作（三）    一、节点操作 1. 创建节点 创建一个页面中没有的节点（无中生有） 语法：document.createElem...

0 点赞评论收藏

2022-03-18 15:48

中国民用航空飞行学院前端工程师

javaScript 学习笔记（四）JavaScript的定时器

文章目录  javaScript学习笔记（二）JavaScript的定时器   JavaScript的定时器   1. 间隔定时器： 2. 延时定时器： 3. 定时器的返回值 4. 关闭定时器   总结     定时器      javaScript学习笔记（二）JavaScript的定时器 JavaScript的定时器 1. 间隔定时器： 按照制定周期（毫秒）去执行制定的代码 语法：setInterval(函数, 时间) 函数：每次要执行的内容； 时间：单位是毫秒。 //每隔1000毫秒执行一次 setInterval(function () {  console.log("执行一...

0 点赞评论收藏

2022-03-18 15:48

已编辑

中国民用航空飞行学院前端工程师

javaScript案例（一）：回到顶部，html+css+js书写案例：回到顶部

案例：回到顶部 1.确认需求： 1）滚动条滚动超过临界点，顶部通栏显示，否则隐藏； 2）滚动条滚动超过临界点，回到顶部按钮显示，否则隐藏； 3）点击回到顶部按钮，滚动条滚动回到顶部。 2. 布局结构： 1）需要一个 顶部通栏 标签和一个 回到顶部按钮的标签； 2）让页面 超过 浏览器可视窗口尺寸； 3）设置 顶部通栏 样式，默认是在超出页面的； 4）设置 回到顶部按钮 样式，默认是在隐藏的，即默认让他 displaydownok。 3. 代码逻辑： 1）给浏览器绑定滚动事件，实时获取浏览器卷去的高度； 2）判断卷去的高度决定隐藏还是显示； 3）给回到顶部按钮绑定点击事件； 4.代码： <...

0 点赞评论收藏

2022-03-18 15:47

中国民用航空飞行学院前端工程师

JavaScript案例（二）：全选；html+css+js实现全选功能

   代码逻辑∶ 1、给全选按钮绑定点击事件    拿到自己的选中状态；给所有选项按钮设置选中状态 2、给每一个选项按钮绑定点击事件    判断是不是所有选项按钮都是选中的；根据判断结果给全选按钮设置选中状态  <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>案例-2：全选</title> <style> * { margin: 0; padding: 0; } .box{ wid...

0 点赞评论收藏

2022-03-18 15:47

中国民用航空飞行学院前端工程师

JavaScript案例（三）：动态渲染页面；html+css+js实现动态渲染页面

前言 将代码中已知的数据结构，通过代码的方式把数据渲染成一个表格显示在页面上  如图：    循环遍历users数组，有多少个成员执行多少回 1. 创建一个tr标签 2. 循环遍历 users内的每一个对象 对象内有多少个成员，执行多少遍 2-1.创建一个td标签 2-2. 向 td标签内添加内容 2-3. 把td标签插入到tr标签内 3. 把tr 插入到tbody内部 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &l...

0 点赞评论收藏

2022-03-18 15:47

中国民用航空飞行学院前端工程师

JavaScript 学习笔记（五）JavaScript基础，JavaScript的事件

文章目录  前言 一、事件绑定 二、事件类型   1.鼠标事件 2.键盘事件 3. 浏览器事件 4. 触摸事件 5. 表单事件  三、事件对象 四、事件对象内的信息   1. 鼠标事件 2. 键盘事件  五、事件传播 六、阻止事件传播 八、事件委托    前言 事件：通过代码的方式和页面中的某些内容做好一个约定； 用户触发指定行为的时候，就会执行代码  一、事件绑定 事件绑定的三要素：  事件源：和谁做好约定 事件类型：约定一个什么行为 事件处理函数：当用户触发该行为的时候，执行什么代码。  语法：事件源.on事件类型 = 事件处理函数 <!DOCTYPE html> <ht...

0 点赞评论收藏

2022-03-18 15:46

中国民用航空飞行学院前端工程师

JavaScript案例（四）：鼠标移动跟随；html+css+js实现鼠标移动时小球跟随鼠标移动

鼠标移动跟随案例 js知识点：JavaScript事件  JavaScript事件知识点详见上一篇文章：https://blog.csdn.net/weixin_43969648/article/details/123296927?spm=1001.2014.3001.5502  <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>案例：鼠标跟随</title> <style> img...

0 点赞评论收藏

2022-03-18 15:46

中国民用航空飞行学院前端工程师

JavaScript案例（五）：轮播图；html+css+js实现轮播图功能以及自动切换图片

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>轮播图</title> <style> * { margin: 0; padding: 0; } ul, ol, li { list-style: none; } img { width: 100%; height: 100%; display: block; } .banner { width: 100%; height: 400p...

0 点赞评论收藏

2022-03-18 15:46

中国民用航空飞行学院前端工程师

JavaScript 学习笔记（六）JavaScript基础，JavaScript面向对象相关知识点及案例

目录 一、了解面向对象 二、创建对象的方式 1. 字面量方式创建对象 2. 内置构造函数创建对象 3. 工厂函数创建对象 4. 自定义构造函数创建对象 三、构造函数的使用 1. 构造函数和普通函数没有区别 2. 构造函数名首字母大写 3. 要和new关键字连用 4. 不用写小括号 5. 直接书写 this.xxx = 值 6. 不用写return 四、构造函数的不合理 五、原型prototype 六、案例：简单版面向对象选项  一、了解面向对象 面向对象是我们的一种开发方式。 例子：一份烤鸭 在面向过程中：所有事情都是自己来做，要考虑顺序（先杀鸭子，先烤鸭子，还是先切鸭子）；要考虑步骤（杀鸭子...

0 点赞评论收藏

2022-03-18 15:45

中国民用航空飞行学院前端工程师

JavaScript案例（六）：选项卡；JavaScript简单版面向对象案例：选项卡

简单版面向对象案例：选项卡 1. 抽象内容 一个能够完成选项卡的对象，需要有哪些属性和方法。 属性：所有可以点击的按钮盒子； 属性：所有可以切换的选项盒子； 方法：能添加点击事件的方法。 2. 书写构造函数 能创建一个对象，包含两个属性和一个方法； 属性直接写在构造函数体内； 方法写在构造函数的原型上。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>面向对象选项卡</title> <s...

0 点赞评论收藏

2022-03-18 15:45

中国民用航空飞行学院前端工程师

JavaScript 学习笔记（七）JavaScript基础；js原型以及原型链

目录 一、原型 原型解决的问题  原型概念 二、原型链 问题1：实例对象身上的 __proto__ 指向谁？ 问题2：Person.prototype 的 __proto__ 指向谁？ 问题3：Person 的 __proto__ 指向谁？ 问题4：Object.prototype 的 __proto__ 指向谁？ 问题5：Object 的 __proto__ 指向谁？ 问题6：Function.prototype 的 __proto__ 指向谁？ 问题7：Function的 __proto__ 指向谁？  什么是原型链  一、原型 原型解决的问题 当我们需要给实例对象添加方法时，直接在构造函...

0 点赞评论收藏

2022-03-18 15:45

中国民用航空飞行学院前端工程师

ES6 学习笔记

目录 一、定义变量 1. let / const 与 var 的区别 2. let 和 const 的区别 二、箭头函数 箭头函数的特殊之处 三、函数参数默认值 四、解构赋值 1. 数组的解构赋值 2. 对象的解构赋值 五、模板字符串 1.可以换行书写 2. 可以直接在字符串内解析变量 六、展开运算符 七、类语法  一、定义变量 ES6 以前我们定义变量使用 var 关键字，ES6 新增了两个定义变量的关键字：  let      ==> 定义变量 const  ==>  定义常量（特殊的变量）  1. let / const 与 var 的区别  var 会进行预解析，let 和...

0 点赞评论收藏

创作者周榜

关注他的用户也关注了：