Javascript基础
学习Javascript基础
Kong_十六
慢慢来,才是快。
展开
-
JS运动集合,封装便捷的功能函数
动画的原理匀速运动 // 1. 匀速运动 s = vt v不变 let btn = document.querySelector("button"); let div = document.querySelector(".box"); btn.onclick = function () { starMove(div, 300) }; // 运动的元素 运动到的位置 向后+ 还是向前原创 2020-07-20 11:18:11 · 157 阅读 · 0 评论 -
原生js小游戏
emmmmmm,这个小小的游戏,其实也是模仿别人的拉,但是,我自己又做了一个另外功能的。哈哈哈哈!!按钮点击类型看下大概的效果呗,就是有九个选项,按下不同的方向,就能让小人转变方向进行移动。核心:定时器、动画、点击事件对象。案例核心就是这三点。动画的话,其实是分两部分,首先,我们得让小人自己动起来,核心就是利用定时器改变img得src属性。其次我们需要让动起来的小人向上向...原创 2020-04-11 22:09:45 · 7797 阅读 · 5 评论 -
本地数据存储 —— sessionStorage和localStorage
简单介绍下,本地数据存储就有点像浏览器的缓存一样,如果你让浏览器保留了输入过的信息,下次再打开时,这组数据还会存在的。最形象的就是,我们有时候会在登陆的账号时选择记住账号和密码,这个就是典型的本次存储的应用。本地存储是调试工具的Application。本地存储有两种,sessionStorage和localStorage。分别来看下。sessionStoragesessi...原创 2020-04-06 17:36:12 · 710 阅读 · 0 评论 -
typeof 的特别之处 —— 不报错
遇到了一个题目,很基础,但是也很容易犯错,看下呗。 var x = 1; if (function f() {}) { x += typeof f; } console.log(x);你认为结果是什么?当时我的第一反应是“1Function”。但是正确答案是 1undefined字符串。这个题目...原创 2020-04-03 12:41:27 · 447 阅读 · 0 评论 -
AO是什么?GO是什么?深度解析JS预编译遇见AO和GO
写在前面三月结束了,四月开始了。希望这个世界早点好起来。今天是个好日子,好呀嘛好日子。哈哈哈哈哈哈,省里发文件了,终于让我看到了开学的希望,心情格外的舒适。好了好了,来说说今天都干嘛了吧。今天又了解了一些JS预解析的内容,跟第一次看到的有一些出入,今天来补充一下。也没有很大的区别,主要就是更深入的理解JS预编译的过程。开始总结学习了啊啊啊啊啊啊。JS代码执行过程我们都知道...原创 2020-03-31 21:36:09 · 3556 阅读 · 3 评论 -
纯JS实现轮播图
写在前面是的,这个轮播图我看了一天的时间,网上找说明,外加请教别人,自己动手试着写写,昨天看了一下午,夜里又简单想了一下整个流程。终于今天上午开始动手写,磕磕绊绊,跌跌撞撞,完整的轮播让我给实现了。总的来说,算是完成了,为啥要说算是呢,因为自己在独立地写的过程中还是会出现一些问题,就会看别人怎么写的,怎么实现的,再去对比一下自己的思路。遇到问题,思考问题,再到解决问题,是个需要不断重复的...原创 2020-03-20 15:56:44 · 401 阅读 · 4 评论 -
JS实现简单的动画效果 —— 缓动动画的原理
写在前面每天都奔赴自己的热爱,是多么幸福的一件事。唯有美食和理想不可辜负。CSS中学习了动画,是使用keyframe定义动画,然后添加动画。今天主要是用JS实现动画效果,同时理解动画的原理。emmmm , 本篇文章介绍的是元素移动的效果的原理,其他的还没有了解。见谅见谅哈。动画的原理动画移动的原理:1.获得元素当前位置;2.每隔一定时间元素位置 加 1;2.使用定时器重...原创 2020-03-18 21:53:23 · 1692 阅读 · 0 评论 -
JS实现侧边栏 —— 仿淘宝固定侧边栏
固定侧边栏的效果:当页面滑到banner部分时,侧边栏就变成固定定位,不再跟随滚动条往下走;页面再往下滑动,到主体部分时返回顶部的部分显示,否则隐藏。页面的结构,搭建的比较简单,主要是为了实现js效果的。具体详细的步骤代码部分有注释的哈。JS部分:// 需求:1.当页面划到banner部分时 侧边栏保持位置不变 没到banner区域时侧边栏跟着页面滑动 // 2...原创 2020-03-17 19:17:10 · 3325 阅读 · 0 评论 -
JS实现放大镜的效果 —— 仿京东详情页中的产品放大效果
案例简述这次案列是模仿京产品详情页中,产品图放大的效果。简单说下效果的具体步骤:1.鼠标经过预览区时,遮盖层和产品大图显示;鼠标离开则隐藏2.遮盖层跟随鼠标进行移动,并且遮盖层只在预览区域内移动,超出范围位置则不动3.大图中产品位置跟随遮盖层的位置变化。换句话说就是大图中产品的细节部分与遮盖层聚焦的产品细节与之对应。先看下京东原版的效果案例实现的整体思想...原创 2020-03-17 15:58:39 · 2162 阅读 · 3 评论 -
JS实现拖拽效果
拖拽效果也叫模态框,都是表述得同一个效果。问题描述:点击链接会弹出一个框框(我这里是登录框),鼠标点击不松手可以实现拖拽框框移动。点击框上得关闭按钮,可以关闭框。先来看看效果这个案例的主要分三部分来完成1. 点击文字,登陆框的显示和隐藏2. 鼠标按下,拖拽登陆框移动3. 鼠标松开,登陆框位置不变了具体得步骤代码里会有详细得解释得。这里值得注意得点:鼠标...原创 2020-03-16 21:07:08 · 443 阅读 · 0 评论 -
JavaScript基础——offset和client
offset和client系列以下都是对象的属性:这些属性可读不可写,跟style有区别。style可读也可写。这个属性使用赋值”=“ ,即可获取属性值元素的偏移量——offset元素的偏移量,也就是元素的位置。offsetTop:返回的是元素距离最近开启定位的父元素顶部的距离,若没有开启定位的父元素,则是距离页面的顶部距离offsetLeft:返回的是元素距离最近开启定位的...原创 2020-03-16 18:13:46 · 1542 阅读 · 0 评论 -
补充BOM操作
昨天忙着思考人生呢 就没有写(捂脸捂脸)。今天把BOM结束了啊。还是得回头看看DOM基础,以为DOM的内容比BOM多。接上一遍文章啊,这里这里------BOM基础history对象history对象主要与浏览器记录进行交互,主要就是两个方法的使用。forward() 方法 : 前进 back() 方法:后退看个案例就明白了点击链接,去往另一个页面,...原创 2020-03-16 11:40:58 · 160 阅读 · 0 评论 -
JavaScript基础——BOM基础
目录写在前面的反思BOM笔记案例说明常用事件定时器this指向问题JS执行机制写在前面的反思用了大概一个星期的时间吧,把DOM的基础知识点和对应的一些案例过了一遍。其实我也没有严格要求自己在多长多长时间内去学完多少多少知识或者看完哪部分知识。我都是看视频、记笔记,然后再整理整理笔记,练习练习视频里面的案例,敲敲代码,整理思路。就是在敲代码的过程中要试着去复...原创 2020-03-13 20:25:06 · 428 阅读 · 0 评论 -
DOM事件——鼠标事件和键盘事件
DOM事件基础就要结束了,今天整理一下,发上来。做的小案例和练习,有的我没有放html和css,一般都是使用ul和li做的,大家可以自行搭建吧,主要是学习JavsScript的,但是也不能忘记前面学习的。事件的注册和解绑两种注册绑定事件的方式 <script> // 给li注册点击事件 // 传统方式 var l...原创 2020-03-12 16:59:46 · 642 阅读 · 0 评论 -
初次接触------DOM事件流
简单一句话概括事件流:事件的传播过程就是DOM的事件流。举一个例子:给ul中的li添加点击事件。事件传播的整个过程:首先document检测是否有点击事件,没有;下一步找html,没有点击事件;然后找body,没有点击事件;接着找ul,没有点击事件;最后找到li,有点击事件,进行事件处理程序。完成后,按着li-->ul--->body--->html--->...原创 2020-03-11 22:12:42 · 116 阅读 · 0 评论 -
JavaScript基础——DOM节点操作学习笔记
目录笔记方法的使用案例一、动态生成表格案例二、下拉菜单,鼠标经过和离开实现案例全部代码笔记###节点概述 1.网页中的任何内容都是节点——文字、标签、元素、文档等。 节点至少有nodeType(节点类型)、nodeName(节点名称)、nodeValue(节点值)三个基本属性 节点的类型nodeType 元素节点:...原创 2020-03-10 16:00:40 · 693 阅读 · 0 评论 -
JS实现简易留言板——节点操作
今天的案例主要是对节点进行操作创建节点、添加节点、删除节点以及为节点添加内容的操作。就是一个简单的留言板功能,可以发布留言,删除留言。主要思路:两个鼠标点击事件——点击发布按钮事件和点击删除按钮事件发布按钮事件:首先在文档中创建li节点。然后第二步,先把文本域中的内容获取出来赋给li,这里要注意,文本域是表单元素,获取表单元素的内容是使用表单的特有属性value,要与普通元素获取...原创 2020-03-10 15:44:03 · 5966 阅读 · 2 评论 -
JS实现表单复选框的全选和取消
单纯的想把案例放上来需求一:点击全选按钮,下面的选项按钮全部选中或全取消需求二:只要下面四个按钮都选中了,全选按钮也被选中主要思路:主要是有两个事件,一是针对全选按钮,二是针对全选按钮下面的小按钮全选按钮点击事件实现:点击可以全选下面的按钮或全取消下面的按钮小按钮点击事件实现:当四个按钮都被选中时,全选按钮会自动被选中,只要有一个按钮没有选中全选按钮就不会被选中...原创 2020-03-09 20:54:17 · 3877 阅读 · 1 评论 -
自定义变量实例——tab栏切换
自定义属性自定义属性,开发者可以自己定义属性,并且使用属性值进行操作。在tab栏切换中,就是运用到自定义属性记录索引号,使选项与内容进行匹配显示。自定义变量主要有以下三种操作获取自定义属性值:element.属性 —— 获取内置属性的值element.getAttribute('属性') —— 获取自定义属性的值设置自定义属性值:element.setAtt...原创 2020-03-09 20:27:59 · 420 阅读 · 2 评论 -
JavaScript基础——DOM案例
emmmmmm,昨天下午那会儿,出现了一点小插曲,电脑进水了。。。。。。。。还好最后没事,不让我就要报废了,今天夜里把昨天没有完成的知识点来完成一下。上篇文章介绍了其他的元素操作,今天再对表单元素进行补充说明一下。表单元素的属性操作src属性的应用今天又找一个案例做做:点击图片,背景就变成点击的那个图片其实也可以看成是换头像,原理是一样的这个案例对src的应用我感...原创 2020-03-08 20:49:17 · 1098 阅读 · 0 评论 -
JavaScript基础——Web APIS之DOM学习笔记
今天大概过了一下DOM的基本操作,如何获取元素、事件基础、如何操作元素对象。看着视频学习的,知识量有的大,练习今天下午还没有整完,就练习了一部分的知识点。就大概记录一下今天的学习笔记吧。DOM的概念API的中文意思:应用程序编程接口Web APIS :DOM(文档)和是BOM(浏览器)DOM:文档模型对象,是一个供开发者直接使用的接口,不需要定义的。我们可以通过DOM对网页的内...原创 2020-03-06 21:35:18 · 317 阅读 · 0 评论 -
JavaScript基础——数据类型的存储
JS中的数据类型分为两种:值类型和引用类型。值类型五种简单数据类型就是值类型。Number、Boolean、String、Null、undefined但要特别主要Null:它的返回的是Object值类型数据的存储方式在栈空间开辟一个空间,用来存放值。值类型数据在传参时:是把变量在栈空间的数值复制了一份给了形参引用类型引用类型就是复杂数据类型-----对象引用...原创 2020-03-06 18:48:50 · 237 阅读 · 0 评论 -
JavaScript基础之内置对象——Math数学
Math对象不同于String、Date和Array对象。Math不是构造器也就是不是构造函数,在使用属性和方法时,是Math直接使用,不需要对象实例化 。后三者都是构造器,使用它们的方法和属性时需要 声明相应的变量。数学对象: Math.IP基本字符串:var str = 'asdf'; str.lenght日期对象:var date = new Date();数组对象...原创 2020-03-04 08:54:00 · 413 阅读 · 0 评论 -
JavaScript基础之内置对象——String 字符串
基本包装类型在总结知识点之前先说一下字符串基本包装类型。基本包装类型:也叫基本类型、基本字符串MDN给的解释如下:字符串字面量 (通过单引号或双引号定义) 和 直接调用 String 方法(没有通过 new 生成字符串对象实例)的字符串都是基本字符串。JavaScript会自动将基本字符串转换为字符串对象,只有将基本字符串转化为字符串对象之后才可以使用字符串对象的方法。当基本字符...原创 2020-03-03 15:42:52 · 276 阅读 · 0 评论 -
JavaScript基础之内置对象——Array数组
内置对象Array数组对象,为我们提供了一些常用的方法,可以对数组进行一些常规操作。数组中的常用方法检测是否为数组a. instanceof :标识符arr instanceof Array 返回fales arr不是数组对象 返回true arr是数组对象b. Array.isArray(参数) 方法...原创 2020-03-02 21:52:10 · 190 阅读 · 0 评论 -
JavaScript基础之内置对象——Date对象
JavaScript中的内置对象有Math、Date、String、Array。内置对象就是Javascript语言已经给我们提供好的,自带的一些对象,可以供我们直接使用的。这些对象还提供了一些常用的或基本使用的功能,也就是对象的属性和方法。就像我们去买一个手机,里面的视像头、相机、电池等都是安装好的,我们可以直接使用的,不需要我们自己去下载安装。主要学习这些对象常用的方法。注意...原创 2020-02-29 09:05:09 · 291 阅读 · 0 评论 -
JavaScript基础——遍历对象
上一篇文章介绍了创建对象的三种方式,接下来就是创建了对象,对象的实例化后,如何遍历对象呢?for .... in 对数组和对象进行遍历操作。for (变量 in 对象){ 执行语句;}注意:变量一般为key或k<script> function Like(name, age) { this.nam...原创 2020-02-28 16:40:07 · 122 阅读 · 0 评论 -
JavaScript基础——对象简介
对象的分类Javascript中有三种对象:自定义对象、内置对象、浏览器对象这里我主要简单说明介绍下自定义对象。对象的含义JavaScript中,万物皆对象。比如,一本书、一个杯子、一个数据库或者一个与远程连接的服务器都是对象。对象是指一个具体的事物,不是一个模糊或者一类事物。比如,人不是对象,但是这个人、那个人、在我旁边喝水的一个人是对象;笔不是对象,一支红色的笔、一支断掉的...原创 2020-02-28 12:30:28 · 404 阅读 · 0 评论 -
JavaScript基础——JS预解析
JS引擎运行js代码,分为两部分:JS预解析+代码执行JS预解析JS预解析的含义:就是把JS中所有的var和function提升到当前作用域的最前面JS预解析包含两个部分:变量预解析+函数预解析预解析的过程中,还是按照代码从上到下执行的。变量预解析(变量提升)变量提升:把js中所有的变量(通过var声明的)提升到当前作用域的最前面,但是不提升赋值操作varnum=...原创 2020-02-27 12:13:43 · 373 阅读 · 0 评论 -
JS函数实现判断闰年、判断素数、求前n项和、求最大值
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2020-02-10 17:14:15 · 301 阅读 · 0 评论 -
JavaScript基础——函数简介(作用域)
函数是一个可以重复调用的代码块。函数不调用的话,是不会执行的。创建函数的方法function 函数名(形参) { 函数体;}形参可以有,也可以没有。var 变量名 = function (){ 函数体};这种创建方式是把创建的函数存入变量当中去。(后面深入学习再介绍啦)函数返回值问题函数分为两类:有返回值...原创 2020-02-10 16:54:26 · 245 阅读 · 0 评论 -
JavaScript基础——数组简介(实现冒泡排序)
数组概念:指一组数据的集合,存在单个变量中,其中的每个数据称为元素。数组中的元素可以为任意数据类型。创建数组的方法a. 使用new 关键字创建数组对象(还未深入涉及,只是知道有这样一个方法)。对象(Object)是一个复杂的数据类型。语法结构:var 数组名 = new Array();创建一个空数组对象b. 使用数组字面量创建数组语法结构:var 数组名 [ ...原创 2020-02-09 10:05:12 · 187 阅读 · 0 评论 -
JavaScript基础——for循环实现九九乘法表
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2020-02-08 09:10:36 · 1029 阅读 · 0 评论 -
JavaScript基础——输入输出、数据类型、运算符、变量
开始学习前端Web也有好久了,终于要开始JS的学习了,虽然说前期的CSS和HTML没有完全深度掌握吧,但也有一定的基础和广度的呀,也会跟进一直学习的啊。更重要的学习方式是对比学习,很多用CSS实现的效果,JS依然可以做出来,所以可以对比着学习。Javascript是一个脚本语言,JavaScript的基础包括ECMA(语法)、DOM(文档对象)、BOM(浏览器对象)三个部分。今天就看了一些...原创 2020-02-06 21:00:38 · 370 阅读 · 0 评论