前端记录(js,jq篇)

1. 禁用自动填充：

 $("input").attr("autocomplete", "off");

2. 获取url参数：

function getQueryVariable(variable) {
  var query = window.location.search.substring(1);
  var vars = query.split("&");
  for (var i = 0; i < vars.length; i++) {
    var pair = vars[i].split("=");
    if (pair[0] == variable) {
      return pair[1];
    }
  }
  return false;
}
// var tempName = decodeURIComponent(getQueryVariable('tempName')); // 获取中文示例

3. 获取三个月之前的时间 然后日期转为时间戳：

//获取三个月之前的时间 然后日期转为时间戳
function getThreeMonths(time) {
  // let timeOne = new Date(1575158521000)
  let timeOne = new Date()
  let year = time.substring(0, 4)
  let month = time.substring(5, 7)
  let day = time.substring(8, 10)
  // 计算3个月后的月份
  let ThreeMonths = month - 3
  // 如果小于 0 说明是去年
  if (ThreeMonths <= 0) {
    year = year - 1
  }
  // 如果 等于 -2 说明当前月是 1 月份 所以三个月前是去年 10月
  if (ThreeMonths === -2) {
    ThreeMonths = 10
  }
  // 如果 等于 -2 说明当前月是 2 月份 所以三个月前是去年 11月
  if (ThreeMonths === -1) {
    ThreeMonths = 11
  }
  // 如果 等于 -2 说明当前月是 3 月份 所以三个月前是去年 12月
  if (ThreeMonths === 0) {
    ThreeMonths = 12
  }
  // 获取当前的时间的日期字符串
  // **如果天数的值为零，则默认返回当前月份的最后一天
  let timeTow = new Date(year, ThreeMonths, 0)
  // 获取三个月前的最后一天
  let ThreeMonthsDay = timeTow.getDate()
  // 判断如果当前月份的天数大于三个月前的天数时，则当前天数等于三个月前的天数
  if (day > ThreeMonthsDay) {
    day = ThreeMonthsDay
  }
  //天数补0
  day < 10 ? "0" + day: day;
  // 格式化时间
  const THREE_MONTHS_AGO = `${year}/${ThreeMonths}/${day}`

  console.log(THREE_MONTHS_AGO)
  // 生成时间戳
  const THREE_STAMP = new Date(THREE_MONTHS_AGO).getTime()
  return THREE_STAMP
}
// console.log(transdate('2020-04-28'))

4. 查找、添加和移除 p 元素中的 id 属性：

	//查找
	$('p').attr('id')
	//添加
	$('p').attr('id','data')
	//移除
	$('p').removeAttr('id')

5. localStorage 本地存储、获取和移除：

	//存储
	localStorage.setItem("loginReg", JSON.stringify(loginReg));
	//获取
	JSON.parse(localStorage.getItem("loginReg"));
	//全部移除
	localStorage.clear();
	//指定移除
	localStorage.removeItem("loginReg")

6. JavaScript返回到上一页的三种方法：

	window.history.go(-1); //返回上一页
	window.history.back(); //返回上一页
	window.location.go(-1); //刷新上一页

7. 后台返回图片文件预览(后台二进制文件流预览),img图片和pdf文件预览：

	//PDF
	var url = 'xxxxxxxx'
    var xhr = new XMLHttpRequest();
    xhr.open("post", url);
    xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
    xhr.responseType = "blob";
    xhr.send("fileId=" + xxxxxxx);//参数
    xhr.onload = function () {
      if (this.status == 200) {
          var blob = this.response;
          var binaryData = []
          binaryData.push(blob)
          var src = window.URL.createObjectURL((new Blob(binaryData, { type: "application/pdf" }))) + '#toolbar=0&navpanes=0&scrollbar=0'
     	}
  	}

	//jpg,png...
	var url = 'xxxxxxxx'
    var xhr = new XMLHttpRequest();
    xhr.open("post", url);
    xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
    xhr.responseType = "blob";
    xhr.send("fileId=" + xxxxxxx);//参数
    xhr.onload = function () {
      if (this.status == 200) {
          var blob = this.response;
          var src = window.URL.createObjectURL(blob)
     	}
  	}

8. jquery添加!important样式

	$("span").css("cssText","background-color:red !important");

9. 日期格式处理(‘2019-04-07T16:00:00.000+0000’转成‘年-月-日 时:分:秒’)

// -------------------------------------------日期格式处理
function myTime(date) {
  var arr = date.split("T");
  var d = arr[0];
  var darr = d.split("-");

  var t = arr[1];
  var tarr = t.split(".000");
  var marr = tarr[0].split(":");

  var dd =
    parseInt(darr[0]) +
    "/" +
    parseInt(darr[1]) +
    "/" +
    parseInt(darr[2]) +
    " " +
    parseInt(marr[0]) +
    ":" +
    parseInt(marr[1]) +
    ":" +
    parseInt(marr[2]);
  return dd;
}
// 数字补0操作
function addZero(num) {
  return num < 10 ? "0" + num : num;
}

function formatDateTime(date) {
  var time = new Date(Date.parse(date));
  time.setTime(time.setHours(time.getHours() + 8));
  var Y = time.getFullYear() + "-";
  var M = this.addZero(time.getMonth() + 1) + "-";
  var D = this.addZero(time.getDate()) + " ";
  var h = this.addZero(time.getHours()) + ":";
  var m = this.addZero(time.getMinutes()) + ":";
  var s = this.addZero(time.getSeconds());
  return Y + M + D + h + m + s;
}

// var time1 = "2019-04-07T16:00:00.000+0000";
// console.log(formatDateTime(myTime(time1)));

10. jQuery添加DOM元素：

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
//示例： $("p").append("xxxxx");

11. 日期转换为时间戳：

unction timeStamp(time){
    var date = new Date();
    date.setFullYear(time.substring(0, 4));
    date.setMonth(time.substring(5, 7) - 1);
    date.setDate(time.substring(8, 10));
    date.setHours(time.substring(11, 13));
    date.setMinutes(time.substring(14, 16));
    date.setSeconds(time.substring(17, 19));
    return Date.parse(date) / 1000;
}
console.log(timeStamp("2020-05-15 15:14:30"));

12. 函数防抖和节流：

函数防抖：当持续触发某事件时，一定时间间隔内没有再触发事件时，事件处理函数才会执行一次，如果设定的时间间隔到来之前，又一次触发了事件，就重新开始延时。

函数节流：当持续触发事件时，有规律的每隔一个时间间隔执行一次事件处理函数。

13. JQuery 中 is(’:visible’) 解析及用法：

if ($(this).is(':visible')) {
//如果ANSWER 为可见,:visible是可见的意思,相关用法还有:hidden(隐藏),:first(第一个),:last(最后一个)   
    $(this).slideUp();//以向上滑动方式隐藏 
} else {   
    $(this).slideDown();//以向下滑动方式显示 
}   

14. JQuery 中 .appendTo 解析及用法：

//在每个 p 元素结尾插入内容
$("<b>Hello World!</b>").appendTo("p");

15. 深拷贝和浅拷贝的概念及深拷贝的方法：

1、浅拷贝
　　　　概念：子对象复制父对象，父子对象发生关联，两者属性值指向同一内存空间。简单来讲，就是改变其中一个对象，另一个对象也会跟着改变。
2、深拷贝
　　 　　概念：拷贝对象各个层级的属性。简单的讲，就是复制出来的每个对象都有属于自己的内存空间，不会互相干扰。
3、深拷贝的方法

let listArr=[1,2,3,4];
let list=[];
Object.assign(list,listArr);
console.log(list);
listArr.push(5);
console.log("我是原来的"+listArr+",我是现在的"+list);

16. 数组去重、数组合并：

let finalList = [{ id: 1, name: '小明' }, { id: 2, name: '小红' }, { id: 3, name: '小黄' }]
let finalListTwo = [{ id: 4, name: '小蓝' }, { id: 5, name: '小绿' }, { id: 6, name: '小黄' }]
//数组合并
let res = finalListTwo.concat(finalList)
console.log(res)
//数组去重--1
let obj = {}
let newArr = []
newArr = res.reduce((item, next) => {
    obj[next.name] ? ' ' : obj[next.name] = true && item.push(next)
    return item
}, [])
//数组去重--2
const arr = ['张三','张三','李四']
let set = new Set(arr); // set 自带去重
// Set { '张三', '李四' }
console.log(set);
console.error(Array.from(set)); // [ '张三', '李四' ]

17. 把RGB颜色转换为16进制颜色：

function colorRGBtoHex(color) {
  var rgb = color.split(',');
  var r = parseInt(rgb[0].split('(')[1]);
  var g = parseInt(rgb[1]);
  var b = parseInt(rgb[2].split(')')[0]);
  var hex = "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
  return hex;
}

18. js数组与字符串的相互转换方法：

一、数组转字符串
需要将数组元素用某个字符连接成字符串，示例代码如下：
var a, b;
a = new Array(0,1,2,3,4);
b = a.join("-");

二、字符串转数组
实现方法为将字符串按某个字符切割成若干个字符串，并以数组形式返回，示例代码如下：
var s = "abc,abcd,aaa";
var ss = s.split(",");// 在每个逗号(,)处进行分解。
//字符串截取
ss[0].slice(0, 1) //console.log('a')
//0和1代表的是索引（包前不包后）

19. jquery怎么获取当前元素的兄弟元素：

$('#id').siblings() //当前元bai素所有的兄弟du节zhi点
$('#id').prev() //当前元素前一个兄弟节点
$('#id').prevAll() //当前元素之dao前所有的兄弟节点
$('#id').next() //当前元素之后第一个兄弟节点
$('#id').nextAll() //当前元素之后所有的兄弟节点

20. 对比两个对象，查出其中不同的值：

var obj1 = { id: 1, item: 0 }
var obj2 = { id: 1, item: 2 }
function isObjEqual(o1, o2) {
  var props1 = Object.getOwnPropertyNames(o1);
  var Carr = []
  for (var i = 0, max = props1.length; i < max; i++) {
    var propName = props1[i];
    if (o1[propName] != o2[propName]) {
      Carr.push(propName)
    }
  }
  return Carr
}
console.log(isObjEqual(obj1,obj2)) //item

21. 控制右侧滚动条滑到指定位置：

scrollTo(0,100)
第一个参数：宽度的滚动条
第二个参数：高度的滚动条

22. jQuery判断当前元素是第几个元素：

$("ul li").click(function () {
    var index = $("ul li").index(this);
    console.log(index);
 });

23. js实现获取两个日期之间所有日期的方法：

var intervalTimeS = []//日期数组
Date.prototype.format = function () {
    var s = '';
    s += this.getFullYear() + '-';          // 获取年份。
    s += (this.getMonth() + 1) + "-";         // 获取月份。
    s += this.getDate();                 // 获取日。
    return (s);                          // 返回日期。
};

function getAll(begin, end) {
    var ab = begin.split("-");
    var ae = end.split("-");
    var db = new Date();
    db.setUTCFullYear(ab[0], ab[1] - 1, ab[2]);
    var de = new Date();
    de.setUTCFullYear(ae[0], ae[1] - 1, ae[2]);
    var unixDb = db.getTime();
    var unixDe = de.getTime();
    for (var k = unixDb; k <= unixDe;) {
        intervalTimeS.push((new Date(parseInt(k))).format())
        k = k + 24 * 60 * 60 * 1000;
    }
}
console.log(intervalTimeS)

22. jQuery判断input是否禁用：

$(this).is(":disabled");  // true / false
$(this).prop("disabled"); // true / false
$(this).attr("disabled"); // disabled / undefined