资讯详情

JavaWeb

.jpeg.-jpg

JavaWeb基础

文章目录

  • JavaWeb基础
    • 1、jQuery
      • 1.1 概述
      • 1.2 好处
    • 3、jQuery选择器
      • 3.1 基本选择器
      • 3.2 层级选择器
      • 3.3 过滤选择器
        • 3.3.1 基本过滤器
        • 3.3.2 内容过滤器
        • 3.3.3 属性过滤器
        • **3.3.4 表单过滤器**
        • 3.3.5 表单对象属性过滤器
        • 3.3.6 元素筛选
    • 4、jQuery属性操作
    • 5、jQuery-css样式操作
    • 6、jQuery动画操作
    • 7、jQuery事件操作
    • 8、XML简介
      • 8.1 什么是XML
      • 8.2 XML语法
      • 8.3 XML 与 HTML 的主要差异
      • 8.4 什么是 XML 元素
    • 9、dom4j解析技术
    • 10、JavaWeb
      • 10.1 JavaWeb概述
      • 10.2 Web资源的分类
      • 10.3 常用的Web服务器
    • 11、Tomcat的使用
      • 11.1 目录介绍
      • 11.2 Tomcat部署项目
      • 11.3 手托html页面到浏览器，输入浏览器http://ip地址:端口号/工程名l访问的区别
      • 11.4 IDEA创建动态Web工程
    • 12、Servlet技术
      • 12.1 什么是Selvlet
      • 12.2 手动实现Servlet程序
      • 12.3 Servlet-url如何定位到Servlet程序去访问
      • 12.4 Servlet生命周期
      • 12.5 继承HttpServlet实现Servlet程序
      • 12.6 Servlet继承体系
      • 12.7 ServletConfig类
      • 12.8 ServletContext接口
    • 13、Http协议
      • **13.1 请求的Http协议格式**
        • **GET请求**
        • **POST请求**
        • **请求头常用说明**
        • 哪些是GET什么是请求？POST请求
      • 13.2 响应的Http协议格式
      • 13.3 常见的响应码说明
      • 13.4MIME类型说明
    • 14、HttpServletRequest类
      • **14.1 HttpServletRequest的作用**
      • 14.2HttpServletRequest类的常用方法
      • 14.3 请求转发
      • 14.4 base 标签的作用
      • 14.5 Web 相对路径和绝对路径
    • 18、HttpServletResponse 类
      • 18.1 HttpServletResponse类的作用
      • 18.2 两个输入流的说明
      • 18.3 如何将传数据返回客户端
      • 18.4 请求重定向
    • 19、JavaEE项目三层结构
    • 20、Jsp
      • 20.1 什么是jsp
      • 20.2 JSP的本质
      • 20.3 JSP的三种语法
        • 20.3.1 JSP的page指令
        • 20.3.2 JSP常用脚本
          • 声明脚本(很少使用)
          • 表达式脚本(常用)
          • 代码脚本
      • 20.4 JSP九大内置对象
      • 20.5 JSP四大域对象
      • 20.6 JSP中的out输出和response.getWriter输出的区别
      • 20.7 JSP的常用标签
        • 20.7.1 静态包含
        • 20.7.2 动态包含
        • 20.7.3 JSP标签-请求转发
      • 20.8 练习
      • 20.9 Listener监听器
        • 20.9.1 ServletContextListener监听器
      • 20.10 EL 表达式
        • 20.10.1 什么是EL表达式，EL表达式的作用
        • 20.10.2 EL表达式搜索域数据的顺序
        • 20.10.3 EL 表达式输出 Bean 一般属性，数组属性。List 集 合属性，map 集合属性
        • 20.10.4 EL 表达式-操作
          • **关系运算**
          • 逻辑运算
          • **算数运算**
          • empty运算
          • 三元运算
          • ”.“点运算和 []中括号运算符
          • EL表达式11个隐含对象
          • pageContext的使用
          • EL 使用表达式其他隐含对象
      • 20.11 JSTL标签库
        • 20.11.1core 核心库使用
    • 21.上传和下载文件
      • **21.1 文件上传**
      • 21.2 commons-fileupload.jar 常用 API
      • 21.3 文件下载
        • **解决附件中文名乱码问题：**
    • 22.数据的包装和提取 BeanUtils 的使用
    • 22、MVC 概念
    • 23、Cookie 饼干
      • 23.1 如何创建Cookie
      • 23.2 **服务器如何获取Cookie**
      • 23.3 Cookie 值的修改
      • 23.4 Cookie的生命控制
      • 23.5 Cookie 有效路径 Path 的设置
      • 23.6 Cookie--练习免输入用户名
      • 23.7 Session会话
      • 23.8 创建Session和获取（id号，是否为新）
      • 23.9 Session域中存取数据
      • 23.10 Session的生命周期控制
      • 23.11 浏览器和Session之间关联的技术内幕
    • 24、Filter过滤器
      • 24.1 Filter示例：
      • 24.2 Filter 过滤器的使用步骤：
      • 24.3 Filter 生命周期
      • 24.4 FilterConfig 类
      • 24.5 FilterChain 过滤器链
      • 24.6 Filter 的拦截路径
    • 25、ThreadLocal
    • 26、Filter 和 ThreadLocal 组合管理事
    • 27、JSON
      • 27.1 JSON的定义
      • 27.2 JSON的访问
      • 27.3 JSON 的两个常用方法
      • 27.4 JSON 在 java 中的使用
        • 27.4.1 JavaBean和json的互转
        • 27.4.2 List和json的互转
        • 27.4.3 Map和json的互转
    • 28、AJAX请求
      • 28.1 什么是Ajax请求
      • **28.2 jQuery中的Ajax请求**
      • 27.4 JSON 在 java 中的使用
        • 27.4.1 JavaBean和json的互转
        • 27.4.2 List和json的互转
        • 27.4.3 Map和json的互转
    • 28、AJAX请求
      • 28.1 什么是Ajax请求
      • **28.2 jQuery中的Ajax请求**
      •

1、jQuery

1.1 概述

​ jQuery，顾名思义，也就是JavaScript和查询（query），他就是辅助JavaScript开发的JS类库。

1.2 好处

​ 免费、开源、语法设计可以使开发更便捷，例如操作文档对象（DOM）、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能

3、jQuery选择器

3.1 基本选择器

选择器 描述
#ID 选择器：根据 id 查找标签对象
.class 选择器：根据 class 查找标签对象
element 选择器：根据标签名查找标签对象
* 选择器：表示任意的，所有的元素
selector1，selector2 组合选择器：合并选择器 1，选择器 2 的结果并返回 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style> div, span, p { 
           width: 140px; height: 140px; margin: 5px; background: #aaa; border: #000 1px solid; float: left; font-size: 17px; font-family: Verdana; } div.mini { 
           width: 55px; height: 55px; background-color: #aaa; font-size: 12px; } div.hide { 
           display: none; } </style>
    <script src="../node_modules/jquery/dist/jquery.js"></script>
    <script> $(function (){ 
           //1.选择 body 内的所有 div 元素 $("#btn1").click(function () { 
           $("body div").css("background-color","#bbffaa"); }) //2.在 body 内, 选择div子元素 $("#btn2").click(function () { 
           $("body > div").css("background-color","#bbffaa"); }) //3.选择 id 为 one 的下一个 div 元素 $("#btn3").click(function (){ 
           $("#one + div").css("background-color","#bbffaa"); }) //4.选择 id 为 two 的元素后面的所有 div 兄弟元素 $("#btn4").click(function () { 
           $("#two ~ div").css("background-color","#bbffaa"); }) }) </script>
</head>
<body>
<input type="button" value="选择 body 内的所有 div 元素" id="btn1" />
<input type="button" value="在 body 内, 选择div子元素" id="btn2" />
<input type="button" value="选择 id 为 one 的下一个 div 元素" id="btn3" />
<input type="button" value="选择 id 为 two 的元素后面的所有 div 兄弟元素" id="btn4" />
<br><br>
<div class="one" id="one">
    id 为 one,class 为 one 的div
    <div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test">
    id为two,class为one,title为test的div
    <div class="mini" title="other">class为mini,title为other</div>
    <div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini"></div>
</div>
<div class="one">
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div>
    包含input的type为"hidden"的div<input type="hidden" size="8">
</div>
<span id="span">^^span元素^^</span>
</body>
</html>

3.2 层级选择器

选择器 描述
ancestor descendant 后代选择器 ：在给定的祖先元素下匹配所有的后代元素
parent > child 子元素选择器：在给定的父元素下匹配所有的子元素
prev + next 相邻元素选择器：匹配所有紧接在 prev 元素后的 next 元
prev ~ sibings 之后的兄弟元素选择器：匹配 prev 元素之后的所有 siblings 元素 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style> div, span, p { 
           width: 140px; height: 140px; margin: 5px; background: #aaa; border: #000 1px solid; float: left; font-size: 17px; font-family: Verdana; } div.mini { 
           width: 55px; height: 55px; background-color: #aaa; font-size: 12px; } div.hide { 
           display: none; } </style>
    <script src="../node_modules/jquery/dist/jquery.js"></script>
    <script> $(function (){ 
           //1.选择 body 内的所有 div 元素 $("#btn1").click(function () { 
           $("body div").css("background-color","#bbffaa"); }) //2.在 body 内, 选择div子元素 $("#btn2").click(function () { 
           $("body > div").css("background-color","#bbffaa"); }) //3.选择 id 为 one 的下一个 div 元素 $("#btn3").click(function (){ 
           $("#one + div").css("background-color","#bbffaa"); }) //4.选择 id 为 two 的元素后面的所有 div 兄弟元素 $("#btn4").click(function () { 
           $("#two ~ div").css("background-color","#bbffaa"); }) }) </script>
</head>
<body>
<input type="button" value="选择 body 内的所有 div 元素" id="btn1" />
<input type="button" value="在 body 内, 选择div子元素" id="btn2" />
<input type="button" value="选择 id 为 one 的下一个 div 元素" id="btn3" />
<input type="button" value="选择 id 为 two 的元素后面的所有 div 兄弟元素" id="btn4" />
<br><br>
<div class="one" id="one">
    id 为 one,class 为 one 的div
    <div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test">
    id为two,class为one,title为test的div
    <div class="mini" title="other">class为mini,title为other</div>
    <div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini"></div>
</div>
<div class="one">
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div>
    包含input的type为"hidden"的div<input type="hidden" size="8">
</div>
<span id="span">^^span元素^^</span>
</body>
</html>

3.3 过滤选择器

3.3.1 基本过滤器

选择器 描述
:first 获取第一个元素
:last 获取最后个元素
:not(selector) 去除所有与给定选择器匹配的元素
:even 匹配所有索引值为偶数的元素，从 0 开始计
:odd 匹配所有索引值为奇数的元素，从 0
:eq(index) 匹配一个给定索引值的元素
:gt(index) 匹配所有大于给定索引值的元素
:lt(index) 匹配所有小于给定索引值的元素
:header 匹配如 h1, h2, h3
:animated 匹配所有正在执行动画效果的元素 

<!DOCTYPE html>
<html lang="en">
<head 

        标签： 612gdj211bg传感器
 
锐单商城拥有海量元器件数据手册、
          IC替代型号，打造
          电子元器件IC百科大全！

锐单商城 - 一站式电子元器件采购平台