【狂神说】JavaScript笔记

最新推荐文章于 2024-05-08 00:19:50 发布

南风未凉

最新推荐文章于 2024-05-08 00:19:50 发布

阅读量1.3k

点赞数 4

分类专栏：前端基础文章标签： javascript js java jquery

本文链接：https://blog.csdn.net/memory_share/article/details/115265702

版权

前端基础专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1、什么是JavaScript

1.1、概述

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
javascript组成一个完整的 JavaScript 实现是由以下 3 个不同部分组成的：

JavaScript核心（ECMAScript）、文档对象模型（Document Object Model，简称DOM）、浏览器对象模型（Browser Object Model，简称BOM）。

在这里插入图片描述

一个合格的后端人员必须要精通JavaSpript

1.2、历史

它最初由网景公司的布兰登·艾克设计。JavaScript[2]是甲骨文公司的注册商标。Ecma国际以JavaScript为基础制定了ECMAScript标准。JavaScript也可以用于其他场合，如服务器端编程。完整的JavaScript实现包含三个部分：ECMAScript，文档对象模型，浏览器对象模型。
ECMAScript可以理解为是JavaScript的一个标准
大部分浏览器还是停留在支持es5代码上

开发环境-----------线上环境，版本不一致

2、快速入门

2.1、引入JavaScript

内部标签

<script>	</script>

外部引入

abc.js

<script scr="abc.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/js.js"></script>

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


</head>
<body>

</body>
</html>

2.2基础语法入门

绝大部分语法同java相同

    <script>
        //1.定义变量  变量类型（var） 变量名  = 变量值
        var score = 5;
        //alert(score);  弹窗
        //2.条件控制
        if (score<60 && score>0){
            alert("不及格");
        }else if (score<60 && score>0){
            alert("及格");
        }else {
            alert("良好");
        }
        //console.log(score); 在浏览器的控制台打印变量   相当于sout
    </script>

浏览器上的调试

在这里插入图片描述

2.3、数据类型

数值、文本、图形、音频·、视频…

变量

var 王者荣耀 = "最强王者";

number

js中不区分小数和整数，Number

123  //整数123
123.5  //小数123.5
1.2555e5  //科学计数法
-5213   //负数
NaN   //not a number
Infinity  //表示无限大

在这里插入图片描述

字符串

‘kxs’ “cxk”
布尔值

true false

在这里插入图片描述

逻辑运算符

&&   全真为真。全假为假

||	 一个为真结果为真

!	 真即是假，假即为真

比较运算符（重要）

=

==		等于(类型不一样，值一样也会判断为true)

=== 	绝对等于(类型一样，值一样，结果为true)

这是JS的一个缺陷，一定注意不要使用==来比较

注意：

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

在这里插入图片描述

浮点数问题:

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

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

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

在这里插入图片描述

null和undefined

null 空
undefined 未定义

数组

//为了保证代码的可读性，尽量使用[]

 var arr = [1,2,3,null,true,'hello'];

 new Array (1,12,15,166,255,'world');

如果下标越界了，就会：undefined

在这里插入图片描述

对象

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

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

var person = {
    name : wudi,
    age : 13,
    tag: ('js','web','java','....')
}

2.4、严格检查模式

前提：IEDA需要设置支持es6语法

’use strict’; 严格检查模式，预防JavaScript的随意性产生的一些问题

必须写在JavaScript的第一行

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

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

    <!--
    前提：IEDA需要设置支持es6语法
    'use strict';严格检查模式，预防JavaScript的随意性产生的一些问题
    必须写在JavaScript的第一行
    局部变量建议使用let去定义
    -->
    <script>
        'use strict';
        
        let j = 1;

    </script>

</head>
<body>

</body>
</html>

3、数据类型

3.1、字符串

正常字符串我们使用单引号或者双引号包裹
注意转义字符

\’
\n
\t
\u4e2d	\u#### Unicode字符
\x41	Ascll字符

多行字符串编写

//在tab键的上面  esc键下面
'use scrict';
let msg = `你好呀
hello
world`
console.log(msg);

模板字符串

let name = "sunwukong";
let age = 3;
let mes = `你好呀 ${name}`

字符串长度

console.log(student.length)

字符串的可变性， 不可变

在这里插入图片描述

大小写转换

console.log(student.toUpperCase())   //STUDENT
    
console.log(student.toLowerCase())    //student

student.indexOf(‘t’) 输出在字符串中的位置
substring 截取字符串

student.substring(1)    //从第一个字符串截取到最后一个字符串
student.substring(1,3)   //[1,3)  含头不含尾

3.2、数组

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

var arr = [1,2,3,4,5,6];  //通过下标取值或赋值
arr[0]  //1

常用方法

长度

arr.length

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

indexOf 通过元素获得下标索引
```
arr.indexOf(3)  //2
```
字符串的“1”和数字1是不一样的
slice() 截取Array的一部分，返回一个新数组，类似于String里的substring
pash() , pop 尾部
```
```javascript
```
pash: 压入到尾部
pop : 弹出尾部的一个元素
```

unshift() ,shift() 头部

unshift: 压入到头部
shift:  弹出头部的一个元素

在这里插入图片描述

排序 sort()

arr
(3) ["b", "c", "a"]
arr.sort()
(3) ["a", "b", "c"]

元素反转 resverse

(3) ["a", "b", "c"]
arr.reverse()
(3) ["c", "b", "a"]

concat()

arr.concat([1,2,3])
(6) ["c", "b", "a", 1, 2, 3]
arr
(3) ["c", "b", "a"]

注意：

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

连接符 join

打印拼接数组，使用特定的字符串连接
```
(3) ["a", "b", "c"]
arr.join('-')
"c-b-a"
```

多维数组

var arr = [[1,2],[3,4],[5,6]]
undefined
arr[1][1]
4
arr
(3) [Array(2), Array(2), Array(2)]
0: (2) [1, 2]
1: (2) [3, 4]
2: (2) [5, 6]
length: 3

在这里插入图片描述

3.3、对象

若干个键值对

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

//定义了一个person对象，它有四个属性
 var person = {
            name : "xiaoming",
            age : 5,
            email : "378214218@qq.com",
            score : 60

        }

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

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

对象赋值

person.age = 76
76
person.age
76

使用一个不存在的属性时，不会报错

person.haha
undefined

动态的删减属性，通过delete删除对象的属性

delete person.score
true
person
{name: "xiaoming", age: 76, email: "378214218@qq.com"}

动态的添加属性，直接给新的属性添加值即可

person.haha = "haha"
"haha"
person
{name: "xiaoming", age: 76, email: "378214218@qq.com", haha: "haha"}

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

'age' in person
true

//继承
'toString' in person
true

判断一个属性是否是这个对象自身拥有的

person.hasOwnProperty('age')
true

person.hasOwnProperty('jah')
false

3.4、流程控制

if 判断

var score = 80;
if (score < 60){
    alert("不及格");
}else if (score > 60 && score < 80 ) {
    alert("及格");
}else
    alert("优秀");

循环

while循环，尽量避免死循环

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

for循环

for (let i = 0; i < 10; i++) {
    console.log(i);
}

for Each循环

var arr = [15,56,1,56,56,25,2,8,47];

arr.forEach(function (value){
    console.log(value);    //lamdba表达式
})

for…in

var arr = [15,56,1,56,56,25,2,8,47];
for (let number in arr) {
            if (arr.hasOwnProperty(number)){
                console.log("存在");
                console.log(arr[number]);
            }
        }

3.5、Map和Set

ES6的新特性

'use strict'
var map = new Map([['Tom',100],['Jack',90],['Danny',60]]);
var name = map.get('Tom');
console.log(name);   //通过key获得value
map.set('Jenny',120); //新增或修改
map.delete('Jack');  //删除

Set：无序不重复的集合

var set = new Set([3,2,1,1,1]);//Set默认去掉重复值
set.add(5);  //增加
set.delete(1);  //删除
console.log(set.has(2));//判断是否包含某个元素

3.5、Iterator

遍历数组

//通过for in来遍历下标
var arr = [5,6,8,9,71];
for (let x in arr) {
    console.log(x);
}

//通过for of来遍历数组
for (let x of arr) {
    console.log(x);
}

遍历map

var map = new Map([['Tom',100],['Jack',90],['Danny',60]]);
for (let x of map) {
    console.log(x);
}

遍历set

var set = new Set([5,8,9,6,4]);
for (let x of set) {
    console.log(x);
}

4、函数

4.1、定义函数

定义方式1：

绝对值函数

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

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

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

定义方式二:

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

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

方式一和方式二等价

调用函数

abs(-5)    //-5
abs1(-45)    //-45

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

参数进来是否存在的问题？

假设不存在参数，应该如何规避？

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

arguments

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

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

var abs = function (x){
    console.log("x=>"+x);

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

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

rest

if (arguments.length>2){
    for(var i = 2;i<arguments.length;i++){
        //。。。。。
    }
}

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

function abc(a,b,...rest){
     console.log("a=>"+a);
     console.log("b=>"+b);
     console.log(rest);

 }

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

4.2、变量的作用域

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

假设在函数体中声明，则在函数外不可以使用（一定要实现的话可以研究一下闭包）

function a() {
    var x = 1;
    x = x + 1;
}
x = x +2;// Uncaught ReferenceError: x is not defined

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

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

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

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

function c() {
    var x = 1;

    function d() {
        var y = x + 1;
    }
    var z = y + 1;//Uncaught ReferenceError: y is not defined
}

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

function c() {
    var x = 1;

    function d() {
        var x = 'a';
        console.log('inner:'+x);//outer:a
    }
    console.log('outer:'+x);//outer:1
    d();
}
c();

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

提升变量的作用域

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

结果：//xundefined

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

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

}
b()

这个是在JavaScript建立之初就存在的特性。养成规范：所有的变量定义都放在函数的头部，不要乱放，便于代码维护；

function b() {
    var x = 1,
    y = x + 1,
    a,z,d;  //undefined
    
    //之后可以随意用

}

全局函数

//全局变量
x = 1 ;

function a() {
    console.log(x);
}
a();
console.log(x);

全局对象

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); 使用old_alert(x)也可以成功输出

window.alert(123);

window.alert = function () {

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

window.alert =  old_alert;//恢复

window.alert(456);

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

规范

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

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

jackApp.name = 'yangdi';//定义全局变量

jackApp.add = function (a,b) {
    return a + b;
}

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

局部作用域

function aaa() {
    for (var i = 0; i < 100; i++) {
        console.log(i);
    }
    console.log(i+1);//101 发现问题i出了for循环的作用域还可以使用
}

ES6关键字 let ，去定义局部作用域的变量；

function bbb() {
    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 = '123';  //可以随意修改这个常量
console.log(PI);

在ES6中引入了关键字const

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

4.3、方法

定义方法

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

var zhangsan = {
    name : '张三',
    birth : 2000,
    age : function () {
        let now = new Date().getFullYear();
        return now - this.birth;
    }
}
zhangsan.age();
//属性
zhangsan.name
//方法，一定要带（）
zhangsan.age()

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

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

var zhangsan = {
    name : '张三',
    birth : 2000,
    age : getAge()
}
//zhangsan.age() 可以·
//getAge()  NaN window

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

apply

在JavaScript中可以使用apply控制this指向

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

var zhangsan = {
    name : '张三',
    birth : 2000,
    age : getAge
}
zhangsan.age();

getAge.apply(zhangsan,[]); //this指向了zhangsan，参数为空

5、对象

typeof返回结果

类型	返回值	类型	返回值
数字类型	number	null	object
字符串类型	string	undefined	unfefined
布尔类型	boolean	函数	function
数组	object	核心对象	function
对象	object	浏览器对象模型中的方法	object

5.1、Date

常用方法

var data = new Date();
data.getFullYear();//年份
data.getMonth();//月份 0~11
data.getDate();//天
data.getDay();//星期几
data.getHours();//小时
data.getMinutes();//分钟
data.getSeconds();//秒
console.log(data = new Date(1616589902676));//转为标准时间

转换

Wed Mar 24 2021 20:45:02 GMT+0800 (中国标准时间)
now.toLocaleDateString(); //"2021/3/24"
now.toGMTString();  //调用方法
//"Wed, 24 Mar 2021 12:45:02 GMT

5.2、JSON

什么是JSON

早期所有数据传输习惯使用XML文件！

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

在JavaScript中一切皆为对象，任何JavaScript支持的类型都可以用JSON表示；如number,string…

格式：

对象都用{}
数组都用[]
所有的键值对都是用 key：value

var user = {
    name:'zhangsan',
    age:3,
    sex:'男'
}
//对象转化为json字符串  {"name":"zhangsan","age":3,"sex":"男"}
var jsonUser = JSON.stringify(user);

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

JSON和对象的区别

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

5.3、Ajax

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

6、面向对象编程

JavaScript、Java、c#…面向对象编程；JavaScript有何区别

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

在JavaScript这个需要大家换一下思维方式

原型：

var xiaoming = {
       name:"xaioming",
       age : 3,
        run : function () {
           console.log(this.name+"  run....")
       }
   }

   var xiaozhang = {
       name: "xiaozhang"
   }
   //原型对象
   xiaozhang.__proto__ = xiaoming;

   var bird = {
       fly : function () {
           console.log(this.name+"   fly....")
       }
   }

   //小张的原型是小明
xiaozhang.__proto__ = bird;

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

//给Student新增一个方法
Student.prototype.hello = function () {
    alert("hello");
};

class继承

class关键字，是在ES6引入的

1、定义一个类，属性、方法

//定义一个学生的类
class Student{
    constructor(name) {
        this.name = name;
    }
    hello (){
        alert("hello");
    }
}

var xaioming = new Student("xiaoming");
var xaiohong = new Student("xiaohong");
xaioming.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");
var xiaohong = new xiaoStudent("xiaohong,1");
xiaoming.hello();

本质：查看对象原型

在这里插入图片描述

原型链

__ proto __

在这里插入图片描述

7、操作BOM对象

浏览器介绍

JavaScript和浏览器‘之间的关系？

JavaScript诞生就是为了能够在让它在浏览器中运行

BOM：浏览器对象模型

IE 6-11（Edge）
Chrome
Safari
FireFox
Opera

三方浏览器：QQ浏览器，360浏览器，Uc浏览器等

window

window代表浏览器窗口

window.alert("坚持")
undefined
window.innerHeight
760
window.innerWidth
491
window.outerHeight
864
window.outerWidth
1536
//通过window获得浏览器窗口大小

Navigator

Navigator,封装了浏览器的信息

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

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

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

screen

代表屏幕尺寸

screen.width
1536
screen.height
864

location

location代表当前页面的URL信息

location.host   "www.baidu.com"  //主机
location.href   "https://www.baidu.com/"   //当前指向的位置
location.protocol   "https:"   //协议
location.reload()   //刷新网页
//设置新的地址
location.assign('https://www.kuangstudy.com/')

document

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

document.title
"百度一下，你就知道"
document.title=('无敌')
"无敌"

获取具体的文档树节点

<dl id="app">
    <dt>javaSE</dt>
    <dt>javaEE</dt>
    <dt>javaME</dt>
</dl>

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

获取cookie

document.cookie
"_uuid=ABB41E69-8A2D-5C9E-91F8-535FE6C5368696306infoc; buvid3=1E000DC4-7833-4DFC-9F80-ACB1E118A758138376infoc; sid=6m3ndo5f; CURRENT_FNVAL=80; blackside_state=1; rpdid=|(um|RYku~um0J'uY||)Y~Rul"

劫持cookie原理

www.taobao.com

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

服务器可以设置cookie：httpOnly

history代表浏览器的历史记录（不建议使用）

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

还有其他BOM命令可以自己查阅

8、操作DOM对象（重点）

核心

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

在这里插入图片描述

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

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

获得Dom节点

    var h1 = document.getElementsByTagName("h1");
    var p1 = document.getElementById("p1");
    var p2 = document.getElementsByClassName("p2");
    var father = document.getElementById("father")
    
    var children = father.children;//获取父节点下的所有子节点
    father.lastChild;
    father.firstChild;

这是原生代码,之后我们尽量都是用jQurey

更新节点

<div id="d1"></div>

<script>
    var d1 = document.getElementById("d1");
</script>

操作文本:

d1.innerText = “123” 修改文本的值
“123”
d1.innerHTML = ‘126’ 可以解析HTML文本标签
“126”

操作css

d1.style.color = 'red'  //属性使用 字符串包裹

d1.style.fontFamily = '楷体'  //驼峰命名问题

d1.style.fontSize = "50px"

删除节点

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

<div>
    <h1>标题一</h1>
    <p id='p1'>p1</p>
    <p class='p2'>p2</p>
</div>
<script>
    var self = document.getElementByID('p1');
    var father = p1.parentElement; //找到p1的父节点
    father.removechild(self) //通过父节点使用removechild删掉自己（只有标记为id选择器的节点才可以删除)
</script>

注意：删除多个节点是，children是时刻变化的，不能直接father.removechild(father.children[0])这样从第一个索引开始删
————————————————

插入节点

我们获得了某个Dom节点，假设这个Dom节点是空的，我们会通过intterHTML就可以增加一个元素，但是如果这个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.append(js); //追加节点到后面

</script>

在这里插入图片描述

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

<script>
    var list = document.getElementById("list")
    var newP = document.createElement("p"); //创建一个p标签
    newP.id = 'newP';
    newP.innerText = 'sunwukong';
    list.appendChild(newP);

</script>

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

<script>
    var js = document.getElementById("js");//已经存在的节点
    var list = document.getElementById("list")
    list.append(js);
    var newP = document.createElement("p");//创建一个p标签
    newP.id = 'newP';
    newP.innerText = 'sunwukong';
    list.appendChild(newP);

    var myScript = document.createElement("script");//创建一个标签节点
    myScript.setAttribute('type',"text/javascript");
    var body = document.getElementsByTagName("body");
    //body[0].setAttribute('style','backgroundColor = \'#32a356')
    //body[0].style.backgroundColor = '#32a356';

    //创建一个style标签
    var myStyle = document.createElement("style");
    myStyle.setAttribute('type','text/css');
    myStyle.innerText = 'body{background-color:#000000}';//设置标签内容
    document.getElementsByTagName('head')[0].append(myStyle);
</script>

insertBefore

<script>
    let ee = document.getElementById('ee');
    let js = document.getElementById('js');
    let list = document.getElementById('list');

    // list: 要包含的节点 (谁在谁前面就把谁放到前面)
    list.insertBefore(js,ee);
/*
JavaSE
JavaScript
JavaEE
JavaME
 */
</script>

9、操作表单(验证)

获得要提交的信息

<form action="#" method="post">
    <p>
        <span>用户名：</span> <input type="text" id="user">
    </p>

    <p>
        <span>性别：</span>
        <input type="radio" name="sex" value="man" id="boy">男
        <input type="radio" name="sex" value="man" id="girl">女
    </p>

</form>

<script>
    var input_text = document.getElementById("user");
    var boy_redio = document.getElementById('boy');
    var girl_redio = document.getElementById('girl');
    //input_text.value();  得到输出框的值
    input_text.value = '123'  //修改输入框的值

    //对于多选框单选框等固定的值，boy_redio.value只能取到当前的值
    boy_redio.checked;//查看返回的结果是否为true，如果为true则代表选中
    boy_redio.checked = true;//赋值

</script>

提交表单，MD5加密密码，表单优化

<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
<form action="#" method="post" onsubmit="aaa()">
    <p>
        <span>用户名：</span> <input type="text" id="username" name="username">
    </p>

    <p>
      <span>密码</span> <input type="password" id="password" >
    </p>
    <input type="hidden" id="md5_password" name="password">
<!--绑定事件  onclick 被点击   -->
    <button type="submit" onclick="aaa()">提交</button>
</form>

<script>
    function aaa() {
        var uname = document.getElementById('username');
        var psd = document.getElementById('password');
        var md5_psd = document.getElementById('md5_password');
        console.log(uname.value);
        psd.value = md5(psd.value);
        //md5_psd.value = md5(psd.value);
       //MD5算法 可以校验判断表单，true就是通过提交，false就是阻止提交
        return true;

    }
</script>

10、jQuery

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

获取jquery

在这里插入图片描述

可以导入jQuery在线引用地址

例如< script src=“http://libs.baidu.com/jquery/2.1.4/jquery.min.js”>< /script >

官网下载https://jquery.com/download/ 导入项目中

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Title</title>
    <script src="lib/jquery-3.6.0.min.js"></script>

</head>
<body>
<a href="#" id="text_jquery">点我</a>
<script>
    //公式：$(selector).action()
    //选择器就是CSS的选择器
    $('#text_jquery').click(function () {
        alert('1111');
    })
</script>

</body>
</html>

选择器

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

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

</script>

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

事件

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Title</title>
    <script src="lib/jquery-3.6.0.min.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>
    //当网页元素加载完毕后，响应事件
    $(function (){
        $('#divMove').mousemove(function (e){
            $('#mouseMove').text('x:'+e.pageX + '  y'+e.pageY)
        });
    });
</script>
</body>
</html>

操作Dom

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.5.1.js"></script>
</head>
<body>
<ul id="test-ul">
    <li id="js">JavaScript</li>
    <li name="JavaSE">JavaSE</li>
</ul>

<script>
    // 获得值
    $('#test-ul li[name=JavaSE]').text();
    // 设置值
    $('#test-ul li[name=JavaSE]').text('Python');

    // css 的操作
    $('#test-ul li[name=JavaSE]').css('color','red');

    // 元素的显示
    $('#test-ul li[name=JavaSE]').show();

    // 元素的隐藏
    $('#test-ul li[name=JavaSE]').hide();
</script>
</body>
</html>

<script>
// 获得值
$('#test-ul li[name=JavaSE]').text();
// 设置值
$('#test-ul li[name=JavaSE]').text('Python');

// css 的操作
$('#test-ul li[name=JavaSE]').css('color','red');

// 元素的显示
$('#test-ul li[name=JavaSE]').show();

// 元素的隐藏
$('#test-ul li[name=JavaSE]').hide();

</script>
</body>
</html>

南风未凉

关注

4
点赞
踩
30

收藏

觉得还不错? 一键收藏
0
评论
【狂神说】JavaScript笔记

1、什么是JavaScript1.1、概述JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。javascript组成一个完整的 JavaScript 实现是由以下 3 个不同部分组成的：JavaScript核心（ECMAScript）、文档对象模型（Document Obj
复制链接

扫一扫