单词
syntax：语法 invalid：无效的 assignment：赋值
Uncaught SyntaxError: Invalid left-hand side in assignment
未捕获的语法错误:赋值的左边无效
focus：焦点 onfocus：获取焦点 blur：模糊 onblur：失去焦点
prevent：阻止 event：事件 sibling：兄弟 previous：以前的
css的引入方式
三种：行内式、内嵌式、外部样式表
js的引入方式
内嵌式：在head标签里面通过script标签定义脚本代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.btn1{
width: 150px;
height: 40px;
font-size: 24px;
font-family: "隶书";
background-color: yellow;
color: rgb(154, 73, 73);
border: 3px solid rgb(166, 87, 87);
border-radius: 5px;
}
</style>
<script>
/*
1.js如何声明函数 function 函数名(){}
2.函数如何和单机按钮的行为绑到一起》
3.弹窗如何提示？
*/
function suprise(){
//弹窗提示
alert("hello 我是惊喜");
}
</script>
</head>
<body>
<button class="btn1" ondblclick="suprise()">点我有惊喜</button>
</body>
</html>引入外部脚本文件：在head中通过script标签引入外部js文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.btn1{
width: 150px;
height: 40px;
font-size: 24px;
font-family: "隶书";
background-color: yellow;
color: rgb(154, 73, 73);
border: 3px solid rgb(166, 87, 87);
border-radius: 5px;
}
</style>
<script src="./js/button.js" type="text/javascript"></script>
</head>
<body>
<button class="btn1" ondblclick="suprise()">点我有惊喜</button>
</body>
</html>js的数据类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>变了和数据类型</title>
<script>
/*
1.js的变量的声明 通通使用var
js是弱类型的，不是没有类型，是变量在声明时不指定类型，赋值时才确定类型
2.js中的常见的数据类型
数值类型 number 整数 小数
字符串类型 string
布尔类型 boolean
引用类型 Object
function类型 function
命名未赋值 类型 undefind 值 undefind
赋予null 类型 Object 值 null
判断数据类型的运算符 typeof
*/
var i = 10;
var str = "abc";
console.log(i);
console.log(typeof i);
console.log(str);
console.log(typeof str);
var x;
console.log(x);
console.log(typeof x);
var y = null;
console.log(y);
console.log(typeof y);
i = 1>10;
console.log(i);
console.log(typeof i);
i = new Object();
console.log(i);
console.log(typeof i);
var fun1 = function(){
}
console.log(fun1);
console.log(typeof fun1);
function fun1(){
}
console.log(fun1);
console.log(typeof fun1);
</script>
</head>
<body>
</body>
</html>
运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
/**
1.算数 + - * / %
除0 Infinity 无穷
取模 NaN not a number
2.复合算数 ++ -- += -= *= /= %=
除0 Infinity 无穷
取模 NaN not a number
3.关系 > < >= <= != == ===
== 如果俩端的数据类型不一致，会尝试将俩端的数据转换为number再对比
'123' -> 123
true -> 1
false -> 0
=== 如果俩端的数据类型不一致，直接返回false，相同会继续对比
4.逻辑 || &&
5.条件 条件表达式? 值1 : 值2
6.位 | & ^ << >> >>>
*/
console.log(10/2)
console.log(10/4)
console.log(10/0) //Infinity 无穷
console.log(10%0) //NaN not a number
var i = 10;
console.log(i /= 0) //Infinity 无穷
console.log(i %= 0) //NaN not a number
console.log(1==1);
console.log(1=='1');
console.log(1==true);
console.log(1===1);
console.log(1==='1');
console.log(1===true);
</script>
</head>
<body>
</body>
</html> 
分支结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
/*
if
switch
*/
//根据月份输出季节
var monthStr = prompt("请输入月份");
/*
prompt返回的结果就是用户在窗口上输入的值，以string类型返回的
*/
console.log(typeof monthStr)
//字符串转换成整数
var month = Number.parseInt(monthStr)
console.log(typeof month)
if (month == 12 || month == 1 || month == 2) {
console.log("春季");
} else if (month >= 3 && month <= 5) {
console.log("夏季");
} else if (month == 6 || month == 7 || month == 8) {
console.log("秋季");
} else if (month == 9 || month == 10 || month == 11) {
console.log("冬季");
} else {
console.log("输入月份错误");
}
/*
1.非空字符串，会判断为trye
1.非空对象，会判断为trye
1.非0number，会判断为trye
*/
if ('false') { //true
console.log(true);
} else {
console.log(false);
}
if ('') { //fasle
console.log(true);
} else {
console.log(false);
}
if (null) { //false
console.log(true);
} else {
console.log(false);
}
if (new Object) { //true
console.log(true);
} else {
console.log(false);
}
if (0) { //false
console.log(true);
} else {
console.log(false);
}
if (1) { //true
console.log(true);
} else {
console.log(false);
}
if (3.1) { //true
console.log(true);
} else {
console.log(false);
}
/*
swtich
*/
var monthStr = prompt("请输入月份")
var month = Number.parseInt(monthStr)
switch (month) {
case 12:
case 1:
case 2:
console.log("冬季");
break;
case 3:
case 4:
case 5:
console.log("冬季");
break;
case 6:
case 7:
case 9:
console.log("冬季");
break;
case 9:
case 10:
case 11:
console.log("冬季");
break;
default:
console.log("输入错误")
}
</script>
</head>
<body>
</body>
</html>js循环结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var i = 1;
while (i <= 9) {
var j = 1;
while (j <= i) {
document.write(j + "*" + i + "=" + j * i + " ")
j++;
}
document.write("<hr>")
i++;
}
document.write("<br/>")
for (var i = 1; i <= 9; i++) {
for (var j = 1; j <= i; j++) {
document.write(j + "*" + i + "=" + j * i + " ")
}
document.write("<hr>")
}
document.write("<br/>")
var arr = ["北京", "上海", "广州"]
document.write("<ul>")
for (var index = 0; index < arr.length; index++) {
document.write("<li>" + arr[index] + "</li>")
}
document.write("</ul>")
/*
foreach
*/
document.write("<br/>")
var city = ["山西","太原","阳曲"];
document.write("<ol>")
for(var index in city){ //index代表索引
console.log(index) // 0 1 2
document.write("<li>" + city[index] + "</li>")
}
document.write("</ol>")
</script>
</head>
<body>
</body>
</html>js函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
/*
函数声明的语法
1.function 函数名(){}
2.var 函数名 = function(){}
和java相比有如下的特点
1.没有访问修饰符
2.没有返回值类型也没有void如果有值要返回，则直接return即可
3.没有异常列表
4.调用方法时，实参和形参可以在数量上不一致,在方法内部可以通过 argument获得调用时的实参
5.函数也可以作为参数传递给另一个方法
*/
//函数的声明
//第一种
function sum1(a, b) {
return a + b
}
//第二种
var sum2 = function (a, b) {
console.log(arguments)
return a + b
}
//函数的调用
var result1 = sum1(10, 20)
console.log(result1)
var result2 = sum2(100, 200,300)
console.log(result2)
//5.
function add(getSum){
return getSum(20,30)
}
var result3 = add(sum1)
console.log(result3)
</script>
</head>
<body>
</body>
</html>
js声明对象的语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
/*
//创建对象的语法
方式1 new Object()
方式2 {属性名:属性值, ... ... ,函数名:function(){}}
*/
//方式一
var person = new Object()
//对象的属性
person.name = "张三"
person.age = 10
//对象的方法
person.eat = function (foot) {
console.log(this.age + "岁" + this.name + "正在吃" + foot)
}
//访问属性
console.log(person.name)
console.log(person.age)
//调用方法
person.eat("火锅")
//方式二
var person = {
"name": "老鸟",
"age": 23,
"eat":function(foot){
console.log(this.age + "岁" + this.name + "正在吃" + foot)
}
}
//访问属性
console.log(person.name)
console.log(person.age)
//访问方法
person.eat("龙虾")
</script>
</head>
<body>
</body>
</html>json格式
JSON在客户端的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
/*
JSON格式的语法
var parsonStr = '{"属性名":"属性值":"属性名":{}"属性名":[10,20],"属性名":[{},{}]}'
属性名必须用""包裹，
属性值字符串必须用"",
数字可以不处理
*/
//这是一个JSON格式的字符串
var personStr = '{"name":"张三","age":10,"dog":{"dname":"小黑"},"loveSingers":["胡歌","杨幂"],"friends":[{"fname":"小吴"},{"fname":"小运"}]}'
//通过JSON.parse()可以将一个JSON串转换为一个对象
var person = JSON.parse(personStr)
console.log(personStr)
console.log(person)
console.log(person.name)
console.log(person.dog.dname)
var loveSingers = person.loveSingers;
for (index in loveSingers) {
console.log(person.loveSingers[index])
}
// loveSingers.forEach(function (singer) {
// console.log(singer);
// });
console.log(person.loveSingers[0])
var friends = person.friends
for (var index = 0; index <= friends.length; index++) {
console.log(friends[index]);
}
console.log(person.friends[0].fname)
//通过JSON.stringify()将一个对象转换为JSON串
var personStr2 = JSON.stringify(person);
console.log(personStr2)
console.log(typeof personStr2)
</script>
</head>
<body>
</body>
</html>JSON在服务端的使用
<dependencies>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<version>1.18.30</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-core</artifactId>
<version>2.15.3</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-annotations</artifactId>
<version>2.15.3</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.15.3</version>
</dependency>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>4.13.1</version>
<scope>compile</scope>
</dependency>
</dependencies>package com.stx.json.pojo;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
@Data
@AllArgsConstructor
@NoArgsConstructor
public class Person {
private String name;
private Integer age;
private Dog dog;
}
package com.stx.json.pojo;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
@Data
@AllArgsConstructor
@NoArgsConstructor
public class Dog {
private String name;
}
package com.stx.json.test;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.stx.json.pojo.Dog;
import com.stx.json.pojo.Person;
import org.junit.Test;
public class TestJson {
//将对象转换为JSON串
@Test
public void testWriteJson() throws JsonProcessingException {
Dog dog = new Dog("小黑");
Person person = new Person("老鸟",23,dog);
//将person对象转换为字符串 Jackson FastJson Gson
ObjectMapper objectMapper = new ObjectMapper();
String personSrt = objectMapper.writeValueAsString(person);
System.out.println(personSrt);
}
//将字符串转换为对象
@Test
public void testReadJson() throws JsonProcessingException {
String personStr = "{\"name\":\"老鸟\",\"age\":23,\"dog\":{\"name\":\"小黑\"}}";
ObjectMapper objectMapper = new ObjectMapper();
Person person = objectMapper.readValue(personStr, Person.class);
System.out.println(person);
}
}
补充集合数组转JSON
package com.stx.json.test;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.stx.json.pojo.Dog;
import com.stx.json.pojo.Person;
import org.junit.Test;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
public class TestJson {
//将对象转换为JSON串
@Test
public void testWriteJson() throws JsonProcessingException {
Dog dog = new Dog("小黑");
Person person = new Person("老鸟",23,dog);
//将person对象转换为字符串 Jackson FastJson Gson
ObjectMapper objectMapper = new ObjectMapper();
String personSrt = objectMapper.writeValueAsString(person);
System.out.println(personSrt);
//{"name":"老鸟","age":23,"dog":{"name":"小黑"}}
}
//将字符串转换为对象
@Test
public void testReadJson() throws JsonProcessingException {
String personStr = "{\"name\":\"老鸟\",\"age\":23,\"dog\":{\"name\":\"小黑\"}}";
ObjectMapper objectMapper = new ObjectMapper();
Person person = objectMapper.readValue(personStr, Person.class);
System.out.println(person);
//Person(name=老鸟, age=23, dog=Dog(name=小黑))
}
//将map集合转换成JSON串
@Test
public void testMapToJson() throws JsonProcessingException {
Map<Object,String> map = new HashMap<>();
map.put("a","valuea");
map.put("b","valueb");
//将map集合转换成JSON串
ObjectMapper objectMapper = new ObjectMapper();
String mapStr = objectMapper.writeValueAsString(map);
System.out.println(mapStr);
//{"a":"valuea","b":"valueb"}
}
//List
@Test
public void testListToJson() throws JsonProcessingException {
List<String> list = new ArrayList<>();
list.add("a");
list.add("b");
//将list集合转换成JSON串
ObjectMapper objectMapper = new ObjectMapper();
String listStr = objectMapper.writeValueAsString(list);
System.out.println(listStr);
//["a","b"]
}
//array
@Test
public void testArrayToJson() throws JsonProcessingException {
String[] arr = {"a","b","c"};
//将array数组转换成JSON串
ObjectMapper objectMapper = new ObjectMapper();
String arrStr = objectMapper.writeValueAsString(arr);
System.out.println(arrStr);
//["a","b","c"]
}
//集合中装对象
@Test
public void testListToJsonByObject() throws JsonProcessingException {
Dog dog = new Dog("小黑");
Person person = new Person("老鸟",23,dog);
List<Person> list = new ArrayList<>();
list.add(person);
//将list里面装的对象转换成JSON串
ObjectMapper objectMapper = new ObjectMapper();
String personStr = objectMapper.writeValueAsString(list);
System.out.println(personStr);
//[{"name":"老鸟","age":23,"dog":{"name":"小黑"}}]
}
//在数组中装对象
@Test
public void testListToJsonByArray() throws JsonProcessingException {
Dog dog = new Dog("小黑");
Person person = new Person("老鸟",23,dog);
Person[] arr = {person};
//将arr数组里面装的对象转换成JSON串
ObjectMapper objectMapper = new ObjectMapper();
String arrStr = objectMapper.writeValueAsString(arr);
System.out.println(arrStr);
//[{"name":"老鸟","age":23,"dog":{"name":"小黑"}}]
}
}
JS常见对象
数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
/*
常见对象
1.数组
1)数组的创建方式
2)数组的API
*/
//数组的创建
//var arr = new Array()
//var arr = new Array(5)
//var arr = new Array("zhnagsan",10,false)
var arr = ["lisi", 22, false]
console.log(arr)
console.log(arr.length)
//向数组中添加数据
arr[0] = "zhangsan"
arr[1] = 20
arr[9] = true
arr.length = 20
console.log(arr)
console.log(arr.length)
//数组当中的API
//concat
var fruits = ["pear","apple",'orange','banana']
var fruits2 = ["荔枝",'桃子','榴莲']
var fruitsAll = fruits.concat(fruits2)
console.log(fruits)
console.log(fruits2)
console.log(fruitsAll)
//pop
var fruit = fruits.pop()
console.log(fruit)
console.log(fruits)
//push
var len = fruits.push("pear")
console.log(len)
console.log(fruits)
//IndexOf lastIndexOf
var index1 = fruits.lastIndexOf("pear")
var index2 = fruits.indexOf("pear")
console.log(index1)
console.log(index2)
//reverse
console.log(fruitsAll)
fruitsAll.reverse()
console.log(fruitsAll)
</script>
</head>
<body>
</body>
</html>下面方法来源于菜鸟教程
| 属性 | 描述 |
|---|---|
| constructor | 返回创建数组对象的原型函数。 |
| length | 设置或返回数组元素的个数。 |
| prototype | 允许你向数组对象添加属性或方法。 |
Array 对象方法
| 方法 | 描述 |
|---|---|
| concat() | 连接两个或更多的数组，并返回结果。 |
| copyWithin() | 从数组的指定位置拷贝元素到数组的另一个指定位置中。 |
| entries() | 返回数组的可迭代对象。 |
| every() | 检测数值元素的每个元素是否都符合条件。 |
| fill() | 使用一个固定值来填充数组。 |
| filter() | 检测数值元素，并返回符合条件所有元素的数组。 |
| find() | 返回符合传入测试（函数）条件的数组元素。 |
| findIndex() | 返回符合传入测试（函数）条件的数组元素索引。 |
| forEach() | 数组每个元素都执行一次回调函数。 |
| from() | 通过给定的对象中创建一个数组。 |
| includes() | 判断一个数组是否包含一个指定的值。 |
| indexOf() | 搜索数组中的元素，并返回它所在的位置。 |
| isArray() | 判断对象是否为数组。 |
| join() | 把数组的所有元素放入一个字符串。 |
| keys() | 返回数组的可迭代对象，包含原始数组的键(key)。 |
| lastIndexOf() | 搜索数组中的元素，并返回它最后出现的位置。 |
| map() | 通过指定函数处理数组的每个元素，并返回处理后的数组。 |
| pop() | 删除数组的最后一个元素并返回删除的元素。 |
| push() | 向数组的末尾添加一个或更多元素，并返回新的长度。 |
| reduce() | 将数组元素计算为一个值（从左到右）。 |
| reduceRight() | 将数组元素计算为一个值（从右到左）。 |
| reverse() | 反转数组的元素顺序。 |
| shift() | 删除并返回数组的第一个元素。 |
| slice() | 选取数组的一部分，并返回一个新数组。 |
| some() | 检测数组元素中是否有元素符合指定条件。 |
| sort() | 对数组的元素进行排序。 |
| splice() | 从数组中添加或删除元素。 |
| toString() | 把数组转换为字符串，并返回结果。 |
| unshift() | 向数组的开头添加一个或更多元素，并返回新的长度。 |
| valueOf() | 返回数组对象的原始值。 |
| Array.of() | 将一组值转换为数组。 |
| Array.at() | 用于接收一个整数值并返回该索引对应的元素，允许正数和负数。负整数从数组中的最后一个元素开始倒数。 |
| Array.flat() | 创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。 |
| Array.flatMap() | 使用映射函数映射每个元素，然后将结果压缩成一个新数组。 |
Boolean对象
| 方法 | 描述 |
|---|---|
| toString() | 把布尔值转换为字符串，并返回结果。 |
| valueOf() | 返回 Boolean 对象的原始值。 |
Date对象
| 方法 | 描述 |
|---|---|
| getDate() | 从 Date 对象返回一个月中的某一天 (1 ~ 31)。 |
| getDay() | 从 Date 对象返回一周中的某一天 (0 ~ 6)。 |
| getFullYear() | 从 Date 对象以四位数字返回年份。 |
| getHours() | 返回 Date 对象的小时 (0 ~ 23)。 |
| getMilliseconds() | 返回 Date 对象的毫秒(0 ~ 999)。 |
| getMinutes() | 返回 Date 对象的分钟 (0 ~ 59)。 |
| getMonth() | 从 Date 对象返回月份 (0 ~ 11)。 |
| getSeconds() | 返回 Date 对象的秒数 (0 ~ 59)。 |
| getTime() | 返回 1970 年 1 月 1 日至今的毫秒数。 |
| getTimezoneOffset() | 返回本地时间与格林威治标准时间 (GMT) 的分钟差。 |
| getUTCDate() | 根据世界时从 Date 对象返回月中的一天 (1 ~ 31)。 |
| getUTCDay() | 根据世界时从 Date 对象返回周中的一天 (0 ~ 6)。 |
| getUTCFullYear() | 根据世界时从 Date 对象返回四位数的年份。 |
| getUTCHours() | 根据世界时返回 Date 对象的小时 (0 ~ 23)。 |
| getUTCMilliseconds() | 根据世界时返回 Date 对象的毫秒(0 ~ 999)。 |
| getUTCMinutes() | 根据世界时返回 Date 对象的分钟 (0 ~ 59)。 |
| getUTCMonth() | 根据世界时从 Date 对象返回月份 (0 ~ 11)。 |
| getUTCSeconds() | 根据世界时返回 Date 对象的秒钟 (0 ~ 59)。 |
| getYear() | 已废弃。 请使用 getFullYear() 方法代替。 |
| parse() | 返回1970年1月1日午夜到指定日期（字符串）的毫秒数。 |
| setDate() | 设置 Date 对象中月的某一天 (1 ~ 31)。 |
| setFullYear() | 设置 Date 对象中的年份（四位数字）。 |
| setHours() | 设置 Date 对象中的小时 (0 ~ 23)。 |
| setMilliseconds() | 设置 Date 对象中的毫秒 (0 ~ 999)。 |
| setMinutes() | 设置 Date 对象中的分钟 (0 ~ 59)。 |
| setMonth() | 设置 Date 对象中月份 (0 ~ 11)。 |
| setSeconds() | 设置 Date 对象中的秒钟 (0 ~ 59)。 |
| setTime() | setTime() 方法以毫秒设置 Date 对象。 |
| setUTCDate() | 根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。 |
| setUTCFullYear() | 根据世界时设置 Date 对象中的年份（四位数字）。 |
| setUTCHours() | 根据世界时设置 Date 对象中的小时 (0 ~ 23)。 |
| setUTCMilliseconds() | 根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。 |
| setUTCMinutes() | 根据世界时设置 Date 对象中的分钟 (0 ~ 59)。 |
| setUTCMonth() | 根据世界时设置 Date 对象中的月份 (0 ~ 11)。 |
| setUTCSeconds() | 、 |
| setYear() | 已废弃。请使用 setFullYear() 方法代替。 |
| toDateString() | 把 Date 对象的日期部分转换为字符串。 |
| toGMTString() | 已废弃。请使用 toUTCString() 方法代替。 |
| toISOString() | 使用 ISO 标准返回字符串的日期格式。 |
| toJSON() | 以 JSON 数据格式返回日期字符串。 |
| toLocaleDateString() | 根据本地时间格式，把 Date 对象的日期部分转换为字符串。 |
| toLocaleTimeString() | 根据本地时间格式，把 Date 对象的时间部分转换为字符串。 |
| toLocaleString() | 根据本地时间格式，把 Date 对象转换为字符串。 |
| toString() | 把 Date 对象转换为字符串。 |
| toTimeString() | 把 Date 对象的时间部分转换为字符串。 |
| toUTCString() | 根据世界时，把 Date 对象转换为字符串。 实例： var today = new Date(); var UTCstring = today.toUTCString(); |
| UTC() | 根据世界时返回 1970 年 1 月 1 日 到指定日期的毫秒数。 |
| valueOf() | 返回 Date 对象的原始值。 |
Math
| 方法 | 描述 |
|---|---|
| abs(x) | 返回 x 的绝对值。 |
| acos(x) | 返回 x 的反余弦值。 |
| asin(x) | 返回 x 的反正弦值。 |
| atan(x) | 以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。 |
| atan2(y,x) | 返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）。 |
| ceil(x) | 对数进行上舍入。 |
| cos(x) | 返回数的余弦。 |
| exp(x) | 返回 Ex 的指数。 |
| floor(x) | 对 x 进行下舍入。 |
| log(x) | 返回数的自然对数（底为e）。 |
| max(x,y,z,...,n) | 返回 x,y,z,...,n 中的最高值。 |
| min(x,y,z,...,n) | 返回 x,y,z,...,n中的最低值。 |
| pow(x,y) | 返回 x 的 y 次幂。 |
| random() | 返回 0 ~ 1 之间的随机数。 |
| round(x) | 四舍五入。 |
| sin(x) | 返回数的正弦。 |
| sqrt(x) | 返回数的平方根。 |
| tan(x) | 返回角的正切。 |
| tanh(x) | 返回一个数的双曲正切函数值。 |
| trunc(x) | 将数字的小数部分去掉，只保留整数部分。 |
Number
| 方法 | 描述 |
|---|---|
| isFinite | 检测指定参数是否为无穷大。 |
| isInteger | 检测指定参数是否为整数。 |
| isNaN | 检测指定参数是否为 NaN。 |
| isSafeInteger | 检测指定参数是否为安全整数。 |
| toExponential(x) | 把对象的值转换为指数计数法。 |
| toFixed(x) | 把数字转换为字符串，结果的小数点后有指定位数的数字。 |
| toLocaleString(locales, options) | 返回数字在特定语言环境下的表示字符串。 |
| toPrecision(x) | 把数字格式化为指定的长度。 |
| toString() | 把数字转换为字符串，使用指定的基数。 |
| valueOf() | 返回一个 Number 对象的基本数字值。 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
var str = '10'
var res = 10 + str
console.log(res) //1010
var res = 10 + Number.parseInt(str)
console.log(res) //20
</script>
</head>
<body>
</body>
</html>String
| 方法 | 描述 |
|---|---|
| charAt() | 返回在指定位置的字符。 |
| charCodeAt() | 返回在指定的位置的字符的 Unicode 编码。 |
| concat() | 连接两个或更多字符串，并返回新的字符串。 |
| endsWith() | 判断当前字符串是否是以指定的子字符串结尾的（区分大小写）。 |
| fromCharCode() | 将 Unicode 编码转为字符。 |
| indexOf() | 返回某个指定的字符串值在字符串中首次出现的位置。 |
| includes() | 查找字符串中是否包含指定的子字符串。 |
| lastIndexOf() | 从后向前搜索字符串，并从起始位置（0）开始计算返回字符串最后出现的位置。 |
| match() | 查找找到一个或多个正则表达式的匹配。 |
| repeat() | 复制字符串指定次数，并将它们连接在一起返回。 |
| replace() | 在字符串中查找匹配的子串，并替换与正则表达式匹配的子串。 |
| replaceAll() | 在字符串中查找匹配的子串，并替换与正则表达式匹配的所有子串。 |
| search() | 查找与正则表达式相匹配的值。 |
| slice() | 提取字符串的片断，并在新的字符串中返回被提取的部分。 |
| split() | 把字符串分割为字符串数组。 |
| startsWith() | 查看字符串是否以指定的子字符串开头。 |
| substr() | 从起始索引号提取字符串中指定数目的字符。 |
| substring() | 提取字符串中两个指定的索引号之间的字符。 |
| toLowerCase() | 把字符串转换为小写。 |
| toUpperCase() | 把字符串转换为大写。 |
| trim() | 去除字符串两边的空白。 |
| toLocaleLowerCase() | 根据本地主机的语言环境把字符串转换为小写。 |
| toLocaleUpperCase() | 根据本地主机的语言环境把字符串转换为大写。 |
| valueOf() | 返回某个字符串对象的原始值。 |
| toString() | 返回一个字符串。 |
事件的绑到
什么是事件
HTML事件可以是浏览器行为，也可以是用户行为。当这些行为发生时，可以自动触发对应的js函数的运行，我们称之为事件发生。
常见事件
鼠标事假
| 属性 | 描述 |
|---|---|
| onclick | 当用户点击某个对象时调用的事件句柄。 |
| oncontextmenu | 在用户点击鼠标右键打开上下文菜单时触发 |
| ondblclick | 当用户双击某个对象时调用的事件句柄。 |
| onmousedown | 鼠标按钮被按下。 |
| onmouseenter | 当鼠标指针移动到元素上时触发。 |
| onmouseleave | 当鼠标指针移出元素时触发 |
| onmousemove | 鼠标被移动。 |
| onmouseover | 鼠标移到某元素之上。 |
| onmouseout | 鼠标从某元素移开。 |
| onmouseup | 鼠标按键被松开。 |
键盘事件
| 属性 | 描述 |
|---|---|
| onkeydown | 某个键盘按键被按下。 |
| onkeypress | 某个键盘按键被按下并松开。 |
| onkeyup | 某个键盘按键被松开。 |
练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function fun1() {
//alert("单击了")
console.log("单击了")
}
function fun2() {
//alert("单击了2")
console.log("单击了2")
}
function fun3() {
//alert("双击了")
console.log("双击了")
}
/*
1.事件的绑到方式
1.通过元素的属性绑定
2.通过DOM编程动态绑定
注意事项
1.一个事件可以同时绑定多个事件
2.一个元素可以同时绑定多个事件
2.常见的事件
1.鼠标事件
obclick
ondbclick
onmouseover(鼠标悬停)
onmousemove(鼠标移动)
onmouseleave(鼠标离开)
2.键盘事件
onkeydown(按键按下)
onbkeyup(按键抬起)
3.表单事件
*/
function fun4(){
console.log("鼠标悬停")
}
function fun5(){
console.log("鼠标移动")
}
function fun6(){
console.log("鼠标离开")
}
function fun7(){
console.log("按键按下")
}
function fun8(){
console.log("按键抬起")
}
</script>
<style>
img{
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<input
type="button"
value="按钮"
onclick="fun1(),fun2()"
ondblclick="fun3()"
>
<br/>
<br>
<img
src="./demo3-js/img/run.jpg"
alt="run"
onmouseover="fun4()"
onmousemove="fun5()"
onmouseleave="fun6()"
>
<br>
<br>
<input type="text" onkeydown="fun7()" onkeyup="fun8()">
</body>
</html>表单事件
| 属性 | 描述 |
|---|---|
| onblur | 元素失去焦点时触发 |
| onchange | 该事件在表单元素的内容改变时触发( <input>, <keygen>, <select>, 和 <textarea>) |
| onfocus | 元素获取焦点时触发 |
| onfocusin | 元素即将获取焦点时触发 |
| onfocusout | 元素即将失去焦点时触发 |
| oninput | 元素获取用户输入时触发 |
| onreset | 表单重置时触发 |
| onsearch | 用户向搜索域输入文本时触发 ( <input="search">) |
| onselect | 用户选取文本时触发 ( <input> 和 <textarea>) |
| onsubmit | 表单提交时触发 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
/*
3.表单事件
onfocus(获取焦点事件)
onblur(失去焦点)
onchange(内容发生改变时执行)
onsubmit(表单提交事件)
onreset(表单重置的时候触发)
*/
function testFocus() {
console.log("获取焦点")
}
function testBlur() {
console.log("失去焦点")
}
function testChange(value) {
console.log("内容改变为" + value)
}
function testChange2(value) {
console.log("选项发生改变了" + value)
}
function testSubmit() {
/*
弹窗的三种方式
alert() 信息提示框
prompt() 信息输入框
confirm() 信息确认框
*/
var flag = confirm("确定要提交表单吗")
if (!flag) {
//在这里我们有机会阻止表单的提交
//event.preventDefault(); //阻止组件的默认行为
return false; //返回一个false结果
}
return true
}
function testReset(){
alert("表单要重置了")
}
</script>
</head>
<body>
<form action="./10.常见事件.html" method="get" onsubmit="return testSubmit()" onreset="testReset()">
用户昵称：<input type="text" name="realName" onfocus="testFocus()" onblur="testBlur()"
onchange="testChange(this.value)">
<br>
登录账号：<input type="text" name="loginName"><br>
选择籍贯:
<select onchange="testChange2(this.value)">
<option>太原</option>
<option>长治</option>
<option>临汾</option>
</select>
<input type="submit" value="注册">
<input type="reset" value="重置">
</form>
</body>
</html>事件的绑定方式
1.通过元素的属性绑定
2.通过DOM编程动态绑定
第一种
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
/*
1 事件的绑定方式
1.通过元素的属性绑定
2.通过DOM编程动态绑定
2 常见的事件
1.鼠标事件
obclick
ondbclick
onmouseover(鼠标悬停)
onmousemove(鼠标移动)
onmouseleave(鼠标离开)
2.键盘事件
onkeydown(按键按下)
onbkeyup(按键抬起)
3.表单事件
onfocus(获取焦点事件)
onblur(失去焦点)
onchange(内容发生改变时执行)
onsubmit(表单提交事件)
onreset(表单重置的时候触发)
4.页面加载事件
onload(页面加载完毕事件)
3 事件的触发
1.行为触发
2.DOM编程触发
*/
</script>
<script>
function ready() {
// 通过DOM编程获得要操作的元素
var btn1 = document.getElementById("btn1") //返回一个对象
// 绑定一个单击事件
btn1.onclick = function () {
alert("按钮单击了")
}
}
</script>
</head>
<body onload="ready()">
<button id="btn1">按钮</button>
</body>
</html>第二种
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
/*
1 事件的绑定方式
1.通过元素的属性绑定
2.通过DOM编程动态绑定
2 常见的事件
1.鼠标事件
obclick
ondbclick
onmouseover(鼠标悬停)
onmousemove(鼠标移动)
onmouseleave(鼠标离开)
2.键盘事件
onkeydown(按键按下)
onbkeyup(按键抬起)
3.表单事件
onfocus(获取焦点事件)
onblur(失去焦点)
onchange(内容发生改变时执行)
onsubmit(表单提交事件)
onreset(表单重置的时候触发)
4.页面加载事件
onload(页面加载完毕事件)
3 事件的触发
1.行为触发
2.DOM编程触发
*/
</script>
<script>
window.onload = function () {
// 通过DOM编程获得要操作的元素
var btn1 = document.getElementById("btn1") //返回一个对象
// 绑定一个单击事件
btn1.onclick = function () {
alert("按钮单击了")
}
}
</script>
</head>
<body>
<button id="btn1">按钮</button>
</body>
</html>案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
/*
1 事件的绑定方式
1.通过元素的属性绑定
2.通过DOM编程动态绑定
2 常见的事件
1.鼠标事件
obclick
ondbclick
onmouseover(鼠标悬停)
onmousemove(鼠标移动)
onmouseleave(鼠标离开)
2.键盘事件
onkeydown(按键按下)
onbkeyup(按键抬起)
3.表单事件
onfocus(获取焦点事件)
onblur(失去焦点)
onchange(内容发生改变时执行)
onsubmit(表单提交事件)
onreset(表单重置的时候触发)
4.页面加载事件
onload(页面加载完毕事件)
3 事件的触发
1.行为触发
2.DOM编程触发
*/
</script>
<script>
window.onload = function () {
//为div绑定单击事件
var div1 = document.getElementById("d1")
div1.onclick = function () {
div1.style.backgroundColor = "red"
}
// 通过DOM编程获得要操作的元素
var btn1 = document.getElementById("btn1") //返回一个对象
// 绑定一个单击事件
btn1.onclick = function () {
alert("按钮单击了")
//通过DOM编程触发事件,相当于某些事件发生了
//通过DOM编程触发div的单击事件
div1.onclick()
}
}
</script>
<style>
.div1 {
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="div1" id="d1">
</div>
<button id="btn1">按钮</button>
</body>
</html>
BOM编程
什么是BOM
-
BOM是Browser Object Model的简写，即浏览器对象模型。
-
BOM由一系列对象组成，是访问、控制、修改浏览器的属性和方法(通过window对象及属性的一系列方法 控制浏览器行为的一种编程)
-
BOM没有统一的标准(每种客户端都可以自定标准)。
-
BOM编程是将浏览器窗口的各个组成部分抽象成各个对象,通过各个对象的API操作组件行为的一种编程
-
BOM编程的对象结构如下
-
window 顶级对象,代表整个浏览器窗口
-
location对象 window对象的属性之一,代表浏览器的地址栏
-
history对象 window对象的属性之一,代表浏览器的访问历史
-
screen对象 window对象的属性之一,代表屏幕
-
navigator对象 window对象的属性之一,代表浏览器软件本身
-
document对象 window对象的属性之一,代表浏览器窗口目前解析的html文档
-
console对象 window对象的属性之一,代表浏览器开发者工具的控制台
-
localStorage对象 window对象的属性之一,代表浏览器的本地数据持久化存储
-
sessionStorage对象 window对象的属性之一,代表浏览器的本地数据会话级存储
-
-
window对象 API
window对象属性 API
通过window对象及其属性的API控制浏览器的属性和行为
window对象的常见属性(了解)
| 属性 | 描述 |
|---|---|
| closed | 返回窗口是否已被关闭。 |
| defaultStatus | 设置或返回窗口状态栏中的默认文本。 |
| document | 对 Document 对象的只读引用。(请参阅对象) |
| frames | 返回窗口中所有命名的框架。该集合是 Window 对象的数组，每个 Window 对象在窗口中含有一个框架。 |
| history | 对 History 对象的只读引用。请参数 History 对象。 |
| innerHeight | 返回窗口的文档显示区的高度。 |
| innerWidth | 返回窗口的文档显示区的宽度。 |
| localStorage | 在浏览器中存储 key/value 对。没有过期时间。 |
| length | 设置或返回窗口中的框架数量。 |
| location | 用于窗口或框架的 Location 对象。请参阅 Location 对象。 |
| name | 设置或返回窗口的名称。 |
| navigator | 对 Navigator 对象的只读引用。请参数 Navigator 对象。 |
| opener | 返回对创建此窗口的窗口的引用。 |
| outerHeight | 返回窗口的外部高度，包含工具条与滚动条。 |
| outerWidth | 返回窗口的外部宽度，包含工具条与滚动条。 |
| pageXOffset | 设置或返回当前页面相对于窗口显示区左上角的 X 位置。 |
| pageYOffset | 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。 |
| parent | 返回父窗口。 |
| screen | 对 Screen 对象的只读引用。请参数 Screen 对象。 |
| screenLeft | 返回相对于屏幕窗口的x坐标 |
| screenTop | 返回相对于屏幕窗口的y坐标 |
| screenX | 返回相对于屏幕窗口的x坐标 |
| sessionStorage | 在浏览器中存储 key/value 对。 在关闭窗口或标签页之后将会删除这些数据。 |
| screenY | 返回相对于屏幕窗口的y坐标 |
| self | 返回对当前窗口的引用。等价于 Window 属性。 |
| status | 设置窗口状态栏的文本。 |
| top | 返回最顶层的父窗口。 |
window对象的常见方法(了解)
| 方法 | 描述 |
|---|---|
| alert() | 显示带有一段消息和一个确认按钮的警告框。 |
| atob() | 解码一个 base-64 编码的字符串。 |
| btoa() | 创建一个 base-64 编码的字符串。 |
| blur() | 把键盘焦点从顶层窗口移开。 |
| clearInterval() | 取消由 setInterval() 设置的 timeout。 |
| clearTimeout() | 取消由 setTimeout() 方法设置的 timeout。 |
| close() | 关闭浏览器窗口。 |
| confirm() | 显示带有一段消息以及确认按钮和取消按钮的对话框。 |
| createPopup() | 创建一个 pop-up 窗口。 |
| focus() | 把键盘焦点给予一个窗口。 |
| getSelection() | 返回一个 Selection 对象，表示用户选择的文本范围或光标的当前位置。 |
| getComputedStyle() | 获取指定元素的 CSS 样式。 |
| matchMedia() | 该方法用来检查 media query 语句，它返回一个 MediaQueryList对象。 |
| moveBy() | 可相对窗口的当前坐标把它移动指定的像素。 |
| moveTo() | 把窗口的左上角移动到一个指定的坐标。 |
| open() | 打开一个新的浏览器窗口或查找一个已命名的窗口。 |
| print() | 打印当前窗口的内容。 |
| prompt() | 显示可提示用户输入的对话框。 |
| resizeBy() | 按照指定的像素调整窗口的大小。 |
| resizeTo() | 把窗口的大小调整到指定的宽度和高度。 |
| scroll() | 已废弃。 该方法已经使用了 scrollTo() 方法来替代。 |
| scrollBy() | 按照指定的像素值来滚动内容。 |
| scrollTo() | 把内容滚动到指定的坐标。 |
| setInterval() | 按照指定的周期（以毫秒计）来调用函数或计算表达式。 |
| setTimeout() | 在指定的毫秒数后调用函数或计算表达式。 |
| stop() | 停止页面载入。 |
| postMessage() | 安全地实现跨源通信。 |
History 对象方法
| 方法 | 说明 |
|---|---|
| back() | 加载 history 列表中的前一个 URL |
| forward() | 加载 history 列表中的下一个 URL |
| go() | 加载 history 列表中的某个具体页面 |
Location 对象属性
| 属性 | 描述 |
|---|---|
| hash | 返回一个URL的锚部分 |
| host | 返回一个URL的主机名和端口 |
| hostname | 返回URL的主机名 |
| href | 返回完整的URL |
| pathname | 返回的URL路径名。 |
| port | 返回一个URL服务器使用的端口号 |
| protocol | 返回一个URL协议 |
| search | 返回一个URL的查询部分 |
存储对象
存储对象属性
| 属性 | 描述 |
|---|---|
| length | 返回存储对象中包含多少条数据。 |
存储对象方法
| 方法 | 描述 |
|---|---|
| key(n) | 返回存储对象中第 n 个键的名称 |
| getItem(keyname) | 返回指定键的值 |
| setItem(keyname, value) | 添加键和值，如果对应的值存在，则更新该键对应的值。 |
| removeItem(keyname) | 移除键 |
| clear() | 清除存储对象中所有的键 |
Web 存储 API
| 属性 | 描述 |
|---|---|
| window.localStorage | 在浏览器中存储 key/value 对。没有过期时间。 |
| window.sessionStorage | 在浏览器中存储 key/value 对。 在关闭窗口或标签页之后将会删除这些数据。 |
练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
/*
window 对象是浏览器提供给我们使用的，无需自己new
window.可以省略不写
三种弹窗方式
alert
prompt
confirm
定时任务
setTimeout
history 窗口的访问历史
location
sessionStorage 用于存储会话级数据(浏览器关闭数据清除)
localStorage 用于存储持久级数据(浏览器关闭数据还在)
console log
*/
function fun1() {
window.alert("hello")
}
function fun2() {
var res = window.prompt("hello,请输入姓名")
console.log(res)
}
function fun3() {
var res = window.confirm("确定要删除吗")
console.log(res)
}
function fun4() {
window.setTimeout(function () {
console.log("hello")
}, 2000)
}
function funa() {
//向前翻页
history.back()
}
function funb() {
//向后翻页
history.forward()
}
function func() {
window.location.href = "http://www.baidu.com" //修改地址栏的url
}
function fund() {
//向sessionStorange中存储数据
window.sessionStorage.setItem("keyA", "valueA")
//向localStorange中存储数据
window.localStorage.setItem("keyB", "valueB")
}
function fune() {
//向sessionStorage中读取数据
console.log(window.sessionStorage.getItem("keyA"))
//向localStorage中读取数据
console.log(window.localStorage.getItem("keyB"))
}
function funf() {
//向sessionStorage中清楚数据
sessionStorage.removeItem("keyA")
//向localStorage中清楚数据
localStorage.removeItem("keyB")
}
</script>
</head>
<body>
<button onclick="fund()">存储数据</button>
<button onclick="fune()">读取数据</button>
<button onclick="funf()">清空数据</button>
<hr>
<button onclick="func()">百度</button>
<hr>
<button onclick="funa()">上一页</button>
<button onclick="funb()">下一页</button>
<a href=<button onclick="funa()">上一页</button>>百度</a>
<hr>
<button onclick="fun1()">信息提示框</button>
<button onclick="fun2()">信息输入框</button>
<button onclick="fun3()">信息确认框</button>
<button onclick="fun4()">2s后向控制台打印hello</button>
</body>
</html>DOM编程
修改页面上的内容
简单来说:DOM(Document Object Model)编程就是使用document对象的API完成对网页HTML文档进行动态修改,以实现网页数据和样式动态变化效果的编程.
-
document对象代表整个html文档，可用来访问页面中的所有元素，是最复杂的一个dom对象，可以说是学习好dom编程的关键所在。
-
根据HTML代码结构特点,document对象本身是一种树形结构的文档对象。
获取页面元素的几种方式
在整个文档范围内查找元素结点
| 功能 | API | 返回值 |
|---|---|---|
| 根据id值查询 | document.getElementById(“id值”) | 一个具体的元素节 |
| 根据标签名查询 | document.getElementsByTagName(“标签名”) | 元素节点数组 |
| 根据name属性值查询 | document.getElementsByName(“name值”) | 元素节点数组 |
| 根据类名查询 | document.getElementsByClassName("类名") | 元素节点数组 |
在具体元素节点范围内查找子节点
| 功能 | API | 返回值 |
|---|---|---|
| 查找子标签 | element.children | 返回子标签数组 |
| 查找第一个子标签 | element.firstElementChild | 标签对象 |
| 查找最后一个子标签 | element.lastElementChild | 节点对象 |
查找指定子元素节点的父节点
| 功能 | API | 返回值 |
|---|---|---|
| 查找指定元素节点的父标签 | element.parentElement | 标签对象 |
查找指定元素节点的兄弟节点
| 功能 | API | 返回值 |
|---|---|---|
| 查找前一个兄弟标签 | node.previousElementSibling | 标签对象 |
| 查找后一个兄弟标签 | node.nextElementSibling | 标签对象 |
练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
/*
1 获得document dom树
window.document
2 从document中获取要操作的元素
1.直接获取
var el1 = window.document.getElementById("username") //根据元素的id值获取页面上的唯一元素
var els = window.document.getElementsByTagName("input") //根据标签名获取多个元素
var els = document.getElementsByName("aaa") //根据元素的name属性值获取多个元素
var els = document.getElementsByName("aaa") //根据元素的class属性值获取多个元素
2.间接获取
var cs = div01.children //通过父元素获取全部子元素
console.log(div01.firstElementChild) //通过父元素获取第一个子元素
console.log(div01.lastElementChild) //通过父元素获取最后一个子元素
console.log(pinput.parentElement) //通过子元素获取父元素
console.log(pinput.previousElementSibling) //通过当前元素获取前面的第一个元素
console.log(pinput.nextElementSibling) //通过当前元素获取后面的一个元素
3 对元素进行操作
1.操作元素的属性 元素.属性名 = ""
2.操作元素的样式 元素.style.样式名="" 样式名 - 要进行驼峰转换
3.操作元素的文本 元素名.innerText 只识别文本
元素名.innerHTML 不仅可以识别文本还可以识别HTML代码
4.增删元素
增
var element = document.createElement("元素名") //创建元素
父元素.appendChild(子元素) //在父元素当中追加子元素
父元素.insertBefore(新元素,参照元素)
父元素.replaceChild(新元素,被替换的元素)
删
元素.remove() //删除当前元素
*/
function changeAttrubite() {
var in1 = document.getElementById("in1")
//语法 元素.属性名 = ""
//获得属性值
console.log(in1.type)
console.log(in1.value)
//修改属性值
in1.type = "button"
in1.value = "嗨"
}
function changeStyle() {
var in1 = document.getElementById("in1")
//修改样式 语法:元素.style.样式名=""
//原始样式名中的 - 符号要改成驼峰命名 border-radius: 5px; in1.style.borderRadius = "5px"
in1.style.color = "green"
in1.style.borderRedius = "5px"
}
function changeText() {
var div01 = document.getElementById("div01")
/*
语法 元素名.innerText 只识别文本
元素名.innerHTML 不仅可以识别文本还可以识别HTML代码
*/
// console.log(div01.innerText)
// div01.innerText = "<h1>老鸟</h1>"
console.log(div01.innerHTML)
div01.innerHTML = "<h1>老鸟2</h1>"
}
function addCity() {
//创建一个新的元素
//创建元素
var cityli = document.createElement("li") //<li></li>
//设置子元素的属性和文本 //<li id="hz">杭州</li>-->
cityli.id = "hz"
cityli.innerText = "杭州"
//将子元素放入父元素中
var cityul = document.getElementById("city")
//在父元素当中追加子元素
cityul.appendChild(cityli)
}
function addCityBeforeSx() {
//创建一个新元素
var cityli = document.createElement("li")
//设置子元素的属性和文本
cityli.id = "hz"
cityli.innerText = "杭州"
//将子元素放入到父元素当中
var cityul = document.getElementById("city")
var sx = document.getElementById("sx")
//cityul.insertBefore(新元素,参照元素)
cityul.insertBefore(cityli, sx)
}
function replaceSx() {
//创建元素
var cityli = document.createElement("li")
//设置元素的属性和文本
cityli.id = "hz"
cityli.innerText = "杭州"
//将子元素放到父元素
var cityul = document.getElementById("city")
var sx = document.getElementById("sx")
//cityul.replaceChild(新元素,被替换的元素)
cityul.replaceChild(cityli, sx)
}
function removeSx(){
//获取删除的元素
var sc = document.getElementById("sx")
sc.remove()
}
function clearCity(){
//获取父元素
var cityul = document.getElementById("city")
// city = cityul.firstChild
// while(city != null){
// city.remove()
// city = cityul.firstChild
// }
cityul.remove()
}
</script>
<style>
#in1 {
color: red;
border-radius: 50px;
}
</style>
</head>
<body>
<input type="text" value="hello" id="in1">
<hr>
<button onclick="changeAttrubite()">操作属性</button>
<button onclick="changeStyle()">操作样式</button>
<div id="div01">
hello
</div>
<button onclick="changeText()">操作文本</button>
<ul id="city">
<li id="bj">北京</li>
<li id="sh">上海</li>
<li id="sx">山西</li>
</ul>
<!-- 目标1 在城市列表的最后添加一个子标签 <li id="hz">杭州</li>-->
<button onclick="addCity()">增加杭州</button>
<!-- 目标2 在城市列表的山西前添加一个子标签 <li id="hz">杭州</li>-->
<button onclick="addCityBeforeSx()">增加杭州</button>
<!-- 目标3 将城市列表中的山西替换为 <li id="hz">杭州</li>-->
<button onclick="replaceSx()">替换山西</button>
<!-- 目标4 将城市列表中的山西删除 <li id="hz">杭州</li>-->
<button onclick="removeSx()">删除山西</button>
<!-- 目标5 清空城市列表 <li id="hz">杭州</li>-->
<button onclick="clearCity()">清空列表</button>
</html>JS正则表达式
描述字符串格式的对象
语法：
var patt=new RegExp(pattern,modifiers);
或者更简单的方式:
var patt=/pattern/modifiers; 修饰符
| 修饰符 | 描述 |
|---|---|
| i | 执行对大小写不敏感的匹配。 |
| g | 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。 |
| m | 执行多行匹配。 |
方括号
| 表达式 | 描述 |
|---|---|
| [abc] | 查找方括号之间的任何字符。 |
| [^abc] | 查找任何不在方括号之间的字符。 |
| [0-9] | 查找任何从 0 至 9 的数字。 |
| [a-z] | 查找任何从小写 a 到小写 z 的字符。 |
| [A-Z] | 查找任何从大写 A 到大写 Z 的字符。 |
| [A-z] | 查找任何从大写 A 到小写 z 的字符。 |
| [adgk] | 查找给定集合内的任何字符。 |
| [^adgk] | 查找给定集合外的任何字符。 |
| (red|blue|green) |
元字符
| 元字符 | 描述 |
|---|---|
| . | 查找单个字符，除了换行和行结束符。 |
| \w | 查找数字、字母及下划线。 |
| \W | 查找非单词字符。 |
| \d | 查找数字。 |
| \D | 查找非数字字符。 |
| \s | 查找空白字符。 |
| \S | 查找非空白字符。 |
| \b | 匹配单词边界。 |
| \B | 匹配非单词边界。 |
| \0 | 查找 NULL 字符。 |
| \n | 查找换行符。 |
| \f | 查找换页符。 |
| \r | 查找回车符。 |
| \t | 查找制表符。 |
| \v | 查找垂直制表符。 |
| \xxx | 查找以八进制数 xxx 规定的字符。 |
| \xdd | 查找以十六进制数 dd 规定的字符。 |
| \uxxxx | 查找以十六进制数 xxxx 规定的 Unicode 字符。 |
量词
| 量词 | 描述 |
|---|---|
| n+ | 匹配任何包含至少一个 n 的字符串。例如，/a+/ 匹配 "candy" 中的 "a"，"caaaaaaandy" 中所有的 "a"。 |
| n* | 匹配任何包含零个或多个 n 的字符串。例如，/bo*/ 匹配 "A ghost booooed" 中的 "boooo"，"A bird warbled" 中的 "b"，但是不匹配 "A goat grunted"。 |
| n? | 匹配任何包含零个或一个 n 的字符串。例如，/e?le?/ 匹配 "angel" 中的 "el"，"angle" 中的 "le"。 |
| n{X} | 匹配包含 X 个 n 的序列的字符串。例如，/a{2}/ 不匹配 "candy," 中的 "a"，但是匹配 "caandy," 中的两个 "a"，且匹配 "caaandy." 中的前两个 "a"。 |
| n{X,} | X 是一个正整数。前面的模式 n 连续出现至少 X 次时匹配。例如，/a{2,}/ 不匹配 "candy" 中的 "a"，但是匹配 "caandy" 和 "caaaaaaandy." 中所有的 "a"。 |
| n{X,Y} | X 和 Y 为正整数。前面的模式 n 连续出现至少 X 次，至多 Y 次时匹配。例如，/a{1,3}/ 不匹配 "cndy"，匹配 "candy," 中的 "a"，"caandy," 中的两个 "a"，匹配 "caaaaaaandy" 中的前面三个 "a"。注意，当匹配 "caaaaaaandy" 时，即使原始字符串拥有更多的 "a"，匹配项也是 "aaa"。 |
| n$ | 匹配任何结尾为 n 的字符串。 |
| ^n | 匹配任何开头为 n 的字符串。 |
| ?=n | 匹配任何其后紧接指定字符串 n 的字符串。 |
| ?!n | 匹配任何其后没有紧接指定字符串 n 的字符串。 |
RegExp对象方法
| 方法 | 描述 |
|---|---|
| compile | 在 1.5 版本中已废弃。 编译正则表达式。 |
| exec | 检索字符串中指定的值。返回找到的值，并确定其位置。 |
| test | 检索字符串中指定的值。返回 true 或 false。 |
| toString | 返回正则表达式的字符串。 |
支持正则的String的方法
| 方法 | 描述 |
|---|---|
| search | 检索与正则表达式相匹配的值。 |
| match | 找到一个或多个正则表达式的匹配。 |
| replace | 替换与正则表达式匹配的子串。 |
| split | 把字符串分割为字符串数组。 |
练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>正则表达式</title>
<script>
/*验证*/
//定义一个正则表达式
var reg = /o/
//自定义一个字符串
var str = "hello world"
//校验是否符合正则的规则
console.log(reg.test(str))
/*匹配 g全局的意思*/
var reg = /o/g
var str = "hello world"
var result = str.match(reg)
console.log(result)
/*替换 默认区分大小写 i 忽略大小写*/
var reg = /o/
var str = "hello world"
var newStr = str.replace(reg,'@')
console.log(newStr)
/*用验证练习*/
var str1 = "java love me"
var str2 = "I love java"
var str3 = "java"
//以啥开头^，或者以啥结尾$
var reg = /^java/
//var reg = /java$/
//var reg = /^java$/ //java love java不可以
console.log(reg.test(str1))
console.log(reg.test(str2))
console.log(reg.test(str3))
//校验用户名是否合法
/*
1 必须是字母开头
2 长度必须是6-10位
3 后面其他字符可以使大小写字母，数字和下划线
*/
var reg = /^[a-zA-Z][a-zA-Z0-9_]{5,9}$/
var str = 'AWEQ4332_50'
console.log(reg.test(str))
</script>
</head>
<body>
</body>
</html>常用正则表达式
| 需求 | 正则表达式 |
|---|---|
| 用户名 | /^[a-zA-Z ][a-zA-Z-0-9]{5,9}$/ |
| 密码 | /^[a-zA-Z0-9 _-@#& *]{6,12}$/ |
| 前后空格 | /^\s+|\s+$/g |
| 电子邮箱 | /^[a-zA-Z0-9 _.-]+@([a-zA-Z0-9-]+[.]{1})+[a-zA-Z]+$/ |
XML
XML是EXtensible Markup Language的缩写，翻译过来就是可扩展标记语言。所以很明显，XML和HTML一样都是标记语言，也就是说它们的基本语法都是标签。
-
可扩展 三个字表面上的意思是XML允许自定义格式。但这不代表你可以随便写。
-
在XML基本语法规范的基础上，你使用的那些第三方应用程序、框架会通过XML约束的方式强制规定配置文件中可以写什么和怎么写
-
XML基本语法这个知识点的定位是：我们不需要从零开始，从头到尾的一行一行编写XML文档，而是在第三方应用程序、框架已提供的配置文件的基础上修改。要改成什么样取决于你的需求，而怎么改取决XML基本语法和具体的XML约束。
常见配置文件类型
-
properties文件,例如druid连接池就是使用properties文件作为配置文件
-
XML文件,例如Tomcat就是使用XML文件作为配置文件
-
YAML文件,例如SpringBoot就是使用YAML作为配置文件
-
json文件,通常用来做文件传输，也可以用来做前端或者移动端的配置文件
-
等等...
properties配置文件
示例
dev.jdbc.url=jdbc:mysql://localhost:3306/itcast
dev.jdbc.driver=com.mysql.cj.jdbc.Driver
dev.jdbc.username=root
dev.jdbc.password=root
test.jdbc.url=jdbc:mysql://localhost:3306/itcast
test.jdbc.driver=com.mysql.cj.jdbc.Driver
test.jdbc.username=root
test.jdbc.password=123456语法规范
-
由键值对组成
-
键和值之间的符号是等号
-
每一行都必须顶格写，前面不能有空格之类的其他符号
xml配置文件
示例
<?xml version="1.0" encoding="UTF-8"?>
<!--
1.跟标签志只能有一个
2.第一行永远都是<?xml version="1.0" encoding="UTF-8"?>
3.xml是有约束 约束永远限定xml内部能编写的内容
dtd 简单 上手快 约束没有schema细致
schema 复制 上手慢 约束比dtd约束细致
-->
<jdbc>
<dev>
<username>root</username>>
<password>root</password>
<driver>com.mysql.cj.jdbc.Driver</driver>
<url>jdbc:mysql://localhost:3306/itcast</url>
</dev>
<test>
<username>root</username>>
<password>123456</password>
<driver>com.mysql.cj.jdbc.Driver</driver>
<url>jdbc:mysql://localhost:3306/itcast</url>
</test>
</jdbc>
XML的基本语法
-
XML的基本语法和HTML的基本语法简直如出一辙。其实这不是偶然的，XML基本语法+HTML约束=HTML语法。在逻辑上HTML确实是XML的子集。
-
XML文档声明 这部分基本上就是固定格式，要注意的是文档声明一定要从第一行第一列开始写
<?xml version="1.0" encoding="UTF-8"?>
-
根标签
-
根标签有且只能有一个。
-
-
标签关闭
-
双标签：开始标签和结束标签必须成对出现。
-
单标签：单标签在标签内关闭。
-
-
标签嵌套
-
可以嵌套，但是不能交叉嵌套。
-
-
注释不能嵌套
-
标签名、属性名建议使用小写字母
-
属性
-
属性必须有值
-
属性值必须加引号，单双都行
-
XML的约束(稍微了解)
将来我们主要就是根据XML约束中的规定来编写XML配置文件，而且会在我们编写XML的时候根据约束来提示我们编写, 而XML约束主要包括DTD和Schema两种。
-
DTD
-
Schema
Schema约束要求我们一个XML文档中，所有标签，所有属性都必须在约束中有明确的定义。
下面我们以web.xml的约束声明为例来做个说明：
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
version="4.0">
</web-app>DOM4J进行XML解析
DOM4J的使用步骤
-
导入jar包 dom4j.jar
-
创建解析器对象(SAXReader)
-
解析xml 获得Document对象
-
获取根节点RootElement
-
获取根节点下的子节点
1.2.2 DOM4J的API介绍
1.创建SAXReader对象
SAXReader saxReader = new SAXReader();
2. 解析XML获取Document对象: 需要传入要解析的XML文件的字节输入流
Document document = reader.read(inputStream);
3. 获取文档的根标签
Element rootElement = documen.getRootElement()
4. 获取标签的子标签
//获取所有子标签
List<Element> sonElementList = rootElement.elements();
//获取指定标签名的子标签
List<Element> sonElementList = rootElement.elements("标签名");
5. 获取标签体内的文本
String text = element.getText();
6. 获取标签的某个属性的值
String value = element.attributeValue("属性名");
package com.stx.json.test;
import org.dom4j.Attribute;
import org.dom4j.Document;
import org.dom4j.DocumentException;
import org.dom4j.Element;
import org.dom4j.io.SAXReader;
import org.junit.Test;
import java.io.FileInputStream;
import java.io.InputStream;
import java.util.List;
public class TestXml {
@Test
public void testXml() throws DocumentException {
//读取jdbc.xml配置文件,获得document对象
SAXReader saxReader = new SAXReader();
//通过类加载器获得指向字节码根路径下的指定文件的输入流
InputStream resourceAsStream = TestXml.class.getClassLoader().getResourceAsStream("jdbc.xml");
//通过输入流获得配置文件，解析成一个dom对象
Document document = saxReader.read(resourceAsStream);//可以new FileInputStream("文件路径"),每个人在磁盘位置不一样，通用写法
//从document对象上获取配置文件中的信息
/*
* Node 结点
* Element 元素结点
* Attribute 属性节点
* Text 文本节点
* */
Element rootElement = document.getRootElement();
System.out.println(rootElement.getName());
//获取元素下的子元素
List<Element> elements = rootElement.elements();
for (Element element : elements) {
System.out.println("\t" + element.getName());
//从元素上获取属性
Attribute idAttribute = element.attribute("id");
System.out.println("\t\t" + idAttribute.getName() + "=" + idAttribute.getValue());
//继续读取子元素
List<Element> eles = element.elements();
for (Element ele : eles) {
System.out.println( "\t\t\t" + ele.getName() + "=" + ele.getText());
}
}
}
}
<?xml version="1.0" encoding="UTF-8"?>
<!--
1.跟标签志只能有一个
2.第一行永远都是<?xml version="1.0" encoding="UTF-8"?>
3.xml是有约束 约束永远限定xml内部能编写的内容
dtd 简单 上手快 约束没有schema细致
schema 复制 上手慢 约束比dtd约束细致
-->
<jdbc>
<dev id="001">
<username>root</username>>
<password>root</password>
<driver>com.mysql.cj.jdbc.Driver</driver>
<url>jdbc:mysql://localhost:3306/itcast</url>
</dev>
<test id="002">
<username>root</username>>
<password>123456</password>
<driver>com.mysql.cj.jdbc.Driver</driver>
<url>jdbc:mysql://localhost:3306/itcast</url>
</test>
</jdbc>
5125
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
