[toc]
WEB _ review
Web和互联⽹的关系
❖ 互联⽹是基础设施,Web是互联⽹的⼀项服务(应⽤)。
➡ 互联网(Internet):互联网是指20世纪末兴起的计算机网络模式,通过一系
列网络协议实现计算机与计算机之间的网络通信,是一种网络基础设施
(Infrastructure),与之对应有局域网、城域网、广域网等。
➡ World Wide Web:万维网,简称Web、WWW,是一种基于互联网进行访问的
应用模式,其主要要素包括HTTP、HTML、URL、浏览器等。
➡ 万维网并不等同于互联网,万维网是基于互联网这一基础设施提供的服务之
一,互联网上还要其他服务和应用类型,如电子邮件、网络游戏等。
Web应⽤的发展 Cont.
❖ Web1.0
➡ Web1.0主要由平台/公司搭建服务器、创造内容,以静态或动态网页的形式
向互联网上的用户提供信息,用户一般不参与内容的创造,也很少互动,所
以Web1.0也被称为只读网络。
技术栈
• 静态网页:HTML+CSS+JavaScript
• 动态网页:JSP、ASP.NET、PHP等Web应⽤的发展 Cont.
❖ Web2.0
➡ Web2.0随着社交网络平台的诞生而出现,平台/公司除了向用户提供内容
外,更多的是提供平台来共享用户生产的内容,并让用户间可以交互。网络
不再是只读的,而是可读可写的网络。
技术栈
• 前端技术:AJAX、HTML5
• 后端技术:前后端分离、Restful API
• 内容管理:推荐算法等Web应⽤的发展 Cont.
❖ Web3.0
➡ Web3.0是近一两年来提出来的一个定义模糊的概念,大致思想包括去中心
化、无需许可/审核、用户拥有内容、原生支付等。
技术栈
• 区块链及其相关技术
• 电子钱包、智能合约等
Web应⽤程序的⼯作原理
❖ Web应⽤程序基于HTTP等⽹络应⽤层协议,采⽤请求-响应的⼯作
模式,其⼀般流程为:
➡ 客户端把请求发送到服务器端的Web应用程序,Web应用程序接收请求后
进行相关处理,并把客户端请求的资源以文本、图片、网页等形式
(HTML),做为响应返回到客户端。
➡ 由于解析HTML文件一般为浏览器,所以将这种架构称为B/S架构
(Browser/Server)。
HTTP
❖ HTTP:HyperText Transfer Protocol 超⽂本传输协议
➡ HTTP是计算机网络协议簇中的应用层协议,第一版为0.9,常用版本1.0,最新
版本1.1(https、html5等)。
➡ 其内容主要包括:
✓ 服务器、浏览器功能
✓ URL
✓ HTTP请求
✓ HTTP响应
参考:**http://www.w3.org/Protocols/HTTP/1.1/rfc2616.pdf**URL
❖ URL:Uniform Resource Locator,统⼀资源定位符
➡ HTTP协议规定互联网用户通过输入URL地址或点击URL链接,实现对服务
器上资源的请求。
➡ URL的格式为:如 http://cse.csu.edu.cn/info/1039/2016.html
protocol://host[:port][/context][/resource][?query=string]
协议⼀般为http或https,也可以为ftp等,指定和服务器通信的⽅式;
主机可以是IP地址(202.197.64.6)或能经DNS解析的主机名(www.csu.edu.cn);
资源路径和⽂件名,即为请求资源的服务器上的映射路径;
URL最后还允许携带请求参数,以?开始,多个参数通过&符合连接
Web容器
❖ 什么是Web容器?
➡ 由来:由于Web服务器的主要功能处理HTTP协议,响应针对静态内容(包括静
态网页和图片等)的请求,所以在动态页面的应用中需要一个处理服务端逻辑的
应用程序。
➡ 容器:容器是中间件的一种,给处于其中的应用程序提供一个统一的环境,降
低应用程序的复杂性。
➡ 给Web应用的服务端程序提供运行环境的容器就称为Web容器。常见的Web容
器有Tomcat(Servlet容器)、JBoss(EJB容器)和IIS(ASP容器)等。
➡ Web容器的主要功能包括通信支持、生命周期管理和多线程支持等。
Tomcat
❖ Tomcat是Java Web应⽤开发中常⽤的开源Web容器:
➡ Tomcat的准确定位应为:Java Web容器+Web服务器。
➡ 作为Web服务器,Tomcat能完成Apache的部分功能,如实现HTTP协议、
处理请求/响应等,默认在8080端口监听。
➡ 作为Java Web容器,Tomcat负责编译、运行、部署Servlet/JSP,也叫
Servlet容器。
bin目录:可执⾏程序,包括启动和关闭的脚本startup.sh和shutdown.sh
conf目录:配置⽂件,包括核⼼配置⽂件server.xml和context.xml
lib目录:库⽂件,包括编写Servlets必须servlet-api.jar和jsp-api.jar
webapps目录:Web应用程序,每个Web应用程序都有⼀个目录,名称映射根路径
Servlet基础
❖ 什么是Servlet?
➡ Servlet是Server Applet的简写,全称也叫Java Servlet,即用Java语言实
现的服务端程序,是Java EE系列规范之一(最新版5.0,常用版3.0,
Servlet版本需和Tomcat版本搭配使用)。
➡ Java Servlet技术提供一系列的API,程序员在此基础上实现自己的Servlet
来完成功能——生成动态Web内容。
➡ 狭义的Servlet是指Servlet API中的Servlet接口,广义的Servlet是指任何实
现了该接口的类,一般将Servlet理解为后者
javax.servlet.Servlet接口
• 其中init、service和destroy三个方法是生命周期方法;
• 另外两个为非生命周期方法,getServletInfo返回Servlet的描述信息,
getServletConfig返回Servlet的配置信息。
❖ Servlet API包含以下4个常⽤的包:
➡ javax.servlet: 定义Servlet和Servlet容器之间契约的类和接口
➡ javax.servlet.http: 定义基于HTTP协议的Servlet的类和接口
➡ javax.servlet.annotation: Servlet、Filter等接口的注解定义
➡ javax.servlet.descriptor: 一些配置信息的类型定义
HttpServletRequest
❖ HttpServletRequest接⼜的常⽤⽅法
⽅法
含义
int getContentLength()
返回请求主体的字节数
String getContentType()
返回请求主体的MIME类型
String getParameter(String name)
返回请求指定参数的值
String getContextPath()
返回请求上下⽂中的URI
Cookie [] getCookies()
返回⼀个Cookie数组
HttpSession getSession()
返回与请求相关的Session对象
HttpServletResponse
❖ HttpServletResponse接⼜的常⽤⽅法
⽅法
含义
PrintWrite getWrite()
获取响应输出流
void setContentType(String type)
设置响应的MIME类型
void sendRedirect(String url)
重定向到新的URL
void addHeader(String name, String value)
设置相应头的信息
❖ Web组件间⼀般有下列三种关联关系:
➡ 请求转发:forward
➡ 请求重定向:redirect
➡ 页面包含:include
❖ 请求转发是指将客户端的请求转发给同⼀个应⽤程序中的其他Web组件。
➡ 请求转发表明该次请求并没有完成,只是转交给其他组件去完成,客户端并不清楚转发的过程,客户端地
址栏不发生改变。
➡ 在Servlet API中通过RequestDispatcher接口的forward()来实现HTTP请求的转发,同时将请求和响应对象
传递给目标组件。
➡ 具体的操作方式有:request.getRequestDispatcher(“目标”).forward()等。
❖ 请求重定向是指将客户端的请求重定向到其他任意的URL上。
➡ 请求重定向后即表明该次请求响应流程已完成,返回一个响应给客户端(地址栏发生改变),客户端根据响
应发起一次新的请求,不能使用之前的request对象。
➡ 在Servlet API中通过ServletResponse的sendRedirect()来实现重定向。
➡ 具体的操作方式有:response.sendRedirect(“目标”)。
会话跟踪
❖ 什么是会话跟踪?
➡ HTTP协议本质上是一个无状态协议,基于请求-响应的通信模式,所以服务端和客户端之
间无法保持连接,保持会话状态。
➡ 会话跟踪就是一系列维持Web应用中客户端和服务端会话状态的编程技术。
❖ Web应⽤开发中常⽤的会话跟踪⽅法有:
➡ URL重写
➡ 隐藏域
➡ 客户端保存信息:Cookies
➡ 服务端保存信息:HttpSession会话跟踪 Cont.
❖ URL重写实现会话跟踪
➡ URL重写的实现方式是将一个或多个token作为参数,添加到URL字符串中,每个token以
key=value的方式表现。
➡ URL重写适用于无需在太多页面之间保持会话的场景。
❖ URL重写的会话跟踪有如下限制:
➡ URL字符串的总长度取决于浏览器限制
➡ URL重写需在服务端完成,token过于复杂难以操作
➡ 某些字符(空格,问号等)必须用base64编码
➡ 所有信息在地址栏均可见,安全性低会话跟踪 Cont.
❖ 使⽤隐藏域实现会话跟踪
➡ 使用隐藏域的实现方式和重写URL方法类似,区别是将附加在URL中的
token信息放置到form表单的隐藏域中。
❖ 相对于URL重写⽅式:
➡ 没有字符数限制
➡ 无须进行特殊编码
[HTML_REMOVED]
[HTML_REMOVED]
[HTML_REMOVED]
......
[HTML_REMOVED]
[HTML_REMOVED]会话跟踪 Cont.
❖ 使⽤Cookies实现会话跟踪
➡ Cookie是一个对象,其内容主要包含以key-value形式保存的token信息
➡ Cookie作为HTTP请求头的一部分,其传输由HTTP协议控制。
➡ Cookie可以由服务端构建,也可以由浏览器端的JavaScript语言构建,最终都保存在
浏览器中。
➡ Cookie对象除了包含token信息外,还有maxAge、path等属性。
➡ 用Cookies方式来进行会话跟踪的主要缺点是用户可在浏览器进行限制。
Cookie cookie = new Cookie(name , value);
Cookie language = new Cookie(“language” , “zh-CN”);
language.setMaxAge(7);会话跟踪 Cont.
❖ 使⽤HttpSession实现会话跟踪
➡ HttpSession是所有的会话跟踪技术中最安全和最常用的技术。
➡ 其基本原理是:用户第一次请求服务器时,由服务器创建HttpSession对
象,并生成唯一的用户ID(JSESSIONID),其他会话token信息以key-value
的方式保存在HttpSession对象中,将用户ID以Cookie或URL的方式告知客
户端浏览器,整个过程由Web容器进行管理和控制。
➡ 服务端程序通过HttpServletRequest对象的getSession()方法获取
HttpSession对象,HttpSession提供一系列方法实现上述功能。
Web应⽤中数据的作⽤域
❖ Web应⽤中,多个Web组件通过彼此关联来实现协作,共同完成客户端的请
求,这个过程中就会涉及到数据的作⽤域问题。
❖ 按作⽤域的由⼩到⼤,作⽤域分为:
➡ 页面范围(page):一个Servlet类或一个JSP页面;
➡ 请求范围(request):一个请求过程的范围,请求被响应之间;
➡ 会话范围(session):会话范围,整个会话持续过程;
➡ 应用范围(application):服务器运行过程中(ServletContext)。
❖ Web应⽤是通过将值或对象放⼊对应的作⽤域对象中,来实现数据作⽤域控制
的,作⽤域对象均提供setAttribute()和getAttribute()⽅法。
JSP的基本概念 Cont.
JSP与 Servlet的关系
❖ JSP是⼀种建⽴在Servlet规范提供的功能之上的动态⽹页技术。
❖ JSP⽂件在⽤户第⼀次请求时,会被转译成Servlet,然后由这个
Servlet处理⽤户的请求,JSP可以看成是运⾏时的Servlet。
❖ 本质上说,JSP就是⼀种为了⽅便程序员编写的Servlet表现形式
❖ JSP语法构成
❖ JSP指令元素
➡ JSP指令元素主要用来提供整个JSP页面相关的信息及属性,如编码方式、导入
类等,必须位于JSP页面的顶部。
➡ 基本语法为 <%@ directive attribute=“value” %>
➡ JSP指令元素分为三种类型:
✓ page:设定整个页面的相关信息
✓ include:用于⽂件的动态包含
✓ taglib:用于使用第三⽅标签库
➡ 使用范例:<%@ page language*=*”java” import*=*”java.util.*“ pageEncoding*=*“UTF-8” %>
❖ JSP隐式对象
➡ 隐式对象是指在JSP脚本元素中,不需要任何的声明和定义就可以直接使
用的对象。
开发模式的必要性
❖ 当应⽤的业务和逻辑变复杂时……
Web开发模式之Model I
❖ Model I是指基于JSP+JavaBean的开发模式,JSP负责Web相关的
部分,包括数据的展⽰,请求逻辑的控制等;JavaBean负责业务
逻辑的部分,包括数据的存取,业务的实现
Model I分析
❖ Model I只适⽤于中⼩型Web应⽤的开发,由于:
➡ 虽然使用JavaBean从Web应用中解耦了业务逻辑,但是用户的请求访问逻辑、数据内容与表示仍然没有分离。
➡ JSP的固有特征使其更适合作为数据展示和表达的技术规范
架构模式
❖ 如何设计⼀个程序的结构,是软件⼯程中⾮常重要的研究领域之⼀ ,
被称为架构模式(Architectural Pattern),属于程序设计的⽅法论。
❖ MVC模式是⼀种应⽤⾮常⼴泛的软件架构模式,并且也适⽤于其他领
域⼯作的设计和组织。
❖ MVC模式认为程序不论简单或复杂,从结构上看都可以分为三层:
➡ 视图层View:用户界面
➡ 数据层Model:程序中的数据或信息
➡ 控制层Controller:负责视图层和数据层的交互
MVC模式的最佳实践
➡ MVC模式中的三层是紧密联系在一起的,但更重要的是相互独立性,每一
层内部的变化不影响其他层。
➡ 层与层之间通过接口(Interface)进行交互,应尽量做到面向接口编程。
➡ MVC模式的最终目标是:
Web开发模式之Model II Cont.
❖ Java Web中的MVC具体表现为:
模型由JavaBeans组成,视图由
JSP页⾯组成,控制器由Servlets实现
JDBC
❖ JDBC是Java数据库连接(*J*ava D*ata*b*ase* Connectivity)的简称。
➡ JDBC是Java平台(JavaSE)中用来规范客户端程序如何来访问数据库的应用程序接
口(API),提供了诸如查询和更新数据库中数据的方法。
➡ 软件开发人员使用这些标准API连接和操作数据库,实现数据库应用程序的开发。
➡ JDBC API采用接口和实现分离的设计思想,其中接口主要包含在java.sql包中,之
后的扩展内容在javax.sql包中。
➡ 这些接口的实现类被称为数据库驱动程序,由数据库厂商或其他厂商、个人提
供。
EL表达式语⾔
❖ EL(Expression Language)表达式语⾔是JSP的重要特性之⼀ 。
❖ EL是⼀种简单⽽强⼤的语⾔,提供了在JSP脚本元素范围外使⽤运⾏时表达式的功
能,主要包括:
➡ 基于命名空间与嵌套的属性访问;
➡ 对集合与操作符的访问;
➡ 一组隐式对象和映射到Java类中方法的可扩展函数。
❖ 基本语法为:${Expression}
❖ EL表达式可以⽤于JSP页⾯中的HTML部分的任意位置完成取值和显⽰。
❖ 常⽤场景:表达式求值、访问作⽤域变量和JavaBean、访问数组与集合
EL表达式语⾔的语法
❖ EL提供如下运算符操作:
➡ []和.运算符:用于对象属性或数组、集合
➡ Java支持的算术运算符、逻辑运算符和关系运算符;
➡ empty运算符。
❖ EL关键字: and eq gt true instanceof or ne le
false empty not lt ge null div mod
JSTL标准标签库
❖ 标准标签库:JSTL,JSP Standard Tag Library
➡ 为了进一步提高代码的可重用性,JSP规范中允许用户自定义标签
➡ 一个自定义标签由标签描述文件(.tld)和标签处理程序(.java)两个部分组成
➡ SUN公司在JavaEE规范中提供一套较为通用的标签库:标准标签库(JSTL)
❖ 在JSP页⾯使⽤JSTL需要使⽤taglib指令,基本语法为:
<%@ taglib uri="http://java.sun.com/jsp/jstl/core” prefix=”c” %>
❖ 其中uri⽤于指定tld⽂件路径,prefix⽤于给标签指定前缀。
❖ 使⽤JSTL结合EL能⼤量的简化JSP页⾯的代码,并使JSP完全符合MVC中的
View规范
过滤器
❖ Servlet API还提供⼀系列的⽤于拦截Request请求和Response响
应的API接⼜,在Java Web应⽤的开发中通过调⽤这些API在⽤
户访问资源前或服务器完成响应后进⾏某些特定的处理。
过滤器在Web项⽬使⽤相当⼴泛,常⽤的场景有:
➡ 对用户请求进行统一认证
➡ 对用户访问进行审核和统计
➡ 对用户发送的数据进行过滤或替换
➡ 转换字符编码、图像格式等
➡ 对响应内容进行压缩,减少网络传输量
➡ 对请求或响应数据进行加/解密处理
❖ 实现过滤器的⽅法总体上和Servlet类似。
➡ 第一步:实现相关监听器接口,并完成具体的监听方法;
➡ 第二步:在容器内通过配置文件或注解配置监听器;
监听器
❖ Servlet API提供⼀系列的事件和事件监听接⼜,在Java Web应⽤
的开发中通过调⽤这些API可以进⾏事件驱动的开发
❖ 编写监听器的⽅法和编写Servlet类似:
➡ 第一步:实现相关监听器接口,并完成具体的监听方法;
➡ 第二步:在容器内通过配置文件或使用注解配置监听器
总结——Java Web技术栈
什么是JavaScript?
JavaScript
JavaScript语言最初由Netscape公司的Brendan Eich设计,是一种动态、
弱类型、基于原型的语言,内置支持类。
JavaScript是目前广泛用于客户端开发的一种脚本语言,在“大前端”的背
景下,也可用于服务端开发。
早期JavaScript语言的版本较为繁杂和混乱,各浏览器厂商支持的兼容性
差异也比较大,目前基本确定ES5为标准版本,ES6为未来主流版本。
此外,客户端JavaScript和服务端JavaScript也有一定的区别,本课程主
要讲解ES5版本的客户端JavaScript。
学习JavaScript语言主要包括三个方面:
JavaScript语法
内置对象
BOM和DOM模型
JavaScript语法——变量
弱类型变量和更简洁灵活的基本类型
JavaScript是弱类型的语言,基本类型变量通过var声明。 var 变量名 ;
变量名命名规范和Java的区别是多一个$字符。
动态赋值与变量提升
JavaScript 是一种动态类型语言,也就是说,变量的类型没有限制,变量可以随
时更改类型。
JavaScript 引擎的工作方式是:先解析代码,获取所有被声明的变量,然后再一
行一行地运行。导致所有的变量的声明语句,都会被提升到代码的头部,这就叫
做变量提升(hoisting)。
JavaScript语法——数据类型
JavaScript共有六种数据类型(ES5):
数值(number):整数和小数(比如1和3.14)
字符串(string):文本(比如Hello World)
布尔值(boolean):表示真伪的两个特殊值,即true(真)和false(假)
undefined:表示“未定义”或不存在,即由于目前没有定义,所以此处暂时没有任何值
null:表示空值,即此处的值为空
对象(object):各种值组成的集合
说明:
数值、字符串、布尔值,被称为原始类型或基本类型,对象被称为合成类型
对象又可以分为狭义的对象(object)、数组(array)、函数(function)
除非特别声明,一般讲的对象就是指狭义的对象object
关于NaN
NaN是 JavaScript 的特殊值,表示“非数字”(Not a Number),主要出现
在数值运算发生错误或将字符串解析成数字出错的场合。
NaN不是独立的数据类型,而是一个特殊数值,其数据类型依然属于数
值。
NaN不等于任何值,包括自身,与任何数值进行运算的结果都是NaN。
NaN在布尔运算时被当作false。
字符串
JavaScript中单引号’’和双引号“”都可以表示字符串,效果等同。
由于 HTML 语言的属性值使用双引号,一般项目约定 JavaScript 的字符串
只使用单引号。
字符串可以被认为是常量字符数组,支持[]运算符,但依然有不可变
性
对象
JavaScript语法——函数
JavaScript函数和Java的函数或⽅法有很⼤的区别
声明函数通过function关键字
函数没有返回值类型的声明
如果有形参,形参没有类型的声明
JavaScript语法——数组
数组
JavaScript语言中的数组表面上和Java中的数据类似,有两种创建的方式
(字面和new关键字),推荐使用字面方式创建数组。
同时数组也是对象,也支持对象的相关操作,比如length()和item(index)
等方法。
但本质上,要理解JavaScript数组,需要结合堆数组、栈数组和数组空间
动态分配(malloc)的概念。
JavaScript语法——运算符与操作符
严格等于和严格不等于
JavaScript语言的大部分运算符和操作符与Java语言类似
由于弱类型的特点,多两个运算符“ ===”和“!==
JavaScript内置对象
JavaScript语⾔中有三种内置对象:分别是浏览器对象模型BOM、⽂档对
象模型DOM和JavaScript语⾔全局对象
全局对象String
全局对象Number和Math
全局对象Date和Time
BOM
BOM:Browser Object Model,浏览器对象模型
DOM
DOM:Document Object Model,⽂档对象模型。
⽂档对象模型DOM规定了浏览器应该如何创建HTML元素,以及
JavaScript如何操作HTML元素。
当浏览器加载Web页面时,在内存中创建页面模型——DOM树对象模型
JavaScript操作HTML页面内容时,是通过一系列API实现的——DOM API
事件处理
JavaScript事件处理分为三个步骤:选定元素、事件绑定、事件
处理。
事件绑定有三种⽅法:HTML绑定、传统DOM绑定和DOM监
听器。
Web 2.0
技术栈
• 前端技术:AJAX、HTML5
• 后端技术:前后端分离、Restful API
• 内容管理:推荐算法等
什么是AJAX?
AJAX:A*synchronous* J*avaScript* A*nd* XML
Asynchronous:异步,客户端和服务端的通信方式
JavaScript:一种客户端脚本语言(HTML、CSS、DOM)
XML:数据的表示方式(JSON)
AJAX核⼼概念
同步通信方式:即典型的请求响应模型。在传统的Web应用模型下,大部
分的用户操作都会发送一个HTTP请求给服务器,然后服务器开始处理(接
收数据,执行业务逻辑,访问数据库等),最后向浏览器返回HTML页面。
异步通信方式:异步发送请求,消除了传统的“发送请求-等待-发送请
求-等待”的特性,极大的提高了用户体验,实现这种通信方式的核心技术
是浏览器的XMLHttpRequest对象
XMLHttpRequest
XMLHttpRequest对象是实现AJAX技术的核⼼技术,是⼀种
⽀持异步通信的机制。
XMLHttpRequest对象最早是在Microsoft的IE5中以
Active X组件形式实现的。
XMLHttpRequest对象不是W3C中的内容(现已接受),在不同
浏览器上的表现有所不同,不过常⽤的⽅法和属性都得到了⼴
泛的⽀持。
AJAX应⽤场景
经典的AJAX技术应⽤场景
表单验证
动态加载列表框
创建自动刷新页面
显示进度条
创建工具提示
自动补全功能
访问Web服务
AJAX中数据的表⽰
在Ajax应⽤中服务器和客户端之间传输数据有三种表⽰⽅式:
简单字符串、XML、JSON。
简单字符串方式一般用于传递“Yes/No”此类数据本身无结构的数据。
JSON方式常用于中小型数据的表示,也是目前应用最广泛的数据表示方式。
JavaScript中使⽤JSON(JavaScript Object Notation)
首先需要区分两个概念:JSON字符串和JSON对象。
JSON字符串:其本质是一个有格式要求的普通字符串。
JSON对象:JavaScript语言中的一个内置对象。
JavaScript中通过名为“JSON”的对象提供二者的相互转换
跨域问题
跨域问题的来源
跨域问题的由来,是浏览器的同源策略。
同源策略:浏览器的安全策略之一,指一个网页的内容只能来自于同一个
服务器来源。
同源:规范认为两个URL如果协议、主机名、端口均一致则同源,三者当
中有一个不相同则认为不同源。
⾮同源限制:
无法读取非同源网页的Cookie、LocalStorage和indexedDB
无法访问非同源网页的DOM
无法向非同源的URL进行AJAX请求
为什么需要jQuery?
使用AJAX技术的Web应用需要在HTML页面中编写大量的JavaScript代码。并
且此类代码的复杂性主要体现在对DOM的操作。
什么是jQuery?
jQuery is a fast, small, and feature-rich JavaScript library.
It makes things like HTML document traversal and manipulation,
event handling, animation, and Ajax much simpler with an easy-to
use API that works across a multitude of browsers.
With a combination of versatility and extensibility, jQuery has
changed the way that millions of people write JavaScript.
John Resig, 2006, BarCamp, NewYork.
jQuery 是一个快速、小巧且功能丰富的 JavaScript 库。 它通过提供简单易用的 API,使得诸如 HTML 文档遍历和操作、 事件处理、动画以及 Ajax 等任务变得更为简化, 这一 API 能够在多种浏览器上良好运行。 凭借其高度的灵活性和可扩展性,jQuery 改变了数百万人编写 JavaScript 的方式。 ——约翰·瑞西格,2006年,BarCamp,纽约。
使⽤jQuery
•在开发中使用jQuery框架很简单,只需将相应版本的对应的.js文件(*jquery-3.4.1.js*)引
入到项目中即可(线上部署项目还可以使用CDN方式引用jQuery)。
• 目前jQuery有三个版本3.x*、*2.x和1.x。其中1.x支持所有浏览器,而2.x不支持IE6*、*7、
8*,*3.x主要添加了对CSS3和HTML5的支撑
jQuery语法
jQuery语法是为HTML元素的访问和操作⽽设计的。
基本语法: $(selector).action()
$:用于在JavaScript语言中标识jQuery。
selector:选择器,用于查找或查询HTML元素。
action():指对选择的元素执行的特定操作。
⽂档就绪函数
为了防止HTML文档在完全加载之前运行jQuery代码,一般会将所有的
jQuery调用放到文档就绪函数中
.html(): 获取元素的所有内容,包括元素
.text(): 获取元素中所包含的⽂本内容