前端技术 - Html CSS Javascript - 《编程笔记》

1.前端基础

1.前端基础

W3C：https://www.w3school.com.cn

1.1 Html（结构）

HTML 超文本标记语言从语义的角度描述页面结构。

1.2 Css（样式）

CSS 层叠式样式表从审美的角度负责页面样式。

1.3 Javascript（行为）

JavaScript 从交互的角度描述页面行为。

1.3.1 定义变量 var /let

使用var声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象；使用let声明的变量，其作用域为该语句所在的代码块内，不存在变量提升；
let不允许在相同作用域内，重复声明同一个变量。

// var 的情况
console.log(ar); // 输出undefined
var ar = 512;
// let 的情况
console.log(et); // 报错ReferenceError
let et = 512;
===========================================
// 报错
function func() {
  let a = 10;
  var a = 1;
}
// 报错
function func() {
  let a = 10;
  let a = 1;
}

1.3.2 数据类型

string（字符串）	boolean（布尔值）	number（数字）
symbol（符号）	null（空值）	undefined（未定义）

1.3.3 比较运算符

= 赋值
== 等于，值相等返回true，如1和“1”
=== 绝对等于，需要值和类型都相等
NaN与所有的数值都不相等包括自身，可以通过isNaN（）判断

1.3.4 严格检查模式

‘use strict’

1.3.5 数组

Jscript中的数组可以存放任意类型的数据，而且和JAVA不同，Jscript的数组可以改变长度。

array.lenth赋值，如果过少元素就会丢失

slice()//截取数组
push() pop() //数组尾部压入数据或者弹出
unshift() shift() //数组头部压入数据或者弹出
join()//把数组元素拼接

1.3.6 对象

使用键值对来定义对象

Jscript可以动态的添加和删除对象

var = person{
name:"zbk",
age:"10"
}

person.sex ="man"//添加
delete person.sex//删除

1.3.7 变量及其作用域

局部作用域

函数内部的函数，可以访问外部函数的变量；反之不可以

全局变量

所有全局变量都会被绑定在全局对象window下
由于所有全局变量都会绑定到全局对象下，如果不同的js文件使用了同名的全局变量，则会产生冲突，
可以把自己的变量全部放在自己定义的唯一命名空间中，即可降低命名空间冲突的问题
```
//在单个js文件中自己定义全局唯一命名空间
var BzkApp={};        
BzkApp.name="bzk"
```

1.3.8 方法

    function getAge() {
        let now =new Dat().getFullYear();
        return now-this.brith;
    }
    let bzk={
        name:"bzk",
        brith:1995,
        age:getAge//对象的方法可以定义在对象里面也可以提取出去
    }
    bzk.age();
    getAge();//报错 this指向调用者，这里是window window没有brith
    getAge().apply(bzk,[]);//被动调用，js和java不同可以使用appl让this指向指定的对象（bzk）

1.3.9 Json对象

    let user={
        name:'zhangsanjs',
        age:18
    }
    //对象转化为JSON字符串
    let jsonUser=JSON.stringify(user);
    //转化回对象
    let user1=JSON.parse(jsonUser);
    console.log(user1);//正确显示和user一样的对象

1.3.10 Js面向对象

原型继承

    let Person={
        walk:function () {
            console.log(this.name+"walking");
        }
    }
    let Student={
        run:function () {
            console.log(this.name+"running");
        }
    }
    let xiaoming={
        name:'ming'
    }
    //小明并不能走或者跑
    //xiaoming.run();//Uncaught TypeError: xiaoming.run is not a function
    //添加原型__proto__
    xiaoming.__proto__=Person;
    xiaoming.walk();//mingwalking
    xiaoming.__proto__=Student;
    xiaoming.run();//mingrunning
    //同时只能有一个原型，能跑就不能走了
    xiaoming.walk();//Uncaught TypeError: xiaoming.walk is not a function
    //但是可以通过更改Student的原型对象为Person来同时可以跑和走
    Student.__proto__=Person;
    xiaoming.walk();//mingwalking
    xiaoming.run();//mingrunning
    //不被允许Uncaught TypeError: Cyclic __proto__ value
    Student.__proto__=Student;

class继承（ES6）

    //定义一个类
    class Student{
        constructor(name) {
            this.name=name;
        }
        hello(){
            alert('hello');
        }
    }
    class CollegeStudent extends Student{
        constructor(name,major) {
            super(name);
            this.major=major;
        }
        play(){
            alert('王者荣耀排位中。。。');
        }
    }
    let xiaoming= new Student('ming');
    let xiaohong= new CollegeStudent('hong','Telecommunication Engineering');

1.3.11 BOM（浏览器对象模型）

window代表浏览器窗口

//获取当前浏览器内部显示页面的高和宽
window.innerHeight;
window.innerWidth;
//获取当前浏览器窗口的高和宽
window.outerHeight;
window.outerWidth;

location(重要！！)代表当前页面的url信息

location.host;//主机
//"localhost:63342"
location.href;//指向位置
//"http://localhost:63342/%E5%89%8D%E7%AB%AF%E5%85%A5%E9%97%A8/JavaScript/17.window/index.html?_ijt=5m76na6ug64heg6od0k6ulqgep"
location.protocol;//协议
//"http:"
location.reload();//重新加载，刷新网页
//设置新的地址(重定向)
location.assign('https://www.baidu.com')

document

document代表当前页面HTML DOM文档树
document.title
//"百度一下，你就知道"
document.cookie
//"PSTM=xxxxx; BAIDUID=xxxxxx:......
//可以获取也可以修改

1.3.12 DOM（文档对象模型）

获取DOM节点

    //标签选择器
    let h1=document.getElementsByTagName('h1');
    //ID选择器
    let p1=document.getElementById('p1');
    //class选择器
    let p2=document.getElementsByClassName('p2');
    let father= document.getElementById('father');
    //获得最后一个、第一个、所有子节点
    father.lastChild;
    father.firstChild;
    father.childNodes;//返回NodeList
    father.children;//返回HTMLCollection
    // 获得父节点
    father.parentNode;
    //以上都为原生代码，以后推荐使用jQuery；

更新节点

//先获取节点
let div1=document.getElementById('div1');
div1.innerText='hello';//改变文本内容
div1.innerHTML='<a href="https://www.baidu.com">123</a>';//可以解析html
div1.id='123';//更改id
div1.className="hello";//更改class
div1.style.background='red';//操作CSS

删除节点

通过获取父节点来删除

//获取要被删除节点的父节点
let father=document.getElementById("div").parentNode;
//删除，删除此节点后，此节点的所有子节点也会被删除
father.removeChild(document.getElementById("div"));

插入节点

//获取父节点
let father=document.getElementsByTagName('div');
father=father[0];
//方法一：设置父元素的HTML代码
//会覆盖原有HTML内容，空元素中添加可以使用
father.innerHTML="<p>hello!</p>";
//方法二：appendChild()方法
father.parentNode.appendChild(father.firstChild);
//创建一个新的标签
let p=document.createElement('p');
p.style.color='red';//设置样式
//标签的属性（比如a的href script的src）都是节点的属性，可以设置
p.setAttribute('id','id1');//也可以使用.xxx=的形式，但更推荐这种
p.innerText="新朋友";
father.appendChild(p);

1.3.13 Jquery

使用格式： $(‘选择器’).动作，其中选择器即css中选择器

（1）事件

$('p').mousedown();//鼠标按下
$('p').mouseenter(function () {alert("爬");});//鼠标进入

（2）操作DOM

let text;
text =$('body').text();//获得值
$('body').text("设置值");//设置值
text =$('body').html();//获得值
$('body').html("设置值");//设置值
//添加css样式：不会覆盖
$('body').css('color','red');
$('body').css('background','black');

//隐藏和显示
$('body').hide();
$('body').show();