![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端学习
文章平均质量分 53
YIYIYI1205
这个作者很懒,什么都没留下…
展开
-
【总结】angularJs自定义指令
0、使用var app = angular.module('myApp', []);1、require属性在自定义Angular指令时,其中有一个叫做require的字段,这个字段的作用是用于指令之间的相互交流。举个简单的例子,假如现在需要编写两 个指令,在linking函数中有很多重合的方法,为了避免重复自己(著名的DRY原则),可以将这个重复的方法写在第三个指令的 contr...原创 2018-10-31 12:00:03 · 310 阅读 · 0 评论 -
css3
目录:边框、背景、渐变、文本阴影、字体 1、边框1)圆角:div{border:2px solid;border-radius:25px;}2)阴影div{box-shadow: 10px 10px 5px #888888;}3)边界图片div{border-image:url(border.png) 30 30 round;...原创 2018-10-17 10:27:39 · 99 阅读 · 0 评论 -
解决鼠标移动导航栏,下拉菜单就会消失的问题
这个太坑了特此写一篇博客记录$(".product_guid").mouseover(function(){ $(".first_guid").show(); }) $(".product_guid").mouseover(function(){ $(".first_guid").hide(); })原本代码这么写,因为first_g...原创 2018-10-12 20:07:10 · 4797 阅读 · 0 评论 -
localStorage
在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),localStorage中一般浏览器支持的是5M大小,这个在不同的浏览器中localStorage会有所不同。localStorage就是相当于一个前端的数据库的东西,数据库主要是增删查改这四个步骤,loc...原创 2018-09-26 12:10:49 · 225 阅读 · 0 评论 -
一些小点
1、arrayObject.join(separator) 数组.join(分隔符)join() 方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。separator 可选。指定要使用的分隔符。如果省略该参数,则使用逗号作为分隔符。 返回一个字符串。该字符串是通过把 arrayObject 的每个元素转换为字符串,然后把这些字符串连接起来,在...原创 2018-09-26 09:56:23 · 100 阅读 · 0 评论 -
【总结】lodash.js 工具库
lodash是一套工具库,内部封装了很多字符串、数组、对象等常见数据类型的处理函数。一、引入lodash.js二、使用1、切割 _.chunk(array, [size=1])_.chunk(['a', 'b', 'c', 'd'], 2);// => [['a', 'b'], ['c', 'd']]_.chunk(['a', 'b', 'c', 'd'], 3);...原创 2018-09-25 21:38:53 · 2074 阅读 · 0 评论 -
【总结】webUpload插件
下载:https://github.com/fex-team/webuploader/releasesAPI:http://fex.baidu.com/webuploader/具体一些问题可以看文档例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">...原创 2018-11-07 15:58:07 · 170 阅读 · 0 评论 -
【总结】ES6
ECMAScript约等于JSES6(ES2015)兼容性:IE10+、Chrome、FireFox、 移动端,、NodeJS编译、转换1、在线转换(引入一个库来转换,每次打开页面都会先进行转换)(不好)babel==browser.js<script src="browser.js"></script><script type="text...原创 2018-11-02 10:48:23 · 172 阅读 · 0 评论 -
【总结】Font Awesome
http://fontawesome.dashgame.com/引入:<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">使用:<i class="fa fa-camera-retro"></i> fa-camera-retro 在看中的图..原创 2018-11-07 16:16:45 · 162 阅读 · 0 评论 -
【练习】告警策略配置
1、网段 多选下拉框 要实现的结果:点击网段多选框后 ,会显示input框,点击input框后展示下拉列表,可以进行多选 请求两次数据,一是下来列表中的内容,二是初始化内容,列表中已经被选择的内容实现的方法:我的:在controller中请求初始化的内容,用指令传参传到指令中,在指令中请求下拉列表的内容,在指令中用 ...原创 2018-11-29 14:27:14 · 1783 阅读 · 0 评论 -
【练习】事件白名单
1、bootstrap栅格超小屏幕 手机 (<768px) 小屏幕 平板 (≥768px) 中等屏幕 桌面显示器 (≥992px) 大屏幕 大桌面显示器 (≥1200px) 栅格系统行为 总是水平排列 开始是堆叠在一起的,当大于这些阈值时将变为水平排列C .container 最大宽度 None (自动) 750px 970px ...原创 2018-11-19 14:29:07 · 359 阅读 · 0 评论 -
【练习】事件分析——查看详情
1、并发请求:$q.all([请求1,请求2]).then(function(res){第一个请求拿到参数:res[0]},function(res){})2、lodash_.find(被查找的数组,function(item){return 条件})或者 _.find(被查找的数组,{条件})返回的是第一个满足要求的对象_.filter和_.find是差不多的...原创 2018-11-21 17:40:45 · 327 阅读 · 0 评论 -
【总结】javascript高级程序设计 读书笔记
2018-11-13第1章 简介javascript=DOM(文档对象模型:多层节点结构)+BOM(浏览器对象模型)+ECMAScript ECMAScript,由ECMA-262定义,提供核心语言功能; 文档对象模型(DOM),提供访问和操作网页内容的方法和接口; 浏览器对象模型(BOM),提供与浏览器交互的方法和接口 第2章 在html中使用javascr...原创 2018-11-13 21:48:54 · 116 阅读 · 0 评论 -
【总结】微信小程序
1、自定义属性<view class="swiper-tab-list" data-current="0" bindtap="swichNav"> <view class="{{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">原创 2018-11-08 11:30:45 · 378 阅读 · 0 评论 -
【总结】angular-ui-bootstrap
要配合angular.js和bootstrap.csshttps://www.bootcdn.cn/angular-ui-bootstrap/ 下载js文件https://v3.bootcss.com/getting-started/#download bootstrap下载https://www.cnblogs.com/pilixiami/p/5677515.html 博客参...原创 2018-11-13 14:20:38 · 871 阅读 · 0 评论 -
【总结】angularJs
1、表单验证(只适合校验type存在的类型,不存在的类型要用指令的require:ngModal进行验证)form标签,定义nameinput标签,设置type类型(email、name等),name 和ng-modal和required(必填就要有required)1:未修改的表单这是一个布尔类型的属性,用来判断用户是否修改了表单,如果未修改,值为true否则为falseformN...原创 2018-11-13 10:10:34 · 148 阅读 · 0 评论 -
【总结】AngularJs的UI组件ui-Bootstrap
http://www.cnblogs.com/pilixiami/p/5597634.html引入 <script src="/Scripts/angular.js"></script> <script src="/Scripts/ui-bootstrap-tpls-1.3.2.js"></script> <原创 2018-11-07 18:00:07 · 780 阅读 · 0 评论 -
【总结】vue.js
一、MVVMView,Model是Vue.js的核心。实例化Vue的过程就是定义MVVM各个组成部分的过程。1. 定义View2. 定义Model3. 创建一个Vue实例或"ViewModel",它用于连接View和Model举例:<!--这是View--> <div id="app">{{message}}</div&...原创 2018-09-06 14:26:41 · 172 阅读 · 0 评论 -
【总结】Flex布局
Flex布局网页布局(layout)是 CSS 的一个重点应用。布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。任何一个容器都可以指定为 Flex 布局。行内元素也可以使用 Flex 布局。 .box{ display: inline-flex; }注意...转载 2018-06-02 10:45:48 · 165 阅读 · 0 评论 -
【练习】将详细页面中的导航栏动态更改,根据电影类型在more-movie页面中加载数据,上滑加载更多数据
一、将详细页面中的导航栏动态更改1.在movie-list-template.wxml中 :<text class="more" catchtap='onMoreTap' data-category="{{categoryTitle}}">更多></text>给哪个标签绑定事件,想在这个事件中传输数据,就在这个标签中自定义属性之前在movie.j...原创 2018-04-18 21:17:45 · 790 阅读 · 0 评论 -
【练习】动态生成详细页面,缓存切换图片
点击post.wxml中用<block wx:for>生成的模块,跳出相应的详细页面: 1.post.wxml中:<view catchtap='onPostTap' data-postid="{{item.postId}}">自定义属性获取data.js中的postId属性data-postid中的“i”不要大写,因为大写是去掉连字符自动变成大写,如果...原创 2018-04-12 22:27:04 · 128 阅读 · 0 评论 -
【练习】豆瓣API获取数据,sarts组件,更改“正在上映”
豆瓣API:https://developers.douban.com/wiki/?title=api_v2要找以下链接:Resources URI /v2/movie/top250豆瓣原本前缀:"https://api.douban.com"失效,前缀改为:"http://t.yushu.im"1.在app.js中存储全局变量url前缀:App({globalDat...原创 2018-04-17 21:03:33 · 2437 阅读 · 0 评论 -
【练习】小程序动态生成页面
1.数据放入data文件中的data.js var swiper_content=[{url:"/images/3.jpg",title1: "最好的华俱",title2: "副标语"},{url: "/images/4.jpg",title1: "标语2",title2: "副标语2"},{url: "/images/5.原创 2018-04-11 22:08:40 · 6703 阅读 · 1 评论 -
【练习】响应式工具bootstrap
1.微金所顶部通栏(响应式工具bootstrap)现在api中复制基本模版<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content=&qu原创 2018-03-27 21:45:53 · 366 阅读 · 0 评论 -
【练习】swiper中点击后跳转详细页面,tab栏,嵌套template
1.swiper中点击后跳转详细页面1)在每个swiper-item中的image添加自定义属性data-postId,并添加函数跳转<image src="/images/1.jpg" catchtap='onPostTap' data-postId="0"></image>此时data-postId不能用{{item.postId}}因为,没有循环,post...原创 2018-04-14 22:01:58 · 1991 阅读 · 0 评论 -
【练习】京东案例js(标题栏透明度,倒计时,轮播图自动播放)
1.sublime字体放大:command++ 2.引入js文件,在引入css文件link下面script引入js文件http://emmet.evget.com/ 查找emmet快捷键的网页 script:src3.scroll有兼容性问题,必须<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN...原创 2018-03-21 22:21:22 · 618 阅读 · 0 评论 -
【练习】emmet插件,京东移动端
1.emmet插件http://blog.csdn.net/JourneyWT/article/details/53839952按照上面网站步骤装完,发现html+tab出不来html页面,但是meta:vp能出来,ul>li*10可以出来,说明emmet已经装上了。http://blog.csdn.net/sunshinegirl_7/article/details/49802...原创 2018-03-20 21:34:30 · 209 阅读 · 0 评论 -
【练习】bootstrap轮播图
1.格式化代码command+shift+p,然后选择Install Package.在插件列表查找并安装格式化css代码需要的插件,css format打开任意一个css文件,command+a全选所有代码,然后右键选择css format。command+a全选所有代码,然后右键选择css format。https://www.jianshu.com/p/37b649a87...原创 2018-03-29 21:45:16 · 754 阅读 · 0 评论 -
【练习】交互(弹窗),音乐播放
自动关闭: wx.showToast({title: postCollected?"收藏成功":"取消成功"})点击关闭: wx.showModal({title: '收藏',content: '是否收藏该文本',cancelText: "取消"})函数:自动关闭: showToast: function (postsCollected, p...原创 2018-04-13 19:52:35 · 565 阅读 · 0 评论 -
【练习】设置loading状态,下拉刷新列表,“window”中“backgroundColor”, 电影搜索页面构建
一、设置loading状态(toast用户体验不好)1.在onScrollLower中设置wx.showNavigationBarLoading();但是不会自动消失2.在processDoubanData:function(data)绑定完数据后 wx.hideNavigationBarLoading();不知为什么加载数据很快,几乎不显示Loading,因为网太好了?二、下...原创 2018-04-19 12:28:24 · 489 阅读 · 0 评论 -
【练习】电影详情页面 (finished),版本更新后的一些变化,表单组件
一.音乐播放完以后图标没有跳回未播放状态用wx.onBackgroundAudioStop(CALLBACK)监听wx.onBackgroundAudioStop(CALLBACK) 停止wx.onBackgroundAudioPlay(CALLBACK) 播放二.电影详情页面1.在movie项目创建movie-detail项目在app.json中直接配置"pages/...原创 2018-04-24 17:22:27 · 554 阅读 · 0 评论 -
【总结】雅虎14条
雅虎14条1.减少HTTP请求 减少HTTP请求的方式很多,常见的包括CSS Sprites、合并JS和CSS、图片地图等。遵守这条规则可以改善首次访问网站的响应时间。2.使用CDN(内容发布网络) 只有10%-20%的最终用户响应时间花在了下载HTML文档上,其余的80%-90%时间花在了下载页面中的所有组件上。如果web服务器离服务器更近,则一个HTTP请求的响应时间将缩短...转载 2018-06-01 12:37:03 · 168 阅读 · 0 评论 -
【总结】angularjs
一、介绍AngularJS是一款由Google公司开发维护的前端MVVM框架,其克服了HTML在构建应用上的诸多不足,从而降低了开发成本提升了开发效率。jQuery只是一个类库(类库指的是一系列函数的集合)以DOM做为驱动(核心),而AngularJS则一个框架(诸多类库的集合)以数据和逻辑做为驱动(核心)。MVC是一种开发模式,由模型(Model)、视图(View)、控制器(Cont...原创 2018-06-01 12:35:21 · 710 阅读 · 0 评论 -
【总结】HTML
HTML一、定义HTML:Hyper Text Mark-up Language超文本标记语言,通过元素标签的形式建立Web站点,通过浏览器进行解析。二、<body>中的标签1、换行符 <br/>2、水平<hr/>3、段落 <p></p> 特点:上下自动生成空白行。4、标题<h1></h1&g原创 2018-05-31 11:37:45 · 285 阅读 · 0 评论 -
【练习】angularjs(最基本的$http使用jsonp跨域,使用jsonp跨域获取天气(采用百度地图天气api),路由功能实现单页面不跳转切换)
1.最基本的$http使用jsonp跨域<body ng-app="app"><div ng-controller="controller"></div><script src="angularjs/angularjs.js"></script><script>var原创 2018-05-29 15:05:13 · 733 阅读 · 1 评论 -
【总结】mac下配置less并在sublime中安装,sublime3中激活错误
mac下配置less https://blog.csdn.net/jiaoshenmo/article/details/514840521、下载安装node.js环境2、安装过node.js for mac 安装包,可以使用node和npm的命令了,npm.js是Node.js的套件管理工具 : 打开终端(1)sudo npm update npm –g 注:sudo是管理...原创 2018-05-24 16:14:55 · 1186 阅读 · 0 评论 -
【练习】angularJs练习(tab栏切换、待办事项、$http)
1.tab栏切换(ng-click、ng-switch on、ng-switch-when、ng-class)<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><原创 2018-05-28 16:26:28 · 344 阅读 · 0 评论 -
【练习】canvas——flappyBird
<body>canvas的默认大小,以及如何改变画布的大小:https://blog.csdn.net/csm0912/article/details/52963240<!-- <canvas id="cvs" width="800px" height="600px"></canvas> --><canvas id原创 2018-05-22 17:46:33 · 305 阅读 · 0 评论 -
【总结】gulp,本地web服务器
一.gulp(前端自动化工具)(mac系统)参考网页:https://blog.csdn.net/c_kite/article/details/731654271.安装全局gulp命令 npm install -g gulp创建一个项目文件夹,mkdir文件夹或者之间右键新建文件夹, 进入当前项目文件夹下,cd 文件夹,输入命令npm init配置package.json文...原创 2018-05-11 21:47:51 · 529 阅读 · 0 评论 -
【练习】注册appid、下拉菜单、访问百度地图API
一 、注册Appidhttps://blog.csdn.net/testcs_dn/article/details/53727768不支持个人身份注册,选择其他组织,组织信息随便填写,上传的照片也可以随便传。管理信息登记必须使用和微信一致的身份信息,姓名,身份证号。一个身份证、一个手机号都只能注册5个小程序。在开发者ID中可以找到appid,写好的小程序点击预览就可以在手机上看了...原创 2018-04-25 15:44:34 · 391 阅读 · 0 评论