IDEA使用前端基础

常用快捷键和快捷语句

Ctrl+Shift+Enter:将输入的if、for、函数等等补上{}或者;使代码语句完整
Ctrl+Alt+T:将选中的代码使用if、while、try/catch等包装
Alt+/:自动完成
Alt+Enter:自动提示完成
Ctrl+/:使用//进行注释
Ctrl+D:复制上一行
Ctrl+Y:删除当前行
Ctrl+O:选择重载方法
Ctrl+Shift+/:使用/**/进行注释
ctrl+alt+v:快速赋值
Ctrl+Alt+L:格式化代码
Ctrl+Alt+O:优化import
Ctrl + Space:代码提示
Ctrl + Shift + Space:自动补全代码
Alt + Insert :生成代码(如构造函数等)
Ctrl + Alt + Space:类名或接口名提示
Ctrl+ I:快速实现接口中的方法
Ctrl+P:函数参数提示
Ctrl+”+/-”,当前方法展开、折叠
Ctrl+Shift+”+/-”,全部展开、折叠
main:public static void main(String[] args) {}
sout:System.out.println();
fori:for (int i = 0; i < ; i++) {}
foreach:for( : ){}
/ **+Enter:方法注释
ctrl+alt+v:自动补全返回类型及变量快捷键 有道词典与QQ音乐会冲突导致失效
iter:for (String arg : args) 遍历
itar:for (int j = 0; j < args.length; j++) 遍历数组
itli:for (int j = 0; j < list.size(); j++) 遍历列表

常用技术和框架介绍

HTML

常用标签:

1. 文件标签:构成html最基本的标签
		* html:html文档的根标签
		* head:头标签。用于指定html文档的一些属性。引入外部的资源
		* title:标题标签。
		* body:体标签
		* <!DOCTYPE html>:html5中定义该文档是html文档
2. 文本标签:和文本有关的标签
		* 注释:<!-- 注释内容 -->
		* <h1> to <h6>:标题标签
			* h1~h6:字体大小逐渐递减
		* <p>:段落标签
		* <br>:换行标签
		* <hr>:展示一条水平线
			* 属性:
				* color:颜色
				* width:宽度
				* size:高度
				* align:对其方式
					* center:居中
					* left:左对齐
					* right:右对齐
		* <b>:字体加粗
		* <i>:字体斜体
		* <font>:字体标签
		* <center>:文本居中
			* 属性:
				* color:颜色
				* size:大小
				* face:字体

		* 属性定义:
			* color:
				1. 英文单词:red,green,blue
				2. rgb(值1,值2,值3):值的范围:0~255  如  rgb(0,0,255)
				3. #值1值2值3:值的范围:00~FF之间。如: #FF00FF
			* width:
				1. 数值:width='20' ,数值的单位,默认是 px(像素)
				2. 数值%:占比相对于父元素的比例
	3. 图片标签:
		* img:展示图片
			* 属性:
				* src:指定图片的位置

		* 代码:
			 <!--展示一张图片 img-->

		    <img src="image/jingxuan_2.jpg" align="right" alt="古镇" width="500" height="500"/>
		
		    <!--
		        相对路径
		            * 以.开头的路径
		                * ./:代表当前目录  ./image/1.jpg
		                * ../:代表上一级目录
		     -->
		
		    <img src="./image/jiangwai_1.jpg">
		
		    <img src="../image/jiangwai_1.jpg">
	4. 列表标签:
		* 有序列表:
			* ol:
			* li:
		* 无序列表:
			* ul:
			* li:
	5. 链接标签:
		* a:定义一个超链接
			* 属性:
				* href:指定访问资源的URL(统一资源定位符)
				* target:指定打开资源的方式
					* _self:默认值,在当前页面打开
					* _blank:在空白页面打开
	6. div和span:
		* div:每一个div占满一整行。块级标签
    	* span:文本信息在一行展示,行内标签 内联标签

	7. 语义化标签:html5中为了提高程序的可读性,提供了一些标签。
		1. <header>:页眉
		2. <footer>:页脚
	8. 表格标签:
		* table:定义表格
			* width:宽度
			* border:边框
			* cellpadding:定义内容和单元格的距离
			* cellspacing:定义单元格之间的距离。如果指定为0,则单元格的线会合为一条、
			* bgcolor:背景色
			* align:对齐方式
		* tr:定义行
			* bgcolor:背景色
			* align:对齐方式
		* td:定义单元格
			* colspan:合并列
			* rowspan:合并行
		* th:定义表头单元格
		* <caption>:表格标题
		* <thead>:表示表格的头部分
		* <tbody>:表示表格的体部分
		* <tfoot>:表示表格的脚部分
	9.表单标签:
		* 概念:用于采集用户输入的数据的。用于和服务器进行交互。
		* form:用于定义表单的。可以定义一个范围,范围代表采集用户数据的范围
        * 属性:
            * action:指定提交数据的URL
            * method:指定提交方式
                * 分类:一共7种,2种比较常用
                   * get:
                        1. 请求参数会在地址栏中显示。会封装到请求行中(HTTP协议后讲解)。
                        2. 请求参数大小是有限制的。
                        3. 不太安全。
                   * post:
                        2. 请求参数不会再地址栏中显示。会封装在请求体中(HTTP协议后讲解)
                        2. 请求参数的大小没有限制。
                        3. 较为安全。
        * 表单项中的数据要想被提交:必须指定其name属性
     10. 表单项标签:
		* input:可以通过type属性值,改变元素展示的样式
			* type属性:
				* text:文本输入框,默认值
					* placeholder:指定输入框的提示信息,当输入框的内容发生变化,会自动清空提示信息	
				* password:密码输入框
				* radio:单选框
					* 注意:
						1. 要想让多个单选框实现单选的效果,则多个单选框的name属性值必须一样。
						2. 一般会给每一个单选框提供value属性,指定其被选中后提交的值
						3. checked属性,可以指定默认值
				* checkbox:复选框
					* 注意:
						1. 一般会给每一个单选框提供value属性,指定其被选中后提交的值
						2. checked属性,可以指定默认值

				* file:文件选择框
				* hidden:隐藏域,用于提交一些信息。
				* 按钮:
					* submit:提交按钮。可以提交表单
					* button:普通按钮
					* image:图片提交按钮
						* src属性指定图片的路径	

		   * label:指定输入项的文字描述信息
			   * 注意:
				   * label的for属性一般会和 input 的 id属性值 对应。如果对应了,则点击label区域,会让input输入框获取焦点。
		* select: 下拉列表
			* 子元素:option,指定列表项
			
		* textarea:文本域
			* cols:指定列数,每一行有多少个字符
			* rows:默认多少行。

基本代码:

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Bootstrap Template</title>
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<style>
			/*
						网页设计布局红色辅助线
						*/
						.design {
							border: 1px red solid;
							height: 103.95px;
						}

						/*
						网页设计区块定位黄色辅助线
						*/
						.designy {
							border: 2px yellow solid;
						}

						/*
						网页设计区块定位黑色辅助线
						*/
						.designb {
							border: 2px black solid;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="row">
				<div class="col-sm-6 design"></div>
				<div class="col-sm-6 design"></div>
			</div>
			<div class="row">
				<div class="col-sm-6 design"></div>
				<div class="col-sm-6 design"></div>
			</div>
			<div class="row">
				<div class="col-sm-6 design"></div>
				<div class="col-sm-6 design"></div>
			</div>
			<div class="row">
				<div class="col-sm-6 design"></div>
				<div class="col-sm-6 design"></div>
			</div>
			<div class="row">
				<div class="col-sm-6 design"></div>
				<div class="col-sm-6 design"></div>
			</div>
			<div class="row">
				<div class="col-sm-6 design"></div>
				<div class="col-sm-6 design"></div>
			</div>
			<div class="row">
				<div class="col-sm-6 design"></div>
				<div class="col-sm-6 design"></div>
			</div>
			<div class="row">
				<div class="col-sm-6 design"></div>
				<div class="col-sm-6 design"></div>
			</div>
		</div>
	</body>
	<script src="js/jquery-3.3.1.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
</html>

CSS

作用: 用于美化页面,布局页面
语法:

  • 格式:
    选择器 {
    属性名1:属性值1;
    属性名2:属性值2;

    }
    * 选择器:筛选具有相似特征的元素
    * 注意:
    * 每一对属性需要使用;隔开,最后一对属性可以不加;

选择器:

		1. 基础选择器
			1. id选择器:选择具体的id属性值的元素.建议在一个html页面中id值唯一
		        * 语法:#id属性值{}
		    2. 元素选择器:选择具有相同标签名称的元素
		        * 语法: 标签名称{}
		        * 注意:id选择器优先级高于元素选择器
		    3. 类选择器:选择具有相同的class属性值的元素。
		        * 语法:.class属性值{}
		        * 注意:类选择器选择器优先级高于元素选择器
		2. 扩展选择器:
			1. 选择所有元素:
				* 语法: *{}
			2. 并集选择器:
				* 选择器1,选择器2{}
			
			3. 子选择器:筛选选择器1元素下的选择器2元素
				* 语法:  选择器1 选择器2{}
			4. 父选择器:筛选选择器2的父元素选择器1
				* 语法:  选择器1 > 选择器2{}

			5. 属性选择器:选择元素名称,属性名=属性值的元素
				* 语法:  元素名称[属性名="属性值"]{}

			6. 伪类选择器:选择一些元素具有的状态
				* 语法: 元素:状态{}
				* 如: <a>
					* 状态:
						* link:初始化的状态
						* visited:被访问过的状态
						* active:正在访问状态
						* hover:鼠标悬浮状态

属性:

	1. 字体、文本
		* font-size:字体大小
		* color:文本颜色
		* text-align:对其方式
		* line-height:行高 
	2. 背景
		* background:
	3. 边框
**加粗样式**		* border:设置边框,符合属性
	4. 尺寸
		* width:宽度
		* height:高度
	5. 盒子模型:控制布局
		* margin:外边距
		* padding:内边距
			* 默认情况下内边距会影响整个盒子的大小
			* box-sizing: border-box;  设置盒子的属性,让width和height就是最终盒子的大小
		* float:浮动
			* left
			* right

基本代码:

  1. 内联样式
 <div style="color:red;">hello css</div>
  1. 内部样式
 <style>   </style>
  1. 外部样式
<link rel="stylesheet" href="css/a.css">

参考网站:
菜鸟CSS教程

iconfont

iconfont矢量图标库
font class方式导入
解压后把所有文件放入icon文件夹中
在这里插入图片描述
类似于字体一样可以调整大小和颜色
在这里插入图片描述

JavaScript

**作用:**控制页面的元素,让页面有一些动态的效果,增强用户的体验。
基本语法:

1. 与html结合方式
			1. 内部JS:
				* 定义<script>,标签体内容就是js代码
			2. 外部JS:
				* 定义<script>,通过src属性引入外部的js文件

			* 注意:
				1. <script>可以定义在html页面的任何地方。但是定义的位置会影响执行顺序。
				2. <script>可以定义多个。
2. 注释
			1. 单行注释://注释内容
			2. 多行注释:/*注释内容*/
3. 数据类型:
			1. 原始数据类型(基本数据类型)1. number:数字。 整数/小数/NaN(not a number 一个不是数字的数字类型)
				2. string:字符串。 字符串  "abc" "a" 'abc'
				3. boolean: true和false
				4. null:一个对象为空的占位符
				5. undefined:未定义。如果一个变量没有给初始化值,则会被默认赋值为undefined
				
			2. 引用数据类型:对象
			
4. 变量
			* 变量:一小块存储数据的内存空间
			* Java语言是强类型语言,而JavaScript是弱类型语言。
				* 强类型:在开辟变量存储空间时,定义了空间将来存储的数据的数据类型。只能存储固定类型的数据
				* 弱类型:在开辟变量存储空间时,不定义空间将来的存储数据类型,可以存放任意类型的数据。
			* 语法:
				* var 变量名 = 初始化值;
			
			* typeof运算符:获取变量的类型。
				* 注:null运算后得到的是object
5. 运算符
			1. 一元运算符:只有一个运算数的运算符
				++--+(正号)  
				* ++ --: 自增(自减)
					* ++(--) 在前,先自增(自减),再运算
					* ++(--) 在后,先运算,再自增(自减)
				* +(-):正负号
			    * 注意:在JS中,如果运算数不是运算符所要求的类型,那么js引擎会自动的将运算数进行类型转换
                    * 其他类型转number:
                        * string转number:按照字面值转换。如果字面值不是数字,则转为NaN(不是数字的数字)
                        * boolean转number:true转为1,false转为0
			2. 算数运算符
				+ - * / % ...

			3. 赋值运算符
				= += -+....

			4. 比较运算符
				> < >= <= == ===(全等于)
				* 比较方式
                  1. 类型相同:直接比较
                      * 字符串:按照字典顺序比较。按位逐一比较,直到得出大小为止。
                  2. 类型不同:先进行类型转换,再比较
                      * ===:全等于。在比较之前,先判断类型,如果类型不一样,则直接返回false
            			5. 逻辑运算符
				&& || !
				* 其他类型转boolean:
                   1. number:0或NaN为假,其他为真
                   2. string:除了空字符串(""),其他都是true
                   3. null&undefined:都是false
                   4. 对象:所有对象都为true
			
			6. 三元运算符
				? : 表达式
				var a = 3;
		        var b = 4;
		
		        var c = a > b ? 1:0;
				* 语法:
					* 表达式?1:2;
					* 判断表达式的值,如果是true则取值1,如果是false则取值26. 流程控制语句:
			1. if...else...
			2. switch:
				* 在java中,switch语句可以接受的数据类型: byte int shor char,枚举(1.5) ,String(1.7)
					* switch(变量):
						case:
				* 在JS中,switch语句可以接受任意的原始数据类型
			3. while
			4. do...while
			5. for
7. JS特殊语法:
			1. 语句以;结尾,如果一行只有一条语句则 ;可以省略 (不建议)
			2. 变量的定义使用var关键字,也可以不使用
        		* 用: 定义的变量是局部变量
                * 不用:定义的变量是全局变量(不建议)

基本对象:

1. Function:函数(方法)对象
            1. 创建:
                1. var fun = new Function(形式参数列表,方法体);  //忘掉吧
                2. 
                    function 方法名称(形式参数列表){
                        方法体
                    }

                3. 
                   var 方法名 = function(形式参数列表){
                        方法体
                   }
            2. 方法:

            3. 属性:
                length:代表形参的个数
            4. 特点:
                1. 方法定义是,形参的类型不用写,返回值类型也不写。
                2. 方法是一个对象,如果定义名称相同的方法,会覆盖
                3. 在JS中,方法的调用只与方法的名称有关,和参数列表无关
                4. 在方法声明中有一个隐藏的内置对象(数组),arguments,封装所有的实际参数
            5. 调用:
                方法名称(实际参数列表);
		
2. Array:数组对象
            1. 创建:
                1. var arr = new Array(元素列表);
                2. var arr = new Array(默认长度);
                3. var arr = [元素列表];
            2. 方法
                join(参数):将数组中的元素按照指定的分隔符拼接为字符串
                push()	向数组的末尾添加一个或更多元素,并返回新的长度。
            3. 属性
                length:数组的长度
            4. 特点:
                1. JS中,数组元素的类型可变的。
                2. JS中,数组长度可变的。
3. Boolean
4. Date:日期对象
            1. 创建:
                var date = new Date();

            2. 方法:
                toLocaleString():返回当前date对象对应的时间本地字符串格式
                getTime():获取毫秒值。返回当前如期对象描述的时间到197011日零点的毫秒值差
5. Math:数学对象
            1. 创建:
                * 特点:Math对象不用创建,直接使用。  Math.方法名();

            2. 方法:
                random():返回 0 ~ 1 之间的随机数。 含0不含1
                ceil(x):对数进行上舍入。
                floor(x):对数进行下舍入。
                round(x):把数四舍五入为最接近的整数。
            3. 属性:
                PI
6. Number
7. String
8. RegExp:正则表达式对象
			1. 正则表达式:定义字符串的组成规则。
				1. 单个字符:[]
					如: [a] [ab] [a-zA-Z0-9_]
					* 特殊符号代表特殊含义的单个字符:
						\d:单个数字字符 [0-9]
						\w:单个单词字符[a-zA-Z0-9_]
				2. 量词符号:
					?:表示出现0次或1*:表示出现0次或多次
					+:出现1次或多次
					{m,n}:表示 m<= 数量 <= n
						* m如果缺省: {,n}:最多n次
						* n如果缺省:{m,} 最少m次
				3. 开始结束符号
					* ^:开始
					* $:结束
			2. 正则对象:
				1. 创建
					1. var reg = new RegExp("正则表达式");
					2. var reg = /正则表达式/;
				2. 方法	
					1. test(参数):验证指定的字符串是否符合正则定义的规范	
9. Global
			1. 特点:全局对象,这个Global中封装的方法不需要对象就可以直接调用。  方法名();
			2. 方法:
			    encodeURI():url编码
			    decodeURI():url解码

			    encodeURIComponent():url编码,编码的字符更多
			    decodeURIComponent():url解码

			    parseInt():将字符串转为数字
			        * 逐一判断每一个字符是否是数字,直到不是数字为止,将前边数字部分转为number
			    isNaN():判断一个值是否是NaN
			        * NaN六亲不认,连自己都不认。NaN参与的==比较全部问false

			    eval():讲 JavaScript 字符串,并把它作为脚本代码来执行。
            3. URL编码
               传智播客 =  %E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2

DOM简单学习:

* 功能:控制html文档的内容
* 获取页面标签(元素)对象:Element
	* document.getElementById("id值"):通过元素的id获取元素对象
* 操作Element对象:
	1. 修改属性值:
		1. 明确获取的对象是哪一个?
		2. 查看API文档,找其中有哪些属性可以设置
	2. 修改标签体内容:
		* 属性:innerHTML
		1. 获取元素对象
		2. 使用innerHTML属性修改标签体内容

事件简单学习:

* 功能: 某些组件被执行了某些操作后,触发某些代码的执行。
	* 造句:  xxx被xxx,我就xxx
		* 我方水晶被摧毁后,我就责备对友。
		* 敌方水晶被摧毁后,我就夸奖自己。

* 如何绑定事件
	1. 直接在html标签上,指定事件的属性(操作),属性值就是js代码
		1. 事件:onclick--- 单击事件

	2. 通过js获取元素对象,指定事件属性,设置一个函数

BOM简单学习:

1. 概念:Browser Object Model 浏览器对象模型
	* 将浏览器的各个组成部分封装成对象。

2. 组成:
	* Window:窗口对象
	* Navigator:浏览器对象
	* Screen:显示器屏幕对象
	* History:历史记录对象
	* Location:地址栏对象

3. Window:窗口对象
    1. 创建
    2. 方法
         1. 与弹出框有关的方法:
            alert()	显示带有一段消息和一个确认按钮的警告框。
            confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框。
                * 如果用户点击确定按钮,则方法返回true
                * 如果用户点击取消按钮,则方法返回false
            prompt()	显示可提示用户输入的对话框。
                * 返回值:获取用户输入的值
         2. 与打开关闭有关的方法:
            close()	关闭浏览器窗口。
                * 谁调用我 ,我关谁
            open()	打开一个新的浏览器窗口
                * 返回新的Window对象
         3. 与定时器有关的方式
            setTimeout()	在指定的毫秒数后调用函数或计算表达式。
                * 参数:
                    1. js代码或者方法对象
                    2. 毫秒值
                * 返回值:唯一标识,用于取消定时器
            clearTimeout()	取消由 setTimeout() 方法设置的 timeout。

            setInterval()	按照指定的周期(以毫秒计)来调用函数或计算表达式。
            clearInterval()	取消由 setInterval() 设置的 timeout。

    3. 属性:
        1. 获取其他BOM对象:
            history
            location
            Navigator
            Screen:
        2. 获取DOM对象
            document
    4. 特点
        * Window对象不需要创建可以直接使用 window使用。 window.方法名();
        * window引用可以省略。  方法名();
4. Location:地址栏对象
	1. 创建(获取)1. window.location
		2. location

	2. 方法:
		* reload()	重新加载当前文档。刷新
	3. 属性
		* href	设置或返回完整的 URL。
5. History:历史记录对象
    1. 创建(获取)1. window.history
        2. history

    2. 方法:
        * back()	加载 history 列表中的前一个 URL。
        * forward()	加载 history 列表中的下一个 URL。
        * go(参数)	加载 history 列表中的某个具体页面。
            * 参数:
                * 正数:前进几个历史记录
                * 负数:后退几个历史记录
    3. 属性:
        * length	返回当前窗口历史列表中的 URL 数量。

DOM:

* 概念: Document Object Model 文档对象模型
	* 将标记语言文档的各个组成部分,封装为对象。可以使用这些对象,对标记语言文档进行CRUD的动态操作

* W3C DOM 标准被分为 3 个不同的部分:

	* 核心 DOM - 针对任何结构化文档的标准模型
		* Document:文档对象
		* Element:元素对象
		* Attribute:属性对象
		* Text:文本对象
		* Comment:注释对象

		* Node:节点对象,其他5个的父对象
	* XML DOM - 针对 XML 文档的标准模型
	* HTML DOM - 针对 HTML 文档的标准模型
* 核心DOM模型:
	* Document:文档对象
		1. 创建(获取):在html dom模型中可以使用window对象来获取
			1. window.document
			2. document
		2. 方法:
			1. 获取Element对象:
				1. getElementById()	: 根据id属性值获取元素对象。id属性值一般唯一
				2. getElementsByTagName():根据元素名称获取元素对象们。返回值是一个数组
				3. getElementsByClassName():根据Class属性值获取元素对象们。返回值是一个数组
				4. getElementsByName(): 根据name属性值获取元素对象们。返回值是一个数组
			2. 创建其他DOM对象:
				createAttribute(name)
            	createComment()
            	createElement()
            	createTextNode()
		3. 属性
	* Element:元素对象
		1. 获取/创建:通过document来获取和创建
		2. 方法:
			1. removeAttribute():删除属性
			2. setAttribute():设置属性
	* Node:节点对象,其他5个的父对象
		* 特点:所有dom对象都可以被认为是一个节点
		* 方法:
			* CRUD dom树:
				* appendChild():向节点的子节点列表的结尾添加新的子节点。
				* removeChild()	:删除(并返回)当前节点的指定子节点。
				* replaceChild():用新节点替换一个子节点。
		* 属性:
			* parentNode 返回节点的父节点。
* HTML DOM
	1. 标签体的设置和获取:innerHTML
	2. 使用html元素对象的属性
	3. 控制元素样式
		1. 使用元素的style属性来设置
			如:
				 //修改样式方式1
		        div1.style.border = "1px solid red";
		        div1.style.width = "200px";
		        //font-size--> fontSize
		        div1.style.fontSize = "20px";
		2. 提前定义好类选择器的样式,通过元素的className属性来设置其class属性值。

事件监听机制:

* 概念:某些组件被执行了某些操作后,触发某些代码的执行。	
	* 事件:某些操作。如: 单击,双击,键盘按下了,鼠标移动了
	* 事件源:组件。如: 按钮 文本输入框...
	* 监听器:代码。
	* 注册监听:将事件,事件源,监听器结合在一起。 当事件源上发生了某个事件,则触发执行某个监听器代码。
* 常见的事件:
	1. 点击事件:
		1. onclick:单击事件
		2. ondblclick:双击事件
	2. 焦点事件
		1. onblur:失去焦点
		2. onfocus:元素获得焦点。

	3. 加载事件:
		1. onload:一张页面或一幅图像完成加载。

	4. 鼠标事件:
		1. onmousedown	鼠标按钮被按下。
		2. onmouseup	鼠标按键被松开。
		3. onmousemove	鼠标被移动。
		4. onmouseover	鼠标移到某元素之上。
		5. onmouseout	鼠标从某元素移开。
	5. 键盘事件:
		1. onkeydown	某个键盘按键被按下。	
		2. onkeyup		某个键盘按键被松开。
		3. onkeypress	某个键盘按键被按下并松开。

	6. 选择和改变
		1. onchange	域的内容被改变。
		2. onselect	文本被选中。

	7. 表单事件:
		1. onsubmit	确认按钮被点击。
		2. onreset	重置按钮被点击。

MySQL

卸载与配置:

1. 卸载
	1. 去mysql的安装目录找到my.ini文件
		* 复制 datadir="C:/ProgramData/MySQL/MySQL Server 5.5/Data/"
	2. 卸载MySQL
	3. 删除C:/ProgramData目录下的MySQL文件夹。
	
2. 配置
	* MySQL服务启动
		1. 手动。
		2. cmd--> services.msc 打开服务的窗口
		3. 使用管理员打开cmd
			* net start mysql : 启动mysql的服务
			* net stop mysql:关闭mysql服务
	* MySQL登录
		1. mysql -uroot -p密码
		2. mysql -hip -uroot -p连接目标的密码
		3. mysql --host=ip --user=root --password=连接目标的密码
	* MySQL退出
		1. exit
		2. quit

	* MySQL目录结构
		1. MySQL安装目录:basedir="D:/develop/MySQL/"
			* 配置文件 my.ini
		2. MySQL数据目录:datadir="C:/ProgramData/MySQL/MySQL Server 5.5/Data/"
			* 几个概念
				* 数据库:文件夹
				* 表:文件
				* 数据:数据

SQL:

1. C(Create):创建
		1. 语法:
			create table 表名(
				列名1 数据类型1,
				列名2 数据类型2,
				....
				列名n 数据类型n
			);
			* 注意:最后一列,不需要加逗号(,* 数据库类型:
				1. int:整数类型
					* age int,
				2. double:小数类型
					* score double(5,2)
				3. date:日期,只包含年月日,yyyy-MM-dd
				4. datetime:日期,包含年月日时分秒	 yyyy-MM-dd HH:mm:ss
				5. timestamp:时间错类型	包含年月日时分秒	 yyyy-MM-dd HH:mm:ss	
					* 如果将来不给这个字段赋值,或赋值为null,则默认使用当前的系统时间,来自动赋值

				6. varchar:字符串
					* name varchar(20):姓名最大20个字符
					* zhangsan 8个字符  张三 2个字符
			* 创建表
			create table student(
				id int,
				name varchar(32),
				age int ,
				score double(4,1),
				birthday date,
				insert_time timestamp
			);
		* 复制表:
			* create table 表名 like 被复制的表名;	
2. R(Retrieve):查询
		* 查询某个数据库中所有的表名称
			* show tables;
		* 查询表结构
			* desc 表名;
3. U(Update):修改
		1. 修改表名
			alter table 表名 rename to 新的表名;
		2. 修改表的字符集
			alter table 表名 character set 字符集名称;
		3. 添加一列
			alter table 表名 add 列名 数据类型;
		4. 修改列名称 类型
			alter table 表名 change 列名 新列别 新数据类型;
			alter table 表名 modify 列名 新数据类型;
		5. 删除列
			alter table 表名 drop 列名;
4. D(Delete):删除
		* drop table 表名;
		* drop table  if exists 表名 ;
1. 添加数据:
	* 语法:
		* insert into 表名(列名1,列名2,...列名n) values(1,2,...值n);
	* 注意:
		1. 列名和值要一一对应。
		2. 如果表名后,不定义列名,则默认给所有列添加值
			insert into 表名 values(1,2,...值n);
		3. 除了数字类型,其他类型需要使用引号(单双都可以)引起来
2. 删除数据:
	* 语法:
		* delete from 表名 [where 条件]
	* 注意:
		1. 如果不加条件,则删除表中所有记录。
		2. 如果要删除所有记录
			1. delete from 表名; -- 不推荐使用。有多少条记录就会执行多少次删除操作
			2. TRUNCATE TABLE 表名; -- 推荐使用,效率更高 先删除表,然后再创建一张一样的表。
3. 修改数据:
	* 语法:
		* update 表名 set 列名1 =1, 列名2 =2,... [where 条件];

	* 注意:
		1. 如果不加任何条件,则会将表中所有记录全部修改。
* select * from 表名;

1. 语法:
	select
		字段列表
	from
		表名列表
	where
		条件列表
	group by
		分组字段
	having
		分组之后的条件
	order by
		排序
	limit
		分页限定
2. 基础查询
	1. 多个字段的查询
		select 字段名1,字段名2... from 表名;
		* 注意:
			* 如果查询所有字段,则可以使用*来替代字段列表。
	2. 去除重复:
		* distinct
	3. 计算列
		* 一般可以使用四则运算计算一些列的值。(一般只会进行数值型的计算)
		* ifnull(表达式1,表达式2):null参与的运算,计算结果都为null
			* 表达式1:哪个字段需要判断是否为null
			* 如果该字段为null后的替换值。
	4. 起别名:
		* as:as也可以省略
3. 条件查询
	1. where子句后跟条件
	2. 运算符
		* ><<=>==<>
		* BETWEEN...AND  
		* IN( 集合) 
		* LIKE:模糊查询
			* 占位符:
				* _:单个任意字符
				* %:多个任意字符
		* IS NULL  
		* and  或 &&
		* or  或 || 
		* not  或 !

bootstrap

响应式布局:
模板:

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
  </head>
  <body>
    <h1>你好,世界!</h1>
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
  </body>
</html>
* 同一套页面可以兼容不同分辨率的设备。
* 实现:依赖于栅格系统:将一行平均分成12个格子,可以指定元素占几个格子
* 步骤:
	1. 定义容器。相当于之前的table、
		* 容器分类:
			1. container:两边留白
			2. container-fluid:每一种设备都是100%宽度
	2. 定义行。相当于之前的tr   样式:row
	3. 定义元素。指定该元素在不同的设备上,所占的格子数目。样式:col-设备代号-格子数目
		* 设备代号:
			1. xs:超小屏幕 手机 (<768px):col-xs-12
			2. sm:小屏幕 平板 (768px)
			3. md:中等屏幕 桌面显示器 (992px)
			4. lg:大屏幕 大桌面显示器 (1200px)

	* 注意:
		1. 一行中如果格子数目超过12,则超出部分自动换行。
		2. 栅格类属性可以向上兼容。栅格类适用于与屏幕宽度大于或等于分界点大小的设备。
		3. 如果真实设备宽度小于了设置栅格类属性的设备代码的最小值,会一个元素沾满一整行。

CSS样式和JS插件:

1. 全局CSS样式:
	* 按钮:class="btn btn-default"
	* 图片:
		*  class="img-responsive":图片在任意尺寸都占100%
		*  图片形状
			*  <img src="..." alt="..." class="img-rounded">:方形
			*  <img src="..." alt="..." class="img-circle"> : 圆形
			*  <img src="..." alt="..." class="img-thumbnail"> :相框
	* 表格
		* table
		* table-bordered
		* table-hover
	* 表单
		* 给表单项添加:class="form-control" 
2. 组件:
	* 导航条
	* 分页条
3. 插件:
	* 轮播图

bootstrap官网
D:\Java\bootstrap\bootstrap-3.3.7-dist

JQuery

JQuery菜鸟教程
作用:查询选取HTML元素并对它们进行操作
基础语法: $(selector).action()
基本外层

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

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

选择器
在这里插入图片描述
事件
在这里插入图片描述
jQuery 事件方法语法

$("p").click(function(){
    // 动作触发后执行的代码!!
});

JQuery快速入门

1. 概念: 一个JavaScript框架。简化JS开发
2. JQuery对象和JS对象区别与转换
	1. JQuery对象在操作时,更加方便。
    2. JQuery对象和js对象方法不通用的.
    3. 两者相互转换
        * jq -- > js : jq对象[索引] 或者 jq对象.get(索引)
        * js -- > jq : $(js对象)
3.选择器:筛选具有相似特征的元素(标签)
	1. 基本操作学习:
		1. 事件绑定
			//1.获取b1按钮
            $("#b1").click(function(){
                alert("abc");
            });
		2. 入口函数
			 $(function () {
	           
   			 });
			 window.onload  和 $(function) 区别
                 * window.onload 只能定义一次,如果定义多次,后边的会将前边的覆盖掉
                 * $(function)可以定义多次的。
		3. 样式控制:css方法
			 // $("#div1").css("background-color","red");
      		$("#div1").css("backgroundColor","pink");
4.分类
		1. 基本选择器
			1. 标签选择器(元素选择器)
				* 语法: $("html标签名") 获得所有匹配标签名称的元素
			2. id选择器 
				* 语法: $("#id的属性值") 获得与指定id属性值匹配的元素
			3. 类选择器
				* 语法: $(".class的属性值") 获得与指定的class属性值匹配的元素
			4. 并集选择器:
				* 语法: $("选择器1,选择器2....") 获取多个选择器选中的所有元素
		2. 层级选择器
			1. 后代选择器
				* 语法: $("A B ") 选择A元素内部的所有B元素		
			2. 子选择器
				* 语法: $("A > B") 选择A元素内部的所有B子元素
		3. 属性选择器
			1. 属性名称选择器 
				* 语法: $("A[属性名]") 包含指定属性的选择器
			2. 属性选择器
				* 语法: $("A[属性名='值']") 包含指定属性等于指定值的选择器
			3. 复合属性选择器
				* 语法: $("A[属性名='值'][]...") 包含多个属性条件的选择器
		4. 过滤选择器
			1. 首元素选择器 
				* 语法: :first 获得选择的元素中的第一个元素
			2. 尾元素选择器 
				* 语法: :last 获得选择的元素中的最后一个元素
			3. 非元素选择器
				* 语法: :not(selector) 不包括指定内容的元素
			4. 偶数选择器
				* 语法: :even 偶数,从 0 开始计数
			5. 奇数选择器
				* 语法: :odd 奇数,从 0 开始计数
			6. 等于索引选择器
				* 语法: :eq(index) 指定索引元素
			7. 大于索引选择器 
				* 语法: :gt(index) 大于指定索引元素
			8. 小于索引选择器 
				* 语法: :lt(index) 小于指定索引元素
			9. 标题选择器
				* 语法: :header 获得标题(h1~h6)元素,固定写法
		5. 表单过滤选择器
			1. 可用元素选择器 
				* 语法: :enabled 获得可用元素
			2. 不可用元素选择器 
				* 语法: :disabled 获得不可用元素
			3. 选中选择器 
				* 语法: :checked 获得单选/复选框选中的元素
			4. 选中选择器 
				* 语法: :selected 获得下拉框选中的元素
5.DOM操作
	1. 内容操作
		1. html(): 获取/设置元素的标签体内容   <a><font>内容</font></a>  --> <font>内容</font>
		2. text(): 获取/设置元素的标签体纯文本内容   <a><font>内容</font></a> --> 内容
		3. val(): 获取/设置元素的value属性值
	2. 属性操作
		1. 通用属性操作
			1. attr(): 获取/设置元素的属性
			2. removeAttr():删除属性
			3. prop():获取/设置元素的属性
			4. removeProp():删除属性

			* attr和prop区别?
				1. 如果操作的是元素的固有属性,则建议使用prop
				2. 如果操作的是元素自定义的属性,则建议使用attr
		2. 对class属性操作
			1. addClass():添加class属性值
			2. removeClass():删除class属性值
			3. toggleClass():切换class属性
				* toggleClass("one"): 
					* 判断如果元素对象上存在class="one",则将属性值one删除掉。  如果元素对象上不存在class="one",则添加
			4. css():
	3. CRUD操作:
		1. append():父元素将子元素追加到末尾
			* 对象1.append(对象2): 将对象2添加到对象1元素内部,并且在末尾
		2. prepend():父元素将子元素追加到开头
			* 对象1.prepend(对象2):将对象2添加到对象1元素内部,并且在开头
		3. appendTo():
			* 对象1.appendTo(对象2):将对象1添加到对象2内部,并且在末尾
		4. prependTo()* 对象1.prependTo(对象2):将对象1添加到对象2内部,并且在开头
		5. after():添加元素到元素后边
			* 对象1.after(对象2): 将对象2添加到对象1后边。对象1和对象2是兄弟关系
		6. before():添加元素到元素前边
			* 对象1.before(对象2): 将对象2添加到对象1前边。对象1和对象2是兄弟关系
		7. insertAfter()
			* 对象1.insertAfter(对象2):将对象2添加到对象1后边。对象1和对象2是兄弟关系
		8. insertBefore()
			* 对象1.insertBefore(对象2): 将对象2添加到对象1前边。对象1和对象2是兄弟关系

		9. remove():移除元素
			* 对象.remove():将对象删除掉
		10. empty():清空元素的所有后代元素。
			* 对象.empty():将对象的后代元素全部清空,但是保留当前对象以及其属性节点
1. 动画
	1. 三种方式显示和隐藏元素
		1. 默认显示和隐藏方式
			1. show([speed,[easing],[fn]])
				1. 参数:
					1. speed:动画的速度。三个预定义的值("slow","normal", "fast")或表示动画时长的毫秒数值(如:1000)
					2. easing:用来指定切换效果,默认是"swing",可用参数"linear"
						* swing:动画执行时效果是 先慢,中间快,最后又慢
						* linear:动画执行时速度是匀速的
					3. fn:在动画完成时执行的函数,每个元素执行一次。

			2. hide([speed,[easing],[fn]])
			3. toggle([speed],[easing],[fn])
		
		2. 滑动显示和隐藏方式
			1. slideDown([speed],[easing],[fn])
			2. slideUp([speed,[easing],[fn]])
			3. slideToggle([speed],[easing],[fn])

		3. 淡入淡出显示和隐藏方式
			1. fadeIn([speed],[easing],[fn])
			2. fadeOut([speed],[easing],[fn])
			3. fadeToggle([speed,[easing],[fn]])

2. 遍历
	1. js的遍历方式
		* for(初始化值;循环结束条件;步长)
	2. jq的遍历方式
		1. jq对象.each(callback)
			1. 语法:
				jquery对象.each(function(index,element){});
					* index:就是元素在集合中的索引
					* element:就是集合中的每一个元素对象

					* this:集合中的每一个元素对象
			2. 回调函数返回值:
				* true:如果当前function返回为false,则结束循环(break)* false:如果当前function返回为true,则结束本次循环,继续下次循环(continue)
		2. $.each(object, [callback])
		3. for..of: jquery 3.0 版本之后提供的方式
			for(元素对象 of 容器对象)
	
3. 事件绑定
	1. jquery标准的绑定方式
		* jq对象.事件方法(回调函数)* 注:如果调用事件方法,不传递回调函数,则会触发浏览器默认行为。
			* 表单对象.submit();//让表单提交
	2. on绑定事件/off解除绑定
		* jq对象.on("事件名称",回调函数)
		* jq对象.off("事件名称")
			* 如果off方法不传递任何参数,则将组件上的所有事件全部解绑
	3. 事件切换:toggle
		* jq对象.toggle(fn1,fn2...)
			* 当单击jq对象对应的组件后,会执行fn1.第二次点击会执行fn2.....
			
		* 注意:1.9版本 .toggle() 方法删除,jQuery Migrate(迁移)插件可以恢复此功能。
			 <script src="../js/jquery-migrate-1.0.0.js" type="text/javascript" charset="utf-8"></script>
4. 插件:增强JQuery的功能
	1. 实现方式:
		1. $.fn.extend(object) 
			* 增强通过Jquery获取的对象的功能  $("#id")
		2. $.extend(object)
			* 增强JQeury对象自身的功能  $/jQuery

EL

1. 概念:Expression Language 表达式语言
2. 作用:替换和简化jsp页面中java代码的编写
3. 语法:${表达式}
4. 注意:
	* jsp默认支持el表达式的。如果要忽略el表达式
		1. 设置jsp中page指令中:isELIgnored="true" 忽略当前jsp页面中所有的el表达式
		2. \${表达式} :忽略当前这个el表达式
5. 使用:
	1. 运算:
		* 运算符:
			1. 算数运算符: + - * /(div) %(mod)
			2. 比较运算符: > < >= <= == !=
			3. 逻辑运算符: &&(and) ||(or) !(not)
			4. 空运算符: empty
				* 功能:用于判断字符串、集合、数组对象是否为null或者长度是否为0
				* ${empty list}:判断字符串、集合、数组对象是否为null或者长度为0
				* ${not empty str}:表示判断字符串、集合、数组对象是否不为null 并且 长度>0
	2. 获取值
		1. el表达式只能从域对象中获取值
		2. 语法:
			1. ${域名称.键名}:从指定域中获取指定键的值
				* 域名称:
					1. pageScope		--> pageContext
					2. requestScope 	--> request
					3. sessionScope 	--> session
					4. applicationScope --> application(ServletContext)
				* 举例:在request域中存储了name=张三
				* 获取:${requestScope.name}

			2. ${键名}:表示依次从最小的域中查找是否有该键对应的值,直到找到为止。
	3. 获取对象、List集合、Map集合的值
				1. 对象:${域名称.键名.属性名}
					* 本质上会去调用对象的getter方法

				2. List集合:${域名称.键名[索引]}

				3. Map集合:
					* ${域名称.键名.key名称}
					* ${域名称.键名["key名称"]}
3. 隐式对象:
		* el表达式中有11个隐式对象
		* pageContext:
			* 获取jsp其他八个内置对象
				* ${pageContext.request.contextPath}:动态获取虚拟目录

JSTL

1. 概念:JavaServer Pages Tag Library  JSP标准标签库
	* 是由Apache组织提供的开源的免费的jsp标签		<标签>

2. 作用:用于简化和替换jsp页面上的java代码		

3. 使用步骤:
	1. 导入jstl相关jar包
	2. 引入标签库:taglib指令:  <%@ taglib %>
	3. 使用标签

4. 常用的JSTL标签
	1. if:相当于java代码的if语句
		1. 属性:
            * test 必须属性,接受boolean表达式
                * 如果表达式为true,则显示if标签体内容,如果为false,则不显示标签体内容
                * 一般情况下,test属性值会结合el表达式一起使用
   		 2. 注意:
       		 * c:if标签没有else情况,想要else情况,则可以在定义一个c:if标签
	2. choose:相当于java代码的switch语句
		1. 使用choose标签声明         			相当于switch声明
        2. 使用when标签做判断         			相当于case
        3. 使用otherwise标签做其他情况的声明    	相当于default

	3. foreach:相当于java代码的for语句

Ajax

1. 概念: ASynchronous JavaScript And XML	异步的JavaScript 和 XML
	1. 异步和同步:客户端和服务器端相互通信的基础上
		* 客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。
		* 客户端不需要等待服务器端的响应。在服务器处理请求的过程中,客户端可以进行其他的操作。

		Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。 [1] 
		通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
		传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页页面。

		提升用户的体验
2.JQeury实现方式
		1. $.ajax()
			* 语法:$.ajax({键值对});
			 //使用$.ajax()发送异步请求
	            $.ajax({
	                url:"ajaxServlet1111" , // 请求路径
	                type:"POST" , //请求方式
	                //data: "username=jack&age=23",//请求参数
	                data:{"username":"jack","age":23},
	                success:function (data) {
	                    alert(data);
	                },//响应成功后的回调函数
	                error:function () {
	                    alert("出错啦...")
	                },//表示如果请求响应出现错误,会执行的回调函数
	
	                dataType:"text"//设置接受到的响应数据的格式
	            });
		2. $.get():发送get请求
			* 语法:$.get(url, [data], [callback], [type])
				* 参数:
					* url:请求路径
					* data:请求参数
					* callback:回调函数
					* type:响应结果的类型

		3. $.post():发送post请求
			* 语法:$.post(url, [data], [callback], [type])
				* 参数:
					* url:请求路径
					* data:请求参数
					* callback:回调函数
					* type:响应结果的类型

Json

1. 概念: JavaScript Object Notation		JavaScript对象表示法
	Person p = new Person();
	p.setName("张三");
	p.setAge(23);
	p.setGender("男");

	var p = {"name":"张三","age":23,"gender":"男"};

	* json现在多用于存储和交换文本信息的语法
	* 进行数据的传输
	* JSON 比 XML 更小、更快,更易解析。

2. 语法:
	1. 基本规则
		* 数据在名称/值对中:json数据是由键值对构成的
			* 键用引号(单双都行)引起来,也可以不使用引号
			* 值得取值类型:
				1. 数字(整数或浮点数)
				2. 字符串(在双引号中)
				3. 逻辑值(true 或 false)
				4. 数组(在方括号中)	{"persons":[{},{}]}
				5. 对象(在花括号中) {"address":{"province""陕西"....}}
				6. null
		* 数据由逗号分隔:多个键值对由逗号分隔
		* 花括号保存对象:使用{}定义json 格式
		* 方括号保存数组:[]
	2. 获取数据:
		1. json对象.键名
		2. json对象["键名"]
		3. 数组对象[索引]
		4. 遍历
				 //1.定义基本格式
		        var person = {"name": "张三", age: 23, 'gender': true};
		
		        var ps = [{"name": "张三", "age": 23, "gender": true},
		            {"name": "李四", "age": 24, "gender": true},
		            {"name": "王五", "age": 25, "gender": false}];
3. JSON数据和Java对象的相互转换

	* JSON解析器:
		* 常见的解析器:Jsonlib,Gson,fastjson,jackson
	
	1. JSON转为Java对象
		1. 导入jackson的相关jar包
		2. 创建Jackson核心对象 ObjectMapper
		3. 调用ObjectMapper的相关方法进行转换
			1. readValue(json字符串数据,Class)
	2. Java对象转换JSON
		1. 使用步骤:
			1. 导入jackson的相关jar包
			2. 创建Jackson核心对象 ObjectMapper
			3. 调用ObjectMapper的相关方法进行转换
				1. 转换方法:
					* writeValue(参数1,obj):
	                    参数1:
	                        File:将obj对象转换为JSON字符串,并保存到指定的文件中
	                        Writer:将obj对象转换为JSON字符串,并将json数据填充到字符输出流中
	                        OutputStream:将obj对象转换为JSON字符串,并将json数据填充到字节输出流中
	                * writeValueAsString(obj):将对象转为json字符串

				2. 注解:
					1. @JsonIgnore:排除属性。
					2. @JsonFormat:属性值得格式化
						* @JsonFormat(pattern = "yyyy-MM-dd")

				3. 复杂java对象转换
					1. List:数组
					2. Map:对象格式一致
  • 12
    点赞
  • 155
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值