JavaScript学习笔记 !

最新推荐文章于 2024-08-25 09:57:22 发布
最新推荐文章于 2024-08-25 09:57:22 发布
阅读量512 收藏 1
点赞数 1
分类专栏： 前端学习 文章标签： javascript java 经验分享
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51276056/article/details/115444508
版权

JavaScript学习笔记 !

观看狂神说Java JavaScript最新教程通俗易懂学习笔记!

1.聊聊JavaScript

  • 先看百度解释:

JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。

所以:JavaScript是一门世界上最流行的脚本语言!

只用了十天就开发完成!(大牛啊!)

合格的后端,必须精通JavaScript!!!

  • 历史

    自己查百度不香吗?

    https://baike.baidu.com/item/JavaScript/321142?fr=aladdin

    ECMAScript它可以理解为是一个Javascript的一个标准
    最新版本已经到ES6版本但是大部分浏览器只停留在支持ES5代码上！
    wenpack：解决开发环境—线上环境，版本不一致

2. JavaScript入门

2.1 引入JavaScript

  1. 内部标签引入

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <!--script标签引入，写Javascript代码-->
    <script>
        alert("hello world!")
    </script>
</head>
<body>
<!--这里也可以存放-->
</body>
</html>

  2. 外部引入

      <!--外部映入，注意：script标签必须成对出现-->
    <script src="js/day.js"></script>

    <!--不用显示定义type，也默认就是-->
    <script type="text/javascript"></script>

    写一个js文件

    alert('我爱你!');

2.2 基本语法入门

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>学习js基本语法</title>
<!--Javascript严格区分大小写-->
 <script>
     // 1.定义变量 变量类型 变量名 变量值
     var a = "lianghongrong";
     var num = 0;
     alert(a);
     // 2.条件控制
     if(num>60&&num<100){
         alert("good");
     }else{
         alert("come on")
     }
     //console.log(num)在浏览器控制台打印变量

     /*
     * 多行注释
     * */

 </script>
</head>
<body>

</body>
</html>

浏览器必备调试技能:
在这里插入图片描述

2.3 基本数据类型

数值 文本 图形 音频 视频

js不区分小数和整数问题,类型全部为Number

  1. number

    321	//整数
321.1	//浮点
1.321e3	//科学计数法
-99	//复数
NaN	//不是一个数
Infinity//无限大

  2. 字符串

    可以用单引号,也可以用双引号!

  • ‘dddd’
    • “dddd”

  1. 布尔值

    和java一样,用true或false表示结果.

  2. 逻辑运算符

    &&	//与:两个都为真，结果为真
||	//或:一个为真，结果为真
！	//非:真即假，假即真

  3. 比较运算符 ! ! ! ! !

    =	//赋值
==	//等于（类型不一样，也会判断为true）
===	//绝对等于（类型一样，值一样，结果为true）

有缺陷,坚持不要使用==比较运算符号就OK

  1. 注意

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

  1. 浮点数问题

    console.log((1/3)===1-2/3);//false
//尽量避免使用浮点数进行运算，存在精度问题
console.log(Math.abs(1/3-(1-2/3))<0.00000001);//true

  2. null和undefined

    • null 空的
    • undefined 未定义的

  3. 数组

       <script>
 //java的数组数据类型必须一样,但js可以不一样
        //为保证代码可读性,建议使用[]
        var arr = [5,2,0,'z','x',"w",true];

        new Arry(5,2,0,'z','x',"w",true);
        //如果数组越界,会返回undefined
        console.log(arr[8])//undefined
        </script>

  4. 对象

    对象是大括号,数组是中括号!

    每个属性后面用逗号隔开,最后一个不用添加

    //Person person = new Person(1,2,3,4,5);
var person = {
    name: "shuaige",
    age: 18,
    tages: ['Java','Javascript']
}

    取对象的值:

    类名.属性

    person.name

2.4 严格检查模式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
        前提：IDEA 需要设置支持ES6语法
        'use strict';
        严格检查模式，预防Javascript随意性导致一些问题
    -->
    <script>
        //放在第一行才有用
        'use strict';
        //默认全局变量
        i = 1;
    </script>
</head>
<body>
</body>
</html>

前提:(现在都6+了!)(震惊)

在这里插入图片描述

3. 数据类型详解

3.1 字符串

  1. 正常字符串使用单引号或双引号包裹

  2. 转义字符(也要用引号包起来)

    \'
\n
\t
\u4e2d	Unicode字符
\x41	Ascll字符

  3. 多行字符串编写用``

    //tab键上面，esc键下面
var msg = 
    `你是谁
     你在干什么? `

  4. 模板字符串

    let name = '大帅哥';
let age = 18;
let msg = `你好啊,${name},${age}`;
console.log(msg)//你好啊，大帅哥,18

  5. 字符串长度:str.length

  6. 字符串可变性:不可变

  7. 字符串的几个方法

    //注意：这里是方法，不是属性
var student = "student";
'student'.toUpperCase();//转大写
'student'.toLowerCase();//转小写
'student'.indexOf('t');//第一个元素值
//从第一个截取到最后一个
[)
'student'.substring(1);//"tudent"
//截取指定位置
'student'.substring(1,3);//tu

3.2 数组

掌握如何向数组里面存数据和取数据!

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

var arr = [1,2,3,"good",true,'ddd'];
arr[0]//取值
arr[1] = 1//赋值

  1. 长度:.length

    加入给arr.length赋值，数组大小就会发生变化，如果赋值过小，元素会丢失

  2. indexOf:通过元素下标索引获得值

    字符串的"1"和数字1是不同的

    var arr = [1,"1","2"];
arr.indexOf(1)//返回0
arr.indexOf("1")//返回2

  3. slice():截取数组的一部分,返回一个新的数组类似String中的substring

  4. 尾部:push(xx);把元素压到尾部

    ​ pop();弹出尾部一个元素

    头部:unshift();把元素压到头部

    ​ shifu();弹出头部一个元素

  5. 排序: sort()

    var arr = ['B','A','C']
arr.sort()
['A','B','C']

  6. 元素反转:reverse()

    var arr = ['A','B','C']
arr.reverse();
['C','B','A']

  7. 合并数组:concat()

    var arr = ['A','B','C']
arr.concat([1,2,3]);//返回新数组
['A','B','C',1,2,3]

    没有修改原来的数组,拼接后返回一个新的数组

  8. 连接符 join() 打印拼接数组,使用特定的字符串拼接

    var arr = ['A','B','C']
arr.join('-');
'A-B-C'

  9. 多维数组

    arr= [[1,1],[2,2],[3,3]];
arr[1][1]
2

3.3 对象

若干个键值对

JavaScript中的对象,{…}表示一个对象,键值对描述属性xxx xxx,多个属性之间用逗号隔开,最后一个加逗号

JavaScript中所有键都是字符串,值是任意对象!

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

var person = {
    name: 'hongge',
    age: 19,
    email: '1932896399@qq.com',
    score: 100
}

  1. 对象赋值 对象名.属性 = ‘xxx’

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

  3. 动态的添加和删减属性,通过delete删除对象属性

    //动态添加，直接给新的属性添加值即可
person.haha = 'haha';
//动态的删减属性，通过delete删除对象属性
delete person.name

  4. 判断属性值是否在这个对象中 xxx in xxx

    'age' in person
true
//继承
'toString' in person
true

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

person.hasOwnProperty('toString')
false
person.hasOwnProperty('age')
true

3.4 流程控制

  • if判断

    var age = 18;
if(age>18){
    alert(成年人);
}else{
    alert(未成年人);
}

  • while和do while 循环

    while(age < 18){
    age = age + 1;
    console.log(age);
}
//避免死循环
do{
    age = age + 1;
    console.log(age);
}while(age>18)

  • for循环和forEach循环

    for(let i = 0;i < 100; i++){
    console.log(i);
}
//forEach循环
var age = [1,3,7,5,10,21,2,9,8]
age.forEach(function (value) {
    console.log(value);
})

  • for in 循环

    //for(var index in object){}
for(var numin age){
    if(age.hasOwn Property(num)){
        console.log("yes");
        console.log(age[index]);
    }
}

3.5 Map和Set

  1. Map

    //学成的成绩，学生的名字
var names = ['liang','zhang','luo'];
var scores = [100,90,80];
//用Map集合更加简便
var map = new Map([['liang',100],['zhang',90],['luo',80]])
var name = map.get('liang');
console.log(name);//通过键获取值
map.set('admin',123456);//新增元素
console.log(map);
map.delete('tom');//删除元素
console.log(map);

  2. Set:无序不重复集合(重复元素会去重)

    var set = new Set([2,1,1,1,1,3]);
set.add(5);//添加
set.delete(1);//删除
console.log(set.has(3));//是否包含某个元素

3.6 迭代器

使用iterator遍历迭代Map和Set集合

  • 遍历数组

    //通过for of / for in 下标
var arr = [3,4,5];
for(let x of arr){
    console.log(x)
}
//存在一个早期的漏洞
arr.name = "123";
for(let x in arr){
    console.log(x)
}

  • 遍历map

     //遍历map
for(let x of map){
    console.log(x);
}

  • 遍历set

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

4. 函数

4.1 定义函数

  • 定义方式一

    //function 函数名(返回参数类型){}
function abs(x){
   if(x>0){
       return x;
   } 
}

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

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

  • 定义方式二
    function(x){…},这是一个匿名函数，但是赋值给abs。所以通过abs可以调用

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

  • 调用函数

    直接函数名(参数);==>abs(10);

    1. 参数问题：JavaScript可以传任意个参数，也可以不传递参数。

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

arguments:代表传进来所有参数,是一个数组!

var abs = function (x) {
    //参数个数
    console.log(arguments.length);
    //可以手动抛出异常   
    if (typeof x !=='number'){
        throw 'Not a Number';
    } 
    return x;
}

有时候我们相用多余的参来进行附加操作,需要排除已有参数!

rest:获得除了已经定义的参数!

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

// rest参数只能写在最后面，必须用…标识
function arg(a,b,...rest) {
    console.log(a);
    console.log(b);
    console.log(rest);
}
//arg(1,2,3,4)
//a=>1
//b=>2
//[]

4.2 变量的作用域

  1. 在函数体中声明的变量,不能在函数外部使用,如果想要实现,可以研究一下闭包!
function abc() {
    var x= 1;
    x = x + 1;
}
x = x + 2 ;//不能使用函数里面的变量,会报错
  1. 如果两个函数使用相同变量名，只要在函数内部，就不冲突
function args1() {
    var x= 1;
    x = x + 1;
}

function args2() {
    var x= 2;
    x = x + 1;
}
  1. 内部函数可以访问外部函数成员,相反则不行
function args3() {
     var x= 1;
  //内部函数可以询问外部函数的成员，反之则不行
     function args3() {
        var y = x + 1;//2
    }
    var z = y + 1;//报错
}

  1. 假设内部外部成员变量重名

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

提升变量作用域

function args4() {
    var x = 'x' + y;
    console.log(x);
    var y = 'y';
}//结果 undefined

说明:js执行引擎会自动提升y的声明,但不会提升y的赋值,所以一般变量的声明全都提升到函数体开头声明!

养成规范,便于代码的维护!

function args5(){
    var x = 1,
        y = x + 1,
        z,i,a;//undefined
}

全局变量

//全局变量
 var x = 1;
function f(){
    console.log(x);
}
f();
console.log(x);

全局对象:windown

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

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

var x = 'xxx';
window.alert(x);
var old_alert = window.alert;
old_alert(x);

//将一个函数赋值给windown
window.alert = function () {
};

//发现alert()失效了
window.alert(123);

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

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

规范

由于我们所有的全局变量都会绑定到我们的window上。如果不同的js文件，使用了相同的全局变量，就会产生冲突

如何能够减少冲突？

解决办法:定义一个唯一的全局变量,把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突的问题。（jQuery)

//唯一全局变量
var LiangApp= {};

//定义全局变量
LiangApp.name = 'lianghongrong';
LiangApp.add = function (a,b) {
    return a + b;
}

局部作用域 let

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

解决办法:

ES6 let关键字,解决局部作用域冲突问题!建议大家都用let定义局部作用域

function abc(){
    for(let i = 0; i < 100 ;i++){
        console.log(i);
    }
    console.log(i+1);
    //这样可以解决问题
}

常量

以前怎么定义?

只有用全部大写字母命名的变量就是常量：建议不要修改这样的值。

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

ES6之后:

常量关键字:const

const PI = '3.14';//只读效果
console.log(PI);
PI = '123';
//会报错
console.log(PI);

4.3 方法

定义方法（方法就是把函数放在对象里面，对象中只有2个东西：属性和方法

var People = {
    name: 'Sam',
    bitrh: 2020,
    //方法
    age: function () {
        var now = new Date().getFullYear();
        return now-this.bitrh;
    }
}
//属性
People.name;
//方法，一定要带()
People.age();

/**
 *修改后,将函数提取出来
 *拆开代码看看
 */
function getAge () {
    var now = new Date().getFullYear();
    return now-this.bitrh;
}

var People = {
    name: 'Sam',
    bitrh: 2020,
    //方法
    age: getAge
}
//注意:
//People.age()    =>ok
//getAge()     =>NaN

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

apply

在js中可以控制this的指向（所有对象都有apply）

function getAge () {
    var now = new Date().getFullYear();
    return now-this.bitrh;
}
var People = {
    name: 'Tom',
    bitrh: 2020,
    age: getAge
}
var xiaohong = {
    name: '小红',
    bitrh: 2020,
    age: getAge
}
getAge.apply(People,[])
//this，People，参数为空
getAge.apply(xiaohong,[])

5. 内部对象

标准对象

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

5.1Date对象

基本使用

var now = new Date();
now.getFullYear();//年
now.getMonth();//月
now.getDate();//日
now.getDay();//星期几
now.getHours();//时
now.getMinutes();//分
now.getSeconds();//秒

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

console.log(new Date(1589096655409));//时间戳转时间

转换

//本地时间 调用是一个方式,不是一个属性
now.toLocaleString();
"2021/4/5 早上9:39:15"
//东八区
now.toGMTString();
"Sun, 10 May 2021 07:44:15 GMT"

5.2 JSON对象

早期,数据传输习惯用XML

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

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

格式:

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

JSON 字符串和 JS 对象的转换

var user = {
    name: 'Liahr',
    age: 18,
    sex: '男'
}
//对象转换json字符串:{"name":"Liahr","age":18,"sex":"男"}
var jsonuUer = JSON.stringify(user);
console.log(jsonuUer);

//json  字符串转换为对象，参数为json字符串
var obj = JSON.parse('{"name":"Liahr","age":3,"sex":"男"}');
console.log(obj);

JSON 和 JS 对象的区别：

var obj = {"name":"Liahr","age":18,"sex":"男"};
var json = '{"name":"Liahr","age":18,"sex":"男"}';

5.3 Ajax

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

6. 面向对象编程

6.1 原型

//面向对象
var Student = {
    name: 'Liahr',
    age: 3,
    run:function () {
        console.log(this.name+"run.....")
    }
}

var xiaoming = {
    name: '小明'
}
//小明的原型 是Student
xiaoming.__proto__ = Student;
xiaoming.run();

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

原来的写法:

function Student(name) {
    this.name = name;
}
//给student新增一个方法 要找到原型再给原型增方法
Student.prototype.hello = function () {
    alert('hello');
}

6.2 class继承

在ES6引入

  1. 定义一个类,属性,方法,构造器

    //定义一个类
class Student{
    //构造器
    constructor(name){
        this.name = name;
    }
//方法
    hello(){
        alert('hello');
    }
}
//实例对象
var xiaoming = new Student('小明');
var xiaoming = new Student('小红');
xiaoming.hello();

  2. 继承

    //定义一个类
class Student{
     //构造器
    constructor(name){
        this.name = name;
    }
//方法
    hello(){
        alert('hello');
    }
}
//继承
class XiaoStudent extends Student {
    constructor(name,grade){
        super(name);
        this.grade = grade;
    }
    myGrade(){
        alert('我是一名小学生');
    }
}

var xiaoming = new Student('小明');
xiaoming.hello();
var xiaohong = new XiaoStudent('小红',1);
xiaohong.myGrade();

    原型链

    __ proto __

在这里插入图片描述

7.操作BOM对象

BOM:浏览器对象模型(内核)

  • IE 6~11
  • Chrome
  • Safari
  • FireFox

第三方浏览器

7.1 window

代表浏览器窗口

window.alert(1)
undefined
window.innerHeight
316
window.innerWidth
714
window.outerHeight
704
window.outerWidth
730

7.2 Navigator

封装了浏览器信息

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

大多数时候，我们不会使用：Navigator 对象，因为会被人为修改！不建议使用这些属性判断和编写代码

7.3 screen和location

1.screen: 代表全屏幕属性

screen.width
1366
screen.height
768

2. location:代表当前页面URL信息(重要)

host: "blog.csdn.net"
hostname: "blog.csdn.net"
href: "https://blog.csdn.net/weixin_51276056"
origin: "https://blog.csdn.net"
pathname: "/weixin_51276056"
protocol: "https:"
//刷新网页
reload: ƒ reload()
//设置新的地址
location.assign('https://gitee.com/WAEM')

7.3 document和history

document(内容 DOM): 代表当前页面，HTML DOM文档树

document.title
"百度一下，你就知道"
document.title = '枯木荣'
"枯木荣"
document.title
"枯木荣"
document.title = '百度一下，你就知道'
"百度一下，你就知道"
document.title
"百度一下，你就知道"

获取具体文档树节点:

<dl id="app">
    <dt>Java</dt>
    <dt>JavaSE</dt>
    <dt>JavaEE</dt>
</dl>

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

获取cookie原理:

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

服务器端可以设置cookie：httpOnly

history (不建议使用):代表浏览器的历史记录

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

8. 操作DOM对象(重点)

核心

浏览器就是一个DOM树形结构!

要操作一个DOM节点,就要先获取这个DOM节点!

  • 更新 : 更新DOM节点

  • 遍历dom节点 : 得到DOM节点

  • 添加 : 添加一个新的节点

获得节点

<div id="father">
    <h1>标题一</h1>
    <p id = "p1">p1</p>
    <p class = "p2">p2</p>
</div>

<script>
    var h1 = document.getElementsByTagName("h1");//获取标题
    var p1 = document.getElementById("p1")//获取id
    var p2 = document.getElementsByClassName("p2");
    var father = document.getElementById("father");

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

8.1更新节点

<div id="id1">

</div>
<script>
    var id1 = document.getElementById('id1');
    id1.innerText='456';//修改文本的值
    id1.innerHTML='<strong>456</strong>';
    //可以解析HTML文本标签
</script>

操作文本:

  • id1.innerText=‘456’：修改文本的值
  • id1.innerHTML=‘456’：可以解析HTML文本标签

操作CSS:

id1.style.color = 'yellow';// 属性使用 字符串 包裹
id1.style.fontSize = '20px';// - 转 驼峰命名问题
id1.style.padding = '2em'

8.2 删除节点

删除结点的步骤

先获取父节点,再通过父节点删除自己!

<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，再删除2会找不到2节点
    father.removeChild(father.children[0]);
    father.removeChild(father.children[1])
    father.removeChild(father.children[2])
</script>

8.3 插入节点

获得了某个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 = document.getElementById('js');
    var list = document.getElementById('list');

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

-----
//追加后节点效果:
<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
    <p id="js">Javascript</p>
</div>

创建一个新的标签,实现插入

<script type = "text/JavaScript" src = ""></script>
<!--原节点-->
<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>
    //获取节点
    let list = document.getElementById('list');//已经存在的节点

    //追加到后面
    //list.appendChild(js);
//-----------------------------------------------------------------------------------
    //通过JS 创建一个新的节点
    let newP = document.createElement('p');
    newP.id = 'newP';
    newP.innerText = 'Hello,Tom ';
    list.appendChild(newP);//追加到最后
    //创建一个标签节点(通过这个属性可以设置任意的值)
    let myScript = document.createElement('script');
    myScript.setAttribute('type', 'text/javascript');
//-----------------------------------------------------------------------------------  
    //给body标签创建样式1
    let body = document.getElementsByTagName('body')[0];
    //创建背景颜色
    body.setAttribute('style', 'background-color: yellow;');

    //可以创建一个style标签
    let myStyle = document.createElement('style');
    myStyle.setAttribute('tyle', 'text/css');
    myStyle.innerHTML = 'body{background-color: chartreuse;}';//设置样式
    document.getElementsByTagName('head')[0].appendChild(myStyle);
</script>
</body>

追加后节点:

<body style="background-color: yellow;">
    <p id="js">Javascript</p>
    <div id="list">
        <p id="se">JavaSE</p>
        <p id="ee">JavaEE</p>
        <p id="me">JavaME</p>
        <p id="newP">Hello,Sam</p>
        <script type="text/javascript"></script>
    </div>
</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>
    let ee = document.getElementById('ee');
    let js = document.getElementById('js');//已经存在的节点
    let list = document.getElementById('list');
    //要包含的节点. insertBefore(新节点,目标节点)将新节点插入到目标及节点前面
    list.insertBefore(js, ee);
</script>
----
追加后效果为：
<body>
<div id="list">
    <p id="se">JavaSE</p>
    <p id="js">Javascript</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>
</body>

9.操作表单(验证)

表单:from

  • 文本框：text
  • 下拉框：select
  • 单选框：radio
  • 多选框：checkbox
  • 隐藏域：hidden
  • 密码框：password
  • …

表单的目的：提交信息

9.1 获得要提交的信息

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="post">
    <p>
        <span>用户名：</span><input type="text" id="username">
    </p>
    <p>
        <span>性别：</span>
        <input type="radio" name="sex" value="man" id="boy">男
        <input type="radio" name="sex" value="woman" id="girl">女
    </p>
    <script>
        var input_text = document.getElementById('username');
        //得到输入框的值：input_text.value
        //修改输入框的值：input_text.value = nice
        
        var boy_radio = document.getElementById('boy');
        var girl_radio = document.getElementById('girl');
        //对于单选框、多选框等等固定的值，
        boy_radio.checked;//查看返回的结果，是否为true，如果为true，则被选中
        girl_radio.checked = true;//赋值
    </script>
</form>
</body>
</html>

9.2 提交表单

MD5加密

  • 一般MD5加密:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--MD5工具类-->
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<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>

    <!--绑定事件 onlick 被点击-->
    <button type="submit" onclick="sub()">提交</button>
    <script>
        function sub() {
            let username = document.getElementById('username');
            let password = document.getElementById('password');
            console.log(username);
            console.log(password);
            // MD5 算法    方案一：
            password.value = md5(password.value);
            console.log(password.value);
        }
    </script>
</form>
</body>
</html>

  • MD5加密 + 表单优化：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--MD5工具类-->
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<!--
    表单绑定提交事件
    onsubmit = 绑定一个提交检查的函数，
    true:可以提交，
    false:中断提交
    将这个结果返回给表单，使用 onsubmit 接收！
    οnsubmit="return sub();"
-->
<form action="#" method="post" onsubmit="return sub();">
    <p>
        <span>用户名：</span><input type="text" id="username" name="username">
    </p>
    <p>
        <span>密码：</span><input type="password" id="password">
        <input type="hidden" id="md5-password" name="password">
    </p>
    <button type="submit" >提交</button>
    <script>
        function sub() {
            let username = document.getElementById('username');
            let password = document.getElementById('password');
            let md5password = document.getElementById('md5-password');

            //MD5 算法：隐藏表单域提交表单密码
            md5password.value = md5(password.value);

            //可以校验判断表单内容，true：通过提交，false：阻止提交
            return true;
        }
    </script>
</form>
</body>
</html>

10.jQuery库

里面封装了大量的JavaScript方法

官网:https://jquery.com/

10.1 初始jQuery

只有一个公式:$(selector).action()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
   <!--在线引入-->
<!--    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>-->
<!--文件导入-->
    <script src="lib/jquery-3.6.0.js"></script>
</head>
<body>
    <a href="" id="test-jquery">点我</a>
<script>
    //选择器就是CSS的选择器
    $('#test-jquery').click(function () {
        alert('hello,jQuery')
    })
</script>
</body>
</html>

10.2 选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<script>
    //原生js，选择器少，麻烦且不好记
    //id、标签、类
    document.getElementById();
    document.getElementsByTagName();
    document.getElementsByClassName();

    //jQuery 就是 css中的选择器
    $('#id').click();//id选择器
    $('div').click();//标签选择
    $('.className').click();//class选择器
</script>
</body>
</html>

jQuery API

http://jquery.cuishifeng.cn/

10.3 事件

jQuery能够绑定的事件主要包括：

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

//鼠标事件主要有
mousedown()(jQuery)----按下
mouseenter()(jQuery)
mouseleave()(jQuery)
mousemove()(jQuery)----移动
mouseout()(jQuery)
mouseover()(jQuery)
mouseup()(jQuery)

事例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--在线引入-->
<!--    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>-->
<!--文件导入-->
    <script src="lib/jquery-3.6.0.js"></script>
    <style>
        #divMove{
            width:500px;
            height:500px;
            border:1px solid red;
        }
    </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>

10.4 操作DOM元素

节点文本操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.6.0.js"></script>
</head>
<body>
<ul id = "test_ul">
    <li class = "js">javascript</li>
    <li name = "python">Python</li>
</ul>
<script>
    $('#test_ul li[name = python]').text();//获得值
    $('#test_ul li[name = python]').text('设置值');//设置值
    $('#test_ul').html();//获取值
    $('#test-ul').html('<strong>123</strong>');//设置值
    
</script>

</body>
</html>

CSS操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.6.0.js"></script>
</head>
<body>
<ul id = "test_ul">
    <li class = "js">javascript</li>
    <li name = "python">Python</li>
</ul>
<script>
    //修改颜色
    $('#test_ul li[class = js]').css('color','blue');
</script>
</body>
</html>

元素的显示和隐藏

$('#test_ul li[name = python]').show();//显示
$('#test_ul li[name = python]').hide();//隐藏

bye

BKSW.
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript判断语句（switch）
开发之旅
08-02 2699
&lt;!doctype html&gt; &lt;html lang="en"&gt;  &lt;head&gt;   &lt;meta charset="UTF-8"&gt;   &lt;title&gt;Document&lt;/title&gt;  &lt;/head&gt;    &lt;body&gt; &lt;!
JavaScript入门笔记
chaolei1的博客
06-30 1385
JavaScript课程笔记 一、JavaScript简介 1. 什么是JavaScript？ JavaScript简称JS，由网景公司开发的客户端脚本语言，不需要编译，可以直接执行 补充： 机器语言(0,1代码)—>汇编语言(助记符)—>高级语言(①解释，②编译) 高级语言—>编译.obj目标程序文件—>连接link.exe可执行性文件 解释 WEB前端三层： 结构层HTML，定义页面的结构 样式层CSS，定义页面的样式 行为层JavaScript，用来实现交互，提升用户体验
分享学JavaScript的第七天
qq_38891807的博客
09-08 314
一.Object 类型 对象是变量的数据类型,什么数据类型呢 和函数一样是引用数据类型 // 描述心中的对象 var wuwei = { name: "wuwei", age: 18, sex: "male", eat: function (){ console.log("I eat damifan") } } 什么是对象? 对象是由一对或者多对属性名和属性值组成的，我们把属性名叫做键名，属性值 叫做键值，所以对象也是由很多对键值组成的;
尚硅谷JavaScript高级学习笔记
javaThinker的专栏
03-08 1035
JavaScript中函数是对象。我们后续描述构造函数的内存模型时，会将构造函数称为构造函数对象。typeof 运算符来查看值的类型，它返回的是类型的字符串值 会做数据转换 输出： 每个函数都有一个prototype属性，它默认指向一个0bject空对象(即称为:原型对象) 给原型对象添加属性、方法，函数的所有实例对象自动拥有原型中的属性(方法) 16、显式原型和隐式原型 和 中保存的都是原型对象的地址值。Fun的prototype、f的__proto__属性什么时
Javascript入门学习笔记
weixin_61370021的博客
04-27 4630
JS入门学习笔记，JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。
HTML+CSS、HTML5+CSS3、Javascript学习笔记！！有用的就直接下载吧！！免费！！直接免费！！！
Calmlyx的博客
06-11 1019
链接：https://pan.baidu.com/s/1j_MwhAwTu8M_-yhLKzoFTQ 提取码：gd0q 复制这段内容后打开百度网盘手机App，操作更方便哦
JavaScript学习笔记
qq_53388077的博客
03-30 1567
JavaScript是一门跨平台、面向对象的脚本语言，是用来控制网页行为的。脚本语言通常直接解释执行，不需要编译，缩短了传统编程语言的运行过程/*定义格式：var 对象名={属性名1：属性值1，属性名2：属性值2，属性名3：属性值3，函数名称：function(形参列表){}*/var user={age:20,alert("用膳");//简化方法：eat(){alert("用膳");
《高性能JavaScript》学习笔记
Leon_Chenl的博客
05-21 1065
当DOM的变化影响了元素的几何属性（宽和高）——比如改变边框宽度或给段落增加文字，导致行数增加——浏览器需要重新计算元素的几何属性，同样其他元素的几何属性和位置也会因此受到影响。一旦空闲，队列中的下一个任务就被重新提取出来并运行。并不是所有的DOM变化都会影响几何属性，例如改变一个元素的背景色不会影响它的宽和高，这种情况下只会发生一次重绘，因为元素的布局并没有改变。对象成员包括属性和方法，当一个被命名的成员引用了一个函数，该成员就被称为一个“方法”，相反，引用了非函数类型的成员就被称为“属性”。
javaScript学习笔记（一）js基础
热门推荐
一叶知秋
09-21 13万+
================================= 公众号 关注一波 （一叶知秋博客） 不定期分享视频资料 一、简介 1、概述： JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。 诞生于1995年，当时的主要目的是验证表单的数据是否合法。 Java...
小白JavaScript学习笔记----JavaScript 进阶
weixin_51877011的博客
05-05 1221
垃圾回收机制(Garbage Collection) 简称 GCJS中内存的分配和回收都是自动完成的，内存在不使用的时候会被垃圾回收器自动回收。正因为垃圾回收器的存在，许多人认为JS不用太关心内存管理的问题但如果不了解JS的内存管理机制，我们同样非常容易成内存泄漏（内存无法被回收）的情况不再用到的内存，没有及时释放，就叫做内存泄漏面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了。举个栗子：蛋炒饭。
javascript学习笔记
11-24
学习JavaScript时，了解这些基础知识是至关重要的。随着深入学习，你将接触到更高级的概念，如闭包、异步编程（回调函数、Promise、async/await）、模块系统以及现代框架如React、Vue和Angular的使用。JavaScript的...
vue ref和reactive区别
最新发布
灰海
08-25 351
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
2024前端面试题-js篇
FormAda的博客
08-22 877
是数组的一种迭代方法，主要用于对数组中的每一项执行给定的函数。它只是简单地对数组进行遍历，没有提供跳出循环的机制。基础数据类型：string,number,boolean，null，undefined，bigInt，symbol。在规定的时间内没有触发事件，就执行函数，如果在规定的时间触发了时间久重新开始计时。当异常被抛出时，正常的流程被打断，可以通过。函数执行一次后，在规定的时间内不再执行。块捕获异常，从而实现停止迭代的效果。执行顺序：同步代码->微任务->宏任务。引用数据类型：Object。
vue开发引入第三方插件的方式及其区别
你们瞎搞
08-22 374
npm。
【js】各类前端输入校验方法
galaxyJING的博客
08-21 374
【代码】【js】各类前端输入校验方法。
Ant-Design-Vue快速上手指南+排坑，操作详细步骤
liyy614的博客
08-23 840
总的来说，掌握Ant-Design-Vue的基本使用并不复杂，但是要想充分利用其提供的功能，就需要深入了解每个组件的详细用法，以及如何合理地整合到你的项目之中。Ant-Design-Vue是一款基于Vue.js的UI组件库，它不仅提供了丰富的高质量组件，还支持灵活的配置选项，使得开发者能够快速构建出既美观又功能强大的前端应用。例如，当你首次注册Ant Design Vue时，需要确保Vue实例已经正确创建并且版本兼容。再如，在按需引入组件的时候，配置正确的webpack策略可以避免不必要的资源请求。
【Vue】：利用 vue-drag-resize 拖拽缩放插件，实现对元素的拖拽以及拉伸操作，从而调整元素的宽度和高度
Anislandwhale的博客
08-21 965
“vue-drag-resize” 是一个用于 Vue.js 的插件，它允许你在 Vue 应用中轻松实现可拖拽和可调整大小的元素
【el-switch更改高、宽、颜色样式】深入浅出element ui的switch同页面存在多个更改样式互不影响
????鱼干～
08-22 895
【el-switch更改高、宽、颜色样式】深入浅出element ui的switch同页面存在多个更改样式互不影响
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值