
前端学习日志
文章平均质量分 75
这是学习前端的日志
Qayrup
我只想卷死在坐的各位或被在座的各位卷死
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
JavaScriptES61面向对象_类和对象
面向对象更贴近实际生活,可以使用面向对象来描述现实世界的事物,但是事物分为具体的事物和抽象的事物面向对象的思维特点面向对象编程我们考虑的是有那些对象,按照面向对象的思维特点不断的创建对象,指挥对象做事情现实生活中:万物皆对象,对象是一个具体的事物,例如,一本书,一辆汽车,一个人,可以是对象,一个数据库,一张网页,一个与远程服务器的连接一个可以是对象在JavaScript中,对象是一组无序的相关属性和方法的集合,所有的事物都是对象例如字符串,数值,数组,函数等对象是由属性和方法组成的:在ES6中新增加了原创 2022-07-10 01:47:34 · 27348 阅读 · 0 评论 -
rem适配方案
为什么要rem适配方案让一些不能等比自适应的元素,达到当设备尺寸发生改变的时候,等比例适配当前设备使用媒体查询根据不同设备按比例设置html的字体大小,然后页面袁术使用rem做尺寸单位,当html字体大小变化,元素尺寸也会发生变化,从而达到等比例缩放适配rem实际开发适配方案按照设计稿与设备宽度的比例动态设计并设置html根标签的font-size大小(媒体查询)css中,设计稿元素的宽,高,相对位置等取值,按照同等比例换算为rem为单位的值动态设置html标签font-size大小原创 2022-07-10 01:44:01 · 27460 阅读 · 0 评论 -
浏览器执行JS过程
浏览器分为两部分,渲染引擎和JS引擎渲染引擎:用来解析HTML与CSS,俗称内核,比如chrome浏览器的blink,老版的webkitJS引擎:也称为JS解释器.用来读取网页中的JavaScript代码,对其处理后运行,比如chrome浏览器的V8浏览器本身并不会执行JS代码,而是通过内置JavaScript引擎(解释器)来执行JS代码,JS引擎执行代码时逐行解释每一句源码(转换为机器语言),然后由计算机去执行,所以JavaScript语言归为脚本语言,会逐行解释执行......原创 2022-07-10 01:43:38 · 27828 阅读 · 0 评论 -
响应式开发及Bootstrap介绍
响应式开发使用媒体查询针对不同宽度的设备进行布局和样式布局的设置,从而适配不同设备的目的设备划分尺寸区间超小屏幕(手机)<768px小屏设备(平板)>=768px~<992px中等屏幕(桌面显示器)>=992px~<1200px宽屏设备(大桌面显示器)>=1200px响应式布局容器响应式需要一个父级作为布局容器,来配合子级元素来实现变化效果.原理就是在不同屏幕下,通过媒体查询来改变这个布局容器的大小,再改变里面子原创 2022-07-10 01:43:12 · 27317 阅读 · 0 评论 -
JavaScript流程控制语句switch
JavaScript流程控制语句if elseJavaScript流程控制语句if elseJavaScript流程控制语句if elseJavaScript流程控制语句if elseJavaScript流程控制语句if elseJavaScript流程控制语句if elseJavaScript流程控制语句if elseJavaScript流程控制语句if elseJavaScript流程控制语句if elseJavaScript流程控制语句if elseJavaSc原创 2022-07-10 01:42:50 · 27158 阅读 · 0 评论 -
js事件的色发射点发生
php中文网视频教程社区问答技术文章编程词典入门教程博客注册 / 登陆万维广告联盟敏捷,低代码,流程,开发平台。专注于解决企业【跨应用】工作流实施难的问题!全开源。广告jQuery中文参考手册 / jQuery 事件jQuery 事件jQuery 是为事件处理特别设计的。什么是事件?页面对不同访问者的响应叫做事件。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。实例:在元素上移动鼠标。选取单选按钮点击元素在事件中经常使用术语"触发"(或"激发")例如: “当您原创 2022-07-10 01:41:17 · 26834 阅读 · 0 评论 -
【无标题】JavaScriptJQuery_jQuery动画效果
这是 div 中的一个段落。这是另外一个 div 中的一个段落。这是一个段落。原创 2022-06-26 02:54:55 · 26763 阅读 · 0 评论 -
JavaScriptJQuery_jQuery CSS样式操作
设置元素的css的时候,可以单个样式或者多个样式一次性设置。(2) 多个样式设置匿名函数写法获取元素的css获取每次只能获取一个,不能多个获取。CSS的尺寸属性方法概述height([val fn])取得匹配元素当前计算的高度值(px)width([val fn])取得第一个匹配元素当前计算的宽度值(px)innerHeight()获取第一个匹配元素内部区域高度(包括补白、内间距、内容、不包括边框)innerWidth()获取第一个匹配元素内部区原创 2022-06-26 02:49:25 · 26766 阅读 · 0 评论 -
JavaScriptJQuery_jQuery链式编程
在jquery中,链式编程指的是对同一个元素一直进行函数操作;链式编程是将多行代码合并成一行代码,每一个合并的方法返回的结果是元素对象才可以进行链式编程,语法为“元素对象.方法().方法().方法()…;”。实现链式编程的核心,是对象中的每一个方法都会返回当前对象。链式编程:多行代码合并成一行代码,前提要认清此行代码返回的是不是对象,是对象才能进行链式编程链式编程:对象.方法().方法().方法();…//这是普通的事件绑定on函数的链式编程bind函数的链式编程混合使用为什么要使用链式原创 2022-06-25 04:00:01 · 29153 阅读 · 0 评论 -
JavaScriptJQuery_jQuery选择器
太长不看,简略表格版ID选择器#id就是利用DOM元素的id属性值来筛选匹配的元素,并以iQuery包装集的形式返回给对象。示例:元素选择器是根据元素名称匹配相应的元素。元素选择器指向的是DOM元素的标记名,也就是说元素选择器是根据元素的标记名选择的。示例:示例:示例:当使用并集复合选择器时,document里面有多个同名id时,将所有同名id元素输出,与id选择器不同当复合选择器不使用’,'逗号分隔时,是交集复合选择器,如("div.one")表示选取class="one"的,而...原创 2022-06-24 05:34:46 · 28002 阅读 · 0 评论 -
JavaScriptJQuery_jQuery简介
仓库:可以把很多东西放入这个仓库里面,找到东西只需要到仓库里查找到就可以了JavaScript:即library,是一个封装好的特定的集合(方法和函数).从封装一大堆函数的角度理解库,就是在这个库中,封装了很多预先定义好的函数在里面,比如动画animate,hide,show,比如获取元素等简单理解:就是一个js文件,里面对原生js代码进行了封装,存放到里面,这样我们可以快速高效的使用这些封装好的功能了.比如jQuery,就是为了快速方便的操作DOM,里面基本都是函数(方法)这些库都是对原生JavaScr原创 2022-06-24 04:42:49 · 26582 阅读 · 0 评论 -
JavaScriptAPI_轮播图的实现与封装
效果如下代码原创 2022-06-24 02:13:08 · 26458 阅读 · 0 评论 -
JavaScriptAPI_缓动动画原理及封装
自然界中的物体从起点移动到终点时,速度从来不是一成不变的。汽车启动时速度会由慢变快,停止时则由快变慢;篮球落地时会在地上来回反弹,并逐渐停止运动。大家都期待事物的呈现遵循一定的运动规律,所以,在网页中适当的使用动画能让用户得到更舒适的体验。要制作出更加自然的动画,就需要理解什么是缓动函数。简单来说,缓动函数用于控制动画从初始值运动到最终值的速率。核心原理: 通过定时器色图Interval()不断地移动盒子位置实现步骤示例不想写了,下次再写...原创 2022-06-22 05:27:10 · 26752 阅读 · 0 评论 -
JavaScriptAPI_offset(偏移量)、client(可视区)和 scroll(滚动)
偏移量(offset dimension)是javascript中的一个重要的概念。涉及到偏移量的主要是offsetLeft、offsetTop、offsetHeight、offsetWidth这四个属性。当然,还有一个偏移参照——定位父级offsetParent。 在理解偏移大小之前,首先要理解offsetParent。人们并没有把offsetParent翻译为偏移父级,而是翻译成定位父级,很大原因是offsetParent与定位有关定位父级offsetParent的定义是:与当前元素最近的经过定位原创 2022-06-22 04:30:06 · 27010 阅读 · 2 评论 -
JavaScriptAPI_JS执行机制
JavaScript执行机制,重点有两点:既然说js是单线程,那就是在执行代码的时候是从上往下执行的,先来看一段代码:javascript是一门单线程语言,在最新的HTML5中提出了Web-Worker, 但javascript是单线程这一核心扔未改变。所以一切javascript版的“多线程”都是用单线程模拟出来的,一切javascript多线程都是纸老虎最初设计JS是用来在浏览器验证表单操控DOM元素的是一门脚本语言,如果js是多线程的,那么两个线程同时对一个DOM元素进行了相互冲突的操作,那么浏览器原创 2022-06-22 02:35:09 · 26420 阅读 · 0 评论 -
JavaScriptAPI_this指向问题
JavaScript中的this是让很多开发者头疼的地方,而this关键字又是一个非常重要的语法点。毫不夸张地说,不理解它的含义,大部分开发任务都无法完成。想要理解this,你可以先记住以下两点:this永远指向一个对象;this的指向完全取决于函数调用的位置;第一点特别好理解,不管在什么地方使用this,它必然会指向某个对象;确定了第一点后,也引出了一个问题,就是this使用的地方到底在哪里,而第二点就解释了这个问题,但关键是在JavaScript语言之中,一切皆对象,运行环境也是对象,所以函数都是在某个原创 2022-06-22 02:13:28 · 26263 阅读 · 0 评论 -
JavaScriptAPI编程_JS定时器(setTimeout&setInterval)
JavaScript 定时器,有时也称为“计时器”,用来在经过指定的时间后执行某些任务,类似于我们生活中的闹钟。在 JavaScript 中,我们可以利用定时器来延迟执行某些代码,或者以固定的时间间隔重复执行某些代码。例如,您可以使用定时器定时更新页面中的广告或者显示一个实时的时钟等。JavaScript 中提供了两种方式来设置定时器,分别是 setTimeout() 和 setInterval(),它们之间的区别如下:JS setTimeout() 函数用来在指定时间后执行某些代码,代码仅执行一次。JS原创 2022-06-22 02:00:20 · 26406 阅读 · 0 评论 -
JavaScriptAPI编程_History对象(获取浏览历史)
JavaScript history 对象中包含了用户在浏览器中访问过的历史记录,其中包括通过浏览器浏览过的页面,以及当前页面中通过加载的页面。我们可以通过 window 对象中的 history 属性来获取 history 对象,由于 window 对象是一个全局对象,因此在使用window.history时可以省略 window 前缀,例如window.history.go()可以简写为history.go()。下表中列举了 JavaScript history 对象中常用的属性及其描述:示例下表中列原创 2022-06-21 05:34:58 · 29965 阅读 · 0 评论 -
JavaScriptAPI编程_Location对象(获取URL)
JavaScript location 对象中包含了有关当前页面链接(URL)的信息,例如当前页面的完整 URL、端口号等,我们可以通过 window 对象中的 location 属性来获取 location 对象。由于 window 对象是一个全局对象,因此在使用window.location时可以省略 window 前缀,例如window.location.href可以简写为location.href。下表中列举了 JavaScript location 对象中常用的属性及其描述:属性 描述hash原创 2022-06-21 05:26:55 · 26912 阅读 · 0 评论 -
JavaScriptAPI编程_Screen对象(获取屏幕信息)
JavaScript screen 对象中包含了有关计算机屏幕的信息,例如分辨率、宽度、高度等,我们可以通过 window 对象的 screen 属性来获取它。由于 window 对象是一个全局对象,因此在使用window.screen时可以省略 window 前缀,例如window.screen.width可以简写为screen.width。下表中列举了 JavaScript screen 对象中常用的属性及其描述:示例如下获取屏幕的宽度和高度可以使用 screen 对象的 width 和 heig原创 2022-06-21 05:22:30 · 26680 阅读 · 0 评论 -
JavaScriptAPI编程_Navigator对象(获取浏览器信息)
JavaScript navigator 对象中存储了与浏览器相关的信息,例如名称、版本等,我们可以通过 window 对象的 navigator 属性(即 window.navigator)来引用 navigator 对象,并通过它来获取浏览器的基本信息。由于 window 对象是一个全局对象,因此在使用window.navigator时可以省略 window 前缀,例如window.navigator.appName可以简写为navigator.appName。下表中列举了 JavaScript nav原创 2022-06-21 05:16:11 · 26890 阅读 · 0 评论 -
JavaScriptAPI编程_BOM(浏览器对象模型)
浏览器对象模型(Browser Object Model,简称 BOM)是 JavaScript 的组成部分之一,BOM 赋予了 JavaScript 程序与浏览器交互的能力。window 对象是 BOM 的核心,用来表示当前浏览器窗口,其中提供了一系列用来操作或访问浏览器的方法和属性。另外,JavaScript 中的所有全局对象、函数以及变量也都属于 window 对象,前面介绍的 document 对象也属于 window 对象。如果 HTML 文档中包含框架( 或 标签),浏览器会为 HTML 文档原创 2022-06-21 05:10:37 · 26174 阅读 · 0 评论 -
JavaScriptAPI编程_事件
JavaScript使我们有能力创建动态页面,而事件是可以被JavaScript侦测到的行为.简单理解:触发—响应机制.网页中每个元素都可以产生某些可以触发JavaScript的事件,例如,我们可以在用户点击某个按钮时产生一个事件,然后去执行某些操作事件是由三部分组成,事件源,事件类型,事件处理程序.我们也称为事件三要素示例注册事件/绑定事件注册事件概述给元素添加事件,称之为注册事件或者绑定事件注册事件有两种方式:传统方式和方法监听注册方式传统注册方式利用on开头的事件,例如oncli原创 2022-06-21 04:43:59 · 26232 阅读 · 0 评论 -
JavaScriptAPI编程_获取元素_节点操作
JavaScript获取元素的方式大致有两种这两种方法都能获取到元素,但是节点操作更简单更有逻辑性网页中所有内容都是节点(标签,属性,文本,注释等),在DOM中,节点使用node来表示.HTML DOM树中的所有节点均可通过JavaScript进行访问,所有HTML元素(节点)均可被修改,也可以创建或删除.一般而言,节点至少拥有nodeType(节点类型),nodeName(节点名称),和nodeValue(节点值)这三个基本属性示例示例示例parentNode.children(非标准)原创 2022-06-21 04:42:16 · 26221 阅读 · 0 评论 -
JavaScriptAPI编程_Element对象(元素对象)
当网页加载时,浏览器就会自动创建当前页面的文档对象模型(DOM),并将文档的所有部分(例如元素、属性、文本等)组织成一个逻辑树结构(类似于族谱),逻辑树的每一个分支的终点称为一个节点,每个节点都包含一个对象使用 Document 对象中提供的方法(例如 getElementsByTagName()、getElementById()、getElementsByClassName() 等)可以得到 Element 对象,在 Element 对象中同样也提供了一系列方法和属性,来操作文档中的元素或者元素中的属性。原创 2022-06-19 04:58:03 · 26153 阅读 · 0 评论 -
WebAPI编程_DOM
DOM在实际开发中主要用来操作元素获取页面中的元素可以使用以下几种使用getElementById()方法可以获取带有特定ID的元素对象语法:var element=document.getElementById(id);参数element是一个Element对象,如果当前文档中拥有特定ID的元素不存在,则返回nullid是大小写敏感的字符串,代表了所要查找的元素唯一ID返回值返回一个匹配到ID的DOM Element对象,若在当前Document下没有找到,则返回null返回带有指定标原创 2022-06-18 03:11:48 · 25585 阅读 · 0 评论 -
JavaScript网页编程_API和WebAPI
API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,无需理解其内部工作机制细节,只需直接调用使用即可。举例解释什么是API。例如, C语言中有一个函数 fopen()可以打开硬盘上的文件,这个函数对于我们来说,就是一个C语言提供的打开文件的工具。 javascript中有一个函数alert()可以在页面弹一个提示框,这个函数就是js提供的一个弹框工具原创 2022-06-18 03:09:28 · 25833 阅读 · 0 评论 -
JavaScript基础语法_JavaScript简单类型和复杂类型
简单类型又叫做基本数据类型或者值类型,复杂类型又叫做引用类型。堆栈空间分配区别:JavaScript中没有堆栈的概念,但是通过堆栈的方式,可以让大家更容易理解代码的一些执行方式,便于将来学习其他语言。函数的形参也可以看做是一个变量,当我们把一个值类型变量作为参数传给函数的形参时,其实是把变量在栈空间里的值复制了一份给形参,那么在方法内部对形参做任何修改,都不会影响到的外部变量。复杂类型传参函数的形参也可以看做是一个变量,当我们把引用类型变量传给形参时,其实是把变量在栈空间里保存的堆地址复制给了形参,形原创 2022-06-17 05:17:14 · 25333 阅读 · 0 评论 -
JavaScript基础语法_JavaScript内置对象
在 JavaScript 中可以使用十进制、十六进制或八进制表示法来表示整数或浮点数。与其它编程语言不同,JavaScript 中的数字并不区分整数和浮点数,统一使用 IEEE754 标准(二进制浮点数算术标准)的 64 位浮点格式表示数字,能表示的最大值(Number.MAX_VALUE)为 ±1.7976931348623157e+308,最小值(Number.MIN_VALUE)为 ±5e-324。示例:对于比较大的数字可以使用指数表示法来表示,例如 6.02e+23 等于 6.02 x 10²³原创 2022-06-17 05:01:44 · 25461 阅读 · 0 评论 -
JavaScript基础语法_JavaScript对象
JavaScript 是一种面向对象的编程语言,在 JavaScript 中几乎所有的东西都是对象。因此,要想有效的使用 JavaScript,首先需要了解对象的工作原理以及如何创建并使用对象。我们可以将对象看作是一个属性的无序集合,每个属性都有一个名称和值(键/值对)。我们知道,数组是值的集合,每个值都有一个数字索引(从零开始,依次递增)。对象类似与数组,不同的是对象中的索引是自定义的,例如 name(姓名)、age(年龄)、gender(性别)等。可以使用花括号{ }来创建对象,{ }中用来定义对象中的原创 2022-06-17 03:52:25 · 25218 阅读 · 0 评论 -
JavaScript基础语法_JavaScript作用域及预解析
当我们不确定有多少个参数传递的时候,可以使用arguments来获取参数,在JavaScript中,arguments实际上它是当前函数的一个内置对象,所有函数都内置了一个arguments对象,arguments对象中储存了传递的所有实参.arguments展示形式是一个伪数组,因此可以进行遍历,伪数组具有以下特点;示例:通常来说,一段程序代码中所有用到的名字并不总是有效和可用的,而限定这个名字的可用性的代码范围就是这个名字的作用域,作用域的使用提高了程序逻辑的局部性,增强了程序的可靠性,减少了名字冲突原创 2022-06-17 03:17:11 · 25072 阅读 · 0 评论 -
JavaScript基础语法_JavaScript函数
在JS里面,可能会定义非常多的相同代码或者功能相似的代码,这些代码可能需要大量重复使用,虽然for循环语句也能实现一些简单的重复操作,但是比较具有局限性,此时我们就可以使用JS中的函数函数就是封装了一段可以被重复调用执行的代买块,通过代码块可以实现大量代码的重复使用示例如上,我们没要计算一个累加,就需要写一段大致相同的代码,这样不仅劳累而且无意义,当我们拥有函数,就可以用使用函数将上面的代码封装,以重复使用输出函数声明需要以 function 关键字开头,之后为要创建的函数名称,function原创 2022-06-16 06:07:16 · 25281 阅读 · 1 评论 -
JavaScript基础语法_JavaScript数组和冒泡排序
数组(array)是按次序排列的一组值。每个值的位置都有编号(从0开始),整个数组用方括号表示。上面代码中的a、b、c就构成一个数组,两端的方括号是数组的标志。a是0号位置,b是1号位置,c是2号位置。除了在定义时赋值,数组也可以先定义后赋值。任何类型的数据,都可以放入数组。上面数组arr的3个成员依次是对象、数组、函数。如果数组的元素还是数组,就形成了多维数组。数组的本质本质上,数组属于一种特殊的对象。typeof运算符会返回数组的类型是object。上面代码表明,typeof运算符认为数组的原创 2022-06-16 05:37:53 · 24988 阅读 · 0 评论 -
JavaScript基础语法_JavaScript循环
让指定的代码重复的执行 JavaScript中主要有三种循环for循环主要用于把某些代码循环若干次,通常跟计数有关,其语法结构如下for 循环中包含三个可选的表达式 initialization、condition 和 increment,其中:示例上面的代码中,在循环开始之前会先执行var i = 1;,并将变量 i 作为计数器;然后判断i ......原创 2022-06-16 04:02:20 · 25238 阅读 · 1 评论 -
JavaScript基础语法_JavaScript流程控制
在一个程序执行的过程中,各条代码的执行顺序对程序结果是有直接影响的,很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能简单理解: 流程控制就是来控制我们的代码按照说明结构孙旭来执行流程控制主要有三种结构,分别是顺序结构,分支结构和循环结构,这三种结构代表三种代码执行的顺序顺序结构是程序中最简单,最基本的流程控制,它没有特定的语法结构,程序会按照==代码的先后顺序,依次执行,程序中大多数的代码都是这样执行的由上到下执行代码的过程中,根据不同的条件,执行不同的路径代码,(执行代码多选一的过程)从原创 2022-06-16 03:27:24 · 24741 阅读 · 0 评论 -
JavaScript基础语法_JavaScript操作符
JavaScript 拥有如下类型的运算符。算术运算符使用数值(字面量或者变量)作为操作数并返回一个数值.标准的算术运算符就是加减乘除(+ - * /)。当操作数是浮点数时,这些运算符表现得跟它们在大多数编程语言中一样(特殊要注意的是,除零会产生Infinity)。比较运算符比较它的操作数并返回一个基于表达式是否为真的逻辑值。操作数可以是数字,字符串,逻辑,对象值。字符串比较是基于标准的字典顺序,使用Unicode值。在多数情况下,如果两个操作数不是相同的类型, JavaScript 会尝试转换它们为恰原创 2022-06-16 02:45:45 · 25178 阅读 · 0 评论 -
JavaScript基础语法_JavaScript数据类型
== JavaScript拥有动态类型,也就意味着相同的变量可以用作不同的类型==简单数据类型JavaScript中的简单数据类型及其说明JavaScript 数字类型既可以用来保存整数值,也可以保存小数值(浮点数)数字型进制数字前面加0表示八进制,数字前面加0x表示十六进制数字型范围JavaScript中数值的最大值和最小值alert(number.Max_value); //1.797631348623157e+308aler(Number.Min_value); //5e-324inf原创 2022-06-10 01:54:55 · 24962 阅读 · 0 评论 -
JavaScript基础语法_JavaScript变量
变量就是可以变化的量,量指的是事物的状态,比如人的年龄、性别,游戏角色的等级、金钱等等为了让计算机能够像人一样去记录事物的某种状态,并且状态是可以发生变化的详细地说:程序执行的本质就是一系列状态的变化,变是程序执行的直接体现,所以我们需要有一种机制能够反映或者说是保存下来变量的使用分为两步赋值var是一个js关键字,用来声明变量(variable变量的意思).使用该关键字声明变量后,计算机会自动为变量分配内存空间,不需要程序员管变量值是程序员保存到内存空间的值变量案例有个叫德玛的人原创 2022-06-08 04:05:35 · 24810 阅读 · 0 评论