KlayChan-CSDN博客

原创 JS中数组和字符串方法的简单整理

注：注意数组和字符串的方法是否改变原数据，以及操作返回值一、数组unshift() /push()shift() /pop()splice()slice()concat()reverse()sort()toString()join()indexOf()lastIndexOf()forEach()map()reduce()filter()find()some()every()1、数组的基本方法（增、删、改、排会改变原数组，截、拼、转不影响原数组）增：unshif

2020-10-13 18:12:35 225

原创避免在同一元素使用v-if、v-for

很多场景下我们需要在同一元素上使用v-if、v-for，但这会出现渲染效率变低等问题，eslint校验规则也会报错误提示开发中的常见错误用法：在开发中需要在同一元素使用v-if 、v-for的两种情况，我们可以这样处理：（例子摘自vue风格指南）为了过滤一个列表中的项目 (比如 v-for=“user in users” v-if=“user.isActive”)。在这种情形下，请将 users 替换为一个计算属性 (比如 activeUsers)，让其返回过滤后的列表。为了避免渲染本应该被隐藏

2020-07-18 16:50:28 315

原创 git绿色、红色图标不显示的问题

https://blog.csdn.net/weixin_42723925/article/details/81162249?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task太管用了

2020-03-12 16:53:20 302

原创 css选择器中:first-child与:first-of-type的区别

:first-child选择器是css2中定义的选择器，从字面意思上来看也很好理解，就是第一个子元素。比如有段代码：<div> <p>第一个元素</p> <h1>第二个元素</h1> <span>第三个元素</span> <span>第四个元素</

2018-10-30 21:27:34 291

转载 JQUERY 获取 DIV 宽度与高度（width,padding,margin,border）

一般讲的宽度指的是内容宽度，但一个 div 的实际宽度不仅只于内容宽度，尤其在做 CSS 排版时更不能搞错，必须同时考虑 Padding、Border 与 Margin 的宽度，四个加起来才是 div 真正占有的宽度。JQUERY 获取 DIV 宽度与高度（width,padding,margin,border）全都有了！var content = $(‘div’). width();//只...

2018-10-30 12:22:59 588

转载 css实现两栏布局，左侧固定宽，右侧自适应的七种方法

一个面试会问的问题，如何实现两个盒子，左侧固定宽度，右侧自适应。下面是实现的其中方法：1、利用 calc 计算宽度的方法css代码如下：.box{overflow: hidden;height: 100px;margin: 10px 0;}.box&gt;div{height: 100%;}#box1&gt;div{float: left;}.left1{width: 100px;b...

2018-10-17 19:01:01 959

转载 querySelector()和querySelectorAll()

querySelector()和querySelectorAll()是两个原生的选择符。querySelector()用于接收一个css选择符，返回与该模式匹配的第一个元素；querySelectorAll()返回所匹配到的所有元素。大家会问已经有getElementById（）和getElementsByTagName（）了吗，这两个新增加的选择符API意义在哪？对比而言，query选择符...

2018-10-14 23:38:25 301

转载原生 JS 获取元素的尺寸和位置

关于元素的尺寸和位置，这原本是 CSS 干的事，但更多的时候需要用 JavaScript 来获取这些参数，比如一个很好的例子 js 实现的图片瀑布流。在介绍 JS 中的例子之前，先来说明一下 css 中的元素尺寸。CSS 中的 width 和 height先开个头吧，一个元素所占据的物理尺寸包括以下几个部分，由内到外分别是内容，padding，border，margin，这些值加到一起才算是...

2018-10-13 21:16:33 1790

转载 document.documentElement和document.body的区别

网页中获取滚动条卷去部分的高度，可以通过 document.body.scrollTop 来获取，比如使div跟着滚动条滚动：<div id="div" style="width:100px;height:100px;background:#ccc;position:absolute;"></div>window.onscroll = function (){ ...

2018-10-13 15:55:04 162

转载 CSS图片下面有间隙的解决方案

在进行页面的DIV+CSS排版时，遇到IE6（当然有时Firefox下也会偶遇）浏览器中的图片元素img下出现多余空白的问题绝对是常见的对於该问题的解决方法也是「见机行事」，根据原因的不同要用不同的解决方法，这里把解决直接把解决image图片布局下边的多余空隙的BUG的常用方法归纳，供大家参考。1、将图片转换为块级对像即设置img为：display：block；在本例中添加一组CSS...

2018-10-11 15:24:48 1111

原创 css属性选择器*=,|=,^=,$=的区别

总结:“value是完整单词” 类型的比较符号: ~= , |=“拼接字符串” 类型的比较符号: *= , ^= , $=1.attribute属性中包含value:[attribute~=value] 属性中包含独立的单词为valuee.g:[title~=flower] --&gt; &lt;img src="/i/eg_tulip.jpg" title="tul...

2018-10-11 14:56:15 883

原创 H5获取用户位置API + 百度地图API介绍

一. Geolocaiton API 功能介绍Geolocation接口是一个用来获取设备地理位置的可编程的对象,它可以让Web内容访问到设备的地理位置,这将允许Web应用基于用户的地理位置提供定制的信息.出于安全考虑,当一个Web页尝试获取地理位置信息时, 会请求用户批准地理位置访问权限, 每个浏览器都有自己请求用户批准该权限的策略和方法.二. Geolocation API 使用说明G...

2018-10-03 15:28:44 3704

转载 slice() 与 splice()区别

slice()1.1（1）接受一个参数是：返回从该参数指定位置开始到当前数组末尾的所有项；（2）接受两个参数是：返回起始和结束位置之间的项，但是不包括结束位置的项。注意：slice()不会影响原数组1.2start 要抽取的片断的起始下标。如果是负数，则该参数规定的是从字符串的尾部开始算起的位置。也就是说，-1 指字符串的最后一个字符，-2 指倒数第二个字符，以此类推。end ...

2018-10-02 22:38:34 247

转载 SEO基础知识：H1标签

H1标签什么是H1标签？&lt;H1&gt;标签通常是页面上可见的第一个标题标签，它通常位于页面上的标签层次结构的顶部。为了让文字脱颖而出，h1标签的格式与页面标签的其余部分不同。这是一个h1标签的例子：理解标签使用的更简单的方法是想象你正在写一个文档，文档的主要标题是&lt;h1&gt;，次标题&lt;h2&gt;和子标题&lt;h3&gt;。在网页开发和

2018-09-26 21:18:00 1268

原创 CSS3中3d转换与2d转换的区别（translate3d rotate3d）

3d转换 translate3d rotate3d2d转换和3d转换区别：多了一个参数表示3d在移动端使用3d转换可以优化性能（如果设备有3d加速引擎 GPU 可以提高性能 , 2d转换是无法调用GPU）...

2018-09-24 15:51:20 2722 1

原创 css动画与js动画的区别

使用动画（js实现动画，css3实现动画）+ 一个是帧动画一个是补间动画+ 什么是帧动画：使用定时器每隔一段时间更改当前元素的状态+ 什么是补间动画：过渡(加过渡只要状态发生改变产出动画) 、动画（多个节点来控制动画），性能会更好+ 在支持H5C3的的浏览器尽可能使用css3动画（移动端开发）CSS动画优点：1、浏览器可以对动画进行优化。（1）浏览器使用与 req...

2018-09-21 10:42:55 2320

转载 transition、transform和animation的区别

Transform在部分的test case当中，每每演示transform属性的，看起来好像都是带动画。这使得小部分直觉化思维的人（包括我）认为transform属性是动画属性。而恰恰相反，transform属性是静态属性，一旦写到style里面，将会直接显示作用，无任何变化过程。transform的主要用途是用来做元素的特殊变形，对于做设计的人来说并不是很陌生，简单的来说就是css 的图形...

2018-09-21 10:08:14 1699

原创 Webstorm 分屏操作

在编辑网页的时候对照html文件去编写css会更加直观在webstorm中如何分屏进行编写呢1、正常打开文件是不会分屏的2、右键需要分屏的文件3、点击垂直拆分是左右分屏，水平拆分是上下分屏（我用的是汉化版）split vertically是左右分屏 split horizontally是上下分屏（英文版）4、分屏后的效果如图所示...

2018-09-21 09:32:51 16888 2

原创 jQuery的插件引入顺序问题

今天想用jQuery的fullpage插件做个小demo，却掉进了个大坑，折腾了半天才爬出来，哭唧唧。现在开始我的掉坑之旅：1、引用css文件<link rel="stylesheet" href="css/fullpage.css">2、引用相关js文件<script src="js/fullpage.js"></script><scr

2018-09-20 20:37:43 1853

转载自定义input[type="radio"]的样式

对于表单，input[type=“radio”] 的样式总是不那么友好，在不同的浏览器中表现不一。对单选按钮自定义样式，我们以前一直用的脚本来实现，不过现在可以使用新的伪类 :checkbox 来实现。如果直接对单选按钮设置样式，那么这个伪类并不实用，因为没有多少样式能够对单选按钮起作用。不过，倒是可以基于单选按钮的勾选状态借助组合选择符来给其他元素设置样式。很多时候，无论是为了表单元素统一...

2018-09-19 20:29:53 2866

转载 CSS3伪类与伪元素的区别及注意事项

CSS中伪类与伪元素的概念是很容易混淆的今天就来谈谈伪类与伪元素之间的区别定义首先先来看看伪类与伪元素的定义w3c中对于它们是这么解释的伪类：用于向某些选择器添加特殊的效果伪元素：用于将特殊的效果添加到某些选择器讲道理，可能我语文不好，我觉得这两句话是等价的

2018-09-19 20:05:35 213

转载 jQuery 中$.ajax $.get $.post 和$.getJSON 的区别和用法

1、$.ajax 是 jQuery 底层 AJAX 实现，$.ajax是一种通用的底层封装，$.ajax()请求数据之后，则需要使用回调函数，有beforeSend、error、dataFilter、success、complete等。2、$.get $.post是简单易用的高层实现，我们使用$.get $.post方法，jQuery会自动封装调用底层的$.ajax。3、$.get 只处理简单...

2018-09-19 16:29:58 448

转载 js中的事件委托或是事件代理详解

起因：1、这是前端面试的经典题型，要去找工作的小伙伴看看还是有帮助的；2、其实我一直都没弄明白，写这个一是为了备忘，二是给其他的知其然不知其所以然的小伙伴们以参考；概述：那什么叫事件委托呢？它还有一个名字叫事件代理，JavaScript高级程序设计上讲：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。那这是什么意思呢？网上的各位大牛们讲事件委托基本上都用了同...

2018-09-19 09:55:19 139

原创结合Bootstrap 的 jquery.twbsPagination.js动态页码分页

1、引入js文件jquery.twbsPagination.js<script type="text/javascript" src="plugins/page/jquery.twbsPagination.js"></script>2、html里面添加类应用bootstrap的样式<div class="text-center"><div i

2018-09-18 21:37:38 824

转载 php入门变量之变量的间接引用、连接字符串和连接赋值运算符

【1】变量的间接引用：<?php $a = 'b'; $$a = '123'; echo $b;?>上面的输出结果是123我们可以看到在第二行代码中多了一个$，并通过指定的名称访问变量，指定的名字存储在$a('b')中，并把这个变量$b的值更改为123。因此，这样的$b的变量被创建和赋值。通过在变量的前面增加附加的$标记，你可以任意增加引用的次数。【2】连接字符串：...

2018-09-17 19:33:09 747

原创解决Undefined variable: _SESSION的方法

对于初次使用session的人来说可能会遇到Undefined variable: _SESSION这样的错误，错误原因是因为没有开启session。因为php中的session默认是不开启的，需要在程序中开启才能使用。PHP错误：PHP Notice: Undefined variable: _SESSION原因及解决方法遇到Undefined variable: _SESSION 错误的原...

2018-09-15 16:11:21 4266

原创 jquery中attr和prop的区别

在高版本的jquery引入prop方法后，什么时候该用prop？什么时候用attr？它们两个之间有什么区别？这些问题就出现了。关于它们两个的区别，网上的答案很多。这里谈谈我的心得，我的心得很简单：对于HTML元素本身就带有的固有属性，只存在true/false的属性在处理时，使用prop方法，访问的是。对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法，访问的是元素...

2018-09-13 16:21:27 170

转载 javascript 之布尔类型及转换

基本值(原始值)原始的布尔类型boolean有两个值： false 和 true。> typeof false'boolean'> typeof true'boolean'创建布尔值的方式1、直接用字面量var a = false;var b = true;2、用Boolean函数，将其他任意值转换成对应的原始布尔值。> a =...

2018-09-11 09:33:05 5320 1

转载 php 中使用include、require、include_once、require_once的区别

在PHP中，我们经常会通过include、require、include_once、require_once来引用文件，都可以达到引用文件的目的，但他们之间又有哪些区别呢，接一下我们详细的介绍一下1、include ：使用include引用外部文件时，只有代码执行到include代码段时，调用的外部文件才会被引用并读取，当引用的文件发生错误时，系统只会给出个警告错误，而整个php文件会继续执行...

2018-09-07 15:09:55 214

原创 Sublime Text3批量更改文件内容

用过sublime的应该都知道，在一个文件中想修改几个相同的元素， 1、选中想修改的元素后，一直按住 ctr + D 可以选中所有的相同元素，。 2、 ctr + F 再点击右下角的Find All但这时有更恶心的需求出现了，修改目录中的多个文件的相同元素，有没有感觉头有点冷？？有需求就有供应，当然有解决这个问题的方法：1、在sublime里面你的项目文件中找到你想要搜索的文件...

2018-09-06 23:19:16 9256 1

原创在apache中设置访问目录后进入的默认页面

接触Apache不太久，今天写了一个index.php文件，打开地址一直打不开这个文件，可能是之前一直产生一种错觉，以为进入网站的默认页面是index，其实是index.html，下面看一下默认的Apache配置文件内容<IfModule dir_module> DirectoryIndex index.html </IfModule>找到apache的配...

2018-09-06 15:41:01 3191

转载解决修改httpd配置文件Options Indexes FollowSymLinks仍然无法禁止访问网站目录

由于一些特殊需求或者安全考虑，需要禁止用户访问网站目录，所以需要改httpd.conf配置文件。一般来说，命令如下：vim /etc/httpd/conf/httpd.conf找到目录标签下的 Options Indexes FollowSymLinks行，去掉Indexes，即改为 Options FollowSymLinks 如果是阿里云服务器的话，你需要：v...

2018-09-06 12:31:55 3437

原创跨域请求之JSONP 和CORS

JSONPJSON with padding ,是一种借助于script 标签发送跨域请求的技巧。其原理就是在客户端接住 script 标签请求服务端的一个动态网页（PHP文件），服务端的这个动态网页返回一段带有函数调用的JavaScript 全局函数调用的脚本，将原本需要返回给客户端的数据传递进去。客户端 https://blog.csdn.net/KleyChan/users-li...

2018-09-05 18:19:47 466 1

转载 JS中短路运算符&&和||

在JS函数中我们经常会使用到短路运算符，主要是逻辑与（&&）和逻辑或（||）1、逻辑与 && 的运算方式var a = 5 && 6;console.log(a); //返回的结果为 6如果逻辑与运算符左边的值布尔转换后为true，那么返回右边的值（不管右边的值是真还是假）。var a = false &&...

2018-09-04 15:04:10 448

转载前端开发如何独立解决跨域问题（下篇）

背景跨域是由浏览器同源策略引起的，是指页面请求的接口地址，必须与页面url地址处于同域上（即域名，端口，协议相同）。这是为了防止某域名下的接口被其他域名下的网页非法调用，是浏览器对JavaScript施加的安全限制。这个措施出发点是好的，但在项目开发的过程中，常常给前端开发者带来麻烦。由于页面开发中，静态资源是放在本地电脑上的，访问这些资源通常通过IP方式（127.0.0.1）或者loc...

2018-09-01 00:03:10 293

转载解决前端开发在前后端分离过程中的跨域问题（上篇）

现在的web工程越来也大，传统的开发模式已经显得捉襟见肘了，不仅开发人员在开发过程中很痛苦，后期维护的人员也更痛苦。怎么解决呢？前后端分离。在前后端开发过程中一直会伴随我们的问题就是跨域问题，因为这时候前端和后端的代码是在不同机器上运行的，两个地址不在一个域名下，这个时候前端脚本在进行ajax访问的时候浏览器就会报跨域相关的错误。这个时候怎样解决呢？最简单的做法是通过设置浏览器允许浏览器跨域...

2018-08-31 23:43:35 1093

转载 JS 之回调函数深入理解

在Javascript中，函数是第一类对象，这意味着函数可以像对象一样按照第一类管理被使用。既然函数实际上是对象：它们能被“存储”在变量中，能作为函数参数被传递，能在函数中被创建，能从函数中返回。因为函数是第一类对象，我们可以在Javascript使用回调函数。在下面的文章中，我们将学到关于回调函数的方方面面。回调函数可能是在Javascript中使用最多的函数式编程技巧，虽然在字面上看起来它...

2018-08-30 12:07:45 343

转载 AJAX 中 GET 和 POST 的区别

当我们不通过重新加载页面，用Ajax访问服务器的时候，有两个选择可以将请求信息传送到服务器上。这两个选择分别是GET和POST。在把请求信息发送到服务器上以加载新的页面时，这两个选择有两个不同之处。第一个区别是你是请求了信息的一小部分而不是整个页面。第二个区别也是最明显的区别是由于Ajax请求不会出现在地址栏中，因此当发送请求时，在访问者的屏幕上是看不出什么异同的。使用GET生成调用不会暴露域...

2018-08-25 18:57:37 319

转载如何使用Git Bash Here，将本地项目传到github上

在创建完成自己的库之后，下面就要让自己的电脑克隆一个自己所创建的库，方面自己电脑上的代码同步到GitHub你所创建的库当中。为了实现，就需要安装一个软件，Git Bash。 (注意不要安装在有中文的路径中，不然会出现提示Could not load icon)下面我就介绍一下这个软件的安装，以及简单的配置。git-scm.com 首先进入GitHub官网，下载适合自己电脑的版本...

2018-08-18 13:24:30 2377

原创新版Chrome无法添加来自此网站的应用，拓展程序怎么办

右击 Chrome 桌面快捷方式选择“属性”,在打开的选项卡中选择“快捷方式”选项卡，然后在”目标”一栏尾部添加参数” –enable-easy-off-store-extension-install”（注意–之前的空格），然后再运行浏览器就可以像以前那样正常安装 Web Store 之外的第三方扩展应用及脚本程序了。（不过我安装完成后感觉双击Chrome快捷方式后打开的响应很慢，所以安装完果断...

2018-08-14 22:04:08 2057

空空如也

空空如也