JS基本语法

快速了解

JS数据类型

变量

所有的变量都使用var关键词声明，变量名不能以数字开头、

var num = 1;
num = 2;    // 同一个变量可以反复赋值，而且可以是不同类型的变量，但是要注意只能用var申明一次

number

JS不区分小数和整数

10    //整数
3.14    //浮点数
1.234e3    //科学计数法
-99    //负数
NaN    //not a number
Infinity    //表示无穷大

字符串

// 1.正常字符串
'abc'
"abc"

// 2.转意字符
\n
\u4e2d    //Unicode字符
\x41    //Ascll字符

// 3.多行字符串编写
let msg = `This is
paragraph`;

// 4.模板字符串
let name = "hebor";
let msg = `hi, ${name}`;    // 或者使用另一种写法：let msg = "hi " + name ;
console.log(msg);

// 5.字符串长度
let student = "student";
console.log(student.length);    //通过属性获取字符串长度

// 6.字符串的可变性
let identity = "student";
console.log(identity[2]);
identity[2] = 1;    //严格检查模式下，此代码会报错
console.log(identity[2]);    //得出结果字符串不可变

// 7.大小写转换
'use strict';
let identity = "Student";
console.log(identity.toUpperCase());    //此处使用的是方法，不是属性
console.log(identity.toLowerCase());

// 8.获取字符位置
'use strict';
let identity = "Student";
console.log(identity.indexOf("d"));    //获取d字符的下标，是3

// 9.截取字符
'use strict';
let identity = "Student";
console.log(identity.substring(1));    //从第1个字符截取到最后一个字符
console.log(identity.substring(1,3));    //从第1个字符截取到第2个字符，含头不含尾

布尔值

true
false

逻辑运算符

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

比较运算符

=    //赋值
==    //等于，数据类型不一样，值一样，也会判断为true，例如 1=="1"
===    //绝对等于，类型一样，值一样，结果为true

“==”是JS的缺陷，坚持不要使用 “==”执行比较操作

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

null和undefined

null 空
undefined 未定义

数组

java数组的值必须是相同类型的对象，JS则可以包含任意数据类型；调整数组长度时，增大则以empty填补多余的位置，缩小则从尾部开始删除溢出的元素

// 定义数组，数组可以包含任意数据类型
var arr = [1,2,3,4,5,"hello",null,true];
var arr = new Array(1,2,3,4,5,"hello");

// 1.数组长度
'use strict';
let arr = [1,2,3,4,5,6];
console.log(arr.length);    //查看数组长度
arr[0] = 0;    //更改数组内的元素，可变
console.log(arr);
arr.length = 10;    //调整数组长度，数组大小会发生变化
console.log(arr);    //增大数组长度，以空缺填补元素位置
console.log(arr[6]);    //输出空缺位置结果为undefind

// 2.获取下标索引
'use strict';
let arr = [1,2,3,4,5,6];
console.log(arr.indexOf(2));

// 3.截取数组
'use strict';
let arr = [1,2,3,4,5,6];
console.log(arr.slice(2));
console.log(arr.slice(2,4));    //效果与string类型的substring()效果相似

// 4.push()，pop()
'use strict';
let arr = [1,2,3,4,5,6];
arr.push("a",'b');	//向数组尾部添加元素
console.log(arr);
arr.pop();	//从数组尾部弹出1个元素
console.log(arr);

// 5.unshift()，shift()
'use strict';
let arr = [1,2,3,4,5,6];
arr.unshift("a","b");	//向数组头部添加元素
console.log(arr);
arr.shift();	//从数组头部弹出1个元素
console.log(arr);

// 6.排序和元素反转
'use strict';
let arr = ['B','C'];
arr.push("A");
console.log(arr);
arr.sort();		//数组排序
console.log(arr);
arr.reverse();	//数组元素反转
console.log(arr);

// 7.concat() 拼接
'use strict';
let arr = ["A","B","C"];
console.log(arr.concat([1,2,3]));	//concat() 不会直接修改数组，仅返回一个新的数组

// 8.join() 连接符
'use strict';
let arr = ["A","B","C"];
console.log(arr.join("_"));		//使用特定的字符连接数组内所有的元素，使其组成一个字符串

// 9.多维数组
'use strict';
let arr = [[1,2],[3,4],["5","6"]];
console.log(arr[1][1]);

// 10.splice 修改数组元素，从指定的索引开始删除若干元素，然后再从该位置添加若干元素：
'use strict';
let arr = ['a', 'b', 'c', 'd', 'e'];
arr.splice(1,2,'f','g');    // 从索引1的位置开始删除2个元素，然后添加2个元素
arr.splice(1,2);    // 从索引1的位置开始删除2个元素
arr.splice(1,0,'b','c');    // 在索引1的位置添加2个元素

对象

数组使用中括号，对象使用花括号；对象中的每个属性用逗号隔开，最后一个属性值不能添加逗号；JS一个对象存在多个属性，每个属性由键值对组成，键只能是字符串类型，值可以是任意数据类型，多个属性间通过逗号隔开；由于属性键只能是字符串类型，所以通过"in"判断属性值是否在对象中的时候，属性键必须以字符串类型进行判断

// 1.定义对象
var person = {
    name: "qinjiang",
    age: 3,
    tags: ["kuangshen","JS","java","html","css"]
}

// 2.对象赋值
person.name = "hebo";

// 3.使用不存在的对象属性，不会报错，控制台只会提示 undefined
console.log(person.haha);

// 4.delete，动态删减属性
delete person.name;

// 5.动态添加属性，直接给新的属性添加值即可
person.haha = "haha";

// 6.判断属性值是否在此对象中
console.log("age" in person);
console.log("toString" in person);    //"toString"是继承自父对象的属性

// 7.判断属性值是否属于自身拥有
console.log(person.hasOwnProperty("age"));
console.log(person.hasOwnProperty("toString"));

访问属性是通过.操作符完成的，但这要求属性名必须是一个有效的变量名。如果属性名包含特殊字符，就必须用''括起来，且该属性也不能再直接通过.的方式引用，如下例

let test = {
    name: '小明',
    birth: 1990,
    'middle-school': 'no.1 middle School',    // 特殊键通过引号包含
}
test['middle-school']    // 通过这种方式引用特殊属性

所有属性都可以通过这种方式引用，只不过通过.引用属性的方式更简洁美观

浮点数问题

计算机无法支持无限大的数，所以分数会被进化有限位，这就造成了精度上的损失，需要尽量避免使用浮点数进行运算

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

或者也可以通过以下方式进行简单的判断

console.log(Math.abs((1/3) === (1-2/3))<0.00000001);

严格检查模式

在JS中如果一个变量没有通过var申明就被使用，那么该变量就自动被申明为全局变量，例如"i=1"，此处定义的i默认作为全局变量存在，而通过var声明变量则作为局部变量；在严格检查模式下，var仍然可用，但建议通过let声明变量；使用严格检查模式的前提是IEDA需要设置支持ES6标准

'use strict'    //严格检查模式，必须写在第一行
let i = 1;

流程判断

if判断语句

'use strict';
let age = 3;
if (age < 3) {
    alert("kuwa~");
} else if (age > 3 && age < 5) {
    alert("test")
} else {
    alert("haha~");
}

循环

while循环，避免程序死循环

'use strict';
let age = 3;
while (age < 10) {
    age = age + 1;
    console.log(age);
}

while(true)		//死循环

// 此方式一定会先执行一次再进行判断
'use strict';
let age = 1;
do {
    age = age + 1;
    console.log(age);
} while (age < 1);

for循环

// 两种写法
for (let i = 0; i < 10; i++) {
    console.log(i);
}

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

for in循环

for..of用于遍历数组；for...in 循环用于导出下标

'use strict';
let arr = [11,12,13,14,15,16,17,18,19];
for (let index in arr) {	// 从arr数组导出下标变量index
    if (arr.hasOwnProperty(index)) {	// 对数组内的值做一个判断，下标存在时判断为true，无实际意义，可删减
        console.log(arr[index]);	// 按照下标输出数组内的所有值
    }
}

for ( let value of arr) {
    console.log(value);
}

forEach循环

'use strict';
let donuts = [
    { type: "Jelly" , cost: 1.22},
    { type: "Chocolate", cost: 2.45},
    { type: "Cider", cost: 1.59},
    { type: "Boston Cream", cost: 5.99}
];
donuts.forEach(function(value){
    console.log(value.type + " donuts " + "cost $" + value.cost + " each");
})

Map()和Set()

此两个特性是ES6格式才有的

'use strict';
new Map();	// 直接new Map() 如果浏览器不报错则表示IDEA支持ES6
new Set();

Map()

map()类似字典，能够实现类似通过学生名字找出学生成绩的功能

'use strict';

// let names = ["hebor", "tom", "jack", "alex", "jerry"];	不使用Map函数时通常需要定义2个数组
// let scores = [100, 90, 80, 70, 60];

let map = new Map([["hebor",100],["tom",90],["jack",80]]);	// Map()定义一个二维数组
let name = map.get("hebor");	// map.get()获取名称相对应的成绩
console.log(name);

map.set("admin",70);	// map.set()修改或新增Map()函数内的属性
map.delete("hebor");	// map.delete()删除Map()函数内的属性

Set()

无序不重复的集合

'use strict';
let set = new Set([3,1,1,1,1]);	// Set()函数会自动去重
console.log(set);
set.add(2);		// 在Set()内添加元素
set.delete(1);	// 在Set()内删除元素
set.has(3);		// 判断Set()内是否包含某元素

iterator

iterator用于遍历迭代Map()和Set()，IDEA需要支持iterator才能够使用of遍历

遍历Map()

'use strict';
let map = new Map([["hebor",100], ["tom",90], ["alex",80]]);
for (let value of map){
    console.log(value);
}

遍历Set()

'use strict';
let set = new Set([5,6,7]);
for (let value of set){
    console.log(value);
}

函数

方法：方法存在于对象中，对象由属性和方法组成，属性由键值对组成

函数：将函数放在对象中就成了方法

方法和函数本质上是一样的，只是位置不同有不一样的叫法

定义函数

定义方式一

绝对值函数

'use strict';
function abs(x) {	// 定义函数abs()
    if (x>=0) {
        return x;
    } else {
        return -x;
    }
}
console.log(abs(10));	// abs(10)调用函数并传参

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

定义方式二

function(x){...} 这是一个匿名函数，它没有定义函数名，它直接将结果赋值给abs，通过abs可以调用函数

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

调用函数

JS函数可以传递任意数量的参数，例如abs(10,20,30,40)，只有第一个值会生效，不会报错；JS函数也可以不传递参数，例如abs()函数传参是空，则输出结果是NaN，也不会报错；

处理参数不存在问题

'use strict';
let abs = function (x) {
    if (typeof x!== 'number') {		// 判断x不是数字，typeof是固定关键词，用于判断变量的数据类型
        throw "Not a Number";		// 变量不是数字时，手动抛出异常
    }
    if (x>=0) {
        return x;
    } else {
        return -x;
    }
}

处理传参过多问题

arguments

给函数传参时，如果有多个参数，所有参数会被看作一个数组，arguments可以获取到传入的所有参数

'use strict';
let abs = function (x) {

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

arguments会包含传入的所有参数，如果要用到多余参数来进行附加操作，那就需要排除已有参数（也就是第一个参数）

rest

ES6引入的新特性，用于获取多余参数，例如abs(1,2,3)，rest会将除了1以外的所有参数包含为一个数组

function abs(a,b,...rest) {		// rest的固定写法
    console.log("a=>"+a);
    console.log("b=>"+b);
    console.log(rest);
}

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

变量的作用域

在函数体内声明的变量是局部变量，不同的函数体中可使用相同的变量名

'use strict';
function hebo(){
    let x = 1;
    x = x + 1;
}
function hebo2(){
    let x = "A";
    x = x + 1;
}

函数嵌套中，内部函数可以使用外部函数的局部变量，反之不行

'use strict';
function hebo(){
    let x = 1;
    function hebo2(){
        let y = x + 1;
    }
    let z = y + 1;	// 报错：Uncaught ReferenceError: y is not defined
}

JS函数查找变量时从自身函数开始，由”内“向”外“查询，函数嵌套中，如果内外函数使用了同一个变量名，则内部函数会屏蔽外部函数的变量

function hebo(){
    let x = 1;
    function hebo2(){
        let x = 'A';
        console.log(x);
    }
    console.log(x);
    hebo2();
}

提升变量的作用域

JS执行引擎会自动提升变量的声明，但不会提升变量的赋值；例如此示例中的y变量，在末尾才对y变量赋值声明，但代码头部已经调用，此时JS引擎自动提升y的声明，但不会提升赋值，所以调用y时提示undefined

'use strict';
function hebo(){
	// let y;	// 提升变量声明，但未提升赋值
    let x = 'x' + y;
    console.log(x);
    let y = 'y';
}

为了便于代码维护，JS所有变量定义都放在函数头部

function hebo(){
    let x = 1;
        y = x+1;
        z,i,a;  // undifined
    // z,i,a 变量提前声明后，后续直接赋值即可，无需再通过let或var进行声明
}

全局函数

所有在外部声明的变量都视为全局变量

'use strict';
var x = 1;	// 定义全局变量，只能使用var
function f(){
    console.log(x);
}
f();
console.log(x);

全局对象 window，window 本身就代表浏览器

'use strict';
var x = 'xxx';	// 此处如果使用let，window.x 反馈的是 undefined
window.alert(x);
window.alert(window.x);		// 默认所有全局变量都会自动绑定在window对象下

alert()函数本身也是window的一个变量，JS实际上只有一个全局作用域，任何变量（函数也可以视为变量），如果在函数作用范围内查询不到，就会向外查询，如果全局作用域也查询不到就会报错

JS规范

由于所有的全局变量都会绑定到window上，如果不同的JS文件，使用了相同的全局变量就会产生冲突，为了能够降低全局变量命名冲突的问题，JS规范将自己的代码全部放入自己定义的唯一空间名字中

'use strict';
var hebo = {};  // 定义唯一全局变量，类似window
hebo.name = "hebor";    // 定义全局变量，类似windows.name
hebo.add = function (a,b){
    return a + b;
}

局部作用域 let

'use strict';
function hebo(){
    for (var i=0; i<10; i++){
        console.log(i);
    }
    console.log(i+1);	// 出了函数范围作用域，i还能使用
}

ES6 let关键词用于解决局部作用域冲突问题，将上述示例中的var替换为let即可避免输出i+1问题

常量 const

在ES6之前定义常量都是通过全部大写字母命名，但这只是一个约定俗成的规范，它并没有强制约束力；在ES6引入常量关键词const

'use strict';
// var PI = '3.14';		// ES6之前的规范
const PI = '3.14';

方法

将函数放在对象中就被称为方法；调用方法时必须带上()号

// 1.定义方法
'use strict';
var hebor = {
    name: 'hebor',
    birth: 1999,
    age: function(){	 // 方法
        // 今年 - 出生时间
        var now = new Date().getFullYear();
        return now-this.birth;
    }
}

// 2.调用属性和方法
hebor.name	// 调用属性
hebor.age()	// 调用方法

关于this

将上一实例中的this拆分出来后也可以写成以下形式

'use strict';
function getAge() {
    var now = new Date().getFullYear();
    return now-this.birth;		// this表示对当前对象的一个引用，此处 this.birth 等同于 hebor.birth
}
var hebor = {
    name: 'hebor',
    birth: 1999,
    age: getAge		// 修改函数变量时无需()号
}

将this拆分后，通过方法调用hebor.age()仍是正常的，但无法直接调用getAge()函数，原因就在于this关键字的特性上；this会指向当前调用它的对象，例如调用方法hebor.age()时指向getAge，而函数getAge()内存在this，此时调用this的对象是hebor，所以此处this表示对对象hebor的引用；而直接调用函数getAge()时，在代码中看起来没有调用this的对象，但之前的文笔中有提及过，默认所有的全局变量都会自动绑定在window对象下，所以此时this表示对window的引用，而window对象下并没有birth属性，所以直接调用函数getAge()会报错

关于this关键字的具体特性可以通过菜鸟教程查看

apply

JS中的所有函数都存在apply属性，apply函数能够控制this的指向

getAge.apply(hebor, []);    // 表示this指向hebor对象，并且传了空参

内部对象

Date

'use strict';
var now = new Date();
now.getFullYear();  // 年
now.getMonth();     // 月，月份是0~11
now.getDate();      // 日
now.getDay();       // 周几
now.getHours();     // 时
now.getMinutes();   // 分
now.getSeconds();   // 秒

now.toLocaleString();	// 获取本地时间

now.getTime();      // 时间戳
var now = new Date(1645858136472);      // 将时间戳转换为时间

JSON

JS一切皆为对象，任何JS支持的类型都可以用JSON表示，例如 number，string 等；JSON函数在JS中只有2个属性：stringify和parse，两者作用互补

JSON字符串和 JS对象的转化

// 1.定义一个对象
var user = {
    name: 'hebor',
    age: 3,
    gender: 'man'
}

// 2.对象转化json字符串
var jsonuser = JSON.stringify(user);

// 3.字符串转换为对象，需要使用引号
var obj = JSON.parse('{"name":"hebor","age":3,"gender":"man"}')

JSON 与 JS 的区别

var obj = {a: 'hello', b: 'world'};		// 这是一个标准对象
var json = "{'a': 'hello', 'b': 'world'}";		// json字符串

JSON字符串中所有的键也都是字符串类型，整个JSON字符串也需要用引号括起来，表示其整体也是字符串类型

面向对象编程

原型

JS之前没有父类的概念，如果一个对象想继承另一个对象的属性，需要通过原型实现

// 1.在user对象中定义方法run()
var user = {
    name: 'hebor',
    age: 3,
    run: function (){
        console.log(this.name + ' run...');
    }
};

// 2.定义第2个对象student
var student = {
    name: 'wenguangnan'
};

// 3.将student的原型指向user，继承user对象的所有属性
student.__proto__ = user;		// 对象student本身定义的属性name会覆盖对象user的属性name

// 4.定义第3个对象bird
var bird = {
    fly: function (){
        console.log(this.name + " fly...");
    }
};

// 5.将student的原型指向bird，转而继承bird的所有属性
student.__proto__ = bird;		// 指向user的原型不再生效

// 6.为原型添加方法
user.prototype.hello = function(){    // 为原型添加方法，所有对象都能继承到原型种新添的方法
	alert('hello')
};

原型的申明需要在代码的后部分，代码中间申明的原型会被后面的申明覆盖掉

class继承

class关键字是在ES6引入的，目前浏览器大多支持ES5，所以class可能在部分浏览器上不受支持

'use strict';
class Student{
	constructor(name){    // 构造器
		this.name = name;
	}
	hello(){
		alert('hello');
	}
};

class son extends Student{
	constructor(name,grade){
		super(name);	// 调用父类的constructor(name)
		this.grade = grade;
	}
	
	myGrade(){
		alert('This is son')
	}
}

var user1 = new Student('hebor');
var user2 = new son('wenguangnan',1);

子类必须在constructor方法中调用super关键词，否则新建实例会报错，因为子类没有自己的this对象，而是继承父类的this对象，如果不调用super方法，子类就得不到this对象；在子类的构造函数中，只有调用super之后，才能使用this关键字，否则会报错。因为子类实例的构建，是基于对父类实例加工，只有super方法才能返回父类实例

ES5的继承，实质是先创造子类的实例对象this，然后再将父类的方法添加到this上；ES6的继承，实质是先创造父类的实例对象this，然后再用子类的构造函数修改this；如果子类没有定义constructor方法，这个方法会默认添加，也就是说，不管有没有显式定义，任何一个子类都有constructor方法

原型链

构造函数的原型会指向父类对象，父类对象的原型最终会指向Object，当指向到达Object后会成环，一直循环指向Object

操作BOM对象

BOM：浏览器对象模型

window

window代表浏览器窗口

window.alert(1)
window.innerHeight	// 浏览器内高，内高表示浏览器内能展示网页内容的高度
window.outerHeight	// 浏览器外高，外高表示整个浏览器的大小高度
window.innerWidth	// 浏览器内宽
window.outerWidth	// 浏览器外宽

Navigator

Navigator封装了浏览器的信息，多数时候不会使用Navigator对象，因为会被人为修改，不建议使用这些属性来判断和编写代码

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

screen

表示全屏幕属性

screen.width;
1920	// 单位是px
screen.height;
1080

location

location代表当前页面的URL信息

location	// 查看location信息
	host: "www.baidu.com"
	href: "https://www.baidu.com/"
	protocol: "https:"
	reload: ƒ reload()

location.reload()	// 刷新网页
location.assgin('https://www.sogou.com/')	// 设置跳转链接，所有的访问请求都会被转接到Sogou

document

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

document.title;
'百度一下，你就知道'
document.title = 'this is test paragraph';	// 修改网页标题
document.cookie;	// 直接获取网页的cookie

获取具体的文档树节点

<dl id="app">
	<dt>Java</dt>
	<dd>JavaSE</dd>
	<dd>JavaEE</dd>
</dl>		
<script>
	var dl = document.getElementById('app');
</script>

history

history代表浏览器的历史记录

history.back()	// 回退
history.forward()	// 前滚

DOM对象

DOM:文档对象模型

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

更新:更新DOM节点(改)
遍历:获取DOM节点(查)
删除:删除DOM节点(删)
添加:添加DOM节点(增)

要操作一个DOM节点,必须先获取这个DOM节点

// 获取DOM节点
<div id="father">
	<h1>title one< /h1>
		<p id="p1">p1</P>
		<p class="p2">p2</p>
</div>
<script>
	// 对应CSS选择器
	var h1 = document.getElementsByTagName('h1');
	var p1 = document.getElementById('p1');
	var p2 = document.getElementsByClassName('p2');
	var father = document.getElementById('father');

	var childrens = father.children;	// children属性表示获取父节点下的所有子节点
	// father.firstChild	获取第一个子节点
	// father.lastChild		获取最后一个子节点
</script>

需要单独说明，HTML与JS的执行是存在先后顺序差别的，例如上述示例中，如果将<script>放置在<div>标签前面，console控制台会提示报错

修改DOM节点

修改文本值似乎只能用在ID标签上

p1.innerText = '123';    // 修改文本值
p1.innerHTML = '<strong>abc</strong>';    // 解析HTML文本，并修改文本值
p1.style.color = 'red';    // 设置样式，属性需要使用字符串包含
p1.style.fontSize = '20px';    // JS修改样式需要驼峰命名
p1.style.padding = '2em'

删除DOM节点

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

var self = document.getElementById('p1');    // 获取子节点
var father = p1.parentElement;    // parentElement获取到父类
father.removeChild(self);    // 通过父节点删除子节点

// 第二种删除方法
father.removeChild(father.children[0]);    // 删除子节点
father.removeChild(father.children[1]);
father.removeChild(father.children[2]);

JS的删除是一个动态过程，例如以上3行分别代表删除father下的3个子节点，但实际上，从删除下标0开始，children列表中就只剩2个元素，如果此时再删除下标2则报错；删除多个节点时，children是在时刻变化的

插入节点

获取某个节点时，如果此节点是空节点，通过innerHTML可以为空节点添加内容，如果此节点非空，则会直接覆盖原节点内容

<!-- HTML代码 -->
<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>
	'use strict';
	<!-- 使用var创建多个变量，逗号隔开 -->
	var 
		js = document.getElementById('js'),
		list = document.getElementById('list');
				
	list.appendChild(js);    <!--将js节点追加到list节点内（已存在的节点）-->
	var newp = document.createElement('p');    <!--创建一个p标签-->
	newp.id = 'test';    <!--为p标签设置ID-->
	newp.innerText = 'This is a paragrph';    <!--为p标签添加文本（并不依赖ID标签）-->
	list.appendChild(newp);
			
	<!-- 创建标签的第二种方式 -->
	var myScript = document.createElement('script');    <!--创建一个script标签-->
	myScript.setAttribute('type','text/javascript');    <!--括号内是键值对，这种方式比较通用，上例中也可以这么写-->
	list.appendChild(myScript);
			
	<!-- 通过JS为HTML配置样式 -->
	var myStyle = document.createElement('style');    <!--创建CSS样式标签-->
	myStyle.setAttribute('type','text/css');    
	myStyle.innerHTML = 'body {background-color: red;}';    <!--设置body标签的背景颜色-->
	<!-- 将CSS配置引入head标签中 -->
	document.getElementsByTagName('head')[0].appendChild(myStyle);
    
    var ee = document.getElementById('ee'),
	<!-- 父节点.insertBefore(新节点,目标节点) -->
	list.insertBefore(js,ee)	<!--将js节点插入list节点内的ee节点前，-->
</script>

表单操作

JS能够直接获取输入框的值，也能够直接修改输入框内的值；但对于单选框、多选框等，JS只能获取到固定的值，所以只能通过if进行判断

示例：HTML

<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>
	<p>
		<input type='submit' />
	</p>
</form>

示例：JS

var input_text = document.getElementById('username');
input_text.value    // 获取输入框的值，可以修改变量值
var boy_radio = document.getElementById('boy');
var girl_radio = document.getElementById('girl');

boy_radio.checked;    // 判断boy选项是否被选中，判断结果是布尔值

可以通过为boy_radio.checked = true赋值的方式，间接达到选中boy的目的

按钮绑定提交事件&表单绑定提交事件

以下示例中会展示一个MD5工具类，可以通过https://www.bootcdn.cn/blueimp-md5/此网站查看最新的脚本标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单</title>
		<!-- MD5工具类 -->
		<script src="https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.19.0/js/md5.js"></script>
	</head>
	<body>
		<!-- 表单绑定提交事件 -->
		<form action='https://www.baidu.com/' method="post" onsubmit="return check()">
			<p>
				<span>用户名：</span> <input type='text' id='username' name="username" />
			</p>
			<p>
				<!-- 没有name元素就抓不到相对应的密码值，意味着在浏览器上看不到显式密码 -->
				<span>密码：</span> <input type='password' id='input-passwd' />
			</p>
			<p>
                <!-- 将实际密码隐藏显示 -->
				<input type="hidden" id="md5-passwd" name="passwd" />
			</p>
			<!-- 为按钮绑定事件，点击按钮时触发操作 -->
			<button type='submit' onclick='check()' >提交</button>
		</form>
		<script>	
			// 提交表单
			function check() {
				alert(1);    // 验证此函数是否被执行
				var uname = document.getElementById('username');
				var passwd = document.getElementById('passwd');
				var md5pwd = document.getElementById('md5-passwd');    // 获取隐藏显示的密码
				// MD5算法
				// passwd.value = md5(passwd.value);	// 使用这种MD5加密方式，输入密码提交的瞬间，密码框会自动显示多出很多黑点表示MD5转换后的值
				md5pwd.value = md5(passwd.value);
				return false;
			}
		</script>
	</body>
</html>

jQuery

示例：原JS选择器与jQuery选择器的区别

<head>
	<title>jQuery</title>
	<!-- jQuery官方CDN加速 -->
	<!-- <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> -->
	<!-- 本地jQuery导入 -->
	<script src="lib/jquery-3.6.0.js"></script>
</head>
<body>
	<a href="" id="test-jquery">click me</a>
	<script>
		// document.getElementById('test-jquery');    javascript选择节点方式
		// jquery选择节点方式，选择器就是CSS的选择器
		$('#test-jquery').click(function(){
			alert('hello,jquery');
		})
	</script>
</body>

jQuery选择器与CSS选择器是一样的用法，jQuery的标准语法公式是$('selector').action()，例如上例中的$('#test-jquery').click()

jQuery选择器

对比JS选择器与jQuery选择器，JS选择器少，字段冗长难记，jQuery能够使用CSS的所有选择器

JS选择器：

标签选择器：document.getElementByTagName();
ID选择器：document.getElementById();
类选择器：document.getElementByClassName();

jQuery选择器：

标签选择器：$("tag_name").click();
ID选择器：$("#id_name").click();
类选择器：$(".class_name").click();

jQuery触发事件

鼠标常用动作：

点击：mousedown()
离开：mouseleave()
移动：mousemove()
点击结束：mouseover()

示例：在一定区域内定位鼠标坐标

<head>
	<meta charset="UTF-8" />
	<title>jQuery</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块内移动鼠标
	</div>
	<script>
		// 当网页元素加载完毕后，响应事件，具体的事件通过函数获取
		$(document).ready(function(){
            // 获取div块节点，并响应鼠标移动，鼠标移动时触发的事件通过函数获取
			$("#divMove").mousemove(function(mouse_position){
                // 获取span节点，将鼠标坐标以文本形式显示，等同于JS的 .innerText 操作
				$("#mouseMove").text("x: "+mouse_position.pageX+" y: "+mouse_position.pageY);
			});
		});
	</script>
</body>

ready()表示加载完毕后响应

jQuery操作DOM

// HTML操作
$("#test-ul li[name=python]").text();	    // text()为空时意为获取值
$("#test-ul li[name=python]").text("123")   // 设置值
$("#test-ul").html();	                    // 等同于JS .innerHTML
$("#test-ul").html("<strong>123</strong>");

// CSS操作
$("#test-ul li[name=python]").css({"color": "red"})	// 多个属性用逗号隔开，单个属性也可以不使用花括号

// 元素的显示和隐藏
$("#test-ul li[name=python]").hide();	    // 隐藏元素，等同于 display:none，显示使用 show()

posted @ 2022-03-15 21:24 hebo 阅读(97) 评论(0) 收藏举报

刷新页面返回顶部

一盏清风