JavaScript基础
文章平均质量分 85
JavaScript基础部分
学全栈的灌汤包
这个作者很懒,什么都没留下…
展开
-
原生JS仿造华为商城案例-实现了简单页面-两种轮播图思路的实现-动态展示数据
页面展示该项目功能实现:无限滚动轮播图js动态生成列表展示内容对列表内服务优惠选项可进行筛选对列表实现可按要求进行排序项目中使用的模拟数据, 代替网络请求模拟数据: 轮播图数据js代码模拟数据: 展示列表数据js代码重置的CSS样式公共CSS样式项目说明项目中我实现了两种动态展示列表的方案以及两种轮播图的设计思路(无限滚动轮播图和淡入淡出轮播图)方案一: 实现淡入淡出轮播图, 生成动态列表时, 使用原生js操作DOM生成, 过程略显繁琐, 好处是可以直接操作元素中的对应事件方案原创 2022-06-06 23:38:57 · 2548 阅读 · 0 评论 -
JSON数据格式的基本使用-JSON序列化
在目前的开发中,JSON是一种非常重要的数据格式,它并不是编程语言,而是一种可以在服务器和客户端之间传输的数据格式。JSON的全称是JavaScript Object Notation(JavaScript对象符号):其他的传输格式:目前JSON被使用的场景也越来越多:JSON的顶层支持三种类型的值:3. JSON序列化某些情况下我们希望将JavaScript中的复杂类型转化成JSON格式的字符串,这样方便对其进行处理:JSON序列化方法那么上面的代码我们可以通过如下的方法来使用:4.Stringif原创 2022-06-05 14:10:47 · 2537 阅读 · 1 评论 -
11_BOM相关对象
BOM:浏览器对象模型(Browser Object Model)JavaScript有一个非常重要的运行环境就是浏览器BOM主要包括一下的对象模型:window对象在浏览器中可以从两个视角来看待:当然,这两个视角存在大量重叠的地方,所以不需要刻意去区分它们:事实上window对象上肩负的重担是非常大的:那么这些大量的属性、方法、事件在哪里查看呢?查看MDN文档时,我们会发现有很多不同的符号,这里我解释一下是什么意思:我们来看一下常见的windo属性:2.4 window常见方法我们来看一下常见的win原创 2022-06-05 11:34:23 · 231 阅读 · 0 评论 -
DOM案例练习-推荐几个DOM小案例练习有示例代码
说明: 做一个消息提示, 让消息的内容跟随数据动态发生改变示例代码:CSS部分HTML结构JS代码案例二: 关闭删除消息说明: 点击叉号将对应导航栏删除示例代码:CSS代码HTML结构:JS代码:案例三: 侧边栏的展示说明: 鼠标经过添加动画将宽度调高-, 案例中的图片使用同一张精灵图, 且精灵图位置是有规律的, 我们选择通过js动态设置background-position示例代码:CSS代码HTML结构JS代码案例四: 登录框原创 2022-06-04 21:08:19 · 702 阅读 · 0 评论 -
10_DOM中的事件处理-事件冒泡捕获-事件委托-常见的事件-window定时器方法
Web页面需要经常和用户之间进行交互,而交互的过程中我们可能想要捕捉这个交互的过程:如何进行事件监听呢?事件监听方式一:直接在HTML中编写JavaScript代码监听(很少使用);事件监听方式二:DOM属性,通过元素的on来监听事件;缺点: 无法对同一个事件绑定多个函数事件监听方式三:通过EventTarget中的addEventListener来监听;addEventListener的方式可以同时绑定多个函数事实上对于事件有一个概念叫做事件流,为什么会产生事件流呢?示例代码:原创 2022-06-03 15:28:23 · 357 阅读 · 0 评论 -
09_超详细的DOM相关的API操作-导航获取节点-获取元素的方法-节点与元素的常见属性-元素操作-DOM练习小案例
我们花了很多时间学习JavaScript的基本语法,但是这些基本语法,但是这些语法好像和做网页没有什么关系,和前面学习的HTML、CSS也没有什么关系前面我们学习了一个window的全局对象,window上事实上就包含了这些内容:DOM:文档对象模型(Document Object Model)BOM:浏览器对象模型(Browser Object Model)浏览器会对我们编写的HTML、CSS进行渲染,同时它又要考虑我们可能会通过JavaScript来对其进行操作:整个文档被抽象到 document 对象原创 2022-06-01 02:46:35 · 648 阅读 · 0 评论 -
08_JavaScript常见内置类-原始类型包装类-Math-Array高阶函数-数组的进阶用法-Date介绍
原始类型的包装类JavaScript的原始类型并非对象类型,所以从理论上来说,它们是没有办法获取属性或者调用方法的。但是,在开发中会看到,我们会经常这样操作 简单类型的值调用了属性或方法:var message = "hello world"var height = 1.8888888//打印字符串长度console.log(message.length)//打印保留两位小数后的结果console.log(height.toFiexd(2))那么,为什么会出现这样奇怪原创 2022-05-29 21:44:23 · 289 阅读 · 1 评论 -
深入forEach原理-并手动实现一个forEach函数
实现一个自己的forEach函数forEach简单了解forEach: 可以帮助我们遍历数组forEach()要求传入一个函数fn作为参数, 内部会对传入的函数fn进行回调, 回调fn时会传入3个参数回调fn传入的三个参数分别是: 数组的元素, 数组元素的索引, 数组本身//forEach的使用var names = ["abc", "bca", "cab", "aaa"]names.forEach(function (item, index, names) { consol原创 2022-05-29 15:26:34 · 1039 阅读 · 0 评论 -
07_JavaScript对象的基本使用-引用类型的值传递-构造函数
认识对象类型在数据类型中我们提到还有一种特别的类型:对象类型。对象类型涉及到JavaScript的各个方面,所以掌握对象类型非常重要;对象类型是一种存储键值对(key-value)的更复杂的数据类型为什么需要对象类型呢?基本数据类型可以存储一些简单的值,但是现实世界的事物抽象成程序时,往往比较复杂;比如一个人,有自己的特性(比如姓名、年龄、身高),有一些行为(比如跑步、学习、工作);这个时候,我们需要一种新的类型将这些特性和行为组织在一起,这种类型就是对象类型。对象类型可以使原创 2022-05-29 12:18:54 · 255 阅读 · 0 评论 -
06_JavaScript函数的基本使用-函数递归
认识函数什么是函数呢?目前, 我们已经接触过几个函数了alert函数:浏览器弹出一个弹窗prompt函数:在浏览器弹窗中接收用户的输入console.log函数:在控制台输入内容String/Number/Boolean函数等当我们在谈函数时, 到底在谈些什么?函数其实就是某段代码的封装,这段代码帮助我们完成某一个功能;默认情况下JavaScript引擎或者浏览器会给我们提供一些已经实现好的函数;我们也可以编写属于自己的函数;函数使用的步骤函原创 2022-05-29 12:16:47 · 274 阅读 · 0 评论 -
05_JavaScript的循环语句
认识循环在开发中我们经常需要做各种各样的循环操作:比如 把一个列表中的商品、歌曲、视频依次输出进行展示;比如 对一个列表进行累加计算;比如 运行相同的代码将数字 1 到 10 逐个输出循环是一种重复运行同一代码的方法如果是对某一个列表进行循环操作,我们通常也会称之为 遍历或者迭代在JavaScript中支持三种循环方式while循环do…while循环for循环while循环while循环的语法如下当条件成立时,执行代码块当条件不成立时,跳出代码块原创 2022-05-29 12:14:30 · 245 阅读 · 0 评论 -
04_JavaScript的分支语句-三元运算符-逻辑运算符补充
程序的执行顺序在程序开发中,程序有三种不同的执行方式顺序 —— 从上向下,顺序执行代码分支 —— 根据条件判断,决定执行代码的 分支循环 —— 让 特定代码 重复 执行代码块的理解代码块是多行执行代码的集合,通过一个花括号{}放到了一起在开发中,一行代码很难完成某一个特定的功能,我们就会将这些代码放到一个代码块中//一个代码块{ var num1 = 10 var num2 = 20 var result = num1 + num2 }在JavaSc原创 2022-05-29 12:13:34 · 199 阅读 · 0 评论 -
03_JavaScript常见运算符
认识运算符在小学的时候我们就学习了各种运算符,比如*加号 +、乘号 、减号 - 、除号/几乎所有的编程语言都有各种各样的运算符(也被称之为操作符,operators)计算机最基本的操作就是执行运算,执行运算时就需要使用运算符来操作JavaScript按照使用场景的不同将运算符分成了很多种类型:算术运算符/赋值运算符/关系(比较)运算符/逻辑运算符认识运算元运算元: 运算符应用的对象比如说乘法运算 5 * 2,有两个运算元;左运算元 5 和右运算元 2;有时候人们也称其为“参数原创 2022-05-29 12:11:47 · 273 阅读 · 3 评论 -
02_JavaScript变量名和常见数据结构
变量名格式js中命名一个变量包含两部分变量的声明: 在js中声明一个变量使用var关键字(variable)变量的赋值: 使用 = 给变量进行赋值//写法一:声明的同时赋值var name = "kaisa"//写法二:先声明再赋值var namename = "kaisa"js变量的命名规则变量命名规则(必须遵守)第一个字符必须是一个字母、下划线或一个美元符号其他字符可以是 字母、下划线、数字、美元符号不能使用关键字和保留字变量命名规范(建原创 2022-05-29 12:10:09 · 424 阅读 · 1 评论 -
01_JavaScript的基本语法介绍
js的编写位置编写位置一: 编写在html内部(了解)<a href="#" onclick="alert('百度一下')">百度一下</a><a href="javascript: alert('百度一下')">百度一下</a>编写位置二: 编写在script元素之内<a class="google" href="#">Google一下</a> <script> var googl原创 2022-05-29 12:05:47 · 175 阅读 · 1 评论