全栈学习之JavaScript基础

最新推荐文章于 2023-02-22 19:53:29 发布
最新推荐文章于 2023-02-22 19:53:29 发布
阅读量856 收藏 2
点赞数
分类专栏： 全栈学习 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47466118/article/details/122515305
版权

JavaScript基础

1、什么是JavaScript

JavaScript是当下最流行的脚本语言

2、快速入门

2.1、引入JavaScript

2.11 内部引入

<script>
        alert('hello world!');
</script>

2.12 外部引入

<!--script外部引用 必须成对出现-->
<script src="js/script.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/script.js"></script>
</head>
<body>

</body>
</html>

2.2、基本语法内容

  • 如何调试
    • F12 console控制台，编写JavaScript代码
    • F12 console控制台 console.log()
    • 逐步debug F12 source
    • application 保存web数据

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AuEtuHvu-1642249209572)(E:\FulllStack\JavaScript\FullStack\note-images\1.png)]

  • elements 查看html css文件
  • console 控制台，调试js代码
  • source 打断点
  • network 抓包
  • application 保存web数据
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本语法</title>
    <!--
    严格区分大小写
    在浏览器的控制台打印变量 console.log()
    -->
    <script>
        /*定义变量*/

        var score = 60;

        /*条件控制*/
        if(score >= 70 && score <= 80) {
            alert('70分');
        } else if (score < 70){
            alert('不合格');
        } else {
            alert('other');
        }

    </script>
</head>
<body>

</body>
</html>

2.3、 数据类型

  • 数值
  • 文本
  • 图形
  • 音频
  • 视频

变量

  • 不以数字开头
var ob

number – js中不区分整数、小数

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

字符串

'ab'
"ab"

**布尔值 **true false

逻辑运算

&& //两个都真才是真
    
   
|| //一个是真就是真
    

! // 真的话是假 假的话是真

比较运算 不使用==

=
== (类型不一样，值一样也为真)
=== (绝对等于)

须知

  • NaN 与所有的数值都不相等，包括自己

  • 只能通过isNaN(NaN)来判断是否是NaN

  • 浮点数问题

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

    结果为false，尽量避免使用浮点数比较，存在精度问题

    若用到了，用Math.abs(1/3 - (1-2/3)) < 0.000000001 来判断

null和undefined

  • null 空指针
  • undefined 为定义的

数组

一系列相同元素的集合

var arr = [1,2,3,'1a',null true	]
new Array(1,2,3,'1a',null true )
  • 如果数组下标越界，会输出undefined

对象

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

var person{
    name: sichenyong,
    age: 21,
    tags: ['handsome','boy']
}
  • 取值用object. eg：person.name

2.4、 严格检查模式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

  <script>
      /*
      *  写script时 加上 'use strict'
      * */
    //全局
    /*var i = 1;*/

    /*
    * 局部
    * */
      'use strict'
    let i = 1;
  </script>
</head>
<body>

</body>
</html>

3、数据类型

3.1、字符串

  1. 正常字符串用’'或""包括

  2. 转义字符

    \'
\n /*换行*/
\t /*一个tab的距离*/
\u4e2d /*unicode字符 \u**** */
\x41 Ascll字符

  3. 多行字符串编写

    /*tab键上面的 可以多行编写*/

        var msg = `nihao

       woshi
       hao
       ren`;

  4. 模板字符串

    /*模板字符串*/
        let name = 'sichenyong';
        let age = 19;

        let info = `你好啊, ${age}岁的${name}`;

        console.log(info)

  5. 字符串长度

    str.length

  6. 字符串的可变性

    不可变！

  7. 大小写转换

    str.toUpperCase() /*大写*/
str.toLowerCase() /*小写*/

  8. 获取指定字符的下标

    str.indexof('s'); /*获取s在str中的位置

  9. 截取字符串 substring(a,b) [a,b)

    str.substring(x) /*截取从x开始的字符串*/
str.substring(a,b) /*截取从a开始到b-1的字符串*/

3.2、数组

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

var arr = [1,2,3,4]

  1. 长度

    arr.length

    长度可变 arr.length = ?? 长度变为 ??， 若长度过小 元素就会丢失

  2. indexof 通过元素获取其所在位置

    arr.indexof(2)

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

  3. slice() 截取Array的一部分，返回一个新的数组 类似于string中的substring

  4. push，pop （尾部）

    arr.push(x); //压入数组最后端
arr.pop(); //弹出数组最后一个元素

  5. shift unshift (头部)

    arr.unshift(x); //头部插入
arr.shift(x); //头部弹出

  6. 排序

    arr.sort()

  7. 元素反转

    arr.reverse()

  8. concat(arrayname)

    str.concat([1,2]); /*并没有修改原数组，只是会返回一个新的数组*/

  9. 连接符join(x)

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

  10. 多维数组

    arr = [[1,2],[3,4],['5','6']];

console.log(arr[0][1])
2

3.3、对象

若干键值对

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

var 对象名 = {
    属性名: 属性值,
    属性名: 属性值,
    ······
    属性名: 属性值
}

var person = {
            name: "司称勇",
            age: 18,
            score: 30
        }

js中的对象是由 {}表示

  1. 对象赋值

    person.age = 21;

  2. 使用一个不存在的对象属性 不会报错

    person.haha
undefined

  3. 动态删除属性，通过delete

    delete 对象名.属性名

  4. 动态添加属性

    对象名.新的属性名 = 属性值

  5. 判断属性值是否在对象中 xxx in xxx

    person['age'] = 21;

'age' in person

out-- true

'toString' in person /**person的父类中有toString**/
out-- true

  6. 判断一个属性是否是这个对象自身拥有的 hasOwnProperty()

    person.hasOwnProperty('toString')

out-- false

3.4、流程控制

1、if判断

var age = 3;
if (age > 3) {
     alert('haha');
} else {
     alert('ku');
}

2、while循环

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

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

3、for循环

for (let i = 1; i <= age; i++) {
            console.log(age);
        }

4、数组循环 (forEach & for)

/**forEach**/
var age = [1,2,3,4,5,6,7,8,9];
        age.forEach(function (value) {
            console.log(value);
        })

/**for 循环**/
/**下标**/
for (let num in age) {
            console.log(age[num]);
        }
/**具体值**/
for (let num of age) {
            console.log(num);
        }

3.5、map set

3.51、map

var map = new Map([['Tom',99],['Jerry',100]]);

var name = map.get('Tom'); // 通过key获取value

map.set('admin',999); //设置键值对

map.delete('admin'); //删除键值对

console.log(name);

3.52、set

var set = new Set([3,1,1,1,1]); // 可以去重
console.log(set);

set.add(2); //添加一个
set.delete(1); //删除一个
set.has(3); //查询是否在set中

3.6、iterator

遍历数组

var arr = [1,2,3];
        for (let num of arr) {
            console.log(num);
        }

遍历map

var map = new Map([['Tom',99],['Jerry',100]]);
        for (let x of map) {
            console.log(x);
        }

遍历set

var set = new Set([5,6,7]);

        for (let x of set) {
            console.log(x);
        }

4、函数及面向对象

4.1、函数定义

  • typeof x – 获取x的类型

定义方式一

绝对值函数

function function_name(xxx) {
    
    return xxx;
}

执行到return代表函数结束，若没有执行return，函数执行完也会返回结果，undefined

定义方式二

var function_name = function(xxx) {
    return xxx;
}

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

调用函数

function_name(xx);

javascript可以传任意个参数，也可以不传递参数

不存在参数的时候异常处理

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

arguments

arguments是js免费赠送的关键字，是传递进来的所有参数，是一个数组

rest

ES6引入的新特性，获取除了已定义的参数之外的所有参数

以前

function aaa(a, b) {
            console.log('a = ' + a);
            console.log('b = ' + b);

            if (arguments.length>2) {
                for (let i = 2; i < arguments.length; i++) {

                }
            }
        }

现在 --固定格式(…rest)且必须放在最后面

function aaa(a, b,...rest) {
            console.log('a = ' + a);
            console.log('b = ' + b);
            console.log('rest = ' + rest);
        }

4.2、变量的作用域

在JavaScript中，var定义的变量是有作用域的

若在函数体中声明，函数体外不可用， 若非要想用，可以研究闭包

function scy() {
        var x = 1;

        x = x + 1;
    }
    x = x + 2; //Uncaught ReferenceError: x is not defined

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

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

function scy() {
        var x = 1;

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

假设内部成员函数变量和外部成员变量相同时，重名！

function scy() {
        var x = 1;

        //内部函数可以访问外面的函数的成员，反之不行
        function  scy1() {
            var x = 'a';
            console.log('内部x = ' + x); //内部x = a
        }
        scy1();
        console.log('外部x = ' + x); //外部x = z
    }

函数查找变量从自身函数开始，假设外部存在同名函数变量，则内部函数会屏蔽外部函数的变量

提升变量的作用域

function scy() {
        var x = 'x' + y;
        console.log(x); //xundefined

        var y = 'y';
    }

结果：xundefined

说明js自动提升了y的声明，但是不会赋值；

function scy() {
    	var y;
        var x = 'x' + y;
        console.log(x); //xundefined

        y = 'y';
    }

因此 在写JavaScript时，将所有变量定义都放在函数的头部，便于代码维护

全局函数

//全局变量
var 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';
        alert(x);
        //window.alert(window.x); // 默认所有全局变量都会自动绑定在window对象下
        var old_alert = window.alert;
        //old_alert(x);

        window.alert = function () {

        }
        window.alert(123); //alert失效

        window.alert = old_alert;
        window.alert(1234);

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

规范

由于我们的所有全局变量都会绑定到我们的window上，不同的js文件，使用相同的全局变量，如何能减少冲突？

var Sichenyong = {};

        Sichenyong.name = 'sichenyong';
        Sichenyong.add = function (a,b) {
            return a + b;
        }

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

局部作用域 let

//var
function aaa() {
            for (var i = 0; i < 100; i++) {
                console.log(i)
            }
            console.log(i + 1); //101, i出了作用域还能用
        }

        aaa();

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

        aaa();

常量const

在ES6之前怎么定义常量？ 全部用大写字母定义的变量就是常量

var PI = '3.14';
console.log(PI);
PI = 'aaa';
console.log(PI); //可以改的

ES6

const PI = '3.14';
console.log(PI);
PI = 'aaa'; //这里会报错
console.log(PI); //Uncaught TypeError: Assignment to constant variable.

4.3、方法

定义方法

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

var person = {
        name : '司称勇',
        birth: 2001,
        //方法
        age: function () {
            let now = new Date().getFullYear();
            return now - this.birth;
        }
    }

拆开看

function getAge() {
        let now = new Date().getFullYear();
        return now - this.birth;
    }

    var person = {
        name : '司称勇',
        birth: 2001,
        //方法
        age: getAge
    }
    
    
    /*
    结果
    person.age() -- 21
    getAge() -- NaN
    */

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

apply

在js中可以控制this的指向

getAge.apply(person,[]); //this 指向person这个对象，参数为空

/*
 结果
 21
*/

4.4、箭头函数 闭包

4.5、创建对象

4.6、class继承

4.7、原型链继承

5、常用对象

标准对象

typeof 123
'number'
typeof 'a'
'string'
typeof NaN
'number'
typeof false
'boolean'
typeof []
'object'
typeof {}
'object'
typeof Math.abs
'function'

5.1、Date

基本使用

var date = new Date();
console.log(date); //Fri Jan 14 2022 10:38:48 GMT+0800 (中国标准时间)
date.getFullYear(); //年
date.getMonth();//月 老外是0~11
date.getDate(); //日
date.getDay(); //周几
date.getHours(); //时
date.getMinutes(); //分
date.getSeconds(); //秒
date.getMilliseconds(); //毫秒

date.getTime(); //时间戳 全世界统一 从1970-1-1 00:00 到现在的毫秒数

转换

date.toLocaleString(); // 转换成本地时间 '2022/1/14 上午10:43:13'

date.toGMTString(); // 转换为标准时间 'Fri, 14 Jan 2022 02:47:23 GMT'

5.2、JSON(重点)

json是什么？

  • JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。
  • 它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。
  • 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
  • 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

在JavaScript中一切都是对象、任何js支持的类型都可以用json表示

格式

  • 对象、map都用{}
  • 数组、list都用[]
  • 所有的键值对都用 key:value的格式

JSON字符串和js对象之间的转换

var user = {
        name: 'sichenyong',
        age: 21,
        qq: 482722982,
        sex: '男'
    } //{name: 'sichenyong', age: 21, qq: 482722982, sex: '男'}

    //对象转化为json字符串
    var  json_user = JSON.stringify(user); //{"name":"sichenyong","age":21,"qq":482722982,"sex":"男"}

    //json字符串转化为对象 参数为字符串
    JSON.parse('{"name":"sichenyong","age":21,"qq":482722982,"sex":"男"}'); //{name: 'sichenyong', age: 21, qq: 482722982, sex: '男'}

JSON 和JS的区别

var obj = {a : 'a', b : 'b'};

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

5.3、Ajax

  • 原生的js写法 xhr异步请求
  • jquery封装好的方法 $.ajax() $("#name").ajax("")
  • axios请求

6、面向对象编程

6.1、什么是面向对象

JavaScript java c++ c# …都是面向对象； 但是JavaScript有一些区别

  • 类：模板
  • 对象：具体实例

在JavaScript中，需要换一下思维方式

原型：父类

var user = {
        name: 'sichenyong',
        age: 21,
        qq: 482722982,
        sex: '男',
        run: function () {
            console.log(this.name + 'run');
        }
    } 

    var xiaoming = {
        name: '小明'
    }
    //小明的原型是user
    xiaoming._proto_ = user;

    var bird = {
        fly: function () {
            console.log(this.name + 'fly');
        }
    }
    //小明的原型是bird
    xiaoming._proto_ = bird;

class继承

class是在es6引入的

es6之前

function student(name) {
        this.name = name;
    }

    //给student新增一个方法 不建议使用

    student.prototype.hello = function () {
        alert('hello');
    }

es6之后

定义一个类，属性，方法

class student{
      constructor(name) {
          this.name = name;
      }

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

继承

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

        xiao() {
            alert('我是一个小学生');
        }
    }
var xiaoxuesheng = new xiaoStudent('xiaohuang',90);

实际上还是原型，但是对我们java人很友好

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cD63GG91-1642249209575)(E:\FulllStack\JavaScript\FullStack\note-images\2.png)]

原型链

_proto_

7、操作Dom对象(重点)

Dom 文档对象模型

核心

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

  • 更新Dom节点
  • 遍历Dom节点 得到Dom节点
    • 通过id得到
    • …
  • 删除Dom节点
  • 添加一个新的Dom节点

要操作Dom节点就必须要先获取Dom节点

7.1、获取Dom节点

获取Dom节点

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

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BeXFuo6T-1642249209576)(E:\FulllStack\JavaScript\FullStack\note-images\3.png)]

以上是原生代码，以后我们尽量使用jQuery

7.2、更新Dom节点

操作文本

  • box.innerText = ‘123’;//修改文本内容
  • box.innerHTML = ‘456’; //插入一段超文本标签

操作CSS

  • box.style.color = ‘skyblue’; //添加css样式 属性用字符串，’-'用驼峰命名替换(font-size -->fontSize)
<div id="box">

</div>

<script>
   var box = document.getElementById('box');

   box.innerText = '123';//修改文本内容
   box.innerHTML = '<strong>456</strong>'; //插入一段超文本标签
</script>

7.3、删除Dom节点

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

<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);
    
    //删除是一个动态过程 所以下面代码会报错，再删除0之后，p1是第0个，p2是第1个，所以下面的father.removeChild(father.children[2]); 会报错
    father.removeChild(father.children[0]);
    father.removeChild(father.children[1]);
    father.removeChild(father.children[2]);
</script>

father.removeChild(p1)

注意：删除多个节点的时候，children是在时刻变化的，删除节点的时候一定要注意

7.4、插入Dom节点

我们获得了某个Dom节点，假设这个Dom节点是空的，我们通过innerHTML就能增加一个元素，若这个Dom节点已经存在元素，则会覆盖掉

移动已有的标签

<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 js,list;
    js = document.getElementById('js');
    list = document.getElementById('list');
</script>

list.appendChild(js);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xfammnpl-1642249209577)(E:\FulllStack\JavaScript\FullStack\note-images\4.png)]

追加成功

创建一个新的标签

<script>
    var js,list,new_node,new_script, new_css, head;
    js = document.getElementById('js');
    list = document.getElementById('list');

    //创建节点
    new_node = document.createElement('p'); //创建一个P标签
    new_node.id = 'new_node'; //给P标签赋一个ID值  等价于new_node.setAttribute('id','new_node');
    new_node.innerText = 'Hello, JavaScript';
    list.appendChild(new_node);

    //创建一个script标签
    new_script = document.createElement('script');
    new_script.setAttribute('type','text/javascript');

    //插入css样式
    new_css = document.createElement('link');
    new_css.setAttribute('href','css/style.css');
    new_css.setAttribute('rel','stylesheet');
    head = document.getElementsByTagName('head');
    head[0].appendChild(new_css);

</script>

在某个标签前插入一个元素

<script>
    var ee,js;
    ee = document.getElementById('ee');
    js = document.getElementById('js');
    list = document.getElementById('list');
    list.insertBefore(js,ee); //在list容器的ee前插入一个js节点

</script>

替换某一个元素

<script>
    var ee,js;
    ee = document.getElementById('ee');
    js = document.getElementById('js');
    list = document.getElementById('list');
    list.replaceChild(js,ee); //用js替换list中的ee

</script>

8、操作BOM对象

BOM:浏览器对象模型

浏览器介绍

JavaScript的诞生就是为了在浏览器中运行！

内核：

  • IE
  • Chrome
  • Safari
  • Firefox (Linux下默认的)
  • Opera

第三方

  • QQ浏览器
  • 360浏览器
  • …

8.1、window

window

window 代表浏览器窗口

window.alert(1)

window.innerHeight //当前显示的页面 可变
722
window.innerWidth
1002
window.outerHeight //绝对的 不管怎么变最后都一样
824
window.outerWidth
1536

8.2、Navigator

Navigator（不建议使用）

Navigator封装了浏览器信息

navigator.appName 
'Netscape'
navigator.appVersion //版本
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.71 Safari/537.36'
navigator.userAgent //使用者
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.71 Safari/537.36'
navigator.platform //电脑版本
'Win32'

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

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

8.3、screen

screen

代表屏幕尺寸

screen.height //屏幕宽度
864
screen.width //屏幕长度
1536

8.4、location

localtion（重要）

localtion 代表当前页面的URL信息

host: "cn.bing.com" //主机
href: "https://cn.bing.com/" //跳转链接
protocol: "https:" //协议
reload: ƒ reload() //刷新网页

//设置新的地址
location.assign('https://www.csdn.net/')

8.5、document

document (内容DOM)

document 代表当前的页面， html dom文档树，可以获取网页的cookie

document.title
'必应'
document.title = '刘庄'
'刘庄'
document.title
'刘庄'

获取具体的文档树节点

<dl id="app">
    <dt>全栈学习</dt>
    <dl>Java</dl>
    <dl>JavaSE</dl>
</dl>

<script>
   var dl = document.getElementById(app);
</script>

可以获取网页cookie(客户端的本地信息)

document.cookie
'MUID=0CAF9CB89B9061622FBF8C669AD36001; SRCHD=AF=NOFORM; SRCHUID=V=2&GUID=21F15A1117E94CB38AF9A92F55D49AAE&dmnchg=1; ANON=A=94F653CD0B4696EDEEC32A6DFFFFFFFF&E=1a24&W=1; NAP=V=1.9&E=19ca&C=pVI-0iavLB-q_tfeAOHQ5GInwzLcbMI1CUGlsOq8-TXdXgG1nPJPkA&W=1; PPLState=1; HPHOL=0; _tarLang=default=zh-Hans; _TTSS_OUT=hist=WyJlbiIsInpoLUhhbnMiXQ==; _U=1xzJL1ag0pYejpVDhdsDvRYaKmD6AiaH3w9uWxhM99A2aI3yrg0eqmV4B_OUKeugqPBd7jG6dmIi1K6C3VLsU65r4FY_7gorCP2CMQ889lvwyfCS8udb9RhjKF5kpcJHj_Qxt-bD6vdb1hzWLKHC2uttn301Gwz_AXMYmOapSGCapvP0UQp5kmE4kzKl09RqVc1ktXZXV9RjVYl5lr7CyCg; ABDEF=V=13&ABDV=11&MRNB=1641730713228&MRB=0; HOOKBLOCKINDICATOR=TRUE; WLS=C=e040a726612862c7&N=%e7%a7%b0%e5%8b%87; _SS=SID=0ABDE9BB7F6C679D03B9F8977E426649; SRCHUSR=DOB=20211028&T=1642157551000&TPC=1642150315000&POEX=W; ipv6=hit=1642161151892&t=4; SRCHHPGUSR=SRCHLANG=zh-Hans&BRW=HTP&BRH=M&CW=1002&CH=722&SW=1536&SH=864&DPR=1.25&UTC=480&DM=0&HV=1642158316&BZA=0&WTS=63776776086; _HPVN=CS=eyJQbiI6eyJDbiI6NTcsIlN0IjoyLCJRcyI6MCwiUHJvZCI6IlAifSwiU2MiOnsiQ24iOjU3LCJTdCI6MCwiUXMiOjAsIlByb2QiOiJIIn0sIlF6Ijp7IkNuIjo1NywiU3QiOjEsIlFzIjowLCJQcm9kIjoiVCJ9LCJBcCI6dHJ1ZSwiTXV0ZSI6dHJ1ZSwiTGFkIjoiMjAyMi0wMS0xNFQwMDowMDowMFoiLCJJb3RkIjowLCJHd2IiOjAsIkRmdCI6bnVsbCwiTXZzIjowLCJGbHQiOjAsIkltcCI6MTA2Nn0='

劫持cookie

www.taobao.com

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

服务器端可以设置cookie：httpOnly

8.6、history

history (不建议使用)

代表浏览器的历史记录

history.back() //后退一个网页
history.forward() //前进一个网页

9、操作表单(验证)

表单是什么？ form Dom树中的一个节点

  • 文本框 type = “text”
  • 下拉框
  • 单选框
  • 多选框
  • 隐藏域 type = “hidden”
  • 密码框 type = “password”
  • …

表单的目的：提交信息

<body>

<form action="#" method="post">
    <p>
        <span>用户名:</span> <input type="text" placeholder="请输入用户名" required id="username"/>
    </p>

    <!--无论是单选框，还是多选框，获取的都是定义好的value值
        对于单选框、多选框，应该用select获取选中的值
    -->
    <p>
        <span>性别:</span>
        <input type="radio" name="gender" value="1">男
        <input type="radio" name="gender" value="0">女
    </p>

</form>

<script>
    var username,gender;
    username = document.getElementById('username'); //得到输入框的值
    gender = document.getElementsByName('gender'); //得到单选框中的值
    console.log(gender[0].value); //打印男生的value
    username.value = '123'; //修改输入框中的值

    console.log(gender[0].checked); //查看当前是否被选中

</script>
</body>

提交表单 md5加密，表单优化

md5工具类 可以在 猫云上找最新版本

<script src="https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.19.0/js/md5.js"></script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>

<!--
    input 用name属性 才能在前端查看值
    表单也可以绑定提交事件 onsubmit=" return aaa()
    onsubmit接受最后结果 true的话跳转到action false的话不跳转
-->
<form action="#" method="post" onsubmit="return aaa()">
  <p>
    <span>用户名:</span> <input type="text" placeholder="请输入用户名" required id="username" name="username"/>
  </p>

    <!--<p>
        <span>密码:</span> <input type="password" placeholder="请输入密码" required id="password" name="password"/>
    </p>-->

    <p>
        <span>密码:</span> <input type="password" placeholder="请输入密码" required id="input-password"/>
    </p>

    <input type="hidden" id="md5-password" name="password">

    <!--在button上绑定事件 onclick-->
    <!--<button type="submit" onclick="aaa()">提交</button>-->
    <button type="submit">提交</button>
</form>

<script>
    function aaa() {
        alert(1);
        var username,password, md5password;
        username = document.getElementById('username').value;
        password = document.getElementById('input-password').value;
        md5password = document.getElementById('md5-password');


        //在这里可以加密密码，别人在网页看不到你的真实密码
        // MD5算法
        //md5password.value= md5(password);
        //console.log(md5password.value);
        //password = md5password.value; 用于显示很长的········
        console.log(password);

        return true;
    }
</script>
</body>
</html>

10、jQuery

JavaScript和jQuery的关系

  • jQuery是一个库，里面存在大量的JavaScript函数

10.1 jQuery引入

获取jQuery

  • 第一种下载到本地，然后引入

    1. jQuery官网以及jQuery中文api文档

    2. 下载jQuery要下载已编译的，如jquery-xxx.min.js，右击–>链接另存为

  • 第二种从cdn引入

    1. 打开猫云
    2. 搜索jquery
    3. 复制代码

成果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--本地引入-->
    <script src="lib/jquery-3.6.0.min.js"></script>
    <!--CDN引入-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>

</body>
</html>

10.2、jQuery公式

公式

  • 公式： $(selector).action()
    • selector代表的是选择器(css的选择器)
    • action代表的是事件

实例

<body>

<a href="" id="jquery-test">点我</a>


<script>
    $("#jquery-test").click(function () {
        alert('hello')
    })
</script>

</body>

10.3、jQuery选择器

<script>

    /*
    原生的
    标签选择器
    document.getElementsByTagName('');
    类选择器
    document.getElementsByClassName('');
    id选择器
    document.getElementById('');
    */

    //jquery的选择器  css中的选择器都能用
    $('p').click() //标签选择器 此时选中p标签
    $('#id').click() //id选择器 此时选中id名为id的标签
    $('.p2').click() // 类选择器 此时选中了类名为p2的标签

</script>

10.4、事件

事件分类

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

鼠标事件

<button id="test">点我试试</button>

<script>
    
    $('#test').mousexxx
    
</script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HrWmUZyp-1642249209578)(E:\FulllStack\JavaScript\FullStack\note-images\5.png)]

mouseover – 鼠标离开

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.6.0.min.js"></script>

    <style>
        #divMove{
            width: 500px;
            height: 500px;
            border: 1px solid blue;
        }
    </style>
</head>
<body>

<!--获取鼠标的当前坐标-->

mouse: <span id="mouseMove"></span>
<div id="divMove">
在这里移动鼠标试试
</div>

<script>
    //当网页元素加载完毕之后，响应事件
    /*js原生
    $(document).ready(function () {

    })
    */

    //jquery
    $(function () {
        $('#divMove').mousemove(function (e) {
            $('#mouseMove').text('x:' + e.pageX + 'y: ' + e.pageY);
        })
    })
</script>

</body>
</html>

10.5、操作Dom元素

  • 节点文本操作
 $('#test-ul li[name = python]').text() //获得值
'Python'
 $('#test-ul li[name = python]').text(123) //设置值
 $('#test-ul li[name = python]').text()
'123'

$('#test-ul').html() //获得值
$('#test-ul').html(<strong>147</strong>) //设置值
  • css
$('#test-ul li[name = python]').css("color","red"); //单个属性
$('#test-ul li[name = python]').css({ "color": "#ff0011", "background": "blue" }); //多个属性用{}
  • 元素的显示和隐藏
 $('#test-ul li[name = python]').hide(); //隐藏元素 本质和display:none相同
 $('#test-ul li[name = python]').show(); //显示元素
  • 娱乐
$(window).width()
963
$(window).height()
666

多看看api中文文档

  • ajax
问剑白玉京
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
JavaScript基础学习笔记
10-25
JavaScript 基础学习笔记 本资源摘要信息基于黑马视频记录的学习笔记，涵盖了 JavaScript 基础知识点，包括 HTML、CSS、JavaScript、DOM、事件处理等内容。 HTML 和 CSS 基础 * HTML 结构：head、body、title、...
【基础语法】JavaScript 全栈体系（一）
柠檬小帽的博客 - 计算机全栈体系
02-14 394
JavaScript 介绍
全栈必备 JavaScript基础
我相信......
04-05 1万+
1995年，诞生了JavaScript语言，那一年，我刚刚从大学毕业。从浏览器到服务器，乃至IoT，JavaScript 都扮演着重要的角色，前端框架更是日新月异，而真正有助于我们理解的，是那些相对不变的东西。
Node.js 全栈基础
m0_51281306的博客
04-07 565
1. Node.js 光速入门 1.1 Node.js 概述 1. Node.js 是什么 Node.js 不是一门编程语言，它是一个执行 JavaScript 代码的工具。工具是指可以安装在计算机操 作系统之上的软件。 2. 为什么浏览器和 Node.js 都可以运行 JavaScript 因为浏览器和 Node.js 都内置了 JavaScript V8 Engine。 它可以将 JavaScript 代码编译为计算机能够识别的机器码。 3. 浏览器中运行的 J.
【基础语法】JavaScript 全栈体系（四）
柠檬小帽的博客 - 计算机全栈体系
02-22 1368
类型转换 实战案例 - 用户订单信息
JavaScript 教程 （详细 全面）
热门推荐
梁辰兴的博客
10-31 7万+
JavaScript（简称“JS”）是当前最流行、应用最广泛的客户端脚本语言，用来在网页中添加一些动态效果与交互功能，在 Web 开发领域有着举足轻重的地位。HTML 用来定义网页的内容，例如标题、正文、图像等；CSS 用来控制网页的外观，例如颜色、字体、背景等；JavaScript 用来实时更新网页中的内容，例如从服务器获取数据并更新到网页中，修改某些标签的样式或其中的内容等，可以让网页更加生动。JavaScript 诞生于 1995 年，几乎是和互联网同时出现；
JavaScript全栈教程 (廖雪峰) 完整版PDF
03-20
JavaScript是世界上最流行的脚本语言，因为你在电脑、手机、平板上浏览的所有的...《JavaScript全栈教程》是小白的零基础JavaScript全栈教程。从基础入门在讲到node使用实践，感兴趣的可以下载学习，离线文件非常方面。
javascript_fullstack:javascript全栈学习
03-27
总之，JavaScript全栈学习涵盖了从基础的HTML/CSS/JavaScript到高级的TypeScript、Node.js、Express.js和MongoDB等多个领域。掌握这些技能不仅可以让你构建完整的Web应用，还能提升开发效率和代码质量。不断学习和...
JavaScript 全栈教程.chm
02-19
通过学习廖雪峰的JavaScript全栈教程，开发者不仅可以掌握JavaScript的基础知识，还能进一步了解如何利用JavaScript进行全栈开发，包括前端交互、后端服务以及数据库操作，从而成为一名全能的开发者。
lesson_bm:js全栈学习
03-21
综上所述，“lesson_bm:js全栈学习”涵盖了JavaScript基础、前端框架、后端开发、数据库操作、版本控制、构建工具、测试策略以及部署实践等多个方面。通过系统学习和实践，你可以成为一名全能的JavaScript开发者，...
Javascript全栈教程
01-02
https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000 离线pdf版
JavaScript 全栈教程[廖雪峰 ].CHM
03-17
JavaScript 全栈教程[廖雪峰 ].CHM
廖雪峰建站教程系列之javascript全栈教程
12-20
廖雪峰建站教程系列之javascript全栈教程，通俗易懂。廖雪峰网站教程pdf：python2.7、python3、git、javascript全栈教程，一共4个包，按需下载，严禁用于商业目的，版权归廖雪峰所有。
JS全栈自学参考
Curtis’Blog
01-16 1163
近几年，前端技术飞速发展，随着HTML5、CSS3和ES6等前端基础规范的相继出台并获得多数浏览器的支持，前端的能力进一步被释放。 现代的前端技术不断和后端技术，甚至是桌面客户端技术相结合，可以说，基于JS技术栈，已经可以满足大多数系统的全栈开发了。 我们可以使用JS开发传统的PC 官网、商城和后台等系统，使用nodejs开发后端服务，也可以开发手机移动端h5应用、使用RN或weex或flut...
JavaScript全栈开发-工具篇
mapbar_front的博客
07-12 2225
2017-04-13 22:17 转载：javascript全栈开发 作者：龙付成–腾讯高级前端工程师 @IMWeb前端社区 目录Java早期主要作为脚本语言运行在浏览器，而现在Java的使用范围已经超越浏览器，向通用系统语言发展。特别是HTML5的出现，浏览器的平台化，Node.js开源项目的发展，NoSQL技术的发展，Java逐渐成为跨移动平台应用程序及跨平台桌面应用程序的开发语言。
你决不可错过的JavaScript全栈教程
廖雪峰的Blog
07-21 1万+
这是小白的零基础JavaScript全栈教程，具有如下特点： 是JavaScript全栈教程！ 可以在线免费学习！ 可以在线编写JavaScript代码并直接运行！ 不要再犹豫了，立刻从现在开始，零基础迈向全栈开发工程师！
javascript 全栈_什么是JavaScript？ 全栈编程语言
cxu0262的博客
07-01 669
javascript 全栈 JavaScript是一种流行的解释性脚本语言，在2019年初成为开发人员最常学习的语言 。 JavaScript是一种开放标准，不受任何单一供应商的控制，具有多种实现方式和易于学习的语法，使其在初学者和资深开发人员中同样受欢迎。 JavaScript可以追溯到Internet最早的日子。 该语言最初是作为向网页添加轻量级客户端功能的一种方式而推出的，如今已广泛用...
从零开始开发一个全栈Web应用实录
晨阳再升的博客
07-07 1万+
虽说学习了大半年前端，但是对前端的理解仍然停留在对HTML,CSS,JS,JQuery的概念理解上，并且没有接触过相关的后端开发，所以说，这个项目也可称为从零开始，是新手向的文章，不要害怕有门槛哈。项目耗时15天时间，100小时的工作量，13370行代码，内容是本校的学生选课系统。地址如下：http://115.159.6.187/ （偷懒没做手机端优化，推荐电脑访问嘿嘿） 前言做这个项目的原因呢
全栈 JavaScript
wolaikanyanhau的博客
05-22 1281
JavaScript 无处不在 ------------------------------ 在以前，JavaScript程序员就是前端开发者的同义词，永远与浏览器绑在一起。 但那已是昨日往事。Node.js的崛起开启了一个新纪元，从此，JavaScript 程序员可能不再是被局限于浏览器的前端开发者了。 相比其他高级程序语言，作为一名 Java
Python全栈学习知识
最新发布
04-09
Python全栈开发是指使用Python语言进行前后端开发的技术栈。它包括了前端开发、后端开发以及数据库等多个方面的知识。以下是Python全栈学习的主要内容： 1. 前端开发： - HTML/CSS：学习使用HTML和CSS构建网页的基本结构和样式。 - JavaScript：学习使用JavaScript实现网页的交互和动态效果。 - 前端框架：学习使用流行的前端框架，如React、Vue等，来提高开发效率和用户体验。 2. 后端开发： - Python基础：学习Python语言的基本语法、数据类型、控制流等。 - Web框架：学习使用Python的Web框架，如Django、Flask等，来搭建后端服务器。 - 数据库：学习使用数据库，如MySQL、MongoDB等，进行数据的存储和管理。 - RESTful API：学习设计和实现RESTful API，用于前后端之间的数据交互。 3. 其他技术： - 版本控制：学习使用Git等版本控制工具管理代码。 - Linux基础：学习Linux系统的基本命令和操作，用于部署和管理服务器。 - 容器化技术：学习使用Docker等容器化技术，实现应用的快速部署和扩展。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值