2020年09月_草字

12月 11月 10月 09月 08月 07月

原创 css样式不行，试试这几个网站

五个学习网站。1.codepen https://codepen.io2.awwwards https://www.awwwards.com3.csslayout https://csslayout.io有很多布局的样式可以参考，基本上都是内联样式。4. css inspiration https://chokcoco.github.io/CSS-Inspiration5. animista https://animista.net可以手动调整动画的方向和速度等等属性，最后直接生成代码。

2020-09-25 23:14:44 1471

原创 react 初步安装使用教程（脚手架）

官网教程：https://react.docschina.org/tutorial/tutorial.html一、直接开始创建项目。npx create-react-app demo-app //demo-app:项目名字如果这条命名失败，可能是因为node没有安装。“node -v”可以检测node.js是否安装，也可以检测node.js的版本。二、创建项目完成后，可以直接选择运行了。cd demo-app //进入目录npm start //运行三、复制cmd运行的地址在

2020-09-25 18:10:03 257

原创 html img标签的alt属性和title属性（说明）

html 中 title 属性和 alt 属性的区别？当图片不输出信息的时候，会显示 alt 信息鼠标放上去没有信息，当图片正常读取，不会出现 alt 信息。当图片不输出信息的时候，会显示 alt 信息鼠标放上去会出现 title 信息；当图片正常输出的时候，不会出现 alt 信息，鼠标放上去会出现 title 信息。...

2020-09-24 16:38:45 1130

原创 html label标签的作用

label 标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。属性控制：label标签的属性for的值和input的id相同时。<label for="Name">Number:</label><input type=“text“name="Name" id="Name"/>嵌套控制：<label>Date:<input type="text" name="B"/></label&gt

2020-09-24 16:23:35 707

原创 vue 使用vue-cookies

Github地址：https://github.com/cmp-cc/vue-cookies一、安装npm install vue-cookies --save二、引入// es2015 moduleimport Vue from 'vue'import VueCookies from 'vue-cookies'Vue.use(VueCookies)三、配置this.$cookies.config(expireTimes, path)四、使用：设置cookie：$cooki

2020-09-24 16:17:07 166

原创 html 刷新页面

window.location.reload(); //刷新当前页面.

2020-09-22 17:01:35 1312

原创 jquery 鼠标移入、元素上移动、移出（悬浮详情）

<div class="suspension_div" style='z-index:98;display:none;padding:10px;position: absolute;left:1px;top:1px;background:white;border:1px solid #888;'> <div>详情</div> </div>/*移入移出*/$('body').on('mo.

2020-09-22 15:53:08 804

原创 vue 组件库资源的网上位置

所有资源：https://awesomejs.dev/for/vue/pkg/254637146160235018/推荐：表格：https://xuliangzhan_admin.gitee.io/vxe-table/#/table/grid/edit

2020-09-22 09:02:49 255

原创 js 常用正则表达式

常用正则表达式合集:验证数字：^[0-9]*$验证n位的数字：^\d{n}$验证至少n位数字：^\d{n,}$验证m-n位的数字：^\d{m,n}$验证零和非零开头的数字：^(0|[1-9][0-9]*)$验证有两位小数的正实数：^[0-9]+(.[0-9]{2})?$验证有1-3位小数的正实数：^[0-9]+(.[0-9]{1,3})?$验证非零的正整数：^\+?[1-9][0-9]*$验证非零的负整数：^\-[1-9][0-9]*$验证非负整数（正整数 + 0） ^\d+$验证非

2020-09-21 18:16:25 408

原创 jquery 选择元素时进行筛选。（筛选器）

筛选器这些都是关于序号的： $("p") 所有的p $("p:first") 第一个p $("p:last") 最后一个p $("p:eq(3)") 下标为3的p $("p:lt(3)") 下标小于3的p $("p:gt(3)") 下标大于3的p $("p:odd") 下标是奇数的p $("p:even") 下标是偶数的p特别的，eq可以单独提炼为方法，可以连续打点：$("p").eq(3).animate({"width":400},1000);等价于$("p:e

2020-09-21 17:59:06 332

原创 css 常用选择器9个（综合）

css常用选择器：1.类选择器<div class="a">测试</div>.a{ color:red;}2.id选择器<div id="a">测试</div>#a{ color:red;}3.标签选择器<div>测试</div>div{ color:red;}4.分组选择器<div class="a">测试1</div><div id="a">测试2&

2020-09-21 16:23:34 190

原创 jquery 绑定滚轮滚动事件“mousewheel”

//鼠标齿轮滑动事件 $('body').on('mousewheel', '.float-menus', function () { $('.float-menus').addClass("hide"); });

2020-09-21 15:47:48 1144

原创 jquery 还原动画属性，操作动画

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.staticfile.

2020-09-21 09:56:04 351

原创 css 假瀑布式布局（适用于没有布局组建的）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .container>di.

2020-09-18 15:05:10 114

原创 css 选择器（选择第几倍的元素），nth-child（2n+1）

直接上代码：选择2倍的第一个元素：div:nth-child(2n+1)选择2倍的第二个元素：div:nth-child(2n+2)选择3倍的第一个元素：div:nth-child(3n+1)选择3倍的第二个元素：div:nth-child(3n+2)选择3倍的第三个元素：div:nth-child(3n+3)以此类推。...

2020-09-18 15:00:57 6356

原创 jquery 添加类，移除类，判断类是否存在

添加类：$(selector).addClass(class)；移除类：$(selector).removeClass(class)判断类：$(selector).hasClass(class)；

2020-09-18 14:13:39 392

原创 jquery on(‘click.distribute‘)事件后面跟的东西

.distribute：命名空间，这个jQuery事件机制的命名空间，可以对事件进行集合操作，如上面代码中，如果要过去掉代码中的click事件，只需要$(‘body’).off(‘click.fileupload.data-api’)就可以了，而不会对body上其他的click事件产生影响。推荐网址：https://segmentfault.com/q/1010000002403373/a-1020000002403509...

2020-09-18 11:40:47 150

原创 css 文本不换行

white-space:nowrap;

2020-09-17 16:24:25 161

原创 jquery 获取父级、同级、子级元素（dom）

推荐文章：https://www.cnblogs.com/weimingxin/p/8540516.html常用：找父级：parent()找父亲节点。closest() 方法获得匹配选择器的第一个祖先元素，从当前元素开始沿 DOM 树向上。找同级：siblings()返回兄弟姐妹节点，不分前后。找子级：children()返回所有子节点，这个方法只会返回直接的孩子节点，不会返回所有的子孙节点。全部：find()返回结果，不会有初始集合中的内容，比如("p"),find("span"),

2020-09-17 11:54:20 1082

原创 css 设置文字不能被复制剪切。

-webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;

2020-09-17 09:28:20 567

原创 vue 瀑布式布局的所有组件

推荐网址：https://www.cnblogs.com/meng1314-shuai/p/7407055.htmlhttps://www.cnblogs.com/ruruo/p/12938878.html一、vue-waterfall。二、vue-waterfall-easy。三、vue-virtual-collection。四、vue-grid-layout。npm install vue-grid-layout --saveimport VueGridLayout from 'vue

2020-09-16 18:06:51 225

原创 css 瀑布式布局（column-count实现）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .container { .

2020-09-16 17:19:14 279

原创 css 奇偶数选择器nth-child

div:nth-child(odd){} //奇数行div:nth-child(even){} //偶数行

2020-09-16 17:05:57 12622

原创 vue 使用bootstrap

1.安装npm install bootstrap2.main.js引入import BootstrapVue from 'bootstrap-vue' Vue.use(BootstrapVue) import 'bootstrap/dist/css/bootstrap.css'import 'bootstrap-vue/dist/bootstrap-vue.css'官网文档地址：https://v4.bootcss.com/docs/getting-started/download

2020-09-16 11:42:35 276

原创 Bootstrap 初步使用

<!doctype html><html lang="en"><head>  <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS -.

2020-09-16 11:36:14 193

原创 ES6-Proxy与数据劫持

https://segmentfault.com/a/1190000019198822

2020-09-15 14:36:22 207

原创 jquery 鼠标悬浮出现闪烁问题

说明：鼠标悬浮在刷新图标上，详情层（信息）显示，鼠标移除时关闭详情层，但出现一直闪烁。解决方法：刷新图标必须在详情层之上。但默认情况下所有刷新图标都在详情层之上，势必效果不会很好。所以可以详情层显示的时候，把当前的刷新层级放在详情层之上，其他的默认。$("body").on('mouseover',".update_image",function(e){ //提高层级 $(this).css('z-index',99); $('.suspension_div').css("di.

2020-09-15 10:48:41 501

原创 php与html标签循环模板

<select name="" id="" class="select_notice_inventory"> <option value="">请选择</option> <?php foreach($inventoryList as $item){ ?> <option value="<?php echo $item['id']?>" <?php if($i

2020-09-14 14:13:14 666

原创 html input输入框不记录之前输入的内容，不自动补全，不提示输入

2020-09-11 12:40:47 2911

原创 html 搜索框输入提示，可输入可选择可模糊查询的select下拉，jquery实现操作（原生代码）

根据网络其他大神的代码进行了一些更改，现在可以把输入框放置任何位置。效果图：html：<span class="second"> <input type="text" name="makeupCo" id="makeupCo" class="makeinp" onfocus="setfocus(this)" oninput="setinput(this);" placeholder="请选择或输入" /> <sel

2020-09-10 17:31:47 4555 2

原创 jquery 给动态元素（空间）添加事件。

只有 on() 能成功的绑定到动态控件中，click不行。on方法的三个参数时。参数：on（事件名，绑定的对象，执行的函数）$(".li").on('click', ".deleteon", function(){ $(this).parent().remove(); })

2020-09-10 11:17:12 146

原创 js 字符串“0”为true，还是false。能否进入if？

测试代码： var str = "0"; if (str) { console.log(str); }结果：0所以空字符串为true，能进入if。

2020-09-10 11:02:48 1781

原创 jquery 全选和单选

全选和单选：$('body').on('click','.checkbox-all',function () { var checkedOfAll=$(".checkbox-all").prop("checked"); $('.checkbox-signal').each(function(){ $(this).prop("checked",checkedOfAll); }) })$('body').on('click','.checkbox-signal',

2020-09-09 16:16:26 309

原创 vue vue-table-with-tree-grid树形表格组件的使用

效果图：安装：npm i vue-table-with-tree-grid -S引入：import ZkTable from 'vue-table-with-tree-grid' Vue.use(ZkTable)github案例源码网址：https://github.com/MisterTaki/vue-table-with-tree-grid/blob/master/example/Example.vue参数和方法介绍说明npm网址：点击跳转...

2020-09-07 16:44:17 800

原创 VSCode 自动检查代码出错Vetur

出错问题：代码正确，可是vscode编译器却提示出错。解决方法：更新插件vetur。

2020-09-07 16:38:42 7040 1

原创 vue element-ui的tree组件获取所有选中节点（复选框），包含一二三级菜单栏id

为了获取到tree组件，添加ref：ref=“tree”<el-tree ref="tree" :data="rights" show-checkbox node-key="id" :default-expanded-keys="defaultExpandedKeys" :default-checked-keys="defaultCheckedKeys" :props="defaul

2020-09-07 09:20:04 5548

原创 vue tag列表布局

数据：data<div v-for="(item,index) in data" :key="index" class="flex-box" style="align-items: center;" > <div class="flex-1"> <el-tag closable>{{item.authN.

2020-09-04 10:34:34 612

原创 vue v-for和v-if同时使用

当v-for和v-if一起使用时，v-for的优先级比v-if要高，这意味着v-if 将分别重复运行于每个v-for循环中。解决方法：div嵌套起来分开写。

2020-09-04 08:46:43 736

原创面试框架

框架面向对象：面向对象是一种程序开发的方法，它将对象作为程序的基本单元，将程序和数据封装其中，以提高软件的灵活性、重用性和扩展性。对象是把数据及对数据的操作方法放在一起，作为一个相互依存的整体。再说一下类与对象，类描述了一组有相同特性和相同行为的对象，具有相同属性和相同方法的对象的抽象就是类。即，对象的抽象是类，类的实例是对象。在面向对象的编程中，把用类创建对象的过程称为实例化。面向过程与面向对象的区别面向过程是一种直接的编程方法，它是按照编程语言的思路考虑问题。通过顺序执行一组语句来实现一个功能，

2020-09-03 17:59:04 372

原创面试网络问题

http 响应常见状态码100-199 : 表示成功接收请求, 要求客户端继续提交下一次请求才能完成整个处理过程200-299: 表示成果接收请求并已完成整个处理过程. 常用 200300-399: 为完成请求, 客户需进一步细化需求: 例如: 请求的资源已经移动一个新地址, 常用 302(重定向), 307 和 304(拿缓存)400-499: 客户端的请求有错误, 包含语法错误或者不能正确执行. 常用 404(请求的资源在 web 服务器中没有) 403(服务器拒绝访问, 权限不够)500-

2020-09-03 17:52:44 328