前端
关注
分享
扫一扫
专门记录html，css和jquery实现的常用功能
柚稚zr
每天都要学点新知识
展开
-
简单的vscode打开多个文件时实现标签栏多行显示
vscode打开多个文件时实现标签栏多行显示原创 2022-06-21 10:27:21 · 955 阅读 · 2 评论 -
JQuery实现鼠标划上文字悬浮效果
用JQuery实现鼠标划上文字悬浮效果原创 2022-06-16 09:59:21 · 2252 阅读 · 0 评论 -
VUE非父子组件通信
vue非父子组件通信原创 2022-05-25 17:18:03 · 847 阅读 · 0 评论 -
vue实现窗口拖拽
使用vue实现窗口的拖动，只要动态的修改窗口的left和top值原创 2022-05-24 10:17:23 · 3498 阅读 · 1 评论 -
angular6在ngFor限制条数
情景angular6在用for循环的时候限制条数解决方法1、*ngIf<div class="hot-img-div"> <div *ngFor="let i of showmusicList;let id = index" <div *ngIf="id>2"> </div> </div></div>注意：（1）*ngIf只能在子元素上使用，不能和ngFor用在同一个元素上（2）*ngIf原创 2022-01-05 11:27:53 · 641 阅读 · 0 评论 -
在angular中使用ng-zorro-antd组件
前言网上关于angular引用ng-zorro-antd的文章太少了，而且还是7版本的angular，安装的过程踩了不少的坑，特此记录1、安装ng-zorro-antdangular的初始化我就不赘述了，安装ng-zorro-antd的有一个重要的点就是一定要注意版本号！！！我的angular是7版本的，所以如果安装高版本的ng-zorro-antd会出问题，可以在ng-zorro-antd官网查看版本的支持关系安装语句npm uninstall ng-zorro-antd （卸载）npm原创 2021-12-31 14:48:45 · 3787 阅读 · 3 评论 -
angular8里使用window或者document事件
在angular8使用window或者domcument事件不能像在jq里使用一样符合angular的写法是ngOnInit(){}@HostListener("window:pageshow",["$event"]) onpageshow(event){ if(sessionStorage.getItem("need-refresh")){ location.reload(); sessionStorage.removeItem("need-refresh")原创 2021-11-04 16:05:52 · 1062 阅读 · 0 评论 -
vue使用路由，创建项目时没有选择安装路由
1、安装路由vue在创建项目的时候会让你选择时候需要路由，如果这里没有选择安装可以通过命令行npm install vue-router -g来安装路由，安装成功会提示版本，如下图2、在src下面新建vue文件和router.js页面写到vue文件里，router.js写路由相关的//1、引入vueimport Vue from 'vue';//2、引入vue-routerimport VueRouter from 'vue-router';//3、第三方库需要use一下才能用V原创 2021-11-03 15:31:18 · 2071 阅读 · 0 评论 -
vue的双向绑定和angular的双向绑定
1、vue的双向绑定vue的双向绑定比较方便一点，用v-modol指定<input v-model="message" placeholder="edit me"><p>Message is: {{ message }}</p>2、angular的双向绑定1、先在module里引入模块import { FormsModule, ReactiveFormsModule } from '@angular/forms';@NgModule({ declara原创 2021-11-01 17:21:50 · 382 阅读 · 0 评论 -
获取url中参数的值或者中文值
js function getQueryString (name) { // 如果链接没有参数，或者链接中不存在我们要获取的参数，直接返回空 if (location.href.indexOf("?") == -1 || location.href.indexOf(name + '=') == -1) { return ''; } // 获取链接中参数部分 var que原创 2021-08-19 15:20:38 · 663 阅读 · 0 评论 -
echarts的tooltip添加点击事件
给echarts的悬浮框tooltip 添加点击事件，需要注意以下几点1、修改triggerOn: ‘click’, enterable: true,triggerOn:'click', enterable:true, alwaysShowContent:true, // hideDelay:10000, formatter: function(params) { // return params.name + ' : ' + params.valu原创 2021-07-12 09:33:15 · 7141 阅读 · 1 评论 -
JS实现树形菜单
需求用JS实现树形结构，原本的数据是数组类型，需要先把数据进行处理，然后在页面上渲染DOM，注意点有以下几点：1、data必须含有id和fatherId来表示他们的层级关系2、js动态创建DOM的实现方式是先创建一个div，然后把生成的元素appendChild给这个div代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-eq原创 2021-07-07 17:56:57 · 3721 阅读 · 0 评论 -
JQ实现树形菜单
需求使用JQ实现简单树形菜单，点击展开收起，关键点有以下几点1、数据格式要正确2、树形结构主要是用了递归函数来进行的DOM渲染3、JQ拼接字符串的方式代码递归的部分有两个方法，一个是使用比较常见的for循环，另一个是使用forEach,使用使用forEach会简洁一些。以下为使用for循环的代码部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <原创 2021-07-07 17:50:02 · 1244 阅读 · 0 评论 -
去掉滚动条，保留滚动功能
文章目录前言代码总结前言去掉页面上的滚动条，但是依然可以滚动代码/* 去掉页面滚动条 */::-webkit-scrollbar { width: 0px!important; height: 0px!important; background-color: rgba(171, 171, 171, 0)!important; background-color: rgba(171, 171, 171, 0)!important; } ::-webkit-scro原创 2021-06-02 14:45:44 · 376 阅读 · 0 评论 -
JQuery实现简单的弹窗提醒
一 需求描述及效果图为了防止误发消息，所以在点击发送后弹出提示框，功能比较简单，所以直接用jq实现的。效果如图，点击按钮后弹出提示框，确认和取消都有自己的回调函数二 代码实现<!DOCTYPE html><head><meta charset="utf-8"><title>js confirm弹出框自定义样式</title><style> html,body { margin: 0;原创 2021-03-17 17:07:37 · 5813 阅读 · 0 评论 -
移动端和pc端的拖拽排序插件 sortable.js
项目上的需求，实现类似今日头条频道管理的功能，再网上搜的资料都是app实现的，找了半天才找到纯前端实现的插件sortable.js优势1、sortable.js支持移动端和pc端，2、没有任何的依赖，其他的插件大都依赖JQuery，不是很好用3、这个插件使用也非常简单demo<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title>sortable.js例原创 2021-03-03 14:52:08 · 1467 阅读 · 2 评论 -
textarea中的placeholder不显示
<textarea placeholder="评论留言" id="c_content"> </textarea> 这种写法呢，会在产生空格，所以采取写在一行的写法 <textarea placeholder="评论留言" id="c_content"></textarea>原创 2021-03-01 16:06:23 · 218 阅读 · 0 评论 -
傻瓜式操作使用git将项目上传到github
前提：1、首先要有github的账号，一定要把账号和密码记住2、下载git for windows，点击跳转官网，这个下载挺慢的，不要捉急建立仓库：登录github创建仓库，仓库名称最好不要用中文，后期没法上传创建之后，点击这个码/Code,可以拿到一个链接，保存一下这个链接，后期会用到，以后访问也是访问它用git for windows上传项目：1、邮件你的项目（文件夹），然后如果你之前安装好了git for windows，就会出现Gui Bash Here的选项，点击之后进入界面，输入原创 2021-01-30 16:54:07 · 214 阅读 · 1 评论 -
最新版HBuilderx + 夜神模拟器 模拟器调试设置
HBuilderx可以选择运行到模拟器来模拟移动端的界面，我选择的是夜神模拟器，也下载过网易mumu模拟器，感觉广告太多了，不如夜神模拟器来的清爽。这两个都下载完之后就可以配置HBuilderx了。一 各种模拟器的端口模拟器名称----------------------------连接默认端口夜神安卓模拟器----------------------------62001逍遥安卓模拟器----------------------------21503BlueStacks（蓝叠安卓模拟器）---原创 2020-12-17 16:54:13 · 2783 阅读 · 3 评论 -
为什么要清除浮动以及清除浮动的方法
为什么要清除浮动？清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题，如下图，红色边框为父元素，在子元素为浮动后无法被撑开了清除浮动的方法1.额外标签法在最后一个浮动标签后，新加一个标签，给其设置clear：both；2.父级添加overflow属性父元素添加overflow:hidden补充：这个方法的原理是通过触发BFC方式，实现清除浮动BFC 全称为 块格式化上下文 (Block Formatting Context) 。他有以下两个特性：1.使 BFC 内部浮原创 2020-09-30 17:32:51 · 856 阅读 · 0 评论 -
vue : 无法加载文件 C:\Users\XXX\AppData\Roaming\npm\vue.ps1，因为在此系统上禁止运行脚本
问题描述：在创建vue项目的时候遇到无法加载文件的情况解决办法1.开始处搜索powershell，以管理员的身份运行2.然后输入下面的指令：set-ExecutionPolicy RemoteSigned3.重新创建项目，就出来了原创 2020-08-28 17:14:02 · 20790 阅读 · 4 评论 -
chrome总是提示\"喔唷，崩溃啦\"的解决办法
今天早上谷歌浏览器突然崩溃了，在网上找到了灰常好用的解决方案！解决方法：打开浏览器的属性，然后在后面添加-no-sandbox。（需要空一格再写入 -no-sandbox）再打开页面，出现这个提示，不用管这个，然后就可以正常使用了原链接如下错误方法：看到有好多说原因说是 C:\Windows\System32\drivers\bd0001.sys 这个文件的问题，把这个文件删除或者修...原创 2019-12-12 09:28:01 · 3945 阅读 · 0 评论 -
如何从官网下载各个版本的jQuery
我今天在下载jQuery旧版本的时候发现优快云所有的资源都需要积分，然而贫穷又无助的我连一个积分都拿不出来，于是只好自力更生，自给自足，终于在官网找到了下载的方法。1.打开官网https://jquery.com/，找到下载（Download），进入页面后一直向下拉，找到最后一行，如下图所示：2.点击红字jQueryCDN进入https://code.jquery.com/，或者你直接进入这...原创 2019-01-24 13:04:05 · 10305 阅读 · 6 评论 -
(function($){...})(jQuery)写法是什么意思?
(function($){…})(jQuery)这里实际上是匿名函数。主要作用模拟块级作用域，减少全局变量，在大型多人开发的项目中，使用块级作用域，会大大降低命名冲突的问题，从而避免产生灾难性的后果。匿名函数是没有函数名的普通函数。function(){}单独运行一个匿名函数，由于不符合语法要求，会报错解决方法只需要给匿名函数包裹一个括号即可！(function(){})如果需要执行匿名函数，在匿名函数后面加上一个括号即可立即执行！(function(){})()如果需要传值，直接将参原创 2020-05-29 15:30:33 · 1534 阅读 · 0 评论 -
ES6之新增数组方法
ES6对数据新增了几个方法，在这里做一下学习记录，新增的方法有foreachmapreducefilterforeach 遍历 let score=[21,85,38,90]; score.forEach((item,index)=>{ console.log(index+":"+item) })以下为输出的结果map...原创 2020-03-21 17:05:08 · 920 阅读 · 0 评论 -
两个一维数组合成二维数组
功能介绍把两个一位数组合成一个二维数组脚本代码 //1.创建两个数组 var xData=[] var yData=[] //2.给两个数组分别赋值 for(var k=0;k<=Purchase.length-1;k++){ xData[k]=Purchase[k].YEARDEALTIMES; yData[k]=Purchase[k].YEARAMOUNT...原创 2020-03-18 15:32:56 · 6391 阅读 · 0 评论 -
js高级之怎么判断数据类型
判断数据类型有三种方式，typeof和（===）是判断基本类型的，instanceof是判断对象具体类型的1.typeof返回的是字符串 console.log(typeof a==='undefined') //true console.log(typeof a===undefined) //false可以判断number，string，Boolean，undefined...原创 2019-05-24 19:56:33 · 167 阅读 · 0 评论 -
javscrip的加密和解密函数
function compile(code){//加密函数 var c=String.fromCharCode(Code.charCodeAt(0)+code.length); for(var i=1;i<code.length;i++){ c+=String.fromCharCode(code.charCodeAt(i)+code.charCodeAt(i-1)); } re...原创 2019-04-06 18:27:37 · 306 阅读 · 0 评论 -
css中关于text-indent：-999px
问题：在DIV CSS布局中常常见到CSS代码中设置text-indent:-999px或者text-indent:-9999px这样的代码，那它什么作用什么功能？这个是为了隐藏对象内的内容功能，比如隐藏DIV内文字等。一、text-indent简单介绍首先我们了解text-indenttext-indent是CSS缩进功能，一般设置文字缩进两个文字字符。比如一般文章段落习惯设置每段首行开...原创 2019-04-06 18:28:27 · 3535 阅读 · 0 评论 -
css——记录几种网页布局
1.网页居中显示（1）普通网页中，最常用IE浏览器兼容：只设置text-align：center就可以非IE浏览器兼容: margin的左右边界设置为auto（自动），同时要定义网页的宽度width，且宽度不能为100%，要不然就看不到居中的效果。（2）浮动网页中上述方法在添加float属性后，页面居中效果失效，解决办法有两种:一是在原来的div包含框上再添加一层包含框，外层流动（定义...原创 2019-03-31 16:27:01 · 166 阅读 · 0 评论 -
HTML中的标签——link标签
link标签:链接一个外部样式表,只用在head标签里面，但是可以用多次，形式如下：<head><link rel=“stylesheet” type=“text/css” href=“theme.css” /></head>rel:规定当前文档与被链接文档之间的关系，stylesheet是样式表的意思。type:规定被链接文档的 MIME 类型。h...原创 2019-01-24 15:04:54 · 6627 阅读 · 0 评论 -
前端之vue基础学习第二天
四.过滤器概念：Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示；1.私有过滤器1.基本格式（1)定义一个私有过滤器 私有局部过滤器，只能在 当前 VM 对象所控制的 View 区域进行使用在vm2中定义过滤器的时...原创 2019-05-23 20:50:25 · 192 阅读 · 0 评论 -
前端之vue基础学习第一天
一.Vue.js1.什么是vueVue.js 是目前最火的一个前端框架，React是最流行的一个前端框架（React除了开发网站，还可以开发手机App， Vue语法也是可以用于进行手机App开发的，需要借助于Weex）Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架！Vue.js 是一套构建用户界面的框架，只关注视图层，它不仅易于...原创 2019-05-22 15:58:07 · 305 阅读 · 0 评论 -
文字LED灯发光效果
text-shadow实现文字发光效果一 实现效果二 实现代码span{ text-shadow: .2rem 0rem .5rem #EF7C2D,-.2rem 0rem .5rem #EF7C2D,0rem .2rem .5rem #EF7C2D,0rem -.2rem .5rem #EF7C2D;}原创 2020-08-06 15:37:33 · 234 阅读 · 1 评论 -
如何让div有focus或者blur事件？
div本身是没有focus或者blur事件的，需要给它加上一个属性tabindex<div tabindex="111"></div>像上面，div就有了focus或者blur事件tabindex可以设置tab键在控件中的移动顺序。当tabindex=0时，该元素可以用tab键获取焦点，且访问的顺序是按照元素在文档中的顺序来focus，即使采用了浮动改变了页面中显示的顺序，依然是按照html文档中的顺序来定位。当tabindex=-1时，该元素用tab键获取不到焦点，但是原创 2020-08-06 15:28:28 · 5961 阅读 · 0 评论 -
jquery实现tab页切换
jquery实现tab页切换<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>tab1</title><style type="text/css">*{ padding: 0; margin: 0;}li{ list-...原创 2020-04-16 14:41:25 · 807 阅读 · 0 评论 -
IE浏览器“对象不支持slice属性或方法”的解决办法
问题描述：在用echarts做地图的时候，城市是用坐标确定的，兼容IE11的时候报错对象不支持slice属性或方法，根据网上教程配置internet选项没有解决问题解决方案：在报错的地方打断点，发现是Float32Array不支持slice（）方法，但是支持subarray（），就给Float32Array对象增加一个slice方法，代码如下：if(!Float32Array.protot...原创 2020-04-09 10:34:30 · 3301 阅读 · 0 评论 -
实时监听文本变化
功能介绍$(“id”).on(“DOMNodeInserted”,function(){}）可以实时监听页面上的文本变化，当文本变化时可以执行相应的操作js脚本$(document).ready(function(){ var point=$("#BA_767942762901787").width() var pointheight=point/100 var...原创 2020-03-18 15:24:58 · 1076 阅读 · 0 评论 -
前端实现搜索功能和模糊查询
在前端实现搜索，获取数据部分可以用ajax来实现，动态生成标签，正则表达式实现的模糊查询 // $("#BA_230759697085187").remove() $("#BA_230759697085187").empty() $("#BA_230759697085187").append("<input type='text' id='searchinput' c...原创 2020-02-26 17:07:40 · 8168 阅读 · 0 评论 -
canvas实现星空动态背景
星空动态闪烁背景，用canvas实现实现效果脚本代码// 实现星星背景 $("#pageContent canvas").remove(); var stars="<canvas id='canvas'></canvas>" $("#pageContent").prepend(stars) setTimeout(()=>...原创 2020-03-10 10:49:58 · 3637 阅读 · 1 评论