- 博客(139)
- 收藏
- 关注
RSS订阅原创 如何阻止浏览器的默认行为?
var oA = document.querySelector('a') a.addEventListener('click', function (e) { e = e || window.event console.log(this.href) //下面这个是兼容写法 e.preventDefault ? e.preventDefault() : e.returnValue = false })
2022-04-27 17:05:55
3315
原创 To Do List (待办事项)
To Do List (待办事项)上篇博客中我们讲到了浏览器的本地存储,因为没有列出具体的实例让大家操作,所以肯定还有一部分人是没有彻底明白的,那么今天这篇博客,就通过一个案例来让大家好好了解一下什么是本地存储以及本地存储的作用!闲话少说,直接上干货!To Do List (待办事项)案例名称:To Do List (待办事项)需求:前端页面的开发使用响应式布局,使得用户在移动端上也可以使用输入事项以后,用户按回车添加到未完成目录中未完成和已完成可以通过复选框相互转化浏览器关闭以后
2021-03-26 10:56:01
1681
原创 浏览器的本地存储(sessionStorage and localStorage)
浏览器的本地存储随着互联网的快速发展,基于网页的应用越来越普遍,同时也变的越来越复杂,为了满足各种各样的需求，浏览器会经常性的在本地存储大量的数据，因此HTML5规范提出了相关解决方案。本地存储特性数据直接存储在用户的浏览器中设置、读取比较方便,甚至页面刷新以后不丢失数据容量较大，sessionStorage约5M、localStorage约20M只能存储字符串,可以将对象JSON.stringify() 编码后进行存储window.sessionStorageses
2021-03-26 10:27:59
293
原创 简洁、直观、强悍的Bootstrap前端开发框架
简洁、直观、强悍的Bootstrap前端开发框架简洁、直观、强悍的Bootstrap前端开发框架，让我们的web开发变得更迅速、简单.在我们学习Bootstrap前端开发框架之前,我们先来了解一个概念!什么是框架?框架顾名思义就是一套架构,框架有一套比较完整的网页功能解决方案， 而且控制权在框架本身，有预制样式库、组件和插件 。使用者必须按照框架所规定的某种规范进行开发。了解完框架以后,我们接下来开始学习Bootstrap.Bootstrap简介Bootstrap来自Twitter（推
2021-02-25 16:11:14
1077
2
原创 Less（CSS预处理器）
Less 基础css弊端CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。CSS 需要书写大量看似没有逻辑的代码，CSS 冗余度是比较高的。不方便维护及扩展，不利于复用。CSS 没有很好的计算能力非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码项目。Less 介绍Less（LeanerStyle Sheets 的缩写）是一门 CSS扩展语言，也称为CSS预处理器。Less做为 CSS的一种形式的扩展，它并没
2021-02-18 14:55:40
326
2
原创 媒体查询（Media Query）
移动端开发之媒体查询什么是媒体查询?媒体查询（Media Query）是CSS3新语法。使用 @media查询，可以针对不同的媒体类型定义不同的样式@media 可以针对不同的屏幕尺寸设置不同的样式当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面目前针对很多苹果手机、Android手机，平板等设备都用得到媒体查询媒体查询语法用 @media开头 注意@符号mediatype 媒体类型and|not|only：或（表示两个条件同时满足）；非（表示不满足后面的条
2021-01-25 09:13:00
609
原创 弹性布局(Flex布局)
移动端开发之弹性布局(Flex布局)文章目录移动端开发之弹性布局(Flex布局)绪论Flex布局是什么?Flex布局的基本概念Flex容器的属性以下六个属性设置在Flex容器上flex-direction属性flex-wrap属性flex-flow属性justify-content属性align-items属性align-content属性Flex项目的属性以下6个属性设置在Flex项目上order属性flex-grow属性flex-shrink属性flex-basis属性flex属性align-self
2021-01-22 09:08:32
1357
原创 流式布局(百分比布局)
移动端开发之流式布局各位学习前端的小伙伴,相信大家在写前端页面的时候大家都用过百分比布局也就是我们今天所说的流式布局.那么接下来给大家总结一下流式布局的使用.一:什么是流式布局?网页布局中包括:静态布局流式布局响应式布局弹性布局……静态布局静态布局指的就是网页中的所有元素都使用px为单位.不管浏览器具体的大小是多少,始终按照设置的值布局来显示,由于浏览器大小不一,这样的布局很容易在不同设备中出现滚动条等问题.所以这种布局在移动开发不是主流的布局方式.流式布局流式布局是页面中
2021-01-18 21:28:19
4383
原创 移动端开发绪论
移动端开发基础通常移动端开发主流方案一共有两种一种是单独制作移动端页面,目前在市场上是主流方案还有一种是响应式页面兼容移动端这种虽然不是主流方案,但是应用这种开发方案的也不是没有.我们访问移动端页面可以通过以下两种方式进行访问:网址域名加m(mobile)就可以直接访问页面的移动端页面使用移动设备,进行访问,则可以直接跳转到移动端页面又到了我们最头疼的浏览器的兼容性问题移动端浏览器基本以webkit内核为主，因此我们只需要考虑webkit兼容性问题即可。移动端浏览器
2021-01-17 19:36:31
308
6
原创 meta标签
移动web前端开发之HTML meta 标签HTML中<meta>标签内的信息不会显示在页面中，定义<meta>标签的主要目的是因为它对机器是可读的。<meta>标签有很多功能，它可以定义文档中的关键字，也可以对文档进行描述，还可以配合自身的属性设置网页的过期时间等等。当我们定义了页面的关键字或者描述信息后，搜索引擎蜘蛛（也就是常说的网络爬虫）就可以利用它们来搜索这个页面的信息当然<meta>标签的设置在我们移动端开发中也是必不可少的一步!<m
2021-01-13 20:27:35
305
原创 transform(转换)
CSS3中的transform(转换)transform是CSS3中具有颠覆性的特征之一,可以实现元素的位移,旋转,变形,缩放等效果.浏览器支持情况Internet Explorer 10、Firefox、Opera 支持 transform 属性。Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换）。Opera 只支持 2D 转
2021-01-08 10:14:39
2870
原创 transition(过渡)
CSS3中的transition(过渡)transition是CSS3中具有特殊功能的特性之一,可以不使用flash动画或者JS计时器的情况下,当元素从一种样式变为另一种样式时为元素添加过渡效果.浏览器支持情况Internet Explorer 10、Firefox、Opera 和 Chrome 支持 transition 属性。Safari 支持替代的 -webkit-transition 属性。注意：Internet Explorer 9 以及更早版本的浏览器不支持 transit
2021-01-07 15:09:58
350
4
原创 H5C3教程
H5C3教程文章目录H5C3教程HTML5简介什么是HTML5?HTML5 是如何起步的？HTML5浏览器支持HTML5 语义元素HTML5 表单元素HTML5 表单属性HTML5 新的 Input 类型HTML5 Video(视频)HTML5 Audio(音频)HTML5内联SVGHTML5 MathMLHTML5 拖放（Drag 和 Drop）HTML5 Geolocation（地理定位）HTML5 Web 存储HTML5 Web SQL 数据库HTML5 应用程序缓存HTML5 Web Worker
2021-01-06 10:38:15
1089
2
原创 marquee(文字滚动)标签
HTML之marquee(文字滚动)标签marquee简介<marquee>标签,是成对出现的标签,首标签<marquee>和尾标签</marquee>之间的内容就是滚动内容。<marquee>标签的属性主要有behavior、bgcolor、direction、width、height、hspace、vspace、loop、scrollamount、scrolldelay等，它们都是可选的。marquee属性behavior属性behavi
2021-01-05 12:45:08
27701
原创 offset、client、scroll
JS中的三大将(offset/client/scroll)通常我们在写JS的时候,经常会碰到offset,scroll和client这三个关键字,所以今天我们单独拿出来讲一下这三个关键字!开局先来两张图,后面好发育!offset(元素偏移量)offset相关属性可以动态的得到元素的位置(偏移),大小(高度和宽度)等数值.注意:offset返回的数据都是不带单位的数字类型offset相关属性的使用offset相关属性获取的数据offsetParent返回元素带
2021-01-04 10:20:47
432
2
原创 setTimeout()、setInterval()
简述JS中两种定时器的用法setTimeout()定时炸弹setTimeout()使用时指定一个时间段,只要时间到了直接执行绑定的函数setTimeout()中传递两个参数第一个参数:事件所执行的函数第二个参数:时间间隔就是时间段(以毫秒为单位)实例window.setTimeout(function(){ alert("hello"); },3000)停止定时器停止定时器方法取消了先前通过调用setTimeout()建立的定时器，括号中的参数
2021-01-01 09:13:29
778
原创 BOM(Browser Object Model)
JS中的BOM详解文章目录JS中的BOM详解BOM简介BOM中的顶级对象其他window方法JavaScript Window ScreenJavaScript Window LocationJavaScript Window HistoryJavaScript Window NavigatorBOM简介我们在JavaScript这篇博客中讲过JavaScript分三个部分:ECMAScript标准(基本语法)DOM:Document Object Model 文档对象模型,操作页面元素的BO
2020-12-30 18:51:28
1493
2
原创 callback（回调函数）
三分钟学会JS回调函数（callback）什么是回调函数?当程序运行起来,一般情况下,应用程序会时常通过API调用库里所预先备好的函数。但是有些库函数却要求应用先传给它一个函数，好在合适的时候调用，以完成目标任务。这个被传入的、后又被调用的函数就称为回调函数上面的可能不是很好理解,我们举个栗子:你到一个商店买东西，刚好你要的东西没有货，于是你在店员那里留下了你的电话，过了几天店里有货了，店员就打了你的电话，然后你接到电话后就到店里去取了货。在这个例子里，你的电话号码就叫回调函数，你把电话留
2020-12-30 09:06:22
2080
2
原创 事件委托(事件代理)
JS事件委托(事件代理)详解事件委托是前端面试的经典题型,不管是以后面试还是做开发看看都是有帮助的!其实我也不是很清楚这个概念,所以才写了这篇博客,一是为了防止自己以后忘了.二是给那些和我一样的小伙伴做参考.那什么叫事件委托呢？它还有一个名字叫事件代理，JavaScript高级程序设计上讲：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。说的这么官方,不如我们一起来看网上大神们都用的一个栗子,就是取快递来解释这个现象.有三个同事预计会在周一收到快递。为签收快
2020-12-29 12:58:41
1315
原创 如何禁止页面或者文本被选中?
如何禁止页面或文本被选中以及如何阻止浏览器的默认行为?禁止整个body中的内容被选中复制：<body onselectstart="return false"> <p>禁止整个body中的内容被选中复制</p></body>禁止页面中某一块或某一篇文章被选中复制：<body> <div onselectstart="return false"> 这段内容不可选，禁止文字被选中
2020-12-28 17:25:29
2888
原创 事件对象(event)
事件对象就是当你触发了一个事件以后，对该事件的一些描述信息每一个事件都会有一个对应的对象来描述这些信息，我们就把这个对象叫做事件对象
2020-12-28 09:09:05
675
原创 JS中的节点操作
JS中的节点操作节点概述网页页面中所有内容都是节点.在DOM中节点我们以Node来表示.我们一般使用DOM对节点实现修改,添加,删除操作一般情况下,节点至少拥有三个基本属性NodeType：节点类型，这里的类型是标签的名称,比如div等等NodeName：节点名称，这里的名称是指JS中给这个节点起的一个名字NodeValue：节点值创建节点语法:document.createElement("tagName")document.createElement("tagName")
2020-12-25 11:38:57
229
原创 JS中的排他思想以及自定义属性
JS中的排他思想以及自定义属性今天我们学习JS中一个很重要的思想.排他思想实现排他思想的步骤是先找到所有的元素把所有的元素样式都改回初始的样式最后留下自己,设置特定样式注意:步骤的顺序不能颠倒,一定要先把所有改回去最后再单独改自己实例<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <
2020-12-24 09:05:49
716
原创 mouseover、mouseenter
不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。对应mouseout只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。对应mouseleave
2020-12-23 11:26:29
668
2
原创 DOM操作
JS中的DOM操作主要可以改变网页中的内容,结构(标签),属性以及样式.同样这些操作针对于DOM而言也是通过操作对象的属性来实现的
2020-12-22 18:56:34
291
2
原创 原生JS实现贪吃蛇游戏
原生JS实现贪吃蛇游戏贪吃蛇游戏(原生JavaScript)贪吃蛇游戏思路分析游戏思想:面向对象的思想三个js文件分别代表三个对象三个对象相互独立,在HTML中控制全局使用面向对象思想的好处贪吃蛇游戏采用面向对象的思想去实现,我们的食物还有蛇以及地图是相互独立的,不会对彼此产生影响,可以单独调用贪吃蛇游戏对象分析游戏的场景(一个大的div)场景的大小场景的边框场景在浏览器中的位置游戏的主角(每一节是一个小的div)蛇的属性蛇的初始长度(四节)蛇的
2020-12-19 09:10:56
6325
12
原创 JS中获取DOM元素的方法
JS中获取DOM元素的方法JS获取DOM元素的方法（8种）通过ID获取（getElementById）通过name属性（getElementsByName）通过标签名（getElementsByTagName）通过类名（getElementsByClassName）获取html的方法（document.documentElement）获取body的方法（document.body）通过选择器获取一个元素（querySelector）通过选择器获取一组元素（querySelectorAll
2020-12-18 18:31:12
1781
2
原创 JS和DOM之间的关系?
DOM就是一张映射表啦，记录着一堆用代码操控document时的规章制度，直白点说，就是js操作html时的APIW3C已经定义好了一系列的DOM接口,我们目前主要通过DOM接口进行改变网页内容,结构和样式.
2020-12-17 09:24:28
775
原创 Web API绪论
Web API绪论在学习Web API之前我们先来了解一下什么是API?API又叫应用程序接口,本质是一些编程接口API的目的是提供应用程序与开发人员的某些软硬件操作的一些方便功能.类似于我们使用的成型产品,在使用的时候无需考虑其生产过程,直接使用即可.了解了API以后,我们再来看看什么是Web API?Web API是浏览器提供的一套有关于操作浏览器功能以及操作浏览器内页面元素的API(BOM和DOM).现阶段我们主要针对于浏览器学习常用的API,主要针对浏览器做交互效果.总结:
2020-12-16 09:00:29
205
原创 JS常用内置对象
根据JS API(开发文档说明)(Application Program Interface)讲解的内置对象就是指JS语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或者最基础而且最必要的功能(常用的属性、函数等)
2020-12-14 09:19:52
4285
原创 JavaScript对象
在JS中,对象本质是对一组无序的相关变量(属性)以及函数(方法)进行组合的结果，将这些变量及方法进行统一再封装对封装结果命名为对象
2020-12-12 10:29:27
280
原创 回文数、水仙花数、斐波那契数列
那么什么是递归呢?递归就是函数自身调用自身的一种重复过程因此使用递归处理问题和使用循环处理问题有相同的一个特征就是都要无限递归(无限循环)
2020-12-10 10:36:04
950
原创 this关键字的指向
面向对象语言中 this 表示当前对象的一个引用但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变
2020-12-09 09:08:16
330
2
原创 数组以及数组的常用方法
数组的概念数组的本质是一组可以存放相关数据的集合数组为其中的数据提供了一系列方便访问以及获取的方式数组里面的每个成员称为一个元素,一个数组里面可以存放任意多个以及任意类型的数据也就是说一个JS数组中的元素类型可以不相同数组中的元素与元素之间通过逗号进行分隔
2020-12-04 09:56:14
877
原创 if、switch、for、while、do…while
流程控制的概念在一个程序的执行过程中.每行代码的执行顺序如果不同的话,那么对于整个程序的执行结果是不一样的.所以一般情况下需要人为控制代码的执行过程已达到我们需要的效果,也就是说需要通过一定的手段控制代码的执行顺序
2020-12-02 09:01:49
492
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人