获取设备的宽高
document.documentElement.clientWidth;//获取设备的宽度
document.documentElement.clientHeight;//获取设备的高度
document.documentElement是整个节点树的根节点root即<html>,而body是子节点,要访问body,在脚本中应该写document。body
对象的深度复制
var obj={
a:{c:2,d:4,e:{r:5}}
}
var copyobj={}
copyobj=JSON.parse(JSON.stringify(obj))
obj.a.e.r=10000;
console.log(obj);
console.log(copyobj)
获取事件差的方式:
(new Date().getTime()-1562642893215)/(1000*60)
1562642893215某条记录创建的时间戳,new Date().getTime()此时的时间戳,1000*60一分钟的毫秒数
这条语句是判断几分钟之前
微信公众号配置设置
获取微信相关信息
function WX_CONFIG(url, shareObj, cb) { //获取微信相关信息
//url为微信的本地地址
$.get(APP.API_BaseURL + "jssignature", {//从后台获取信息的地址
"url": url,
"access_token": APP.getCookie('token')
}, function (res) {
if (res.status == 200) {
wx_config(res);
WX_READY(shareObj, cb)
console.log(res)
}
})
}
获取微信的相关信息后,对微信进行相关配置
function wx_config(res) { //微信初始化配置
var arr = [
'checkJsApi', 'openLocation',
'getLocation', 'checkJsApi', 'onMenuShareTimeline', 'onMenuShareAppMessage',
'onMenuShareQQ', 'onMenuShareWeibo', 'hideMenuItems', 'showMenuItems', 'hideAllNonBaseMenuItem',
'showAllNonBaseMenuItem', 'chooseImage', 'previewImage', 'uploadImage',
'chooseWXPay', 'downloadImage', 'getNetworkType', 'openLocation',
'getLocation', 'hideOptionMenu', 'showOptionMenu', 'stopRecord', 'startRecord', 'uploadVoice', 'onVoiceRecordEnd', 'playVoice', 'pauseVoice', 'stopVoice', 'onVoicePlayEnd'
]
wx.config({
debug: false,
appId: res.data.appid,
timestamp: res.data.timestamp,
nonceStr: res.data.nonceStr,
signature: res.data.signature,
jsApiList: arr
});
}
倒计时功能实现
function countDown(date){//获取的是时间戳
var data= date-new Date().getTime();
var total=data/1000;//获得总的秒数;
var day=parseInt(total/(24*60*60))//获得天数;
var afterday=total-day*60*60*24;//获得事件差
var h=parseInt(afterday/(60*60))//获得小时
var afterhour=afterday-h*60*60;
var min=parseInt(afterhour/60)
var aftermin=afterhour-min*60;
var send=parseInt(aftermin)//秒数
console.log('天数:'+day+'小时数:'+h+'分钟数:'+min+'秒数:'+send)
//实现倒计时功能
if(data>0){
return false;
}else{//每隔1秒钟显示一下
setTimeout(function(){
countDown(data)},1000
)
}
}
当没有冲突却显示由冲突时如果没有修改内容的话执行
gti fetch --all
git reset --hard origin/master //把HEAD指向刚刚下载的最新的版本 master为分支名
git pull
获取URL中的参数以对象的形式存放
相关知识点:
https://www.cnblogs.com/kaituorensheng/p/3776527.html
#part号是用于对页面中的位置进行定位方法:设置描点<a name="part"/>或者设置id:<div id="part"></div> 使用location.hash
?号后边携带参数 location.search 获取参数
&号连接不同的参数
window.location.href既有获取当前页面的url地址的功能,在对window.location.href赋值时能够打开新的页面的功能
location获取当前页面的URL地址;location.
function geturlParameter(){
var paramObj={};
var param=[]
var urlParams=decodeURIComponent(location.search);//获取参数并对其进行解码
var urlParam=urlParams.substr(1);//去掉?号
param=urlParam.split('&');
for(var i=0;i<param.length;i++){
paramObj[param[i].split('=')[0]]=param[i].split('=')[1]
}
Vue中的样式:class
<div :class="active:isActive,text-danger:hasError"></div>
当isActive为true时类名active才有效;hasError为true时text-danger类有效
vue中的slot
首先slot在设置时是放在标签里作为属性的
<span slot='slot的属性名'>slot属性名对应的属性值</span>
slot的使用
<slot name="slot的属性名"></slot>
vue中使用jq
vue只有在mounted生命周期时操作dom,,因为mounted生命周期后页面才会渲染完成,才能对dom进行操作
vue中的@click
@click用于绑定和监听点击事件;语法@click=‘function’为不带参数的,带参数的为@click=function(canshu) 原生οnclick=‘function()’
@click.stop='function'阻止事件冒泡
@click.prevent='function',阻止事件的默认事件
@keyup.enter=‘function’ 键盘按下回车键时做的监听
text-decoration的值
text-decoration:overline;//线在文字的上边
text-decoration:line-through//线穿过文字
text-decoration:underline//线在文字的下边
layer的使用
微信上传图片需要调用微信的方法(注意)
原生设置选择不同按钮,下划线和下面内容发生改变
//html中的代码
<div class="dianjis">
<div class="dianji" v-for="(item,index) in navList " @click="changeTab(index)">
{{item.name}}
<div class="line" v-if="item.selected"></div>
</div>
</div>
//使用的Vue下面时js中的代码
data:{
navList: [{
name: '介绍',
selected: true,
},
{
name: '视频',
selected: false,
},
{
name: '答疑',
selected: false,
},
{
name: '评价',
selected: false,
}],
},
methods:{
changeTab:function(index){
_this=this;
for(var i=0;i<_this.navList.length;i++){
_this.navList[i].selected=false;
if(i==index){
_this.navList[i].selected=true
_this.curSelectedSign=index;//设置当前的点击的索引
}
}
}
}
}
layer插件的学习
Velocity.js
animate动画学习
jq
addClass()向已选择得dom元素中添加类名
nextAll()选中被选元素得后边得元素
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li class="third-item">list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
$("li.third-item").nextAll().andSelf()
.css("background-color", "red");
//如果没有.andSelft()只会选中四五个,加入andSelf()则选中三四五
$('div').find("#ids")//选择div所有后代元素id为ids的元素
$('div').children()//选择div的所有后代元素
$('#closest').closest('#12').css('background-color', 'red')//为找到id为closest的dom元素的父元素id为12的元素改变背景颜色
//与parents()类似,不过closest的效率比较高
nodeType属性返回以数字值返回指定节点的节点类型
节点元素 nodeType=1 属性 nodeType=2
$("p").wrap('<div></div>')//方法把wrap中的元素放在p元素中。wrap中可以是函数但是返回的是html代码
.contents()方法是获得匹配元素集合中的每隔元素的子节点,包括注释和文本
.children()获得匹配元素集合中每个元素的所有子元素
在::before中的图片改变大小只能把图片设置为背景然后设置背景图片的大小
设置横向滚动效果时隐藏下边得滚动条
设置两层,外边得一层得高度低于里面一层得高度,外面一层设置overflower:hidden这样里面溢出得滚动条会被截取,因此没有滚动条了。
js中异步操作
JavaScript只在一个线程上运行,不代表Javascript引擎只有一个线程,事实上,Javascript引擎又多个线程,单个脚本只能在一个线程上运行(称为主线程),其他得线程都是在后台配合。
Javascript语言本身并不慢,慢得是读写外部数据,js产生排队并不是因为CPU忙不过来,而是很多时候都在等IO操作,js语言设计者意识到,这时CPU可以不管IO操作,挂起处于等待中得任务,先运行排在后面得任务。等到IO操作返回了结果,在回头把挂起得任务继续执行下去,这种机制就是Javascript内部采用得“事件循环机制”
为了利用多核CPU得计算能力,HTML5提出了Web Worker标准,允许JavaScript脚本创建多个线程,但是子线程完全受主线程控制,且不得操作DOM。所以新标准并没有改变JavaScript单线程得本质。
vue中为每dom节点添加ref并获取指定的dom节点
_this.ele.childNodes[_this.index].scrollIntoView(true)使元素出现在可视区域内
_this.$refs['course-ulli'][_this.index]//获取ref="course-ulli"的dom元素并获取指定的节点
Element.scrollIntoView()使元素滚动到可视区域内;
根据条件显示不同的样式
:class="{'img-one':subjectList.length==1,'img-two':subjectList.length==2}"
vue零碎知识点
event.target
getBoundingClientRect()
vue的生命周期(重点)
骨架屏
通过puppeteer在服务器端控制headless chrome打开开发中的需要生成骨架屏的页面,
小程序的骨架屏
不存在预渲染的概念,但是还是可以通过瑜线编写骨架屏组建放在页面中,等到一部请求的数据回来后更新页面。
滚动中的的scrollHeight系列唯一可以写的时scrollTop
设置返回到顶部的语句:
element.scrollTop=0;
获取由哪个页面跳转过来的url地址的方法
document.referrer获取父页面的地址
如何为伪元素设置宽高
因为伪元素中得display:inline;所以无法响应宽度和高度;而设置display:block,可以设置宽度和高度;
position:absolute;也能设置伪元素得宽度和高度,使display:block;这样就能设置宽度和高度