#Web前端开发入门
Web开发零基础,入门内容学习与分享!
Web学习指南——Bible01
言行物恒
潜心从修......
展开
-
Web前端开发笔记57——拷贝对象、多库共存、jQuery插件
1.拷贝对象:一个示例(原先无数据):一个示例(原先有数据):当原先target有数据的时候,我们会覆盖相同属性值。2.深拷贝和浅拷贝的区别:上面的存储方式是浅拷贝,会将复杂数据类型的地址拷贝给目标对象,修改时会影响原对象。深拷贝,自己会指向自己的对象地址,以获取对象,防止出现修改到原对象的情况。3.多库共存:4.插件的引入。这里我们引入一个插件:图片懒加载。我们使用就jQuery插件库EasyLazyload。需要注意的是:将原创 2021-05-24 09:58:54 · 112 阅读 · 0 评论 -
Web前端开发笔记56——节流阀(互斥锁)、事件处理、事件对象
1.我们在执行某些动作的时候,可能会触发多个方法,此时我们就要用到节流阀。这和我们之前原生JS中所说的一样,设置一个flag,不过如何开关,什么时候开关是我们需要关注的,我们一般可以用到动画执行完毕回调函数,即animate(fn(){})中的函数方法。就可以防止多方法触发的情况。2.单事件注册:3.多事件注册:<div>clickme</div><script> $("div").on({ mouseover: funct原创 2021-05-23 13:34:15 · 941 阅读 · 2 评论 -
Web前端开发笔记55——jQuery的元素操作、尺寸位置操作
元素操作主要包含创建、添加、删除等操作。创建元素添加元素<div class="content"> <div>我是原本就是存在的1</div> <div>我是原本就是存在的2</div> <div>我是原本就是存在的3</div> <div>我是原本就是存在的4</div> <div>我是原本就是存在的5</div>&原创 2021-05-21 12:51:28 · 146 阅读 · 4 评论 -
Web前端开发笔记54——属性操作、内容文本值修改、元素操作、each的用法
1.每一个元素都有自己自带的属性值。我可以通过prop来获取或修改:2.上面获取的方法只能运用在元素自带的属性上。但是如果有自定义的属性,我们就需要用到attr方法了。改方法也可以获取到H5自定义属性。3.数据缓存data()的使用方法。用法展示:...原创 2021-05-20 13:01:14 · 267 阅读 · 0 评论 -
Web前端开发笔记53——Jquery动画效果,鼠标hover方法的简单用法
1.显示效果的语法规范:2.隐藏效果同理。下面使用上面的显示隐藏做一个效果:<div class="div1"> 隐藏效果</div><button id="showorhidebtn"> click me to change show or hide.</button><script> $("#showorhidebtn").click(function () { if ($(..原创 2021-05-19 11:11:18 · 584 阅读 · 1 评论 -
Web前端开发笔记52——Jquery修改css样式的方法,类样式方法、className和JQ类操作区别
1.有三种修改css的写法。需要注意的是:第三种写法,如果是复合属性则必须采取驼峰命名法,如果值不是数字,则需要加引号。2.设置类样式方法:第三种类型可以用于,一会儿关闭一会切换的实现。...原创 2021-05-18 10:46:16 · 275 阅读 · 0 评论 -
Web前端开发笔记51——jQuery排他思想、获取当前元素索引、链式编程
1.Jquery的排他思想我们使用一个示例来演示一下:<body><button>"click"</button><button>"click"</button><button>"click"</button><button>"click"</button><button>"click"</button><button>"click"</bu原创 2021-05-16 13:21:07 · 203 阅读 · 2 评论 -
Web前端开发笔记50——jQuery基础选择器、this元素的写法、入口函数
1.JQ选择器:2.JQ的隐式迭代:3.筛选选择器:4.JQ筛选方法:选择第几个元素的两种写法(后者更推荐):5.JQ中的this。写法:$(this),jq当前元素 this不要加引号。原创 2021-05-09 22:30:34 · 163 阅读 · 0 评论 -
Web前端开发笔记49——jQuery入门
1.页面加载完毕使用jQuery的两种办法:2.‘$’的意思:jquery的顶级对象$.其实它的表示的就是:jQuery。由上可知,$和jQuery的意义是相同的。3.jquery对象和DOM对象:jquery对象和DOM对象的相互转换:...原创 2021-05-09 20:22:23 · 113 阅读 · 0 评论 -
Web前端开发笔记48——jQuery概述
1.JS库的概念:仓库:可以把很多东西放到这个仓库里面。找东西只需要到仓库里面查找到就可以了。常见的JS库:2.jQuery的概念:jQuery出现的目的就是加快前端人员的开发速度,我们可以非常方便的调用和使用它,从而提高开发效率。3.jQuery的优点:...原创 2021-05-09 20:05:18 · 119 阅读 · 0 评论 -
Web前端开发笔记47——classList、本地存储sessionstorage和Localstorage
切换类的作用在于,当检测到没有定义类的时候会添加,如果有此类的话,就将其去掉。这个功能,我们只支出ie10以上操作,但是对于某些开关功能的操作,就很方便了。1.原创 2021-05-09 19:57:28 · 199 阅读 · 0 评论 -
Web前端开发笔记46——动画原理、缓动效果、页面返回特定位置
1.动画原理:最核心的原理,通过定时器(setInterval)不断移动盒子位置。原创 2021-05-09 19:22:10 · 354 阅读 · 4 评论 -
Web前端开发笔记45——三大偏移量元素的总结、mouseenter和mouseover和mouseleave
页面的滚动距离使用的是:pageXOffset、pageYOffset。1.mouseenter和mouseover区别。原因在于mouseover会冒泡,而mouseenter阻止了冒泡。原创 2021-05-06 21:39:01 · 163 阅读 · 0 评论 -
Web前端开发笔记44——元素偏移量offset、偏移量client、立即执行函数、scroll属性、页面滚动
1.offset与style的区别原创 2021-05-06 21:28:41 · 252 阅读 · 0 评论 -
Web前端开发笔记43——location对象、navigator对象、history对象
1.location的相关属性:注解:锚点链接:2.页面跳转的两种方法:assign和replace。3.页面的重载方法:4.navigator对象5.history对象原创 2021-05-06 17:15:46 · 131 阅读 · 0 评论 -
Web前端开发笔记42——计时器、this指向问题、JS执行机制
1.计时器分‘计时’和‘倒计时’:以上是转自MDN上的解释。2.this指向的三种情况:3.JS执行机制:问题的抛出:同步和异步操作:4.JS的执行过程:5.多个异步任务的处理过程:由于主线程不断的重复获得任务、执行任务、再获取任务、再执行,所以这种机制被称为事件循环。...原创 2021-05-06 16:47:43 · 169 阅读 · 0 评论 -
Web前端开发笔记41——事件创建和删除、DOM事件流、鼠标键盘事件
1.事件监听的方式:原创 2021-05-04 14:54:44 · 117 阅读 · 0 评论 -
Web前端开发笔记40——DOM操作总结
回顾:原创 2021-05-04 12:47:59 · 165 阅读 · 0 评论 -
Web前端开发笔记39——H5自定义属性、节点操作、父节点
1.自定义的方法:同样,我们可以使用setAttribute来设置属性。2.获取自定义属性的方法:3.在我们之前的getElementById的方法和TagName以及query的方法较为麻烦,我们使用节点的操作来批量获取。4.element.parentNode获取离element最近的父亲节点。如果获取不到,即返回null。5.子节点获取:但是,其会获取所有的子节点、元素节点、以及文本节点等等。6.子节点的另一种方法:<ul>原创 2021-05-04 12:41:39 · 573 阅读 · 1 评论 -
Web前端开发笔记38——事件三要素、操作元素、样式修改、属性值的获取设置和移除
1.改变元素内容:2.innerText和innerHTML区别:innerText不识别元素标签,但是innerHTML可以。3.修改属性:4.修改表单属性:5.this的使用,可以使用this来表示当前对象。var textPut = document.getElementById('textline'); var btn1 = document.getElementById('btn1'); btn1.onclick = function ...原创 2021-05-01 18:53:01 · 174 阅读 · 0 评论 -
Web前端开发笔记37——DOM元素获取
1.文档对象模型(DOM),是W3C组织推荐的处理可扩展标记语言的标准编程接口。原创 2021-05-01 12:50:33 · 141 阅读 · 0 评论 -
Web前端开发笔记36——数据类型内存分配
1.null值赋给变量,会使变量变为空的对象类型。假如有一个对象,暂时不知道放啥,可以使用null赋值。2.复杂数据类型:预先知识:原创 2021-04-30 22:16:29 · 75 阅读 · 1 评论 -
Web前端开发笔记35——字符串对象
1.字符串的不可变:指的是里面的值不可变,虽然看上去内容变化了,但只是地址变化了。2.根据位置返回字符:示例:var str = 'this';console.log(str.charAt(2));console.log(str.charCodeAt(2));console.log(str[2]);3.判断一个字符串种的不同字符的出现次数,并显示最大的那一项,示例:var newOb = {}; var str = "dkjjfkffdss"; ..原创 2021-04-30 21:44:34 · 139 阅读 · 2 评论 -
Web前端开发笔记34——内置对象
1.JS中常见对象:2.在学习内置对象时,我们主要要学会自查官方文档,如MDN、W3C均可。3.Math相关方法和属性:注:四舍五入,在负数情况下,是往大了取值的。4.random随机数:获取两个数之间的某个随机整数,公式如下:Math.random()*(max-min+1)+min;//获取min~max之间的某个随机浮点数,此时在使用floor取整即可。最终公式为:Math.floor(Math.random() * (max - min + 1)) + mi原创 2021-04-30 19:58:21 · 115 阅读 · 1 评论 -
Web前端开发笔记33——构造函数
1.构造函数就是把我们对象里面一些相同的属性和方法抽象出来封装到函数里面。语法格式:调用时使用:new 构造函数名();示例:function Func(uname, age, sex) { this.uname = uname; this.age = age; this.sex = sex; } var lder = new Func('DRLDER', 18, '男'.原创 2021-04-30 17:38:04 · 660 阅读 · 1 评论 -
Web前端开发笔记32——预解析与对象
预解析:对象:1.创建对象的方法:对象字面量:使用{}来定义一个对象。 可以使用类似于数组的方法。使用new Object方法2.调用对象的方法:对象名.内变量名 对象名['内变量名']...原创 2021-04-30 16:58:46 · 69 阅读 · 1 评论 -
Web前端开发笔记31——作用域
1.全局作用域:整个script标签或者一个独立的js文件。2.局部作用域:在函数内部就是局部作用域,这个代码的名字只在函数内部起效果和作用。不同作用域下,不会受到影响。作用也在此,减少冲突。 当在局部作用域中直接使用一个变量,不声明的情况下,我们默认它为全局变量。3.创建对象(使用键值对的方式排列,并使用‘,’来分割):var obj = { name: 'DRLDER', age: 18, sex: 'male',原创 2021-04-30 15:03:14 · 118 阅读 · 0 评论 -
Web前端开发笔记30——函数
1.函数声明:2.函数调用:3.函数的封装:4.实参和形参的区别:function getSum(num1,num2){ if(num1>num2){ console.log("error:num2<num1!"); return false; }else { var sum=num1; fo原创 2021-04-30 14:40:18 · 410 阅读 · 2 评论 -
Web前端开发笔记29——数组
1.创建数组,使用:var arr=new Array();var arr=[];创建数组的两种方法。2.添加元素及访问数组:var arr = [1, 2, '3', 'String1', true]for (var i = 0; i < arr.length; i++) { console.log(typeof arr[i]);}上面的例子,使用了遍历数组的方法,完整的展示了arr的创建、取值、及遍历的编码过程。3.增加数组长度的方法:通过修改arra原创 2021-04-30 13:00:54 · 544 阅读 · 1 评论 -
Web前端开发笔记28——循环语句
1.for循环:原创 2021-04-30 11:10:33 · 300 阅读 · 0 评论 -
Web前端开发笔记27——JS中的流程控制语句
1.if语句2.if..else..语句以上两个语句的格式如下:if(){...}else{...}if语句可以单独存在。3.if..else if..else if..else..语句一个if后面可以接无数个else if最后加入else语句。格式如下:if(){...}else if(){...}else{...}4.三元表达式:...原创 2021-04-30 10:44:36 · 120 阅读 · 0 评论 -
Web前端开发笔记26——JS中的运算符
1.运算符也被称为操作符,是用于实现赋值、比较和执行算数运算等功能的符号。注:浮点数数值的最高精度是17位小数,但在进行算术计算时其精度远远不如整数。不要直接判断两个浮点数是否相等。<script> var num = 0.3; var num1 = 0.1 + 0.2; console.log(num == num1); </script>注:其结果为false。2.自增和自减,使用num++或num--原创 2021-04-30 10:01:45 · 172 阅读 · 1 评论 -
Web前端开发笔记25——JS中的变量类型
1.数字中的最大值和最小值Number.MAX_VALUE和Number.MIN_VALUE。原创 2021-04-28 14:30:53 · 187 阅读 · 0 评论 -
Web前端开发笔记24——css定位、元素的隐藏
1.隐藏的3种方法:display、visibility、overflow。其中display可以让元素原先的位置失去,而visibility不会让位置消失。原创 2021-04-27 23:27:41 · 87 阅读 · 0 评论 -
Web前端开发笔记23——居中【归纳篇】
1.页面文字或内容居中,使用text-align,进行相对盒子的内容居中,盒子最好为块模式。2.页面的顶端居中,使用margin:0 auto,进行盒子内元素的居中,元素不可以为浮动类型。3.页面的元素绝对居中(即页面横纵居中),使用:position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);...原创 2021-04-27 23:26:40 · 1096 阅读 · 0 评论 -
Web前端开发笔记22——浮动的相关注意点、清楚浮动、css书写顺序、页面布局
之前我们都是用父盒子来限定高度的,在实际开发中,我们可能不一定知道具体的高度。 但是,由于父级盒子很多情况下,不方便给高度,但是子盒子浮动又不占位置,最后父级盒子高度为0,就会影响下面的标准流盒子。清楚浮动后,父级就会根据浮动的子盒子自动检测高度。父级有了高度,就不会影响下面的标准流了。2.清除浮动:清楚浮动的策略是:闭合浮动。主要的几种方法: 总结:3.css书写顺序:4.页面的布局:...原创 2021-04-20 16:06:28 · 121 阅读 · 0 评论 -
Web前端开发笔记21——float浮动
1.传统网页布局的三种方式:普通流(标准流) 浮动 定位2.标准流:就是标签按照规定好默认方式排列。3.多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动。4.float属性用于创建浮动框,将其移动到一边,直到左边缘或右边缘触及包含块或另一个浮动框的边缘。5.浮动特性:脱离标准普通流的控制(浮)移动到指定位置(动),(俗称脱标) 浮动的盒子不再保留原先的位置。浮动具有行内块元素的特点。如果给行内元素或是其他类型元素添加浮动,那么就会让此元素具有行内块元素相似的原创 2021-04-19 23:16:02 · 1183 阅读 · 0 评论 -
Web前端开发笔记20——盒子模型与阴影
1.网页布局过程:先准备好网页元素,网页元素基本都是盒子box。 利用ccss设置好盒子样式,然后摆放到相应位置。 往盒子里面装内容。2.盒子的组成部分:3.表格的细线边框:border-collapse属性控制浏览器绘制表格边框的方式。控制相邻单元格的边框。语法:border-collapse:collapse;collapse是合并的意思。边框会影响盒子的大小。4.padding的复合写法:内边距会影响盒子大小。为了保证盒子跟效果图大小保持一致,则让w原创 2021-04-19 22:18:31 · 525 阅读 · 0 评论 -
Web前端开发笔记19——css三大特性
1.层叠性,一般在定义了多个相同选择器的不同样式时,会优先选择最近的样式来采用。2.继承性,父类选择器的样式会运用在子类上。注:行高继承,在之前我们学过font:font-style font-weight font-size/line-height font-family,这个语法,我们当时写line-height的时候都是以px结尾的,如果我们使用1.5,会是什么样的状态呢?<style> div{ font: 12px/1.5 "Mic原创 2021-04-19 12:49:35 · 132 阅读 · 0 评论 -
Web前端开发笔记18——背景
1.背景颜色:background-color属性,其值如果是transparent即为透明,也可以手动指定背景颜色为其它。<style> div{ width: 200px; height: 200px; background-color: darkgray; } </style>2.背景图片:background-image属性,设置背景图片。语法:background-image:none|url3.原创 2021-04-18 18:31:57 · 918 阅读 · 0 评论