Java Web
Java Web指的是用Java技术来解决相关Web互联网领域的技术栈,即使用Java语言开发基于互联网的应用。Web软件架构可分为C/S(Client/Server,客户端/服务器)和B/S(Browser/Server,浏览器/服务器)。在B/S架构中资源可分为静态资源和动态资源。静态资源就是使用静态网页技术发布的资源,如HTML、CSS、JavaScript等,所有用户访问得到的结果都是一样的,如果用户请求的是静态资源,那么服务器会直接将静态资源发送给浏览器,浏览器中内置的静态资源解析引擎可以展示静态资源;动态资源就是使用动态网页开发技术发布的资源,如JSP、Servlet、PHP、ASP等,每个用户访问得到的结果可能是不一样的,如果用户请求的是动态资源,那么服务器就会执行动态资源并将其转换为静态资源后再发送给浏览器。学习动态资源前必须学习静态资源。
MySQL
MySQL是一种关系型数据库管理系统,关系型数据库都是将数据保存在不同的表中的,而不是将所有数据放在一个大仓库里,这样就增加了速度并提高了灵活性。数据库(DataBase)就是用于存储和管理数据的仓库,可以持久化存储数据,数据库本质上就是一个文件系统,方便存储和管理数据,使用了统一的方式来操作数据库,所有的关系型数据库都可以使用通用的SQL语句进行管理。
结构化查询语言(Structured Query Language,简称SQL)定义了操作所有关系型数据库的规则,每种数据库操作的方式存在不一样的地方,这称为数据库“方言”。SQL语句可以单行或多行书写,以分号结尾;MySQL数据库的SQL语句不区分大小写,关键字建议大写;MySQL三种注释,单行注释(–和MySQL特有的#)),多汗注释(/**/)。
MySQL命令行操作
net start mysql
net stop mysql
mysql -u用户名 -p密码
mysql -hIP地址 -u用户名 -p密码
mysql
exit、quit
mysqldrmp -u用户名 -p密码 数据库名称 > 保存的路径
source SQL文件路径
SQL常用数据类型
数据类型 | 描述 |
---|
int | 整数类型 | double(X, Y) | 小数类型,一共X位,小数占Y位 | date | 日期,只包含年月日,yyyy-MM-dd | datetime | 日期,包含年月日时分秒,yyyy-MM-dd HH:mm:ss | timestamp | 时间戳,包含年月日时分秒,不赋值或赋值为null则默认使用系统当前时间 | varchar(X) | 字符串类型,最多包含X个字符 |
注意 : 除了数字类型的数据无需使用单引号或双引号括起来,其它数据类型都需要使用!
SQL语句的分类
-
数据定义语言(Data Definition Language,简称DDL)是用来定义数据库对象的,如数据库、数据库表。 -
数据操作语言(Data Manipulation Language,简称DML)是用来对数据库表中的数据进行增删改的。 -
数据查询语言(Data Query Language,简称DQL)是用来查询数据库表中记录(数据)的。 -
数据控制语言(Data Control Language,简称DCL)是用来定义数据库访问权限和安全级别及创建用户的。
数据定义语言
CREATE DATABASE [IF NOT EXISTS] 数据库名 [CHARACTER SET 字符集名];
DROP DATABASE [IF EXISTS] 数据库名;
ALTER DATABASE 数据库名 CHARACTER SET 字符集名;
SHOW DATABASES;
SHOW CREATE DATABASE 数据库名;
USE 数据库名;
SELECT DATABASE();
CREATE TABLE 表名(
字段1 数据类型,
字段N 数据类型
);
CREATE TABLE 表名 LIKE 源表;
INSERT INTO 表名 SELECT * FROM 源表;
CREATE TABLE 表名 SELECT * FROM 源表;
DROP TABLE [IF EXISTS] 表名;
ALTER TABLE 表名 RENAME TO 新表名;
ALTER TABLE 表名 CHARACTER SET 字符集名;
ALTER TABLE 表名 ADD 字段名 数据类型;
ALTER TABLE 表名 CHANGE 字段名 新字段名 新数据类型;
ALTER TABLE 表名 MODIFY 字段名 新数据类型;
ALTER TABLE 表名 DROP 字段名;
SHOW TABLES;
DESC 表名;
SHOW CREATE TABLE 表名;
数据操作语言
INSERT INTO 表名(字段1, 字段N) VALUES(字段值1, 字段值N);
INSERT INTO 表名 VALUES(字段值1, 字段值N);
INSERT INTO 表名 VALUES(字段值1, 字段值N), (字段值1, 字段值N);
DELETE FROM 表名 [WHERE 条件];
DELETE FROM 表名;
TRUNCATE TABLE 表名;
UPDATE 表名 SET 字段1 = 字段值1, 字段N = 字段值N [WHERE 条件];
数据查询语言
查询语法
SELECT
字段列表/聚合函数
FROM
表名列表
WHERE
条件列表
GROUP BY
分组字段
HAVING
分组后条件
ORDER BY
排序
LIMIT
分页限定;
基础查询
SELECT * FROM 表名;
SELECT 字段 FROM 表名;
SELECT 字段1, 字段N FROM 表名;
SELECT DISTINCT 字段 FROM 表名;
SELECT DISTINCT 字段1, 字段N FROM 表名;
SELECT 字段A + 字段B FROM 表名;
SELECT 字段A - IFNULL(字段B, X) FROM 表名;
SELECT 字段 [AS] 别名 FROM 表名;
条件查询
SELECT * FROM 表名 WHERE 字段 = 值N;
SELECT * FROM 表名 WHERE 字段 <> 值N;
SELECT * FROM 表名 WHERE 字段 >= 值1 AND 字段 <= 值2;
SELECT * FROM 表名 WHERE 字段 BETWEEN 值1 AND 值2;
SELECT * FROM 表名 WHERE 字段 = 值1 OR 字段 = 值2;
SELECT * FROM 表名 WHERE 字段 IN (值1, 值2);
SELECT * FROM 表名 WHERE 字段 IS NULL;
SELECT * FROM 表名 WHERE 字段 IS NOT NULL;
模糊查询
SELECT * FROM 表名 WHERE 字段 LIKE "X%";
SELECT * FROM 表名 WHERE 字段 LIKE "_X%";
SELECT * FROM 表名 WHERE 字段 LIKE "___";
SELECT * FROM 表名 WHERE 字段 LIKE "%X%";
排序查询
SELECT * FROM 表名 ORDER BY 字段 ASC;
SELECT * FROM 表名 ORDER BY 字段 DESC;
SELECT * FROM 表名 ORDER BY 字段1 ASC, 字段2 DESC;
聚合函数
SELECT COUNT(字段) FROM 表名;
SELECT COUNT(IFNULL(字段, 0)) FROM 表名;
SELECT COUNT(*) FROM 表名;
SELECT MAX(字段) FROM 表名;
SELECT MIN(字段) FROM 表名;
SELECT SUM(字段) FROM 表名;
SELECT AVG(字段) FROM 表名;
分组查询
SELECT 字段1, COUNT(*) FROM 表名 GROUP BY 字段1;
SELECT 字段1, COUNT(*) FROM 表名 [WHERE 条件] GROUP BY 字段1 [HAVING 条件];
分页查询
SELECT * FROM 表名 LIMIT 00, N;
SELECT * FROM 表名 LIMIT 1N, N;
SELECT * FROM 表名 LIMIT 2N, N;
数据控制语言
用户管理
CREATE USER "用户名" @"主机名" IDENTIFIED BY "密码";
DROP USER "用户名" @"主机名";
UPDATE USER SET PASSWORD = PASSWORD("新密码") WHERE USER = "用户名";
FLUSH PRIVILEGES;
SET PASSWORD FOR "用户名" @"主机名" = PASSWORD("新密码");
SELECT * FROM USER;
1.管理员身份打开CMD
2.使用无验证方式启动MySQL服务
3.打开新的CMD窗口,直接输入mysql命令后回车就可以登录成功了
4.USE mysql;
5.SET PASSWORD FOR "root" @"主机名" = PASSWORD("新密码");
6.打开任务管理器,手动结束mysqld.exe的进程
7.启动MySQL服务后就可以使用新密码登录了
权限管理
SHOW GRANTS FOR "用户名" @"主机名";
GRANT 权限列表 ON 数据库名.表名 TO "用户名" @"主机名";
REVOKE 权限列表 ON 数据库名.表名 FROM "用户名" @"主机名";
MySQL约束
非空约束
CREATE TABLE 表名(
···
字段 数据类型 NOT NULL
);
ALTER TABLE 表名 MODIFY 字段 数据类型 NOT NULL;
ALTER TABLE 表名 MODIFY 字段 数据类型;
唯一约束
CREATE TABLE 表名(
···
字段 数据类型 UNIQUE
);
ALTER TABLE 表名 MODIFY 字段 数据类型 UNIQUE;
ALTER TABLE 表名 DROP INDEX 字段;
主键约束
CREATE TABLE 表名(
···
字段 数据类型 PRIMARY KEY AUTO_INCREMENT
);
ALTER TABLE 表名 MODIFY 字段 数据类型 PRIMARY KEY;
ALTER TABLE 表名 DROP PRIMARY KEY;
ALTER TABLE 表名 MODIFY 字段 数据类型 AUTO_INCREMENT;
ALTER TABLE 表名 MODIFY 字段 数据类型;
外键约束
CREATE TABLE 表名(
···
外键字段名 数据类型;
CONSTRAINT 外键名 FOREIGN KEY (外键字段名) REFERENCES 主表名(主表字段名)
);
ALTER TABLE 表名 ADD
CONSTRAINT 外键名 FOREIGN KEY (外键字段名) REFERENCES 主表名(主表字段名);
ALTER TABEL 表名 DROP FOREIGN KEY 外键名;
ALTER TABLE 表名 ADD
CONSTRAINT 外键名 FOREIGN KEY (外键字段名) REFERENCES 主表名(主表字段名)
ON UPDATE CASCADE
ON DELETE CASCADE;
MySQL多表
多表查询可分为内连接查询、外连接查询以及子查询。笛卡尔积指的是在数学中两个集合X和Y的所有组成情况,要完成多表查询就需要消除无用的数据。
多表关系实现
- 一对一,可以在任意一方添加唯一外键指向另一方的主键。
- 一对多,(多对一)可以在多的一方建立外键指向另一方的主键。
- 多对多,需借助第三张中间表,表中至少包含的两个字段来作为第三张表的外键分别指向两张表的主键。
内连接查询
SELECT 字段列表 FROM 表名列表 WHERE 条件列表;
SELECT 字段列表 FROM 表1 [INNER] JOIN 表2 ON 条件;
注意 : 使用内连接查询需要知道是从哪些表中查询数据,条件是什么,以及要查询的字段有哪些?
外连接查询
SELECT 字段列表 FROM 表1 LEFT [OUTER] JOIN 表2 ON 条件;
SELECT 字段列表 FROM 表1 RIGHT [OUTER] JOIN 表2 ON 条件;
嵌套子查询
MySQL事务
事务指的是要做的或所作的事情,如果一个包含多个步骤的业务操作被事务管理,那么这些操作要么同时成功,要么同时失败。
START TRANSACTION;
ROLLBACK;
COMMIT;
事务提交方式
- 自动提交,MySQL数据库就是自动提交的,一条DML语句就会自动提交一次事务。
- 手动提交,Oracle数据库默认就是手动提交的,需要先开启事务再提交。
SELECT @@AUTOCOMMIT;
SET @@AUTOCOMMIT = 0;
事务四大特征
- 原子性,是不可分割的最小操作单位,要么同时成功,要么同时失败。
- 持久性,当事务提交或回滚后,数据库会持久化的保存数据。
- 隔离性,隔离状态执行事务,多个事务之间相互独立。
- 一致性,事务操作前后,数据库的完整性约束没有被破坏。
事务隔离级别
多个事务之间是隔离的、相互独立的。但是如果多个事务操作同一批数据则会引发一些问题,设置不同的隔离级别就可以解决这些问题。多个事务之间会存在的问题如下,
- 脏读,一个事务读取到另一个事务中没有提交的数据。
- 虚读,又称不可重复读,在同一个事务中两次读取到的数据不一样。
- 幻读,一个事务操作数据表中的所有记录,另一个事务添加了一条数据,则第一个事务查询不到自己的修改。
READ UNCOMMITTED;
READ COMMITTED;
REPEATABLE READ;
SERIALIZABLE;
SELECT @@TX_ISOLATION;
SELECT GLOBAL TRANSACTION ISOLATION LEVEL 级别字符串;
注意 : 隔离级别从小到大安全性越来越高,但效率越来越低!
数据库设计
在设计数据库时需遵循一些规范,设计出合理的关系型数据库,这些不同的规范要求被称为不同的范式,各种范式呈递次规范,越高的范式数据冗余越小,要遵循后边的范式要求就必须先遵循前边的所有范式要求。目前关系型数据库有六种范式,第一范式(1NF)、第二范式(2NF)、第三范式(3NF)、巴斯·科德范式(BCNF)、第四范式(4NF)和第五范式(5NF,完美范式)。
范式 | 描述 |
---|
1NF | 每一列都是不可分割的元组数据项 | 2NF | 在1NF基础上非码属性必须完全依赖于码,即在1NF基础上消除非主属性对主码部分函数依赖 | 3NF | 在2NF基础上任何非主属性不依赖于其它非主属性,即在2NF基础上消除传递依赖 |
- 函数函数依赖,A–>B,如果A属性(属性组)的值可以确定唯一B属性的值,则称B依赖于A。
- 完全函数依赖,A–>B,如果A是一个属性组,则B属性值的确认需要依赖A属性组中所有的属性值。
- 部分函数依赖,A–>B,如果A是一个属性组,则B属性值的确认只需依赖A属性组中某些属性值即可。
- 传递函数依赖,A–>B,B–>C,如果通过A属性(属)的值可以确定唯一B属性的值,通过B属性(组)的值可以确定唯一C属性的值,则称C传递依赖于A。
注意 : 如果在一张表中一个属性(组)被其它属性完全依赖,则称这个属性(组)为该表的码,主属性指的是属性组中的所有属性,非主属性指的是除码属性(组)的属性!
JDBC
Java数据库连接(Java Database Connectivity,简称JDBC)是Sun公司定义的一套操作所有关系型数据库的规则(接口)。数据库产商实现这套接口并且提供数据库驱动Jar包,我们就可以使用这套接口来操作数据库。
DriverManager:驱动管理对象
-
static synchronized void registerDriver(java.sql.Driver driver) 注册驱动,告知程序该使用哪一个数据库驱动Jar包 -
static Connection getConnection(String url, String name, String password) 参数url指的是数据库连接的路径;user指的是数据库用户名;password指的是密码
Connection:数据库连接对象
-
Statement createStatement() 获取执行SQL的对象,在拼接SQL时会造成SQL注入的问题 -
PreparedStatement prepareStatement(String sql) 获取执行SQL的对象,使用预编译的SQL,参数使用?作为占位符可有效防止SQL注入的问题 -
void setAutoCommit(boolean autoCommit) 参数设置为false即开启事务 -
void commit() 当所有SQL都执行完提交事务 -
void rollback() 回滚事务,多用于catch中
Statement:执行SQL的对象
-
boolean execute(String sql) 可以执行任意SQL,不推荐使用 -
int executeUpdate(String sql) 用于执行insert、create、alter、drop等语句,返回值为影响的行数,返回值>0则执行成功,反之则失败 -
ResultSet executeQuery(String sql) 用于执行select语句
PreparedStatement:执行SQL的对象
void setXxx(int parameterIndex, xxx x) 给?赋值,参数parameterIndex指的是?从1开始的位置编号;x指的是?的值
ResultSet:结果集对象
DB.sql
CREATE DATABASE db000;
USE db000;
CREATE TABLE account(
id INT PRIMARY KEY AUTO_INCREMENT,
name VARCHAR(11) NOT NULL,
money INT
);
INSERT INTO account VALUES
(NULL, 'chongyi', 100),
(NULL, 'lianger', 200),
(NULL, 'zhansan', 300);
Demo.java
import java.sql.*;
public class Demo {
public static void main(String[] args) throws Exception {
Connection conn = null;
PreparedStatement prep = null;
ResultSet rs = null;
try {
Class.forName("com.mysql.jdbc.Driver");
conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/db000", "root", "root");
conn.setAutoCommit(false);
prep = conn.prepareStatement("update account set money = 300 where id = ?");
prep.setInt(1, 4);
if (prep.executeUpdate() <= 0) {
System.out.println("SQL执行失败!");
}
int i = 1 / 0;
prep = conn.prepareStatement("select * from account");
rs = prep.executeQuery();
while (rs.next()) {
System.out.println(rs.getInt(1) + " " + rs.getString("name") + " " + rs.getInt("money"));
}
conn.commit();
} catch (Exception e) {
if (conn != null) {
conn.rollback();
}
e.printStackTrace();
} finally {
if (rs != null) {
rs.close();
}
if (prep != null) {
prep.close();
}
if (conn != null) {
conn.close();
}
}
}
}
JDBCUtils
jdbc.properties
driver=com.mysql.jdbc.Driver
url=jdbc:mysql://localhost:3306/db000
user=root
password=root
JDBCUtils.java
import java.sql.*;
import java.util.Properties;
public class JDBCUtils {
private static String driver;
private static String url;
private static String user;
private static String password;
static {
try {
Properties prop = new Properties();
prop.load(JDBCUtils.class.getClassLoader().getResourceAsStream("jdbc.properties"));
driver = prop.getProperty("driver");
url = prop.getProperty("url");
user = prop.getProperty("user");
password = prop.getProperty("password");
Class.forName(driver);
} catch (Exception e) {
e.printStackTrace();
}
}
public static Connection getConnection() throws Exception {
return DriverManager.getConnection(url, user, password);
}
public static void close(Connection conn, PreparedStatement prep, ResultSet rs) {
if (rs != null) {
try {
rs.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
if (prep != null) {
try {
prep.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
if (conn != null) {
try {
conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
}
}
数据库连接池
数据库连接池其实就是一个用于存放数据库连接的容器(集合)。当系统初始化后容器会被创建并且申请一些连接对象,当用户来访问数据库时会从容器中获取连接对象,用户访问完后会将对象归还给容器。使用数据库连接池可以有效的节约资源,且用户访问更高效。实现数据库连接池的标准接口为javax.sql.DataSource,我们一般不会去实现它,都是由数据库产商来实现。常见的数据库连接池技术有c3p0、druid等。
c3p0-config.xml
<c3p0-config>
<default-config>
<property name="driverClass">com.mysql.jdbc.Driver</property>
<property name="jdbcUrl">jdbc:mysql://localhost:3306/db000</property>
<property name="user">root</property>
<property name="password">root</property>
<property name="initialPoolSize">5</property>
<property name="maxPoolSize">10</property>
<property name="checkoutTimeout">3000</property>
</default-config>
<named-config name="other-c3p0">
<property name="driverClass">com.mysql.jdbc.Driver</property>
<property name="jdbcUrl">jdbc:mysql://localhost:3306/db000</property>
<property name="user">root</property>
<property name="password">root</property>
<property name="initialPoolSize">5</property>
<property name="maxPoolSize">10</property>
<property name="checkoutTimeout">3000</property>
</named-config>
</c3p0-config>
druid.properties
driverClassName=com.mysql.jdbc.Driver
url=jdbc:mysql:///db000
username=root
password=root
# 初始化连接数量
initialSize=5
# 最大连接数
maxActive=10
# 最大等待时间
maxWait=3000
Demo.java
import com.alibaba.druid.pool.DruidDataSourceFactory;
import com.mchange.v2.c3p0.ComboPooledDataSource;
import javax.sql.DataSource;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.Properties;
import java.util.Random;
public class Demo {
public static void main(String[] args) throws Exception {
DataSource ds;
Connection conn;
if ((new Random().nextInt(2)) == 0) {
ds = new ComboPooledDataSource();
} else {
Properties prop = new Properties();
prop.load(Demo.class.getClassLoader().getResourceAsStream("druid.properties"));
ds = DruidDataSourceFactory.createDataSource(prop);
}
conn = ds.getConnection();
PreparedStatement prep = conn.prepareStatement("select * from account");
ResultSet rs = prep.executeQuery();
while (rs.next()) {
System.out.println(rs.getInt(1) + " " + rs.getString("name") + " " + rs.getInt("money"));
}
JDBCUtils.close(conn, prep, rs);
}
}
JDBCUtils.java
import com.alibaba.druid.pool.DruidDataSourceFactory;
import javax.sql.DataSource;
import java.io.IOException;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.Properties;
public class JDBCUtils {
private static DataSource ds;
static {
try {
Properties prop = new Properties();
prop.load(JDBCUtils.class.getClassLoader().getResourceAsStream("druid.properties"));
ds = DruidDataSourceFactory.createDataSource(prop);
} catch (IOException e) {
e.printStackTrace();
} catch (Exception e) {
e.printStackTrace();
}
}
public static DataSource getDataSource() {
return ds;
}
public static Connection getConnection() throws SQLException {
return ds.getConnection();
}
public static void close(Connection conn, PreparedStatement prep, ResultSet rs) {
if (rs != null) {
try {
rs.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
if (prep != null) {
try {
prep.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
if (conn != null) {
try {
conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
}
}
}
HTML
超文本标记语言(Hyper Text Markup Language,简称HTML)是最基础的网页开发语言。超文本指的是用超链接的方法将各种不同空间的文字信息组织在一起的网状文本;标记语言指的是由标签构成的语言,标记语言并不是编程语言。单标签指的是只有一个结束标签的标签;双标签指的是有开始标签也有结束标签的一对标签;标签中嵌套的标签必须一一对应;在标签中可以定义属性,其属性是由键值对构成,值需使用引号引起来。
<!DOCTYPE html><html><head>
<meta charset="UTF-8">
<title>HTML</title>
</head><body>
HelloWorld
</body></html>
常用标签
标签 | 描述 |
---|
h1-h6 | 标题标签,字体逐渐减小 | p | 段落标签,color、size | hr | 水平线标签,width、algin | img | 图片标签,src | ol、ul、li | 有序、无序列表标签、列表标签 | a | 超链接标签,href、target | div | 块级标签 | span | 行内标签 | table | 表格标签,cellpadding、cellspacing | caption | 表格标题标签 | th、tr、td | 定义表头、行、单元格,colspan、rowspan | form | 表单标签,action、method | input | 表单项标签,type、name、id、value | lable | 元素定义标记,for(将其指定为input的id进行绑定) | select、option | 下拉列表、列表项标签 |
表单标签
表单是用于采集用户输入的数据的来和服务器进行交互的,它可以定义一个采集用户数据的范围。其属性action指的是提交数据的URL;method指的是提交的方式(get、post较为常用),get请求的参数会在地址栏中显示,会封装到请求行中(post请求则会被封装到请求体中),请求参数的大小有限制且不太安全;post请求刚好相反。表单项中的数据要想被提交就必须指定其name属性,表单项标签可以通过其type属性值来改变元素展示的样式。
type属性 | 描述 |
---|
text | 默认为文本输入框,placeholder | password | 密码输入框 | radio | 单选框,checked | checkbox | 复选框 | file | 文件选择框 | hidden | 隐藏域 | submit | 提交按钮 | button | 普通按钮 | image | 图片提交按钮,src |
CSS
层叠样式表(Cascading Style Sheets,简称CSS)不仅可以静态地修饰网页,还能配合各种脚本语言动态地对网页各元素进行格式化,层叠指的是多个样式可以作用在同一个HTML元素上且同时生效,使用CSS可以将内容展示和样式控制进行分离,从而降低耦合度并提高开发效率。
- 内联样式,标签内使用style属性;内部样式,head标签内定义style标签。
- 外部样式,head标签内定义link标签,设置其属性href;或在style标签内定义@import url(CSS文件路径)。
选择器 {
···
属性: 属性值;
}
选择器
选择器 | 描述 |
---|
id选择器 | #id属性值 {···},id唯一 | 类选择器 | .class属性值 {···} | 元素选择器 | 标签名称 {···} | 选择所有元素 | * {···},优先级id > class > 元素选择器 | 并集选择器 | 选择器1, 选择器2 {···} | 子选择器 | 选择器1 选择器2 {···},筛选选择器1元素下的选择器2元素 | 父选择器 | 选择器1 > 选择器2 {···},筛选选择器2元素的父元素选择器1 | 属性选择器 | 元素名称[属性名=“属性值”] {···},选择满足条件的元素 | 伪类选择器 | 元素:状态 {···},选择一些元素具有的状态,如link、hover等 |
常用属性
属性 | 描述 |
---|
font-size | 字体大小 | color | 字体颜色 | text-align | 对齐方式 | line-height | 行高 | background | 背景 | border | 边框 | margin、padding | 外边距、内边距 | width、height | 宽度、高度 | float | 浮动 |
JS
(JavaScript,简称JS)是一种具有函数优先的轻量级、解释性或即时编译型的编程语言。其运行在客户端浏览器中,每个浏览器都有JS的解析引擎。JS可用来增强用户和HTML页面的交互过程;可以控制HTML让页面有一些动态的效果以增强用户的体验。JS = ECMAScript(客户端脚本语言的标准)+ JS自己特有的内容。JS代码可以定义在HTML页面的任何地方且可定义多个,但定义的位置会影响执行顺序。
- JS内部定义,定义script标签,标签体的内容就是JS代码。
- JS外部引入,定义script标签,通过src属性引入外部JS文件。
数据类型
JS中的数据类型可分为基本数据类型(number、string、boolean、null、undefined)和引用数据类型(对象)。number类型中NaN(not a number)指的是一个不是数字的数字类型。
变量
变量指的是一块存储数据的内存空间,Java是强类型语言,而JS是弱类型语言。强类型指的是在开辟变量存储空间时定义了空间将来存储数据的类型,只能存储固定类型的数据;弱类型指的是在开辟变量存储空间时不定义空间将来的存储数据的类型,可存放任意类型的数据。typeof()方法可以获取变量的类型,null运算后得到的是Object。定义变量时如果使用var关键字则该变量为局部变量;不使用该变量则为全局变量。
运算符
JS中运算符可分为算数运算符、赋值运算符、比较运算符、逻辑运算符和三元运算符。===(全等于)在比较前会先判断类型是否相同,相同则继续判断数值,不同则直接返回false。
流程控制
流程控制可分为顺序结构、选择结构和循环结构,如if、else、switch、for、while、do···while等。
基本对象
对象 | 描述 |
---|
Array | 数组对象,join()、push()、length | Date | 日期对象,toLocaleString()、getTime() | Math | 数学对象,random()、ceil()、floor()、round()、PI | RegExp | 正则表达式对象,test() | Global | 全局对象,encodeURI()、ParseInt()、isNaN()、eval() |
<!DOCTYPE html><html><head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head><body>
<script>
function fun(x, y) {
document.write(x + y);
console.log(x - y);
}
fun(2, 1);
var num = fun.length;
var ar1 = new Array(1, 2, 3, 4);
var ar2 = new Array(4);
var ar3 = [1, 2, 3, 4];
var str = ar3.join("-");
var num = ar3.push(5, 6);
var num = ar3.length;
var date = new Date();
var tim = date.toLocaleString();
var tod = date.getTime();
var nu1 = Math.random() * 100 + 1;
var nu2 = Math.floor(nu1);
var nu3 = Math.ceil(nu1);
var nu4 = Math.round(nu1);
var pi1 = Math.PI;
var re1 = new RegExp("^\\w{6,16}$");
var re2 = /^\w{6,16}$/;
var str = "goodhbao";
var fla = re2.test(str);
var str = "https://www.baidu.com?wd=计算机";
var encode1 = encodeURI(str);
var encode2 = encodeURIComponent(str);
var decode1 = decodeURI(encode1);
var decode2 = decodeURIComponent(encode2);
var num = parseInt("123abc");
var nnn = NaN;
document.write(nnn == NaN);
document.write(isNaN(nnn));
eval(alert("Hello"));
</script>
</body></html>
事件
事件是JS和HTML之间交互的手段,即某些组件被执行了某些操作后而触发了某些代码的执行。事件指的就是某些操作,如单击、双击等;事件源指的就是组件,如按钮、文本框等;监听器指的就是代码。注册监听就是将事件、事件源、监听器结合在一起,当事件源上发生了某个事件则会触发某个监听器代码。
事件绑定
- 在html标签上指定事件的属性,属性值就是JS代码。
- 通过JS获取元素对象并指定事件属性(设置一个函数)。
常用事件
事件 | 描述 |
---|
onclick、ondblclick | 单击、双击事件 | onchange | 内容改变事件 | onfocus | 获得焦点事件 | onblur | 失去焦点事件 | onload | 加载事件 | onkeydown | 按键按下事件 | onkeypress | 部分按键按下事件 | onkeyup | 按键松开事件 |
<!DOCTYPE html><html><head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head><body onload="alert('加载事件触发')">
<input type="button" onclick="alert('单击事件触发')" value="单击">
<input type="button" ondblclick="alert('双击事件触发')" value="双击"><br>
<input type="text" onchange="alert('内容改变事件触发')"><br>
<input type="text" onfocus="console.log('获得焦点事件触发')"><br>
<input type="text" onblur="alert('失去焦点事件触发')"><br>
<input type="text" onkeydown="alert('按键按下事件触发')"><br>
<input type="text" onkeypress="alert('部分按键按下事件触发')"><br>
<input type="text" id="sk"><br>
<script>
document.getElementById("sk").onkeyup = function() {
alert("按键松开事件触发");
}
</script>
</body></html>
BOM
浏览器对象模型(Browser Object Model,简称BOM)指的是将浏览器各个组成部分封装成对象,由Window窗口对象、Navigator浏览器对象、Screen显示器屏幕对象、History历史记录对象、Location地址栏对象组成。
对象 | 方法、属性 |
---|
Window | alert()、confirm()、prompt()、open()、close() | Window | setTimeout()、clearTimeout()、setInterval()、clearInterval() | Window | history、location、navigator、screen、document | Location | reload()、href | History | back()、forward()、go()、length |
<!DOCTYPE html><html><head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head><body>
<script>
window.alert("弹出带有一段消息和一个确认按钮的警告框");
document.write(confirm("弹出带有一段消息以及确认、取消按钮的对话框,确定返回true,取消返回false"));
console.log(prompt("弹出带有一段消息以及确认、取消按钮和供用户输入的对话框,返回值为用户输入的值"));
var win = window.open("https://www.baidu.com");
win.close();
var tim = window.setTimeout("alert('指定毫秒值后弹出')", 3000);
clearTimeout(tim);
var tim = setInterval(function() {
alert("循环在指定毫秒值后弹出");
}, 3000);
clearInterval(tim);
location.reload();
alert(location.href);
location.href = "https://www.baidu.com";
history.back();
history.forward();
history.go(2);
alert(history.length);
</script>
</body></html>
DOM
文档对象模型(Document Object Model,简称DOM)指的是将标记语言文档的各个组成部分封装为对象,我们可以使用这些对象来对标记语言文档进行CRUD的动态操作。
对象 | 方法、属性 |
---|
Document | getElementById()、createElement() | Document | createComment()、createAttribute()、createTextNode() | Element | setAttribute()、removeAttribute() | Element | style、className、innerHTML | Node | appendChild()、removeChild()、replaceChild()、parentNode |
<!DOCTYPE html><html><head>
<meta charset="UTF-8">
<title>JavaScript</title>
<style>
#s1 {width: 200px; height: 200px; background-color: #00f;}
#s2 {width: 100px; height: 100px; background-color: #0f0;}
#s3 {width: 100px; height: 100px; background-color: #0ff;}
.s4 {width: 100px; height: 100px; background-color: #aaa;}
</style>
</head><body>
<div id="iiii">1</div>
<div class="c">2</div>
<div name="nn">3</div>
<div>4</div>
<div id="s1">
<div id="s2"></div>
</div>
<p id="p1">HelloWorld</p>
<script>
document.getElementById("iiii").onclick = function() {
alert(1);
}
document.getElementsByClassName("c")[0].onclick = function() {
alert(2);
}
document.getElementsByName("nn")[0].onclick = function() {
alert(3);
}
document.getElementsByTagName("div")[3].onclick = function() {
alert(4);
}
var s2 = document.getElementById("s2");
var s1 = s2.parentNode;
s1.removeChild(s2);
var s3 = document.createElement("div");
s3.setAttribute("id", "s3");
s3.removeAttribute("id");
s1.appendChild(s3);
var p1 = document.getElementById("p1");
p1.style.color = "#f00";
p1.className = "s4";
console.log(p1.innerHTML);
p1.innerHTML = "JavaScript";
</script>
</body></html>
|