嗒_嗒嗒-CSDN博客

1.ES5var that = this;var person = { 'age': 18, 'sayHello': function () { var that = this; setTimeout(function () { console.log(that.age); }); }};person.sayHello(); //18bind(this)var person = { 'age': 18, 'sayHello': function (

2021-04-12 10:50:23 199

原创 ES6 filter的使用场景

1.有一个对象数组A，获取数组中指定类型的对象放到B数组中// ES6var products = [{ name: "苹果", type: "水果"}, { name: "西蓝花", type: "蔬菜"}, { name: "菠萝", type: "水果"}];var newProducts = products.filter(function(pro){ return pro.type === "蔬菜"})console.log(newProducts);

2021-04-09 19:13:47 245

原创 ES6 map的使用场景

map需要返回值，如果不给return，默认返回undefinedmap返回的是一个新的数组1.拷贝时改变值例如：有一个数值数组A，将A数组中的值以双倍的形式放到B数组中ES6var arr = [1, 2, 3];var newArr = arr.map(function (num) { return num * 2;})console.log(arr); //[1, 2, 3]console.log(newArr); //[2, 4, 6]// ES5var

2021-04-09 18:12:26 703

原创 js事件的传播

关于事件的传播网景公司和微软公司有不同的理解微软公司认为事件应该是由内向外传播，也就是当事件触发时，应该先触发当前元素上的事件，然后再向当前元素的祖先元素上传播，也就说事件应该在冒泡阶段执行。网景公司认为事件应该是由外向内传播的，也就是当前事件触发时，应该先触发当前元素的最外层的祖先元素的事件，然后在向内传播给后代元素W3C综合了两个公司的方案，将事件传播分成了三个阶段1.捕获阶段在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件2.目标阶段事件捕获到目标元素

2021-04-09 10:24:46 121

原创 js事件的委派

1.点击按钮以后添加超链接，然后为每一个超链接都绑定一个单击响应函数<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript"> window.onload = function(){ var u1 = document.getEle

2021-04-08 11:21:57 228

原创 js事件的冒泡

1.事件的冒泡（Bubble）所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发。在开发中大部分情况冒泡都是有用的,如果不希望发生事件冒泡可以通过事件对象来取消冒泡<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #bigb

2021-04-08 10:49:29 2648 1

原创 JS判断浏览器类型

一般我们使用userAgent来判断浏览器的信息，userAgent是一个字符串，这个字符串中包含有用来描述浏览器信息的内容，不同的浏览器会有不同的userAgentvar ua = navigator.userAgent;console.log(ua);if(/firefox/i.test(ua)){ alert("你是火狐");}else if(/chrome/i.test(ua)){ alert("你是Chrome");}else if(/msie/i.test(ua)){ aler

2021-04-08 10:00:11 127

原创 JS操作css类

<html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .b1{ width: 100px; height: 100px; background-color: red; } </style> </head> <body> <but.

2021-04-07 21:41:52 241

原创 JS中的JSON知识总结

1. 关于JSONJavaScript Object Notation JS对象表示法JSON和JS对象的格式一样，只不过JSON字符串中的属性名必须加双引号，其他的和JS语法一致。JS中的对象只有JS自己认识，其他的语言都不认识JSON就是一个特殊格式的字符串，这个字符串可以被任意的语言所识别，并且可以转换为任意语言中的对象，JSON在开发中主要用来数据的交互IE7及以下的浏览器中不支持JSON对象2.JSON分类1.对象 {}var obj = '{"name":"园丁"

2021-04-07 18:48:37 148

原创 Echarts调整图的边距大小

1.折线图和柱状图边距通过 grid 属性来控制直角坐标系内绘图网格四周边框位置,x：直角坐标系内绘图网格与左侧距离，数值单位 px，支持百分比（字符串），如：50%x2：直角坐标系内绘图网格与右侧距离，数值单位 px，支持百分比（字符串），如：50%y：直角坐标系内绘图网格与顶部距离，数值单位 px，支持百分比（字符串），如：50%y2：直角坐标系内绘图网格与底部距离，数值单位 px，支持百分比（字符串），如：50% var option = { ... grid: {

2020-08-03 16:48:47 26155

原创 Vue组件模板分离写法

<body> <div id="app">  <myc2></myc2> <mycc></mycc> </div> <script src="./vue-2.4.0.js"></script>  <scr

2020-07-23 09:44:20 618

原创 Vue注册组件语法糖

<body> <div id="app">  <myc></myc> </div> <script src="./vue-2.4.0.js"></script> <script> // 1、创建组件 // // var my1 = Vue.extend( { /

2020-07-23 09:39:16 125

原创微信小程序---修改自定义组件样式

思路在组件的js文件中将wxml中需要修改的标签class暴露出来，然后在引用组件时对暴露出的class进行class覆盖。1、在组件中找到需要修改的样式类<view class="item"> <view class="left myleft">左边</view> <view class="right myleft" >右边</view></view>// 需求：覆盖.item_left、item_left的背景

2020-07-16 22:27:07 1755

原创微信小程序---＜scroll-view＞组件

一、设置横向滚动1、给scroll-view添加scroll-x="true"属性。2、给scroll-view添加white-space:nowrap;样式。3、给scroll-view中的子元素设置为display:inline-block;。二、设置竖向滚动1、给scroll-view添加scroll-y="true"属性。2、给scroll-view设置高度。...

2020-07-14 20:20:44 346

原创微信小程序---target和currentTarget区别

<view id="outer" bindtap="change1"> outer view <view id="inner" bindtap="change2"> inner view </view></view>如果点击了inner view，那么在change2中target和currentTarget指向的都是同一个对象，而在change1中，则target指向的是inner view，currentTarget指向的是o

2020-07-14 20:10:12 459

原创 Vue列表的添加、删除和搜索

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <meta http-equiv="X.

2020-07-11 18:24:57 274

原创 Vue样式--class和style

1.class属性<div id="app"> <h1 class="red thin">这是class属性啊</h1>  <h1 :class="['thin', 'italic']">这是class属性啊</h1>

2020-07-11 13:33:50 239

原创 Vue 简易计算器

<!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"> <title>Vue简易计算器&l

2020-07-11 12:25:57 198

原创 Vue跑马灯效果

<div id="app"> <input type="button" value="开始" @click ="start"> <input type="button" value="停止" @click ="stop"> <h4>{{ msg }}</h4> </div><script> var vm = new Vue({ el: '#app', .

2020-07-11 11:35:43 128

原创 ES6中数组的forEach() 、map()、filter()、reduce()、some()、every()的用法

一、forEach()循环数组 //ES5 var arr = [1,2,3,4,5,] ;arr.forEach(function(item,index,arr){ console.log(item);}); //ES6var arr = [1, 2, 3, 4, 5];arr.forEach((item,index,arr) => { console.log(item) //结果为1,2,3,4,5})forEach方法中的function

2020-07-10 10:09:07 839

原创微信小程序--新增 / 删除数据列表（自定义弹窗组件、数组去重）

1、点击新增，弹窗跳出，输入数据2、点击弹窗的确定，添加的数据显示在页面列表上一、页面布局 index.wxml<view class="container"> <view class='col'> <view class='lt'>送货地址<text wx:if="{{addressLis...

2020-05-26 11:24:30 1788 1

转载微信小程序获取手机验证码

<view class='changeInfo'> <view class='changeInfoName'> <input placeholder='请输入姓名' bindinput='getNameValue' value='{{name}}'/> </view> <view class='changeInfoName'> <input placeholder='请输入手机号' bindinput=

2020-05-11 12:10:19 973

转载微信小程序--自定义modal弹窗封装实现（slot的使用）

转载自：https://blog.csdn.net/weixin_34406086/article/details/88811209一、创建组件modal1、modal.wxml<view class='mask' wx:if='{{show}}'> <view class='modal-content'> <view class='main-co...

2020-04-26 12:43:43 1013

原创微信小程序--自定义组件及添加属性

一、创建组件1、自定义一个components文件夹，用来存放所有自定义的组件。2、再针对每一个组件创建一个文件夹，用来存放这个组件相关的文件。比如<mysearch>这个组件，那么可以创建一个mysearch的一个文件夹。3、在指定组件的文件夹中右键->新建Component创建组件。这样创建的目的是在json文件中添加"component": true，将其申明为一个组...

2020-04-23 22:53:48 2118

原创微信小程序--使用本地文件模拟网络数据加载

1.在utils文件夹中创建一个dataList.js文件，var artiList存放json数据，然后通过module.exports把数据传输出去：**// var itemList = jsons数据**var itemList = [{ "name": "小李", "age": "20", "gender": "男"}, { "name": "小张", "ag...

2020-04-22 23:00:10 572

原创微信小程序tab选项卡切换

tab.html<view class="container"> <view class="tab-nav"> <block wx:for="{{tabNav}}" wx:key="*this"> <text bindtap="onTabNav" data-index="{{index}}" class="{{currentI...

2020-03-30 11:58:35 650

转载微信小程序学习笔记---模板template

模板有些时候，一段布局代码我们需要在多个地方使用，那么我们可以将其定义成模板，然后把变量单独抽取出来，通过调用模板的时候再传递过去。定义模板使用 name 属性，作为模板的名字。然后在内定义代码片段，如：<template name="msgItem"> <view> <text> {{index}}: {{msg}} </text&g...

2020-03-22 23:43:59 268

原创 jQuery学习笔记之选择器

1.基本选择器2.层级选择器3.过滤选择器4.筛选选择器(方法)W3school jQuery 参考手册 - 选择器https://www.w3school.com.cn/jquery/jquery_ref_selectors.asp

2020-03-18 23:48:04 122

转载 CSS实现定位元素居中的方法

绝对定位元素的居中实现兼容性不错的主流用法是：CSS Code复制内容到剪贴板.element {width: 600px; height: 400px;position: absolute; left: 50%; top: 50%;margin-top: -200px; /* 高度的一半 /margin-left: -300px; / 宽度的一半 */}但，这种方法...

2020-03-17 21:49:19 117

原创微信小程序页间远程数据传递

列表页和详情页之间传参列表页布局如下：// pages/demo/demo.wxml<block wx:for="{{listData}}" wx:key="sid"> <view class="box" bindtap="toDetail" data-id="{{item.sid}}"> <view class="box-left"> ...

2020-03-03 22:43:34 215

weixin_45561258的博客

原创 win10系统文件夹右击无响应问题

原创 js this的指向问题解决