前端开发让前端飞Web前端之路

2017.12.5-学习笔记：前端零碎知识点整理复习

2017-12-05  本文已影响104人  bixin

前言：最近写了一个后台管理系统的页面和一个移动端商城的页面，后台用了bootstrap框架，移动端用了mui框架。这里整理一下零零碎碎的知识点，或许就有你需要的。

pc端

1.bootstrap 中容器 container 中的类[role aria sr-only(盲人设备的类，可以删除，简化html结构)]
2.html 新增的表单属性
3.bootstrapValidator(前端校验插件)
4.$.ajax({}) 中的
5.ajax (全局事件)
6.NProgress.js(进度条插件)
  // 关闭小圆环
  NProgress.configure({showSpinner: false});
  // 注册 ajax 全局事件
  $(document).ajaxStart(function() {
    // 开启进度条
    NProgress.start();
  });
  $(document).ajaxStop(function() {
    // 结束进度条,这边是虚拟一秒后
    setTimeout(function() {
      NProgress.done();
    }, 1000);
  });
7.modal (模态框)
8.jQuery 注册事件不会覆盖 要用 off 解绑 off("click") 不传参数默认解绑所有事件
9.cookie 和 session

奶茶店 的例子：
奶茶店，喝5倍送一杯奶茶；
服务员记不住每次来喝奶茶的人(无状态)；
奶茶店给第一次来喝奶茶的客人，准备一张小卡片，小卡片有个编号，编号是唯一的，奶茶店在本子上记录每个编号喝了几杯奶茶；
客户的小卡片：cookie；
奶茶店的小本子：session；

10.location 和 history
// 用对象包裹工具函数，防止全局变量污染
var tools = {
  // 获取参数对象的函数
  getParamObj: function () {
    // 获取参数
    var search = location.search;
    // 参数解码
    search = decodeURI(search);
    // 取出？后的参数
    search = search.slice(1);
    // 将参数按 & 分割为数组
    var arr = search.split("&");
    // 准备一个空对象
    var obj = {};
    // 遍历这个参数数组
    arr.forEach(function (e) {
      将数组中每一项按 = 切割为键值对数组
      var key = e.split("=")[0];
      var value = e.split("=")[1];
      // 给对象添加属性和值
      obj[key] = value;
    })
    // 返回这个对象
    return obj;
  },
  // 获取某个属性的属性值的函数
  getParam: function (key) {
    // 返回调用 上面函数 返回出来的对象 的 key 属性的值
    return this.getParamObj()[key]
  }
}
11.登录验证的两种方法
12.模版引擎
<% 用于写复杂的逻辑的百分号语法 %>
{{each rows v i}}
  {{v.id}}
  {{v.name}}
{{/each}}
13.bootstrap-paginator(分页插件)
14.dom 对象的 reset() 方法，重置表单
15.fileupload(文件上传插件) ==> formdate 实现的
16.input:hidden 隐藏域 的 value 来保存 id

利用bootstrapValidator表单校验时要手动修改使它成功$form.data("bootstrapValidator").updateStatus(args)

17.表格内容居中
18.栅格系统 类前缀
19.bootstrap 登录页的表单 用水平排列的表单 要在 form 中添加 .form-horizontal 类，将 label 标签和控件组水平并排布局
20.jQuery中切换上下滑动 slideToggle()
21.使用数组接收上传图片的结果 利用数组的长度，判断上传图片的张数

移动端

1.transform:translateZ(0) -- 开启 gpu 加速
2.&yen; ==> ¥￥前一个是代码，后一个是中文状态下直接输入，好像也差不多
3.mui 区域滚动
<div class="mui-scroll-wrapper">
  <div class="mui-scroll">
    <!--这里放置真实显示的DOM内容-->
  </div>
</div>

mui('.mui-scroll-wrapper').scroll({
 scrollY: true, //是否竖向滚动
 scrollX: false, //是否横向滚动
 startX: 0, //初始化时滚动至x
 startY: 0, //初始化时滚动至y
 indicators: true, //是否显示滚动条
 deceleration:0.0006, //阻尼系数,系数越小滑动越灵敏
 bounce: true //是否启用回弹
});
4.视口标签

<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0">

5.设置标题图标

<link rel="icon" href="./favicon.ico">

6.设置了绝对定位的元素会默认在原来标准流中的位置，要设置 left 和 top 值
7.datepicker日期插件 和 ueditor富文本编辑插件
8.数据存储的位置
9.本地缓存

1.cookie

2.sessionStorage

3.localStorage

// 存储
localStorage.setItem("name","value");
// 获取
localStorage.getItem("name");
// 删除
localStorage.removeItem("name");
// 存对象要先转json，取出来再转
localStorage.setItem("obj",JSON.stringify(obj));
10.BFC和浮动
11.表单内的 button 有提交功能，类似于 submit，注册点击事件的时候e.preventDefault禁用默认行为
12./^1\d{10}&/.test(mobile) ==> 手机正则
13.mui 的下拉刷新的 click 事件无效，要用 tap 事件
14.dom.dataset; 原生js获取自定义属性，所有 data- 开头的自定义属性都会存储到 dataset 中
15.html.replace(/\n/g,"") ==> 去除出 html 字符串中所有换行
16.html 中属性不分大小写
17.mui 中动态添加的组件 要重新初始化
18.$(":checked") 选取所有被选中的元素（复选框或单选按钮）
19.toFixed(2) ==> 四舍五入保留2位小数
20.回跳页面的方法
// 当前页设置一个参数
  location.href="login.html?retUrl="+location.href;

// 目标页判断有没有带有设定的参数
  if (location.search.indexOf("retUrl") === -1) {
    location.href = "user.html";
  } else {
    search = search.replace("?retUrl=", "");
    location.href = search;
  }
21.mui 的下拉刷新结束和开始方法用 可以到实例 mui('selector').pullRefresh() 中找方法（因为原文档错误）
// 刷新结束方法 ==> 选择器容器最好用mui-scroll-wrapper区域滚动的选择器
mui('selector').pullRefresh().endPulldownToRefresh();

// 开始刷新方法 ==> 选择器容器最好用mui-scroll-wrapper区域滚动的选择器
mui('selector').pullRefresh().pulldownLoading();
22.文本域 防止拖拽缩放 resize:none 自适应宽度 不设 cols 设置宽度 100%
23.点击按钮发送ajax请求，渲染二级菜单并显示，发送过的再点击就不发送请求，只显示
24.返回上一页 <a href="javascript:history.go(-1)">
25.单行以及多行文本溢出用省略号显示
  - overflow:hidden; //超出的文本隐藏
  - text-overflow:ellipsis; //溢出用省略号显示
  - white-space:nowrap; //溢出不换行

overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;//将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; //从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
-webkit-line-clamp:2;//这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数。
26.jQuery 获取当前点击元素下标 $(this).index()
27.a 标签内 target="_blank" 打开新标签


Knowledge changes the mind

上一篇 下一篇

猜你喜欢

热点阅读