JavaWeb笔记
综合笔记
- 其实html是书写代码，跟markdown和Ctex是一样的，只是简单的书写码，但是在书写中需求是将书写的格式与工作的相对应，以提高自己代码的可读性，因此我们才需要学习特定的书写格式和规范；
- 在标签中可以列出属性，这个属性一般以key=value的形式书写，value书写的规范是加“”但是html的格式并不严谨，因此其实很多方法都可以，遵循可读性强的原则，希望加入“”。
- 其实html就是利用标签进行排版的写入式代码；其实就是排版代码，挺简单的；
- 同样的一行文字，可以将多个标签对其进行设置，跟括号的用法其实有点相像；
- 使用工具：Hbuilder，这个工具是使用一个内置的服务器进行展示的，因此有些功能不能实现，注意！
- 观察了一下网页的组成，发现其实大部分的网页都是采用固定大小（像素）的界面组成的，缩小界面其实也就是增加一个滚动条而已，采用百分号时变化浏览器的大小时，会导致界面变化，不推荐使用；
- html、css、javascript这些其实都是浏览器中内置的编译器，从网上服务器读取的文件经过浏览器会翻译成我们需要的形式；因此不是说这些代码不用编译器，而是带有浏览器的话就自带了这些代码的编译器；
- 标签中ype=”text/javascript”表示这个技术是属于什么代码；
- 解释型语言：js也是一种解释型的语言，因此，其解读语言的顺序也是从上往下的方式进行的，如果上面的语言中的某些变量在该行的下面，那么这行代码就会出错，找不到该变量；java就不是解释型的语言，同理，这个东西在python中也是适用的；
- js即含有面向过程的语言，也有面向对象的语言，这是两者的结合，可以说是相当的好理解了；
- 推荐一个网站：http://www.runoob.com
- W3Cschool中，查看html手册的详细使用类型应该是查html4.01手册；
html（w3cschool）
文字
- 没有结束的标签称之为空标签<br/>，这是用于换行，不加/也可以；
- \<html></html>整个的html的代码应书写在该标签内，表示为起始和结束的标签；
- <html></html>子标签:
- head:用来存放当前页面的重要信息,一般不展示在html页面上
- 常见的子标签:<title></title> 网页的标题
- body:要展示的数据放在body中
- 标题标签；hn：自带换行和留空和放大；
- 列于body中；标题大小只有7
- 属性：align：对其方式；格式：<h2 align=”内容”>：
- 字体属性：<font></font>(不赞成使用，了解即可)；
- 字体、字体尺寸、字体颜色： face、size、color
- 大小最大只有7；颜色#+16进制或者英文颜色；字体用写的
- 段落格式<p></p>123
- 加粗<b></b> 斜体<i></i> 水平线<hr/> 换行<br>
图片
- 图片标签<img/> 该标签也是在body下的；
- 常用属性 src：图片路径 alt：替代文字 title：鼠标移上去的显示文字
- width：宽 height：高
- 路径的写法：相对路径./当前目录 ../上一级目录
- 绝对路径：带协议的绝对路径；http//www.baidu.com
- 大小的写法：像素123px；百分比20%；
- 图片的长宽比是确定的，我们改变宽或者高，另外一个会随着变化
- 图片标签<img/> 该标签也是在body下的；
列表和超链接
- 列表标签：有序列表<ol></ol> 无序列表<ul></ul>
- 子标签： <li></li> 列表项
- 属性：type：列表前选项 ；
- 超链接标签：<a></a>；默认当前页面打开
- 属性 href：跳转路径；target：在那里打开，默认_self；#为当前页面
- 列表标签：有序列表<ol></ol> 无序列表<ul></ul>
首页信息的展示（表格的使用，利用百分比进行设置）
- 表格标签：<table></table>
- 子标签： <tr></tr> 行，其含有子标签<td></td> 列 <th></th>表格单元格
- th就是默认加粗居中；一行必须只有一个单元格或者一列；
- table属性：border：边框 像素值 width：百分值 height：用法相同 align：对齐
- 颜色；bcolor：
- tr属性：align：内容对齐 这个在td中设置也可以；
- td属性：colspan：跨列合并：合并的列数；rowspan：跨行合并
- td中可以添加backround背景图片，不能在行中加；
- 子标签： <tr></tr> 行，其含有子标签<td></td> 列 <th></th>表格单元格
- 在表格中还可以嵌套表格，因此，我们将几行的表格嵌套几列的表格，就可以实现网页的排版；
- 转意字符：在html中转意字符为&+;中间+号位置为转意字符所存放的位置；
- 关于一些转意字符，有的浏览器内部处理过了，有些则没有，因此最好采用转意字符进行处理，不然在某些浏览器上的显示效果不好；
- 表格标签：<table></table>
表单标签（相当重要）！
- <form></form> :浏览器端收集用户信息；
- 属性：action：设置信息提交的路径，默认是当前页面；
- 属性：method：表单提交的方式，只要2/7：post和get两者，两者都将属性提交为未知：两者的不同：
- 1.get请求会把所有的参数追加在地址栏上，post请求不会；
- 2.get请求参数大小有限制，post请求参数大小没有限制；
- 3.post相当于get安全些
- 子标签：input：输入框 select：下拉条 textarea：文本域
- input属性：type；type的属性：
- text文本框；password密码框；radio单选框；checkbox复选框；file文件筐；
- submit: reset: button:&nbst;
- 另1：hidden：隐藏区域在页面上不显示，但是提交的时候可以提交
- 另2：img：图片提交，替代submit；
- input属性：name：将几个单选框设置为一组；设置name相同的单选框为唯一单选；同时其也作为保存到服务器的标签；
- input属性：value，作为button按钮的内容，也可以作为其他的名称
- input属性：readonly 设置表单界面只能够只读；disable：禁用，不可用
- select的子标签：option：用法相当于td，其个数表示下拉选项的个数（可以将第二个附属于第一个select的内容）；
- 提交的服务器的内容来说是以key=value的形式提交的；
- 对于文本框密码框文字狱三种是将内容传递过去了
- 对于单选复选框要传递数据，下拉条，则需要设置input的value属性
- 默认值的设置：
- 对于文本框密码框和文字狱设置value值即可；
- 单选框和多选框：添加checked=“cheked”
- 下拉选：添加select=“select”，默认是第一个，因此第一个设置为-请选择-
- input属性：date，这是html自带的属性，但是不一定所有的浏览器都兼容；
- <form></form> :浏览器端收集用户信息；
后台页面（了解）
- 框架集frameset(不能和body共存；建议，谁在上面显示谁)；具体实现：frame
- frameset属性：
- cols：垂直切割；rows：水平切割；设置各部分的百分比；不想计算用*号
- frameset常见子标签
- frame
- frame：具体实现
- 将frameset分割
- 其实frameset也可以作为frameset的嵌套，但是不能成为frame的嵌套；
- 框架中引进的都是html的文件，因此，其实框架中各个部分是引用的单独的网页；
- 在设置打开的位置可以选择target目标，设置frame的name属性，然后设置打开的目标；
- meta：提供网页的元信息；这个东西看一眼就可以了，可以提供可为检索的字母；
- meta chareset=UTF-8：指示浏览器用什么编码形式打开；
css
- 总体框架
- 作用：渲染用的，一般交给前端，因此我们了解即可
- 一般来说主要还是用UImaker？
- 用div+css重新布局
- div：块标签；格式<div></div> （要添加内容）文内的内容全都换行了
- span：行内的块标签<span></span>，标签内容不换行
- css：渲染，让页面更加美观；层别样式表
- css作用：渲染页面，提高工作效率；同一个页面，即开始前端工作，同时进行后端工作；
- css格式：选择器｛属性：值；属性1：值｝
- css和html元素的整合：
- 方式1：内联样式表通过标签的style属性设置样式（仅针对一个标签，不赞成）
- 方式2：内部样式表 在当前页面中使用的样式
- 方式3：外部样式表 有独立的css文件：一般用于制作框架；
- id选择器：html元素中必须引入id属性且有值，css通过#进行引入，后面加入id的值
- class选择器：html中必须由class属性且有值；css通过“.”引入后面家啊如class的值
- 元素选择器：直接用元素（标签）名即可；这里的元素可以理解为标签
- 派生选择器：
- 属性选择器：html中必须有一个属性不论属性是什么且有值；这个属性是可以瞎编的，可以是不存在的属性，其通过元素名【属性=“属性值”】的方式引入；
- 其实这章的东西都是在head中利用style标签对各种东西进行设置渲染，这就是css的作用；
- 选择器小结：
- id选择器：对一个元素（标签）进行设置
- class选择器：一类元素进行设置
- 元素选择器：一种元素（标签）
- 属性选择器：元素选择器的特殊用法
- 后代选择器：选择器1 后代选择器｛…｝在选择器1的条件下找后代的选择器，给满足条件的元素添加样式
- 锚伪类选择器：设置鼠标悬停的颜色；
- a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
- a:link {color: #FF0000} /* 未访问的链接 */
- 多个样式的作用一个元素时：不同的样式会叠加，相同的样式采用最近原则；
- 就是层数最近的样式，在下面所以一般是最下面的那个最近；
- 多个选择器作用与一个元素时：越特殊优先级越高；id的优先级是最高的
- 属性：
- 字体：font-family:设置字体(隶书) 设置字体家族
font-size:设置字体大小
font-style:设置字体风格 - 文本： color:文本颜色
line-height:设置行高
text-decoration: 向文本添加修饰。 none underline将下划线去掉
text-align:对齐文本 - 列表:
list-style-type:设置列表项的类型 例如:a 1 实心圆
list-style-image:设置图片最为列表项类型 使用的时候使用 url函数 url(“/i/arrow.gif”);
- 字体：font-family:设置字体(隶书) 设置字体家族
- 以上为css中的属性，其中对其以及字体的设置与html有所区别，要记忆；
- 背景:
background-color:设置背景颜色
background-image:设置图片作为背景 url - 尺寸:
width:
height: - 浮动:（两个浮动中间需要设置clear）
float: 可选值 left right
浮动可以理解为让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次。
clear:设置元素的两边是否有其他的浮动元素，值为:both 两边都不允许有浮动元素 - 分类:display:设置是否及如何显示元素。
none 此元素不会被显示。
block 此元素将显示为块级元素，此元素前后会带有换行符。
inline 默认。此元素会被显示为内联元素，元素前后没有换行符。
- 背景:
- 框模型：每个元素都有的一个框模型；包括body都有框；
- margin：元素之间的距离
- border：边框大小
- padding：边框和元素的距离；内边距；
- 以上每个属性都有上下左右四个距离，可以单独设置；
- 以上三个属性都有简写的属性，设置大小时可以用上右下左的形式设置各边的距离；
- 若只写一个表示四边使用同一个值；若设置两个则采用对面的数值，三个的同理；
- border还可以设置宽度、颜色、风格；
- solid：实线；dashed虚线：double双实线；
- 利用div和c
- ss也能实现首页的创建；
- 其实body也是一种元素，一般我们的元素都是存放在body中，所以frame和body是冲突的；
- div中不仅可以实现加字，还可以添加图片；
- 要掌握盒子模型，有时候设置字体不成功，可以设置外包的盒子的空间；
javaScript
- 概述
- js是一种脚本语言，内嵌在浏览器，其解释器也是浏览器的一部分
- 弱类型：变量的声明可以不用命名其变量类型；
- 基于：ECMAscript：js基础语法（规定 关键字 运算符 语句 函数等等。。）
- 作用：使页面动起来；修改html页面的内容、样式、表单的验证
- 可以在页面上直接写，也可以单独出去，拱所有人一起使用，js后缀名为.js
- 解释形语言，读取方式为从上到下或者有些特殊的方式；
- 如何与html结合：
- 方式1：直接写：将js代码放在<scrpt>标签中，一般放在head标签中（放哪都行）
- 方式2：通过script标签的src属性导入；
- js是一个事件驱动函数；只有触发事件时采用使用
js变量声明
- var 变量名=初始化值 ；或者var变量名；变量名=初始化值；var可以省略，不建议省略；
- 分号最好也留着；
- 数据类型：原始类型（加undified）和引用类型
- undefined类型的值就是没有初始化的值
- 利用typeof运算符可以判断一个值是否为原始类型，还可判断出属于哪个原始类型；
- typeof 变量|值
- 设置变量可以不用声明变量类型，浏览器提醒报错在F12中；
- null可以认为是对象的占位符，对象为null，typeof的值为object这其实是个错误；
js的事件驱动函数
- 函数定义：方式1：function 函数名（参数）｛函数体｝
- 注意：函数不用写返回值，参数不用声明参数类型，是小写！
- 方式2：var 函数名=function（参数）｛函数体｝
- 常见的内置事件（关于窗口）：
- 单机：onclick
- 表单提交：onsubmit 加在form表单上，其格式为οnsubmit=“return 函数名()”返回布尔类型
- 页面加载：onload
- js事件和函数的绑定
- 方式1：通过标签的事件属性 ；其中onload加在body上；
- 方式2：通过给元素派发事件：doucument.getElementById().onclik=function(){}
- 方式2补充：或者doucument.getElementById().onclik=函数名
- 该关联的方法需要放在a.最下面；因为js也是一种解释形的语言；
- 注意：b.也可以放在onload中；内存中应存在该元素才能派发事件；
- 表单提交不能以post作为method作为内置服务器的提交方式；
- 提交补充的事件：
- 文本框失去焦点：onblur（）；
- 文本框得到焦点：onfocus（）；
- 表单事件：
- onsubmit
- onchange
- 鼠标事件:
- onclik
- ondbclick
- onmousedown:更多事件参考API
- 阻止默认事件的发生：
- 可以利用event的returnValue或者preventDafault阻止原文件的访问；但是具体可能会因为不同浏览器的支持问题出现bug；
- 该功能可以使用到浏览器的事件的传播功能，因为叠加问题，事件可能传播；
- ||与&&对结果的产生的顺序，是怎么判断出来的；
- 一旦前面的表达式能确定最终的结果，那么这个表达式也就不再运算了，否则结果就是最后面这个表达式的结果；
- 范例：event||window.event
- onclick设置在那个界面上，就是在哪个界面上的点击事件；
- 设置一个参数为复选框的选择情况；通过获取的boolean进行设置；
- 下拉选事件：
- onchange：下拉选改变时进行的操作；
- *
- 函数定义：方式1：function 函数名（参数）｛函数体｝
js获取元素
- 方式1：var obj=document.getElementById（“id值”）；相当于获取标签所形成的对象。
- 注意：十分注重内置函数的大小写形式，首字母都是小写的，后面每个单词首写都是大写；以及参数的写入形式；
- 注意：以id获取元素时，需要加引号；
- 该形式获取的是以该元素作为一个对象，面向对象的编程方法；
- 批量获取元素：
- document。getElementByTagName（“标签名”）：通过标签名获取一种元素（多个）
- 该方法获取的方法获取的元素为集合；
- Array：集合-常用属性：
- length：数组的长度
轮播图片-定时弹出广告
- js的对象分为js对象，bw对象还有dom对象；html dom的对象其实就是我们所知html的标签属性；
- 定时器：bom中的window对象的定时器方法
- setInterVal（code,毫秒）：每隔毫秒执行一次函数code，周期
- setTimeout（code,毫秒）:延迟多少毫秒，只执行一次函数code
- 清除定时器：
- clearInterVal（code,毫秒）：每隔毫秒执行一次函数，周期
- clearTimeout（code,毫秒）:延迟多少毫秒，只执行一次函数
- string对象 原始类型的string是一个对象可以调用其方法。substring（0，end）
- 实现图片的轮播，那么要将图片的编号进行编号；
- 问题：这里轮播图片的编号为什么从1开始，但是实际上changimge的时候顺序应该是i++在前面呀；
- 元素对象的标签体：innerHTML:元素呈现出的标签样式；
- 利用元素的对象，可以修改元素（标签）的样式；
- js修改样式：
- 其属性的命名就是将css中的-去掉后面的字第一个字母大写；
- js的语言规则与java的比较相似，规则较为简化
- 其语法规则相当于java+c+html的集合
js运算符和语句
- 运算符：
- 比较运算符：> >= < <=;若两边都是数字和java相同；
- 若一边为数字，另外一边为字符串数字时，将字符串数字转化为数字比较
- 两边字符串时比较ascli
- 一边为数字一遍为字符串无法比较；
- 等性预算符 == ===
- ==：判断值是否相同
- ===：不仅判断值是否相同，还要判断类型是否相同；
- 比较运算符：> >= < <=;若两边都是数字和java相同；
- 语句：
- if语句和java一样
- while for 和java相同
- switch 和java相同（区别：后面可以跟字符串，还可以跟变量）
- 运算符：
js对象
- window.οnlοad==onload;window可以省略，window和body是两个不同的元素；
- 因此window的setIntertime可以直接在界面上写；
- BOM对象（浏览器对象模型指的是整个浏览器）总结
- 所有浏览器都有BOM的五个对象
- window-窗口对象
- location-定位信息（地址栏）
- history-历史
- screen、navigater；客户端屏幕的信息（分辨率啥的），浏览器信息
- window对象：如果运用框架，那么bom会为每个框架创建一个window对象；表示浏览器的窗口
- 常用属性：可以获取其他的四个对象
- window.history等价于history
- 。。。
- 常用方法：
- 消息框：
- alert（）警告框
- confirm（“确定要删除”）确定框 ；返回值：boolean
- prompt（）输入框，返回值：输入内容。
- 定时器
- 打开和关闭：open（url）；close（url）
- 消息框：
- 常用属性：可以获取其他的四个对象
- location对象：location其实是window.location
- 常用属性：
- href：获取或设置当前页面的url；更改href其实就是超链接；
- reload：刷新页面；
- 常用属性：
- history对象：
- back（）：后退
- forward（）：前进
- go（int）：-1就是back；1就是前进；
- 在span中添加font标签也可以添加子标签设置字体样式；
- 在方法中，this指代当前的元素（当前dom对象）；因此可以在方法中以该元素作为参数设置函数；
- doucument:每个载入浏览器的HTML文档都会成为Document对象。这就是html对象；可以获取html里面的元素对象；
- 在该对象的方法中，获取bytagname和name获取的都是元素；
- dom对象：文档对象模型；（doucument树）；
- 节点：文档的接口；里面的内容就是节点的实现类；类比java
- 利用document可以获取其他节点，常用方法（获取对象）
- getElementById（）：获取一个元素
- getElementByName（）：获取多个元素-集合
- 。。。
- 获取节点的value值： dom对象。value
- 获取节点的标签值： dom对象.innerHTML
- 关于innerHTML：其实这是在更改标签在HTML的值，利用该方法可以改变源码。
- 获取设置属性：dom对象.属性
- 对于htmldom的操作若在js或者htmldom查找不到，在xml dom中查找
- 关于元素的操作在xml dom中进行操作；
- appendChild（dom对象）：在一个元素中添加孩子；这是一个剪切方法，将原对象的剪切到新对象去；
- 因此appendChild会导致结果的长度变化，因此更改i的大小值;
- 检验js的编程；将浏览器在点击source中的节点，然后进行测试；
- 数组：new Array（e1，e2…）；非官方直接写【1，1，1】
- 数组的长度是可变的，相当于list；
- 数组可以存放任意值；
- pop：弹出最后一个；push：插入到最后；shift：删除第一个；unshift：插入到首位；
- 打印数组join（分隔符）：将数组元素按指定分隔符打印；
- 拼接数组：concat：连接数组并返回；
- 结构操作：sort：排序，持久化的进行操作，永久改变数组结构
- 反转：reverse，同上，但是反过来
引用类型对象
- 原始类型中的String 、Number、Boolean都是伪对象，可以调用相应的方法；
- Array：数组
- String：语法
- new string（）|string（值|变量）：
- 注意不同方式返回的东西不同，前者为对象，后者为原始类型
- new出来的都是对象；
- 常用属性：
- length：
- 常用方法：
- 查阅Api
- Boolean
- 语法与string相同
- 非0数字非空字符串非空对象转成true；
- *
- Number
- number（A）：A除了boolean和null其他都是NaN;
- Date：使用简单，方法从API查
- RegExp：正则表达式
- 语法
- 直接量语法 /正则表达式/参数
- new RegExp（“正则表达式”，“参数”）；参数没有也可以
- 常用方法：
- test（正则）：检查是否符合正则表达式
- 参数：i忽略大小写； g:全局
- 语法
- Math：使用方法等同于java
- Global：
- decodeURI：解码
- encodeURI：编码，可以将地址栏的内容进行解码和编码；
- number、sreing强制转换数值类型；
- parseInt、paesFloat：转化为数值类型，仅从前面看
- eval：计算js字符串，并将其作为js代码执行；
Jquery
- 在跑程序的时候非常注意是否该对象是jquery的对象，如果不是则不能使用jquery的方法，因此可以利用alert判断其是否为object来断定其对象的属性；
- button标签一般不用，因为很多浏览器不支持，一般使用input按钮代替；
- 不是说用了jquery就可以不用设置函数这些了，只是可以不用命名函数的时候越来越多了，但是如果遇到settimeout这些内置需要设置函数名时，我们仍需要设置函数。
概述
- $ (“选择器”)===>获取元素；封装了getElement的功能；
- js类库：对常用的方法和对象进行封装，方便使用；
- JQuery其实就是将js的一些操作进行封装；
- JQuery是单独的js文件，导入JQuery将其与HTML进行整合
- 通过script的src属性进行导入即可；
- js的版本有很多其中2.10是最新版本，但是其不支持IE7.8.9因此我们采用1.10版本；
- 有mini版本，因此我们工作中用大版本，用mini版本传输到客户端，配置客户环境；
- 开发的时候可以用打文件，也可以用小文件，但是在上线之后一定要切换到mini版本；
- 将js的包装的越多，写的更少。做的更多，写的更少；
- 不仅可以简化获取对象，还有更多的功能；
- jquerry和dom对象的转换：
- dom=>jquery：$(obj);
- 注意：jquerry的方法和属性不要和dom对象的属性方法混合使用；
- jquerry=>dom：方式1：jquery[index]；方式2：jquery.get（index）
- dom=>jquery：$(obj);
事件的使用
- 判断对象：利用$命名以区分是JQuerry对象还是js对象；不这样做也可以，但是要自己清楚哪个是哪个对象；
- 页面加载：
- 方式1：$(function（）｛…｝)
- 方式2：$(document).ready(function（）｛｝)；
- 优点：onload事件一个页面只能使用一个，但是jquery可是使用无数个；
- 派发事件：
- $(“选择器”).click（function（）｛｝）；
- 等价于dom对象.οnclick=function（）｛｝；
- 事件简化为：focus、blur、changge等，把on去掉了；
- 派发事件的外层一般加一个页面加载的事件，原因是什么？
- 是页面加载之后产生的结果需要在页面加载的函数中写出，但是如果是另外的函数经过别的事件调用的话，是不用在页面加载函数内写出的；
- $(“选择器”).click（function（）｛｝）；
- 隐藏或展示：show（毫秒）、hide（毫秒）这会改变标签显示的属性
- 滑入和滑出：slideDown（毫秒）、slideUp（毫秒）
- 淡入淡出：fadeIn(毫秒)、fadeOut（毫秒）
- 切换：toggle（毫秒）slideToggle（）；还有fade+；
- 属性操作：
- 方式1、attr（）：设置获取元素的属性
- 1、attr（“属性名称”）:获取
- 2、attr（“属性名称”，“值”）：设置
- 3、attr（｛“属性名称”：“值”，“属性名称”：“值”
｝）这是一种json的代码形式；
*attr是存在bug的，不完整的，因此任何属性操作请使用prop；
- 删除属性：removeAttr（）：设置同上。
- 添加class属性：addClass（）；其实就是对原本的再次封装
-
- 方式2、prop（）：获取属性较好；这个是在1.6版本中出现的；1.6以后用这个；
- 该方法是attr的补充；其较attr比较好用；
- 方式1、attr（）：设置获取元素的属性
- css操作： 1.8版本以后才有的功能，更改元素的属性；
- 方式1：css（”属性名“）：获取
- 方式2：css（“属性名称”，“值”）：设置
- 方式3：css（｛“属性名称”：“值”，“属性名称”：“值”
｝）同attr的格式差不多；
- 获取位置
- offset（）.left right：距边缘的宽度；
- 宽和高：width和height；
- 遍历数组
- 数组.each（function（）｛｝）；
- $.each（数组，function（）｛｝）；
- function中可以加参数；index和dom；
- 在each
- 设置获取value属性
- jquery对象.val（）：获取
- jquery对象.val（…）：设置
- 获取div的html内容
- jquery对象.html（）：获取
- jquery对象.html（…）：设置
- txt（）也可以获取和设置；两者有什么区别？
- html可以设置在里面添加标签体，但是text不行仅作为普通的字符串；
- html也会获取标签但是text是不行的；
- 文档操作
- 内部插入：
- append：a.append（C）：将c插入到a的内部（标签体）后面
- prepend：a.prepend（C）：将c插入到a的内部（标签体）前面
- appendTo：将a与c 的位置对调；
- prependTo ：同上
- 外部插入
- a.after（c）：将c放在a的后面
- a.before（c）：将c放在a的前面
- a.insertAfter（c）：
- a.insertAfer（c）：
- 删除
- empty（）清空元素
- remove（）删除元素
- 内部插入：
- 表单对象属性过滤选择器
- ：enable 可用的
- ：disavled 不可用的
- ：checked 选中的（针对单选框和复选款）
- ：selected 选中的（针对下拉条）
选择器
- 基本选择器
- ”#id值“、“.class值”、“标签名”、选择所有元素为“*”；
- 获取多个选择器$（“#id值，.class值”）
- 层级选择器
- A B:A的所有B后代
- A>B:A的所有B孩子（不含有孙子）表示仅下一级；
- A+B:A的下一个兄弟（大弟弟）
- A~B：A的所有弟弟
- 基本过滤选择器（对基本选择器的过滤带符号：）
- ：first第一个
- ：last最后一个
- ：odd 索引奇数
- ：even索引偶数
- ：eq（index）指定索引
- ：gt（index）>大于
- ：it（index）<小于
- 其实不应该说是过滤，其实这翻译为选择更好，选取适合条件的；
- 这里的索引是按照从上到下的顺序进行的排列，从0开始；
- 内容过滤
- ：has（‘选择器’）：包含指定选择器的元素
- 注意：里面是单引号；
- 可见过滤选择器
- ：visvle：在页面上展示的元素
- ：hidden：在页面上不展示的元素，一般指input type=”hide“或者是display：none的；
- 属性选择器
- 【属性】
- 【属性=‘值’】其中=可以为！=等，参考API；
- 表单选择器
- ：input 所有的表单子标签 input select textarea button
- 其实3-5都是过滤的方法；
- 基本选择器
validate(JQuery的插件)
概述
- 跟jquery差不多，都是封装好的工具，但是这个工具是在jquery上封装的，因此要导入jquery；
- 导入juery，导入validate；在页面加载成功后对表单进行校验?
- validate其实就是吧表单变化和检查封装成了一个validate的校验方法；
- 方法：$（“选择器”）.validate（｛ruler｝）
- ruler表示校验的规则,这里的选择器选择的都是表单
- $（“选择器”）.validate（｛
ruler：｛
//字段的name属性：“校验器”
//字段的name属性：｛校验器|“值”｝这里的值不一定要加引号，布尔值就不用
｝， message：｛提示信息，name的属性：｛校验器：“提示信息”｝｝
｝）
- validate的使用采用的是name属性标签进行选取表单；
- message可以利用message。js导入进行默认的设置；
- 不同的输入栏以及校验器之间采用逗号进行分离！
- validate有个特性：这是一个强表达性的语言，如果书写产生错误，那么整个的validate都不会运行。
- email在上述的校验中并不齐全，含有@就算正确的；
- 对于单选时，两种选择一是给个默认值，二是在后面加一个label，在label中显示校验的结果；
校验器的类型
- 校验器的使用方法都是相同的：校验器：“值”的形式；
- 校验器的形式可以参考API；
- rules中的校验器后边的数值会装载在一个数组中，在messages的中可以用花括号调用；
- 必填字段：required
- 必须为整数：digits
- 两段必须相同：equalTo
- 最小值：min：这个里面在引号中采用花括号在message中可以动态的索引；
- 区间：range：【a，b】，也可以索引，数值相当于存储在一个数组中，数组第一位是0位；
bootstrap（框架）
概述
- 这是web前端的css框架，主要他还是css做主要的；所以要导入css文件
- 根据不同的设备创建不同页面程序，创建响应式页面；
- 不同的上网端形成不同的样式；
- 响应式的页面：适配不同的上网设备，展示不同的样式；
- 但是taobao导入bootstrap.js是采用滚动条的形式呈现的；
- Web前端的css框架；样式做好了，拿来用就好了。。那我们自己做框架行不？感觉用别人的框架好low啊；
- 集合了html/css/js为一家
- bootstrap的API在其官网上查看，没有现成的API可查；
- bootstrap一般来说我们不用记住其使用的方式，仅需要在其官网上找到相应的内容，然后复制即可；
- 兼容性不太好，不适合于IE6.7.8播放动画效果有问题，兼容性有问题；
入门
- 下载bootstrap，http://www.bootcss.com版本bootstrap3
- 1.导入bootsrap.css
- 2.导入jquery.js
- 4.添加meta标签，支持移动设备；width=设备，是否支持缩放；
- width=device-width
- initial-scale：1为按实际尺寸显示无缩放
- user-scalabel：是否对页面进行缩放，no禁止缩放；
- 5.将所有的内容放入布局容器中
- bootstrap为页面包裹一个container容器，两个作此用处的类：
- 方式1： <div class=“container”></div>
- 方式2： <div class=“container-fluid”></div>
- 即想要使用bootstrap样式的话，必须将内容放在以上两种的div中；
- 栅格系统
- bootstrap将每一行分成了十二份；
- 媒体查询功能：
- 超大电脑，每行显示6个，屏幕分辨率>1200； 使用：col-lg-2
- 屏幕小点，每行显示四个，992<分辨率<1200； 使用col-md-3
- 再小些，每行显示2各，768<屏幕分辨率<992； 使用col-sm-6
- 继续小，每行显示1个，屏幕分辨率<768；使用col-xs-12
- 这里前面的col-XX表示的是显示的时候分辨率的大小，后面的数字表示对应这个分辨率时，这个标签所占的大小（十二份中占几份）；
- 所以一般来说都是越小的分辨率所占的份数越多；
- bootstrap所用的都是标签的class属性；
- bootstrap的组成部分
- 全局css样式
- 其实该结果就是标签中提供一个class样式，而这个样式在bootstrap的文件中已经定义好了；
- 其实就是把各种标签设置不同的class属性。
- 各种样式可以参考官网和菜鸟联盟；
- 全局的css样式，即使再外置的一个文件中导入了css样式，直接导入该文件后即可使用样式；
- css样式中，元素中如果class中定义了bootstrap的样式，那么放不放入container中，都会产生bootstrap样式；
- 但是如果想要排版符合container的话，最好还是放入div中；
- 因此可以得出结论：bootstrap的起始就是body中引入一个div元素；
- 组件：
- 组件中的role元素表征的是其元素的子元素的样式；
- div共和nav元素差不多，导航条必须使用nav或者div添加.nav元素；
- class内输入样式的名字，这是booststrap的通用操作方法；
- class中可不仅只输入一种样式，可以输入多种样式，其都能呈现；
- 路径导航：面包屑；
- 这里的组件是自带响应效果的，不同的屏幕分辨率响应都不同；
- js插件：
- 标签页，轮播图等
- 全局css样式
- 实际案例
- 当屏幕为小屏幕时，某些部分被隐藏掉；
- 工具：响应式工具：visible：设置不同的显示率显示不同的东西
MySql
- 关系型数据库、非关系型数据库
- 在dos窗口中启动mysql：
- 需要将路径改为安装数据库的bin目录下，跟java的环境设置差不多；
- 常见的软件名：Mysql(oracle open source)、Oracle(Oracle large-pay,one year pay);
- DB2(IBM same to Otacle),bank most use
- sqlserver(micresoft little-use) sybase(no use sybase);
- 服务器：安装了数据库管理系统的计算机（软件服务器）。
- 选择数据库之后，才可以进行增删改查的工作；
- sql语句中，其实也可以将数据库的表名进行更改，
- 查看表结构 desc 表名；前提是进入数据库；
- DDL：增删改；但是alter一般不用；
- DML：数据操作语言；主要就是数据表的填写；
- 注意插入的字段类型为数字，可以省引号，但是最好还是加引号
- 起始DML语句主要就是用于填表的，上面的DDL是对表的操作；
- 主要的操作就是insert和update还有delete；
- DQL：数据查询语言；只有一个关键词：select
- 可以在select中进行操作，然后还可以改列名的名字，但是其对数据库不进行修改；仅改变显示的结果；
- 更改列名主要是在结果中显示我们想要让人理解的名称；
- 数据表中，每一行被称为一条记录，每一列称为一个字段！
- 数据表结构：表示数据表的有多少列，每列的数据类型的信息；
- where和having的区别：
- where是对分组前的数据进行过滤，having是对分组后的数据进行过滤；
- where后面不能使用聚合函数，having可以；
- mysql的数据类型：
- java———-mysql
- byte———tinyint
- short——–smallint
- int————–int(★)
- long————bigint
- char/String——varchar(★)|char
varchar:可变长度 mysql的方言 varchar(20): 存放abc 只会占用三个
char:固定长度 char(20) 存放abc 占用20个 - boolean ———-tinyint|int 代替
- float|double——-float|double
- 注意:double(5,2):该小数长度为5个,小数占2个 最大值:999.99
- java.sql.Date——–date 日期
- java.sql.Time——–time 时间
- java.sql.Timestamp—–timestamp(★) 时间戳 若给定值为null,数据库会把当前的系统时间存放到数据库中
- datetime(★) 日期+时间
- 约束
- 主键约束：被修饰的字段唯一非空，一张表只能有一个主键，主键可以包含多个字段；
- 多个字段被定为主键时，被称为联合主键，只有两者一样时才称为时一样的；
- 唯一约束：如名所示，注意：其对null值无作用。使用一个约束定义多个字段时，都是联合约束；
- 这个不太重要，我们一般使用java进行数据的唯一控制；利用java检索；
- 非空，较为简单；（了解）
- 外键：主表中不能删除从表中含有的数据；
- 从表总不能添加主表中不存在的数据；
- 主键约束：被修饰的字段唯一非空，一张表只能有一个主键，主键可以包含多个字段；
- trunnate：这个相较于delete全表来说要好。delete有一个全局的变量，但是trunnate较为干净；
- aute_increasement:被修饰的字段支持自增，即一般为int
- 注意：被修饰的字段必须为key，一般为主键；
- 关系-实体：一对多：用户和订单 分类和商品
- 多对多关系：订单和商品 学生和课程
- 一对一的关系： 丈夫和妻子的关系
- ER图：描述表于表之间的关系，也就是实体与实体之间的关系；
- 实体用方框表示，圆形表示属性，菱形表示关系；一就是1，多就是n；
- 一对多的关系，一方称为主表，多方称之为多表或者从表；
- 为了表示一对多的关系，一般会在多表的乙方添加一个字段，字段名称自定义（建议：主表名称_id）
- 字段类型一般和主表的类型保持一致，我们称之为外键；
- 外键可以保证数据的有效性和完整性，防止垃圾数据；
- 开发中处理一对多:★
- 在多表中添加一个外键,名称一般为主表的名称_id,字段类型一般和主表的主键的类型保持一致,
- 为了保证数据的有效性和完整性,在多表的外键上添加外键约束即可.
- 开发中处理多对多:★
- 引入一张中间表,存放两张表的主键,一般会将这两个字段设置为联合主键,这样就可以将多对多的关系拆成两个一对多了
- 为了保证数据的有效性和完整性需要在中间表上添加两个外键约束即可中：
- 利用sqlyog的架构设计器可以看到表之间的关系；
- 多表连接查询；
- 多表的连接查询，就是将两个表的内容查询结果进行拼接，可以将拼接的结果进行判断显示；
- 外连接会展示一个表的全部数据；外联结可以做内链接的事情；
- 左外连接和右外连接是可以相互转换的；
- 用as可以给数据表字段取别名；
- 子查询，将一张查询表作为临时表；
Hbuilerd使用小结（w3cschool）
- 快捷键
- ctrl+d是删除
- ctrl+f是复制
- 可以用取色小工具进行取色
- ctrl+shift+/就是把一行的内容注释掉；
691
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
