web基础第三四五六天合：JavaScript+jQuery+Tomcat+HTTP协议

本文链接：https://blog.csdn.net/chenxi26/article/details/110681796

JavaScript

1.介绍

简称JS，网景公司提供的一门语言，是一门嵌入在游览器中执行的脚本语言，js可以运行在服务器端（Node.js）

**主要作用：**用于实现网页中的动画效果和实现表单验证

2.特点

JS是一门直译式的语言（不需要编译，执行的就是源代码）

JS是一门基于对象的语言（JS可以通过某些机制模拟面向对象）

JS是一门弱类型的语言（Java是强类型）

3.优势

JS具有良好的交互性（嵌入在游览器，能提高用户体验）

JS具有一定的安全性（运行在游览器内部，比如不能访问硬盘）

JS具有跨平台性

4.引入JS

1）方式一

在head或者body内部可以添加一个script标签，在script标签内部可以直接书写JS代码

<script type="text/javascript">
			
		</script>

2）方式二

在head或者body内部可以添加一个script标签，在script标签通过src属性，可以引入外部的JS文件

<script src="demo.js"></script>

**注意：**script标签内部不要写JS代码，写了也不会执行

3）方式三

将JS代码写在标签上

<input type="button" value="别点我" onclick="alert('不让你点,你非要点~~~')"/>

5.语法

1）注释

//单行注释

/*多行注释 */

2）数据类型

基本数据类型

数值类型（number）

在JS的底层，所有的数值都是浮点数，但在处理和显示的过程中，如果可以显示为整形，会自动在整形和浮点型之间进行转换

Infinity（正无穷大）

-Infinity（负无穷大）

NaN（Not a Number）非数值

字符串类型（String）

JS中的字符串类型是基本数据类型，字符串可以使用双引号或者单引号引起来

布尔类型（boolean）

布尔类型值：true 和 false

undefined类型

undefined类型的值只有一个，就是undefined。表示声明了变量，但是没有为变量赋值，该变量的值就是undefined。undefined不能调用属性或者方法，否则会抛出异常！

null类型

null类型的值也只有一个，就是null。表示空值，可以作为函数的返回值，表示函数返回的是一个空的对象。null不能调用属性或者方法，否则会抛出异常！

复杂数据类型

对象，数组，函数

3）JS变量声明

JS中通过var关键字声明变量，通过var声明的变量不区分类型，可以指向任意的数据

var s1 = "Hello World";
s1 = 123;
s1 = false;
s1 = [];
s1 = function(){}

4）JS的运算符

同java

5）JS的语句

if分支

if(){…}

if(){…}else{…}

if(){…}else if(){…}else{…}

switch分支

switch(x){

case 1:

代码块；

break；

default：

代码块；

}

循环结构

for(){}

while(){}

do…while(){}

6）JS数组

JS数组声明方式：

			//声明一个空数组，长度为0
			var arr1 = [];
			var arr2 = new Array();
			//声明一个具有初始值的数组
			var arr3 = [100, "abc", false, new Date()];
			var arr4 = new Array(100, "abc", false, new Date());
			//指定长度的数组---只有一个参数并且是数值，这个数值是长度
			var arr5 = new Array(10);

7）JS函数

JS的函数相当于Java中的方法，就是一个具有功能的代码块，通过函数名可以反复执行

			//声明方式1：
			function f1(name, age) {
				alert(name + "---" + age);
			}
			f1("张飞", 33);

			//声明方式2：
			var f2 = function(name, age) {
				alert(name + "---" + age);
			}
			f2("赵云", 36);
			
			//匿名函数
			(function(name, age) {
				alert(name + "---" + age);
			})("关羽", 40);

6.JS的DOM操作

DOM：Document Object Model，文档对象模型

其实就是JS专门为操作html元素所提供的一套API

1）获取html元素

getElementById(id)：//通过id属性值获取元素,返回值是一个JS对象
getElementsByTagName(tagName)：//通过元素名称，获取该名称对应的所有元素组成的数组，可遍历获取元素
getElementsByClassName(class值)：//通过元素的class属性值，获取该class值对应的所有元素组成的数组，可遍历获取元素
ele.parentNode: //获取当前元素的上级元素（父元素）
ele.innerHTML://获取元素的所有内容，或者设置元素的内容，原内容会覆盖
ele.value://获取或设置表单项元素的value值

2）增删改查元素

document.createElement(tagName)：//创建一个指定名称的元素，返回值就是这个创建的元素所对应的JS对象
parentEle.appendChild(childEle)//父元素调用方法添加一个子元素到父元素内部
parentEle.removeChild(childEle)//父元素调用方法删除内部的子元素

jQuery

1.介绍

jQuery：是一门轻量的、免费开源的JS函数库。

jQuery可以极大的简化JS代码。

jQuery核心思想：写的更少，做的更多。

轻量的：一个框架或者技术对我们项目的侵入程度是非常低的

2.优势

可以极大地简化JS代码

可以像CSS选择器一样获取元素

可以通过修改CSS样式来控制页面的效果

可以兼容常用游览器

3.引入jQuery

在head或body标签内部添加script标签，通过script标签引入jQuery的函数库文件

<script src="js/jquery-1.8.3.min.js"></script>

4.文档就绪时间函数

/* 文档就绪事件函数：在游览器加载完所有的元素后，会立即执行function函数
	window：表示当前游览器窗口的对象
 */
//JS提供的文档就绪函数
window.onload = function() {
	//这里的代码执行时，所有的元素都已经加载完成，所以获取任何元素都能获取到
	console.log($("#demo").length);
	alert(1);
}

//JQuery提供的文档就绪函数
$(function() {
	//这里的代码执行时，所有的元素都已经加载完成，所以获取任何元素都能获取到
	console.log($("#demo").length);
	alert(2);
});
/*
什么时候该用文档就绪时间函数？
如果要获取元素，获取元素的代码执行时，元素还没有被游览器加载，肯定是获取不到的！
此时，可以将获取元素的代码放在文档就绪事件函数中，因为这个函数是在游览器加载完所有的html元素后立即执行，此时所有元素都已经被加载了，在这个函数中获取任何元素都可以获取到
*/

5.选择器

/*为元素绑定点击事件的几种方式*/
//方式一：在元素上通过onclick属性为元素绑定点击事件
<input type="button" onclick="esteFn()" id="b1" value="b1按钮">
//方式二：（JS）通过代码获取元素，返回的是表示该对象的JS对象，再通过[对象.onclick]属性为元素绑定点击事件。只要点击这个元素，就会触发点击事件，执行后面的function函数
var oB1 = document.getElementById("b1");
oB1.onclick = function(){
    alert("JS：b1按钮被点击了")；
}
//方式三：（jQuery）通过选择器获取元素，返回的是表示该元素的jQuery对象，再通过[对象.click]函数为元素绑定点击事件
$("#b1").click(function(){
    alert("jQuery：b1按钮被点击了");
});

1）基本选择器

//元素名选择器
$("div")//匹配所有的div元素
//class选择器
$(".mini")//匹配素有class值为mini的元素
//ID选择器
$("#one")//匹配所有id值为one的元素
//多元素选择器
$("div,.mini,#one")//匹配所有的div，所有class值为mini，以及id值为one的元素

2）层级选择器

//后代选择器
$("div span")//匹配所有div内部的span元素
/* 相邻兄弟选择器
	相邻兄弟：如果两个元素是紧挨着，并且具有相同的父元素，这两个元素就是相邻兄弟
 */
$("#two+span")//匹配id值为two的元素前面紧邻的span兄弟元素
$("#two").next("span")//匹配id值为two的元素后面紧邻的span兄弟元素
$("#two").prev("span")//匹配id值为two的元素前面紧邻的span兄弟元素
$("#two").nextAll();//匹配id值为two的元素后面所有的兄弟元素
$("#two").nextAll("div")//匹配id值为two的元素后面所有的div兄弟元素
$("two").prevAll("div")//匹配id值为two的元素前面所有的div兄弟元素
$("#two").siblings("div")//匹配id值为two的元素前、后所有的div兄弟元素

3）基本过滤选择器

//根据下标匹配元素
$("div").eq(n)//匹配所有div中的第n+1个div元素
$("div:eq(n)")//匹配所有div中的第n+1个div元素

$("div").eq(0)//匹配所有div中的第1个div元素
$("div:first")//匹配所有div中的第1个div元素

$("div").eq($(#div).length-1)//匹配所有div中的最后一个div元素
$("div:last")//匹配所有div中的最后一个div元素
$("div").eq(-1)//匹配所有div中的最后一个div元素

4）表单选择器

//表单选择器
$(":input")//匹配所有的表单项元素(包括input、selsect、textarea、button)
$(":text")//匹配所有普通文本输入框
$(":password")//匹配所有密码输入框
$(":radio")//匹配所有单选项
$(":checkbox")//匹配所有复选框
$(":radio:checked")//匹配所有被选中的单选框
$(":checkbox:checked")//匹配所有被选中的复选框

6.html元素操作

//创建html元素
var oDiv = $("<div></div>")//创建一个div元素，返回一个jQuery对象
//添加子元素append()
$("body").append(oDiv)//往body中添加一个div元素
//删除元素remove()
$("div")//删除所有匹配的div元素
//替换元素replaceWith()
$("div").replaceWith("<p>我是来替换div的p元素</p>")

7.html内容及值的操作

html（）函数：获取元素的所有内容（包裹在开始标签和结束标签中的所有内容）

如果通过选择器匹配了多个元素，只能获取第一个元素的内容

html（）函数还可以设置元素的内容，如果选择器匹配了多个元素，则会给所有元素设置内容

text（）函数：获取元素中的所有文本内容（值获取文本，不获取标签）

如果通过选择器匹配了多个元素，可以将所有元素内部的文本都返回

text（）函数还可以为元素设置文本内容（只能设置文本）

val（）函数：获取表单项的value值或者是为表单项元素设置value值

表单项元素：input/select/option/textarea

8.html元素属性或者css属性操作

<div name="aaa" style="border:2px solid red" ></div>

prop()函数：获取元素的某一个属性值，或者为元素设置属性值

attr()函数：可以获取元素的属性值，或者为元素设置属性值

prop()和attr()的区别：

prop()函数是在jquery1.6之后出现的，用于获取设置元素的属性（固有属性）值。

attr()函数是在jquery1.6版本之前就有的函数，用于获取或设置元素的属性（自定义属性）值。

css()函数：可以获取或设置元素的css样式

9.动画函数

show()：设置元素为显示状态。等价于css（“display”,“block|inline”）;

hide()：设置元素为隐藏状态。等价于css（“display”,“none”）;

toggle()：切换元素的显示状态，如果元素本身是显示的，则会隐藏状态，如果元素本身是隐藏的，则会变成显示状态。

slideToggle()：切换元素的显示状态，如果元素本身是显示的，则会变成隐藏状态，如果元素本身是隐藏的，则会变成显示状态。

10.parent()/parents()/find()

parent( )：获取当前元素的父元素，类似于js中的parentNode属性

parents( )：获取当前元素的所有的祖先元素

find( )：获取当前元素内部指定的后代元素

Tomcat

1.服务器

服务器：分为硬件服务器和软件服务器

硬件服务器：运行在互联网上的、具有静态IP的一台计算机

软件服务器：运行在互联网上的计算机程序（软件），将服务器软件安装在硬件服务器上才可以对外服务。

Web服务器：运行在互联网上的计算机程序，专门用于接收客户端的请求，根据请求进行处理，最后给出回应。

tomcat：就是一个Web服务器，特点是：小巧灵活，简单易用，学习成本低

2.tomcat的启动、配置

在启动tomcat之前，需要配置一个JAVA_HOME环境变量，该变量需要指向JDK的安装根目录

启动：http://localhost:8080 http://127.0.0.1:8080

3.tomcat服务器的目录结构

bin：存放批处理文件的目录（startup.bat shutdown.bat）

conf：存放tomcat配置文件的目录（server.xml是tomcat核心配置文件—可以在此修改端口80，访问时可以http://localhost进行访问）

lib：存放tomcat服务器在运行时所需要的jar包的目录

logs：存放tomcat服务器在运行时产生的日志文件的目录

temp：存放tomcat服务器在运行时产生的临时日志文件的目录

work：存放tomcat服务器在运行期间产生的一些工作文件

webapps：是Web应用的存放目录，放在这个目录中的Web应用程序，可以通过localhost虚拟主机进行访问，webapps目录是localhost主机默认存放Web应用的目录，把Web应用放在webapps目录下，就相当于发布到了localhost主机中

4.Web应用和虚拟主机

1）Web应用

Web其实就是一个目录，其中可以包含很多资源文件（html/css/js/图片/jsp/servlet…等）

虚拟主机不能直接管理Web资源文件（html/css/js/图片/jsp/servlet…等）

需要将Web资源文件组织乘一个Web应用（目录），将Web应用发布到虚拟主机中运行才可以被虚拟主机所管理

2）虚拟主机

就是在tomcat服务器中配置的一个站点，在访问时就好像在访问一台真实独立的主机一样，我们将这个站点称之为是，运行在tomcat服务器中的一台虚拟主机。

tomcat服务器中可以配置多个站点，每一个站点都是一台虚拟主机

1.在服务器硬件上安装了一个tomcat服务器软件

2.在tomcat服务器软件内部可以配置多个站点（虚拟主机），其中tomcat默认自带了一个localhost虚拟主机

3.localhost虚拟主机默认管理Web应用的目录—webapps，发布到webapps目录下的web应用，也就都发布到了localhost主机中

4.往webapps中发布了一个web应用，其中包含一些Web资源文件

5.Web资源文件可以是（html/css/js/图片/jsp/servlet…等）

HTTP协议

1.介绍

HTTP：超文本传输协议，用于规定游览器客户端和服务器之间的通信方式

HTTP工作时所遵循的原则：

1.一次请求必须对应一次响应

2.请求只能是游览器发送给服务器，服务器只能被动的等待请求，根据请求做出回应

2.HTTP协议详解

HttpWatch游览器插件：用于监听游览器和服务器通信的内容

1）Http请求信息

第一部分：请求行

GET /news/hello.html HTTP/1.1

GET：提交方式，HTTP协议中一共规定了7种提交方式，5种不常用，只用GET和POST

/news/hello.html：请求资源路径，显示了访问哪一个应用下的哪一个资源文件

HTTP/1.1：请求所遵循的协议和版本

第二部分：请求报头（若干请求头）

Host:localhost:8080 指定访问的主机名和端口

User-Agent:Mozilla/5/0…Firefox/25.0 指定客户端的版本

Accept:…text/html/image 指定客户端能够接收的数据类型

…

(空白行)

第三部分：请求实体

如果请求方式为GET，请求实体中不会有内容（请求实体是空的）

如果请求方式为POST，并且请求中携带了数据，此时请求实体中才会有内容

2）Http响应信息

第一部分：状态行

HTTP/1.1 200 OK

HTTP/1.1：响应所遵循的协议和版本

200：状态码，表示请求处理的结果

200：表示请求处理是成功的

302：表示游览器需要进一步请求才可以访问到对应的资源

304/307：表示让游览器使用以前缓存的资源文件

404：表示游览器所请求的资源找不到（可能是游览器的访问路径是错误的）

500：表示服务器内部出现错误（可能是服务器在处理请求时抛出了异常）

OK：和前面的状态码对应

200 OK

404 Not Found

500 Internal Server Error

第二部分：响应报头（若干响应头）

Content-Type:text/html 响应改游览器的数据类型

Content-Length:139 响应给游览器的数据长度139字节

…

(空白行)

第三部分：响应实体

响应实体：就是游览器锁清秋的文件内容

3）GET提交和POST提交的区别

主要体现在请求参数传输过程的不相同

GET提交：主要用于向服务器请求数据	POST提交：主要用于向服务器提交数据
GET提交是在地址栏URL地址的后面通过拼接参数将数据提交给服务器，由于数据会显示在地址栏上，如果是隐私数据，非常的不安全	POST不是通过地址栏提交数据，而是通过请求实体将数据带给服务器，由于数据是通过请求实体发送数据，相对更加安全
通过地址栏提交数据，数据量不能超过1KB或者4KB	通过请求实体提交数据，数据量理论上没有限制！可以提交文件

使用场景：

如果只是单纯做一个跳转，或者只是访问一个网页，请求种没有数据，都是使用GRT提交

如果在请求中有数据，但数据量不大，并且数据没有隐私性，也尽量使用GET提交

如果在请求中有数据，数据量比较大或者数据较为隐私，此时推荐使用POST提交，如果是提交文件，只能用POST提交