标签：name DOM 前端 JavaScript 笔记 test var document 节点

JavaScript

1 概述

1.1什么是 JavaScript

JavaScript 是一门脚本语言

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

1.2 历史

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

最新版本到 ES6 了，但是浏览器还停留在支持 ES5 上

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

2 快速入门

2.1 引入 JavaScript

• 内部便签<script></script>
• 外部引入<script src="path.js" type="text/javascript"></script>

注意

• script 标签成对出现
• script 标签可以放在 head 和 body 里
• type 属性可以不用显示定义，默认类型就是 text/javascript

2.2 基本语法

<script>
    //1. 定义变量 变量类型 变量名 = 变量值；
    // alert("弹框");
    // console.log("控制台打印")
</script>

2.3 数据类型

变量

• 使用 var 关键字
• 命名使用 $，_ ,和字母开头，中文也可，不建议
• 未定义类型默认是全局变量
• 在 ES6 中使用 let，在局部变量使用 let 去定义

number

• js 不区分小数和整数
• NAN 不是一个数字
• Infinity 表示无限大

字符串

布尔值

逻辑运算

• && || ！

比较运算符

• =
• == 等于（类型不一样，值一样，也会判断为true）
• === 绝对等于（类型一样，值一样，结果为true）
• 注意：==有缺陷，等于使用绝对等于即可
• 须知：
  • NaN ===NaN ，这个与所有的数值都不相等，包括自己
  • 只能通过isNaN(NaN)来判断这个数是否是NaN

浮点数问题：

console.log((1/3) === (1-2/3))
//输出false
//可以使用
Math.abs((1/3) - (1-2/3))<0.00000001
//结果为true

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

null undefined

• null：空
• undefined：未定义

数组

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

// 保证代码的可读性，尽量使用[]
var arr = [1,2,3,'hello',null,false]
//取下标如果越界，则会undefined

对象

对象用大括号 {}，数组是中括号 []

var person{
	name:"name",
	age:3,
	tags:['js','java','...']
}
person.name

2.4 严格检查模式

JavaScript 严格模式（strict mode）即在严格的条件下运行，必须写在第一行。如果报错需要设置支持 ES6 语法，

<script>
	"use strict";
</script>

2.5 var let const区别

ES6 新增了 let 和 const 命令，用来声明变量。

• va r命令声明的变量，在全局范围内都有效，允许重复定义。
• let 的用法类似于 var，但是它不允许重复定义，所声明的变量，只在 let 命令所在的代码块内有效。
• const 声明一个只读的常量，不允许重复定义。一旦声明，常量的值就不能改变，只在 const 命令所在的代码块内有效。const 一旦声明变量, 就必须初始化, 不能留到以后赋值。

总结

• var 作用域函数内有效，可以重复定义。
• const 和 let 作用域, 只在声明所在的块级作用域内有效。
• let 和 const 都不允许重复声明。
• const 定义的是一个只读常量，不可修改，必须立即赋值。
• 在 es6 中推荐使用 let 和 const 进行定义

2.6 单引号和双引号区别

• html 中属性规范是用双引号，js 中字符串规定是用单引号。
• 单引号快，双引号可转义字符，可解析变量。

单双引号混合使用：

• 单引号和双引号必须成双成对的出现，可以单引号在外面，也可以双引号在外面。
• 最外面用了双引号了，那么里面就不能再用双引号了。

'  --单引号
$#39;   --单引号（兼容IE）
"  --双引号

3 数据类型

3.1字符串

1、正常字符串使用单引号或者双引号

2、 注意转义字符\

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

3、 多行字符窜编写

//tab键上面，esc下面 ` es6新特性
var msg = 
    `hello
    world
    你好
    `

4、模板字符窜

//tab键上面，esc下面 `
let name="name"
let msg = `hello,${name}`

5、字符串长度 lenght

str.lenght

6、字符串的可变性，不可变

7、大小写转换

let str = "name";
str.toLowerCase();  //转小写
str.toUpperCase(); //转大写

8、获取指定下标 indexOf

str.indexOf("str1")

9、截取字符串 substring

//左闭右开[)
str.substring(1)    //从第一个字符串截取到最后一个
str.substring(1, 3) //[1,3)

3.2 数组

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

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

1、长度（可变）

// 可赋值，赋值后长度改变
arr.length

注意：给 arr.length 赋值，数据大小就会发生改变，如果小于 lenght，会导致元素丢失

2、通过元素获得下标索引，indexOf

注意 1 和 ”1“ 的区别

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

4、push()，pop()，尾部

push：压入元素到尾部
pop：弹出尾部的一个元素

5、unshift()，shift()，头部

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

6、排序 sort()

arr.sort()

7、元素反转 reverse()

arr.reverse()

8、拼接 concat()，返回一个新数组

arr.concat([1,2]);

9、连接符 join()

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

let arr = ['C','B','A'];
arr.join('-')
console.log(arr.join('-'))//打印出C-B-A

10、多维数组

let arr = [[1,2],[2,3],["3","4"]];
console.log(arr)
arr[1][1]

3.3 对象

若干个键值对

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

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

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

1、对象赋值

stu.name = ""

2、使用一个不存在的对象属性，不会报错！undefined

3、动态的删减属性

delete stu.name
// 返回true

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

stu.新属性 = ""

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

'name' in stu
// 返回true
'toStrting' in stu
// 返回true
// 继承了object对象，拥有它的属性

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

stu.hasOwnProperty('name')
// 返回true
stu.hasOwnProperty('toStrting')
// 返回false

3.4 流程控制

if 判断

• if
• if else
• if else if else

循环

• while 和 do while 循环，避免死循环
• for 循环

for (let i = 0; i < 10; i++) {
	循环体;
}

• forEach 循环

Es 5.1 特性

arrs.forEach(function (arr) {
    console.log(arr);
})

• for in 循环

// index为索引
for (var index in arrs) {
    console.log(arrs[index]);
}

• for of 循环

// arr为值
for (var arr of arrs) {
    console.log(arr);
}

3.5 Map 和 Set

Map

var map = new Map([['键1',1], ['键2','值2'], ['键3',"值3"]]);
console.log(map.get("键2"));
map.set('新键1',1)

// 遍历map可以使用 for of
// map.get('')
// map.set('','')
// map.delete('')

Set：无序不重复的集合（可以去重）

var set = new Set([3,2]);
set.add(1)
set.delete(1)
console.log(set.has(3)) //true

// 遍历set可以使用 for of
// set.add()
// set.delete()
// set.has() 是否包含某个元素

3.6 iterator

ES6 新特性

遍历 map

var map = new Map([['键1',1], ['键2','值2'], ['键3',"值3"]]);
for (let arr of arrs) {
    console.log(arr);
}

遍历 set

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

4 函数

4.1 定义函数

定义方式一

绝对值函数

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

一旦执行到 return，函数结束，返回结果。

如果执行到 return，函数也会返回结果，结果是 undefined。

定义方式二

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

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

调用函数

abs();
// 调用函数：函数名()

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

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

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

arguments

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

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

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

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

rest

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

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

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

4.2 变量的作用域

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

假设在函数体中声明，则在函数体外不可以使用（非要想实现的话，可以使用闭包的方式）

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

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

函数查找变量从自身函数开始，就近原则，由内向外查找

提升变量的作用域

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

结论：js 执行引擎，自动提升了 y 的声明，但是不会提升变量 y 的复制。

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

全局函数

全局对象 window

默认所有的全局变量，都会自动绑定在 window 对象下

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

javaScript 实际上只有一个全局作用于，任何变量（函数）都可以视为变量。假设没有再函数的作用域范围内找到，就会向外查找。如果全局都没有找到，就会报 RefrenceError 引入异常。

规范

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

//自定义一个唯一全局变量，现在框架基本都是这样
var App = {};
//定义全局变量
App.name = '';
App.add = function (a, b){
    return a + b;
}

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

局部作用域let

在 for 里面使用 var 后，i 变量出了作用域还可以使用

解决：

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

常量const

在 ES6 之前，怎么定义常量：只有全部用大写字母命名的变量就是常量。

4.3 方法

定义方法

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

var stu = {
    name: 'name',
    birth: 2000,
    age: function () {
        //今年 - 出生的年
        let now = new Date().getFullYear();
        return now - this.birth;
    }
}
console.log(stu.age());

// 属性 stu.name
// 方法 stu.age() 一定得带()

this

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

function getAge(){
    let now = new Date().getFullYear();
    return now - this.birth;
}
var stu = {
    name: 'name',
    birth: 2000,
    age: getAge()
}
console.log(stu.age());

apply

在 js 中，可以通过 apply 方法控制 this 的指向，主动调用

function getAge(){
    let now = new Date().getFullYear();
    return now - this.birth;
}
var stu = {
    name: 'name',
    birth: 2000,
    age: getAge
};
// this，指向了stu，参数为空 
console.log(getAge.apply(stu, []));

5 对象

5.1 内置对象

为了区分对象的类型，我们用 typeof 操作符获取对象的类 型，它总是返回一个字符串。

typeof 123; // 'number'
typeof NaN; // 'number'
typeof 'str'; // 'string'
typeof true; // 'boolean'
typeof undefined; // 'undefined'
typeof Math.abs; // 'function'
typeof null; // 'object'
typeof []; // 'object'
typeof {}; // 'object'

5.2 日期 Date

基本使用

在JavaScript中， Date 对象用来表示日期和时间。 要获取系统当前时间，用：

var now = new Date();
now; // Wed Jun 24 2022 19:49:22 GMT+0800 (CST)
now.getFullYear(); // 2022, 年份
now.getMonth(); // 5, 月份，注意月份范围是0~11，5表示六月
now.getDate(); // 24, 表示24号
now.getDay(); // 3, 表示星期三
now.getHours(); // 19, 24小时制
now.getMinutes(); // 49, 分钟
now.getSeconds(); // 22, 秒
now.getMilliseconds(); // 875, 毫秒数
now.getTime(); // 1654335525321, 以number形式表示的时间戳，以1970.1.1开始算
Date.now(); // 也是获取当前时间戳

注意，当前时间是浏览器从本机操作系统获取的时间，所以不一定准确，因为用户可以把当前时间设定为任何值。

转换

var d = new Date(1654335525321);
d.toLocaleString(); // '2022/6/24 下午7:49:22'，本地时间（北京时区+8:00），显示的字符串与操作系统设定的格式有关
d.toUTCString(); // 'Sat, 04 Jun 2022 09:38:45 GMT'，UTC时间，与本地时间相差8小时

5.3 JSON

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

• JSON (JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。
• 目前使用特别广 泛。 采用完全独立编程语言的文本格式来存储和表示数据。
• 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
• 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

在 JavaScript 语言中，一切都是对象。因此，任何JavaScript 支持的类型都可以通过 JSON 来表示，例 如字符串、数字、对象、数组等。

要求和语法格式：

• 对象表示为键值对，数据由逗号分隔 key:value
• 花括号保存对象 {}
• 方括号保存数组 []

格式：

{"属性名": "属性值"}

JSON 和 JavaScript 对象互转

要实现从 JSON 字符串转换为 JavaScript 对象，使用 JSON.parse() 方法：

var obj = JSON.parse('{"a": "Hello", "b": "World"}');
//结果是 {a: 'Hello', b: 'World'}

要实现从 JavaScript 对象转换为 JSON 字符串，使用 JSON.stringify() 方法：

var json = JSON.stringify({a: 'Hello', b: 'World'});
//结果是 '{"a": "Hello", "b": "World"}'

6 面向对象编程

6.1 概述

概述

JavaScript的面向对象编程和大多数其他语言如Java、C#的面向对象编程都不太一样。

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

6.2 原型对象

原型对象

原型 （prototype）

var Student = {
    name: 'Robot',
    height: 1.2,
    run: function () {
        console.log(this.name + ' is running...');
    }
};
var xiaoming = {
    name: '小明'
};
// 原型对象，这里的意思是小明的原型是Student，__为两个下滑线，可以任意指定原型对象
xiaoming.__proto__ = Student;

JavaScript的原型链和Java的Class区别就在，它没有“Class”的概念，所有对象都是实例，所谓继承关系 不过是把一个对象的原型指向另一个对象而已。

6.3 class继承

class继承

关键字 class 从ES6引入

在之前：

function Student(name) {
	this.name = name;
}
// 现在要给这个Student新增一个方法
Student.prototype.hello = function () {
	alert('Hello, ' + this.name + '!');
}

现在：

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

class Student {
	constructor(name) {
   		this.name = name;
    }
    hello() {
        alert('Hello, ' + this.name + '!');
    }
}
// 创建对象：
var xiaoming = new Student('小明');
xiaoming.hello();

2、继承

class PrimaryStudent extends Student {
    constructor(name, grade) {
        super(name); // 记得用super调用父类的构造方法!
        this.grade = grade;
    }
    myGrade() {
    	alert('I am at grade ' + this.grade);
    }
}

本质：查看对象原型

6.4 原型链

原型链

__proto__

Object也会有很多原型，形成一个原型链

7 操作BOM对象（重点）

浏览器介绍

JavaScript 诞生就是为了能在浏览器运行

BOM：浏览器对象模型

• IE 6~11
• Chrome
• Safari
• Firefox Linux默认浏览器

三方

• QQ浏览器
• 360浏览器

7.1 window

window

window代表浏览器窗口

window.innerWidth //内部宽度
window.innerHeight //内部高度
window.outerWidth //外部宽度
window.outerHeight //外部高度

7.2 navigator

navigator（不建议使用）

navigator 对象表示浏览器的信息

navigator.appName：浏览器名称；
navigator.appVersion：浏览器版本；
navigator.language：浏览器设置的语言；
navigator.platform：操作系统类型；
navigator.userAgent：浏览器设定的 User-Agent 字符串。

在大多数情况下，我们不会使用 navigator 对象，因为 navigator 的信息可以很容易地被用户修改，所以JavaScript读取的值不一定是正确的。

7.3 screen

screen

screen 对象表示屏幕的信息，常用的属性有：

• screen.width：屏幕宽度，以像素为单位；
• screen.height：屏幕高度，以像素为单位；
• screen.colorDepth：返回颜色位数，如8、16、24。

7.4 location

location

location 对象表示当前页面的URL信息

location.protocol; // 'http'
location.host; // 'www.example.com'
location.port; // '8080'
location.pathname; // '/path/index.html'
location.search; // '?a=1&b=2' search 属性是一个可读可写的字符串，可设置或返回当前 URL 的查询部分（问号 ? 之后的部分）。
location.hash; // 'TOP'

要加载一个新页面，可以调用 location.assign() 。如果要重新加载当前页面，调用 location.reload() 方法非常方便。

location.reload();
location.assign('https://path/'); // 设置一个新的URL地址

7.4 document

document

document 对象表示当前页面。由于HTML在浏览器中以DOM形式表示为树形结构， document 对 象就是整个DOM树的根节点。 document 的 title 属性是从HTML文档中的 xxx 读取的，但是可以动态改变：

 document.title = '新的标题';

用 document 对象提供的 getElementById() 和 getElementsByTagName() 可以按ID获得一个 DOM节点和按Tag名称获得一组DOM节点：

<dl id="code-menu">
    <dt>Java</dt>
    <dd>Spring</dd>
    <dt>Python</dt>
<dl>
</dl>

<script>
    var menu = document.getElementById('code-menu');
</script>

document 对象还有一个 cookie 属性，可以获取当前页面的Cookie。

document.cookie; // 'v=123; remember=true; prefer=zh'

劫持cookie的原理

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

服务器端可以设置cookie:httpOnly

7.5 history

history

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

8 操作DOM对象（重点）

DOM：文档对象模型（节点）

核心

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

• 更新：更新该DOM节点的内容，相当于更新了该DOM节点表示的HTML的内容；
• 遍历：遍历该DOM节点下的子节点，以便进行进一步操作；
• 添加：在该DOM节点下新增一个子节点，相当于动态增加了一个HTML节点；
• 删除：将该节点从HTML中删除，相当于删掉了该DOM节点的内容以及它包含的所有子节点。

8.1 选择器

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

• document.getElementById() 和 document.getElementsByTagName() ，
• 以及CSS选择器 document.getElementsByClassName() 。

// 返回ID为'test'的节点：
var test = document.getElementById('test');
// 先定位ID为'test-table'的节点，再返回其内部所有tr节点：
var trs = document.getElementById('test-table').getElementsByTagName('tr');
// 先定位ID为'test-div'的节点，再返回其内部所有class包含red的节点：
var reds = document.getElementById('test-div').getElementsByClassName('red');
// 获取节点test下的所有直属子节点:
var cs = test.children;
// 获取节点test下第一个、最后一个子节点：
var first = test.firstElementChild;
var last = test.lastElementChild;

这是原生代码，后面我们尽量都是用jQuery

firstChild和firstElementChild的区别

• firstChild获取父元素的第一个子元素节点或者文本节点。

• firstElementChild获取父元素的第一个子元素节点，只返回HTML节点。

childNodes和children的区别

• children返回父元素的子元素集合，只返回HTML节点。

• childrenNodes返回父元素的所有子元素集合。

第二种方法是使用 querySelector() 和 querySelectorAll() ，需要了解selector语法，然后使 用条件来获取节点，更加方便：

// 通过querySelector获取ID为q1的节点：
var q1 = document.querySelector('#q1');
// 通过querySelectorAll获取q1节点内的符合条件的所有节点：
var ps = q1.querySelectorAll('div.highlighted > p');

8.2 更新DOM

更新节点

<div id="id1"></div>
<script>
    var id1 = document.getElementById('id1');
</script>

操作文本

• id1.innerText = '123' 直接修改文本的值
• id1.innerHTML = '<strong>123<strong>' 可以解析HTML文本标签

操作css

id1.style.color = 'red';
id1.style.fontSize = '20px'; //驼峰命名，没有带-的

8.3 删除DOM

删除节点

步骤：首先要获得该节点本身和它的父节点，然后，通过调用父节点的 removeChild 把自己删掉。

// 拿到待删除节点:
var self = document.getElementById('to-be-removed');
// 拿到父节点:
var parent = self.parentElement;
// 删除:
parent.removeChild(self);

// 删除是一个动态的过程
parent.removeChild(parent.children[0])
parent.removeChild(parent.children[1]) //这已经是第3个节点了，第二个节点已经到0号位置

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

8.4 插入节点

移动标签已存在的标签实现插入

当我们获得了某个DOM节点，如果这个DOM节点是空的，我们通过使用innerHTML = 'child'就可以修改DOM节点的内容，相当于“插入”了新的DOM节点。但是如果这个DOM节点已经存在元素了，我们就不能这样做了，会产生覆盖。

<!-- HTML结构 -->
<p id="js">JavaScript</p>
<div id="list">
    <p id="java">Java</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
</div>
<script>
    var
    js = document.getElementById('js'),
    list = document.getElementById('list');
    list.appendChild(js); //追加到后面
</script>

现在，HTML结构变成了这样：

<!-- HTML结构 -->
<div id="list">
<p id="java">Java</p>
<p id="python">Python</p>
<p id="scheme">Scheme</p>
<p id="js">JavaScript</p>
</div>

创建新标签 appendChild，实现插入

<script>
    var
    list = document.getElementById('list'), 
    c = document.createElement('p'); //创建一个p标签
    c.id = 'c';
    c.innerText = 'c语言';
    list.appendChild(c);
    
    //创建一个标签节点（通过这个属性，可以设置任意的值）
    var d = document.createElement('style');
    d.setAttribute('type', 'text/css');
    d.innerHTML = 'p { color: red }';
    //head 头部标签
    document.getElementsByTagName('head')[0].appendChild(d);
</script>

<!-- 建议放在body后面，放前面有时候可以报没有属性或节点 -->
<script>
    var body = document.getElementsByTagName('body');
    // body[0].setAttribute('style', 'background-color:#ccc;')
    body[0].style.backgroundColor='blue';
</script>

insertBefore

var ee = document.getElementById('ee');
var js = document.getElementById('js');
var list = document.getElementById('list');
// 要包含的节点insertBefore(newNode, targetNode)
list.insertBefore(js, ee);

9 操作表单

9.1 表单是什么

表单是什么 form DOM树

HTML表单的输入控件主要有以下几种：

• 文本框，对应的 <input type="text">，用于输入文本；
• 密码框，对应的 <input type="password">，用于输入密码；
• 单选框，对应的 <input type="radio">，用于选择一项；
• 复选框，对应的 <input type="checkbox">，用于选择多项；
• 下拉框，对应的 <select>，用于选择一项；
• 隐藏文本，对应的 <input type="hidden">，用户不可见，但表单提交时会把隐藏文本发送到 服务器。
• ...

表单的目的：提交信息

9.2 获取提交的信息

获取提交的信息

<form method="post">
    <p>
        <span>用户名：</span><input type="text" id="username">
    </p>
    <p>
        <spam>性别：</spam>
        <input type="radio" name="sex" value="man" id="man">男
        <input type="radio" name="sex" value="women" id="women">女
    </p>
</form>
<script>
    var username = document.getElementById('username');
    var man = document.getElementById('man');
    var women = document.getElementById('women');

    // 得到输入框的值
    username.value
    // 修改输入框的值
    username.value = '123'

    //对于单选框，多选框等固定的值，.value只能获取到当前的值，需要查看是否选中checked
    man.checked; //查看返回的结果，true为被选中状态
    women.checked = true;
</script>

9.3 提交表单(MD5加密)

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

<head>
    <!--  MD5加密工具类 使用md5()  -->
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
    <!-- 表单绑定提交事件提交,这里使用之后，后面就不用绑定了
    onsubmit="return aa()" -->
    <form maction="#" method="post"  onsubmit="return aa()">
        <p>
            <span>用户名：</span><input type="text" id="username" name="username">
        </p>
        <p>
            <span>密码：</span><input type="password" id="pwd">
            <input type="hidden" id="md5pwd" name="password">
        </p>
        <p>
            <!--
            <input type="submit">
            绑定时间onclick -->
            <button type="submit" >提交</button>
        </p>
    </form>
    <script>
        function aa(){
            var uname = document.getElementById('username');
            var pwd = document.getElementById('pwd');
            var md5pwd = document.getElementById('md5pwd');
            //MD5算法
            md5pwd.value = md5(pwd.value)
            console.log(pwd.value);
			return true;
        }
    </script>
</body>

10 jQuery

jQuery 库里存在大量的 JavaScript 函数

10.1 获取jQuery

获取 jQuery

jQueryAPI

• https://jquery.cuishifeng.cn/

CND

CDN的全称是Content Delivery Network，即内容分发网络。CDN的基本原理是广泛采用各种缓存服务器，将这些缓存服务器分布到用户访问相对集中的地区或网络中，在用户访问网站时，利用全局负载技术将用户的访问指向距离最近的工作正常的缓存服务器上，由缓存服务器直接响应用户请求。

在线cdn加速：

• https://www.jq22.com/cdn/index.html
• https://www.bootcdn.cn/jquery/

公式： $(selector).action()

• 美元符号定义 jQuery
• 选择符（selector）"查询"和"查找" HTML 元素
• jQuery 的 action() 执行对元素的操作

<head>
    <meta charset="UTF-8">
    <title>初识Jquery</title>
<!--    在线cdn-->
<!--    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>-->
<!--    本地-->
    <script src="lib/jquery-3.6.0.js"></script>
</head>
<body>
<!--
公式： $(selector).action()
selector：选择器
action：方法
-->
<a href="" id="text-jquery">点我</a>
<script>
    // 获取超链接的jQuery对象:
    var a = $('#test-jquery'); //选择器就是css的选择器
    // 方式一
    a.on('click', function () {
    	alert('Hello!');
    });
    // 方式二（推荐）
    a.click(function () {
    	alert('Hello!');
    });
</script>
</body>

10.2 选择器

选择器

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

    //jQuery css中的选择器它都可以用
    $('p').click(); //标签选择器
    $('#id1').click(); //id选择器
    $('.class1').click(); //类选择器

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

10.3 事件

鼠标事件，键盘事件，其他事件，可以去API文档里面查看

鼠标事件

• click: 鼠标单击时触发；
• dblclick：鼠标双击时触发；
• mouseenter：鼠标进入时触发；
• mouseleave： 鼠标移出时触发；
• mousemove：鼠标在DOM内部移动时触发；
• hover：鼠标进入和退出时触发两个函 数，相当于mouseenter加上mouseleave。

键盘事件

• keydown：键盘按下时触发；
• keyup：键盘松开时触发；
• keypress：按一次键后触发。

其他事件

• focus：当DOM获得焦点时触发；
• blur：当DOM失去焦点时触发；
• change：当DOM的内容改变时触发；
• submit：当提交时触发；
• ready：当页面被载入并且DOM树完成初始化后触发。

初始化事件

我们自己的初始化代码必须放到 document 对象的 ready 事件中，保证DOM已完成初始化

<html>
<head>
    <script>
        $(document).on('ready', function () {
            $('#testForm).on('submit', function () {
            alert('submit!');
        	});
        });
    </script>
</head>
<body>
	<form id="testForm">
	...
	</form>
</body>

由于 ready 事件使用非常普遍，所以可以这样简化：

$(document).ready(function () {
    // on('submit', function)也可以简化:
    $('#testForm).submit(function () {
    	alert('submit!');
    });
});

甚至还可以再简化为：

$(function () {
	// init...
});

鼠标事件

<head>
    <meta charset="UTF-8">
    <title>鼠标事件</title>
    <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>
    //当网页元素加载完毕之后，响应事件
    $(function (){
        $('#divMove').mousemove(function (e){
            $('#mouseMove').text('x：' + e.pageX + '，y：' + e.pageY)
        });
    });
</script>
</body>

10.4 操作DOM元素

操作DOM

节点文本操作

$('#test-ul li[name=css]').text() //获得值
$('#test-ul li[name=css]').text('') //设置值
$('#test-ul').html() //获得值
$('#test-ul').html('<strong>123<strong>') //设置值

css的操作

$('#test-ul li[name=css]').css('color','red'); //单个css
$('#test-ul li[name=css]').css({'color':'white','background':'orange'}) //多个css使用键值对

var ul = $('#test-ul li[name=css]');
ul.css('color'); // '#000033', 获取CSS属性
ul.css('color', '#336699'); // 设置CSS属性
ul.css('color', ''); // 清除CSS属性

var ul = $('#test-ul');
div.hasClass('highlight'); // false， class是否包含highlight
div.addClass('highlight'); // 添加highlight这个class
div.removeClass('highlight'); // 删除highlight这个class

元素的显示和隐藏

本质就是display : none；

$('.html').show(); //显示
$('.html').hide(); //隐藏
$('.html').toggle(); //切换

娱乐测试

// 浏览器可视窗口大小:
$(window).width(); 
$(window).height(); 
// HTML文档大小:
$(document).width(); 
$(document).height(); 
// 某个div的大小:
var div = $('#test-div');
div.width(); 
div.height(); 
div.width(400); // 设置CSS属性 width: 400px，是否生效要看CSS是否有效
div.height('200px'); // 设置CSS属性 height: 200px，是否生效要看CSS是否有效

attr() 和 removeAttr() 方法用于操作DOM节点的属性

// <div id="test-div" name="Test" start="1">...</div>
var div = $('#test-div');
div.attr('data'); // undefined, 属性不存在
div.attr('name'); // 'Test'
div.attr('name', 'Hello'); // div的name属性变为'Hello'
div.removeAttr('name'); // 删除name属性
div.attr('name'); // undefined

添加DOM

要添加新的DOM节点，除了通过jQuery的 html() 这种暴力方法外，还可以用 append() 方法，例如：

<div id="test-div">
<ul>
<li><span>JavaScript</span></li>
<li><span>Python</span></li>
<li><span>Swift</span></li>
</ul>
</div>
<script>
var ul = $('#test-div>ul');
ul.append('<li><span>Haskell</span></li>');

</script>

append() 把DOM添加到最后， prepend() 则把DOM添加到最前。

如果要把新节点插入到指定位置，例如，JavaScript和Python之间，那么，可以先定位到JavaScript，然 后用 after() 方法：

var js = $('#test-div>ul>li:first-child');
js.after('<li><span>Lua</span></li>');

也就是说，同级节点可以用 after() 或者 before() 方法。

删除节点

要删除DOM节点，拿到jQuery对象后直接调用 remove() 方法就可以了。如果jQuery对象包含若干 DOM节点，实际上可以一次删除多个DOM节点

var li = $('#test-div>ul>li');
li.remove(); // 所有<li>全被删除

10.5 操作表单

操作表单

对于表单元素，jQuery对象统一提供 val() 方法获取和设置对应的 value 属性

/*
<input id="test-input" name="email" value="">
<select id="test-select" name="city">
<option value="BJ" selected>Beijing</option>
<option value="SH">Shanghai</option>
<option value="SZ">Shenzhen</option>
</select>
<textarea id="test-textarea">Hello</textarea>
*/
var
	input = $('#test-input'),
    select = $('#test-select'),
	textarea = $('#test-textarea');
input.val(); // 'test'
input.val('abc@example.com'); // 文本框的内容已变为abc@example.com
select.val(); // 'BJ'
select.val('SH'); // 选择框已变为Shanghai
textarea.val(); // 'Hello'
textarea.val('Hi'); // 文本区域已更新为'Hi'

END

标签：name,DOM,前端,JavaScript,笔记,test,var,document,节点
来源： https://www.cnblogs.com/lyluoye/p/16355206.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。