JavaScript 零基础入门
文章平均质量分 52
星光不问赶路人,一起感受 Java Script 的无限魅力所在
卡卡西最近怎么样
前端领域优质创作者,阿里云专家博主,华为云享专家,星光不问赶路人,一个热爱前端的大学生,希望大家多多指点交流
展开
-
全站最简单 “数据滚动可视化大屏” 【JS基础拿来即用】
本案例功能为数据自动滚动,可搭配后端进行数据实时的可视化添加,光标移动到屏幕处可以暂停滚动,移开继续滚动原创 2022-09-12 14:51:58 · 7968 阅读 · 164 评论 -
VSCode 入门操作大全 + 实用插件推荐【零基础专属详细教程】
选择一个好的开发工具是很重要的,很多人在 webstorm 和 vscode 上很难抉择,我个人更喜欢使用 vscode,因为其简洁的操作风格和丰富的人性化的各种功能让我欲罢不能,这篇文章带给大家 vscode 的新手操作指南:...原创 2022-05-12 07:00:00 · 19692 阅读 · 186 评论 -
【Java Script 零基础入门】对象的创建与遍历
这篇文章带大家进入 Java Script 的对象阶段,Java Script 可以说是万物皆对象。对象是引用数据类型,是保存复杂数据类型的容器,它是多个属性和方法的集合。这篇文章的目标有两个:📑目标一:学会创建对象的三种方式 📑目标二:学会遍历对象的两种方式.........原创 2022-05-14 07:00:00 · 958 阅读 · 60 评论 -
【JavaScript 零基础入门】内置对象 (一) ------ Math对象
在Java Script 中一共有三类对象,分别是 ‘自定义对象’,‘内置对象’,‘浏览器对象’,其中前两类属于JS基础中的内容,属于ECMA Script,而浏览器对象属于JS独有的一部分内容。在日常代码开发中有很多代码需要频繁使用,例如数学类,日期类,以及Array的一些方法等,对此便有了一些JS的自带对象,这些自带对象提供了很多可以直接使用的属性与方法,使得代码更为精炼。......原创 2022-05-17 07:38:01 · 1417 阅读 · 100 评论 -
【JavaScript 零基础入门】内置对象(二)------ Date 对象
接下来说明 JS 第二类常见的内置对象 —— Date 对象Date 对象和 Math 对象不同,Math 对象不是构造函数,可以直接使用,而 Date 对象是一个构造函数,所以我们必须经过对象实例化,即 new 过之后才可以使用,Date 对象多用于处理开发中的时间和日期方面的问题。Date 对象实例化:var date=new Date();Date 对象实例化时可以有参数也可以没有参数,没有参数输出的就是当前系统当时的的标准时间,有参数的话我们可以输出想要展现的时间一:原创 2022-01-18 16:14:20 · 1022 阅读 · 2 评论 -
【JavaScript 零基础入门】内置对象(三)------ Array 对象
接下来是 JS 的第三个内置对象-------Array对象,即数组对象。一:数组的两种创建方式数组的创建有两种方式,分别是利用数组字面量创键 和 利用 new Array() 创建。1.利用数组字面量创建:var arr=[1,2,3,4,5,6];2.利用 new Array() 创建:括号里无参数,即创建了一个空的数组var arr1=new Array();console.log(arr1); //结果为创建了一个空的数组[]括号里有一个数字 n,则这个原创 2022-01-19 20:43:12 · 1730 阅读 · 1 评论 -
Java Script 内置对象(四) --------- String 对象
开始讲 String 内置对象前,首先我们来看两行简单的代码:var str='abcde';console.log(str.length); //输出5结果会输出 str 的长度 5,但是我们知道对象及复杂的数据类型才会有属性和方法,为什么这个简单的数据类型会有 length 属性呢???这就是此文章的内容:基本包装类型一:基本包装类型什么是基本包装类型呢?就是把简单数据类型包装为复杂数据类型:var str='abcde'; var temp=new Stri原创 2022-01-24 12:47:10 · 848 阅读 · 4 评论 -
在页面上获取当前时间
<!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>Do.原创 2022-02-05 12:31:47 · 493 阅读 · 0 评论 -
倒计时案例
在日常开发中很多地方都会用的到倒计时,例如淘宝,京东的双十一秒杀倒计时等,我们如何也写出一个倒计时效果呢,我们首先会想到获取当前时间,再减去我们设置好的时间即可,但是我们获取到的标准时间很可能会出现减去之后是负数的情况(例如02-12)这怎么办呢?于是我们的时间戳便有利用价值了,时间戳即总毫秒数,这个时间是永远不会重复的,对此我们可以使用设置好的总毫秒数减去当前的总毫秒数,在进行一系列单位换算,就可以得到一个简单的倒计时案例了,首先我们需要熟练记清楚单位换算之间的关系:1秒=1000毫秒天数=秒数/原创 2022-01-26 15:02:04 · 741 阅读 · 1 评论 -
数组去重案例
在一个数组中有很多对相同的数组元素,我们怎么操作才能使新数组中的元素没有重复的大致思路:遍历旧的数组,用旧的数组去查询新的数组,如果有这个元素就不添加进新数组,没有的话就添加进去。但是我们怎么才能知道新数组中有没有呢,这就用到了数组元素的索引如果查询不到,则返回-1,对此我们只要判断是不是-1 就可以知道新数组中有没有该元素代码实现:var arr=[1,1,2,2,3,4,5,5,5,6,4,3,6,7,9,8];var newarr=[];for(var i=0;i<原创 2022-01-26 15:08:48 · 426 阅读 · 0 评论 -
判断出现次数最多的字符
判断一个字符串内出现次数最多的字符大致思路:利用 charAt() 得到字符串中的每一个字符,创建一个空对象,判断该对象中有没有该字符,有的话让该字符自增1,没有的话将该对象的属性值赋为1,然后再遍历对象,用判断数组最大值的方法同样去得到对象内属性值最大的一个代码实现:var str=prompt('请随机输入一串字符');var obj={};for(var i=0;i<str.length;i++){ var chars=str.charAt(i);原创 2022-01-25 16:27:21 · 271 阅读 · 0 评论 -
统计字符串内某个字符出现的次数
假如有一个字符串 ‘cabcdasgcjaieyakxhanzgajgaa’ 我们要统计这个字符串里字符 ‘a’ 出现的位置以及出现的次数大致思路:先利用 indexOf() 判断出该字符第一次出现的位置,只要其返回结果不等于 -1 就继续往后查找,但是因为 indexOf() 只能查到第一次出现的位置,所以要给其参数的起始索引位置加一,然后继续查找代码实现:var str='cabcdasgcjaieyakxhanzgajgaa';var num=0;var index=原创 2022-01-25 15:11:23 · 4986 阅读 · 0 评论 -
API 与 Web API 以及 与Java Script 基础的关联
Java Script 分为三部分,分别为 ECMA Script , DOM , BOM其中ECMA Script就是学过的 JS 基础语法,DOM与BOM属于Web APIAPI:API 即应用程序编程接口(Application Programming Interface)是一些预先定义过的函数或接口,目的在于用来提供应用程序与开发人员基于某软件或硬件得以访问的一组例程,而又无需访问源码,或理解内部工作机制的细节,可以简单理解为 API 就是为程序员提供的一种便捷的工具,方便各种想..原创 2022-01-31 12:36:04 · 1141 阅读 · 0 评论 -
DOM 基础 ---------- 事件基础
页面中通常会有有条件才能触发的版块,例如鼠标点击才能触发另一个对话框,鼠标移动上去会让图片滚动(轮播图),再或者是各种下拉菜单等等,这些都需要事件来完成利用 Java Script 可以创建动态页面,事件则是可以被其侦测到的行为,可以简单理解为一个触发 -- 响应机制事件由三部分组成(事件三要素):事件源:事件被触发的对象,可以是一个按钮,也可以是一行文字等等页面上的内容事件类型:即如何触发这个事件,可以是鼠标点击,或者鼠标移动等等事件处理程序:通常为通过函数赋值来完成其..原创 2022-02-05 11:30:23 · 476 阅读 · 0 评论 -
DOM 基础 ---------- 获取元素
DOM 即文本对象模型,是 W3C 推荐的处理可拓展标记语言的标准编程接口,通过这些接口可以改变网页的内容,结构,样式文档:一个页面就是一个文档,DOM 中用 document 表示元素:页面中所有的标签都是元素,DOM 中用 element 表示节点:网页中所有内容(标签,属性,文本,注释)都叫节点,DOM 中用 node 表示DOM 获取元素有很多方法,下面一一说明一:document.getElementById()此方法用于返回一个匹配特定的 ID 元素,由于元素的 ID原创 2022-02-02 23:48:12 · 7238 阅读 · 0 评论 -
DOM 基础 ---------- 操作元素
一:修改元素内容修改元素内容有 innerText 和 innerHTML 两种方式,两者之间的区别在于是否可以识别 HTML 标签,innerText 不识别 HTML 标签,innerHTML 可以识别 HTML 标签innerText:原创 2022-02-10 15:00:09 · 574 阅读 · 0 评论 -
使用 className 修改样式属性
修改样式属性有两种方式第一种: 行内样式操作,element.style,当需要更改的样式较少时或功能简单时建议使用第二种:类名样式操作, element.className ,当需要修改的样式复杂并且较多时,使用该方式element.style...原创 2022-02-13 16:35:39 · 4758 阅读 · 3 评论 -
innerText 和 innerHTML 的区别
innerText 和 innerHTML 都可以改变和读写元素的内容,但是二者也有一定的区别element.innerText:不识别 HTML 标签,读写(获取元素内容)时空格和换行都会被去除,是非标准的<body> <div></div> <script> var ele=document.querySelector('div'); ele.innerText='<strong>原创 2022-02-05 14:35:02 · 736 阅读 · 0 评论 -
Value 和 Placeholder 的区别
value:如果想要鼠标点击后默认文字消失需要加入 JS 的 onfocus 和 onblur 来实现placeholder:在 input 标签中只是充当了占位符的作用,在没有 value 的情况下才会显示,并且如果使用 placeholder 那就不需要JS 的 onfocus 和 onblur ,它本身自带有获得和失去焦点的功能...原创 2022-02-13 14:33:54 · 1184 阅读 · 1 评论 -
DOM 操作元素 实例 隐藏密码
样式如下:input 标签的密码框自带有隐藏密码的功能,这篇文章就当做隐藏密码的内部实现机制吧......(而且我不知道如何去除 input 自带的隐藏密码图标,有会的大佬留个言呗!!)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">原创 2022-02-10 15:09:49 · 641 阅读 · 0 评论 -
关闭二维码案例
关闭二维码利用的是更改了css的元素属性(实则是隐藏):display:none为隐藏元素 display:block 为显示元素,其中display:block 为默认属性,不写此属性也会默认是显示的cursor:pointer作用为使光标 由箭头变成小手指以下为关闭二维码的代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <...原创 2022-02-10 16:01:54 · 341 阅读 · 1 评论 -
前端登录页面 (背景换肤 + 密码错误提示 + 密码隐藏切换)
效果展示:背景切换:(可以自己添加想要的图片背景)密码提示:(要求密码位数为6-16之间,可自行改变)代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpo...原创 2022-02-16 13:38:08 · 1874 阅读 · 1 评论 -
多选框的 全选 与 取消全选
浏览网页时我们经常能见到全选选项,比如双十一剁手清空购物车时,就会用到一键全选,但是全选与取消全选的思维是什么呢?思路:我们会利用多选框的 checked 属性来完成,checked 的返回值是一个 Boolean 类型的值,勾选返回 true ,不勾选返回 false。全选与取消全选的 JS 代码实现:qx是获取的全选选项的元素,xz是获取的要选择的所有元素(this.checked 为全选选项是否选择,选择了返回 true ,没有选择则返回 false,并将此结果利用循环赋值给每一个原创 2022-02-20 17:43:39 · 2517 阅读 · 0 评论 -
排他思想算法
排他思想 顾名思义即排除其他人再设置自己下面举一个例子说明:例如我们要设置五个按钮,要求点击后变色,不点击不变色,并且点击后再点击别的按钮会恢复颜色,首先我们会想到循环注册事件,我们可以在点击后先将所有颜色全部取消,然后再设置想要的颜色代码:<body> <button>按钮1</button> <button>按钮2</button> <button>按钮3</button>原创 2022-02-20 17:58:30 · 435 阅读 · 0 评论 -
网页导航的点击及内容切换效果
效果如下:点击导航后导航内容发生改变(内容简略)点击导航后内容改变的思想:导航是由 li 标签构成的,给每个 li 标签用循环加一个自定义属性,属性值为索引号 0-3 。一共四个导航块的内容分别放在四个 div 内部,div 的 display 设置为 none 隐藏,然后在蓝色区域是按标准流依次叠放在一起的,使用 queryselector 获取到每一个 div,于是每个div也有了与导航 li 标签相同对应的索引号0-3,最后用排他思想改变点击后的导航对应内容的 display 属性原创 2022-02-22 18:35:02 · 13695 阅读 · 2 评论 -
清除浮动的五种方法
为什么要清除浮动?因为往往浮动后的子元素因为脱离了标准流,不能自动撑起父元素的高度,所以会对后续布局产生影响,对此清除浮动不如理解为清除浮动产生的影响更为合理。例如:我们设置了两个盒子如图所示,粉色为父盒子,只有宽度没有高度,蓝色盒子有宽有高,粉色盒子的高由蓝盒子的高度撑开。但是给蓝色的子盒子设置了左浮动后,脱离了标准流,无法再撑开粉盒子,可以看到粉盒子高度变成了0;清除浮动有五种方法:直接设置父元素的高度 额外标签法 单伪元素法 双伪元素法 ove.原创 2022-02-22 19:15:39 · 2708 阅读 · 2 评论 -
H5 对于自定义属性的规范
H5 规定自定义属性应以 data- 开头作为属性名并赋值,并对这种自定义的属性添加了一种获取的方法:element.dataset首先我们输出一下 dataset,看看 dataset 是什么,可以看到直接输出dataset,输出结果为一个集合,所以dataset 是一个包含了所有 data- 开头的自定义属性的集合<div data-index="1" data-name="jack"></div> <script> var ..原创 2022-02-22 20:09:49 · 317 阅读 · 0 评论 -
节点操作 ------------- 父节点
在获取元素时我们可以利用DOM提供的一系列方法获取,但是这些方法过于繁琐,不简练。所以我们学习节点操作,页面中所有内容都是节点,有文档节点,元素节点,属性节点等,我们主要针对研究的是元素节点节点(node)拥有 节点类型(nodeType),节点名称(nodeName),节点值(nodeValue)父节点:parentNode:得到的是最近的父级节点,找不到的话返回 null<div class="father"> <div class="son"&g原创 2022-02-23 21:53:30 · 424 阅读 · 0 评论 -
节点操作 ------------- 子节点
有父节点,也有子节点,例如在列表中获取一堆 li 标签就显得很便捷子节点:childNodes:可以看出输出结果为9个,但是明明只有四个元素,那剩下的五个是什么呢?可以看到每个 li 标签换行时有回车,回车算文本节点,也就是这个方法会把元素节点和文本节点都输出出来 <ul class="father"> <li></li> <li></li> <li...原创 2022-02-23 22:28:20 · 529 阅读 · 0 评论 -
子节点 实现 下拉菜单
利用子节点可以更方便地获取一大串子元素,element.children 获取到导航栏的四个 li 标签,再利用 element.children[ index ] 来获取到具体的元素来改变其 display 实现其隐藏和显示JS 区域代码: var div=document.querySelector('.map-ul'); var lis=div.children; for(var i=0;i<lis.length;i++){ l.原创 2022-02-23 21:27:12 · 189 阅读 · 0 评论 -
节点的 创建及添加
学习了父节点与子节点,就可以进行节点的添加操作了,一个简易的留言板的创建就是利用了节点的添加和删除。想要在页面添加一个新的元素,我们可以分成两步:1,创建节点 2,添加节点一:创建节点document.creatElement (想要添加的元素)例如想在空的ul标签里添加一个li标签,首先我们要先创建一个li,以下操作就可以完成创建<ul></ul> <script> var newele=document原创 2022-02-24 17:18:17 · 3195 阅读 · 0 评论 -
Java Script 节点的删除
有创建添加节点,也一定有删除节点node.removeChild ( 要删除的元素节点 ) node:父级点击一次按钮,就可以删除一个 li 标签,并且没有 li 标签的话会禁用按钮 <ul> <li>111</li> <li>222</li> </ul> <button>删除</button> <script> ...原创 2022-02-24 19:04:09 · 351 阅读 · 0 评论 -
节点的复制(克隆)
复制节点分为 浅拷贝 和 深拷贝,浅拷贝是只复制标签不复制内容,深拷贝是复制标签并会把内容也复制过来。复制有两个步骤:设置要复制的标签,然后选择位置添加。浅拷贝:要复制的节点.cloneNode ( ) : 只复制标签,不复制标签内的内容 <ul> <li>1</li> <li>2</li> <li>3</li> </ul> ...原创 2022-02-26 15:36:10 · 1078 阅读 · 0 评论 -
利用节点操作完成简易的留言板功能
效果如下:(真可爱啊)实现原理:每点击一次提交按钮,就创建一个 li 标签(本身 ul 里没有 li 标签,ul 在 textarea 下方)然后使用 innerHTML 将textarea 的 value 值传给 li 标签的内容。代码: <style> .box{ box-sizing: border-box; width: 500px; height: 1200px;原创 2022-02-24 18:40:18 · 525 阅读 · 2 评论 -
动态创建表
利用节点操作也可以完成动态地创建表格,我们将数据放进对象中,再将对象放入数组,每步的操作为创建行,创建单元格,再创建删除格,单元格和删除格之所以没有一起创建是因为单元格的个数等于对象内属性的个数,可以直接遍历创建,而删除是单独的功能,用到的方法就是学习过的各种节点操作,内容可以直接添加在数组中即可完成创建(开发时数据在数据库中连接)JS 部分代码: var tbody=document.querySelector('tbody'); for(var i=0;i<dat.原创 2022-02-26 17:23:13 · 1015 阅读 · 1 评论 -
事件侦听注册事件(addEventListener)
注册事件有两种方式,一种是之前的传统的注册事件方式,还有一种是事件侦听注册方式,两者在效果输出上有一定的差异。传统的注册事件:没有兼容性问题,同一个元素同一个事件只能设置一个处理程序,最后写入的处理函数会覆盖掉之前的,并且事件前有 ‘on’,例如 onclick ,onmouseover 等等。事件侦听注册事件(addEventListener):是W3C推荐的方式,但是有兼容性问题,IE9以下浏览器不可使用此方法,优点为同一个元素同一个事件可以设置多个处理程序,里面的参数事件类型是字符串,要加原创 2022-02-27 15:01:20 · 735 阅读 · 0 评论 -
事件的删除
代码中通常会要求一个事件只能进行一次,所以进行完一次后我们要删除事件传统方法删除事件:element.onclick=null执行过一次后按钮点击无效 <button>按钮1</button><script> var btn=document.querySelector('button'); btn.onclick=function(){ alert('hello'); btn.onclick..原创 2022-02-27 17:37:47 · 401 阅读 · 0 评论 -
盒子在任意尺寸下居中的思想
大致思路:为了让目标盒子在不管父元素尺寸以及自身尺寸下均居中,我们先以水平居中举例,首先让子盒子定位于大盒子左边距的 50% ,然后再向左回位自身的 50% 即可,垂直居中同理。第一步:子绝父相,子盒子设置为 position:absolute,父盒子设置为 position:relative第二步:left:50%让子盒子定位于距离大盒子左边距50%,设置50%可以让子盒子自适应大盒子的尺寸,使其永远距左侧50%第三步: transform:translateX (-5...原创 2022-02-27 18:17:57 · 304 阅读 · 2 评论 -
DOM 事件流与代码验证
事件的发生会在元素节点之间以特定的顺序传播,这个过程就是 DOM 事件流document ——> html——> body ——> div,这个过程即为事件流的捕获阶段,反过来则为冒泡阶段,之前说的的事件侦听注册事件用到的第三个参数( true/ false )就是用来捕获或者冒泡阶段的,如果参数为 true ,则说明在捕获阶段,如果为 false ,则说明在冒泡阶段(不写的话默认为 false)捕获阶段:如果参数为 true 则是捕获阶段,捕获阶段按照docu...原创 2022-03-01 15:47:32 · 314 阅读 · 5 评论 -
事件对象 event
事件对象是我们一系列我们事件相关数据的集合,如果是点击事件就包含了点击事件的相关数据,例如点击坐标等等。我们在注册事件时的两个方法,不论是 element.onclick=function(){},或者是element.addEventListener(“onclick”,function()),他们的侦听函数的括号里始终是空着的,这个地方其实是用来放事件对象的,事件对象我们称为 event(可以自己命名),普遍简称为 e 即可,在括号里当做形参来看。在 ie678 浏览器版本不支持 e 或者 even原创 2022-03-01 16:18:11 · 156 阅读 · 0 评论