Chendi Wu

Appearance

  1. 反转字符串
javascript
this.message = this.message.split('').reverse().join('')
  1. 页面加载完后执行
javascript
$(function () {})
$(document).ready(function () {})
window.onload = function () {}
  1. 页面间跳转
javascript
window.location.href = 'http://www.baidu.com'
window.location.replace('http://www.baidu.com')
  1. 浏览器前进后退
javascript
history.forward() //前进
history.back() //后退+刷新
history.back(-1) //后退,直接返回当前页的上一页，数据全部消息，是个新页面
history.go(1) //前进
history.go(-1) //后退也是返回当前页的上一页，不过表单里的数据全部还在
  1. 地址栏传参中文乱码
javascript
传: encodeURI(encodeURI(name))
接: decodeURI(name)
  1. 几种 js 外层写法
javascript
- jQuery(function () { }); 全写为 jQuery(document).ready(function () { });
  用于存放操作DOM对象的代码，执行其中代码时DOM对象已存在。
- (function () { … })()和(function () { … }())是两种javascript立即执行函数的常见写法.
  1. 获取当前鼠标坐标
javascript
var getCoordInDocumentExample = function () {
  var coords = document.getElementById('colorPanel')
  coords.onmousemove = function (e) {
    var pointer = getCoordInDocument(e)
    var coord = document.getElementById('colorText')
    coord.innerHTML = 'X,Y=(' + pointer.x + ', ' + pointer.y + ')'
  }
}

var getCoordInDocument = function (e) {
  e = e || window.event
  var x =
    e.pageX ||
    e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft)
  var y =
    e.pageY || e.clientY + (document.documentElement.scrollTop || document.body.scrollTop)
  return {
    x: x,
    y: y,
  }
}

window.onload = function () {
  getCoordInDocumentExample()
}
  1. cookie.js 的使用
javascript
$.cookie('empNo', empNo, { expires: 7 }) //存
$.cookie('empNo') //取
  1. JS 辨别访问浏览器判断是 android 还是 ios 系统
javascript
var ua = navigator.userAgent.toLowerCase()
if (/iphone|ipad|ipod/.test(ua)) {
  console.log('iphone')
} else if (/android/.test(ua)) {
  console.log('android')
}
  1. ajax 请求
javascript
$(function () {
  $.ajax({
    type: 'post',
    async: true, //默认设置为true，所有请求均为异步请求。
    url: 'http://www.idaima.com/xxxxx.php',
    data: {
      username: $('#username').val(),
      content: $('#content').val(),
    },
    dataType: 'json', //xml、html、script、jsonp、text
    beforeSend: function () {},
    complete: function () {},
    success: function (data) {
      console.log(data)
    },
    error: function () {},
  })
})
  1. 如何获取 checkbox，并判断是否选中
javascript
$("input[type='checkbox']").is(':checked') //返回结果：选中=true，未选中=false
  1. 获取 checkbox 选中的值
javascript
var chk_value = []
$('input[name="test"]:checked').each(function () {
  chk_value.push($(this).val())
})
  1. checkbox 全选 / 反选 / 选择奇数
javascript
$("document").ready(function () {
    $("#btn1").click(function () {
        $("[name='checkbox']").attr("checked", 'true'); //全选
    }) $("#btn2").click(function () {
        $("[name='checkbox']").removeAttr("checked"); //取消全选
    }) $("#btn3").click(function () {
        $("[name='checkbox']:even").attr("checked", 'true'); //选中所有奇数
    }) $("#btn4").click(function () {
        $("[name='checkbox']").each(function () { //反选
            if ($(this).attr("checked")) {
                $(this).removeAttr("checked");
            } else {
                $(this).attr("checked", 'true');
            }
        })
    })
})
  1. 获取 select 下拉框的值
javascript
$('#select').val()
  1. 获取选中值，三种方法都可以
javascript
$('input:radio:checked').val() ；
$("input[type='radio']:checked").val();
$("input[name='rd']:checked").val();
  1. jQuery 中几个自定义的事件
javascript
- hover(fn1, fn2) ：一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。
当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，
会触发指定的第二个函数。
- ready(fn): 当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。
- toggle(evenFn, oddFn): 每次点击时切换要调用的函数。如果点击了一个匹配的元素，
则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数。
随后的每次点击都重复对这两个函数的轮番调用。
- trigger(eventtype): 在每一个匹配的元素上触发某类事件。
- bind(eventtype, fn) ，unbind(eventtype): 事件的绑定与反绑定
  1. 屏幕旋转的事件和样式
javascript
function orientInit() {
  var orientChk =
    document.documentElement.clientWidth > document.documentElement.clientHeight
      ? 'landscape'
      : 'portrait'
  if (orientChk == 'lapdscape') {
    //这里是横屏下需要执行的事件
  } else {
    //这里是竖屏下需要执行的事件
  }
}
orientInit()
window.addEventListener(
  'onorientationchange' in window ? 'orientationchange' : 'resize',
  function () {
    setTimeout(orientInit, 100)
  },
  false
)
  1. 软键盘弹出影响定位
html
<!-- fixed定位
1.ios下fixed元素容易定位出错，软键盘弹出时，影响fixed元素定位
2.android下fixed表现要比iOS更好，软键盘弹出时，不会影响fixed元素定位
3.ios4下不支持position: fixed
解决方案：使用[Iscroll](http://cubiq.org/iscroll-5)，如： -->
<div id="wrapper">
  <ul>
    <li></li>
    .....
  </ul>
</div>
<script src="iscroll.js"></script>
<script>
  var myscroll
  function loaded() {
    myscroll = new iScroll('wrapper')
  }
  window.addEventListener('DOMContentLoaded', loaded, false)
</script>
<!-- position定位
Android下弹出软键盘弹出时，影响absolute元素定位
解决方案: -->
<script>
  var ua = navigator.userAgent.indexOf('Android')
  if (ua > -1) {
    $('.ipt')
      .on('focus', function () {
        $('.css').css({ visibility: 'hidden' })
      })
      .on('blur', function () {
        $('.css').css({ visibility: 'visible' })
      })
  }
</script>
  1. js 判断微信浏览器
javascript
function isWeixin() {
  var ua = navigator.userAgent.toLowerCase()
  if (ua.match(/MicroMessenger/i) == 'micromessenger') {
    return true
  } else {
    return false
  }
}
  1. 全部替换字符串里的某个元素
javascript
deadDay.replace(/-/g, '') //"-"全部去掉
  1. 获取当前国家省市(新浪的接口)
javascript
$.getScript('http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js', function () {
  alert(remote_ip_info.country) //国家
  alert(remote_ip_info.province) //省份
  alert(remote_ip_info.city) //城市
})
  1. 获取本周日期
javascript
var now = new Date()
var start = new Date()
var n = now.getDay()
for (var i = 1; i <= 7; i++) {
  var day = start.setDate(now.getDate() - n + i)
  day = new Date(day)
  day = day.getFullYear() + '-' + (day.getMonth() + 1) + '-' + day.getDate()
  console.log(day)
}
  1. 在 JavaScript 中，所有的对象都是不相等的，每一个都是独立的对象实例, 这是一个非常重要的特性.
  1. 获取随机颜色
js
console.log('#' + Math.random().toString(16).slice(2, 8))
  1. 将类数组对象转化为数组（只是包含“数字”键及其键值）
js
var arr = [].slice.call(NodeLisr, 0),
  1. 手机号截取
js
phone.substr(0, 3) + '****' + phone.substr(7, 11)