- 博客(89)
- 收藏
- 关注
RSS订阅原创 前端模拟数据分页效果
父组件index.vue<template> <div class="main"> <el-table :data="newTableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> </el-table-column> <el-table-column prop="name" label.
2022-05-31 17:38:35
430
原创 CSS中的nth-child()属性
first-child、last-child、nth-child、nth-last-child、nth-of-typefirst-child，last-child可直接使用，例如 ul li:first-child，ul li:last-child，但是其余的选择都需要在后面加入()，例如ul li:nth-child(n); ->选中ul元素下面第n个li元素，且n是从1开始的，这里和JavaScript中的eq()不同，eq选择也是从第1个开始的，但是索引值是从0开始1、fi...
2021-10-27 15:11:33
30289
2
转载 jQuery实现无刷分页/不跳转分页
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>分页</title> </head> <body> <div class="lmian_bot"> <div class="lmian_bot_ul"> ...
2021-10-22 18:01:02
197
原创 body高度小于屏幕高度时，使footer固定在底部
// 当body小于屏幕高度时 使footer固定在底部 $(document).ready(function() { if ($(document.body).height() < $(window).height()) { $('.footerAll').addClass('footerLess'); } }) $(window).resize(function() { if ($(document..
2021-09-27 18:05:33
157
原创 获取元素指定类名的下标
$(".wdTypeMenu a").hover(function(){ var _index = $(this).index();//获取下标(索引值) $(this).addClass("wdTypeMenuColor").siblings().removeClass("wdTypeMenuColor"); $(".typeMenuListAll .typeMenuList").eq(_index).addClass("show").siblin...
2021-09-27 17:55:48
340
原创 关于图片损坏检测处理/图片路径错误显示默认图片
最近工作的时候框架用的TP5+jquery；页面的整个数据都是从后端一次传过来的，不能直接在img标签上面去添加onerror事件；也试过获取页面需要检测的所有图片，循环判断添加onerror事件，发现添加成功后页面刷新会进入死循环，这里给大家推荐一种方法$(document).ready(function(){ $('.mainContent img').each(function(){ //获取需要判断的所有图片并且循环判断 var error = f
2021-08-24 15:34:27
316
转载 js获取浏览器可视区域的宽度
在没有声明DOCTYPE的IE中，浏览器显示窗口大小只能以下获取：document.body.offsetWidthdocument.body.offsetHeight在声明了DOCTYPE的浏览器中，可以用以下来获取浏览器显示窗口大小：document.documentElement.clientWidthdocument.documentElement.clientHeight网页可见区域宽： document.body.clientWidth;网页可见区域高： document.b
2021-08-09 14:20:45
2890
原创 移动端高度兼容iPhoneX
varheight=window.screen.height;console.log(height);varfooter=document.querySelector("footer");if(height>670){footer.style.marginTop=`5.2rem`;//此处改为自己需要的间距（此处使用的是模板字符串）}移动端rem可以参考我的另一篇文章：rem使用的方法...
2021-08-04 11:06:01
141
原创 JS中的浅拷贝与深拷贝案例
浅拷贝浅拷贝：仅复制了引用，彼此之间的操作会互相影响let obj1 = { name:"李四", age:"18", sex:"女", score:"89", car:["奔驰","宝马","奥迪"] } let obj2 = {}; function simpleClone(a,b){ for(var k in a){ b[k] = a[k..
2021-07-19 17:18:29
125
转载 JS中的继承
1什么是继承继承是一种类(class)与类之间的关系,JS中没有类,但是可以通过构造函数模拟类,然后通过原型来实现继承，继承是为了实现数据共享，js中的继承当然也是为了实现数据共享。 继承是子类继承父类的特征或者行为，使子类也具有父类的属性和方法; 或者子类从父类继承方法，使得子类具有父类相同的行为 继承可以使得子类具有父类的各种属性和方法，而不需要再次编写相同的代码。2 通过原型实现继承2.1案例一function Person1(name,age,sex)...
2021-07-19 15:26:05
1441
1
原创 js实现身份证号查询相关信息
HTML部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t.
2021-07-19 14:11:22
644
5
转载 [万字逐步详解]使用 webpack 打包 vue 项目（优化生产环境）
[万字逐步详解]使用 webpack 打包 vue 项目（优化生产环境）之前在 [万字逐步详解]使用 webpack 打包 vue 项目（基础生产环境） 中比较详尽的手把手带着过了一遍 production 环境的部署，以及在 [万字逐步详解]使用 webpack-dev-server + ESLint 配置 vue 项目的开发环境中过了一遍使用 webpack-dev-server 配置开发环境，以及使用 ESLint 去提高代码质量的过程。webpack 配置最后一节就讲一下怎么提高生产环境中打.
2021-07-14 10:34:54
388
转载 [万字逐步详解]使用 webpack-dev-server + ESLint 配置 vue 项目的开发环境
[万字逐步详解]使用 webpack-dev-server + ESLint 配置 vue 项目的开发环境在上一篇[万字逐步详解]使用 webpack 打包 vue 项目（基础生产环境）中，一步一步的完成了基础生产环境的配置，这里就是对开发环境的配置进行实现了。本次会使用到的依赖只有 webpack-dev-server 和 ESLint 相关的插件，这里会用 webpack-dev-server 去进行开发环境的配置，并且配合 ESLint 实现以下功能：开发环境的配置 Source M..
2021-07-14 10:01:06
195
转载 [万字逐步详解]使用 webpack 打包 vue 项目（基础生产环境）
[万字逐步详解]使用 webpack 打包 vue 项目（基础生产环境）本次项目属于练手项目，使用的是 vue-cli 新建的新手引导页面，项目本身没有特别复杂的逻辑，而且这里也不涉及到 Vue 的学习，只是会通过逐步分解完成使用 webpack 对项目完成最终的打包。本次会使用到的 插件(plugins) 和 加载器(loaders) 有：webpack & webpack-clivue-loader & vue-template-compilerstyle-loade
2021-07-12 15:47:21
3252
转载 这些前端基础题你能答对几道？(测试你的基础掌握,附答案解析[中])
第 11 题：var name = "erdong";var object = { name: "chen", getNameFunc: function () { return function () { return this.name; } }}console.log(object.getNameFunc()());解析：// 输出erdong// 复制代码object.getNameFu
2021-07-12 14:32:54
116
转载 这些前端基础题你能答对几道？(测试你的基础掌握,附答案解析 [上集])
在三大框架盛行的时代, 基本上会个Vue就能在小公司浑水摸鱼。但是当想突破的时候就会意识到基础的重要性。JavaScript中有很多重要特性及概念。比如原型,原型链,this,闭包,作用域,隐式转换等等。如果不能熟练掌握,在进阶中级前端开发工程师的道路上必定是困难重重。用一个小时把这些题做完。检测一下你的基础掌握程度。正题第 1 题if(false){ var a = 1; let b = 2;}console.log(a);console.log(b);解
2021-07-12 14:18:39
84
原创 js去除多余的空格
var str = document.querySelectorAll(".game_article p"); var newStr = ''; function clearTrim(){ for(var i=0;i<=str.length;i++){ //判断图片是否存在 var ImgObj = new Image(); ImgObj[i].src = imgurl; .
2021-07-09 16:55:19
260
转载 JavaScript进阶教程(6)—硬核动图让你轻松弄懂递归与深浅拷贝
目录一、递归1.1 概念1.2 出口1.3 递归经典问题：递归求斐波那契数列1.4 递归经典问题：递归求阶乘1.5 递归求一个数字各个位数上的数字的和1.6 递归遍历DOM树二 深浅拷贝2.1 浅拷贝2.2 深拷贝2.3 如何区分深拷贝与浅拷贝？2.3.1 浅拷贝：仅复制了引用，彼此之间的操作会互相影响2.3.2 深拷贝：在堆中重新分配内存，不同的地址，互不影响三 总结一、递归1.1 概念递归简单的来说就是程序自己调用自己，就像下面这幅
2021-07-09 16:48:59
88
转载 JavaScript进阶教程(5)-一文让你搞懂作用域链和闭包
目录1 作用域2 作用域链3 预解析3.1 变量预解析3.2 函数预解析4 闭包4.1 闭包小案例：4.2 闭包点赞案例5 闭包的作用6 闭包导致的一些问题6.1 第一：使用更多的闭包6.2 第二种方法：使用了匿名闭包6.3 第三种方法：使用用ES2015引入的let关键词6.4 第四种方法：使用forEach()来遍历7 性能8 总结1 作用域在JS中变量可以分为局部变量和全局变量，对于变量不熟悉的可以看一下我这篇文章：ht.
2021-07-09 15:05:05
124
原创 Jquery懒加载
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script src.
2021-07-09 11:05:59
207
原创 搞懂JavaScript全局变量与局部变量，看这篇文章就够了
目录1.什么是全局变量和局部变量2.全局变量和局部变量的声明2.1全局变量的声明2.2 局部变量的声明3.全局变量和局部变量一些常见问题3.1全局变量跟局部变量重名3.2零散变量的问题3.3. 变量释放问题总结：1.什么是全局变量和局部变量全局变量：常常定义在函数外部，拥有全局作用域，即在 JavaScript 代码的任何地方都可以访问。局部变量：定义在函数内部，只能在函数中使用的变量，作用范围是从函数开始到结尾，即在｛｝里。在函数内声明的变量只...
2021-07-09 10:57:10
2459
2
原创 数组排序方法
第一种var arr= [2,3,14,5,32,5,2,1,5,6,8,23,9]; arr.sort(function(a,b){ return a - b; }) console.log(arr);第二种：使用高阶函数 作为参数排序//作为参数排序案例 var arr1 = [1,100,20,200,50,40,45,60,10]; arr1.sort(function(obj1,obj2){ if.
2021-07-08 18:02:38
61
转载 JavaScript进阶教程(4)-函数内this指向解惑call()，apply()，bind()的区别
目录1 函数的定义方式1.1 函数声明1.2 函数表达式1.3 函数声明与函数表达式的区别1.4 构造函数Function（了解即可，一般不用）2 函数的调用方式3 函数内this的指向4 call、apply、bind4.1 call，apply4.1.1 新的函数调用方式apply和call方法4.1.2 apply和call可以改变this的指向4.2 call，apply使用4.3 bind4.4 总结5 函数的其它成员(了解)..
2021-07-08 17:19:44
166
转载 一道被前端忽略的基础题，不信看你会几题
前言为了追求更高的境界，看我们忽略了多少的基础知识！！！下面我们就来看一看，瞧一瞧。 function Foo () { getName = function () { alert(1) } return this } Foo.getName = function () { alert(2) } Foo.prototype.getName = function () { alert(3) } var getName = function () { alert
2021-07-08 14:20:01
53
转载 JavaScript 进阶教程(3)---让你彻底搞懂原型链和继承
1 原型链1.1 原型关于原型在JS面向对象编程这篇文章已经讲过了，今天简单来复习一下。1.1.1 什么是原型?在JS构造函数中有一个属性prototype,叫做原型,这是给程序员使用的。在JS实例对象中有一个属性__proto__,它也是原型,这是供浏览器使用的,它不是标准的属性。实例对象中的__proto__指向的是该实例对象中的构造函数中的prototype，构造函数中的prototype里面的属性或者方法,可以直接通过实例对象调用。一般情况下，实例对象.__proto__..
2021-07-08 10:31:44
117
转载 JavaScript 进阶教程(1)--面向对象编程
目录1 学习目标2面向对象介绍2.1什么是对象(1) 对象是单个事物的抽象。(2) 对象是一个容器，封装了属性（property）和方法（method）。2.2 什么是面向对象2.3 JavaScript 中面向对象的基本体现3 JavaScript 如何创建对象3.1 字面量方式3.2 简单方式的改进：工厂函数3.3 更优雅的工厂函数：构造函数3.4 构造函数代码执行过程3.5构造函数和实例对象的关系3.6构造函数的问题4原型...
2021-07-06 16:41:38
81
原创 响应式布局
HTML部分：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>响应式页面入门教程：Albert Yang</title> <link rel="sty
2021-07-05 18:00:19
101
原创 键盘控制DIV移动
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>键盘.
2021-07-05 12:02:06
52
原创 99乘法口诀表
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>99.
2021-07-05 10:01:08
156
原创 字符串中出现次数最多的字符
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
2021-07-02 15:27:06
92
原创 js判断 有些数字的立方的末尾正好是该数字本身
有些数字的立方的末尾正好是该数字本身。比如：1,4,5,6,9,24,25,…请你计算一下，在10000以内的数字中（指该数字，并非它立方后的数值），符合这个特征的正整数一共有多少个。function num(n){ var count = 0; for(var i=0;i<n;i++){ var result = Math.pow(i,3); var res = result.toString(); .
2021-07-02 11:23:26
286
转载 vue踩坑总结 & 优化点
最近连着做了好几个vue项目，从0到版本迭代，vue教程算是好理解，把vue官方文档看一遍下来，基本上不会有什么大问题（嗯如果你看的够仔细够透彻的话），此篇是记录vue踩过的坑以及可以优化的地方。1.踩坑1.1.深拷贝/浅拷贝这实际上算不上vue的问题，算是js基础没打好的坑吧。先来看一个简单的例子：let obj = {name:'fiona-SUN'};let copyObj = obj;copyObj.name = 'fiona';console.log(cop.
2021-06-30 17:47:55
1856
1
转载 VScode设置编辑器背景图片
最近在知乎上看见有人设置了vscode编辑器的背景图片，觉得很新鲜，就尝试以一下，倒是成功了。1.首先在vscode扩展中，找到background这个插件，快捷键Ctrl+shift+x2.完成第一步就已经有默认背景了，可是想设置自己喜欢的怎么办？往下看打开 文件>首选项>设置在右侧设置里"background.enabled": true,"background.useDefault": false,"background.custom.
2021-06-29 14:58:30
792
原创 外部的jQuery链接
外部的jQuery链接，引入即可使用百度：<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>google：<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>cdn加速：<script src="https://cdn.bo
2021-06-22 10:09:08
1500
原创 点击小图切换大图
<div class="contents"> <h1 class="tt">{$data.title}</h1> <div class="topImg"> <img src="" /> </div> <div class="bottomImg"> <foreach name="$data['image_lis
2021-06-15 13:48:31
348
原创 五分钟搞懂Vuex
这段时间一直在用vue写项目，vuex在项目中也会依葫芦画瓢使用，但是总有一种朦朦胧胧的感觉。于是决定彻底搞懂它。看了一下午的官方文档，以及资料，才发现vuex so easy！作为一个圈子中的人，决定输出一下文档，如果你仔细看完这篇文章，保证你对vuex熟练掌握。先说一下vuex到底是什么？vuex 是一个专门为vue.js应用程序开发的状态管理模式。这个状态我们可以理解为在data中的属性，需要共享给其他组件使用的部分。也就是说，是我们需要共享的data，使用vuex进行统一集中式的管理
2021-06-10 17:36:15
86
原创 底部位置固定
主体内容部分高度不够，我们需要对主体部分的内容进行一下判断，让底部部分固定<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initi
2021-06-02 11:41:45
183
转载 js获取浏览器可视区域的宽度
在没有声明DOCTYPE的IE中，浏览器显示窗口大小只能以下获取：document.body.offsetWidthdocument.body.offsetHeight在声明了DOCTYPE的浏览器中，可以用以下来获取浏览器显示窗口大小：document.documentElement.clientWidthdocument.documentElement.clientHeight网页可见区域宽： document.body.clientWidth; 网页可
2021-06-02 10:54:58
1011
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人