JavaScript新手入门学习笔记

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
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值