基本选择器 Basics
*选择所有元素
.class选择class,如:$('.mybox')
element选择element,如:$('p')
#id选择id,如:$('#box')
selector1,selectorN可以同时选择多个元素,如:$('div, p.box, #phone')
层级选择器 Hierarchy
parent > child选择指定元素下的指定子元素,如:$('ul.tonav > li')
ancestor descendant选择一个元素里所有的后代元素,如:$('form input')
prev + next选择所有指定元素后紧跟着的元素,如:$('label + input')
prev ~ siblings选择与指定元素之后有相同父级的同级选择器,如:$('#prev ~ div')
基本过滤器 Basic Filters
:animated选择动画进行中的所有元素。如:$('div: ...
前端优化浏览器发送HTTP请求,服务器收到请求全文后,返回HTTP响应,在浏览器接收之后结束这个过程。浏览器和服务器只有一次互动的机会,浏览器主动发起,而服务器被动地根据收到的请求内容返回结果。一个完整的请求都需要经过DNS寻址、与服务器建立连接、发送数据、等待服务器响应、接收数据的过程。
前端优化的途径
页面级别的优化,例如HTTP请求数、脚本的无阻塞加载、内联脚本的位置优化等;
代码级别的优化,例如JavaScript中的DOM操作优化、CSS选择符优化、图片优化以及HTML结构优化等。
页面级优化1. 减少HTTP请求数减少HTTP请求数的主要途径1、从设计实现层面简化页面
保持页面简洁、减少资源的使用是最直接的。能使用CSS替代效果就尽量少使用图片。
2、合理设置HTTP缓存
恰当地缓存设置可以大大减少HTTP请求。被缓存资源的请求服务器是304响应,只有Header没有body,没有节省带宽。对于多个页面都可能使用到的代码,尽量拆分到同一个文件中。如果是嵌入页面换来的是增大了页面的体积,而且无法利用浏览器缓存。
3、资源合并和压缩
如果可以,尽可能将外部的脚本、样式进行 ...
命名禁止缩写
精简扼要地对class命名,请勿使用自定义缩写。
class name的命名必须是行为、有语意的。
禁止在非特殊情况下写!important
CSS本身有权重设计,任意地使用!important会造成权重混乱而无法维护。
不可轻易限定宽高
用户可以自行设定自己的浏览器,例如Android手机可以设定显示字体大小,写死的高度会让字体相互重叠。
RWD失效
移动设备的高度是无限的,宽度是有限的。
请不要把宽写死。
img请让它自动缩放
请不要替img的容器设定宽或高,让它根据设备自行缩放。
请使用bootstrap的img-responsive。
如果确实要用: 12width: 100%;height: auto;
如果要给img border-radius设定样式,请使用父元素控制行为,保持img只载入图片,没有样式。
优先使用grid排版
请不要花很多时间在写media query,设定一堆breakpoint,自己写组件样式,自己控制每种设备上的容器宽度。
请使用grid system,这些都是已经成熟的框架,而且有些也已经帮你处理了浏览器相容问题。
...
reduxRedux就是给JavaScript应用程序一个可以预测state的容器。
使用Redux的时候一定要记得以下三大原则:
single source of truth:应用程序的state,皆存储在唯一一个树状结构的store中;
state is read-only:唯一改变state的方式,发送一个描述如何改变的action;
changes are made with pure functions:为了描述action如何改变state,reducer必须改成pure function。
具体运行
当我们要改state时,必须**通过dispatch发送一个action对象到store**,这个action对象是用来描述发生了什么事。
store基本上也不知道收到这个用来做什么,因为它是用来存储state tree的地方,所以store会把「自己目前的state」及「action」交给给Reducer处理。
reducer是一个pure function,它会**根据我们action的要求去做state的更改,并将新的state回传给store**。
我们可以 ...
本文重点记录使用React Native构建双平台App的过程,同时进一步掌握构建过程中运用的技术。
搭建开发环境**安装react-native-cli**:npm i -g react-native-cli
Android SDK安装Android SDK并启动进行配置:
配置环境变量
123export ANDROID_HOME=~/Library/Android/sdkexport PATH=${PATH}:${ANDROID_HOME}/toolsexport PATH=${PATH}:${ANDROID_HOME}/platform-tools
Android 虚拟机设定Genymotion的Android SDK 位置(Android SDK 的路径可以在 SDK Manager 上找到)。

模拟器有多款模拟器可供选择,Android Studio自带,Genymotion和夜神模拟器,推荐选择夜 ...
React项目指导使用webpack需要安装的依赖
webpack,webpack-cli,react,react-dom
babel-loader,@babel/core,@babel/preset-env,@babel/preset-react
设置.babelrc,{"presets": ["@babel/preset-env","@babel/preset-react"]}
设置scripts:
12"dev": "webpack --mode development","build": "webpack --mode production"
设置webpack-dev-server:
1234567devServer: { compress: true, port: 9000, hot: true},"start": "webpack ...
此系列为网页设计中经常使用到的垂直居中解决方法,通过本文进行详细地总结。
使用line-height做垂直居中
See the Pen
使用line-height做垂直居中 by whjin (@whjin)
on CodePen.
使用line-height + inline-block做多行文字的垂直居中
See the Pen
使用CSS line-height + inline-block 做多行文字的垂直置中 by whjin (@whjin)
on CodePen.
使用:before + inline-block做垂直居中
See the Pen
使用line-height+inline-block做多行文字的垂直居中 by whjin (@whjin)
on CodePen.
使用padding做垂直居中
See the Pen
使用padding做垂直居中 by whjin (@whjin)
on CodePen.
使用absolute + margin负值做垂直居中
See ...
自动分配宽高123justify-content: space-between;display: grid;grid-template-columns: repeat(auto-fill, 96px);
CSS-编程技巧
使用百分比而不是固定的宽度。或者使用相对的宽度:vw, vh, vmin, vmax
在大屏幕上要有一个固定宽度的元素时,使用 max-width,让其不用media query就能自适应小屏幕
在 img, object, video, iframe 加上 max-width: 100%
当需要填充元素的背景图片时,使用 background-size: cover 让图片能保持原始比例。在移动设备上使用高解析图片不是明智的做法
制作 grid 页面时让 viewport width 来决定每一列的数量。Flexbox 或者 display: inline-block 就可以做到
当制作多栏的的文字区块时,设定 column-width 而不是 column-count,让你在小屏幕上会得到一个栏位
减少重复代码原则:
半透明的边界
See the Pe ...
QuasarQuasar是一款基于Vue.js开发的UI框架,可以让你轻松构建网站简洁明快的界面,更重要的是它还能让你轻松做好RWD(响应式网站设计),除此之外还能帮助你加上PWA,使你的网页变成手机上的App。
以下内容来自官网Quasar Framework,概括了Quasar的主要特点。
Quasar是MIT许可的开源框架(基于Vue),可帮助Web开发人员创建:
响应式网站
PWA
通过Apache Cordova构建移动App
多平台桌面应用程序(使用Electron)
选择Quasar的5个理由
内建了Material及IOS两种主题
组件均内建RWD快速响应
多样的基础UI组件库
自带了Vuex、VueRouter、Vuei18n(多国语系)
强大的部署工具
安装指南首先安装Node.js和vue-cli,具体安装方法查看官网资料。
然后安装Quasar,npm install -g quasar-cli。
最后搭建项目:quasar init <folder name>
取代main.js的quasar.config.js设置文件:
引用Quas ...
这是一个系列笔记,来自《Web前端黑客技术揭秘》这本书,属于进阶内容,可以进一步提高Web开发的能力。
Web安全的关键点数据和指令
SQL注入攻击
selct username,email,desc from users where id=1
攻击者提交:
union select password,1,1 from users
最终SQL查询语句:
selct username,email,desc from users where id=1 union select password,1,1 from users
组成的SQL语句合法,通过一个经典的union查询,此时注入的指令内容就会被当做合法指令执行。这样的攻击会导致users表中的password泄露。
XSS跨站脚本攻击
eval函数能够动态执行url返回的特定信息,比如eval(location.hash.substr(1))即是截取#后的callback内容,提供给eval进行动态执行。
如果攻击者对#后的url中的#后的内容进行改造,就可以截取到访问者的cookies会话信息,其中可能包含访问者的账号、密 ...