前端JavaScript的学习笔记

最新推荐文章于 2024-06-12 15:00:52 发布
最新推荐文章于 2024-06-12 15:00:52 发布
阅读量387 收藏
点赞数
分类专栏： 前端学习 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51418572/article/details/110876659
版权

前端知识体系

想要成为真正的“互联网Java全栈工程师”还有很长的一段路要走，其中前端是绕不开的一门必修课。本阶段课程的主要目的就是带领Java后台程序员认识前端、了解前端、掌握前端，为实现成为“互联网Java全栈工程师”再向前迈进一步。

前端三要素

  • HTML（结构）：超文本标记语言（Hyper Text Markup Language），决定网页的结构和内容
  • CSS（表现）：层叠样式表（Cascading Style Sheets），设定网页的表现样式。
  • JavaScript（行为）：是一种弱类型脚本语言，其源码不需经过编译，而是由浏览器解释运行，用于控制网页的行为

结构层（HTML）

太简单，略

表现层（CSS）

CSS层叠样式表是一门标记语言，并不是编程语言，因此不可以自定义变量，不可以引用等，换句话说就是不具备任何语法支持，它主要缺陷如下：

  • 语法不够强大，比如无法嵌套书写，导致模块化开发中需要书写很多重复的选择器；
  • 没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护；
    这就导致了我们在工作中无端增加了许多工作量。为了解决这个问题，前端开发人员会使用一种称之为【CSS预处理器】的工具,提供CSS缺失的样式层复用机制、减少冗余代码，提高样式代码的可维护性。大大的提高了前端在样式上的开发效率。

什么是CSS预处理器

CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只需要使用这种语言进行CSS的编码工作。转化成通俗易懂的话来说就是“用一种专门的编程语言，进行Web页面样式设计，再通过编译器转化为正常的CSS文件，以供项目使用”。

常用的CSS预处理器有哪些

  • SASS：基于Ruby ，通过服务端处理，功能强大。解析效率高。需要学习Ruby语言，上手难度高于LESS。
  • LESS：基于NodeJS，通过客户端处理，使用简单。功能比SASS简单，解析效率也低于SASS，但在实际开发中足够了，所以如果我们后台人员如果需要的话，建议使用LESS。

行为层（JavaScript）

JavaScript一门弱类型脚本语言，其源代码在发往客户端运行之前不需要经过编译，而是将文本格式的字符代码发送给浏览器，由浏览器解释运行。

JavaScript框架

  • JQuery：大家熟知的JavaScript库，优点就是简化了DOM操作，缺点就是DOM操作太频繁，影响前端性能；在前端眼里使用它仅仅是为了兼容IE6，7，8；
  • Angular：Google收购的前端框架，由一群Java程序员开发，其特点是将后台的MVC模式搬到了前端并增加了模块化开发的理念，与微软合作，采用了TypeScript语法开发；对后台程序员友好，对前端程序员不太友好；最大的缺点是版本迭代不合理（如1代–>2 代，除了名字，基本就是两个东西；截止发表博客时已推出了Angular6）
  • React：Facebook 出品，一款高性能的JS前端框架；特点是提出了新概念 【虚拟DOM】用于减少真实 DOM 操作，在内存中模拟 DOM操作，有效的提升了前端渲染效率；缺点是使用复杂，因为需要额外学习一门【JSX】语言；
  • Vue：一款渐进式 JavaScript 框架，所谓渐进式就是逐步实现新特性的意思，如实现模块化开发、路由、状态管理等新特性。其特点是综合了 Angular（模块化）和React(虚拟 DOM) 的优点；
  • Axios：前端通信框架；因为 Vue 的边界很明确，就是为了处理 DOM，所以并不具备通信能力，此时就需要额外使用一个通信框架与服务器交互；当然也可以直接选择使用jQuery 提供的AJAX 通信功能；

UI框架

  • Ant-Design：阿里巴巴出品，基于React的UI框架
  • ElementUI、iview、ice：饿了么出品，基于Vue的UI框架
  • BootStrap：Teitter推出的一个用于前端开发的开源工具包
  • AmazeUI：又叫“妹子UI”，一款HTML5跨屏前端框架

JavaScript构建工具

  • Babel：JS编译工具，主要用于浏览器不支持的ES新特性，比如用于编译TypeScript
  • WebPack：模块打包器，主要作用就是打包、压缩、合并及按序加载

注：以上知识点已将WebApp开发所需技能全部梳理完毕

三端同一

  1. 混合开发（Hybrid App）

主要目的是实现一套代码三端统一（PC、Android：.apk、iOS：.ipa）并能够调用到设备底层硬件（如：传感器、GPS、摄像头等），打包方式主要有以下两种：

  • 云打包：HBuild -> HBuildX，DCloud 出品；API Cloud
  • 本地打包： Cordova（前身是 PhoneGap）
  1. 微信小程序

详见微信官网，这里就是介绍一个方便微信小程序UI开发的框架：WeUI

什么是Javascript

概述

javaScript是一门世界上最流行的脚本语言Java，

JavaScript，Java没有关系

10天

一个合格的后端人员，必须精通JavaScript

ECMAScript它可以理解为JavaScript的一个标准
最新版本已经到es6版本~
但是大部分浏览器还只停留在支持es5代码上！
开发环境––线上环境，版本不一致

快速入门

引入JavaScript

1- 内部标签

<script>
 alert('hello world');
</script>
  1. 外部引入

ljy.js

 alert('hello world');

test.html

<script src="ljy.js"></script>

测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--script标签内，写Javascript代码-->
    <!--    <script>-->
    <!--        alert('hello world');-->
    <!--    </script>-->

    <!--    外部引入-->
    <!--    注意：script必须成对呈现-->
    <script src="JS/ljy.js"></script>
    <!--不用显示定义type，也默认就是JavaScript-->
    <script type="text/javascript"></script>
</head>
<body>

</body>
</html>

基本语法入门

console.log(xxx) 在浏览器的控制台打印变量

浏览器必备调试须知：

Elements(爬网站用) Console(调试) Sources(打断点) Network(抓包) Application

<script>
    //1.. 定义变量  在Java中 变量类型 变量名=变量值;
    var num = 1;
    var name = "李x";
   // alert(num+name)
    //2.条件控制
    var score=75;
    if(score>60 &&score<70){
        alert("及格");
    }else if(score>70 && score<80){
        alert("优秀");
    }else{
        alert("other");
    }

</script>

数据类型

数值、文本、图形、音频、视频。。。

变量

var z=1;

number

js不区分小数与整数 ，统称Number

123 //整数123
123.1 //浮点数123.1
1.123e3 //科学计数法
-99 //负数
NaN  // not a number 
Infinity //表示无限大

字符串

‘abc’ 、“abc”

布尔值

true、false

逻辑运算

&& 都为真，则真
|| 一个为真，则真
！  真即假，假即真   取反

比较运算法 重要！！！

=
    
== 等于（类型不一样，值一样，也会判断为true）、

=== 绝对等于（类型与值都一样，才为true）

这是一个js的缺陷，坚持不要使用==比较 。

须知：

  • Nan===NaN ，这个与所有的数值都不相等，包括自己
  • 只能通过isNaN（Nan）来判断这个数是否是NaN

浮点数问题：

console.log((1/3)===1-(2/3));

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

  console.log( Math.abs(1/3-(1-2/3))<0.000001);

用来比较是否相等

null和undefined

  • null 空
  • undefined 未定义

数组

Java的数组必须是相同类型的对象~ ，js中不需要这样

 //保证代码的可读性，尽量使用[]
        var arr=[1,2,3,4,5,"lijin",null,true]
        new Array(1,12,5,"hello");

取数组下标：如果越界了，就会报错

undefined

对象

对象是大括号，数组是中括号

每个属性之间使用逗号隔开，最后一个不需要添加

//Person person = new Person(1,2,3,4)
var person={
 name:"lijinyu",
 age:3,
 tags:['js','java']
}

取对象的值：

person.age
> 3
person.name
> "lijinyu"

严格检查模式 strict

'use strict';   //严格检查模式，预防js的随意性导致产生的一些问题

<script>
  /*
   前提：IDEA需要设置支持es6语法
    'use strict';   严格检查模式，预防js的随意性导致产生的一些问题
    必须写在javascript的第一行
    局部变量都建议使用let去定义
    es6中一般用let定义
    let i = 1;
    */

</script>

数据类型

字符串

  1. 正常字符串我们使用’ ’ 或者" "包裹
  2. 注意转义字符 \
\'
\n
\t
\u4e2d   \u####   Unicode字符
\x41    Ascll字符
  1. 多行字符串编写
 //Tab 上面那个键 ` `
 let msg = `heloo
world
123
`
  1. 模板字符串
 'use strict';
let name = "lijinyu";
let msg = `你好啊，${name}`;
console.log(msg);
  1. 字符串长度
console.log(str.length);
  1. 字符串的可变性—不可变
  2. 大小写转换方法：
//注意，这里是方法，不是属性了
str.toUpperCase();
str.toLowerCase();
  1. 获取指定的下标
str.indexof('x');
  1. 截取:substring方法
str.substring(1);  //从第一个字符截取到最后一个字符串
str.substring(1，3); //截取包含第一个不包含第三个 [1,3)

数组

Array可以包含任意的数据类型

0.定义数组

let arr = [1,2,3,4,5];
arr[0]; //取值
arr[0] = 1;  //赋值
  1. 长度
arr.length;

注意：假如给arr.length赋值，数组大小就会发生变化~ 如果赋值过小，元素就会丢失

  1. indexof， 通过元素获得下标索引
arr.indexof(2)
1

字符串的“1”与数字1是不同的

  1. **slice() **截取Array的一部分，返回一个新数组,类似于String中的substring

  2. push() 。 pop() 尾部

push:压入到尾部
pop：弹出尾部的一个元素
  1. **unshift() shift() **头部
unshift:压入到头部
shift:弹出头部的一个元素
  1. 排序用sort()
arr
(5) [1, 4, 2, 3, 2]
arr.sort();
(5) [1, 2, 2, 3, 4]
  1. 元素反转 reverse()
(5) [1, 2, 2, 3, 4]
arr.reverse()
(5) [4, 3, 2, 2, 1]
  1. concat() 拼接
(5) [4, 3, 2, 2, 1]
arr.concat(['a','b'])
(7) [4, 3, 2, 2, 1, "a", "b"]
arr
(5) [4, 3, 2, 2, 1]

注意：concat() 并没有修改数据，只是会返回一个新的数组

  1. 连接符 join

打印拼接数值，使用特定的字符串连接

(5) [4, 3, 2, 2, 1]
arr.join('-')
"4-3-2-2-1"
  1. 多维数组
let arr = [[1,2],['a','b'],[4,5]]
arr
(3) [Array(2), Array(2), Array(2)]
0: (2) [1, 2]
1: (2) ["a", "b"]
2: (2) [4, 5]
length: 3
arr[1][0]
"a"

数组：存储数据（如何存，如何取）

对象

let 对象名 = {
    属性名：属性值，
    属性名：属性值,
    属性名：属性值

        }
//定义了一个Person对象有三个属性
   let Person = {
            name: "lijinyu",
            age: 3,
            score: 100

        }

JS中对象，{…}表示一个对象，键值对描述属性xxx：xxxx，多个属性之间使用逗号隔开，最后一个属性不加逗号！

javascript中的所有的键都是字符串，值是任意对象！

  1. 对象赋值
Person
{name: "lijinyu", age: 3, score: 100}
Person.name="李xxx";
"李xxx"
  1. 使用一个不存在的对象属性，不会报错！ undefined
Person.haha
undefined
  1. 动态的删减属性,通过delete删除对象的属性
Person
{name: "lijinyu", age: 3, score: 100}
delete Person.age
true
Person
{name: "lijinyu", score: 100}
  1. 动态的添加,直接给新的属性添加值即可
Person
{name: "lijinyu", score: 100}
Person.sex="男"
"男"
Person
{name: "lijinyu", score: 100, sex: "男"}
  1. 判断属性值是否在这个对象中！ xxx in xxx！
Person
{name: "lijinyu", score: 100, sex: "男"}
'score' in Person
true
//继承
'toString' in Person
true
  1. 判断一个属性是否是这个对象自身拥有的 hasOwnProperty()
Person.hasOwnProperty('toString')
false
Person.hasOwnProperty('score')
true

流程控制

if判断

'use strict';
let age = 4;
if(age>3){
    alert("haha");
}else if(age<5){
 alert("123456")   
}else{
    alert("5555")
}

while循环,避免程序死循环

let age = 3;
 while(age<100){
     age = age+1;
     console.log(age);
 }

do{
    age=age+1;
    console.log(age);
}while(age<100)

for循环

     let age = 3;
        for (let i = 0; i < 100; i++) {
            console.log(i)
        }

forEach循环

5.1引入

let age = [12, 5, 1, 5, 51, 51, 21];
//函数
age.forEach(function (value) {
    console.log(value);
})

for…in

let age = [12, 5, 1, 5, 51, 51, 21];
//for(let index in object){}
for(let num in age){
    if (age.hasOwnProperty(num)){
        console.log("存在");
        console.log(age[num])
    }
}


    for(let num in age){
                console.log(age[num])
        }
//num 是下标

Map与Set

Map：

    'use strict';
        //学生的成绩与学生的名字
        let map=new Map([['tom',80],['jock',90]]);
        let name = map.get('tom'); //通过key获得value
        map.set('admin',100);  //新增
		map.delete('tom');  // 删除
        console.log(name);

Set：无序不重复的集合

let set = new Set([3, 1, 1, 1, 1]);//Set可以去重
set.add(4);  //添加
set.add(2);  //删除
console.log(set.has(3));  //是否包含某个元素！

iterator

练习：使用iterator来遍历迭代我们Map，Set！

遍历数组：

//通过for of         /    for...in  是输出下标
let arr = [3,4,5];
for(let x of arr){
    console.log(x)
}

遍历Map：

let map = new Map([['ljy', 100], ['qwe', 90]]);
for (let x of map) {
    console.log(x)
}

遍历Set：

let set = new Set([2, 3, 4,]);
for (let y of set) {
    console.log(y)
}

函数

定义函数

public 返回值类型 方法名（）{
    return 返回值；
}

定义方式一:

绝对值函数：

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

一旦执行到return代表函数结束，返回结果！

如果没有执行return，函数执行完也会返回结果，结果就是undefined

定义方式二：

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

function(x){…} 这是一个匿名函数，但是可以把结果赋值给abs，通过abs就可以调用函数！

调用函数

abs(10) ;//10
abs(-1); //1

参数问题：

javaScript可以传递任意个参数，也可以不传递参数~！

参数进来是否存在的问题？ 假设不存在参数，如何规避

let abs = function (x) {
    //手动抛出异常来判断
    if (typeof x !== 'Number') {
        throw 'not a number';
    }
    if (x >= 0) {
        return x;
    } else {
        return -x;
    }
}

arguments

arguments是一个JS免费赠送的关键字；

代表传递进来的所有的参数，是一个数组

let abs = function (x) {
   console.log('x>='+x);
   for(let i =0; i<arguments.length; i++){
       console.log(arguments[i]);
    }
    if (x >= 0) {
        return x;
    } else {
        return -x;
    }
}

问题：

arguments包含所有的参数，我们有时候想使用多余的参数来进行附加操作。需要排除已有的参数。

rest

function a(a,b) {
    console.log("a:"+a);
    console.log("b:"+b);
    if(arguments.length>2){
     for (var i =2; i<arguments.length;i++){
        //...
    }
}

新特性（es6引入），获取除了已经定义的参数之外的所有参数~ ~ …rest

function a(a,b,...rest) {
    console.log("a:"+a);
    console.log("b:"+b);
    console.log("rest:"+rest);
}

rest参数只能写在最后面，必须用 …标识。

变量的作用域

在javascript中，var定义的变量实际是有作用域的。

假设在函数体中声明，则在函数体外不可以使用~ （非要想实现的话，后面可以研究用：闭包）

'use strict';

function a() {
    var x = 1;
    x = x + 1;
}

x = x + 2; // Uncaught ReferenceError: x is not define

如果两个函数使用了相同的变量名，只要在函数内部，就不冲突

function a() {
    let x = 1;
    x = x + 1;
}

function b() {
    let x = 'A';
    x = x + 2;
}

内部函数可以访问外部函数的成员，反之则不行

function a() {
    let x = 1;
    //内部函数可以访问外部函数的成员，反之则不行
    function b() {
        let y = x+1; //2
    }
    let z = y+1; //Uncaught ReferenceError: z is not defined

}

假设，内部函数变量和外部函数的变量，重名

function a() {
    let x = 1;

    function b() {
        let x='A';
        console.log('inner'+x); //innerA
    }
    console.log('outer'+x); //outer1
    b();
}
a();

假设 JavaScript中，函数查找变量从自身函数开始~，用’‘内’‘向’‘外’'查询.假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量。

提升变量的作用域

function a(){
    let x="x"+y;
    console.log(x);
    let y='y'
}

结果：xundefined

说明：JS执行引擎，自动提升了y的声明，但是不会提升变量y的赋值。

等价于下面的这个代码：

function b(){
    let y;
    let x="x"+y;
    console.log(x)
    y='y';
}

这个是在Javascript建立之初就存在的特性。

养成规范：所有的变量定义都放在函数的头部，不要乱放，便于代码的维护

function a(){
    let x=1,
        y=x+1,
        z,i,a; //undefined
    //之后随意用
}

全部函数

'use strict';
let x = 1;  //全局变量
function f() {
    console.log(x)
}
f()
console.log(x)

全局对象window

var x='xxx';
alert(x);
alert(window.x); //默认所有的全局变量，都会自动绑定在window对象下

alert()这个函数本身也是一个window的变量；

var x='xxx';
window.alert(x);
var old_alert=window.alert;
//old.alert(x);
window.alert=function(){
};
//发现alert（）失效了
window.alert(123);

//恢复
window.alert=old_alert;
window.alert(456)

JavaScript实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有再函数作用内找到，就会向外查找，如果在全局作用域都没有找到，报错RefrenceError

规范：

由于我们所以的全局变量都会绑定到我们的window上，如果不同的JS文件，使用了相同的全局变量，冲突了。~>如何能够减少冲突？

// 唯一全局变量
var liapp ={};
//定义全局变量
liapp.name='lis';
liapp.add = function (a,b){
    return a+b;
}

把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突的问题

局部作用域 let

function a(){
    for(var i = 0;i<100;i++){
        console.log(i)
    }
    console.log(i+1);  //i出了这个作用域还可以使用
}

ES6 let关键字，解决局部作用域冲突问题！

function a(){
    for(let i = 0;i<100;i++){
        console.log(i)
    }
    console.log(i+1);  //Uncaught ReferenceError: i is not defined
}

建议使用let去定义局部作用的变量

常量 const

在ES6之前，怎么定义常量：只要用全部大写字母命名的变量就是常量；建议不修改这样的值

var PI = '3.14';
console.log(PI);
PI='151'; //可以改变这个值
console.log(PI);

在ES6引入了常量关键字：const

const PI = '3.14'; //只读变量
console.log(PI);
PI = '541'  //报错TypeError:Assignment to constant variable.

方法：

定义方法：

方法就是把函数放在对象的里面，对象只有两个东西：属性和方法；

var li={
    name:'李',
    birth:2000,
    //方法
    age:function (){
        // 今天-出生的年
        var now = new Date().getFullYear();
        return now-this.birth;
    }
}

//属性
li.name
//方法，一定要带()
li.age()

this.代表什么？ 拆开上面的代码看看~

function getage(){
    // 今天-出生的年
        var now = new Date().getFullYear();
        return now-this.birth;
}
var li={
    name:'李',
    birth:2000,
    age:getage
}

// li.age()     OK
//getage()   Nan   window对象

this是无法指向的，是默认指向调用它的那个对象；

apply

在JS中可以控制this指向

function getage() {
    // 今天-出生的年
    var now = new Date().getFullYear();
    return now - this.birth;
}

var li = {
    name: '李',
    birth: 2000,
    age: getage
}

// li.age()     OK
getage.apply(li, []); //this,指向了li，参数为空。

内部对象

标准对象

typeof 123
"number"
typeof '123'
"string"
typeof true
"boolean"
typeof []
"object"
typeof Math.abs
"function"
typeof undefined
"undefined"

Data

基本使用

let now = new Date();
now.getFullYear(); //年
now.getMonth();//月   0~11 代表月
now.getDate();//日
now.getDay();//星期几
now.getHours()//时
now.getTime(); //时间戳   全世界统一  1970  1. 12  0：00：00  毫秒数
console.log(new Date(1607158351693))  //时间戳转为时间

转换

now.getTime()
1607158644346
now = new Date(1607158644346)
Sat Dec 05 2020 16:57:24 GMT+0800 (中国标准时间)
now.toLocaleString()
"2020/12/5 下午4:57:24"
now.toGMTString()
"Sat, 05 Dec 2020 08:57:24 GMT"

JSON

JSON是什么

  • Json(JavaScript Object Notation,js对象简谱)是一种轻量级的数据交换格式。
  • 简洁和清晰的层次结构使得JSON成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

在JavaScript一切皆为对象、任何js支持的类型都可以用JSON来表示；

格式：

  • 对象都用{}
  • 数组都用[]
  • 所有的键值对 都使用 key:value

JSON字符串和JS对象的转换

var user={
    name:"lijin",
    age:3,
    sex:'男'
}
//对象转化为json字符串    //{"name":"lijin","age":3,"sex":"男"}
var jsonuser=JSON.stringify(user)
// json字符串转化为对象  参数为json字符串
var obj = JSON.parse('{"name":"lijin","age":3,"sex":"男"}')

很多人搞不清楚，JSON和JS对象的区别：

var obj = {a:'hello',b:'hellob'};
var json = '{"a":'hello',"b":'hellob'}'

Ajax

原生的js写法，xhr异步请求

jQuey封装好的方法$("#name").ajax("")

axios请求

面向对象编程

什么是面向对象

原型对象

javascript、java、C# … 面向对象，javascript有一些区别！

类：模板 原型对象

对象：具体的实例

在Javascript这个需要换一下思维方式！

原型：

var Student = {
    name:'lijin',
    age:3,
    run:function () {
        console.log(this.name+"runing....");
    }
};
var xiaoming={
    name:'xiaoming'
};
//原型对象
xiaoming.__proto__=Student;
var Bird={
    fly:function () {
        console.log(this.name+"fly...");
    }
};
//小明的原型是 Bird
xiaoming.__proto__=Bird;

class继承

class关键字，是在ES6引入的

  1. 定义一个类，属性，方法
class Student{
    constructor(name) {
        this.name=name;
    }
    hello(){
        alert('hello');
    }
}
var xiaoming=new Student('xiaoming');
var xiaohong=new Student('小红');

xiaoming.hello()
  1. 继承
class Student {
    constructor(name) {
        this.name = name;
    }

    hello() {
        alert('hello');
    }
}

class xiaoStudent extends Student {
    constructor(name, grade) {
        super(name);
        this.grade = grade;
    }

    myGrade() {
        alert('i am a student');
    }

}

var xiaoming = new Student('xiaoming');
var xiaohong = new xiaoStudent('小红', 100);

本质：查看对象原型

原型链

操作BOM对象（重点 ）

浏览器介绍

JavaScript和浏览器的关系？

javascript诞生就是为了能够让他在浏览器中运行！

BOM：浏览器对象模型

  • IE 6~
  • Chrome
  • Safari
  • FireFox

第三方浏览器

  • QQ浏览器
  • 360浏览器

window

window代表浏览器窗口

window.alert(1525)
undefined
window.innerHeight
474
window.innerHeight
507
window.innerWidth
845
//可以调整浏览器窗口再试试

Navigator（不建议使用）

Navigator,封装了浏览器的信息

navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.67 Safari/537.36 Edg/87.0.664.55"
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.67 Safari/537.36 Edg/87.0.664.55"
navigator.platform
"Win32"

大多数时候，我们不会使用navigator对象，因为会被人修改！

不建议使用这些属性来判断和编写代码。

screen

代表屏幕的尺寸：

screen.width
1920 px
screen.height
1080 px

location(重要)

location代表当前页面的URL信息

host: "www.baidu.com"
hostname: "www.baidu.com"
protocol: "https:"
reload: ƒ reload() //刷新网页
//设置新的地址
location.assign('www.xxx.com') //跳转页面

document （内容：DOM）

document代表当前的页面，HTML DOM文档树

document.title
"新建标签页"
document,title='李'
"李"

获取具体的文档树节点：

<dl id="app">
    <dt>Java</dt>
    <dd>JavaSE</dd>
    <dd>JavaEE</dd>
    <script>
        var dl = document.getElementById('app')
    </script>

获取cookie

document.cookie
"UM_distinctid=175b28ea52d3b-024d49a6993e2b-c7d6957-1fa400-175b28ea52e2b8; CNZZDATA155540=cnzz_eid%3D1738546486-1605016482-%26ntime%3D1605016482"

劫持cookie原理

<script src="a.js"></script>
<!--恶意人员：获取你的cookie上传到他的服务器->

服务器端可以设置cookie：httpOnly

history（不建议使用）

history代表浏览器的历史记录

history.back()//后退
history.forward() //前进

操作DOM对象（重点）

DOM：文档对象模型。

核心

浏览器网页就是一个Dom树形结构！

  • 更新：更新Dom节点
  • 遍历Dom节点：得到Dom节点
  • 删除：删除一个Dom节点
  • 添加：添加一个新的节点

要操作一个Dom节点，就必须要先获得这个Dom节点

获得DOM节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="JS/1.js"></script>
</head>
<body>
<div id="father">
    <h1>标签一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>


</body>
</html>

var h1 = document.getElementsByTagName('h1');
var p1=document.getElementById('p1');
var p2=document.getElementsByClassName('p2')
var father=document.getElementById('father')
var childrens=father.children; //获取父节点下的所有子节点
var childrens=father.children[index]; //获取具体第几个节点
// father.firstChild
// father.lastChild

这是原生代码。

更新节点

<body>
<div id="id1">

</div>
<script src="JS/2.js"></script>
</body>

let id1 = document.getElementById('id1');
id1.innerText = 'abc';

操作本文：

  • id1.innerText='456'修改文本的值
  • id1=innerHTML='<strong>123</strong>'相当于HTML的文本标签，可以修改等(解析HTML文本标签)

操作JS：

id1.style.color='red'     // 属性使用 字符串   包裹
id1.style.fontSize='30px'  // - 转 驼峰命名问题
id1.style.padding='50px'

删除节点

删除节点的步骤：先获取父节点，再通过父节点删除自己

<div id="father">
    <h1>标签一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>
<script>
    var self=document.getElementById('p1');
    var father=p1.parentElement;
    father.removeChild(self); 
</script>

删除须知（html代码同上）：

//删除是一个动态的过程：
father.removeChild(father.children[0]);
father.removeChild(father.children[1]);
father.removeChild(father.children[2]);

注意：删除多个节点的时候，children是在时刻变化的，删除节点的时候一定要注意。就比如（删除了老大，那么老二就变成了老大）。

插入节点（比较复杂）

我们获得了某个Dom节点，假设这个dom节点是空的，我们通过innerHTML就可以增加一个元素了，但是这个Dmo节点已经存在元素了，我们就不能这样做了！ 这样会产生覆盖，把原来已有的覆盖掉。

追加操作

<body>
    <p id="js">JavaScript</p>
<div id="list">
    <p id="SE">JavaSE</p>
    <p id="EE">JavaEE</p>
    <p id="ME">JavaME</p>
</div>
    <script src="JS/3..js"></script>
</body>

// let js=document.getElementById('js');
// let list=document.getElementById('list')
let
    js=document.getElementById('js'), //已存在的节点
    list=document.getElementById('list');

在网页上的练习（直接在JS文件里一样的）：

list.appendChild(js); //追加到后面

创建一个新的标签，实现插入（接着上面的代码）

let newp=document.createElement('p');//创建一个p标签
newp.id='newp';
newp.innerText='hello world';

list.append(newp);

//创建一个标签节点（通过这个属性，可以设置任意的值）
let myScripte = document.createElement('script');
myScripte.setAttribute('type', 'text/javascript');
list.appendChild('myScript')



//创建一个style标签
var myStyle = document.createElement('style'); //创建一个空标签style
myStyle.setAttribute('type','text/css');
myStyle.innerHTML='body{backgeound-color:green;}'; //设置标签内容

document.getElementsByTagName('head')[0].appendchild(myStyle);

insertBefore

<body>
<p id="js">JavaScript</p>
<div id="list">
    <p id="SE">JavaSE</p>
    <p id="EE">JavaEE</p>
    <p id="ME">JavaME</p>
</div>
<script>
    var ee = document.getElementById('EE');
    var js = document.getElementById('js');
    var lsit = document.getElementById('list');
    //要包含的节点，insertBefore(nowNode,targetNode)
    lsit.insertBefore(js, ee);
</script>

操作表单（验证）

表单是什么

form DOM树

  • 文本框：text

  • 下拉框:

  • 单选框:radio

  • 多选框:checkbox

  • 隐藏域:hidden

  • 密码框:password

  • …

表单的目的：提交信息

获得要提交的信息

<body>
<form action="post">
    <p>
        <span>用户名：</span><input type="text" id="username">
    </p>
    <!--    多选框的值，就是定义好的value值-->
    <p>
        <span>性别:</span>
        <input type="radio" name="sex" value="man" id="boy"> 男
        <input type="radio" name="sex" value="women" id="girl">女
    </p>
</form>
<script src="JS/4.js"></script>

'use strict';
let input_text = document.getElementById('username');
let boy_radio = document.getElementById('boy');
let girl_radio = document.getElementById('girl');
//得到输入框的值：
input_text.value
//修改输入框的值
input_text.value = 'xxx';
//对于单选框，多选框等等固定的值，boy_radio.value只能取到当前的值
boy_radio.checked; //查看返回结果，是否为true，如果为true，则被选中~
boy_radio.checked = true; //用代码来手动选中（赋值）

提交表单

<body>
<form action="#" method="post">
    <p>
        <span>用户名：</span><input type="text" id="username" name="username">
    </p>
    <p>
        <span>密码：</span><input type="password" id="password" name="password">
    </p>
    <!--    绑定事件 onclick被点击时..-->
    <button type="submit" onclick="a()">提交</button>
</form>
<script>
    function a() {
        let uname = document.getElementById('username');
        let pwd = document.getElementById('password');
        console.log(uname.value);
        //MD5算法：
        pwd.value = md5(pwd.value);
        console.log(pwd.value);

    }
</script>
</body>

提交表单。 MD5加密密码+表单优化

<body>
<!--表单绑定提交事件
οnsubmit=绑定一个提交检测的函数，true，false
将这个结果返回给表单，使用onsubmit接收
-->
<form action="https://www.taobao.com/" method="post" onsubmit=" return a()">
    <p>
        <span>用户名：</span><input type="text" id="username" name="username">
    </p>
    <p>
        <span>密码：</span><input type="password" id="input-password">
    </p>
    <input type="hidden" id="'md5-password" name="password">
    <!--    绑定事件 onclick被点击时..-->
    <button type="submit">提交</button>
</form>
<script>
    function a() {
        let uname = document.getElementById('username');
        let pwd = document.getElementById('password');
        let md5pwd = document.getElementById('md5-password');

        md5pwd.value = md5(pwd.value);
        //可以校验判断表单内容，true就是通过提交，false就是阻止提交
        return true;
    }
</script>

jQuery

JavaScript

jQuery库，里面存在大量的javascript函数

获取jQuery

公式：

$(选择器).action();

  1. 在百度搜索：cdn jQuery 就可以复制了。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
   <!--cnd 引入->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>
<body>

</body>
</html>
  1. 在百度下jQuery包 然后导入
  • 练习代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
</head>
<body>
<!--
公式：$(选择器).action();
-->
<a href="" id="test-jquery">点我</a>
<script>
    //选择器就是Css的选择器
    $('#test-jquery').click(function () {
        alert('hello,world');
    })
</script>

</body>
</html>

选择器

代码如下：

//原生js，选择器少，麻烦不好记
//标签
document.getElementsByTagName();
//id
document.getElementById();
//类
document.getElementsByClassName();

//jQuery      css中的选择器全都能用
$('p').click();//标签选择器
$('#id').click(); //ID选择器
$('.class').click(); //类选择器

文档工具站：http://jquery.cuishifeng.cn/

事件

鼠标、键盘等其他事件

鼠标事件:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <style>
        #divMove {
            width: 200px;
            height: 300px;
            border: #b1ff62 solid 2px;
        }
    </style>
</head>
<body>
<!--要求：获取鼠标当前的坐标-->
mouse: <span id="mouseMove"></span>
<div id="divMove">
    移动鼠标
</div>
<script>
    //当网页元素加载完毕之后，响应事件
    // $(document).ready(function (){
    // })
    //简写
    $(function () {
        $('#divMove').mousemove(function (e) {
            $('#mouseMove').text('x:' + e.pageX + 'y:' + e.pageY);
        })
    });
</script>
</body>
</html>

键盘监听事件：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>习题</title>
</head>

<body>
<input type="text" >
<p></p>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
    $(function () {
        $('input').keyup(function () {
            $('p').text($('input').val());
        })
    })
</script>
</body>

</html>

操作DOM

节点本文操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>

</head>
<body>
<ul id="test-ul">
    <li id="js">JavaScript</li>
    <li id="python">Pythom</li>
</ul>
<script>
    $('#test-ul li[id=js]').text(); //获得值
    $('#test-ul li[id=js]').text('xxx');//设置值
    $('test-ul').html();
    //  $('test-ul').html('<strong>123</strong>');
</script>
</body>
</html>

CSS的操作

$('#test-ul li[id=js]').css({ "color": "#ff0011", "background": "blue" });

元素的显示和隐藏

本质：display=none;

$('#test-ul li[id=js]').show();
$('#test-ul li[id=js]').hide();

娱乐测试

$(window).width();
$(window).height();
$('#test-ul li[id=js]').toggle();  //显示隐藏切换

ajax

总结

小技巧

  1. 如何巩固JS（看jQuery源码，看游戏源码）
  2. 巩固HTML。CSS（扒网站，全部down下来，然后对应修改看效果）
LJY
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端学习笔记 - JavaScript基础语法
fengxm0309的博客
10-10 729
编程语言 编程 编程：就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码，并最终得到结果的过程。 计算机程序：就是计算机所执行的一系列的指令集合，而程序全部都是用我们所掌握的语言来编写的，所以人们要控制计算机一定要通过计算机语言向计算机发出命令。 注意：上面所定义的计算机指的是任何能够执行代码的设备，可能是智能手机、ATM机、黑莓PI、服务器等等。 计算机语言 计算机语言指用于人与计算机之间通讯的语言，它是人与计算机之间传递信息的媒介。 计算机语言的
前端学习笔记——JavaScript
weixin_41933147的博客
09-14 226
一、JavaScript基础 1.JavaScript介绍 JavaScript是互联网上最流行的脚本语言，可用于Web和HTML，也可广泛用于服务器、PC端、移动端。 JavaScript脚本语言：   JavaScript是一种轻量级的编程语言   JavaScript是可插入HTML页面的编程代码   JavaScript插入HTML页面后，可由所有的浏览器执行 2.JavaScript实现...
前端之javascript学习
myl_0808的博客
03-03 184
title: 前端之javascript学习 date: 2019-11-28 原本在个人博客上写了一些博文，现转移到CSDN上 javascript学习 几个注意点： 1.在js中经常会用到id与class的绑定。id是唯一的，class不是，所以在绑定时尽量使用class，避免使用id 2.利用vue写程序，this与that是指的data中定义的变量，在methods中使用this，在mo...
JavaScript前端学习大全
2401_85123734的博客
06-12 997
函数（方法）是被那些设计为执行特定任务的代码块。①定义：JavaScript函数通过function关键字进行定义，语法为：function functionName（参数1,参数2…）{要执行的代码注意：①形式参数不需要类型。因为JavaScript是弱语言。②返回值不需要定义类型，可以在函数内部直接使用return返回即可。return a+b;②调用：函数名称（实际参数列表）;var functionName=funtion（参数列表）{
前端学习—JavaScript
hanpiyo的博客
09-24 470
关于JavaScript的一些基础语法知识
Web前端——Javascript学习（API）
zxy9602的博客
04-24 1157
1、API：应用程序编程接口 这是实现的，现成的对象和方法。——提高开发效率 2、数组API （1）arr to String var str=arr.toString() var str=arr.join("连接符")——自定义连接符 固定套路——1.将字符拼接为单词：arr.join("")     2.将单词拼接成句子：arr.join(" ") 问题——频繁字符串拼
Web前端----JavaScript的基础学习
软件测试的坑，让我来踩吧
07-25 407
本篇文章就是简单的写了一下JS的语法，用来对JS进行基础的学习，JS是一种编程语言，主要生成一些特效，完成用户和页面的交互，Javascript（JS）是一种脚本语言，主要用于Web。它用于增强HTML页面，通常可以嵌入HTML代码中。JavaScript是一种解释型语言。因此，它不需要编译。JavaScript以交互式和动态的方式呈现网页。这允许页面对事件做出反应，展示特殊效果，接受可变文本，验证数据。...
前端学习笔记04-JavaScript
abc_123_cba_123的博客
02-24 707
前端学习笔记04-JavaScript一、引入方式 一、引入方式 JS 有3种书写位置，分别为行内、内嵌和外部。 1.行内式 JS < input type=“button” value=“点我试试” οnclick=“alert(‘Hello World’)” /> 优缺点： 1.可以将单行或少量 JS 代码写在HTML标签的事件属性中（以 on 开头的属性），如：onclick。 2.注意单双引号的使用：在HTML中我们推荐使用双引号, JS 中我们推荐使用单引号。 3.可读性差， 在ht
前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar
04-18
前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar ...
前端JavaScript基础学习笔记案例
最新发布
08-02
个人在学习前端JavaScript时的学习笔记，内含JavaScript的中基础知识点，以及案例。里面有兼容市面上浏览器的方法 1.知识点包括：基础语法，字符串操作，object对象，DOM对象，BOM对象，offset，client，scroll对象...
前端js学习笔记+es6
07-16
### 前端JavaScript学习笔记与ES6特性详解 #### 学习背景及目标 根据提供的文件信息，本文档旨在通过李立超老师的课程为基础，深入解析JavaScript的基础知识及其ES6新特性。针对原笔记中存在的不足（如缺乏个性化...
超详细的web前端基础学习笔记
06-28
#### 超详细的web前端基础学习笔记 ##### 前端课程介绍 - **HTML**：HTML (HyperText Markup Language) 是一种标记语言，用于定义网页的结构与内容。它如同网页的骨架，为网页提供基本框架。 - **CSS**：CSS ...
Web前端JavaScript基础学习笔记
07-25
这个学习笔记是我基于B站视频Mosh的JavaScript基础篇学习记录的一些笔记和代码。 内容不多，也就作为一个大家学习的参考。 免费的笔记，如果你喜欢，请和大家分享这个资源，谢谢。 视频链接：...
前端学习之路---javascript高级
qq_40707650的博客
09-25 810
今天开始学习javascript高级了。            下一篇    前端学习之路---jquery 目标 - 理解面向对象开发思想 - 掌握 JavaScript 面向对象开发相关模式 - 掌握在 JavaScript 中使用正则表达式 JavaScript 是什么 - 解析执行：轻量级解释型的，或是 JIT 编译型的程序设计语言 - 语言特点：动态，...
前端学习 JavaScript基础
weixin_47464737的博客
05-19 888
javaScript常用的基础知识
前端基础——JavaScript入门教程
as1517的博客
04-28 703
前端基础——JavaScript入门教程
JS前端学习（一）script
八千鸟的博客
04-10 808
以后坚持每天抽出一定时间学习JS 1.延迟执行 defer 用法： <script type = "text/javascript" defer src="test1.js'></script> </head> 本例虽然把
Web前端开发笔记--JavaScript课堂笔记及练习
LUNLUNJIEJIE的博客
03-16 345
一.课堂笔记 1. JavaScript简介 JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。 JavaScript基本特点： ①是一种解释性脚本语言 ②主要用来向HTML页面添加交互行为 ③可以直接嵌入HTML页面，但写成单独的JS 文件有利于结构和行为的分离 ④跨平台特性，可以在多种平台下运行 JavaScript基本特性：①基于对象②简单性...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值