雨林君的博客

菜单

liuyulin
发布于 2024-02-02 / 19 阅读
0
0

JavaScript

#前端#学习笔记

JavaScript基础

引入JavaScript

html文件中引入JavaScript使用<script>标签

<script>必须成对出现，不许自闭合

数据类型

js所有数据类型都是var

条件控制

和java一样

js中，for in 第一个变量是索引，for(var index in object)，for of 第一个变量是变量值

常用方法

alert(); 弹窗

console.log(); 控制台打印

document.getElementById("test").innerHTML=test1(); 用于替换界面中的元素

严格模式

严格模式通过在脚本或函数的头部添加"use strict"; 表达式来声明。

数据类型

数值，文本，图片，音频，视频。。。

number

js不区分小数和整数

NaN : not a number

Infinity : 表示无限大

字符串

用单引号和双引号都可以

布尔值

true 和 false

逻辑运算

&& || ！

比较运算符

== 类型不一样，值一样，也会判断为true

=== 绝对等于，类型一样，值一样，才会为true，大部分时候使用绝对等于

NaN与所有的数值都不相等，包括自己，通过isNaN()方法判断这个数是否是NaN

由于存在精度问题，尽量避免使用浮点数进行运算

null和undefined

null是空，undefined是未定义

数组

js中数组不需要是同一类型的变量，为了使用

function test1(){
    var list = [1,2,3,'hello',null,true,NaN];
    return list;
}

对象

对象使用大括号，变量用冒号赋值，变量间用逗号隔开。支持动态删除和添加对象的属性。

var myself = {
    name : 'liuyulin',
    age : 22,
    company : 'HIK'
}

用in判断属性值是否在这个对象中

'age' in myself

使用hasOwnProperty()方法判断一个属性是否是这个对象自身拥有的

Map与Set

js中使用二维数组为map赋值，也可以使用set()方法，使用get()方法取值

var testMap = new Map([["js","???"],["java","!!!"]]);

js中使用一维数组为set赋值，用has()方法判断是否存在元素

var testSet = new Set([1,1,2,3,3,4]);

iterator

iterator用于遍历map和set

变量作用域

js中，函数查找变量会从自身函数开始，加入内部存在同名的变量，内部函数的变量会屏蔽外部函数的变量。

js中会自动将变量的声明提升至函数的头部，但是不会将变量的赋值提升，所以很多前端会在函数头部定义所有要用的变量。

所有全局定义的变量，都会绑定在全局对象window中。

由于所有的全局变量都会绑定到window上，如果不同的js文件使用了相同的全局变量，就会导致冲突，可以定义一个唯一全局变量，之后所有的全局变量绑定到它上，降低全局命名冲突的问题。

var lyl = {};

lyl.name = "liuyulin";
lyl.add = function(x){
    return x;
}

let是局部变量，可以用于循环中，建议在循环中使用let。

const表示常量。

函数和面向对象

函数

类似于c语言中的函数，java中的方法

定义函数

使用function定义函数

function abs(x){
    if(x>=0){
        return x;
    }else{
     	return -x;   
    }
}

如果没有return，函数也会返回结果，可能是NaN，也可能是undefined

也可以直接将函数定义赋值给变量

var abs = function(x){
    if(x>=0){
        return x;
    }else{
     	return -x;   
    }
}

调用函数

abs(10);

函数异常

使用throw可以手动抛出异常

var abs = function(x){
    if(typeof x !== "number"){
        throw "not a number";
    }
    if(x>=0){
        return x;
    }else{
        return -x;
    }
}

多个参数

a免费赠送的关键字，代表传递进来的所有参数，是一个数组。

用rest获取除了定义之外的参数，rest参数只能写在最后边，前加...表示是一个可变长参数

var abs = function(x,...rest){
    console.log(rest);
}

方法

var myself = {
    name : 'liuyulin',
    age : 22,
    company : 'HIK',
    print: function(){
        return this.name+this.company;
    }
}

调用方法一定要带括号。使用applay通过函数去指定这个函数需要哪个对象。

常用对象

内部对象

Date

使用new Date()创建Date对象，和java一样，都有很多方法可以使用。

JSON

将json转化为js对象使用JSON.parse()函数，使用stringify()函数将对象转为json字符串。

var obj = JSON.parse(text);
var myselfStr = JSON.stringify(myself);

面向对象编程

原型

可以将原型理解为父类，类可以继承原型中的方法

myself.__proto__ = person;

继承

原型的写法过于抽象，所以javascript也使用和java类似的继承

继承还是使用extends

class leader extends worker{
    constructor(name,level){
        super(name);
        this.level = level;
    }

    kaihui(){
        console.log(this.name+' level:'+this.level);
    }
}

在js中，每一个函数都有一个prototype属性，这个属性指向函数的原型对象。

BOM

Browser Object Model，浏览器对象模型。

js的诞生就是为了在浏览器中运行。

浏览器对象

window

window代表浏览器窗口，可以获取一些浏览器窗口的属性。

navigator对象封装了浏览器的信息。一般不会使用navigator对象，因为会被人为修改，不建议使用这里的属性来判断和编写代码。

location

location代表当前页面的url信息，可以用于重定向。host代表主机，href代表地址，protocol代表协议，reload方法可以刷新界面。

document

document代表当前页面，html dom文档树。

history

history控制浏览器的前进和后退

DOM

文档对象模型

获取节点

使用document对象来操作，对应css的标签选择器。

var h1 = document.getElementsByTagName('h1');
var p1 = document.getElementById('p1');
var p2 = document.getElementsByClassName('p2');

可以继续获取子节点

// 获取父节点下的所有子节点
var childrens = p1.children;

// 获取第一个和最后一个节点
var firstChildren = p1.firstChild;
var last = p1.lastChild;

// 还可以获取上一个和下一个节点

这是原始代码，后续会使用jQuery

更新节点

获取到节点，就可以对节点中的内容进行修改

p1.innerText = '123';
p1.innerHTML = '<strong>123</strong>'

还能够通过style，来操作css

p1.style.color = 'red';

删除节点

先获取父节点，再通过父节点删除自己。

var parent = p1.parentElement;
parent.removeChild(p1);

删除是一个动态的过程，0被删除之后，1就变成了0。

插入节点

插入节点时，我们获得了某个dom节点，假设这个节点是空的，我们通过inner方法增加元素。但是如果这个节点已经存在了元素，这个dom节点就会被覆盖，我们不能这么处理。我们一般通过追加操作来插入节点。

var testfun = function(){
    var test = document.getElementById('test');    
    var test1 = document.getElementById('test1');
    test.append(test1);
}

创建节点

var newNode = document.createElement('p');

操作表单

表单也是DOM树种的节点

  • 文本框 text

  • 下拉框 <select>

  • 单选框 radio

  • 多选框 checkbox

  • 隐藏域 hidden

  • 密码框 password

表单的目的就是提交信息，我们可以获得要提交的信息，然后在里面做手脚。

jQuery

jQuery就是js库，jQuery可以参考cuishifeng文档

获取jQuery

直接使用CDN，在代码中粘粘

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

使用jQuery

公式：$(selector).action，选择器加事件

例子

<body>
    <a herf="rainf0rest.top" id="myblog">我的博客</a>

    <script>
        $('#myblog').click(function(){
            alert('rainf0rest.top');
        })
    </script>
</body>

jQuery选择器

使用的是css中的选择器的符号

标签选择器

$('p').action()

id选择器

$('#id1').action()

类选择器

$('.class1').action()

。。。其他选择器可以参考文档

jQuery事件

鼠标事件，键盘事件，其他事件

鼠标事件

.mousexxx()

$('p')        
// 鼠标按下
.mousedown()
.mouseenter()
.mouseleave()
// 鼠标移动
.mousemove()
.mouseout()
.mouseover()
.mouseup()

例子：

<!DOCTYPE html>
<html>

<head>
    <!--jQuery-->
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <!--自己写的js-->
    <script src="../first/js/first.js"></script>

    <style>
        #divArea{
            width: 500px;
            height: 500px;
            border: 1px solid white;
        }
    </style>
</head>

<body>
    <a herf="rainf0rest.top" id="myblog">我的博客</a><br/>

    mouse:<span id="mousePosition"></span>
    <div id="divArea"></div>

    <script>
        $('#myblog').click(function(){
            alert('rainf0rest.top');
        })
    </script>

    <script>
        // 当页面加载完了之后执行事件
        $(function(){
            $('#divArea').mousemove(function(e){
                $('#mousePosition').text('x:'+e.pageX+'y:'+e.pageY)
            })
        })
    </script>
</body>

</html>

其他事件可以查询jQuery库

jQuery操作DOM

节点文本操作

<script>
    // 获得值
    $('#test-ul li[name=java]').text()
    // 设置值
    $('#test-ul li[name=java]').text('J')
    // 获得html
    $('#test-ul li[name=java]').html()
    // 设置html
    $('#test-ul li[name=java]').html('<p>J</p>')
</script>

css操作

<script>
    $('#test-ul li[name=java]').css('color','red')
</script>

Vue
CSS

评论