JavaScript笔记

教程网址：https://www.w3school.com.cn/

https://www.liaoxuefeng.com/

https://developer.mozilla.org/zh-CN/docs/Learn

前端项目、教学：https://www.bootcdn.cn/

菜鸟教程

1. 什么是JavaScript

1.1、概述

JavaScript是一门世界上

最流行的脚本语言

Java 和JavaScript

一个合格的后端人员，必须精通JavaScript。因为很有可能进公司之后，要写很多JavaScript语言。

1.2、历史

ECMAScript 它可以理解为是JavaScript的一个标准

最新版本已经到ES6了

但是大部分浏览器还只停留在支持es6代码上！

开发环境 ----线上环境，版本不一致。 webpack等工具解决问题

2. 快速入门

2.1 引入JavaScript

外部导入文件

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

内部标签使用

<script> 
alert("hello world");
</script>

2.2 基本语法入门

定义变量
```
var num = 1;
```

条件控制

if(1>2){
    if(2>2){
        
    }else if(2>3){
        
    }
    alert("false")
}

浏览器控制台输入js代码。

alert("这里是console控制台")
undefined
console.log("在浏览器控制台打印变量")
VM285:1 在浏览器控制台打印变量

在浏览器控制台打断点。点 sources ，在对应的js文件下，在某一行打断点

2.3 数据类型

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

number

js 不区分小数和整数，Number

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

字符串

'abc' 'bcd'

布尔值

true 、false

逻辑运算
```
&&
    
  ||
    
   !
```
比较运算符

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

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

特例：

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

浮点数

1/3 === (1-2/3)   
false

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

java bigdicimal

null 和undefined

null 空
undefined 未定义

数组

java：一系列相同类型的数值的集合

javaScript：中可以是不同类型

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

数组下标越界会提示 undefined

对象

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

var person = {
    name = "lmq",
    age = 24,
    tags:['职工','js','web','sql','....']//每个属性之间以逗号隔开
}
访问对象属性
person.name
person.age

2.4 严格检查模式

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

必须写在JavaScript的第一行

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

<script>
    'use strict';
	let i = 1;
  </script>

3. 数据类型

3.1 字符串

正常字符串我们使用单引号、或者双引号包裹

注意转义字符

\'
\n
\t
\u4e2d     格式 \u####  unicode字符
\x41  Ascll字符

var str = "李梦齐"
for(var i = 0; i < 3; i++){
    console.log(str.charCodeAt(i))}
VM2529:3 26446
VM2529:3 26790
VM2529:3 40784
undefined
for(let i = 0;i < 3;i++){
    console.log(String.fromCharCode(str.charCodeAt(i)))}
VM2745:2 李
VM2745:2 梦
VM2745:2 齐

多行字符串编写

·发发
发的发
发发
发啊·

模板字符串

//tab 上面   esc键下面
let name = "life"
let age = "the whole life"

let msg = `what should you do,in your ${name}`

字符串长度
```
str.length
```

字符串可变性，不可变

var student = "student"
undefined
console.log(student.substring(1));
VM424:1 tudent
undefined
console.log(student[0])
VM545:1 s
undefined
student[0] = "a"
'a'
console.log(student[0])
s

大小写转换

console.log(student.toUpperCase())
STUDENT

获取字符串下标
```
console.log(student.indexOf("s"))
 0
```

截取字符串

console.log(student.substring(0,5));
stude
[)   包头不包尾
0 1 2 3 4

3.2 数组

array 包含任意的数据类型

遍历

var array = [1,2,3,4,5]
undefined
console.log(array)
VM1243:1 (5) [1, 2, 3, 4, 5]

var array = [3,4,5]
for(var x of array){
    console.log(x)
}
//通过for of 遍历数组的元素值
// for in 输入的x是下边

长度 array.length

长度可变

假如给array.length 赋值，数组大小就会发生变化，如果赋值长度小于现有数据元素长度，现有元素会丢失

可重新赋值

array[0] = 8;console.log(array)
VM1391:1 (5) [8, 2, 3, 4, 5]

通过元素获得索引位置

array.indexOf(5)
4

slice() 截取 Array 的一部分，返回一个新数组。类似于string中的substring()
```
arr.slice(1,5)
```

push ,pop

array.push("1")
6
console.log(array)
VM2925:1 (6) [8, 2, 3, 4, 5, '1']
undefined
array.pop("1")
'1'
console.log(array)
VM3007:1 (5) [8, 2, 3, 4, 5]

pop() 无参函数，指弹出尾部元素

7.unshift（）， shift（）头部

unshift: 压入头部
shift：弹出头部元素

8.排序 sort()

9.元素反转， reverse()

["a","b","c"]
array.reverse()
["c","b","a"]

concat()

不会修改原数组，只会返回拼接后的

array.concat([9,99,999])
(8) [8, 2, 3, 4, 5, 9, 99, 999]
array
(5) [8, 2, 3, 4, 5]

连接符 join

打印拼接数组，使用指定的字符串拼接
```
array
(5) [8, 2, 3, 4, 5]
array.join('~')
'8~2~3~4~5'
```

多维数组

var array = [[1,2],[3,4],[5,6]]
array[0][1]
2

3.3 对象

若干个键值对

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

var person = {
    name : "李梦齐",
    age:24,
    email:"lmq2458394364@163.com",
    score:75
}

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

对象赋值

console.log(person.name)
VM3506:1 李梦齐
undefined
person.name="帅比"
'帅比'
console.log(person)
VM3662:1 {name: '帅比', age: 24, email: 'lmq2458394364@163.com', score: 75}

使用一个不存在的对象属性，不会报错，提示undefined
```
person.money
undefined
```
动态的删减属性，通过delete 删除对象属性

动态的添加

person.haha = "哈哈"
'哈哈'
console.log(person)
VM3855:1 {name: '帅比', age: 24, email: 'lmq2458394364@163.com', score: 75, haha: '哈哈'}

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

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

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

person.hasOwnProperty('tostring')
false
person.hasOwnProperty("age")
true

3.4 流程控制

if判断

while循环

while(true){
   alert("2022年光棍节")
}

for循环

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

数组循环

age = [1,2,3,4,5,6,7]
for(var num in age){
    console.log(age[num])
}//num是索引

3.5 Map和Set

Map

var map = new Map([['tom',100],['jack',90],['lucy',80]])
var name = map.get('tom')
console.log(name)
map.set('nacy',70)
map.delete("tom")
console.log(map)

Set：无序不重复集合

var set = new Set([3,1,2,2,1,2]) //set可以去重
set.add(4)
console.log(set)
set.delete(1)
set.has(3) //是否包含某个元素

3.6 iterator

使用iterator 遍历迭代Map和set。

遍历map

var map = new Map([["tom",100],["jack",90],["haha",80]])
for(let x of map){
    console.log(x)
}

遍历set

let set2 = new Set([3,4,5])
    for(let x of set2){
        console.log(x)
}

forEach

var age = [12,3,12,2,12,3,12,31,21]
//函数
age.forEach(function(value)){
            console.log(value)
            }

4.函数及面向对象

4.1 函数定义及变量作用域

定义方式一

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

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

如果没有执行return , 函数执行完也会返回结果：NaN或者undefined

定义方式二

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

4.2 调用函数

abs(10)
abs(-10)

参数问题：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 abs(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;
    }
}

4.3 方法多个参数的问题

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

rest

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

var aaa = function(a,b,...rest){
    console.log("a=>"+a)
    console.log("b=>"+b)
    console.log("rest=>"+rest)
}


aaa(100,200,300,400,500)
index.html:23 a=>100
index.html:24 b=>200
index.html:25 rest=>300,400,500
undefined

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

4.4 变量作用域

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

假设在函数体中声明，则在函数体外不可使用 (非要想使用的话，可以研究使用闭包)

//'use strict'
var aa = function(){
    var x = 1;
    x += 1;
}
console.log(x)
Uncaught ReferenceError: x is not defined
    at 变量的作用域.html:16:21

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

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

function qj(){
    var x = 1;
    function qj2(){
        var x = 'a'
 		console.log('inner=>'+a)//inner=>a
    }
    console.log('outer=>'+x)//outer=>1
}

提升变量的作用域

function abc(){
    var x = 'x' + y;
    console.log(x);
    var y = 'y'
    }
//输出：xundefined

说明：js执行引擎，自动提升了y的声明，但是不会提升y的赋值。但是声明y 这个语句还是要声明的，即使写在后面，不写声明y是会报错的。

全局函数

类似类变量

var x = 1;
function f(){
    console.log(x)
}
f();
console.log(x)

全局对象window

var x = "xx"
alert(x)
alert(window.x)

alert() 函数本身也是window 对象内的一个方法

Javascript 实际上只有一个全局作用域，任何变量（函数可以视为变量），假设没有函数范围内找到，就会向外查找，如果在全局作用域都没有找到，就会提示未定义

规范

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

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

把自己的代码，全部放到自己定义的命名空间中，防止自己定义的变量和window自带的变量重名

JQuery

局部作用域 let

function aaaa(){
    for(var i = 0;i < 100;i++){
        console.log(i)
    }
    console.log(i)//i 出了for循环，还可以使用，输出 101
}

ES6 引出let关键字

function aaaa(){
    for(let i = 0;i < 100;i++){
        console.log(i)
    }
    console.log(i)//i 出了for循环，还可以使用，输出 101
}

建议都是用 let 去定义 局部作用域的变量 es6环境

const 常量

在ES6之前，定义常量：约定，只要用全部大写字母声明的变量

var PI = '3.14'
console.log(PI)
PI = '213'
console.log(PI) //213

在ES6 引入了常量关键字，const 来定义常量

4.5 方法

定义方法

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

对象的函数叫做方法

var limengqi = {
    name : "limengqi",
    height : "170",
    weight : "140",
    birth : 1998,
    age : function(){
        return new Date().getFullYear() - this.birth;
    }
}

控制台：
limengqi.age()
24
//属性 
limengqi.name
//方法
limengqi.age()

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

function getAge(){
        return new Date().getFullYear() - this.birth;
    }
var limengqi = {
    name : "limengqi",
    height : "170",
    weight : "140",
    birth : 1998,
    age : getAge()
}

limengqi2.age()
24

apply

在js中可以控制this的指向

getAge.apply(limengqi2,[])// this指向了limengqi2对象，并且参数是空[]

闭包
箭头函数（新特性）
创建对象
class继承
原型链继承

5.常用对象

标准对象

typeof 123
'number'
typeof '12'
'string'
typeof limengqi
'object'
typeof window
'object'
typeof true
'boolean'
typeof Math.abs
'function'

5.1Date

var now = new Date();
now.getFullYear();//年
now.getMonth();//月
now.getDate();//日
now.getDay();//星期几
now.getMinutes();//分
now.getHours();//时
now.getSeconds();//秒
now.getTime();//时间戳  全世界统一 1970 1.1 0：00 到现在的毫秒数
//把时间戳转为时间
new DateTime(时间戳);

5.2 JSON

json 是什么

早期，所有的数据传输习惯使用xml文件!

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

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

格式：

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

JSON字符串和JS对象的转化

var user = {
    name : "limengqi",
    age : "24",
    gender : "male"
}
//对象转化JSON字符串
var jsonUser = JSON.stringify(user);

//JSON字符串 转化为对象
var userJson = JSON.parse(jsonUser);

搞清楚，JSON和JS对象的区别

var obj = {a:'hello',b:'hellob'}//js对象
var json = '{"a":'hello',"b":'hellob'}' //json

5.3 AJax

原生JS写法 xhr 异步请求
JQuery 封装好的方法
axios请求

6.面向对象编程

原型对象

简单理解为 java的继承

var person = {
    name : "person",
    age : 24,
    gender : "male",
    action : function(){
        console.log(this.name + "  run...")
    }
}
var bird = {
    name : "bird",
    action : function(){
        console.log(this.name + "  fly...")
    }
}

var limengqi = {
    name : "limengqi",

}
limengqi.__proto__ = person;
limengqi.action();
//limengqi.__proto__ = bird;
//limengqi.action();

结果：

limengqi  run...
console.log(limengqi)
VM101:1 {name: 'limengqi'}name: "limengqi"[[Prototype]]: Objectaction: ƒ ()age: 24gender: "male"name: "person"[[Prototype]]: Object

class 继承

class 关键字，是在es6引入的

JS中定义一个类

function Animal(name){
   this.name = name; 
}
Animal.prototype.sayHi = function(){
    console.log('hello '+this.name)
}

var animal = new Animal()
undefined
animal.name = 'momo'
'momo'
animal.sayHi()
hello momo

使用class 定义一个类

constructor() 相当于构造方法

class Animal {
  constructor(name) {
      this.name = name;
  }
  sayHi() {
    console.log(`hello,${this.name}`);
  }
}
Animal.prototype.constructor === Animal; // true
let dog = new Animal('dog');
dog.sayHi(); // hello, dog

继承 extends

class Dog extends Animal{
    constructor(name,sound){
        this.name = name;
        this.sound = sound;
    };
    bark(){
        consolo.log(this.sound)
    }
}
let wangcai = new Dog('旺财','汪汪汪')
wangcai.bark();//referenceError : Must call super constructor in derived class before accessing 'this' or returning from derived constructor

class Dog extends Animal {
  constructor(name, sound) {
      super(name);//super指调用父类的构造方法
      this.sound = sound;
  };
  bark() {
    console.log(this.sound);
  }
}
let wangcai = new Dog('旺财', '喵喵喵');
wangcai.bark(); // 喵喵喵

原型链

__ proto__:

7.操作Bom元素

浏览器介绍

JavaScript 和浏览器关系

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

BOM: 浏览器对象模型

浏览器内核

IE6-11
Chrome
Safari
FireFox

三方（可切换内核）

QQ浏览器
360浏览器
谷歌浏览器

window

window 代表浏览器窗口

window.alert(1)
window.alert(window.innerHeight)
window.alert(window.outerWidth)

navigator

封装了浏览器的信息

navigator.appName
'Netscape'
navigator.appVersion
'5.0 (iPhone; CPU iPhone OS 13_2_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Mobile/15E148 Safari/604.1'
navigator.userAgent
'Mozilla/5.0 (iPhone; CPU iPhone OS 13_2_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Mobile/15E148 Safari/604.1'
navigator.platform
'Win32'

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

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

screen

屏幕属性
```
screen.width
414
screen.height
896
```
location

代表当前页面的URL信息

location
protocol: 'https:', 
host: 'www.baidu.com'
hostname: "www.baidu.com"
href: "https://www.baidu.com/"
origin: "https://www.baidu.com"
reload: ƒ reload()//刷新网页
//设置新的地址
location.assign('https://blog.kuangstudy.com/')

Document

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

document.title
""
document.getElementById("")

获取cookie

document.cookie

劫持cookie

www.taobao.com

<script></script>
<!--恶意人员：获取你的cookie上传到他的服务器-->

服务器端可以设置cookie：httpOnly

7.6 History

代表浏览器的历史记录

history.back()
history.forward()

操作表单
操作文件

8.操作Dom元素

核心

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

更新：Dom节点
遍历Dom节点：得到Dom节点
删除：删除Dom节点
添加：添加Dom节点

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

获得Dom节点

<div id = "father">
    <h1>h1标题</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
    //对应css选择器
    var h1 = document.getElementsByTagName("h1");
var p1 = document.getElementsByClassName("p2")
var p2 = document.getElementById("p1")
var father = document.getElementById("father")

var children = father.children

这是原生代码，之后我们尽量都用JQuery()

更新节点

操作文本

p2.innerText = "p2文本" 修改文本的值
p2.innerHTML = "< strong>p2文本</ strong>" 比inner Text多个特点就是能解析HTML标签

操作CSS

p2.style.color = "red"
p2.style.fontSize = "10px"
p2.style.padding = "2em"

删除节点

删除节点的步骤：

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

father.removeChild(father.children[0])

插入节点

我们获得了某个Dom节点，假设这个dom节点是空的，我们通过innerHTMLji就可以增加一个元素，但是这个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")

</script>
list.appendChild(js);

创建节点

var newP = document.createElement("p")//创建一个p标签
newP.id = "newP"
newP.innerText = "新的p标签"

创建动态节点

var script = document.createElement('script')
myScript.setAttribute('type','text/javascript');

设置body的样式

①

var body = document.getElementsByTagName('body')
undefined
body[0].style.backgroundColor = 'blue'
//body[0].setAttribute('style','background-color:wheat');

②引入css样式

var myStyle = document.createElement("style");
myStyle.setAttribute('type','text/css')
myStyle.innerHTML = 'body{background-color:chartreuse}'
var head = document.getElementsByTagName('head')[0];
head.appendChild(myStyle);

insert

<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 list = document.getElementById('list')
    //要包含的节点 insertBefore(newNode,targetNode)
    list.insertBefore(js,ee);
</script>

9. 操作表单

form 表单 DOM树

文本框 text
下拉框 select 选项 option
单选框 radio
多选框 checkbox
隐藏域 hidden
密码框 password

表单的目的：提交信息

获得要提交的信息

form

<form action="">
    <span>用户名：</span><input type="text" id="username">
</form>
<script>
    var username = document.getElementById('username');
    username.value   //获取表单输入的值
    '1321321'
    username.value = '321312'   //给表单的输入框赋值
    '321312'
    
    
</script>

<!-- 单选框和多选框的值就是定义好的value -->
<P>
    <span>性别：</span>
    <input type="radio" name="gender" value="男">男
    <input type="radio" name="gender"  value="女">女
</P>
<p>
    <input type="submit">
</p>
<script>
    var gender = document.getElementsByName('gender')[0]
    //对于单选框、多选框 。gender.value 返回的是标签的value值，而不能返回是否被选中
    //可通过gender.checked
    gender.checked   
    false   
    gender.checked
    true
</script>

md5 加密

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <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>
        <button type="submit" onclick="aaa()">提交</button>
    </form>
    <script>
        function aaa(){
            var username = document.getElementById("username")
            var password = document.getElementById("password")
            password.value = md5(password.value)//加密
            console.log(password.value)
        }
    </script>
</body>

表单校验: 通过表单 onsubmit 属性，如果校验不通过不跳转

<form action="https://www.baidu.com" method="post" onsubmit="return aaa()">
    <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">
    <button type="submit">提交</button>
</form>
<script>
    function aaa(){
        var username = document.getElementById("username")
        var inputPassword = document.getElementById("input-password")
        var md5Password = document.getElementById("md5-Password")
        md5Password.value = md5(inputPassword.value)//解决提交时密码变长（加密后赋值给 密码的input标签)
        console.log(password.value)
        return false;
    }
</script>

10. jQuery

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

获取jQuery

官网：www.jQuery.com

文档：https://jquery.cuishifeng.cn/

$(selector).action()

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--cdn 在线的 -->
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script> -->
    <!-- 本地的 -->
    <script src="./lib/jquery-3.6.1.js"></script>
</head>
<body>
    <a href="#" id="test-jquery">a标签</a>
    <script>
        //格式： $(css选择器).action()
        $('#test-jquery').click(function(){
            alert('欢迎使用JQuery')
        })
    </script>
</body>

选择器

<script src="./lib/jquery-3.6.1.js">
    //原生js选择器
    document.getElementById()//id
    document.getElementsByTagName() //标签
    document.getElementsByClassName  //类

    //jQuery   css中的选择器
    $('p').click()  //标签选择器
    $('#id').click()  //id选择器
    $('.class').click()  //类选择器

</script>

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

事件

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/jquery-3.6.1.js"></script>
</head>
   <style>
     #divMove{
        width:500px;
        height: 500px;
        border:1px solid red;
    }
   </style>
<body>
    <!-- 获取鼠标当前坐标 -->
    mouse: <span id="mouseMove"></span>
    <div id="divMove">
        在这里移动鼠标试试
    </div>
    
    <script>
        //当网页加载完毕之后，相应事件
        $(document).ready(function(){

        })
        //简化
        $(function(){
            $('#divMove').mousemove(function(e){
            //alert(11)
            $('#mouseMove').text('x:'+e.pageX + '  y:'+e.pageY)
        })
        })
        
    </script>
</body>

操作DOM

节点文本操作

<UL ID="test-ul">
    <li class="js">JAVASE</li>
    <li name="python">python</li>
</UL>
<script>
    var content = $('#test-ul li[name=python]').html()//获取值
    $('#test-ul li[name=python]').html('徐秉龙');//设置值
</script>

css操作

$('#test-ul li[name=python]').css({'color':'red'})

隐藏节点

$('#test-ul li[name=python]').hide()
x $('#test-ul li[name=python]').css({'display':'none'})

显示隐藏切换

$('#test-ul li[name=python]').toggle()

window

$(window).width()
$(document).height()

前端学习技巧

看源码、网页源码、源码之家小游戏源码。看JQuery源码
扒别人写好的网页。把没用的删掉，html、css。或者全部下载下来，本地启动再修改看效果

elementUI

ANT-design

2022/11/24 学习js暂时结束

学了很多基础，但是觉得离公司里的前端开发还有很多东西要学习、练习.....

笔记来源：bilibili 遇见狂神说视频

posted @ 2022-11-24 20:09 勇敢面对20201106 阅读(49) 评论(0) 收藏举报

刷新页面返回顶部

勇敢面对20201106

JavaScript笔记

1. 什么是JavaScript

1.1、 概述

1.2、历史

2. 快速入门

2.1 引入JavaScript

2.2 基本语法入门

2.3 数据类型

number

字符串

布尔值

逻辑运算

比较运算符

数组

对象

2.4 严格检查模式

3. 数据类型

3.1 字符串

3.2 数组

3.3 对象

3.4 流程控制

3.5 Map和Set

3.6 iterator

4.函数及面向对象

4.1 函数定义及变量作用域

4.2 调用函数

4.3 方法多个参数的问题

4.4 变量作用域

4.5 方法

5.常用对象

5.1Date

5.2 JSON

5.3 AJax

6.面向对象编程

7.操作Bom元素

window

navigator

screen

location

Document

7.6 History

8.操作Dom元素

插入节点

追加

创建节点

9. 操作表单

10. jQuery

选择器

事件

操作DOM

公告

1.1、概述