本帖最后由 李迪13524 于 2018-1-23 16:29 编辑
html+div+css+js+jq+sql
Day01Html（2018-1-12）
第一章、 HTMl概述、
1.1、HTML—超文本标记语言
标记语言： 指的是通过一组标签的形式描述事物的一门语言
1.2、HTML作用：
HTML是用来制作页面（.静态页面）
1.3、HTML在什么地方使 用
在设计网站页面的时候使用
1.4、HTML的使用
HTML文件的创建
一个HTML文件，扩展名是.html或htm结尾
1.5、HTML的标签结构
根标签<html></html>
<head></head> html的头标签
<body></body>
1.6、HTML的字体标签
<font>标签：html的字体标签
<font>标签的属性
<font 属性名=“属性值” 属性名=“属性值”></font>
Color属性：字体的颜色
英文单词设置：black，red，green，blue
使用16进制数设置：#FFFFFF，
Size 属性: 字体的大小
Face属性：是什么字体
1.7、HTML的排版标签
标题标签：h标签<h1>到<h6>
<h1>一级标题</h1>
<h2>二级标题</h2>
段落标签：<p></p>
字体加粗标签<b></b>
字体斜体标签<i></i>
字体下化线<u></u>
居中<center></center>
从别的地方复制过来的文字，不被转义就用:<pre></pre>（原生标签）
<hr/>横线
第2 章、网站图片页面显示
2.1、图片标签<img>
属性： src：图片来源
Width：图片的宽度
Height：图片的高度
Alt：图片找不到显示的内容
第3章 、列表页面的显示
3.1、列表标签（有序列表，无序列表）
有序列表<ol>
<li></li>
</ol>
属性：type：1： 数字字符 a: 英文字符 i: 罗马字符
Start的属性只对数字有效果（从几开始）
无序列表<ul>
<li></li>
</ul>
属性：type disc:实心点 circle：空心圆 square：方块
列表标签显示在一行：display:inline;
.3.2、HTML的超链接标签<a>
属性： href :链接的路径
Target：打开的方式
Target=”_self”:在自身页面打开
Target=“-blank”：在新打开一个窗口
Target=”_parent”
Name：跳转到名字为什么什么的页面
第4 章：网站首页的显示
4.1、表格标签
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
属性:
width :表格宽度
height :表格高度
border :边框
align :表格水平位置:
* left：居左
* center：居中
* right：居右
<td>的属性:
* colspan=”合并列数”
* rowspan=”合并行数”
4.2、HTML的表单标签（<form>）
HTML的表单标签：<form>
* 常用属性:
* action属性:提交的路径.默认提交到当前页面
* method属性:请求的方式.GET和POST.默认是GET.
***** GET方式和POST方式的区别?
* GET :数据会显示到地址栏中.GET方式提交是有大小的限制.
* POST :数据不会显示到地址栏中.POST方式提交的是没有大小限制.
Get和post的区别：
1、数据都展示到地址栏
2、有大小限制
3、get方式数据是在请求行中
Post
1、 数据不会展示在地址栏
2、 数据没有大小限制
3、 Post的数据是在请求体中
HTML中表单元素：
* <input type=”text”> :文本框.
* 常用属性:
* name :表单元素的名称.必须有name属性，然后后台才可以接收数据.
* value :文本框的默认值.
* size :文本框的长度.
* maxlength:文本框输入的最大长度.
* readonly:只读文本框.
* <input type=”password”> :密码框.
* 常用属性:
* name :表单元素的名称.必须有name属性，然后后台才可以接收数据.
* value :密码框的默认值.
* size :密码框的长度.
* maxlength:密码框输入的最大长度.
* <input type=”radio”> :单选按钮.
* 常用的属性:
* name :表单元素的名称.必须有name属性，然后后台才可以接收数据.
* value :单选按钮的默认值.
* checked:单选按钮默认被选中.
* <input type=”checkbox”> :复选按钮.
* 常用的属性:
* name :表单元素的名称.必须有name属性，然后后台才可以接收数据.
* value :单选按钮的默认值.
* checked:单选按钮默认被选中.
* <input type=”button”> :普通按钮.没有任何功能的按钮.
* <input type=”submit”> :提交按钮.
* <input type=”reset”> :重置按钮.
* <input type=”file”> :文件上传的表单项.
* <input type=”hidden”> :隐藏字段.
* <input type=”image”> :图片按钮
* <select> :下拉列表.
* <textarea> :文本
第5章HTML5的扩展的表单标签
<input type=”email”> 邮箱格式
<input type=”date”> 日期格式
<input type=”number”> 数字格式
<input type=”color”> 颜色格
Day02(div+css)(2018-1-13)
第1 章HTML的框架标签
1.1、 框架结构标签<frameset>
标签与body标签是冲突，有frameset就可以没有body
属性： rows 横切
Cols 竖切
使用<frame>标签 frame代表切分的每个部分
1.2、特殊字符标签
；空格
> <
< >
第2章 div+css
2.1Div块标签
<div></div>默认一个div独占一行
<span></span> 默认在同一行
2.2、css:层叠样式表
Css的基本语法
通常包含2个部分：一个选择器，一个声明
* 选择器{属性:属性值;属性:属性值...}
02.3、css的引入样式
行内样式：直接在HTML的元素上使用style属性设置CSS.
<h1 style="color:red;font-size:200px ;">标题</h1>
页面内样式：在HTML的<head>标签中使用<style>标签设置CSS.
<style>
h1{
color:blue;
font-size: 40px;
border：1px soild green; soild实线，线的颜色是绿色
}
</style>
外部样式:单独定一个.css的文件.在HTML中引入该CSS文件. rel="stylesheet"指定是样式表
<link href="../../css/demo1.css" rel="stylesheet" type="text/css" />
2.4、Css选择器（元素选择器，ID选择器， 类选择器）
元素选择器：
div{
border:1px solid blue;
width:40px;
height:45px;
}
ID选择器:
#d1{
border:2px solid red;
}
类选择器：
.divClass{
border:2px solid yellow;
}
2.5、其他选择器(属性选择器、后代选择器、并例选择器、子元素选择器)
属性选择器
<style>
input[type="text"]{
background-color: red;
}
</style>
后代选择器
div span 查找的是所有div中的所有的span元素.
h1 strong{
color:red;
}
<h1>
This is <strong>very</strong> <strong>very</strong> important.
</h1>
<h1>This is
<strong>very</strong>
<em>really
<strong>very</strong>
</em>
important.
</h1>
并例选择器
input【type=“text”】，input【type=“password”】{
border：1px
}
子元素选择器
div > span找这个div中的第一层级的span元素.
h1 > strong{
color:red;
}
<h1>
This is <strong>very</strong> <strong>very</strong> important.
</h1>
<h1>This is
<strong>very</strong>
<em>really
<strong>very</strong>
</em>
important.
</h1>
2.6、display:none和 visibility:hidden的区别
Display消失了但是位置也消失
VISibility 消失了但是位置还占有
display:inline:用于列表排列在一行
2.7、/*这个可以让div自己去根据屏幕的大小去居中显示*/
margin: 0 auto;
2.8、placeholder属性提供一种提示（hint），描述输入域所期待的值
<td>用户名：</td>
<td><input type="text" name="username" placeholder="请输入用户名" /></td>
2.9、去除<a>标签的下化线（Text-decoration）
规定添加到文本的修饰 Text-decoration：none 无下化线
3.0超链接的伪类（设置鼠标悬停的炫酷）
/*鼠标移动到连接上*/
a:hover {
background: red;
}
3.1、css样式（字体背景、文本、列表）：css的声明
背景：
文本：
字体
列表
3.2、正则的匹配:
JS中有两种匹配正则的方式:
* 使用String对象中的match方法.
* 使用正则对象中的test方法.
<script>
// alert("Hello!");
function checkForm(){
// 获得文本框的值：
var username = document.getElementById("username").value;
// var val = username.value;
// alert(username);
if(username == ""){
alert("用户名不能为空！");
return false;
}
// 校验密码：
var password = document.getElementById("password").value;
if(password == ""){
alert("密码不能为空");
return false;
}
// 校验确认密码:
var repassword = document.getElementById("repassword").value;
if(repassword != password){
alert("两次密码输入不一致！");
return false;
}
// 校验邮箱:
var email = document.getElementById("email").value;
// JS校验正则表达式就有两个方法:String对象中的match方法,一个是正则对象中的test方法.
// str.match("正则表达式"); 正则.test("字符串");
if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(email)){
alert("邮箱格式不正确！");
return false;
}
}
</script>
Day03javascript（2018-1-15）
第一章、js的概述
1.1、什么是js：
运行在浏览器的脚本语言
什么是脚本语言：可以运行在其他语言中间的语言；
1.2、javascript的组成（ECMAScript(基本语法)、DOM（文档对象）、BOM（浏览器对象））
ECMAScript：JavaScript的基本的语法：核心
BOM：Browser Object Model ：浏览器对象模型
DOM：Document Object Model ：文档对象模型
其他的脚本语言：
JavaScript,ActionScript,Flex
JS的用途：
使页面更加丰富,使页面动起来！！！
1.3、js基本语法
① 区分大小写
② 弱变量类型语言：（与Java不同）
* Java
* int i = 3;
* String s = “abc”;
* JavaScript:
* var i = 3;
* var s = “abc”;
③ 分号可有可无：
④ 变量命名：
1.4、js的数据类型
JS将数据类型分成两类：
* 原始类型：
* undefined：未定义类型
* boolean:布尔类型
* number:数字类型
* string:字符或字符串.
* null：空
* 引用类型：
* 对象类型.对象类型默认值是null.
1.5、js的运算符
JS中的运算符与Java中基本一致！
JS中有一个 === 全等于.全等于是类型和值都一致的情况下才为true.
1.6、js的语句
JS中的语句与Java的语句一致！
1.7、js的通常开发的步骤
JS通常都由一个事件触发.
触发一个函数,定义一个函数.
获得操作对象的控制权.
修改要操作的对象的属性或值.
定义函数:
* function 函数名称(){
// 函数体
}
* window.onload = function(){
}
常用事件：onclick,ondblclick,onmouseover,onmouseout,onload...
1.8、js的引入方式（2种）
通常两种方式：
一种：页面内直接编写JS代码,JS代码需要使用<script></script>.
二种：将JS的代码编写到一个.js的文件中,在HTML中引入该JS代码即可.
将js的代码定义成一个文件引入：
<script src="../js/check.js"></script>
获得页面中的元素:
* document.getElementById(“”);
正则的匹配:
JS中有两种匹配正则的方式:
* 使用String对象中的match方法.
* 使用正则对象中的test方法.
1.9、用户名、密码、邮箱的校验
<script type="text/javascript">
/*通过function关键字来定义函数*/
function checkForm(){
//找到我们想要操作的元素,找元素的动作需要交给DOM对象中docment来去获取
var username = document.getElementById("username").value;
if(username == ""){
alert("对不起,用户名不能为null");
/*这个返回值一定要加,因为我们onsubmit的事件就是看这个返回值,默认返回的是true*/
return false;
}
var email = document.getElementById("email").value;
/*判断email是否符合正则*/
if(!email.match('[0-9]{6,10}')){
alert("对不起不符合规则");
return false;
}
}
</script>
<body>
<form method="get">
<table style="border: 1px solid blue;" align="center" cellspacing="10px">
<tr>
<td>用户名:</td>
<td><input type="text" name="username" id="username"></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" name="password" id="password"></td>
</tr>
<tr>
<td>邮箱:</td>
<td><input type="text" name="email" id="email"></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="提交"></td>
</tr>
</table></form>
2.0、使用js完成图片滚动的效果（使用setinterval和settimeout）
<script type="text/javascript">
window.onload = function(){
var i = 1;
/*设置定时*/
setInterval(function(){
i++;
/*需要不断的改变img的src*/
/*获取到img*/
if(i==3){
i=1;
}
var img1 = document.getElementById("img1");
img1.src = "../img/"+i+".png";
},3000);
}
</script>
<body>
<img id="img1" src="../img/1.png" width="100%" />
</body>
2.1、HTML的window对象
* setInterval(); :每隔多少毫秒执行某个表达式.
* setInterval(“change()”,5000);
* setTimeout(); :隔多少毫秒执行一个该表达式.
* setTimeout(“change()”,5000);
清除定时的方法
2.2、定时弹广告
<script>
//setTimeout 执行一次之后就不会再出现了,不用清除
var time;
window.onload = function() {
//先显示图片的方法
//页面加载的时候需要设置定时
time = window.setInterval("show();", 3000);
}
function show() {
var im = document.getElementById("imggg");
im.style.display = "block";
window.clearInterval(time);
window.setInterval("hide();", 3000);
}
//隐藏广告的方法
function hide() {
var im = document.getElementById("imggg");
im.style.display = "none";
window.clearInterval(time);
}
</script>
<body>
<!--图片是隐藏的-->
<img style="display: none;" id="imggg" src="gg.jpg" width="100%" />
</body>
2.3、还剩下几秒，跳转到哪个页
<script>
/*window.onload是页面加载完成后,才会触发,这个时候我们找标签,肯定能够找到
script哪里都可以放,但是我们要知道放在上面和下面的区别
*/
var id;
var i = 4;
window.onload = function() {
//设置一个定时,我们知道每次设置完定时,我们系统会给这个一个唯一的id,这个id用来结束定时用的
id = setInterval(function() {
//document.getElementById("demo").innerHTML
document.getElementById("f").innerHTML = i;
if(i == 1) {
//清除定时
clearInterval(id);
//需要跳转到主页
/*跳转的动态方式使用location的href可以完成*/
location.href = "../伪类效果/伪类效果.html";
}
i--;
}, 1000);
}
function change() {
//document.getElementById("demo").innerHTML
document.getElementById("f").innerHTML = i;
if(i == 1) {
//清除定时
clearInterval(id);
}
i--;
}
</script>
<body>
还剩下
<font id="f">5</font>秒,回到主页面;
</body>
2.4、54321间隔3秒出现
//定时出现54321
/*var id = setInterval("change();", 1000);
var i = 5;
function change() {
alert(i);
if(i == 0) {
window.clearInterval(id);
}
i--;
}*/
2.5、innerHTML和innerText的区别
innerHTML：获取元素最简单方法
innerText：会将网页标签一起取出
2.6、伪类的效果（onmouseover onmouseout）
<style type="text/css">
div{
text-align: center;对齐元素中的文本
line-height: 100px; 设置行高
margin:10px;外边框
width: 100px;
height: 100px;
background: red;
color: white;
border-radius: 50px;使用图片来创建边框
float: left;浮动
}
</style>
</head>
<script type="text/javascript">
function change1(div1){
//document.getElementById("div1").style.background = "green";
div1.style.background="green";
}
function change2(){
//document.getElementById("div1").style.background = "red";
div1.style.background="red";
}
</script>
<body>
<!--需要给每个div设置鼠标悬停和鼠标离开的事件-->
Onmouseover鼠标指针移动到指定对象上发生
Onmouseout鼠标离开
<div id="div1">百度</div>
<div>新浪</div>0
. <div>搜狐</div>
<div>腾讯</div>
</body>
2.7、点击事件（onclick事件）
<script>
function chen() {
//获取ID为div的控制权
var v1 = document.getElementById("div1");
v1.innerHTML = document.getElementById("but");
// v1.innerHTML="我爱小可爱";
// v1.innerText="点我，出现奇迹";
// var but = document.getElementById("but");
// var a = but.innerHTML;
// v1.innerHTML = a;
v1.style.background = "blueviolet";
}
</script>
<body>
<button id="but">点我，出现奇迹</button>
<div id="div1"></div>
</body>
2.8、js中的BOM对象
* alert(); --弹出对话框
* setInterval();每隔多长时间就出现一次结果
* setTimeout();隔多长时间后，出现某某结果
* clearInterval();清除定时
* clearTimeout();清除定时
* confirm(); --弹出一个确认窗口
* prompt(); --弹出一个可输入的对话框
* open(); --打开一个新窗口
Navigator ：包含的是浏览器的信息.
Screen:用来获得屏幕信息:
History:浏览器的历史对象:
Location:包含URL信息的对象
2.9、js事件的总结
* onload :页面加载事件
* onclick :点击触发事件
* onsubmit :表单提交事件
* onfocus :获得焦点
* onblur :失去焦点
* onchange :下拉列表改变事件.
* ondblclick:双击某个元素的事件.
键盘操作事件:
* onkeydown :事件会在用户按下一个键盘键是发生
* onkeyup :事件会在键盘按键被松开是发生
* onkeypress:事件会在键盘按键被按下并释放一个键是发生
鼠标操作事件：
* onmousemove：事件会在鼠标指针移动时发生
* onmouseout：事件会在鼠标指针离开指定对象时发生
* onmouseover：事件会在鼠标指针移动到制定的对象上时发生
* onmousedown：事件会在鼠标按键被按下时发生
* onmouseup：事件会在鼠标按键被松开是发生
Day04(2018-1-16)js的高级
第一章js完成注册页面表单提示及校验（js的输出、js的事件）
1.1、js的输出
* document.getElementById(“”).innerHTML=”HTML的代码”;
* document.write(“”);
1.2、js的事件总结
* onfocus :获得焦点.
* onblur :失去焦点.
* onsubmit :提交的时候.
Onload :页面加载事件
Onclick :点击事件
Onchange：下拉列表改变事件
Ondblclick:双击摸个元素的事件
键盘操作事件：
Onkeydown: 事件会在用户按下一个键盘键是发生
Onlkeyup: 事件会在键盘按键被松开是发生
Onkeypress: 事件会在键盘按键被按下并释放一个键是发生
鼠标操作事件：
Onmousemove: 事件会在鼠标指针移动时发生
Onmouseout: 事件会在鼠标指针离开指定对象时发生
OnMOusedown: 事件会在鼠标按键被按下时发生
Onmouseup: 事件会在鼠标按键被松开是发生
1.3、js完成注册页面表单提示及校验2
<script>
//有参数的 按钮方法里面需要传参数
function tip(id, content) {
document.getElementById(id).innerHTML = "<font color='red'>"+content+"</font>";
}
/*无参的方法里面要注意方法名必须不一样，按钮事件触发的事件不需要传参数
*
* function tip(){
document.getElementById("usenamespan").innerHTML= "<font color='red'>用户名必须由数字和字母组成</font>";
}
function tipa(){
document.getElementById("passwordspan").innerHTML="<font color='red'>密码必须是6 位</font>";
}*/
//失去焦点的时候
function shi(id, Counter) {
if(document.getElementById("username").value==""){
document.getElementById("usenamespan").innerHTML="<font color='red'>用户名不能为null</font>";
}
}
</script>
1.4、js获得表格的行数
* 获得到控制的表格元素:
* var tab1 = document.getElementById(“tab1”);
* var len = tab1.rows.length;
1.5、js完成后台数据展示隔行换色（js获得表格的行数）
<script>
window.onload = function() {
//获得要操作的对象的控制权
var tb1 = document.getElementById("tb1");
//遍历每一行
for(var i = 1; i < tb1.rows.length; i++) {
//判断=1的时候第一行的表头颜色为红色
if(i==1){
tb1.rows.style.background ="red";
}else{
if(i % 2 == 0) {
//偶数行
tb1.rows.style.background = "palevioletred";
}else{
//奇数行
tb1.rows.style.background ="darkcyan";
}
}}
}
</script>
1.6、表格中的tbody和 thead标签
function changeColor(){
获取thead中的那一行然后进行改变颜色
var th1 = document.getElementById("th1");
th1.style.background = "blue";
// 获得操作的表格的控制权:
var tab1 = document.getElementById("tab1");
// 获得tbody中的所有的行.
var len = tab1.tBodies[0].rows.length;
for(var i = 0;i< len ;i++){
if(i % 2 == 0){
tab1.tBodies[0].rows.style.backgroundColor = "green";
}else{
tab1.tBodies[0].rows.style.backgroundColor = "gold";
}
}
}
1.7、js完成复选框的全选的效果
2种方式：
⑴、function getall(){
找到所有的c1
var c1=document.getElementsByName("c1");
//遍历所有的c1的checkBox,让其状态和ch的状态一样
for (var i=0; i<c1.length;i++) {
c1.checked=document.getElementById("ch").checked;
}
}
⑵、function checkAll(){
// 获得上面的复选框
var selectAll = document.getElementById("selectAll");
// 判断这个复选框是否被选中.
var ids = document.getElementsByName("ids");
if(selectAll.checked == true){
// 上面复选框被选中：获得下面所有的复选框,修改checked属性
for(var i = 0 ;i<ids.length;i++){
ids.checked = true;
}
}else{
// 上面复选框没有被选中：获得下面所有的复选框,修改checked属性
for(var i = 0 ;i<ids.length;i++){
ids.checked = false;
}
}
}
第二章、 js中的DOM
2.1、Dom概述、
DOM：Document Object Model：文档对象模型.
将一个HTML的文档加载到内存形成一个树形结构,从而操作树形结构就可以改变HTML的样子.
DOM的使用：
知道document，element，attribute中的属性和方法
2.2、Document的常用的操作（获得元素）
⑴、获得元素：
* document.getElementById(); -- 通过ID获得元素.
* document.getElementsByName(); -- 通过name属性获得元素.
* document.getElementsByTagName(); -- 通过标签名获得元素.
⑵、创建元素：
* document.createElement(); -- 创建元素
* document.createTextNode(); -- 创建文本
⑶、添加节点：
* element.appendChild(); -- 在最后添加一个节点.
* element.insertBefore(); -- 在某个元素之前插入.
⑷、删除节点
* element.removeChild(); -- 删除元素
2.3、【使用DOM完成对ul中添加一个li元素】
*我们要找控件可以，但是必须保证页面加载完*/
window.onload = function(){
var u1 = document.getElementById("u1");
var lie = document.createElement("li");
var txt = document.createTextNode("三亚");
lie.appendChild(txt);
u1.appendChild(lie);
}
2.4、二级联动
// 定义数组：二维数组：
var arrs = new Array(5);
arrs[0] = new Array("杭州市","绍兴市","温州市","义乌市","嘉兴市");
arrs[1] = new Array("南京市","苏州市","扬州市","无锡市");
arrs[2] = new Array("武汉市","襄阳市","荆州市","宜昌市","恩施");
arrs[3] = new Array("石家庄市","唐山市","保定市","邢台市","廊坊市");
arrs[4] = new Array("长春市","吉林市","四平市","延边市");
function changeCity(value){
// 获得到选中的省份的信息.
var city = document.getElementById("city");
// 清除第二个列表中的内容:
for(var i=city.options.length;i>0;i--){
city.options = null;
}
// city.options.length = 0;
// alert(value);
for(var i= 0 ;i< arrs.length;i++){
if(value == i){
// 获得所有的市的信息.
for(var j=0;j<arrs.length;j++){
// alert(arrs[j]);
// 创建元素：
var opEl = document.createElement("option");// <option></option>
// 创建文本节点:
var textNode = document.createTextNode(arrs[j]);
// 将文本的内容添加到option元素中.
opEl.appendChild(textNode);
// 将option的元素添加到第二个列表中.
city.appendChild(opEl);
}
}
}
}
2.5、js的内置对象( Array、boolean、Date、Math、String、)
⑴Array:
⑵、Boolean:
⑶、Date：
* http://www.baidu.com?time=new Date().getTime();
⑷、Math对象：
⑸、String对象：
* charAt();
* indexOf();
* lastIndexOf();
* split();
* replace();
* substring();
* substr();
2.6、js的全局函数：
* parseInt();
* parseInt(“11”);
* parseFloat();
* parseFloat(“32.09”);
* 编码和解码的方法：
// 解码
* decodeURI();
* decodeURIComponent();
// 编码
* encodeURI();
* encodeURIComponent();
eval函数：
* 将一段内容当成是JS的代码执行.
//var sss = “alert(‘aaaa’)”;
//eval(sss);
2.6、全局函数设置点击图片的宽度变大
function getman() {
var img1 = document.getElementById("im1");
var imgw = img1.style.width;
console.log(imgw);
imgw=parseInt(imgw);
img1.style.width = imgw + 10 + "px";
}
2.7、随机数
<script>
/*[0,1)*/ // 0-2; 只要整数
var num = Math.random()*2;
num = Math.round(num);//四舍五入后的值
alert(num);
</script>
Day05(2018/1/18)Jquery
第一章、 Jquery的概述、
1.1、 什么是jQuery
jQuery是js的框架（js的类库），对传统的js进行了封装
现在企业的开发中往往不会使用传统的js进行开发，通常都会使用js框架进行开发
1.2、 jQuery常用的框架
JQuery,ExtJS,DWR,Prototype...
1.3、jquery的使用
学习jQuery的语法
第二章、jQuery入门
引入jQuery的js的文件<script src="../../js/jquery-1.11.3.min.js"></script>
Jquery的入口函数： 传统的js的方式，页面加载的事件只能执行一次
/*window.onload = function(){
alert("aaa");
}
Jquery的方式：等页面的DOM树绘制完成后进行执行，可以执行多次，效率比window.onlode要高，
Window.onlode: 相当于页面加载的事件,而且之执行一次
$(function(){
alert("aaa");
});
2.1、总结：jq和js的区别
1、jq的入口函数，比js的入口效率高，并且可以执行多次
2、jq对象和js对象的区别： jq是一堆的js;
3、注意事项：js对象只能使用js的方法和属性
Jq对象只能使用jq的方法和属性
4、相互转换：jq-------js:通过数组的角标获取 js---jq:通过￥（）这个将js括起来即可实现
2.2、js和jq的转换
window.onload = function(){
// 传统JS方式：
var d1 = document.getElementById("d1");
// JS对象的属性和方法:
// d1.innerHTML = "JS对象的属性";
// d1.html("aaaaaa");
// 将JS对象转成JQ的对象.
$(d1).html("JS对象转成JQ对象");
}
$(function(){
var $d1 = $("#d1");
// $d1.html("JQ对象的属性");
// 转成JS的对象:
// 一种方式
// $d1[0].innerHTML = "将JQ的对象转成JS对象";
// 二种方式:
$d1.get(0).innerHTML = "将JQ的对象转成JS对象的方式二";
});
2.3、jq效果操作（显示和隐藏 ）
* show();
* 使用一:Jq对象.show();
* 使用二:Jq对象.show(“slow”); // slow,normal,fast
* 使用三:Jq对象.show(毫秒值); // 1000
* 使用四:Jq对象.show(毫秒值,function(){});
* hide();
* 使用一:Jq对象.hide();
* 使用二:Jq对象.hide(“slow”); // slow,normal,fast
* 使用三:Jq对象.hide(毫秒值); // 1000
* 使用四:Jq对象.hide(毫秒值,function(){});
* slideDown(); --向下滑动
* 使用一:Jq对象.slideDown();
* 使用二:Jq对象.slideDown(“slow”); // slow,normal,fast
* 使用三:Jq对象.slideDown(毫秒值); // 1000
* 使用四:Jq对象.slideDown(毫秒值,function(){});
* slideUp(); --向上滑动
* 使用一:Jq对象.slideUp();
* 使用二:Jq对象.slideUp(“slow”); // slow,normal,fast
* 使用三:Jq对象.slideUp(毫秒值); // 1000
* 使用四:Jq对象.slideUp(毫秒值,function(){});
* fadeIn(); --淡入
* 使用一:Jq对象.fadeIn();
* 使用二:Jq对象.fadeIn(“slow”); // slow,normal,fast
* 使用三:Jq对象.fadeIn(毫秒值); // 1000
* 使用四:Jq对象.fadeIn(毫秒值,function(){});
* fadeOut(); --淡出
* 使用一:Jq对象.fadeOut();
* 使用二:Jq对象.fadeOut(“slow”); // slow,normal,fast
* 使用三:Jq对象.fadeOut(毫秒值); // 1000
* 使用四:Jq对象.fadeOut(毫秒值,function(){});
* animate(); --自定义动画
* toggle(); --单击切换函数
* Jq对象.toggle(fn1,fn2...);单击第一下的时候执行fn1,单击第二下执行fn2...
2.4、jq的选择器
1、基本选择器
id选择器
* 用法:$(“#id”)
类选择器
* 用法:$(“.类名”)
元素选择器
* 用法:$(“元素名称”)
通配符选择器
* 用法:$(“*”)
并列选择器
* 用法:$(“选择器,选择器,选择器”)
$(function(){
$("#but1").click(function(){
// alert("aaaa");
$("#one").css("background","#bbffaa");
});
$("#but2").click(function(){
$(".mini").css("background","#bbffaa");
});
$("#but3").click(function(){
$("div").css("background","#bbffaa");
});
$("#but4").click(function(){
$("*").css("background","#bbffaa");
});
$("#but5").click(function(){
$("#two,span,.mini").css("background","#bbffaa");
});
});
2、层级选择器
后代选择器：使用空格 所有后代包含孙子及以下的元素
子元素选择器：使用> 第一层的元素（儿子）
下一个元素:使用+ 下一个同辈元素
兄弟元素:使用~ 后面所有的同辈元素
<script>
$(function(){
// 后代选择器:
$("#but1").click(function(){
$("body div").css("background","#bbffaa");
});
// body下的第一层div元素
$("#but2").click(function(){
$("body > div").css("background","#bbffaa");
});
// 查找下一个同辈的元素
$("#but3").click(function(){
$("#three + div").css("background","#bbffaa");
});
$("#but4").click(function(){
$("#two ~ div").css("background","#bbffaa");
});
});
</script>
3、基本过滤选择器（odd奇数、even偶数、eq=、lt<、gt>）
<script>
$(function(){
$("#but1").click(function(){
$("#three div:first").css("background","#bbffaa");
});
$("#but2").click(function(){
$("#three div:last").css("background","#bbffaa");
});
$("#but3").click(function(){
$("div:odd").css("background","#bbffaa");
});
$("#but4").click(function(){
$("div:even").css("background","#bbffaa");
});
$("#but5").click(function(){
$("#three div:eq(1)").css("background","#bbffaa");
});
});
</script>
4、属性选择器
5、内容选择器
<script>
$(function(){
$("#but1").click(function(){
$("div:contains('1')").css("background","#bbffaa");
});
});
</script>
6、表单选择器
<script>
$(function(){
$("#but1").click(function(){
$(":input").css("background","#bbffaa");
});
$("#but2").click(function(){
// $(":text").css("background","#bbffaa");
$("input[type='text']").css("background","#bbffaa");
});
});
</script>
7、表单属性选择器
2.5、jquery中添加和移除样式：
* 如果样式没有事先定义,可以使用css方法为奇数行或者偶数行设置背景颜色.
* 如果已经在css文件中事先将样式定义完成了,不能使用css方法了.使用JQ中的CSS类中的方法：
* addClass();
* removeClass();
<script>
$(function(){
/*$("tr:odd").addClass("odd");
$("tr:even").addClass("even");*/
$("tbody tr:odd").addClass("odd");
$("tbody tr:even").addClass("even");
});
</script>
2.6、jQuery对属性的操作的方法
* attr();
* 使用方法一：$(“”).attr(“src”);
* 使用方法二：$(“”).attr(“src”,”test.jpg”);
* 使用方法三：$(“”).attr({“src”:”test.jpg”,”width”:”100”});
* removeAttr();
* prop();新版本的方法.
* 使用方法一：$(“”).prop(“src”);
* 使用方法二：$(“”).prop(“src”,”test.jpg”);
* 使用方法三：$(“”).prop({“src”:”test.jpg”,”width”:”100”});
* removeProp();
* addClass()
* removeClass();
2.7、总结prop和css的区别
Css是样式
Prop是除了样式之外的其他属性
2.8、jQuery的DOM操作
* 常用的方法:
* append(); ---在某个元素后添加内容.
* appendTO(); ---将某个元素添加到另一个元素后.
* remove(); ---将某个元素移除.
2.9、 jQuery的遍历
遍历的方式一：
* $.each(objects,function(i,n){
});
遍历的方式二:
* $(“”).each(function(i,n){
});
$(function(){
var arrs = new Array("张森","张凤","张芙蓉");
// 将这个数组转成JQ的对象使用each方法.
/*$(arrs).each(function(i,n){
alert(i+" "+n);
});*/
$.each(arrs,function(i,n){
alert(i+" "+n);
});
});
3.0、二级联动、
3.1、全选全不选
Day 06(2018-1-19) jQuery&BootStrap介绍
第一章、
1.1、Jquery的选择器
案例：下拉列表的左右选择
// 移除右侧被选中元素到左侧:
$("#removeLeft").click(function(){
$("#selectRight option:selected").appendTo("#selectLeft");
});
// 移除右侧被选中元素到左侧:
$("#removeAll").click(function(){
$("#selectRight option").appendTo("#selectLeft");
});
// 双击左侧的的某个元素，移动到右侧:
$("#selectRight").dblclick(function(){
$("option:selected",this).appendTo("#selectLeft");
});
1.3、 jQuery常用事件：
1.4、 jquery的事件切换
* toggle(); --单击事件的切换
* hover(); --鼠标悬停的切换
1.5、jQuery的查找（find（类似后代选择器）、parent（一堆元素的父类））
1.5、 jq的事件处理(trigger和triggerHandler)方法
trigger和triggerHandler区别:
trigger：不仅执行函数体，而且触发浏览器默认的操作
triggerHandler：只执行函数体，不会触发浏览器默认的操作
本质就是：调用其他元素中已经绑定的事件
trigger：这个函数会导致浏览器 同名的默认行为的执行，
triggerHandler这个方法会触发指定的事件类型上所绑定的处理函数，但是不会处理浏览器默认的动作，只会执行第一行的事件
区别：1、他不会触发浏览器默认事件
2、只触发jq对象集合中第一个元素的事件处理函数
3、这个方法的返回值的是事件处理函数的返回值，而不是剧有可链性的jq对象，此外，如果最开始的jQuery对象集合为空，则这个方法返回 undefined 。
第二章、使用BootStrap设计一个相应式的页面
2.1、需求：
设计一套页面能够通用在不同的设备上,在手机,pad上,电脑上都可以浏览这个网页,而不影响正常的浏览的方式
2.2、BootStrap的概述
2.3、BootStrap可以在那些地方使用：
BootStrap设计出响应式页面,由它设计页面可以在手机,PAD,PC都可以直接访问.
2.4、<!--为了保持缩放的比例-->需要在开头写上
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2.5、<!--下面是bootstrap要用到的类库-->类库和js的引用
<link rel="stylesheet" href="../css/bootstrap-theme.min.css" />
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"/>
<script src="../js/jquery-1.11.0.min.js"></script>
<script src="../js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
2.6、删格系统（栅格系统怎么就响应式了）
<!--栅格系统怎么就响应式了!!!!!
因为用到css3中的媒体查询的技术----时刻监控着屏幕的宽度,根据不同宽展示不同的布局
2.7、BootStrap的划分列和屏幕分辨率的划分
划分成12列 -----1200 用 col-lg(电脑) 960 col-md(电脑) 760 col-sm(平板) col-xz(手机)
2.8、BootStrap的重点是12默认为一行
<div>我是大英雄<div> div默认是独占一行
<div class=”col-md-6>我是</div>
<div class=”col-md-6>李迪</div>
这样2个div就默认在一行
<div class=”row”>div独占一行
<div class=container>:用于固定宽度并支持响应式布局的容器
Day07（2018-1/21）BootStrap响应式开发与mysql回顾
第一章、 BootStrap设计一个响应式页面
1.1、
第二章、 SQL回顾
2.1、什么是数据库
数据库：就是一个文件系统，这个文件必须通过标准的SQL访问。
2.2、什么是关系型数据库：
关系型数据库存放都是实体之间的关系
2.3、常用的关系型数据库
Oracle:公司收费的大型的数据库
Mysql :免费的小型数据库，现在被Oracle收购
Sqlserver:微软公司收费的型的数据库
DB2：IBM公司收费单位大型的数据库
SyBase:SyBase公司收费的数据库，已经被淘汰，PowerDesigner数据建模的工具
SQList:小型的嵌入式的数据库。
2.4、什么是SQL(Structured Query Language)
Sql:结构化查询语言
2.5、SQL分类：（DDL、DML、DCL、DQL）
DDL:数据定义语言
（create，alert<更改）drop）
DML:数据操纵语言
（update,insert,delete）
DCL:数据控制语言
（grant，if）
DQL:数据查询语言
（select）
2.6、SQL的特点
非过程性语言：一条语句就会有一个运行的结果
2.7、使用SQL操作数据库（对数据库的CRUD的操作）
2.7.1、创建数据库
语法:
* create database 数据库名称 [character set 字符集 collate 字符集校对];
练习:
* 创建db1;
* create database db1;
* 创建一个带有字符集的数据库db2;
* create database db2 character set gbk;
* 创建一个带有字符集和校对规则的数据库db3;
* create database db3 character set utf8 collate utf8_bin;
2.7.2、查看数据库
语法:
* 查看数据库服务器中所有的数据库:
* show databases;
* 查看某个数据库的定义信息.
* show create database 数据库名;
* 查看当前正在使用的数据库信息.
* select database();
2.7.3、删除数据库
语法:
* 删除数据库:
* drop database 数据库名;
2.7.4、修改数据库
语法:
* 修改数据库修改的是的数据库的字符集和校对规则.
* alter database 数据库名 character set 新字符集 collate 校对规则;
2.7.5、切换数据库
语法:
* use 数据库名称;
2.8、使用SQL操作数据库中的表（对数据库的表CRUD的操作）
2.8.1、创建表
1、语法：
* create table 表名 (
字段名 类型(长度) 约束,
字段名 类型(长度) 约束,
字段名 类型(长度) 约束
);
2、数据类型：
* Java类型: MySQL:
byte/short/int/long tinyint/smallint/int/bigint
String char/varchar
* 区别?char是固定长度的字符串,varchar可变长度的字符串.
* char(8) 和 varchar(8)
* 如果插入一个字符串hello 插入到char 那么 插入hello .插入到varchar中 插入hello
float float
double double
BigDemal decimal
boolean bit
Date date/time/datetime/timestamp
* datetime和timestamp都是既有日期又有时间的日期类型
* 区别? datetime需要使用外部传入的日期.如果没传这个值就是Null. timestamp会使用系统当前的时间作为这个值的默认值.
文本文件 text
二级制文件 BLOB
***** Oralce使用CLOB/BLOB
***** MYSQL中除了字符串类型需要设置长度其他的类型都有默认长度.
3、约束：
单表约束：
* 主键约束：primary key (默认就是唯一非空的)
* 唯一约束：unique
* 非空约束：not null
自增约束：auto_increment
4、创建一个表
***** 创建表之前先选择数据库:use 某个数据库;
create table employee(
eid int primary key auto_increment,
ename varchar(20) not null,
email varchar(30) unique,
birthday date,
job varchar(20),
resume text
);
2.8.2、表的查看
⑴、查看数据库中有哪些表（show tables）
⑵、查看表的结构（desc 表名）
2.8.3、表的删除
Drop table 表名；
2.8.4、表的修改
⑴、修改表添加列：
* alter table 表名 add 列名 类型(长度) 约束;
* alter table employee add image varchar(50);
⑵、修改表删除列：
* alter table 表名 drop 列名;
* alter table employee drop job;
⑶、修改表的列的类型长度及约束：
* alter table 表名 modify 列名 类型(长度) 约束;
* alter table employee modify image varchar(80) not null;
⑷、修改表的列名：
* alter table 表名 change 旧列名 新列名 类型(长度) 约束;
* alter table employee change image eimage varchar(60);
⑸、修改表名：
* rename table 旧表名 to 新表名;
* rename table employee to user;
⑹、修改表的字符集
* alter table 表名character set 字符集;
* alter table user character set gbk;
2.9、使用SQL操作数据库中的表的记录（增、删、改、查）
2.9.1、插入语句
⑴、语法
* insert into 表名 (列名,列名,...) values (值1,值2,...); ---插入指定列的值
* insert into 表名 values (值1,值2,...); ---插入所有列的值
⑵、注意事项：
* 列名的个数与值的个数对应.
* 列的类型与值的类型对应.位置也要对应.
* 列的类型如果是字符串或者日期,写值的时候使用单引号将值引起来.
* 插入的值的最大长度不能超过列的最大长度.
⑶、插入记录:
* 插入某几列的值:
* insert into employee (eid,ename,email) values (null,'aaa','aaa@itcast.cn');
* 插入所有列的值:
* insert into employee values (null,'bbb','bbb@itcast.cn','1990-09-01','HR','I am HR');
⑷、插入中文：
insert into employee (eid,ename,email) values (null,'张三','aaa@163.cn');
报的错误：
ERROR 1366 (HY000): Incorrect string value: '\xD5\xC5\xC8\xFD' for column 'ename' at row 1
插入中文问题的解决：
* show variables like '%character%';
***** 找到MYSQL的安装路径/my.ini文件：
**** 重新加载mysql的配置文件：
* services.msc
* 停止mysql的服务,重新启动mysql服务.
* 执行之前的SQL语句.
Day08(2018-1-22)mysql的回顾
2.9.2、修改记录：
语法：
* update 表 set 列名=值,列名=值 [where 条件];
注意事项：
* 列名和值类型也要一致.
* 值不能超过列的最大长度.
* 值是字符串或日期,需要使用单引号.
练习：
* 修改employee表中所有记录的job为WORKER
* update employee set job='WORKER';
* 修改employee表将name为aaa的邮箱改为aaa@163.com
* update employee set email = 'aaa@163.com' where ename = 'aaa';
* 修改employee表将name为bbb的邮箱改为bbb@163.com同时修改job为HR
* update employee set email = 'bbb@163.com' , job='HR' where ename='bbb';
2.9.3、删除记录：
语法：delete from表名where条件
注意事项：
删除表中的一行记录，不能删除某列值
如果没有条件就删除表中所有列
练习：
* 删除id为8的记录:
* delete from employee where eid = 8;
* 删除所有记录:
* delete from employee;
删除表中的所有记录truncate table 表名 和 delete from 表 区别?
* 区别:
* truncate table 删除表的记录：将整个表删除掉,重新创建一个新的表.truncate属于DDL.
* delete from 删除表的记录：一条一条进行删除. delete属于DML。
* 事务管理 只能作用在DML语句上.如果再一个事务中使用delete删除所有记录，可以找回.
2.9.4、查询语句
查询语句：* select [distinct] *|列名 from 表 [where 条件];
准备创建表，插入数据：
create table exam(
id int primary key auto_increment,
name varchar(20),
english int,
chinese int,
math int
);
insert into exam values (null,'张三',85,74,91);
insert into exam values (null,'李四',95,90,83);
insert into exam values (null,'王五',85,84,59);
insert into exam values (null,'赵六',75,79,76);
insert into exam values (null,'田七',69,63,98);
insert into exam values (null,'李四',89,90,83);
查询所有记录:
* select * from exam;
查询这个班级人的姓名和英语成绩:
* select name,english from exam;
查询英语成绩,将重复英语成绩去掉:
* select distinct english from exam;
查询李四的学生成绩:
select * from exam where name='李四';
查询名称叫李四并且英语成绩大于90的
select * from exam where name='李四' and english >90;
将成绩+10分进行显示
Select name，English+10，chinest+10,math+10 from exam;
显示这个人的名称和对应总成绩的分数：
select name,english+chinese+math from exam;
使用as起别名,as可以省略.
select name , english+chinese+math as sum from exam;
2.9.5、条件查询
where语句后面可以加：
条件的关键字：
= , > , >= , <, <= , <>
like中可以使用占位符: _ 和 % ：下划线匹配一个字符, %:可以匹配任意多个字符.
* like ‘张％’; like ‘张_’; like ‘%明’; like ‘%明%’;
in 后跟着一组值.
* id in (1,2,3)
and or not
2.9.6、排序查询
order by 对数据进行排序.默认升序. （asc升序,desc降序）
* 查询所有学生的信息,并且按语文成绩进行排序.
* select * from exam order by chinese;
* 查询所有学生的信息,并且按语文成绩进行降序排序.
* select * from exam order by chinese desc;
* 查询学生的信息,按照英语成绩降序排序，如果英语成绩相同,按照语文降序.
* select * from exam order by english desc, chinese desc;
* 查询姓李的学生的信息,同时按照英语升序排序.
* select * from exam where name like '李%' order by english asc;
2.9.7、聚合函数
sum()
count()
max()
min()
avg()
* 查询每个学生总成绩:
* select name,(english+chinese+math) from exam;
* 统计所有学生的总分:
* select sum(english+chinese+math) from exam; -- ifnull(english,0)
* select sum(english)+sum(chinese)+sum(math) from exam;
* 统计学生的个数:
* select count(*) from exam;
* 统计英语成绩的最高分:
* select max(english) from exam;
* 统计语文成绩的最低分:
* select min(chinese) from exam;
* 统计英语成绩平均分:
* select avg(english) from exam;
2.9.8、分组
group by
创建一个订单详情的表:
* 统计订单中的每类商品所购买的个数：
* SELECT product,COUNT(*) FROM orderitem GROUP BY product;
* 统计订单中的每类商品所花的金额:
* SELECT product,SUM(price) FROM orderitem GROUP BY product;
* 统计订单中的每类商品所花总金额大于2000信息.
* SELECT product,SUM(price) FROM orderitem GROUP BY product HAVING SUM(price) > 2000;
* 统计订单中名称有电子的商品并且所花金额大于1500同时按照价格降序排序：
* SELECT product,SUM(price) FROM orderitem WHERE product LIKE '电%' GROUP BY product HAVING SUM(price) > 1500 ORDER BY SUM(price) DESC;
【SQL的查询语句的总结】
顺序: s...f...w...g...h...o...;
第二章、数据库的多表设计、
2.1、数据库的多表设计（实体关系有3 种）
数据库都是关系型的数据库，存在的是实体之间的关系，实体之间有哪些关系？
实体的关系总结起来就有三中关系：
一对多：一个客户可以产生多种订单
多对多：学生和课程
一对一：身份证和人，公司和注册地址
2.2、多表的设计
1、一对多的关系的建表原则：
在多的一方创建一个字段，这个字段作为外键指向一方的主键
2、多对多关系的建表原则：
创建一个第三种表，中间表中至少需要两个字段分别作为外键指向多对多双方的各自的主键
3、一对一的关系的建表原则：
⑴、唯一外键对应：假设一对一的双方是一对多的关系，在多的一方创建外键指向一的一方的主键，需要在外键上添加一个unique约束。
⑵、主键对应：将一对一的双方的主键建立映射
2.3、使用SQL创建一对多的关系
创建客户表:
create table customer(
cid int primary key auto_increment,
cname varchar(20)
);
create table orders(
oid int primary key auto_increment,
addr varchar(50),
cid int
);
***** 约束：用来保证数据的完成型.
* 多表约束：外键约束！！！
***** 给orders表中的cid添加外键约束.
* alter table orders add foreign key (cid) references customer(cid);
2.4、商城模型分析
表关系分析及设计
第三章、使用SQL完成多表的查询
3.1、需求：
使用多表的查询，完成某个分类下的商品的显示，很多的情况下都需要使用多表的查询。
3.2、多表查询的SQL
多表的查询的方式：
* 交叉连接：
* select * from A,B; --- 获得的是两个表的笛卡尔积.
* 内连接: inner join -- inner 可以省略
* 显式内连接：select * from A inner join B on 条件;
* SELECT * FROM customer c INNER JOIN orders o ON c.cid = o.cid;
* 隐式内连接：select * from A,B where 条件;
* SELECT * FROM customer c ,orders o WHERE c.cid = o.cid;
* 外连接：outer join -- outer 可以省略
* 左外连接：left outer join -- select * from A left outer join B on 条件;
* SELECT * FROM customer c LEFT OUTER JOIN orders o ON c.cid = o.cid;
* 右外连接：right outer join -- select * from A right outer join B on 条件;
* SELECT * FROM customer c RIGHT OUTER JOIN orders o ON c.cid = o.cid;
3.3、多表查询的子查询
一个SQL语句查询的过程中需要依赖另一个查询语句.
SELECT * FROM customer c,orders o WHERE c.cid = o.cid AND c.cid IN (SELECT cid FROM orders WHERE addr LIKE '海淀%');
3.4、多表练习、按照客户名称统计订单的个数
SELECT c.cname,COUNT(*) FROM customer c,orders o WHERE c.cid = o.cid GROUP BY c.cname;
|
|
