jQuery

最新推荐文章于 2023-07-07 14:28:52 发布

小西_3027

最新推荐文章于 2023-07-07 14:28:52 发布

阅读量139

点赞数

分类专栏：笔记文章标签： jquery

本文链接：https://blog.csdn.net/baoxiang1024/article/details/113729274

版权

笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

下载2个zip包，放电脑同一文件夹，任意位置
环境准备
- eclipse web版
- tomcat 8.5 win安装包
- linux服务器
eclipse 修改编码 UTF-8、
- https://blog.csdn.net/xiaojingfirst/article/details/82762996
servlet新建和使用
- 新建java web项目
  - file->new->dynamic web project->qcby0206(允许自定义任意名字，建议和我一致)
  - 新建serlvet
    - src文件夹右击 -> New -> serlvet
      - package: java0206
      - Class Name: HelloWorld
    - 需要依赖servlet-api.jar包
      - apache-tomcat-8.5.51-windows-x64\apache-tomcat-8.5.51\lib\servlet-api.jar
- 引入第三方依赖jar包
  - 引入项目内部jar包
    - 拷贝到项目WebContent/WEB-INF/lib 文件夹中
  - 引入项目外部jar包
    - 直接引用磁盘的jar包：右击项目 -》 build path -> confi~ -> Libraries -> add External Jar-> 本地磁盘选择jar包
  - 后续继续学习 === 》 maven 专门用于管理java web项目中的所有第三方依赖的工具 pom
添加Tomcat配置
- Server展示
  - Windows菜单 - Show - Servers/Other - Ser -> 选中 Open
- Servers -> New -> Apache文件夹-》 tomcat 8.5 servers- > next-> 选择本地tomcat-》 finished
- 添加项目到tomcat
  - add 、remove

运行访问

添加项目到tomcat
添加index.jsp首页
- 右击 WebContent -》 new - > jsp File -> index ->finished
- 修改bodyhello world
启动tomcat
- 右击，Start
如何访问到默认的首页

http://localhost:8080/qcby0206/

http://localhost -》代表本机 localhost/127.0.0.1

8080 tomcat的端口 port 端口号同一时刻每一个程序启动都有唯一的端口号

由于windows安装Tomcat、Oracle、MySQL等软件时经常遇到端口被占用的情况，而强行关闭占用程序往往治标不治本，此时更改软件程序默认端口不失为一个好方法。
以下是Windows的端口号设置范围
（推荐使用5001-65535之间的端口，记得绕开8080这种常用的）：

（1）0-1023： BSD保留端口，也叫系统端口，这些端口只有系统特许的进程才能使用；

（2）1024~5000：一般为服务器端口，不建议使用；

（3）5001~65535：绕开常用端口，随便使用，建议选用5001-9999之间的。

/qcby0206 项目的访问路径，默认是项目名字
修改
- 双击tomcat，进入Modules视图，选中路径，点击edit编辑，保存，启动

遇到端口冲突解决的一种方式

netstat -ano | findstr 8080  # 查找占用8080端口的进程  === pid  7244
taskkill -pid 7244 -f  # 杀掉对应进程，也可通过任务管理器结束任务

服务器部署
- linux
  - uname -a
    - ubuntu
      - apt
```
    Linux iZ2zebgo0r7mr2e0k4nlobZ 4.4.0-184-generic #214-Ubuntu SMP Thu Jun 4 10:14:11 UTC 2020 x86_64 x86_64 x86_64 GNU/Linux
```
    - centeros
      - yum
        
        Linux VM-0-10-centos 3.10.0-1127.19.1.el7.x86_64 #1 SMP Tue Aug 25 17:23:54 UTC 2020 x86_64 x86_64 x86_64 GNU/Linux
  - 。。。
- java环境变量配置
  - 无安装包，先官网下载上传
  - 查看环境是否存在，javac
  - 修改配文件 vi /etc/profile
```
    export JAVA_HOME=/opt/jdk1.8.0_231
    export CLASSPATH=$:CLASSPATH:$JAVA_HOME/lib/ 
    export PATH=$PATH:$JAVA_HOME/bin
```
  - source /etc/profile,使配置文件生效
  - javac
- linux tomcat启动和测试
  - 第一步测试，先测试服务器本地能否访问成功
    - wget http://localhost/
  - 内部防火墙 — 服务器系统内部的
  - 安全组 – 云平台设置
- java web项目通过eclipse导出war包
  - 右击项目 -》 export->war->选择路径-》完成 qcby0206.war
  - 上传到 apache-tomcat-8.5.51/webapps 目录
  - 启动tomcat apache-tomcat-8.5.51/bin => ./startup.sh
  - 查看日志：apache-tomcat-8.5.51/logs => tail -f catalina.out
eclipse导入已有项目
- File->import->选择 Existing Project into Workspace->Browse 从本地磁盘选择项目 -》 finised

tomcat讲解

conf 配文件

修改配置文件使用

server.xml 一般修改端口号

     69     <Connector port="8080" protocol="HTTP/1.1"
     70                connectionTimeout="20000"
     71                redirectPort="8443" />

修改成

     69     <Connector port="8081" protocol="HTTP/1.1"
     70                connectionTimeout="20000"
     71

重启动tomcat
- ./shutdown.sh 关闭
- ./startup.sh 启动

bin 可执行脚本
- 启动关闭使用
  - ./startup.sh
  - ./shutdown.sh
logs 目录
- 查看日志使用 tail -f catalina.out
webapps 项目部署文件夹
- 部署项目使用
lib
- 存放第三方依赖包

流程
- 研发：新建了Servlet项目，写了个helloworld
- 搭建服务器环境：有一台新的服务器，配置java，配置tomcat，调整安全组
- 测试+上线：吧Servlet项目打war包部署到服务器的tomcat，访问成功
=========================================================
JQ

https://www.runoob.com/jquery/event-one.html

安装

1、本地文件

引入

	<script src="js/jquery.self.js"></script>

2、cdn - 线上的文件

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

选择器

id 选择器

	var name1 = document.getElementById("name1");	
	var name1Q = $('#name1');

	console.info("name1:"+name1.value);
	console.info("name1Q:"+name1Q.val());

.class 选择器

	 	学号：<input type="text" class="numberCss" name="number" id="number" value="007" /> <br/>
	 	
	 		//  Jq   通过class选择器  -  ， + class名字 获取对象
	var numberQCss = $('.numberCss');
	
	
		console.info("numberQCss:"+numberQCss.val());

利用其他方式

文档就绪执行

$(function(){
 
   // 开始写 jQuery 代码...
 
});

捕获

三个简单实用的用于 DOM 操作的 jQuery 方法：
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容（包括 HTML 标记）
- val() - 设置或返回表单字段的值
设置
- 值
- 属性attr
添加新html内容：
- append() - 在被选元素的结尾插入内容
- prepend() - 在被选元素的开头插入内容
- after() - 在被选元素之后插入内容
- before() - 在被选元素之前插入内容
删除元素
- remove() - 删除被选元素（及其子元素）
- empty() - 从被选元素中删除子元素

AJAx

AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。

$.ajax({
	        type: "post", //请求方式  post/get
	        url: "ArticleServlet",    //传输地址的URL
	        data: {
	        	"id":id,
	        	"operateType":"2",
	        	}, //data代表我们的数据  key -value类型的数据
	        cache: false, 
	        async : false, //success和error代表是否返回成功，既后台给前台传输数据是否成功
	        success: function (data)
	        {	
                // 执行成功
	        },
	        error:function (XMLHttpRequest, textStatus, errorThrown) { 
	            // 执行失败
	        }
	     });