这里写目录标题
- 1.如何隐藏所有指定的元素:
- 2.如何检查元素是否具有指定的类？
- 3.如何切换一个元素的类?
- 4.如何获取当前页面的滚动位置？
- 5.如何平滑滚动到页面顶部?
- 6.如何检查父元素是否包含子元素？
- 7.如何检查指定的元素在视口中是否可见？
- 8.如何获取元素中的所有图像？
- 9.如何确定设备是移动设备还是台式机/笔记本电脑？
- 10.如何创建一个包含当前URL参数的对象？
- 11.How to get the current URL?
- 12.如何将一组表单元素转化为对象？
- 13.如何从对象检索给定选择器指示的一组属性？
- 14.如何在等待指定时间后调用提供的函数？
- 15.如何在给定元素上触发特定事件且能选择地传递自定义数据？
- 16.如何从元素中移除事件监听器?
- 17.如何获得给定毫秒数的可读格式？
- 18.如何获得两个日期之间的差异（以天为单位）？
- 19.如何向传递的URL发出GET请求？
- 20.如何对传递的URL发出POST请求？
- 21.如何为指定选择器创建具有指定范围，步长和持续时间的计数器？
- 22.如何确定页面的浏览器选项卡是否聚焦？
- 23.如何创建目录（如果不存在）？
- 24.如何将字符串复制到剪贴板？
- 25.||= 和 &&=
1.如何隐藏所有指定的元素:
const hide=(...el)=>[...el][0].forEach(e=>(e.style.display='none'));
hide(document.querySelectorAll('div'))2.如何检查元素是否具有指定的类？
页面DOM里的每个节点上都有一个classList对象，程序员可以使用里面的方法新增、删除、修改节点上的CSS类。使用classList，程序员还可以用它来判断某个节点是否被赋予了某个CSS类。
const hasClass=(el,className)=>[].slice.call(el.classList).includes(className);
console.log(hasClass(document.querySelector('.bbb'),'aaa'))//true
[].slice.call() 将类数组转化成数组 同 Array.from3.如何切换一个元素的类?
const toggleClass=(el,className)=>el.classList.toggle(className);
toggleClass(document.querySelector('p.special'),'special')4.如何获取当前页面的滚动位置？
const getScrollPosition=(el=window)=>({
x:el.pageXOffset!==undefined?el.pageXOffset:el.scrollLeft,
y:el.pageYOffset!=undefined?el.pageYOffset:el.scrollTop:el.scrollTop
})
例
getScrollPositon() //(x:0,y:200)5.如何平滑滚动到页面顶部?
window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。
requestAnimationFrame：优势：由系统决定回调函数的执行时机。60Hz的刷新频率，那么每次刷新的间隔中会执行一次回调函数，不会引起丢帧，不会卡顿。
const scrollToTop=()=>{
const c=document.documentElement.scrollTop||document.body.scrollTop;
if(c>0){
window.requestAnimationFrame(scrollToTop);
window.scrollTo(0,c-c/8);
}
}
//例
scrollToTop()6.如何检查父元素是否包含子元素？
const elementContains=(parent,child)=>parent!=child&&parent.contains(child);
//例
elementContain(document.querySelector('head'),document.querySelector('title'))7.如何检查指定的元素在视口中是否可见？
const elementIsVisibleInViewport=(el,partiallyVisible=false)=>{
const {top,left,bottom,right}=el.getBoundingClientRect();
const {innerHeight,innerWidth}=window;
return partiallyVisible ?((top>0&&top<innerHeight)||(bottom>0&&bottom<innerHeight))&&
((left>0&&left<innerWidth)||(right>0&&right<innerWidth))
:top>=0&&left>=0&&bottom<=innerHeight&&right<=innerWidth;
}
//事例
elementIsVisibleInViewport(el);//需要左右可见
elementIsVisibleInViewport(el,true); //需要上下左右可见8.如何获取元素中的所有图像？
const getImages =(el,includeDuplicates=false)=>{
const images=[...el.getElementsByTagName('img')].map(img=>img.getAttribute('src'));
return includeDuplicates?images:[...new Set(images)];
}
// false 表示的是不重复的 所有Img标签
getImages(document,true)
getImages(document,false)9.如何确定设备是移动设备还是台式机/笔记本电脑？
const detectDeviceType=()=>
/Android|webOS|iphone|ipad|ipod|BlackBerry|IEMobile|OperaMini/i.test(navigator.userAgent)
?'Mobile':'Desktop';
//事例
detectDeviceType()
//Desktop 是电脑10.如何创建一个包含当前URL参数的对象？
const getURLParameters =url =>
(url.match(/([^?=&]+)(=([^&]*))/g)||[]).reduce(
(a,v)=>((a[v.slice(0,v.indexOf('='))]=v.slice(v.indexOf('=')+1)),a),
{}
)
getURLParameters('csdn.net/md/?articleId=119429376')
{articleId: "119429376"}11.How to get the current URL?
const currentUrl=()=>window.location.href;
currentUrl()12.如何将一组表单元素转化为对象？
const formToObject=form=>
Array.from(new FormData(form)).reduce(
(acc,[key,value])=>({
...acc,
[key]:value
}),
{}
);
formToObject(document.querySelector('#form'))
// {email:'test@email.com',name:'Testname'}13.如何从对象检索给定选择器指示的一组属性？
const get=(from,...selectors)=>
[...selectors].map(s=>
s.replace(/\[([^\[\]]*)\]/g,'.$1.')
.split('.')
.filter(t=>t!=='')
.reduce((prev,cur)=>prev&&prev[cur],from)
);
const obj={selector:{to:{val:'val to select'}},target:[1,2,{a:'test'}] };
//事例
get(obj,'selector.to.val','target[0]','target[2].a')
// ["val to select", 1, "test"]14.如何在等待指定时间后调用提供的函数？
const delay=
(fn,wait,...args)=>setTimeout(fn,wait,...args);
delay(
function(text){
console.log(text)
},
1000,
'later'
)
// 1s 后 打印 later15.如何在给定元素上触发特定事件且能选择地传递自定义数据？
const triggerEvents=(el,eventType,detail)=>el.dispatchEvent(new CustomEvent(eventType,{detail}));
//例
triggerEvents(document.querySelector('.footer-column-t'),'click',{username:'wang'})自定义事件的函数有 Event、CustomEvent 和 dispatchEvent
Event
window.dispatchEvent(new Event('resize')) //向window 派发一个resize事件
var event =new Event('build');//直接自定义事件 使用Event 构造函数
var elem =document.querySelector('.text-red');
elem.addEventListener('build',function(e){console.log(e,"-------�")},false)
//触发事件
elem.dispatchEvent(event)CustomEvent 可以创建一个更高度自定义事件，还可以附带一些数据，具体用法如下：
CustomEvent
options={
bubbles:true,//是否冒泡
cancelable:false,//是否取消默认事件
}
var myEvent=new CustomEvent(eventname,options);//eventname 可以自己自定义名字
var elem =document.querySelector('.text-red');
elem.addEventListener('wangj',function(e){console.log(e,"-----")},false)
undefined
elem.dispatchEvent(myEvent)16.如何从元素中移除事件监听器?
const off=
(el,evt,fn,opts=false)=>el.removeEventListener(evt,fn,opts);
const fn=()=>console.log('!');
document.body.addEventListener('click',fn);
// 解除点击事件的click事件
off(document.body,'click',fn);17.如何获得给定毫秒数的可读格式？
const formatDuration= ms =>{
if(ms<0)ms=-ms;
const time={
day:Math.floor(ms/86400000),
hour:Math.floor(ms/3600000)%24,
minute:Math.floor(ms/60000)%60,
second:Math.floor(ms/1000)%60,
millisecond:Math.floor(ms)%1000
};
return Object.entries(time)
.filter(val=>val[1]!==0)
.map(([key,val])=>`${val}${key}${val!==1?'s':''}`)
.join(', ')
}
//例子
formatDuration(1001)
"1second, 1millisecond"18.如何获得两个日期之间的差异（以天为单位）？
const getDayDiffBetweenDates = (dataInitial,dateFinal)=>
(dataInitial-dateFinal)/(1000*3600*24);
//例
getDayDiffBetweenDates(new Date('2021-08-13'),new Date('2021-08-01'))；
1219.如何向传递的URL发出GET请求？
const httpGet=(url，callback,err=console.error)=>{
const request=new XMLHttpRequest();
request.open('GET',url,true);
request.onload=()=>callback(request.responseText);
request.onerror=()=>err(request);
request.send();
}
httpGet(
'http://www.baidu.com',
console.log
)20.如何对传递的URL发出POST请求？
const httpPost=(url，data,callback,err=console.error)=>{
const request=new XMLHttpRequest();
request.open('POST',url,true);
request.setRequestHeader('Content-type','application/json;charset=utf-8');
request.onload=()=>callback(request.responseText);
request.onerror=()=>err(request);
request.send(data);
}
const newPost={
userId:1,
id:1337,
title:'Foo',
body:'bar bar '
};
const data=JSON.stringify(newPost);
httpGet(
'http://www.baidu.com',
data,
console.log
)21.如何为指定选择器创建具有指定范围，步长和持续时间的计数器？
const counter=(selector,start,end,step=1,duration=2000)=>{
let current=start,
_step=(end-start)*step<0?-step:step,
timer=setInterval(()=>{
current+=_step;
document.querySelector(selector).innerHTML=current;
if(current>=end)document.querySelector(selector).innerHTML=end;
if(current>=end)clearInterval(timer);
},Math.abs(Math.floor(duration/(end-start))));
return timer;
}
counter('#my-id',1,1000,5,20000);
//让id="my-id"的元素创建一个2s的计时器 从1到 100022.如何确定页面的浏览器选项卡是否聚焦？
const isBrowserTabFocused =()=>!document.hidden;
isBrowserTabFocused();23.如何创建目录（如果不存在）？
const fs=require('fs');
const createDirIfNotExits=
dir=>(!fs.existsSync(dir)?fs.mkdirSync(dir):undefined);
createDirIfNotExits('test')24.如何将字符串复制到剪贴板？
const copyToClipBoard =str=>{
const el =document.createElement('textarea');
el.value=str;
el.setAttribute('readonly','');
el.style.position='absolute';
el.style.left='-9999px';
document.body.appendChild(el);
const selected=
document.getSelection().rangeCount>0?document.getSelection().getRangeAt(0):false
el.select();
document.execCommand('copy');
document.body.removeChild(el);
if(selected){
document.getSelection().removeAllRanges();
document.getSelection().addRanges(selected);
}
}
//例
copyToClipBoard('copyToClipBoard')
ctrl+v 就能粘贴25.||= 和 &&=
或等于(||=) a ||= b 等同于 a || (a = b);
且等于(&&=) a &&= b 等同于 a && (a = b);
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
