JavaScript新手入门学习笔记

最新推荐文章于 2024-05-30 16:03:48 发布

缘灬小太阳

最新推荐文章于 2024-05-30 16:03:48 发布

阅读量4.7w

点赞数 1

分类专栏：前端文章标签： html javascript

本文链接：https://blog.csdn.net/qq_43389754/article/details/110632360

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

JavaScript介绍

1.1 前端三要素

HTML 超文本标记语言决定了网页中的视图内容
CSS 层叠样式表决定了网页中的视图效果
JavaScript 赋予网页动态功能

1.2 JavaScript简介

JavaScript是一种基于对象的事件驱动型、弱类型的脚本语言

基于对象：区别于Java中的面向对象，遵循对象.方法的规则，但是没有类的概念
事件驱动：脚本语言代码需要由网页中的事件来触发执行
脚本语言：JS作为寄生语言，写在HTML网页中
JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。
JavaScript是一种属于网络的高级脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果

包含三部分：

ECMAScript语法：基本的语法结构，包括变量、运算符、分支、循环、函数等。
DOM操作：对网页上的标签操作。包含HTML标签和css相关内容。
BOM操作：对浏览器的操作。包括历史操作（前进、后退）、地址栏操作等。

1.3 JavaScript可以干什么？

可以修改HTML标签的属性
可以修改HTML标签的样式
动态修改网页中的内容
对用户在网页中输入的数据进行校验（格式合法性校验）
可以实现与服务端的异步交互
可以访问Cookie及localstorage等浏览器端缓存数据

1.4 JavaScript不能做什么？

JS不能访问浏览器本地的用户文件
JS不能访问来自于不同服务器的缓存数据（Cookie）

二、JS的使用方式

JS的使用方式，包含三种方式：

1、直接在html标签中写JS
2、在head标签中或者任意位置的标签中写代码。最好将script放在网页文件的body标签的最后面
3、在一个后缀名为js的文件中写代码，在页面上引用。

代码演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/common.js" ></script>
		<script type="text/javascript">
			function fn1(){
				alert('我是谁？我在哪里？我要干什么？');
			}
		</script>
	</head>
	<body>
		<a href="" onclick="return confirm('确定要删除吗?');">删除</a>
		
		<input type="button" value="点击" onclick="fn1()"/>
		
		<input type="button" value="First Blood" onclick="fn2()"/>
	</body>
</html>

common.js

function fn2(){
	alert('我又来了');
}

注意：

1、type要么不写，使用默认，要写就写正确。
2、<script>标签在引入外部js时，不要直接使用自结束。
3、在引入外部js的<script>标签中，不能写代码。

三、基本语法

3.1 变量

命名规则与Java相似。
变量定义：var num = 10；
没有变量类型的声明。
在<script>标签中写的代码，如果没有被函数包含，则表示直接执行的代码。

注意：

1、由于JS脚本语言的特征，不需要编译，所以即使代码有错误，仍旧会执行到有错误的地方才停止。
2、代码可以不需要分号结束。（不推荐）
3、var可以不写，但是建议还是写上。

3.2 数据类型

基本数据类型：

Number：js中数字类型只有一种，所以没有Java中的整数除以整数等于整数的问题。
String：通用的字符串类型，求长度是length属性。
布尔：true和false。
undefined：当获取某个变量的属性不存在，会返回一个undefined。即没有定义。
null：当获取的值为null时。

引用数据类型：数组和对象

数组：相当于Java中的数组和List的一个结合体。

代码演示

// 第一种定义方式：类似数组
var arr = [1,2,3];
// 第二种定义方式：类似集合，两种定义方式没有区别
var arr1 = new Array();
// 在控制台输出
console.log(arr[1]);
// 如果超出下标访问，不会出错，会显示undefined
console.log(arr[5]);
// 显示长度
console.log(arr.length);
// 给超出的下标赋值，成功
arr[10] = 10;
// 显示长度，显示11
console.log(arr.length);
// 中间的没有赋值的元素值为undefined
console.log(arr[8]);
// 把arr数组当集合操作
// 在最后添加一个新元素
arr.push(100);
// 遍历集合元素
for (var i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}
// 操作数组，
/*
	 参数1：从哪个下标开始操作
	 参数2：操作几个元素
	 参数3...：将操作的元素替换为
	 例如：
	 arr.splice(1, 1)；表示将数组中从1号下标开始的1个元素替换成没有，即删除一个元素
	 arr.splice(1, 5)；表示将数组中从1号下标开始的5个元素替换成没有，即删除5个元素
	 arr.splice(1, 0, 5)；表示将数组中从1号下标开始的0个元素替换成5，即在2号下标处插入一个元素5
	 arr.splice(1, 1, 5)；表示将数组中从1号下标开始的1个元素替换成5，即将2号下标修改成元素5
	 */
arr.splice(1, 1, 4,5,6,7)
// foreach循环（在js中叫for...in循环）,在js中for..in循环也是循环的下标
for (var num in arr) {
    console.log(arr[num]);
}

对象：相当于Java中的实体类或map。

// 定义一个对象或map，key可以加引号，也可以不加
var map = {name:"mary", "age":20}
// 以map的形式取值，以key作为下标访问
console.log(map["name"]);
// 以对象的形式取值
console.log(map.age);
// 赋值
map.sex = "男";
map["id"] = 1;
map.type = {id:1, name:"法师"}
console.log(map);
console.log(map.type.name);

3.3 运算符

与Java一样。

var str1 = "hello";
var str2 = "hello";
console.log(str1 == str2); // 字符串比较使用==，没有equals
var n1 = "2";
var n2 = 2;
console.log(n1 == n2); // 只是比较值是否相等，此处返回true
console.log(n1 === n2); // 比较值的同时，还要比较数据类型，此处返回false

3.4 分支和循环

分支中，if条件不需要使用Boolean值。
如果条件为一个变量，值为0、null、undefined、NaN表示false，否则为true。（NaN：not a number不是数字）
如果出现未定义的变量，会报错。

注意： 变量未定义和undefined的区别。

3.5 函数

函数是js中需要重点理解的内容。

// 定义一个函数，相当于Java中的方法
// 使用function关键字来声明
// fn1作为一个函数的名称
// 后面的()表示调用该函数
function fn1(){
    console.log("hello, world");
    return 5;
}
// 调用函数
fn1();

var n = fn1(); // 此处n等于5
var m = fn1; // 此处相当于把fn1这个函数名称赋值给m了，所以m就是fn1
m(); // 此处调用该方法

// 函数的参数, 可以给参数设置默认值，当没有传该参数时，会自动使用默认值
function fn2(n = 3, m = 5){
    console.log("fn2方法被调用");
    console.log(n);
    console.log(m);
}

fn2(); // 调用方法时，如果不传参，也可以调用该方法，参数会为undefined,如果有默认值会使用默认值
fn2("参数1");
fn2("参数1", "参数2");

// 将函数作为方法的参数
function fn3(m){
    m();
}

// 调用fn3
fn3(fn1);
// 自定义个变量，值为一个函数
var fn4 = function (){
    console.log("hello, fn4");
};
// 调用fn3
fn3(fn4);
// 说明函数的定义有两种方式。

// 定义一个对象，包含属性和方法。
var stu = {"name": "Jack", age : 20, "say":function(){
    console.log(this.name + ", " + this.age);
}};

// 输出属性和调用方法
console.log(stu.name);
stu.say();

// 奇葩的写法
function fn5(){
    return function (){
        return function (){
            return function (){
                console.log("hello, aaaa");
            };
        };
    };
}

fn5()()()();

// 实例
// 计算两个数字的值
function fn6(m){
    var n1 = 3;
    var n2 = 5;
    return m(n1, n2);
}

var re = fn6(function(n1, n2){
    return n1 + n2;
});

console.log(re);

3.6 系统自带函数

系统自带的函数，例如弹窗函数alert()，可以直接使用，不需要任何对象调用。那么这些不需要使用任何对象调用的函数或者变量（包括自定义的函数和变量），都是归属于window对象的。所以可以写作window.alert()。但是一般都会省掉。

var n = 5;
	
window.alert(window.n);

function fn1(){
    alert('我很好');
}

window.fn1();

3.6.1 弹窗函数

alert()：弹出一个确定框。
confirm()：弹出一个确定取消框，当点击确定时，返回true，点击取消，返回false。
prompt(‘提示信息’, ‘输入框默认值’)：弹出一个输入框。点击确定，会返回输入的内容，点击取消，返回null。

示例代码

var r = confirm('是否确定');
if(r){
    console.log('点击了确定');
}else{
    console.log('点击了取消');
}
// 实际应用案例
// <a href="https://www.baidu.com" οnclick="return confirm('确定要删除吗?')">删除</a>

var r = prompt('请输入姓名', 'zhangsan');
console.log(r);

3.6.2 常见的其他函数

parseInt() ：将内容转换成整数。如果是字符串，会从第一个字母开始转换，能转就转，不能转就返回NaN。也可以将小数转换成整数。
parseFloat()：将内容转换成小数。
isNaN() ：判断是否不是数字。

parseInt('100Hello'); // 返回100
parseInt('Hello100'); // 返回NaN
parseInt(100.5); // 返回100

3.7 事件

页面上HTML元素一些行为过程中产生的操作。
例如：按钮点击。产生点击事件
事件中一般都是调用js函数。

常见的事件如下：
鼠标相关事件：(所有事件前面都有单词on)

mouseover：当鼠标移动到元素上。
mouseout：当鼠标从元素上移出。
mousemove：鼠标在元素上移动。
mouseenter：当鼠标移动到元素上。
mouseleave：当鼠标从元素上移出。
mouseup：鼠标弹起。
mousedown：鼠标按下。
click：鼠标单击。

键盘事件：

keydown：键按下。
keyup：键弹起。

其他事件：

change：元素内容改变。
focus：元素获得焦点。
blur：元素失去焦点。
load：元素加载。
submit：表单提交。

四、内置对象

内置对象，JavaScript提供的预定义对象，不同的对象提供相应的方法，每个方法可以完成特定的功能

我们可以把JS中的内置对象类别为Java中的类

String 提供了对字符串的操作方法
Math 提供了数学运算相关的操作方法
Array 提供了数组的操作方法（相当于Java中数组和集合的合体）
Date 提供了日期/时间处理的相关方法
RegExp 用于验证数据是否满足特定的格式（手机号规则： ^1[3,5,6,7,8,9]\d{9}$ ）
全局对象(Functions Global)

在线参考手册：https://www.w3school.com.cn/jsref/index.asp

4.1 String

字符串，JS中所有值为字符串的变量都是String对象

代码演示

function testString(){
	//创建String对象
    var s = "www.baidu.com";
	
	// 常用属性(求字符串长度)
	var len = s.length;
	
    //charAt()  获取字符串中指定索引出的字符
    var r1 = s.charAt(5);
    //charCodeAt() 获取字符串中指定索引出的字符的ascii
    var r2 = s.charCodeAt(5); 

    //indexOf()   返回"."在s中第一次出现的位置 （如果s中不包含"."则返回-1）
    var r3 = s.indexOf(".");
    //lastIndexOf()   返回"."在s中第最后一次出现的位置
    var r4 = s.lastIndexOf(".");

    //replace()  将s中的第一个“.”替换成@
    var r5 = s.replace(".","@");

    //split()  将s字符串以"."进行分割成多个字符串存放在数组中
    var arr = s.split(".");

    //substring(i) 从s中索引为4的位置(包含)开始截取直到字符串末尾
    var r6 = s.substring(4);

    //substring(i，j)  从s中索引为4开始截取（包含），到索引为6结束（不包含）
    var r7 = s.substring(4,6);

    //substr(4,6) 从s中索引为4开始截取（包含）,共截取6个字符	
    var r8 = s.substr(4,6);

    //match(reg) 验证当前字符串是否满足特定的规则，如果不满足则返回null
    var s1 = "14030303300";
    var r9 = s1.match("1[3,5,6,7,9]\\d{9}");


}

4.2 Math

相当于Java中的Math类，其中包含的常量和方法都是“静态”的

常量

var pi = Math.PI;
var e = Math.E;

常用方法

function testMath(){
    //常量
    var pi = Math.PI;
    var e = Math.E;

    //方法
    //产生[0,1)之间的随机小数
    var r1 = Math.random();

    //Math.floor(m);  获取小于m的最大整数
    var r2 = Math.floor(-3.672);

    //Math.ceil(m);  获取大于m的最小整数
    var r3 = Math.ceil(-3.00001);

    //四舍五入
    var r4 = Math.round(3.499);

    alert(r4);
}

4.3 Array

数组，兼具Java中数组和集合的特性

长度可变
索引操作

属性和方法

function testArray(){
    //定义Array对象
    var arr1 = new Array();
    var arr2 = new Array("aaa","bbb","ccc");

    arr1[0] = "a";
    arr1[1] = "c";
    arr1[2] = "b";

    //length属性，获取数组的长度		
    var len = arr1.length;


    //arr2.concat(arr1) 将arr2和arr1合并成一个数组  
    var r1 = arr2.concat(arr1);

    //join 取出当前数组中的元素拼接成字符串（默认使用,拼接;可以通过参数指定拼接符号）
    var r2 = arr2.join("-");

    //pop()  出栈，从数组中取出最后一个元素，并从原数组中移除
    var r3 = arr2.pop();

    //push(e) 入栈，在数组最后面添加一个元素
    arr2.push("ddd");

    //reverse()  将原数组中的元素进行反转
    arr2.reverse();

    //sort排序 
    arr1.sort();
}

4.4 Date

日期

常用方法

function testDate(){

    //new一个Date对象表示当前系统时间
    var date = new Date();

    var y1 = date.getYear();	 //获取年份相对于1900年的偏移值
    var year = date.getFullYear();
    var month = date.getMonth()+1;	//0-11 表示1-12月
    var d = date.getDate();  //获取到日期
    var hour = date.getHours();
    var min = date.getMinutes();

    var sec = date.getSeconds();
    sec = sec<10?"0"+sec:sec;

    var day = date.getDay(); //获取星期

    var time = year+"年"+month+"月"+d+"日  "+hour+":"+min+":"+sec+" 星期"+day;

    document.getElementById("timeHeader").innerHTML = time;

    setTimeout("testDate()",1000);
}

4.5 RegExp

正则校验，验证用户输入的数据是否满足特定的规则
定义的规则——正则表达式

4.5.1 正则表达式

用特定的符号来定义某种数据格式（规则）

元字符定义一些符号表示特定的字符串组成
- \d 数字
- \w 字符 [a-zA-Z0-9]
方括号
- 0-9
量词设定特定符号的循环次数
- + 至少出现一次 {1,}
- *0次或多次 {0,}
- {5} 必须出现5次
- {5,10} 至少循环5次，最多循环10次
- {5,} 至少循环5次
定义一个正则表达式

var reg = "^\d{3}-\d{8}|\d{4}-\d{7}$";

4.5.2 RegExp进行正则校验

创建RegExp对象

var regExp = new RegExp("^1[3,5,7,9]\d{9}$");
var regExp = /^1[3,5,7,9]\d{9}$/;

常用方法

<input type="text" id="tel"/><label id="tips"></label>
<hr />
<button onclick="testRegExp()">测试RegExp</button>

代码演示

// 修饰符i(忽略大小写), g(全局), m（多行匹配）
// 正则表达式的创建
// 使用new创建
var r1 = new RegExp('[abc]', 'i');
var r2 = /[abc]/i;
// 正则表达式的使用
console.log(r1.test("b")); // 返回一个布尔值
console.log("c".match(r2)); // 返回一个数组，表示匹配的内容

// 说明[abc]表示一个字符，该字符需要满足是abc中的一个
console.log(r2.test("d"));
// 匹配所有的字母
var r3 = /^[^a-zA-Z]$/; // 此处^表示匹配字符串的开始，$表示匹配字符串的结束
// 中括号表示一个字符，中括号中间的^表示取反
console.log(r3.test("1"));

var r4 = /^(abc|def|hij)$/; // 此处|表示或者，小括号就表示区分
console.log(r4.test("def"));

// \w \W \d \D \s \S .这些元字符来匹配相应的内容，分别对应数字字母下划线，非数字字母下划线，数字，非数字，空格，非空格，非换行的任意字符

var r5 = /^[\w]$/;  // 匹配一个字母
console.log(r5.test("_"));

// + 1到多，* 0到多，? 0到1，{5} 5次，{5,} 5到多次，{6,12}6到12次
var r6 = /^[\w]+$/;  // 匹配1到多个字母
console.log(r6.test("a"));

var r7 = /^[\w]*$/;  // 匹配0到多个字母
console.log(r7.test(""));

var r8 = /^[A-z][A-z0-9]{5,11}$/; // 由字母数字组成，6到12位
console.log(r8.test("2sdjfsdf"));

4.6 Functions

Functions实际上是一个虚拟的内置对象，在JS中提供了一些全局的JS方法，我们认为这些全局方法都属于这个虚拟的全局内置对象 global

var s = "123";
var m = Functions.parseInt(s);

常用方法

function testFunctions(){
    //escape
    var s1 = "https://www.baidu.com/s?kw=姜子牙"; 

    //escape对字符串中的符号和汉字进行编码
    var s2 = escape(s1);
    //unescape 反编码、解码
    var s3 = unescape(s2);

    //对url的参数部分进行编码
    var s4 = encodeURI(s1);
    //对url编码后的字符串进行解码
    var s5 = decodeURI(s4);

    var s6 = "345";
    //将字符串转换成浮点数
    var s7 = parseFloat(s6);
    //将字符串转换成整数
    var s8 = parseInt(s6);

    var s9 = '{"stuNum":"10001","stuName":"王二狗","stuAge":21}';
    //对满足特定格式（JSON）的字符串进行格式化
    var s10 = eval("("+s9+")");

    alert(s10.stuName);
}

五、BOM

5.1 BOM介绍

BOM （Browser Object Model）浏览器对象模型，JS作为一种脚本语言寄生在HTML文档中，用于实现对HTML文档的动态操作，因为HTML文档是通过浏览器窗口进行显示的，JS为了更好的实现对HTML文档的控制，提供了一些列对象用于获取或设置当前HTML文档的显示环境。

window(顶层对象) 打开当前HTML文档的浏览器窗口，它是HTML文档直接显示容器
- window.navigator 打开当前浏览器窗口的浏览器应用
- window.screen 打开当前浏览器的显示屏
- window.history 当前浏览器窗口浏览历史记录
- window.location 当前浏览器窗口的地址栏

5.2 window对象

常用属性

closed
length
name
self/parent/top

在这里插入图片描述

//login.html
<script type="text/javascript">
    if(window.top != window.self){
        window.top.location = window.self.location;
    }
</script>

status 状态栏

//设置当前浏览器窗口的状态栏文本
window.status = "☆★☆★☆★☆★☆★☆★☆★☆★☆★";
//获取到当前浏览器窗口的状态栏文本
var v4 = window.status;

常用方法

alert();
confirm();
prompt();
open();

setTimeout/clearTimeout

<button onclick="testSetTimeout()">测试setTimeout</button>
<button onclick="testClearTimeout()">测试clearTimeout</button>

var task1;
function testSetTimeout(){
    //延时调用：延迟指定时间调用指定方法（只调用一次）
    task1 = setTimeout("test()",3000);
}

function testClearTimeout(){
    clearTimeout(task1);
}

function test(){
    alert(1);
}

setInterval/clearInterval

<button onclick="testSetInterval()">测试setInterval</button>
<button onclick="testClearInterval()">测试clearInterval</button>

var task2;
function testSetInterval(){
    //循环调用：每隔指定的时间就调用一次指定的方法（不停的调用）
    task2 = setInterval("test()",2000);
}

function testClearInterval(){
    clearInterval(task2);
}

function test(){
    alert(1);
}

5.3 navigator对象

浏览器对象，只读

<button onclick="testNavigator()">测试navigator</button>
<script type="text/javascript">
    function testNavigator(){
        //navigator 我们可以理解为只读对象，用于获取浏览器的属性
        var v1 = navigator.appCodeName;
        var v2 = navigator.appName;
        var v3 = navigator.appVersion;

        //检查浏览器是否启用cookie
        var b = navigator.cookieEnabled;

        //使用JS操作cookie
        //写cookie
        document.cookie = "key1=value1";
        document.cookie = "key2=value2";

        document.cookie= "key2=value3";
        //读cookie 
        var kv = document.cookie;

        alert(kv);
    }
</script>

5.4 screen对象

客户端屏幕对象，只读

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<button onclick="testScreen()">测试screen</button>
		<script type="text/javascript">
			
			function testScreen(){
				//返回设备的一英寸的物理像素点
				var xdpi = screen.deviceXDPI;
				var ydpi = screen.deviceYDPI;
				
				//返回屏幕的可用宽度和高度（除windows的任务栏）
				var aw = screen.availWidth;
				var ah = screen.availHeight;
				
				//返回屏幕的宽度和高度
				var w = screen.width;
				var h = screen.height;
				alert(w+"*"+h);
			}
			
		</script>
	</body>
</html>

5.5 history对象

当前浏览器窗口的历史纪录

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		This is Page C.
		<hr/>
		<a href="d.html">D</a>
		
		<br/>
		<button onclick="syy2()">后退2</button>
		<button onclick="syy()">后退</button>
		<button onclick="xyy()">前进</button>
		<button onclick="xyy2()">前进2</button>
		
		<script type="text/javascript">
			function syy2(){
				history.go(-2);
			}
			function syy(){
				history.back(); //go(-1)
			}
			function xyy(){
				history.forward();//go(1)
			}
            
            //前进2页，自行完成
		</script>
	</body>
</html>

5.6 location对象

浏览器窗口的地址栏

属性

//location.herf  表示地址栏中的地址0

//获取地址信息
var url = location.herf;

//设置当前窗口的地址信息（实现跳转）
location.href = "https://www.baidu.com";

**方法

//用指定的url替换当前地址栏url（实现跳转）
location.replace("https://www.baidu.com");

//刷新当前地址栏（刷新网页）
location.reload();

六、DOM

DOM：document object model，文档对象模型。DOM操作就是指使用js操作页面上的标签和css样式。

6.1 DOM树

满足XML规范的文档我们可以看作一颗数的结构

在这里插入图片描述
术语

元素 HTML标签及其属性和所有子标签的整体
节点 HTML文档中的标签、属性、文本统称为节点
- 层级：子节点、父节点、根节点
- 类型：标签节点、属性节点、文本节点

6.2 document对象

document对象，表示当前HTML文档，通过document可以获取当前HTML文档中的任何一个元素。

集合属性

//all  获取当前文档中的所有元素
var arr1 = document.all;

//forms 获取当前文档中所有的表单元素
var arr2 = document.forms;
//表单元素可以执行： e.submit() 提交表单

//images 获取当前文档中所有的图片
var arr3 = document.images;

//links 获取当前文档中所有的超链接(a、area)
var arr4 = document.links;

属性

//cookie
//设置/修改cookie键值对
document.cookie = "key=value";
document.cookie = "key1=value2";
//获取cookie(字符串)
var c = document.cookie;

//返回当前文档的域名
var domain = document.domain;
//返回当前文档的url
var url = document.URL;

//获取当前文档的标题
var title = document.title;
//设置当前文档的标题
document.title="从前有座山";

方法

//write 使用指向文档的输出流输出指定的内容（会覆盖原有的内容）
document.writeln("<label style='color:orange'>从前有座山</label>");
document.writeln("<br/>");
document.write("<label style='color:red'>山里有座庙</label>");
//document.close();
//document.open();
document.write("<label style='color:red'>庙里有口井</label>");

//getElementsByTagName 根据标签名获取页面中的元素(数组)
var arr5 = document.getElementsByTagName("tr");

//getElementsByClassName 根据标签的class属性获取页面中的元素（数组）
var arr6 = document.getElementsByClassName("inputStyle");

//getElementsByName  根据标签的name属性获取页面中的元素（数组）
var arr7 = document.getElementsByName("hobby");

//getElementById 根据标签的id属性获取页面中的某一个元素
var e = document.getElementById("btn");

6.3 DOM操作

DOM操作，指定就是对HTML文档中节点（标签、属性、文本）的操作

6.3.1 节点基本操作

<div id="div1" style="width:600px; height: 300px; background: pink;">wahaha<h4>枫桥夜泊</h4><p>-张继-</p><p>月落乌啼霜满天，</p><p>江枫渔火对愁眠；</p><p>姑苏城外寒山寺，</p><p>夜半钟声到客船。</p></div>

<button onclick="testDocument()">DOM操作</button>
<script type="text/javascript">
    function testDocument(){
        //                nodeType	nodeName   nodeValue
        //标签节点（元素）     1		 标签名      null
        //属性节点（属性）     2		 属性名      属性值
        //文本节点			  3		    #text     文本值
        var tagNode = document.getElementById("div1");

        //获取标签节点的属性（数组,属性节点）
        var attrNodes = tagNode.attributes;

        //获取标签节点的子节点（包括文本子节点、标签子节点）
        var cns = tagNode.childNodes;

        //获取当前节点的父节点（标签节点）
        var bodyTag = tagNode.parentNode;


		var node = tagNode;
		var type = node.nodeType;
		var name = node.nodeName;
		var value = node.nodeValue;
		console.log("nodeType:"+type);
		console.log("nodeName:"+name);
		console.log("nodeValue:"+value);
    }
</script>

6.3.2 innerHTML/outerHTML属性

// innerHTML 获取/设置当前标签中的内容
// 获取
var s1 = tagNode.innerHTML;
// 设置
//tagNode.innerHTML="wahaha";

// outerHTML 获取/设置当前签内容（当前标签和其中的内容）
// 获取
var s2 = tagNode.outerHTML;
// 设置
tagNode.outerHTML = "<p>a</p>"

6.3.3 节点操作

document.createElement(tagName) 创建标签节点
parent.appendChild(newNode);将新节点拼接到parent节点中
parent.insertBefore(newChild,refChild); 将newChild作为parent的子节点插入到refChild之前
parent.replaceChild(newChild,oldChild); 使用newChild替换oldChild
currentNode.replaceNode(newNode); 使用newNode替换currentNode(IE支持)
currentNode.remove();删除当前节点
parent.removeChild(childNode);从当前父节点中删除指定的子节点
currentNode.removeAttribute(String attrName); 删除当前节点的属性

综合案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="div1" style="width:600px; height: 400px; background: pink;">
			<h4>枫桥夜泊</h4>
			<p id="p0">-张继-</p>
			<p id="p1">月落乌啼霜满天，</p>
			<p>江枫渔火对愁眠；</p>
			<p>姑苏城外寒山寺，</p>
			<p>夜半钟声到客船。</p>
		</div>
		<button onclick="testNode()">节点操作</button>
		
		<script type="text/javascript">
			function testNode(){
				//1.创建新节点
				//document.createElement(tagName)  创建标签节点
				var imgTag = document.createElement("img"); // <img/>
				//createAttribute  创建属性节点
				//var attrNode = document.createAttribute("src");
				
				//2.给元素添加属性
				imgTag.src = "img/c.jpg";
				imgTag.id = "myImg";
				imgTag.height="100";
				
				//3.拼接子节点
				var divTag = document.getElementById("div1");
				// parent.appendChild(newChild); 将新节点拼接到parent节点中
				//divTag.appendChild(imgTag);
				
				//4.插入子节点
				var p1 = document.getElementById("p1");
				//parent.insertBefore(newChild,refChild); 将newChild作为parent的子节点插入到refChild之前
				//divTag.insertBefore(imgTag,p1);
				
				//5.替换子节点
				var p0 = document.getElementById("p0");
                //parent.replaceChild(newChild,oldChild); 使用newChild替换oldChild
				//divTag.replaceChild(imgTag,p0);
				
				//6.替换节点（浏览器兼容）
				// currentNode.replaceNode(newNode); 使用newNode替换currentNode
				//divTag.replaceNode(imgTag);
				
				//7.删除节点
				// currentNode.remove(); 删除当前节点
				//p0.remove();
				
				//8.删除子节点
				// parent.removeChild(childNode); 从当前父节点中删除指定的子节点
				//divTag.removeChild(p0);
				
				//9.删除节点的属性
				//divTag.removeAttribute("id");
			}
				
		</script>
	</body>
</html>

七、JS操作HTML标签的属性和样式

7.1 JS操作HTML属性

获取、设置元素属性值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<img src="img/a.jpg" width="100" id="img01"/><br />
		<button onclick="changeImgSize()">改变图片大小</button>
		
		<script type="text/javascript">
			function changeImgSize(){
				var img = document.getElementById("img01");
				
				//1.获取标签属性值   var v = e.attrName;
				var w = img.width;
				
				//2.设置标签属性  e.attrName = v;
				img.width = w+10;
			}	
		</script>
	</body>
</html>

7.2 JS操作HTML样式

获取、设置HTML标签的样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#div1{
				width: 200px;
				height: 200px;
			}
		</style>
	</head>
	<body>
		<div id="div1" style="border: 1px solid red;color: blue;">
			床前明月光
		</div>
		<input type="button" value="修改样式" onclick="fn1()"/>
	</body>
</html>
<script>
	function fn1(){
		// 得到元素
		var div1 = document.getElementById('div1');
		// 以修改属性的方式修改样式, 会覆盖之前的内容
//		div1.style = "background-color: #ccc;";
		// 如果不希望覆盖，而是想添加新的样式，可以使用两种方式：
		// 1. 将原来的样式再写一次
//		div1.style = "border: 1px solid red;color: blue; background-color: #ccc;";
		// 2. 只修改样式的一个值，此方式样式属性名称与原本的名称可能不一致，此处是标准的命名方式
		div1.style.backgroundColor = "#ccc";
		// 获取行内样式值
		var color = div1.style.color;
		console.log(color);
		// 获取非行内样式的值
//		var width = div1.style.width; // 无法获取
//		console.log(width);
		width = window.getComputedStyle(div1)["width"]; // chrome, firefox等主流的浏览器写法
		console.log(width);
		// IE的写法
//		width = div1.currentStyle["width"];
//		console.log(width);
		// 调用下面的方法
		width = getStyle(div1, "width");
		console.log(width);
	}
	
	// 获取样式（兼容不同的浏览器）
	function getStyle(elem, attr){
		// 如果该属性存在, chrome, firefox等主流的浏览器以及IE9+的写法
		if(window.getComputedStyle){
			return window.getComputedStyle(elem)[attr];
			// 低版本的IE写法
		}else if(elem.currentStyle){
			return elem.currentStyle[attr];
		}else{
			return null;
		}
	}
</script>

八、JS操作文档中的标签（节点操作）

综合案例：省市区联动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		省份:<select id="province" onchange="showCity(this)"></select> 
		城市:<select id="city" onchange="showRegion(this)"><option>请选择</option></select>
		区/县:<select id="region"><option>请选择</option></select>
		<script>

			var info = '[{"provinceName":"湖北省","citys":[{"cityName":"武汉市","regions":[{rName:"洪山区"},{rName:"江夏区"},{rName:"硚口区"}]},{"cityName":"黄石市","regions":[{rName:"洪山区2"},{rName:"江夏区2"},{rName:"硚口区2"}]},{"cityName":"大冶市","regions":[{rName:"洪山区3"},{rName:"江夏区3"},{rName:"硚口区3"}]}]},{"provinceName":"湖南省","citys":[{"cityName":"长沙市"},{"cityName":"常德市"}]},{"provinceName":"安徽省","citys":[{"cityName":"六安市"},{"cityName":"淮北市"},{"cityName":"淮南市"}]}]';
			var arr = eval("("+info+")");
			showProvince();
			function showProvince(){
				
				var provinceTag = document.getElementById("province");
				provinceTag.innerHTML = "<option>请选择</option>";		
				
				for (var i = 0; i < arr.length; i++) {
					var pname = arr[i].provinceName;
					
					// 将每个省份生成一个选项option
					var optionTag = document.createElement("option");
					
					optionTag.innerHTML = pname;
					optionTag.value = pname;
					// 显示到省份的下拉菜单中
					provinceTag.appendChild(optionTag);
				}
			}
			
			function showCity(province){
				// 1.获取已选择的省份
				var pname = province.value;
				
				var cityTag = document.getElementById("city");
				
				cityTag.innerHTML = "<option>请选择</option>";		
				//2.找到省份对应的城市数组
				
				var cityArr;
				for (var i = 0; i < arr.length; i++) {
					var province = arr[i];
					if(province.provinceName == pname){
						
						cityArr = province.citys;
						break;
					}
				}
				for (var i = 0; i < cityArr.length; i++) {
					
					var cname = cityArr[i].cityName;
					
					// 将每个省份生成一个选项option
					var optionTag = document.createElement("option");
					
					optionTag.innerHTML = cname;
					optionTag.value = cname;
					// 显示到省份的下拉菜单中
					cityTag.appendChild(optionTag);
					
				}
					
			}
			
			function showRegion(city){
				var cname = city.value;
				
				var regionTag = document.getElementById("region");
				
				regionTag.innerHTML = "<option>请选择</option>";
				
				var regionArr;
				
				// 1.获取已选择的省份
				var pname = document.getElementById("province").value;
				
				
				var regionArr;
				for (var i = 0; i < arr.length; i++) {
					var province = arr[i];
					if(province.provinceName == pname){
						
						var cityArr = province.citys;
						for (var i = 0; i < cityArr.length; i++) {
							var city = cityArr[i];
							if(city.cityName == cname){
								
								regionArr = city.regions;
								break;
							}
						}
	
						break;
					}
					
				}
				
				for (var i = 0; i < regionArr.length; i++) {
					
					var rname = regionArr[i].rName;
					
					// 将每个省份生成一个选项option
					var optionTag = document.createElement("option");
					
					optionTag.innerHTML = rname;
					optionTag.value = rname;
					// 显示到区的下拉菜单中
					regionTag.appendChild(optionTag);
					
				}
				
			}

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

九、AJAX

9.1、同步请求和异步请求

异步请求：在页面不刷新（不发生跳转）的前提下实现和服务端的交互

9.1.1 同步请求（登录）

在这里插入图片描述

9.1.2 异步请求（登录）

在这里插入图片描述
异步请求的应用场景

当页面中有大量的数据，但只需更新其中的某一部分数据时
对页面中的数据进行正确性校验
前后端分离开发的项目

9.2、异步请求的执行流程

异步请求是如何实现的？

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。
流程：页面使用js的方式发送请求—》后台处理请求，并采用out.write()的方式返回JSON/xml格式的数据（不能跳转页面）—》页面接收到返回的JSON/xml数据后根据返回的数据使用js来改变页面的内容。

案列判断用户名可用

在这里插入图片描述

9.3、AJAX的实现

创建请求对象

//1.创建ajax请求对象（不同类型的浏览器创建ajax请求对象的方式是不一样的）
if(window.XMLHttpRequest){
    ajaxReq = new XMLHttpRequest();
}else{
    ajaxReq = new ActiveXObject("Microsoft.XMLHTTP");
}

封装请求数据

//2.封装请求数据(请求方式、请求路径、参数) open
//open(method, url, async), 
//method指get或post
//url：请求的url
//async：是否异步，true表示异步，false同步
//如果要发送post请求，需要先设置,setRequestHeader("content-type", "application/x-//www-from-urlencoded")

var name = document.getElementById("userName").value;
ajaxReq.open("get","check?username="+name,true);

指定回调函数（处理响应结果）

//3.监听ajax请求状态变化 （回调函数）
//处理响应结果时，需要使用readyState的4状态，以及status的200状态码。
//处理响应时，应该使用responseText或者responseXML属性。

ajaxReq.onreadystatechange = test;

发送请求

//当请求方式为post时，可以通过send函数的参数实现请求体传值（body）
ajaxReq.send(null);

处理响应结果

 function test(){
     //5.在回调函数中，当readyState==4 同时 http状态为200 时，获取响应结果
     if(ajaxReq.readyState == 4 && ajaxReq.status==200){
         //6.从ajaxReq中获取servlet响应的结果
         var data = ajaxReq.responseText;
         //7.处理结果
         var label = document.getElementById("user-name-label");
         if (data=="yes"){
             label.innerHTML="√ 用户名可用";
             label.style.color="green";
         }else{
             label.innerHTML="× 用户名不可用";
             label.style.color="red";
         }
     }
 }

Servlet响应AJAX请求

@WebServlet("/check")
public class CheckUserNameServlet extends HttpServlet {

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req, resp);
    }

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1.接收用户名
        String username = request.getParameter("username");
        System.out.println("----------"+username);

        //2.检查用户名是否可用
        String r = username.indexOf("admin")>=0?"no":"yes";

        //3.在servlet中通过输出流响应ajax请求
        PrintWriter out = response.getWriter();
        out.print(r);
        out.flush();
        out.close();
    }
}

9.4 ajax请求状态

ajaxReq请求对象有一个readyState属性：标识请求进行的哪一步
- 0 ajax请求对象已经创建，但未进行初始化
- 1 ajax请求对象已经调用open完成初始化，但未调用send发送请求
- 2 ajax请求已发送
- 3 ajax请求已到达服务器，正在进行交互
- 4 ajax请求与服务器交互已结束

十、JSON

10.1.什么是JSON?

JSON就是一种各种语言公认的数据格式
JSON格式：javascript object notation。js对象标记。
特点：体积小，方便使用JavaScript操作。

在这里插入图片描述

10.2.JSON格式说明

在这里插入图片描述

10.3.如何进行JSON格式转换？

10.3.1 Java中实现JSON和对象的转换

阿里 fastjson
谷歌 jackson
在项目中导入所需的jar包
实现转换

public class TestJSON {
    public static void main(String[] args) throws Exception{
        js();
    }


    // jackson
    public static void js()throws Exception{
        // java对象
        Users users = new Users("1", "张三丰", "200", "男");
        // 集合对象
        List<Users> usersList = Arrays.asList(
                new Users("1", "zhangsan", "20", "男"),
                new Users("2", "lisi", "21", "男"),
                new Users("3", "wangwu", "22", "男"));
        // java对象转json
        ObjectMapper mapper = new ObjectMapper();// 用来转换格式的对象
        String s = mapper.writeValueAsString(users);
        System.out.println(s);
        String s1 = mapper.writeValueAsString(usersList);
        System.out.println(s1);

        // json转换成对象
        Users u1 = mapper.readValue(s, Users.class);
        System.out.println(u1);
        // json转换成集合对象
        List<Users> list = mapper.readValue(s1, new TypeReference<List<Users>>() {});
        System.out.println(list);
    }

    // google出品gson(了解，差不多用法)

    // ali出品fastjson
//    public static void fj(){
//        // java对象
//        Users users = new Users("1", "张三丰", "200", "男");
//        // 集合对象
//        List<Users> usersList = Arrays.asList(
//                new Users("1", "zhangsan", "20", "男"),
//                new Users("2", "lisi", "21", "男"),
//                new Users("3", "wangwu", "22", "男"));
//        // java对象转json
//        String jsonString = JSON.toJSONString(users);
//        System.out.println(jsonString);
//        String string = JSON.toJSONString(usersList);
//        System.out.println(string);
//
//        // json转成java对象
//        Users u = JSON.parseObject(jsonString, Users.class);
//        System.out.println(u);
//        List<Users> list = JSON.parseObject(string, new TypeReference<List<Users>>() {}.getType());
//        System.out.println(list);
//    }

    // 手动转json
    public static void sd(){
        // 1. 手(sha)动(gua)解析
        // java对象
        Users users = new Users("1", "张三丰", "200", "男");
        // 自(bie)己(ren)拼接
        String jsonString = "{id:\""+users.getId()+"\", username:\""+users.getUsername()
                +"\", age:\""+users.getAge()+"\", sex:\""+users.getSex()+"\"}";
        System.out.println(jsonString);

        // 集合对象
        List<Users> usersList = Arrays.asList(
                new Users("1", "zhangsan", "20", "男"),
                new Users("2", "lisi", "21", "男"),
                new Users("3", "wangwu", "22", "男"));
        StringBuilder arrJsonString = new StringBuilder("[");
        for (int i = 0; i < usersList.size(); i++) {
            Users user = usersList.get(i);
            arrJsonString.append("{id:\""+user.getId()+"\", username:\""+user.getUsername()
                    +"\", age:\""+user.getAge()+"\", sex:\""+user.getSex()+"\"}");
            if (i != usersList.size() - 1){
                arrJsonString.append(",");
            }
        }
        arrJsonString.append("]");
        System.out.println(arrJsonString.toString());
    }
}

10.3.2 JavaScript中实现JSON转JS对象

 var jsonStr = ajaxReq.responseText;
//将json转换成JS对象
var goodsList = eval("("+jsonStr+")");
console.log(goodsList);

缘灬小太阳

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
JavaScript新手入门学习笔记

JavaScript介绍1.1 前端三要素HTML 超文本标记语言决定了网页中的视图内容CSS 层叠样式表决定了网页中的视图效果JavaScript 赋予网页动态功能1.2 JavaScript简介JavaScript是一种基于对象的事件驱动型、弱类型的脚本语言基于对象：区别于Java中的面向对象，遵循对象.方法的规则，但是没有类的概念事件驱动：脚本语言代码需要由网页中的事件来触发执行脚本语言：JS作为寄生语言，写在HTML网页中JavaScript在1995年
复制链接

扫一扫

专栏目录