- 博客(38)
- 收藏
- 关注
RSS订阅原创 前端复习第二周专栏
这里写目录标题1.说一说 this 绑定2.说一说闭包3.原型和原型链 -- 为什么要有原型链4.DOM 事件机制5.类型转换 ---- 笔试常考6.作用域 与 作用域链7.说一说js实现继承的方法8.异步加载js有哪几种方式9.垃圾回收机制10.对象的深拷贝11.Array类型的判断以及instanceof的判断机制12.事件流与事件委托(代理)13.js跨域的几种方法（原理和代码）14.new 和 Object.create()区别15.函数防抖和节流16.array，对象，字符串等的Js
2020-05-14 22:40:10
217
原创 opacity,visibility=hidden以及display=none的区别
opacity=0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件的visibility=hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件display=none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉一样。...
2020-05-04 21:52:43
239
原创 前端复习第一周
1. meta 标签 – 透彻理解 name 和 http-equiv 相关作用首先说一下我对meta标签的理解，meta标签主要是用于SEO（搜索引擎优化）的，meta元素可提供有关页面的信息，比如针对搜索引擎和更新频度的内容提要和关键词。然后name和http-quiv的侧重点不同，name属性name属性主要用于描述网页，比如它的值参考链接...
2020-05-03 23:29:09
349
原创 字体图标使用以及追加
字体图标我们知道，在网页中有很多的小图标，类似于下图的购物车图标，这些图标并不是图片，而是一种字体，是由开发者自己引入并且使用的。使用方法首先，我们在icomoon字库下载好相应的文件，解压打开：将上面的四个文件加入到项目中在html文件中加如如下代码：(引入外部css文件也可以)<style> @font-face { ...
2020-03-25 16:28:11
414
1
原创 前端代码规范
代码规范HTML规范基于 W3C、苹果开发者 等官方文档，并结合团队业务和开发过程中总结的规范约定，让页面HTML代码更具语义性。图片规范了解各种图片格式特性，根据特性制定图片规范，包括但不限于图片的质量约定、图片引入方式、图片合并处理等，旨在从图片层面优化页面性能。CSS规范统一规范团队 CSS 代码书写风格和使用 CSS 预编译语言语法风格，提供常用媒体查询语句和浏览器私有属性引用...
2020-03-25 14:31:04
139
原创 网站小图标
1. 使用ico图标首先把favicon.ico 这个图标放到根目录下。再html里面， head 之间 引入 代码。 <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/> 2. 制作ico图标我们可以自己做的图片，转换为 ico图标，以便放到我们站点里面。方法步骤：...
2020-03-25 14:27:36
168
原创 保持数组中的每个元素与其索引相互对应的最好方法-哈希表
问题背景：leetcode第一题“两数之和”最容易想到的方法当然是暴力法了，直接上代码var twoSum = function(nums, target) { var result = new Array(); for (var i = 0; i < nums.length; i++) { for (var m = i+1; m < nums.le...
2020-03-08 22:13:31
246
原创 给ul添加li(其他的创建子节点也大概是这样)
function addToUl(result) { while(myUl.hasChildNodes()){ //清空上一次留下的ul myUl.removeChild(myUl.firstChild); } for(let i = 0 ; i < result.length ; i++){ let myLi = document...
2020-02-21 11:31:17
947
原创 JS中的排序
sort() 方法用原地算法对数组的元素进行排序，并返回数组比如const array1 = [1, 30, 4, 21, 100000];array1.sort();console.log(array1);// expected output: Array [1, 100000, 21, 30, 4]如果要进行数值的排序，那么需要自己构造一个函数var points = [40...
2020-02-15 16:52:15
150
原创 不使用正则表达式的方式实现一个字符串头尾去除空格(需要去除的空格包括全角、半角空格)
function diyTrim(str) { var result = ""; if(str == null) return "" ; // 去除前面所有的空格 while( str[0] == ' ' || str.charCodeAt(0) == 12288 ) { str = str.substr...
2020-02-15 16:37:57
256
原创 js获得当前选中输入框的行数
<label>String A: <input id="radio-a" type="radio" checked="true" name="str-obj" value="a"> </label> <textarea id="str-a"></textarea> ...
2020-02-15 16:33:41
1126
原创 常用的处理数字方法(Math方法和Number方法)
1.Math方法Math方法对Math对象进行数学处理Math对象无需定义，直接就可以使用。例如：Math.abs(x)会返回x的绝对值以上取自https://www.w3school.com.cn/jsref/jsref_obj_math.asp2.Number方法1：Number对象Number 对象是原始数值的包装对象。如何创建Number对象？var myNum=ne...
2020-02-15 16:17:58
468
原创 JavaScript 中的各个数据类型
变量和数据类型变量1：推荐使用let来声明变量2：需要注意引用类型和值类型的区别如图：我想获得这个input的值如果这样写，那么num1的值就会是空值，因为这里的num1就是个值类型的数据，这里定义的时候input为空，那么num1自然也是空值。应该如下图这样写，然后num1.value来获得input的值3：Value = undefined在计算机程序中，被声明的变量经常...
2020-02-15 15:52:10
157
原创 JavaScript 的事件机制以及事件代理
背景：这次的任务如上图所示，给出的方法就是最常见的操作dom然后获取nodeList数组，通过对数组进行一一访问来操作。接下来的要求是：使用事件代理来完成上面的要求。百度前端学院给到的教程：https://www.cnblogs.com/liugang-vip/p/5616484.html我觉得已经很详细了。说一下我的大概理解吧。所谓事件代理，简单的来说就是为了减少DOM操作节省内...
2020-02-11 23:29:44
100
原创 按下Enter键自动执行Button
背景代码如下在焦点在按钮上时，按Enter键会执行begin函数，但是这里会自动执行一次。原因：因为当按下Enter键的时候，浏览器的焦点就自动跳到下一个“可用”button上呢，焦点在button上时按下enter键就默认自动执行按钮绑定的函数了。解决方法：https://blog.csdn.net/sinat_36521655/article/details/100545123...
2020-02-11 13:38:13
1248
原创 querySelector和querySelectorAll以及getElement系列方法
1.引言刚开始接触这个是在百度的前端学院，当时的要求如下：我想，这样的要求就是为了让我们在学习会用这些API的时候同时体会他们的一些微小的区别。这一章的任务标题叫做“找到那个DOM”，顾名思义，这些API的作用就是在网页中找到相应的DOM节点。2.DOM树DOM节点分为三大类：元素节点、属性节点、文本节点；父节点，子节点以及兄弟节点百度可以查到。在操作时，需要先找到元素节点，再找属...
2020-02-10 19:57:40
748
1
原创 document.querySelector和querySelectorAll方法
querySelector和querySelectorAll是W3C提供的 新的查询接口，其主要特点如下：1、querySelector只返回匹配的第一个元素，如果没有匹配项，返回null。2、querySelectorAll返回匹配的元素集合，如果没有匹配项，返回空的nodelist(节点数组)。3、返回的结果是静态的，之后对document结构的改变不会影响到之前取到的结果。这两个方法...
2020-02-09 20:10:50
1229
原创 给input的提示值(placeholder)设置样式
背景：原本样式是这样的想要提示值的位置往左移动一下，添加如下代码：#third-search-input::-webkit-input-placeholder {padding-left: 20px;}当然了，也可以设置提示值颜色啊等等，自己试试吧。对了，我这里使用的是chrome浏览器::-webkit-input-placeholder{} /* 使用webkit内...
2020-02-05 16:27:58
1341
原创 关于设置背景图片路径的问题
背景：在给input设置背景图片时这个放大镜的图标一直加载不出来软件可以显示出来这个图片，但是在浏览器中就加载不出来，后来改成就可以了，具体原因我也不清楚，可能是因为之前的图片文件名跟别的重名了，加了个(2)的后缀导致的，重新命名就 ok了但是其实之前直接引用图片这样的命名时可以的但是作为元素的背景图片时这样的引入方式就不行。总结：以后对于文件的命名和路径还是要慎重且规范，以免...
2020-02-05 16:14:39
343
原创 需要设置横向排布的网页时
别傻乎乎的设置子元素为display=inline-block了！尝试将父元素的display设置为flex！也许会有很好的效果
2020-02-04 16:24:14
134
原创 将一个元素一直固定在父元素的底部
这次遇到的问题是：需要将一个元素放在div的底部，并且随着父级元素的变化不改变位置。如果使用absolute 来进行定位，就会使元素脱离文档流，在父元素变化时就可能会改变原来的位置，这时候可以使用flex布局来对元素进行定位。具体方法见https://blog.csdn.net/weixin_30915951/article/details/95007111...
2020-02-04 16:14:17
3014
原创 两个同一行的元素的对齐
背景：我把两个div设置成了inline-block，于是这时是默认在同一行的，但是这时候的图片的大大小会导致两个在视觉上不在同一条水平线上。刚开始我是对单个的设置margin-top属性，但是发现两个div同时下降了，原来是inline-block会迷人这两个div会在同一个水平线上，设置了margin-top就会使两个同时下降。这时候就想到了将这个脱离文档流来设置高度，即position...
2020-02-03 20:46:54
680
原创 CSS设置元素背景为半透明, 而其中的内容为不透明
不要用opacity属性, 例如textarea {text-align: center;width: 700px;height: 300px;opacity: 0.5;}这样会将textarea的背景连同其中的文字均设置为半透明。应该用下面的语句textarea {text-align: center;width: 700px;height: 300px;backgrou...
2020-01-31 14:57:05
272
原创 记录第一次使用PS
首先是没有注意到给到的psd文件在打开后悔出现这时应该要点击保留图层这样在右下方就能有很多已经给到我们的图层了，不用再花时间去提取图层了...
2020-01-30 21:07:18
148
1
原创 使用inline-block时遇到的换行问题
背景：出现了换行的情况，但是div的和就是100%后来知道问题是出在了inline-block上面，因为inline-block是包含空格、换行符的，所以种种原因会导致inline-block产生间距，即会出现换行。改正方法：1：在父元素中设置font-size=0但是这时候字就没有了，即使在子元素中增加自己的font-size也不行2：写在一行这时候就OK了...
2020-01-29 18:12:28
1642
原创 实现两栏及三栏布局的常见方法
两栏布局https://segmentfault.com/a/1190000010698609三栏布局https://www.zhangxinxu.com/wordpress/2009/11/%E6%88%91%E7%86%9F%E7%9F%A5%E7%9A%84%E4%B8%89%E7%A7%8D%E4%B8%89%E6%A0%8F%E7%BD%91%E9%A1%B5%E5%AE%BD%E...
2020-01-29 16:39:53
481
原创 浮动
更改图片为浮动后浮动元素 (这个例子中的 元素)会脱离正常的文档布局流，并吸附到其父容器的左边 (这个例子中的元素)。在正常布局中位于该浮动元素之下的内容，此时会围绕着浮动元素，填满其右侧的空间。浮动的元素也可以通过margin来控制位置tips：浮动的元素不用再设置display属性...
2020-01-28 19:46:19
94
原创 CSS盒子模型
注意：边距不计入框的实际大小-当然，它会影响框在页面上所占的总空间，而仅影响框外的空间。框的区域在边界处停止-不会延伸到边缘。如果您有两个边距相接的元素，且两个边距均为正，则这些边距将合并为一个边距，即最大单个边距的大小。如果一个或两个边距均为负数，则负值的数量将从总数中减去。padding位于边框和内容区域之间。与边距不同，您不能有负的填充量，因此该值必须为0或正值。应用于元素的任...
2020-01-28 18:54:32
83
原创 框在块和行内布局中的工作方式
元素的显示类型定义外部显示类型。这决定了框在相同格式上下文中如何与其他元素一起显示。它还定义了内部显示类型，该类型指示该元素内部的框的行为。盒子本身具有外部显示类型，因此它知道如何与其他盒子一起工作。然后，它具有内部显示类型，该类型可以更改其子代的行为方式。这些孩子然后也具有外部和内部显示类型。...
2020-01-28 18:36:30
77
原创 百度前端学院第四天笔记
我的代码显示效果tips:以前我还以为只有div才能加background，现在才知道原来很多都可以加，比如h1标签啊，p标签啊等等都可以
2020-01-28 11:54:46
162
原创 背景图片不能完全占据div的问题
背景描述：在对div进行设置背景图片时，下方出现留白，检查后发现觉得可能是因为div中添加元素的原因，后来上网查找原因对自己的代码进行修改这时就可以完全占据整个div了总结，在写css代码时，尽量设置好div的宽和高，有助于检查...
2020-01-28 11:11:23
1497
原创 百度前端学院第二天学习笔记
1.什么是CSS，CSS是如何工作的？当浏览器显示文档时，它必须将文档的内容与其样式信息结合。它分两个阶段处理文档：浏览器将 HTML 和 CSS 转化成 DOM （文档对象模型）。DOM在计算机内存中表示文档。它把文档内容和其样式结合在一起。浏览器显示 DOM 的内容。2.CSS的基本语法是怎样的3.CSS选择器是什么概念，简单选择器和属性选择器是什么选择器就是指定CSS要作用的...
2020-01-27 21:02:14
161
原创 今天用到的CSS属性
colorfont-familyfont-stylefont-weightfont-sizetext-aligntext-decorationtext-indentline-heighttext-shadow
2020-01-27 19:59:41
152
原创 百度前端学院第一天学习笔记
1、HTML是什么，HTML5是什么答：HTML 指的是超文本标记语言 (Hyper Text Markup Language)。HTML5是最新的HTML标准，拥有更丰富的语义、图形以及多媒体元素等内容。2、HTML元素标签、属性都是什么概念？答：HTML不是编程语言，是标记语言，所以要使用标记标签来描述网页。属性是用来提供HTML标签更多的信息。3、文档类型是什么概念，起什么作用？...
2020-01-27 19:00:41
112
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人