在介绍项目列表之前,先让我们热热身,做一个各个页面都会出现的 右上角返回主页按钮,这里会学习到一些css属性和js的使用。 在之前的章节中,我们规定home.html 作为我们的主页。那么我们给其他人分享的平台地址应该是:你的ip:8000/home/
在目录goods下,添加两个文件goods.js与goods.wxml。goods.js文件的内容可由index.js修改得来:
Vuex 的核心是 store, 它是一个通过 Vuex.Store 构造函数生成的对象。为什么它会是核心呢?因为我们调用这个构造函数创建store 对象的时候,给它传递参数中包装了state, mutation , action 等核心内容。Vuex 的思想是 当我们在页面上点击一个按钮,它会处发(dispatch)一个action, action 随后会执行(commit)一个mutation, mutation 立即会改变state,state改变以后我们的页面会从state获取数据从而改变页面。Store对象包含了我们谈到的所有内容:action, state, mutation,所以是核心了。
Web端的UI自动化测试,目前使用比较多的就是Python+Selenium。当前一些UI自动化测试工具也是基于Selenium做开发的。 最近经常有童鞋后台询问selenium元素定位方法,其实网上学习资料很多,只要你肯动手,都可以搜的到。元素定位对于自动化测试来说是比较重要而且繁琐的一件事。接下来就来讲一下如何使用webdriver提供的基本元素定位方法。 再次声明:本站点已经和百度、必应、谷歌等各大搜索引擎达成长期的战略合作协议,你有任何疑问都可以通过以上公司提供的免费服务得到解答。
以前说起前端动画必须使用JS,而CSS3为我们带来transition和@keyframes,让我们可以以更简单(声明式代替命令式)和更高效的方式实现UI状态间的补间动画。本文为近期对Transition的学习总结,欢迎各位拍砖。
前言 以前说起前端动画必须使用JS,而CSS3为我们带来transition和@keyframes,让我们可以以更简单(声明式代替命令式)和更高效的方式实现UI状态间的补间动画。本文为近期对Transition的学习总结,欢迎各位拍砖。 属性介绍 首先先我们简单粗暴了解transition属性吧! transition: <transition-property> <transition-duration> <transition-timing-function> <transition-delay>;
作为一个前端小白,入门跟着这四个来源学习,感谢作者的分享,在其基础上,通过自己的理解,梳理出的知识点,或许有遗漏,或许有些理解是错误的,如有发现,欢迎指点下。
不需要用到js, 而是纯css, 个人推荐使用此方法,巧用了将radio隐藏,然后通过label的for属性来改变radio的选中状态,在利用:checked伪类与兄弟选择器(+)来修改label的样式。从而无需使用js
上一级我们实现了第一个三维地球,但是在这个页面上有很多小部件,我们不想让其显示,应该如何设置呢?这一节我们通过两种方式来隐藏小部件;先看下最终效果
vue2版本中文文档:https://v2.cn.vuejs.org/v2/guide/
用JS操作DOM,是比较慢的。为什么呢?首先,补充一下浏览器相关的知识。下图为浏览器结构:
介绍 第一次写小程序,记录一下遇到的需求以及解决方法。可能功能不是很难,主要是做下记录。为以后遇到相同的需求做铺垫。 什么是左滑删除 用过QQ的人都知道,消息列表内,左滑单个聊天可以删除、置顶的操作。
今天做了一个有关js如何绑定动态修改伪类的content的内容,运用到的有( :before 和 :after 伪元素、CSS content 属性、data-* H5新属性、js)等技术。
在某些浏览器中(比如 Chrome),你给他赋什么值,它就返回什么值。在 IE 中则比较痛苦,它会格式化输出、会把属性大写、会改变属性顺序、会去掉最后一个分号,比如:
介绍 第一次写小程序,记录一下遇到的需求以及解决方法。可能功能不是很难,主要是做下记录。为以后遇到相同的需求做铺垫。 什么是左滑删除 用过QQ的人都知道,消息列表内,左滑单个聊天可以删除、置顶的操作。对于移动端窄小的屏幕来说,这种交互可以说是非常的节省地方。故受到了众多产品狗的喜爱。 [image] 实现原理 最外层一个view水平方向排列,里面包含一个内容区view,一个操作区view 让你要展示的布局充满屏幕,通过css样式让超出的删除按钮隐藏 监听touch事件,平移布局显示和隐藏删除按钮(列表每一项
本文主要介绍一下什么是reflow,repaint, 怎样避免它们造成的不良影响, 怎么通过工具查看分析它们. 一.首先对浏览器渲染引擎下网页呈现过程简要说一下: 浏览器的渲染引擎开始解析html构建成DOM树,DOM树是以document对象为根节点,包含所有的html标签, 包括display: none隐藏的,也包括js动态添加的元素。 解析html的同时, 将css文件或者样式元素中的样式解析成CSS Rule Tree,解析时会去掉浏览器不能识别的样式。 根据DOM树和CSSOM来构造Ren
font-size、font-family、font-style、font-weight
本文作者:IMWeb 黎清龙 原文出处:IMWeb社区 未经同意,禁止转载 这两个伪元素分别表示元素内容的【前】【后】,利用这两个伪元素可以在元素内容的前后添加内容,其实这没有什么前后的概念
这两个伪元素分别表示元素内容的【前】【后】,利用这两个伪元素可以在元素内容的前后添加内容,其实这没有什么前后的概念,如果应用了absolute的特性之后,你可以把这些伪元素放在任何位置,有了这两个伪元素,就代表每个元素都有两个助手可供使用,灵活运用它们的话将会得到很多有趣的实现,简化许多实现。
懒加载 即延迟加载,在电商或是页面很长的业务场景中,我们通常会使用懒加载的方式对图片进行请求,只有在图片进入可视区域之后才请求图片资源,而在之前都通过一张占位图进行占位,将真正的图片路径存储在元素的 data-url 中,这样做的好处在于减少无效资源的加载,并不是所有的用户都会浏览完网站的所有图片,而且浏览器是存在并发上限的,并发加载的资源过多会阻塞 JS 的加载,影响网站的正常使用
本文首发:《Video.js 使用教程 - 手把手教你基于 Vue 搭建 HTML 5 视频播放器》
Boxy是一个基于JQuery的弹出层插件,它有相对漂亮的外观,功能齐全,支持iframe,支持模式窗口但相对于同样的弹出层插件BlockUI它明显笨重,但使用不那么方便。
Webpack 是当下最热门前端资源模块化管理和打包工具。任何形式的资源都可以视作模块,通
节点的一些样式(背景色,边框颜色,文字颜色等)发生改变,只需要应用新样式绘制这个元素就可以了; 发生机制: 颜色 visibility: hidden,元素还是占了位置的
1.共同点 都是动态显示DOM元素 2.区别 (1)手段:v-if是动态的向DOM树内添加或者删除DOM元素;v-show是通过设置DOM元素的display样式属性控制显隐; (2)编译过程:v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件;v-show只是简单的基于css切换; (3)编译条件:v-if是惰性的,如果初始条件为假,则什么也不做;只有在条件第一次变为真时才开始局部编译(编译被缓存?编译被缓存后,然后再切换的时候进行局部卸载); v-show是在任何条
如你改变了一个div的位置,或者是改变了这个div的width, height, position 或者布局类的样式。
侧栏设置包括:侧栏位置、侧栏显示与否、文章间距、返回顶部按钮等等 打开 主题配置文件 找到sidebar字段
引入魔改样式的方法很简单,自建一个css文件,然后引入即可。 以butterfly主题为例。可以在[Blogroot]\themes\butterfly\source\css\目录下新建custom.css文件,然后在[Blogroot]\_config.butterfly.yml的inject配置项中引入自定义样式文件。
组件(Component)是对数据和方法的简单封装。组件可以有自己的属性和方法。属性是组件数据的简单访问者。方法则是组件的一些简单而可见的功能。使用组件可以实现拖放式编程、快速的属性处理以及真正的面向对象的设计。
如果我们可以合理的使用面向对象编程,我们可以提高代码的复用性和可维护性,这里强调的是合理的使用,有了面向对象类型系统,就可以使用一些成熟的设计方式 命名空间 合理的组织大量的类型,使开发人员能够方便的找到他们所需要的类型 可重复注册命名空间,每个独立的脚本模块前都要注册命名空间以保证命名空间存在 类 定义构造函数 定义成员(方法、属性、事件) 注册类 类——构造函数 类的构造函数即为function定义 通常用于初始化域变量 自由成员使用下划线开头(形式上的封装) 类——定义方法 使用prototype定义
当有了DOM Tree和 CSSOM Tree后,就可以两个结合来构建Render Tree了
然后我们给整个div 的内左边距设置成20px,因为贴着浏览器左侧看着就是不舒服。
RESTful API 是一种面向资源编程,也叫表征状态转移(英文:Representational State Transfer,简称REST)。 认为网络上所有的东西都是资源,对资源的操作无非就是增删改查。
页面的绘制时间(paint time)是每一个前端开发都需要关注的的重要指标,它决定了你的页面流畅程度。而如何去观察页面的绘制时间,找到性能瓶颈,可以借助Chrome的开发者工具。
Pjax是一种很多网站( facebook, twitter)都支持的浏览方式, 当你点击一个站内链接的时候, 不是做页面跳转, 而是只是站内页面刷新。设置后的这些网站的ajax刷新是支持浏览器历史的, 刷新页面的同时, 浏览器地址栏位上面的地址也是会更改, 用浏览器的回退功能也能够回退到上一个页面。Pjax是可以增加访客打分的好功能。
一、目录: ---- ---- 1.ready(function(){})方法的使用 2.require最常用的方法: 3.display:none 4.visible:hidden 5.修改span的字体的颜色 6.window对象中self、 top 的区别 7.blur事件的使用 二.、内容: 1. ready(function(){}) ```$(document).ready(function(){ // 当网页加载完成后执行这里的代码块 });``` 2.require('http') 内置模块
前端基础打卡已经基本结束了,内容从css基础,动画,js基本算法,作用域,闭包,节流防抖这些基本的web知识大家有没有都掌握了呢?年后会出一个进阶路线规划图,希望笔者可以带着大家,一起进步,一起成长.
==JavaScript 是一门跨平台、面向对象的脚本语言==,而Java语言也是跨平台的、面向对象的语言,只不过Java是编译语言,是需要编译成字节码文件才能运行的;JavaScript是脚本语言,不需要编译,由浏览器直接解析并执行。
1.1 js同步执行与异步执行 js的执行机制:js是单线程环境,从上到下、依次执行,即 同步执行;在这段代码中,for循环是同步代码,setTimeout是异步代码。 js在执行代码的过程中,碰到同步代码会依次执行,碰到异步代码就会将其放入任务队列中进行等待,当同步代码执行完毕后再开始执行异步代码,即 异步执行。
JSON 是一种基于文本的轻量级的数据交换格式。它可以被任何的编程语言读取和作为数据格式来传递。
CSS 是层叠样式表(Cascading Style Sheets)的简写,它是一种用于定义网页和网页应用程序外观的标准格式语言。
Html5最大的特点在于多媒体和移动互联网方面,小弟不才,对那些了解不多,本次修改仅仅是为了那么一点点语义化。
当然不止能绑定src也能绑定其他属性,属性前加冒号就可以,就像 :src :href
JavaScript 是一门跨平台、面向对象的脚本语言,而Java语言也是跨平台的、面向对象的语言,只不过Java是编译语言,是需要编译成字节码文件才能运行的;JavaScript是脚本语言,不需要编译,由浏览器直接解析并执行。
instantclick.js 是一种ajax无刷新和预加载页面的技术,对于普通博客程序,有着明显的加速作用。(instantclick.js ≈ pjax + 预加载页面)而且,使用方法也十分的简单。在github截止目前,已经由4447个star了,非常可观。
Vue是一个MVVM的JavaScript框架; ViewModel负责逻辑的实现,把Model里的数据传递给View,实现视图层与数据层的解耦
web前端 —— 移动端知识的一些总结 个人在移动端的一些总结归纳,有新的知识点会一直更新 一.css部分 1.meta标签 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/> 移动端加上这个标签才是真正的自适应,不加的话,假如你把一个980px宽度(手机端常规是980)的PC网页 放在手机上显示,倒也能正常显示不出现滚动条,不过是移动设备对页面 做了缩小优化,所以字体等都相应
但凡有两个函数完成的功能是相反的,比如一个显示一个隐藏,那么肯定会有第三个函数的效果是前两个函数的和。也就是说两个单词是反义词,那么肯定会有第三个单词,而且都和toggle有关。
前言:小程序是无法操作DOM元素的 需要通过setData()方法实现修改元素样式 Wxml <view style="display: {{block}}">显示</view> <view style="display: {{none}}">隐藏</view> js //将变量挂载到data上 data: { block: 'block', none: 'none' } //通过this.setData()方法改变数据的值 //将方法放在函数中 触发
领取专属 10元无门槛券
手把手带您无忧上云