[聚合文章] 2017.12.5-学习笔记：前端零碎知识点整理复习

  1. 首页
  2. 聚合文章
  3. 文章详情
Ajax 2017-03-12 21 阅读
原文链接: http://www.jianshu.com/p/a3c878170923

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

pc端

1.bootstrap 中容器 container 中的类[role aria sr-only(盲人设备的类，可以删除，简化html结构)]
2.html 新增的表单属性
  • 1.autocomplete = "off" 关闭表单自动完成提示，默认 on
  • 2.autofocus 输入域在页面载入时自动聚焦
  • 3.placeholder 文本提示
  • 4.multiple 多文件选择
  • 5.form="formId" 给表单元素添加，允许该表单元素写在 form 的外面，值为 form 表单的 id
  • 6.required 内容不能为空
3.bootstrapValidator(前端校验插件)
  • 检验的内容必须在 form 表单内 ( 表单提交按钮的 type 必须为 submit )
  • $("form").bootstrapValidator({args}) 初始化表单
    arg1.excluded 不校验的数组
    arg2.feedbackIcons 配置校验的小图标
    arg3.fields 配置校验的规则
    (校验失败会禁用登录按钮)
  • $form.data("bootstrapValidator").resetForm() 获取插件实例，调用重置样式方法
  • $form.data("bootstrapValidator").updateStatus(args) 手动更新字段状态
    args1：想要修改的字段
    args2：改成什么状态 INVALID VALID
    args3：指定显示的错误信息 callback
  • success.form.bv (注册表单校验成功事件)
    $form.on("success.form.bv",function(e){ e.preventDefault();// 阻止浏览器默认行为 (reture false 会阻止下面代码执行)})
4.$.ajax({}) 中的
  • dataType:'json' 如果后端返回的响应头有 text/html 就要加
  • data:$form.serialize() 将表单中所有 name 属性和值拼成一个字符串，表单序列化
5.ajax (全局事件)
  • $(document).ajaxStart(fn) 只要发送 ajax 就执行 fn
  • $(document).ajaxComplete(fn) 每一个ajax 结束就执行 fn
  • $(document).ajaxStop(fn) 当所有的 ajax 结束就执行 fn
6.NProgress.js(进度条插件)
  • NProgress.configure({showSpinner:false})
  • NProgress.start() 开启进度条
  • NProgress.done() 结束进度条
    要放在 ajax 全局函数中 代码：
  // 关闭小圆环  NProgress.configure({showSpinner: false});  // 注册 ajax 全局事件  $(document).ajaxStart(function() {    // 开启进度条    NProgress.start();  });  $(document).ajaxStop(function() {    // 结束进度条,这边是虚拟一秒后    setTimeout(function() {      NProgress.done();    }, 1000);  });
7.modal (模态框)
  • $("selector").modal.show()显示
  • $("selector").modal.hide()隐藏
8.jQuery 注册事件不会覆盖 要用 off 解绑 off("click") 不传参数默认解绑所有事件
  • 注册事件和触发事件是两码事
  • 在外部事件内部注册事件，当触发外部事件时会注册内部事件，如果没触发内部事件，会一直保留注册内部事件的状态，当下次触发内部事件时，会触发之前累积注册的所有的内部事件，所以，为了避免多次触发累积的事件，在注册内部事件前，加上 off()，先解绑内部事件的注册状态，在注册内部事件，这样触发内部事件的时候，就不会累积。
9.cookie 和 session
  • cookie 每次请求都会携带
  • session 里面存储用户的登录信息 (PHPSESSID)
  • 七天免登录：设置cookie 的有效期是7天
  • 销户：删除 session
  • 因为 http 是无状态的，但如果想保持一个登录的状态，就要用到状态保持的东西，也就是 cookie 和 session

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

10.location 和 history
  • location.href ==> 整个url
  • location.reload() ==> 刷新页面
  • location.search ==> 获得 包含?后的参数
  • location.hash ==> 锚点，包含#后的参数
  • history.go(1) ==> 前进
  • history.forward() ==> 前进
  • history.go(-1) ==> 后退
  • history.back() ==> 后退
  • <a href="javascript:history.go(-1)"></a>伪协议，页面不跳转，执行 js 代码
  • 用于获取 url 参数的工具对象
// 用对象包裹工具函数，防止全局变量污染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.登录验证的两种方法
  • 1.后端 node.js 处理，规定路径，前端按后端的路径写名称
  • 2.前端 根据后端的接口 作出判断
12.模版引擎
  • 1.引包
  • 2.准备模版
  • 3.准备数据
  • 4.模版与数据绑定 == 结构
    template("tpl",data)
  • 5.渲染到页面
    $("div").html(template("tpl",data))
  • 6.修改模版
<% 用于写复杂的逻辑的百分号语法 %>{{each rows v i}}  {{v.id}}  {{v.name}}{{/each}}
  • 模版引擎内能用template("tpl",data)中 data 对象 的属性，如果是数组，要用{list:arr}包装成对象
13.bootstrap-paginator(分页插件)
  • 1.准备一个盒子 必须是 ul
  • 2.在 success 里初始化 渲染分页
  • 3.参数：bootstrapMajoyVersion、currentPage、totalPages、onPageClicked(a,b,c,page)
  • 4.自定义内容：itemTexts(type,page,current) 设置返回值 return
  • 5.title属性：tooltipTitles(type,page,current) 设置返回值 return
  • 6.useBootstrapTooltip:true 使用 bootstrap 风格的 title
14.dom 对象的 reset() 方法，重置表单
15.fileupload(文件上传插件) ==> formdate 实现的
16.input:hidden 隐藏域 的 value 来保存 id

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

17.表格内容居中
  • 设置给 td:text-align: center;vertical-align middle;
18.栅格系统 类前缀
  • 超小屏幕 手机 (<768px).col-xs-
  • 小屏幕 平板 (≥768px).col-sm-
  • 中等屏幕 桌面显示器 (≥992px).col-md-
  • 大屏幕 大桌面显示器 (≥1200px).col-lg-
  • 列偏移 .col-md-offset-* ==> 这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）
19.bootstrap 登录页的表单 用水平排列的表单 要在 form 中添加 .form-horizontal 类，将 label 标签和控件组水平并排布局
20.jQuery中切换上下滑动 slideToggle()
21.使用数组接收上传图片的结果 利用数组的长度，判断上传图片的张数

移动端

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

  • width：用于设置layout viewport(布局视口)的宽度

  • initial-scale：设置页面的初始缩放比和 layout viewport(布局视口)的宽度

  • user-scalable：当设置为no时，可禁止用户缩放页面。但请不要这样去做。

5.设置标题图标

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

  • 名字固定：favicon.ico
  • 位置根目录
6.设置了绝对定位的元素会默认在原来标准流中的位置，要设置 left 和 top 值
7.datepicker日期插件 和 ueditor富文本编辑插件
8.数据存储的位置
  • 存数据库(服务端)
    1.缺点：发请求，消耗服务器性能
    2.缺点：如果要存数据库，要求用户先登录，用户体验不好
    3.优点：安全，不会被用户篡改
  • 存本地(浏览器端)
    1.优点：本地操作，快
    2.优点：不会占用服务器的资源
    3.缺点：不安全，容易被清除或者修改
    对于不是特别重要的数据，存本地，丢了也不影响
    对于重要的数据，必须存在数据库，甚至还需要加密。(密码)
9.本地缓存

1.cookie

  • 大小：4k
  • 获取方式：每次请求都会携带cookie
  • 生命周期：如果不设置过期时间，默认是会话级别的cookie，浏览器关闭就失效，可以设置过期时间document.cookie="name=zs;max-age=60;path=/"
  • cookie还有路径问题：子目录可以访问父目录的cookie，父目录无法访问子目录的cookie，通常设置cookie的路径是根路径

2.sessionStorage

  • 大小：5兆左右
  • 获取方式：必须手动获取，自动携带 getItem()
  • 生命周期：关闭浏览器就失效，多窗口不共享

3.localStorage

  • 大小：5兆左右
  • 获取方式：必须手动获取，自动携带 getItem()
  • 生命周期：只要不手动清除，永久存在，多窗口共享
  • 存储的是字符串，操作的是数组或者对象
// 存储localStorage.setItem("name","value");// 获取localStorage.getItem("name");// 删除localStorage.removeItem("name");// 存对象要先转json，取出来再转localStorage.setItem("obj",JSON.stringify(obj));
10.BFC和浮动

  • 1.在标准流中，如果一个盒子没有高度，它的高度由子盒子来撑开

  • 2.清除浮动的核心：使用一个额外的盒子，这个盒子不能浮动，并且要清除浮动，不和浮动元素在一起
    如果使用额外标签法清除浮动，缺点是需要一个额外的盒子。
    伪元素清浮动.clearfix::after{content:'';display:block;clear:both;}

  • 3.bfc(block formatting context) 盒子
    1.触发了 bfc 的盒子是一个独立的盒子，bfc 盒子不允许子元素去影响别的盒子。
    2.bfc 盒子不需要清除浮动
    3.可以用于自适应布局，左边固定，右边自适应(原先是加 margin-left)
    4.解决 margin 塌陷(由于外边距合并)

  • 4.触发 bfc 的方式：
    1.overflow: hidden scroll auto
    2.float: left right
    3.position: absolute fixed
    4.display: inline-block

11.表单内的 button 有提交功能，类似于 submit，注册点击事件的时候e.preventDefault禁用默认行为
12./^1\d{10}&/.test(mobile) ==> 手机正则
13.mui 的下拉刷新的 click 事件无效，要用 tap 事件
14.dom.dataset; 原生js获取自定义属性，所有 data- 开头的自定义属性都会存储到 dataset 中
  • 利用data- 自定义属性 存储一部分信息，再js中通过dom.dataset; 获取这个自定义属性对象，直接传到模版引擎中，作为参数对象，在模版中就可以使用这些自定义属性中存储的信息
15.html.replace(/\n/g,"") ==> 去除出 html 字符串中所有换行
16.html 中属性不分大小写
17.mui 中动态添加的组件 要重新初始化

例如数字框、input框、switch开关
mui("selector").numbox();
mui('.mui-input-row input').input();
mui('.mui-switch')['switch']();

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();

注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。