今天写着某实例，突然想起还有这个暂存的笔记·····啊··鸽了
那就重新开始更新吧！ 跳转到

基础环境搭建

使用vscode进行代码编写，推荐使用以下插件！

  • open in browser - 右键添加在浏览器中打开项目
  • Auto Rename Tag - 自动重命名HTML + Xml 标签
  • JS-CSS-HTML Formatter - 格式化代码

标签语义

<!DOCTYPE>标签 ： 文档类型声明标签

<html lang="zh-CN"> 浏览器根据其内容识别是何种语言网站，此处为中文，将采取中文来显示

<meta charset="utf-8"> 字符集 ，此处采取utf-8存储文字信息，必须写 否则乱码

以上三条语句在vscode中均会自动生成，需理解其作用

重新开始更新，过去一些内容已经删除了，仅记录个人学习中的一些经历····,实践中发现的小技巧，关于标签使用的内容手动查询文档即可

CSS游历记

关于伪元素before & after 的显示方式

图上元素(li为父元素)右上角的 ‘减’ 就是使用伪元素实现的 需要添加到另一个li的时候只需要加入一个类名即可 ,这样子就不需要在html中添加其他的元素了
beforeAfter.png
实例得::before 将位于 ::after的下层
由此使用before伪元素制作下层的三角边框,after伪元素作为文字层即可
e.g.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.recommend::before {
    content: '';
    margin: auto;
    display: inline-block;
    color: #fff;
    height: 7px;
    line-height: 5px;
    width: 0;
    text-align: center;

    position: absolute;
    top: 0;
    right: 0;

    border-width: 6px 7px;
    border-style: solid;
    border-color:#589d5a #589d5a transparent #589d5a;
}

.recommend::after {
    content: '减';
    color: #fff;
    position: absolute;
    top: -2px;
    right: 1px;
    background-color: transparent;
}
✏️ ———— 手动分割线 ——————

BFC 与外边距(margin)塌陷问题

Ref Zhihu #0001 "CSS中外边距（margin）塌陷和合并的问题"

🥰 个人练习样式 记录 ✨

这里将记录我自己写的一些样式！欢迎交流学习，发在博客的基本都是使用的CSS行内样式表, 可能写得不是很好，·····嘛，其实自己觉得还是蛮好看的啦😂,以后整好了pug [ 说实话挺需要这类教程的 ] 会加进预设标签内，到时就可以直接使用啦。呃···名称什么的，随便取的😝···· 随缘更新吧

✨ 可跳转式类标签  还有个动效的不过和博客不适配=.=
👇
Title Link #0001 "这里填写内容"
✨ 描述式按钮  
👇
✍️ Title Link desc

JavaScript 笔记

ECMAScript \ DOM \ BOM

基础学习

  • 数组 - 在Javascript中,数组中的数组元素的数据类型不受约束,可以是任意类型.
    和其他多数编程语言一样,index总是从0开始
    JS中追加数组元素的方式 可以直接通过修改索引号实现, 在循环中可以直接使用 arrary.length; 来实现不断往后添加新元素

  • 函数返回一个结果,如果想返回多个值可以利用数组,如果函数无返回值,则返回undefined
    对比break和continue ,return不仅可以退出循环,还可以结束函数.

Arguments 对象 以伪数组的形式展现.存储了传递到函数的所有实参.
[126] 伪数组并非真正意义上的数组

  • 伪数组不具有数组的length属性
  • 按照索引的方式存储
  • 没有数组的一些方法 pop() push() 等…

函数的另一种声明方法 - 函数表达式(匿名函数)

内部函数访问外部函数的变量采用链式查找的方式决定取值 , 此结构即作用域链 - 遵循就近原则

  • JavaScript 的预解析 , 浏览器会预先解析function 和 var, 将其声明或定义提升到当前作用域的顶部(除了变量的定义.) ,

关于数组操作

  • 添加或删除数组元素
    • Array.unshift()方法,在数组头部插入一个新元素
    • Array.push(),在数组末尾追加一个新元素
    • Array.pop(),删除数组中最后一个元素
    • Array.shift(),删除数组中第一个元素

这些方法都会改变原数组长度, 且pop()与shift()存在返回值,将返回被删除的那个数组元素.

不太一样的方法:

array.splice(start[, deleteCount[, item1[, item2[, ...]]]])方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。

  • 翻转数组

    • Array.reverse();方法将翻转数组,改变了数组，并返回该数组的引用。

  • 数组元素获取

    • arr.indexOf(searchElement[, fromIndex])获取指定首个元素的索引号,第二个参数可选,指定开始查找的位置.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// 数组去重案例

var oldArr = ['c','a','z','a','x','a','x','c','b'];
// indexOf() 注意大小写
// 方法1 : 
function delDuplicate(arr) {
    var tempArr = arr;   
    for (var a = 0; a< tempArr.length; a++) {
        var first = tempArr.indexOf(tempArr[a]);
        var sec = tempArr.lastIndexOf(tempArr[a]);
        if (first != sec) {
            tempArr.splice(a,1);
            delDuplicate(tempArr);
        }
        else { continue; }
    }
    return tempArr;
}

console.log(delDuplicate(oldArr));

// 方法 2 (来自pink老师) :
function unique (arr) {
    var newArr = [];
    for (var i = 0; i < arr.length ; i++) {
        if (newArr.indexOf(arr[i] == -1)) { // 若不存在,则插入元素
            newArr.push(arr[i]);
        }
    }
    return newArr;
}

console.log(unique(oldArr));

  • 数组转字符串

    • toString()方法将数组转换为字符串
    • arr.join([separator])方法,将数组转换为字符串并可以选择为其添加分隔符

字符串对象

字符串的字面量即 单引号 和双引号

字符出现次数实例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

var string = "abcoefoxyozzopp";
// 方法1:
var count = 0;
var allIndex = [];
function getIndex(date,target,start) {
    i = date.indexOf(target,start);
    if (i != -1) {
        count++;
        allIndex.push(i);
        getIndex(date,target,i+1);
    }
}

getIndex(string,'o',0);
console.log("出现的次数是" + count + '\n其索引号分别为:' + allIndex);
count=0;

// 方法2 (来自pink老师) 噗我写好像比较复杂.. // :
var index = string.indexOf('o');
var num = 0;
while(index!=-1) {
    console.log(index);
    num++;
    index = string.indexOf('o',index+1);
}
console.log('o出现的次数是' + num);

根据位置返回字符

可以像数组那样访问字符串字符,每个字符对应一个索引

  • str.charAt(index)方法从一个字符串中返回指定的字符。
  • str.charCodeAt(index)方法返回 0 到 65535 之间的整数，表示给定索引处的 UTF-16 代码单元

拼接及截取字符串

  • str.concat(str2, [, ...strN])方法将一个或多个字符串与原字符串连接合并，形成一个新的字符串并返回。(强烈建议使用赋值操作符（+, +=）代替 concat 方法。)
  • str.substring(indexStart[, indexEnd])方法返回一个字符串在开始索引到结束索引之间的一个子集, 或从开始索引直到字符串的末尾的一个子集。

其他一些方法

  • str.replace(regexp|substr, newSubStr|function)方法返回一个由替换值（replacement）替换部分或所有的模式（pattern）匹配项后的新字符串。模式可以是一个字符串或者一个正则表达式，替换值可以是一个字符串或者一个每次匹配都要调用的回调函数。如果pattern是字符串，则仅替换第一个匹配项。

    原字符串不会改变。

Object

  • JavaScript 创建对象 :
    • 可以利用字面量创建对象 , 即 {} 大括号 , 嗯….属性采用键值对的形式,与python的字典较为相似,方法的写法利用匿名函数. 多个属性与方法之间用逗号隔开,最后一个不用写
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      // new object
      var obj = {
          name:'A',
          age:'18',
          sex:'male',
          sayHi:function () {
              console.log('Hi!');
          }
      }
      // 也可以这样调用属性
      console.log(obj['age']);

      // 另一种创建对象的方法 new (跟c#一样..):
      var obj = new Object();
      // 随后可以在后面追加属性
      obj.name = 'TinyStar';
      obj.age = '18';
      obj.sex = 'male';
      // 追加方法也是如此
      obj.SayHi = function () {
          console.log('Hi');
      }
      与’类’相似,访问对象属性直接 obj.propName , 方法 obj.funcName()

JavaScript中的构造函数

总体与’类’相似….无需返回值 , 返回object

利用构造函数来处理具有相同属性或方法的对象.

1
2
3
4
5
6
// 基本语法格式
function ConstructorName () {
    this.prep = value;
    this.Method = funciton () {}
}
new ConstructorName(); // call

访问对其内部属性和方法格式即对对象的访问方式

利用 for … in b遍历对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var obj = {
    name:'Alice',
    age:'17',
    sex:'f',
    /*
    fn:fuction () {
    
    }
    */
}
for (var i in obj ) {
    console.log(i); // 输出属性名
    console.log(obj[i]); // 输出属性值
}

JavaScript 的标准内置对象

Ref JavaScript | MDN "标准内置对象"

JavaScript中的原型和原型链

…..个人感觉这个标题下内容 和 OOP中的基类和继承链的关系相似…

原型链是实现继承的主要方法。 其基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。 每个构造函数都有一个prototype属性，指向原型对象。 原型对象都包含一个指向构造函数的指针（constructor）。

Ref JavaScript | MDN "对象原型"
Ref 知乎 "JavaScript中的原型与原型链"
---

简单数据类型和复杂数据类型

相当于值类型和引用类型

简单数据类型存储在栈中,作为参数传递时传递的是数据的拷贝,不会被改变值,

复杂数据类型存放在堆Heap中

WebAPIs

Web API是浏览器提供的一套操作浏览器功能(BOM - browser object model)和页面元素(DOM - document object model)的API

DOM树

  • 文档 一个页面就是一个文档,DOM中使用document表示
  • 元素 页面中的所有标签都是元素,DOM中使用element表示
  • 节点 网页的所有内容都是节点(标签|属性|文本|注释等),DOM中使用node表示
获取元素

根据ID获取,使用getElementById()方法,此方法返回一个element对象:

1
var element = document.getElementById(id);

获取一类标签元素 , 可使用getElementsByTagName()方法,将返回一个动态的HTML集合 HTMLCollection,其以伪数组的方式存储,这代表着它可以被遍历,若查找的元素根本不存在,则返回一个空的伪数组,且其length属性为0

注意父元素必须为单个元素对象,获取的时候不包括父元素自身.

Document 接口表示任何在浏览器中载入的网页，并作为网页内容的入口，也就是DOM 树。DOM 树包含了像 、

这样的元素，以及大量其他元素。它向网页文档本身提供了全局操作功能，能解决如何获取页面的 URL ，如何在文档中创建一个新的元素这样的问题。

Ref MDN "Document - WebApI接口参考"
---
特殊元素获取
  • <body>: 使用语句 document.body
  • <html>: 使用语句 document.documentElement
事件

事件三要素:

  • 事件源: 触发事件的对象
  • 事件类型: 如何触发 如:鼠标点击 \ 键盘按下某键
  • 事件处理程序: 通过函数赋值的方式完成

执行事件的步骤:

  • 获取事件源
  • 注册事件 / 绑定事件
  • 添加事件处理程序 / 采用匿名函数
事件的冒泡与捕获及其阻止
Ref JavaScript事件传播 "JavaScript中捕获/阻止捕获、冒泡/阻止冒泡"

有关函数:

  • event.preventDefault();
  • event.stopPropagation()
  • event.stopImmediatePropagation()

关于H5自定义属性

H5规定自定义属性以 data- 开头作为名并为其赋值

例如 :

1
<div data-index = '1'> </div>

用自定义属性保存并使用某些数据,就不用将它们存入数据库中了.

使用 Element.getAttribute() 和 Element.setAttribute()来操作它们

注意利用属性操作元素的样式的时候,操作的是它们的 style属性,虽然和这个标题无关,但是今天确实是犯了与其相关的低级错误.

H5新增的获取自定义属性的方法

针对基于标准属性 以data-开头的自定义属性,可以使用

Element.dataset.Name &&

Element.dataset[Name]

访问已存在的自定义属性

若自定义属性名有多个-链接单词,则获取的时候使用驼峰命名法

Element.dataset[dataFirstIndex]