前端个人笔记

获取设备的宽高

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中的参数以对象的形式存放

相关知识点:

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;这样就能设置宽度和高度

 

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值