js,jquery备忘录

时间:2023-03-09 09:50:52
js,jquery备忘录

1.var s = str.charCodeAt();转ASCII码

2.String.fromCharCode(65);转字母

3.es6 ... (扩展运算符),将一个数组转化成由逗号分割的队列。

如:arr = [1,2,3] ...arr => 1,2,3;

当你需要找一个数组中的最小值的时候便可以Math.min(...arr);

4.arr.reduce(function(){},初始值);累计一个数组中的元素,

如累加:arr.reduce(function(x,y){

return x + y;

},0)//初始值我理解为x的初始值为0;也就是需要求和的值。

5.es6 set 集合长度用size;

6.es7 padStart(自定义长度,自定义值)头部补全

如:“123”.padStart(“5”,“0”);=》“00123”;

7.Number.isInterger()用来判断一个数是否是整数。

8.判断两个数组是否相等:arr1.toString()==arr2.toString().

9.实现反转的sort排序:sort(x=>1)//箭头函数

10.replace()想要替换所有匹配的值时,要在正则表达式那里加上g,也就是全局,否则他只会匹配第一个。

11.$("li:gt(index));取大于索引的所有值。

12.判断二进制数能否被3整除正则表达式:var reg = /^0*(1(01*0)*10*)*$/

13.instanceOf 用来判断一个对象是否是由另一个对象生成的

typeOf 用来判断类型

14.//判断二进制数能否被五整除:

/*let divisibleByFive = /^(0|1(10)*(0|11)(01*01|01*00(10)*(0|11))*1)+$/*/

15.在一个数组中有null和false时;

在转化为字符串时,null会变成空位,false会变成“false”;

在判断数组元素是否为0或者“0”时,要用===;因为如果是==;false会转化为0。

16.将二维数组扁平化:[].concat(...arr);

17.四舍五入且保留两位小数的方法:num.toFixed(2);保留两位小数;

如果是 +num.toFixed(2)则代表整数依然保留整数,小数保留两位。

Math.round(num*100)/100;

18.反转一个数组:不用reverse():reverse=a=>[...a].map(a.pop,a);

19.判断url是否能被正确链接

function checkUrl(url, name)
{
$.ajax({
url: url,
type: "get",
dataType : 'jsonp',
crossDomain : true,

complete: function(xhr, textStatus) {
if( xhr.readyState === 4 && xhr.status === 200 )
{
代表能访问链接成功
}
}
});
}

20.在做一些网页上的tab栏切换的时候,建议用jquery的show()和hide()方法来实现。(且默认隐藏的元素也用hide()方法初始化)。

21.jquery记录index:$(this).index()。

22.substring(index)代表从索引处开始截取;substring(a,b)代表从下标为a处截取长度为b-a个字符。(参数不为负数)
slice()和substr()形似,参数可以为负数。

23.运用jquery或者js不能直接获取到after,before的样式;如果需要修改此样式,应该新定义一个class,再给class定义after或before去覆盖之前的样式。

24.当运用layui的弹出层想弹出layui的表格时,可以如下写:

html页面:
<script type="text/html" id="alerttable">//注意type
<div id="creattable"></div>
</script>
js:
layui.use('table',function(){
var table = layui.table;

table.render({
elem:“#creattable”,.....//子节点
})
})
layer.open({
area:['1200px','600px'],
content:$("#alerttable").html()//父节点
});

25.$.extend(合并到此处,对象1,对象2)合并对象。

26.ES6 对象提供了 Object.assign()这个方法来实现浅复制。(将源对象可枚举的属性拷贝给目标对象)。

27.验证的八个正则表达式(手机号,密码,身份证,日期,验证码等)https://www.cnblogs.com/hejun26/p/9811090.html。

28.jquery提供closest(selector)方法,寻找所匹配的第一个选择器元素,dom向上遍历。

29.Object.create()创建一个新对象,使用现有的对象来提供新创建的对象的__proto__。(可以用此方法来实现类式继承)

30.Symbol的作用非常的专一,换句话说其设计出来就只有一个目的——作为对象属性的唯一标识符,防止对象属性冲突发生。
(https://www.zhangxinxu.com/wordpress/2018/04/known-es6-symbol-function/)

31.js移除Array中指定元素:

首先需要找到元素的下标:

var array = [2, 5, 9];
var index = array.indexOf(5);
使用splice函数进行移除:

if (index > -1) {
array.splice(index, 1);
}

32.用 apply 将数组添加到另一个数组
concat确实具有我们想要的行为,但它实际上并不附加到现有数组,而是创建并返回一个新数组。 但是我们想要附加到我们现有的阵列:
var array = ['a', 'b'];
var elements = [0, 1, 2];
array.push.apply(array, elements);
console.info(array); // ["a", "b", 0, 1, 2]

33.正则表达式中\s代表匹配空格;\S代表非空白字符。

34.我也不知道为什么,网上也有很多iframe获取父页面的元素和获取子页面的元素,可我偏偏就只能从子iframe获取父页面的dom元素;奇了怪了,记录一下:(已解决,博客园已记录)
window.parent.document.getElementById("id");子iframe获取父级的元素。

35.正则表达式懒惰限定符:(列举两个)(详情见https://www.cnblogs.com/lizhenlin/p/6654934.html)
"*?" 重复任意次,但尽可能少重复
   如 "acbacb" 正则 "a.*?b" 只会取到第一个"acb" 原本可以全部取到但加了限定符后,只会匹配尽可能少的字符 ,而"acbacb"最少字符的结果就是"acb"

"??" 重复0次或1次,但尽可能少重复
   如 "aaacb" 正则 "a.??b" 只会取到最后的三个字符"acb"

36.伪数组转化为数组:(均不改变原伪数组)
可以用es6的Array.from();
var arr = Array.prototype.slice.call(arguments);

37.$("table").on("click","tbody tr td:nth-child(n)",function(){}) //n取整数,代表点击表格的第几列触发。

38.要习惯使用axios去获取数据(https://www.kancloud.cn/yunye/axios/234845)

39.正则表达式 ?代表前面的字符只能匹配一次或零次。

40.str.match(/reg/)得到一个数组,数组第一个值为结果,第二个值为子表达式,且它会按照最长匹配的字符串进行获取。

41.前端图片压缩上传(纯js的质量压缩,非长宽压缩)(https://www.cnblogs.com/007sx/p/7583202.html)

42.$("<img/>")为一个set的方法,是建立一个新的标签元素"img"并赋予相应标签相应的属性,如:$("<img/>").attr("src", src).load(function () {})

43.ajax设置成同步时(async:false),浏览器的渲染(UI)线程和js线程是互斥的,在执行js耗时操作时,页面渲染会被阻塞掉。
当我们执行异步ajax的时候没有问题,但当设置为同步请求时,其他的动作(ajax函数后面的代码,还有渲染线程)都会停止下来。

44.$("img").size()计算文档中所有图片的数量==$("img").length。

45.$("img").selector返回传给jQuery()的原始选择器,此处为img。

46.jquery ajax参数:traditional:true时,传值时可以传数组。

47.ajax 与 xhrFields: { withCredentials: true }:
xhrFields 大概的意思是,默认情况下,标准的跨域请求是不会发送cookie等用户认证凭据的。
所以,当你再次访问远程api的时候,cookie是不会被带上的,于是乎,服务器理所当然地认为你还没有登录。
用XMLHttpRequest请求的时候,我们需要设置属性 withCredentials=true ;

48.document.getElementById().scrollIntoView();让制定id的元素出现在滚动层顶部。

49.当涉及到滚动事件的时候,如果哪一个元素给了定高且有overflow:auto;则已这个元素为节点触发滚动事件,而不仅仅局限于屏幕滚动。
如:$("#id").scroll(function(){});

50.debugger;会中断程序运行,可以用来调试。

51.trigger(event,[param]);触发某个元素的绑定事件。

52.window是javascript的顶层对象,所有的全局变量都是它的属性。(V8,Rhino引擎除外)

53.(0,eval)(“this”);//逗号表达式只解析逗号后面的,此表达式相当于eval(‘this’)

因为在严格模式下,匿名函数中的this为undefined;
为了防止在严格模式下window变量被赋予undefined,使用(0, eval)(‘this’)就可以把this重新指向顶层对象。

54.JS添加事件和解绑事件:addEventListener()与removeEventListener()
正确用法:function bodyScroll(event){
event.preventDefault();
}
document.body.addEventListener('touchmove',bodyScroll,false);
document.body.removeEventListener('touchmove',bodyScroll,false);//共用函数bodyScroll不能带参数

55.取消事件:对象.事件模型 = null;

56.window.history.pushState(null,null,url)无刷新页面改变页面路径,url为改变后的路径。
(服务器端被搜索的内容放进<noscript></noscript>中,结合这个可以让搜索引擎抓取AJAX内容?
http://www.ruanyifeng.com/blog/2013/07/how_to_make_search_engines_find_ajax_content.html)

57.猜想:感觉能利用history.length来获取网页浏览历史物品详情页的数据。

58.popstate事件

每当同一个文档的浏览历史(即history对象)出现变化时,就会触发popstate事件

59.require.js模块化开发:http://www.ruanyifeng.com/blog/2012/11/require_js.html(三部曲)

60.es6数组的扩展方法
includes()判断数组中是否包含;
find()查找对应的值
findIndex()

61.var arr = [1,2,3];
type of arr //obj
Array.isArray(arr) //true判断是数组

62.浅拷贝指的是新数组拷贝的是对象的引用,即原对象值改变,数组也变。

63.indexOf()传两个参数的时候,第二个参数为搜索的开始位置。

64.跨域通信:postMessage(message, targetOrigin);
message :信息内容,低版本浏览器只支持字符串,高版本可以各种数据都行
targetOrigin :目标窗口的源,可以是字符串*表示无限制,或URI,需要协议端口号和主机都匹配才会发送
window.onload = function(){
window.frames[0].postMessage("str","协议+域名+端口号【url可加可不加】")
}
接收postMessage发送的信息MessageEvent
window.addEventListener("message", function(event){
//var origin = event.origin || event.originalEvent.origin;
if(event.source!=window.parent) return;//不是父窗口发的就不接收
....
}, false);
MessageEvent四个属性:
1.message(类型)
2.data(window.postMessage的第一个参数)
3.origin(调用postMessage时页面的当前状态)
4.source(调用postMessage的窗口信息)

65.复选框全选赋值时用$('input[type=checkbox]').prop('checked',true);
用attr时有些版本会只能执行一次,所以用prop
如果你要去恢复或者改变DOM状态值,类似checked,selected,disabled等表单元素的状态,最好使用.prop()方法。

66.在layui中,凡是动态加载的表单,表格数据都要重新render一下。

67.监听文本框改变的一种方法:
addEventListener('keyup', function (event) {
obj.msg = event.target.value
})

68.在HTML body部分中的JavaScripts会在页面加载的时候被执行。
在HTML head部分中的JavaScripts会在被调用的时候才执行。

69.任何对象转为布尔值,都会得到 true(切记!在 JS 中,只有 0,-0,NaN,"",null,undefined 这六个值转布尔值时,结果为 false)。

70.在查找 b.n 是首先查找 b 对象自身有没有 n 属性,如果没有会去原型(prototype)上查找

71.DHTML 的动态样式的作用是使网页作者改变内容的外部特征而不强制用户再次下载全部内容

72.es6:‘Promise 对象代表一个异步操作,有3种状态:Pending(进行中)、Resolved(已完成,又称Fulfilled)和Rejected(已完成)’

73.垃圾回收规则如下:
1.全局变量不会被回收。
2.局部变量会被回收,也就是函数一旦运行完以后,函数内部的东西都会被销毁。
3.只要被另外一个作用域所引用就不会被回收

74.undefined和null与任何有意义的值比较返回的都是false,但是null与undefined之间互相比较返回的是true。

75.1+ +"2"
+"2"中的加号是一元加操作符,+"2"会变成数值2,因此1+ +"2"相当于1+2=3.

76.file文件对象是一个只读对象,想要改变需要定义全局变量遍历存储文件信息,并对此全局变量进行更改再操作。

77.parseInt(num,10);按10进制去处理字符串,碰到非数字字符,会将后面的全部无视。

78.parseInt("10000",2);将二进制数转化为十进制

79.正则表达式\1代表引用第一个分组,\2引用第二个分组;分组就是()里的内容,一个()叫一个分组。
判断一个字符串中有没有连续相同的两个字符:
/([a-zA-Z])\1/.test(str)
假设aa;首先a属于a-z,\1再引用一次a,为aa,符合条件,返回true;
假设ab;首先a属于a-z,\1再引用一次a,为aa,不符合条件,返回false。

80.js将0开头的数默认为8进制的数

81.正则表达式模式修饰符s的作用主要是能够匹配换行,在处理换行数据时,通常会用到。

82.jQuery限制字符字数的方法(多行文本超出...)
//限制字符个数
$(".zxx_text_overflow").each(function(){
var maxwidth=23;
if($(this).text().length > maxwidth){
$(this).text($(this).text().substring(0,maxwidth));
$(this).html($(this).html()+'...');
}
});

83.[\u4e00-\u9fa5]表示中文字符匹配

84.this.replace(/^\s*(.*?)\s*$/, '$1');去掉前后空格,$1表示第一个括号里的值。

85.前瞻:
exp1(?=exp2) 查找exp2前面的exp1
后顾:
(?<=exp2)exp1 查找exp2后面的exp1
负前瞻:
exp1(?!exp2) 查找后面不是exp2的exp1
负后顾:
(?<!=exp2)exp1 查找前面不是exp2的exp1

86.Array.prototype.flat()将数组按照指定深度扁平化。Array.prototype.flat(Infinity)无论多少层都扁平化。

87.在华为手机中,运用qCode生成的二维码是通过canvas展示的,img标签被隐藏,而且img.src没有任何内容。