我的JAVA-Web基础（1）

1.HTML

2.css

CSS（层叠样式表）提供了多种选择器来定位HTML文档中的元素，以便可以应用样式。以下是三种常用的选择器简述：

1. ID 选择器：

   • ID选择器使用HTML元素的id属性来定位单个元素。每个页面中id应该是唯一的，因此一个ID选择器只会匹配一个元素。
   • 语法：在CSS中，ID选择器以#符号开头，后跟ID名称，不包含任何空格。
   • 示例：如果有一个<div>元素的id="header"，那么对应的CSS规则将写作#header { /* 样式规则 */ }。

2. 类选择器：

   • 类选择器用于选择所有具有特定class属性值的元素。与ID不同，类可以在同一个页面中多次使用，并且一个元素也可以拥有多个类。
   • 语法：类选择器以.符号开头，后跟类名，同样不包含空格。
   • 示例：如果有一些元素的class="highlight"，则可以通过.highlight { /* 样式规则 */ }来为它们应用样式。

3. 标签选择器（也称为类型选择器）：

   • 标签选择器是基于HTML标签名称来选择元素的。它会匹配文档中所有的该类型的元素。
   • 语法：直接使用HTML标签名称作为选择器，不需要前缀符号。
   • 示例：要为所有的<p>段落元素定义样式，可以直接写p { /* 样式规则 */ }。

3.Javascript

JavaScript 是一种广泛使用的编程语言，尤其在网页和网络应用程序中。以下是关于 JavaScript 的基本语法的简述，包括变量定义、数据类型和流程控制。

变量定义

JavaScript 支持三种声明变量的方式：

1. var：这是最早的声明变量的方式，在 ES6 之前是唯一的声明方式。var 声明的变量具有函数作用域或全局作用域，并且存在变量提升（hoisting）现象。

   var x = 10;

2. let：引入于 ES6，let 声明的变量具有块级作用域（即在 {} 内），并且不会被提升到其所在的代码块顶部。

   let y = 20;

3. const：同样引入于 ES6，用于声明常量，即一旦赋值后不能更改绑定的值。const 也具有块级作用域。需要注意的是，如果 const 绑定的是一个对象或数组，那么虽然不能改变该引用，但可以修改对象内部的属性或数组中的元素。

   const z = 30;

数据类型

JavaScript 是一种动态类型语言，支持多种数据类型：

1. 原始类型（Primitive Types）：

   • Number：表示整数和浮点数，例如 42 或 3.14。
   • String：表示文本，用单引号或双引号括起来，例如 'Hello' 或 "World"。
   • Boolean：表示逻辑值，只有两个值 true 和 false。
   • Null：表示空值或不存在的对象，只有一个值 null。
   • Undefined：表示未定义的值，当变量被声明但未赋值时，它的默认值是 undefined。
   • Symbol（ES6 引入）：表示独一无二的标识符。
   • BigInt（ES2020 引入）：表示任意精度的整数。

2. 复合类型（Complex Types）：

   • Object：用于存储键值对的数据集合，可以是普通的对象、数组、日期等。
   • Array：特殊的对象，用于存储有序的数据列表。
   • Function：也是对象，表示一段可执行的代码。

流程控制

JavaScript 提供了多种流程控制结构来控制程序的执行顺序：

1. 条件语句：

   • if...else：根据条件的真假执行不同的代码块。

     if (condition) {// 当 condition 为 true 时执行的代码
     } else {// 当 condition 为 false 时执行的代码
     }

2. 循环语句：

   • for：基于初始值、条件和增量/减量重复执行代码块。

     for (let i = 0; i < 5; i++) {// 执行的代码
     }

   • while：当指定条件为真时，重复执行代码块。

     while (condition) {// 执行的代码
     }

3. 跳转语句：

   • break：立即退出最内层的循环或 switch 语句。
   • continue：跳过当前循环的剩余部分，并开始下一次循环迭代。
   • return：从函数中返回一个值，并结束函数的执行。

JavaScript 中的 Array（数组）

定义和创建数组：

1. 直接量语法：使用方括号 [] 来定义一个数组，元素之间用逗号分隔。

   let fruits = ['apple', 'banana', 'cherry'];

2. 构造函数：使用 Array 构造函数来创建一个新的数组。可以传入一个参数作为数组的长度，或者传入多个参数作为数组的元素。

   // 创建一个空数组
   let emptyArray = new Array();// 创建一个包含3个元素的数组
   let numbers = new Array(1, 2, 3);// 创建一个长度为5的空数组
   let lengthArray = new Array(5);

数组的方法和属性：

• 访问元素：通过索引访问数组中的元素，索引从0开始。

  console.log(fruits[0]); // 输出: "apple"

• 修改元素：同样使用索引来修改数组中的元素。

  fruits[1] = 'blueberry';

• 添加/移除元素：

  • push()：在数组末尾添加一个或多个元素，并返回新的长度。
  • pop()：移除数组最后一个元素，并返回该元素。
  • shift()：移除数组第一个元素，并返回该元素。
  • unshift()：在数组开头添加一个或多个元素，并返回新的长度。
  • splice()：可以用来添加或移除元素，非常灵活。

• 遍历数组：

  • forEach()：对数组的每个元素执行一次提供的函数。
  • for...of：遍历数组的值。
  • map()：创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后的返回值。
  • filter()：创建一个新数组，其中包含所有通过测试的元素。
  • reduce()：对数组中的每个元素执行一个由您提供的reducer函数（升序执行），将其结果汇总为单个返回值。

• 查找元素：

  • indexOf()：返回给定元素在数组中第一次出现的位置，如果不存在则返回-1。
  • find()：返回数组中满足提供的测试函数的第一个元素的值。
  • findIndex()：返回数组中满足提供的测试函数的第一个元素的索引。

• 其他方法：

  • slice()：返回一个浅拷贝的新数组对象，这个数组是从开始到结束（不包括结束）选择的原数组的一个部分。
  • concat()：用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。
  • join()：将数组的所有元素连接成一个字符串并返回。

JavaScript 中的 String（字符串）

定义和创建字符串：

1. 直接量语法：使用单引号 '、双引号 " 或反引号（模板字符串）` 来定义字符串。

   let greeting = 'Hello, world!';
   let message = "Welcome to JavaScript.";
   let multiline = `This is a string
   that spans multiple lines.`;

2. 构造函数：使用 String 构造函数来创建一个新的字符串对象。

   let stringObject = new String('Another string');

字符串的方法和属性：

• 访问字符：可以通过索引访问字符串中的字符，或者使用 charAt() 方法。

  console.log(greeting[0]); // 输出: "H"
  console.log(greeting.charAt(0)); // 输出: "H"

• 获取长度：使用 length 属性来获取字符串的长度。

  console.log(greeting.length); // 输出: 13

• 查找子串：

  • indexOf() 和 lastIndexOf()：分别返回指定值首次和最后一次出现的索引，如果找不到则返回 -1。
  • includes()：检查字符串是否包含指定的子字符串，返回布尔值。
  • startsWith() 和 endsWith()：分别检查字符串是否以指定的子字符串开头或结尾，返回布尔值。

• 提取子串：

  • slice()：提取字符串的一部分，并返回新的字符串。
  • substring() 和 substr()：也用于提取字符串，但 substring() 使用起始和结束索引，而 substr() 使用起始索引和要提取的字符数。

• 替换内容：

  • replace()：用一些文本替换与指定的正则表达式匹配的子串。

• 转换大小写：

  • toLowerCase()：将整个字符串转换为小写。
  • toUpperCase()：将整个字符串转换为大写。

• 修剪空白：

  • trim()：去除字符串两端的空白字符。

• 拼接字符串：

  • concat()：用于连接两个或更多的字符串，并返回结果字符串。

• 分割字符串：

  • split()：根据指定的分隔符将字符串分割成数组。

• 模板字符串：允许嵌入表达式，使用 ${expression} 语法。

  let name = 'Alice';
  let age = 30;
  let info = `My name is ${name} and I am ${age} years old.`;

这些是 JavaScript 中处理数组和字符串的一些基本方式。随着 ES6+ 的引入，JavaScript 的字符串和数组功能变得更加丰富和强大。

4.JQuery

jQuery 是一个快速、小巧且功能丰富的库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互等操作。以下是 jQuery 的简单使用指南，包括 DOM 对象的选取和事件的回调。

引入 jQuery

在使用 jQuery 之前，你需要确保已经在网页中引入了 jQuery 库。可以通过下载 jQuery 文件并本地引用，或者通过 CDN 引用：

<!-- 使用CDN引入 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

DOM 对象的选取

jQuery 提供了一种类似 CSS 选择器的方式来选取 DOM 元素。以下是一些常见的选择器示例：

1. 按 ID 选择元素：

   $('#myElement') // 选取 id 为 "myElement" 的元素

2. 按类选择元素：

   $('.myClass') // 选取所有 class 为 "myClass" 的元素

3. 按标签选择元素：

   $('p') // 选取所有的 <p> 段落元素

4. 组合选择器：

   $('#container .item') // 选取 id 为 "container" 下所有 class 为 "item" 的元素

5. 层级选择器：

   • 子元素选择器：$('ul > li') 选取 <ul> 直接子元素中的所有 <li>。
   • 后代选择器：$('ul li') 选取 <ul> 内部的所有 <li>，不论层次关系。
   • 相邻兄弟选择器：$('.class + p') 选取紧跟在 .class 元素之后的第一个 <p> 元素。
   • 通用兄弟选择器：$('.class ~ p') 选取 .class 元素之后的所有 <p> 元素。

6. 属性选择器：

   • $('input[name="username"]') 选取所有 name 属性等于 "username" 的 <input> 元素。

7. 伪类选择器：

   • $('a:first') 选取第一个 <a> 链接。
   • $('li:odd') 选取索引为奇数的 <li> 元素（从0开始计数）。

事件的回调

jQuery 简化了事件处理，提供了多种方法来绑定事件监听器到 DOM 元素上。下面是一些常用的事件处理方法：

1. click()：为指定的元素绑定点击事件。

   $('#myButton').click(function() {alert('Button was clicked!');
   });

2. on()：用于绑定多个事件类型，或者为动态添加的元素绑定事件。

   // 绑定 click 事件
   $('#myButton').on('click', function() {alert('Button was clicked!');
   });// 绑定多个事件
   $('#myElement').on({mouseenter: function() {$(this).css('background-color', 'yellow');},mouseleave: function() {$(this).css('background-color', '');}
   });// 为将来添加的元素绑定事件（委托事件）
   $(document).on('click', '.dynamicElement', function() {alert('Dynamic element was clicked!');
   });

3. hover()：为指定的元素绑定鼠标进入和离开事件。

   $('#myElement').hover(function() {$(this).css('background-color', 'yellow'); // 鼠标进入时},function() {$(this).css('background-color', ''); // 鼠标离开时}
   );

4. submit()：为表单元素绑定提交事件。

   $('form').submit(function(event) {event.preventDefault(); // 阻止表单默认提交行为alert('Form submitted!');
   });

5. ready()：确保代码在 DOM 完全加载后执行。

   $(document).ready(function() {// 这里的代码会在DOM完全加载后执行console.log('DOM is ready');
   });// 或者更简洁的方式
   $(function() {console.log('DOM is ready');
   });

问题一：DOM原生对象与jQuery对象如何相互转换？

1. 从 DOM 原生对象到 jQuery 对象：

   • 使用 $(element)，其中 element 是一个 DOM 元素。

   var domElement = document.getElementById('myElement');
   var $jqElement = $(domElement);

2. 从 jQuery 对象到 DOM 原生对象：

   • 使用 .get() 方法或直接使用 [index] 访问。

   var $jqElement = $('#myElement');
   var domElement = $jqElement.get(0); // 或者 $jqElement[0]

问题二：jQuery如何获取页面中id为myDiv的div元素的最近一个兄弟元素？

• 使用 .next() 方法来获取紧邻的下一个兄弟元素。

var nextSibling = $('#myDiv').next();

问题三：jQuery中设置DOM节点属性的方法有哪些？

1. .data()：用于存储和检索自定义数据。

   $('#myElement').data('user-id', 123); // 存储数据
   var userId = $('#myElement').data('user-id'); // 获取数据

问题四：jQuery遍历元素的方式有哪些？

1. .each()：遍历每个匹配的元素，并执行一个函数。

   $('li').each(function(index, element) {console.log(index, element);
   });

5.HTTP

6.Servlet

Servlet的基本介绍

Servlet的创建

Servlet的路径配置

注解

 通过配置注解为相应的java类设置不同的形态

WebServlet的注解参数

 

 Servlet的生命周期

 

多线程单实例

HttpServletRequest，HttpServletResponse

获取请求参数 

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;@WebServlet("/example")
public class ExampleServlet extends HttpServlet {private static final long serialVersionUID = 1L;@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {// 设置响应内容类型response.setContentType("text/plain");response.setCharacterEncoding("UTF-8");// 获取参数String username = request.getParameter("username");String password = request.getParameter("password");// 写入响应内容response.getWriter().println("GET Request - Username: " + (username != null ? username : "Not provided"));response.getWriter().println("GET Request - Password: " + (password != null ? "Provided" : "Not provided"));}@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {// 设置响应内容类型response.setContentType("text/plain");response.setCharacterEncoding("UTF-8");// 获取参数String username = request.getParameter("username");String password = request.getParameter("password");// 写入响应内容response.getWriter().println("POST Request - Username: " + (username != null ? username : "Not provided"));response.getWriter().println("POST Request - Password: " + (password != null ? "Provided" : "Not provided"));// 简单的登录验证if ("admin".equals(username) && "password".equals(password)) {response.getWriter().println("Login successful!");} else {response.getWriter().println("Invalid username or password.");}}
}

 

转发与重定向 

 

ServletConfig，ServletContent

ServletConfig

 在init()的时候传给Servlet，该Servlet在之后可以通过ServletConfig对象获取对应的Config

 

ServletContext

JDBC

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.Statement;public class SimpleJDBCExample {public static void main(String[] args) {// 加载驱动程序（对于现代JDBC驱动通常不需要显式加载）Class.forName("com.mysql.cj.jdbc.Driver");// 连接数据库Connection connection = DriverManager.getConnection("jdbc:mysql://localhost:3306/mydatabase", "username", "password");// 创建Statement对象Statement statement = connection.createStatement();// 执行查询ResultSet resultSet = statement.executeQuery("SELECT * FROM mytable");// 处理结果集while (resultSet.next()) {int id = resultSet.getInt("id");String name = resultSet.getString("name");System.out.println("ID: " + id + ", Name: " + name);}// 关闭资源resultSet.close();statement.close();connection.close();}
}