webjing

webjing 查看完整档案

北京编辑  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 该用户太懒什么也没留下

个人动态

webjing 发布了文章 · 2019-08-18

css选择器 last-child & last-of-type

last-child【同理first-child】
:last-child表示其父元素的最后一个子元素,且这个元素是css指定的元素,才可以生效。

last-of-type【同理first-of-type】
:last-of-type表示其父元素的最后一个指定类型的元素

这两个区别就是last-child必须要多具备一个条件,就是必须是父元素的最后一个子元素,强调的是最后child,而last-of-type只要符合最后一个type就可以。【例子1 2 】

弊端:对于元素选择伪类比较准确,但是对于类选择器选择伪类可能就会不太准确【例子 3 4】

现在看例子:

一、正常情况的没有干扰元素的ul下面全部都是li

html
图片描述
css
图片描述
结果: 两个都会对最后一个li生效。

last-child
图片描述

last-of-type
图片描述

二、ul下面不止有li,还有其他的元素,这个在实际场景中也是会出现的

html
图片描述
css
图片描述
结果: last-child选不中目标元素,last-of-type可以选择目标元素

last-child
图片描述

last-of-type
图片描述

三、选择某类的最后一项

html
图片描述
css
![图片描述][11]

结果: last-child与last-of-type均不会选中某类的最后一项

.line:last-child与.line:last-of-type

图片描述

四、父元素下同类名不同元素选择最后一个类名

html
图片描述

css
图片描述

结果:last-child选中既是最后一个子元素又是最后一个类名元素; last-of-type 会选择不同元素的最后一项子类

.line:last-child
图片描述

.line:last-of-type
图片描述

查看原文

赞 1 收藏 0 评论 1

webjing 发布了文章 · 2019-05-27

【数据类型】js的数据类型

一、js的数据类型有基本数据类型和引用类型

基本数据类型包括:undefined, null,boolean,number,string
引用类型是object:包括function,array,Date...

【es6新增类型】
1. set 集合,区别于数组的就是 set中不可以有重复的数据,常可以用来做去重操作

  • 含有size属性,集合里元素的个数
  • add 方法,返回的是原对象改变后的值
  • delete方法,返回值是true/false
  • has('data1') 返回值是true/false
  • myset.keys(); myset.value()

图片描述

2. Map类型,与对象的区别是:对象的键值只能是字符串,不可以是对象类型,使用Map类型可以避免键值必须是字符串的限制,可以是对象,数组等

  • 创建的时候一个大的数组,每一项元素是小数组,小数组有两个元素,分别是一组对应的key,value。
  • 方法:
  • set(key,value); get(key);
  • delete(key); has(key); //返回值均是true/false
  • mymap.forEach(function (value,key) {
    console.log(key+":"+value);
    }) // 遍历,参数是value,key 【注意顺序】
  • mymap.set({},"obj1");
  • mymap.set({},"obj2"); 这是两个不同的键值,不会被覆盖

图片描述

3.Symbol类型 用相同的字符串做属性名命名的时候会发生命名冲突,使用Symbol产生的名字是不同的

  • Symbol 即便传入相同的参数,两者的值也是不一样的 例:Symbol('foo') !== Symbol('foo');
  • 如果想让两者相等,可以使用Symbol.for() 例 Symbol.for('bar') === Symbol.for('bar')
  • 但是 Symbol('bar') !== Symbol.for('bar');
    如果Symbol作为属性名,不会被Object.keys() Object.getOwnPropertyNames()、JSON.stringify()返回;该属性也不会出现在for...in、for...of循环中。但是,它也不是私有属性,有一个Object.getOwnPropertySymbols方法,可以获取指定对象的所有 Symbol 属性名。
    图片描述

typeof null返回值是 “object”,null会被认为是一个空对象的引用
null == undefined //true
当定义一个变量用来保存对象,就可以将这个变量初始化为null

实现继承
function Person(){}
function Student(){}
Student.prototype = new Person()
Student.prototype.constructor= Student
var bosn= new Student()
bosn instanceof Student //true
bosn instanceof Person // true

二、判断类型的方式

typeof | instanceof | Object.prototype.toString.apply()

  1. typeof: 适用于基本类型和function,object具体是数组还是对象识别不了,null也是别不了

    typeof [1,2]   // 'object'
    typeof '123'   //'string'
    typeof null     // 'object'
    typeof undefined  //'undefined'
    typeof function(){}   //'function'
    typeof new Object()  //'object'
  2. instanceof: 适合自定义对象和原生对象,检查prototype

     [1,2] instanceof Array  //true
  3. Object.prototype.toString.apply() 适合基本对象和内置对象,IE6、7、9中null和undefined 失效

图片描述

三、空数组的问题

   [] == false   //true        任意值与布尔值比较,都会将两边的值转化为Number; Number([]) 为0    Number(false)也是0    所以[] == false 为true
   [] ==![]     // true          Number([]) = 0;  Number(![]) = 0 ;   所以 []==![] 为true
   new Array(1) == false;  //true    new Array(1)==> [empty]  ,  Number(new Array(1)) = 0   
   Boolean([])   //true
   if([]){console.log(1)}  //此时[] 是true
   NaN == NaN  // false   
   null == undefined  //true

四、Number强制转换数字

  1. 如果参数是Date对象,Number()会返回从1970年1月1日至今的毫秒数
    图片描述
  2. 如果字符串截去开头和结尾的空白字符后,不是纯数字字符串,那么最终返回结果为NaN。
  3. Number转对象

    1.先调用对象自身的valueOf方法。如果返回原始类型的值,则直接对该值使用Number函数,返回结果。
    2.如果valueOf返回的还是对象,继续调用对象自身的toString方法。如果toString返回原始类型的值,则对该值使用Number函数,返回结果。
    3.如果toString返回的还是对象,报错。
    

    Number([1]); //1
    转换演变:
    [1].valueOf(); // [1];
    [1].toString(); // '1';
    Number('1'); //1

图片描述

查看原文

赞 1 收藏 0 评论 0

webjing 发布了文章 · 2018-11-21

【this】谈一下js中this的指向和箭头函数的特殊情况

this的指向一直都是js理解中比较困难的部分,这次把遇见的情况都展示出来;另外ES6新增的箭头函数不属于这个规律,特殊看待。

this的指向 大致分为以下几种情况

1.普通函数 --- this指向函数的调用对象

function f() {  
    var user = 'XX';  
    console.log(this.user);  //undefined
    console.log(this);  //window
}

f();

这里f 的调用等同于window.f(); 所以f函数内部this指向的是window

2.对象方法中调用 ---- this 指向上级对象

var obj = {
    user:"xxx",
    fn:function(){
        console.log(this.user);  //xxx
    }
}
obj.fn();

【注1】这里要注意一点,就是在对象中可能有多层嵌套的对象,但是this指向的都是他调用地方的上级对象

var obj = {
    user:"xxx",
    b: {
        user: "bbb",
        fn:function(){
            console.log(this.user);  // bbb
        }
    }
    
}
obj.b.fn();

如上,虽然是在obj里面this调用,但是因为是在obj.b这个对象中,所以this指向的是 obj.b


【注2】注意不能只看上级对象,更关键的是调用对象

var obj = {
    user:"xxx",
    b: {
        user: "bbb",
        fn:function(){
            console.log(this.user);  // undefined
        }
    }
    
}
var f = obj.b.fn;
f()

如上,this其实是在f执行的时候调用的,这时候,f的this的调用对象是window,那么就可以理解window.user为undefined

【小结】在对象方法中的this的指向主要是看他最终调用的位置,它是由谁调用的,如果调用对象有多层,this指向的是this的上级对象

3.构造函数 --- this指向new出来的对象

function Fn(){
    this.user = "xxx;
}
var a = new Fn();
console.log(a.user); //xxx

new 的过程其实也是初始化了一个新的对象,然后用新的对象调用原先的函数 Fn.call(a) 这个情况跟下面这种情况类似了。

4.apply, call, bind 通过改变函数的调用对象而改变this的指向

function foo() {
  console.log('id:', this.id);  //42
}

var id = 21;

foo.call({ id: 42 });   //foo函数的调用对象变成了 {id: 42},所以this指向发生了变化

5.箭头函数this的指向 ---- this指向其定义时候的对象


clipboard.png

图1: 箭头函数,this指向定义时候的对象,foo在window作用域下,所以this指向window; ===> 箭头函数的外层,foo函数的this就是window对象



clipboard.png

图2:箭头函数,this指向定义时对象,那么由于foo.call 此时定义时候this指向了{ id: 42}对象,所以这里id输出的是42;====> 箭头函数的外层,foo函数的this就是{ id: 42} 对象

【小结】箭头函数的this在定义时所在的对象,其实质是因为箭头函数没有自己的this,用的是外层的this


【结尾】普通函数的this是看的是它执行时候的调用对象; 箭头函数的this与它的执行没有关系,在定义的时候就决定了;

查看原文

赞 2 收藏 0 评论 1

webjing 发布了文章 · 2018-11-20

【css】圣杯布局

这是一种比较常见的网站布局,此布局为两边等宽,中间自适应的三栏布局。经常在网站上看到,左边是目录,右边放一些备注啊,广告之类的。

这里主要涉及到float,margin,定位;

1.浮动 float

浮动元素会生成一个块级框,而不论它本身是何种元素;

假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止。(如图:两个inner浮动后一行排列不下,就会自动换行)

float.png

  1. 浮动元素不能把未定义宽高的父元素撑开,需要做一步清除浮动的操作
  2. 清除浮动 增加一个标签,css属性设置 clear: both; 或者父元素 overflow: hidden;

2.外边距 margin

margin-left: 是元素左边框距离父元素左边框的距离

  1. 这个正常设置10px等这些具体的值都好理解,但是也可以设置百分比,百分比是相对于父级元素的比例,如下: 父元素灰色的 (200*200),子元素粉色(100*100);

    margin1.png

  2. 当值为负的时候,是距离父元素左边框往左的距离;

    margin2.png

  3. margin-left: -100%;是往左偏移父元素宽

    margin3.png

3.定位

这里主要了解相对定位(relative):相对定位元素会相对于它在正常流中的默认位置偏移。

4.圣杯布局

先上代码,然后预览一下效果;

clipboard.png

<style>
*{
    box-sizing: border-box;
 }
 
 .main{
    width: 100%;
    height: 100%;
    position: relative;
 }
 .section-con{
    color: white;
    text-align: center;
    width: 100%;
    height: 100%;
    padding: 0 200px 0px 150px;
    overflow: hidden;
 }
 .section-con div{
    height: 100vh;
    display: block;
    float: left;
 }
 .center{
    width: 100%;
    background: #b4a078;
 }
 .left{
    width: 150px;
    position: relative;
    background: #94b872;

    margin-left: -100%;
    left: -150px;
 }
 .right{
    width: 200px;
    position: relative;
    background: #b87272;

    margin-left: -200px;
    right: -200px;
 }
 .right::after{
    content: '';
    display: block;
    clear: both;
 }
<style>
<body>
<div>
    <div class="section-con">
        <div class="center">中间不定宽的部分</div>
        <div class="left">左边固定150px</div>
        <div class="right">右边固定200px</div>
    </div>
</div>
</body>

主要原理:
**

  1. 所有元素,尤其是section-con 先设置box-sizing: border-box;
  2. section-con 需要有左右边距,就是左右栏的宽度
  3. center,left,right全部float,因为center部分宽度100%,然后left和right就会被挤到下面一行;如下图1
  4. 先设置left元素,margin-left:-100%; 想左偏移了一个父元素的位置,也就是一个center宽度,那么他就会与center的开始位置重合,如下图2
  5. 下一步就是将左边容器,位置往左偏移一个自己的宽度,即定位left:-150px;到此左边容器就定在了最终位置,如下图3
  6. 同理做右边容器的设置,margin-left向左偏移一个自己的宽度,那他就跟center的右边框重合了,再利用定位向右移动一个自己宽度,margin-left:-200px; right:-200px;如下图4,5

**

图1:
1.png

图2
2.png

图3
3.png

图4
4.png

图5
5.png

5.总结

这里主要比较难理解的就是float之后与margin的搭配使用,还有就是margin-left:-100% 代表什么,要是能理解这两个部分,这个布局原理就很清晰了。


后记:
记录这里的第一篇文章,花了一个下午写出来的。第一篇要发布的文章写得很费劲啊,又要自己测试,又要截图步骤,比自己明白花费了更长的时间,但是一步步写完之后,对于这个实现过程有了更深刻的理解,以后回顾就更能有所侧重了,看来梳理知识点还是要从写文章开始。

查看原文

赞 0 收藏 0 评论 0

webjing 关注了用户 · 2018-11-09

Aus0049 @aus_zby

console.log(([][[]]+[])[+!![]]+([]+{})[!+[]+!![]])

关注 128

认证与成就

  • 获得 4 次点赞
  • 获得 0 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 0 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2016-04-05
个人主页被 190 人浏览