网页HTML到8.20前

最新推荐文章于 2024-04-23 10:32:10 发布

weixin_30493321

最新推荐文章于 2024-04-23 10:32:10 发布

阅读量257

点赞数

文章标签：数据库 javascript c# ViewUI

原文链接：http://www.cnblogs.com/kxy3-1314/p/4551721.html

版权

2015.6.4

HTML：超文本标记语言 CSS：样式表 JavaScript：脚本

HTML标签---成对儿出现的是双标签元素，单个儿出现的是单标签元素

一、通用标签

1.格式控制标签

<font></font> 文字

color-文字颜色 face-文字字体 size-文字大小

<b></b>加粗

<i></i>倾斜

<u></u>下划线

<br/>换行

 空格

<center></center> 居中

2.内容标签(内容标签都有style属性)

<h1></h1>~<h6></h6> 标题(h1字号最大，h6字号最小)

<p></p> 段落

<div></div>层标签，用于网页布局

<span></span> 层标签，用于网页布局

<ol></ol>有序列表

<ol>

</ol>

页面显示为：

1.第一项

2.第二项

3.第三项

有序列表一般默认阿拉伯数字排序，从1开始，也可用type属性设置英文或罗马数字标号

<ul></ul>无序列表

<ul>

</ul>

页面显示为：

●第一项

●第二项

●第三项

二、常见标签

<img/>图片

src属性-图片源

alt属性-设置图片为超链接时定义的图片名

调整width、height数值，修改原尺寸过大的图片，使之适应网页布局

<table></table> 表格

插入表格代码：

<table>

<tr>

</tr>

<tr>

<tr/>

<tr>

<tr/>

</table>

body的几个属性：

background 背景图片 bgcolor背景色 text 网页文字

Dreamweaver三个界面：代码界面、拆分界面、设计界面(可以在设计界面直接添加表格)

表格的几个属性：

width 宽度 border 边框 align 对齐方式 bgcolor 背景色 rowspan 合并行 colspan 合并列

<a></a> 超链接

href属性-指向超链接跳转页面

<a href="网址或文件名"> 插入网页或文件超链接

target属性-超链接的打开方式

锚点：

1.设置锚点：通过设置a标签里的name属性来命名锚点

2.设置跳转超链接

<a href="#锚点名">超链接内容</a>

<form></form>form表单

<form="zhuce" method="get"/"post" action="Untitled-2.html">

method属性-提交方式，分为post、get两种

action属性-提交到哪个页面处理 action="../Untitled-2.html" 从上一级文件夹查找文件

一、文本输入类

1.<input type="text" value=" " name=" "/> 单行文本输入框

2.<input type="password" value=" " name=" "/> 密码框

3.<textarea></textarea>文本域

4.<input type="hidden" value=" " name=" "/> 隐藏域

二、按钮类

1.<input type="submit" value="注册" name=" "/> 提交按钮

2.<input type="reset" value="重置" name=" "/> 重置按钮

3.<input type="button" value="检查" name=" "/> 普通按钮

4.<input type="image" src="图片名" width="100" height="30" name=" "/> 图片按钮

三、选择性输入类

1.男<input type="radio" value=" " name="sex"/>

女<input type="radio" value=" " name="sex"/>

单选按钮

男<input type="radio" value=" " name="sex"/ checked="checked">

女<input type="radio" value=" " name="sex"/>

“男”这个选项就成了默认选项

2.<input type="checkbox" value=" " name=" "/>

多选按钮

3.<select></select> 下拉菜单

</select>

下拉列表，每一个option是一个列表项，加上属性multiple="mutiple"之后变为多选的列表

即：

</select>

4.<input type="file" name=" "/> 选择文件，上传文件

作业：做一个百度首页页面

2015.6.6

CSS---层叠样式表，作用是美化网页

一、层叠样式表概述

层叠样式表的层叠含义：

①样式表类别产生的层叠关系(考虑优先级覆盖关系)

②选择器产生的层叠关系(考虑优先级覆盖关系)

③父子元素产生的层叠关系

【应用】布局网页、网页模版、图片素材

【格式】样式名:样式值;样式名:样式值

注释某行代码用/* */标记

分类：

1.内联式：直接写在标签里

</body>

2.内嵌式：写在head里面

<head>

{

font-size=36px;

}

</style>

</head>

3.外部样式：新建一个样式表文件，用附加样式表引用到网页内

【代码界面】

<head>

</head>

【CSS界面】

@charset "utf-8"

/*CSS Document*/

body

{

font-size=36px;

}

二、选择器

1.普通选择器

①标签选择器：用标签名来选择元素控制样式

div{

font-size=48px;

}

②class选择器

.aa{

font-siae=48px;

}

③id选择器

#aa

{

font-size=48px;

}

#bb

{

font-size=36px;

}

注：

(1)*代表网页中所有的元素

(2)各选择器优先级：id选择器>class选择器>标签选择器>*;内联式>内嵌式>外部样式

二、复合选择器

1.用逗号隔开 #aa,#cc 并列关系

2.用空格隔开 #aa div 后代关系

3.用点隔开 div.bc 筛选关系---在div里面筛选class为bc的标签

三、样式

1.背景与前景

background-color 背景色

background-image 背景图片

background-repeat

①repeat-x 横向平铺

②repeat-y 纵向平铺

③inherit 平铺

④no-repeat 不平铺

⑤cover 整个覆盖

background-size 背景大小

background-attachment 背景图片的固定

①fixed 固定

②scroll 滚动

background-position 背景图片的位置

①center 居中

②bottom 靠下

③right 靠右

④top 靠上

⑤left 靠左

⑥top left 左上角

⑦ top 10px left 50px 距离上边10像素，距离左边50像素(具体设置边距数值)

font-family字体【例】font-family:微软雅黑

font-size字体大小【例】font-size:24px

font-weight字体粗细 bold加粗

font-style字体风格 italic倾斜

color字体颜色

2.对齐方式

①text-align 水平对齐---center 居中 left 靠左 right 靠右

②vertical-align 垂直对齐---middle 居中 top 靠上 bottom 靠下

③line-height 行高

3.其它

text-decoration 文字装饰效果---underline下划线 overline上划线 line-through中划线

text-indent 首行缩进

display 是否显示---block显示 none隐藏

overflow 超出部分样式---hidden超出隐藏 scroll超出部分出现滚动条

2015.6.7

边界与边框

边框与文字之间的距离叫内边距；边框以外的部分叫做外边距

border 边框 margin 外边距 padding 内边距

Border-	color	width	style
left
right
top
bottom

border的20个属性

margin的5个属性---top bottom left right margin：上下左右像素值

padding的5个属性---top bottom left right padding：上下左右像素值

列表与方块

list-style---width，height，type，image，position

display---none，block(换行)，inline(宽高设置不起作用)，inline-block(可对宽高进行设置)

overflow---hidden，scroll，visable

列表(有序<ol></ol>无序<ul></ul>)

①list-style-type：none，low-alpha，nummeric，disc，circle，square

②list-style-position

③list-style-image

方块

①width，height

②display，overflow

③span默认对width、height没有效果，需要配合display：inline-block；div默认对width、height起作用，但如果设置display：inline，则div对width和height也不起作用

格式与布局

一、流式布局

float：left/right

clear：both

一旦float起来，它将脱离原来网页的层面，后面的没有float起来的层顶上去

1.并行排列

a.假设中间有一个float起来的层，不会影响前面的但会影响后面的(后面没有设置float的层会顶上去)

b.在相应位置上加一个空的<div style="clear:both"></div>截断布局

2.嵌套排列

a.嵌套float的一般规则：

默认情况下，里层的会把外层的给撑开；当里层float起来，外层没有float，外层不会被撑开；如果里层、外层都float起来，里层就又能撑开外层了

b.如何设置布局的居中？

第一步：设一个最外层的div，宽度是100%

第二步：在上个div的里面，设一个居中的div，设置宽度960-980、margin：auto

第三步：在第二步的div中编辑网页内容即可

二、定位布局

通过设置样式表的top/right/bottom/left四个样式属性来定位div的位置

position定位方式：fixed/absolute/ralative

fixed---绝对定位。以当前页面可见区域为坐标，自动浮于页面上方。

absolute---绝对定位。如果外层没有position样式，则以当前页面可见区域为坐标；如果外层有position样式，则以最近一层为坐标定位其top/right/bottom/left。

relative---相对定位。相对于自己本身应当在的那个位置进行坐标定位。

2015.6.13

JavaScript：
几个问题：
1.JavaScript是个什么东西？——脚本语言。
JavaScript,Java,JScript
Sun/Oracle Java
网景NetScape
微软 Win98 IE3

2.什么是脚本语言？
不能独立运行，必须嵌在宿主文件中才能运行的语言。
********************基本语法**********************

嵌入语法：
<script language="javascript">

</script>

一、类型与变量
数据类型：字符串、整型、浮点型、布尔型、日期时间、对象型
变量类型：只有一种变量类型---通用类型

弱类型的语言。
解释运行的语言。

强制类型转换：
1.其它类型转成整数：
var a = "5";
a = parseInt(a);

2.其它类型转成小数：
var a = "5.2";
a = parseFloat(a);

3.判断是否是数字：
isNaN(a)---判断是否是个合法的数字，返回bool型
true---不是个数字；false---是数字

二、运算符
（一）算术运算符 7
+ - * / % ++ --
（二）关系运算符 6
== != > < >= <=
（三）逻辑运算符 3
&& || !
（四）其它运算符
= ?: += -= *= /= %=

三、语句
（一）顺序
（二）分支
1.if(表达式){}
2.if(表达式){} else {}
3.if(表达式){} else if(表达式){}....else{}
4.if(表达式){if(表达式){}}
例子：
1.判断是否是闰年
2.相亲
3.身高与体重
4.一元二次方法根的情况

（三）循环
四要素：初始条件、循环条件、循环体、状态改变
for(初始条件;循环条件;状态改变)
{
循环体;
}
for(var i=0;i<10;i++)
{
alert("你好");
}
两大类问题：穷举和迭代
穷举：求100以内所有与7相关的数字
迭代：求100以内所有数的和

例子：
1.画星号
2.买东西
3.百马百石
4.兑硬币
5.配等式
6.侦察兵
7.猴子吃桃
8.算年龄
9.折纸
10.棋盘分粮食

四、数组
定义：var a = new Array();
属性：length---数组中length代表元素个数
赋值：
a[0] = 4;
a[4] = 6;
a[9] = 12;
取值：
alert(a[4]);

var a = new Array();
a[0] = 4;
a[4] = 6;
a[9] = 12;
a[5] = true;
a[7] = 3.14;
a[2] = "hello world";
alert(a[7]);

五、函数

(一)函数定义
函数名输入参数返回类型函数体
function Add(a,b)
{
var c = a+b;
return c;
}
(二)函数调用
var c = add(3,4);

*******************DOM操作*********************
DOM---文档对象模型 Document Object Model

window
history
location
document
    a div span img table
                                tr
                                   td
status

六、window对象
函数：
alert("字符串")---弹一个只有一个确定按钮的对话框出来。
confirm("字符串")---弹一个有确定和取消两个按钮的对话框出来，返回bool型
prompt("字符串")---提供一个输入的对话框。
open("打开的地址","打开的位置","打开窗口的特征")---打开新窗口，返回被打开的这个新窗口。

案例：
var a = window.confirm("你能跑过豹子吗？");
if(a == false)
{
alert("你禽兽不如");
}
else
{
alert("你比禽兽还禽兽");
}

2015.6.14

一、window.open() 打开一个窗口

四个参数含义：

1.要打开的网页地址
2.打开方式
3.打开的网页属性设置

二、window.close() 关闭窗口

window.opener.close();关闭源窗口

三、间隔和延迟

var one = window.setInterval("openone()",1000); ---间隔1秒钟执行openone()函数,一直执行

window.clserInterval(one); ---清除间隔执行

var aa = window.setTimeout("openone()",1000);---延迟1秒钟执行openone()函数,执行一次

window.clearTimeout(aa); ---清除延迟执行

四、调整页面

window.navigate() 跳转页面
window.moveTo(x,y) 移动页面至坐标x,y
window.resizeTo(宽,高) 调整页面大小
window.scrollTo(x,y) 滚动页面

五、模态对话框和非模态对话框

window.showModelDialog();打开模态对话框
window.showModelessDialog(); 打开非模态对话框

六、window.history

window.history.back();后退
window.history.forward();前进

window.history.go(n); 如果n是正数则前进n个页面如果n是负数则后退n个页面

七、window.location

window.location.href 获取页面地址
window.location.href=""; 跳转页面

八、window.status

window.status=""; 设置状态栏显示

2015.6.15

window对象：
alert()---显示警告窗口
confirm() ---显示确认窗口，返回bool型
open()---打开新页面窗口---三个参数，返回被打开的窗口---url，neme(_self/_blank)，features
close()---关闭窗口
setTimeout(代码,毫秒数)---多长时间之后执行指定的代码
setInterval(代码,毫秒数)---每隔多长时间执行指定的代码
resizeTo(),moveTo(),scrollTo()....
history对象。location对象。document对象。status对象。---参考网页模型
history对象：window.history
go(整数值)--括号内的整数值可以是正数，也可以是负数，正数代表前进几个页面，负数代表后退几个页面，即兼有forward和back功能
location对象：window.location
reload() ---重新加载页面---小括号里是函数
href---指定页面的URL地址 URL---统一资源定位器(网址)
status对象：window.status

document对象：
一、找到指定的元素。
1.根据id找元素---找一个
2.根据name找元素---找一组
3.根据标签名找元素---找一组
二、操作元素

（一）操作属性
1.获得属性值
2.添加/修改属性
3.删除属性
（二）操作样式
1.直接操作样式属性
a.获得样式属性的值
b.设置或修改样式属性的值

2.操作元素的class
a.获得class
b.设置class

（三）操作内容
1.表单元素
a.取值
b.赋值
2.非表单元素
a.取值
b.赋值

（四）元素整体操作
1.创建
2.添加
3.复制
4.替换
5.删除
三、相关联元素
同辈
子辈
父辈

-----------document操作-----------

一、找到元素

document.getElementById("a") 根据ID找，只能找出来一个
document.getElementsByName("cc") 根据NAME找，找出来的是个数组
document.getElementsByTagName("div") 根据标签名找，找出来的是数组
document.getElementsByClassName("dd"）根据CLASS名来找，找出来的是数组

二、操作内容

1.非表单元素：

innerHTML：获取标签里面的所有内容
innerText：获取标签里面的文本

innerHTML="";---修改里面的内容
innerText="";---修改里面的文本

2.表单元素：

b.value---取value值
b.value="";---给表单元素赋值

三、操作属性

getAttribute("p")--- 获取属性
setAttribute("p","abcd")---修改属性第一个参数属性名第二个参数属性值
removeAttribute("p")---移除属性

四、操作样式

var a = document.getElementById("ys");---先找到元素

a.style.样式名="样式值";---修改（增加）样式

例子：弹出菜单

2015.6.17

操作元素：
（一）定位关联元素：
parentNode---直接父级元素
childNodes---所有的直接子级元素
nextSibling---下个兄弟元素【注意回车】
previousSibling---上个兄弟元素【注意回车】

案例：
1.操作父级元素：
var t = document.getElementById("tt");
t.parentNode.className="y"; //操作父元素

2.操作子级元素：
var t = document.getElementById("tt");
var cs = t.childNodes;
for(var i=0;i<cs.length;i++)
{
cs[i].className="y";
}
3.操作兄弟元素：
var t = document.getElementById("tt");
t.nextSibling.className="y";
（二）操作元素对象
创建
var a = document.createElement("标签名");

添加
var d = document.getElementById("dd");
d.appendChild(a);

删除
var t = document.getElementById("tt");
var d = document.getElementById("dd");
t.removeChild(d);

复制
var d = document.getElementById("dd");
var s = d.cloneNode();

替换
var t = document.getElementById("tt")
var d = document.getElementById("dd");
var n = document.createElement("div");
t.replaceChild(n,d);

作业：
1.上面的示例代码。
2.点击div换页面的背景色。
3.向无序列表中添加项。

<head>

background-color=yellow;

}
</style>
</head>

<body>
<table width="100%" border="1" cellspacing="1" cellpadding="5">
<tr>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
</tr>
<tr>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
</tr>
<tr id="tt">
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
</tr>
<tr>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
</tr>
<tr>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
</tr>
</table>
</body>
</html>
<script language="javascript">
var t=document.getElementById("tt");
t.className="y";
</script>

↑表格第三行的所有单元格被黄色填充

<head>

background-color=yellow;

}
</style>
</head>

<body>
<table width="100%" border="1" cellspacing="1" cellpadding="5">
<tr>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
</tr>
<tr>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
</tr>
<tr id="tt">
     <td>a</td>
     <td> </td>s
     <td> </td>
     <td> </td>
     <td> </td>
</tr>
<tr>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
</tr>
<tr>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
</tr>
</table>
</body>
</html>
<script language="javascript">
var t=document.getElementById("tt");
t.parentNode.className="y";
</script>

↑表格上方左上标注s，表格第一列第三行单元格标注a，表格中所有单元格被黄色填充

<head>

background-color=yellow;

}
</style>
</head>

<body>
<table width="100%" border="1" cellspacing="1" cellpadding="5">
<tr>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
</tr>
<tr>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
</tr>
<tr id="tt">
     <td>a</td>
     <td> </td>s
     <td> </td>
     <td> </td>
     <td> </td>
</tr>
<tr>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
</tr>
<tr>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
</tr>
</table>
</body>
</html>
<script language="javascript">
var t=document.getElementById("tt");
var cs=t.childNodes;

for(var i=0;i<cs.length;i++)

{

cs[i].className="y";

}

</script>
↑表格第三行的所有单元格被黄色填充【等效于第一次操作】

<head>

background-color=yellow;

}
</style>
</head>

<tr>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
</tr>
<tr>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
</tr>
</table>
</body>
</html>
<script language="javascript">
var t=document.getElementById("tt");

t.nextSibling.nextSibling.className="y";
</script>

或

<head>

background-color=yellow;

}
</style>
</head>

<body>
<table width="100%" border="1" cellspacing="1" cellpadding="5">
<tr>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
</tr>
<tr>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
      <td> </td>
</tr>
<tr id="tt">
     <td>a</td>
     <td> </td>s
     <td> </td>
     <td> </td>
     <td> </td>
</tr><tr>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
</tr><tr>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
</tr>
</table>
</body>
</html>
<script language="javascript">
var t=document.getElementById("tt");

t.nextSibling.className="y";
</script>

↑表格第四行的所有单元格被黄色填充

<head>

background-color=yellow;

}
</style>
</head>

<body>

</form>
</body>
</html>
<script language="javascript">

var d=document.getElementById("dd");

d.innerHTML="<input type=button value='代码加上来的按钮'/>";
</script>

↑创建元素(表格中第三行第三列的单元格中创建一个按钮)，单元格底色为白色

<head>

background-color=yellow;

}
</style>
</head>

<body>

</form>
</body>
</html>
<script language="javascript">

var d=document.getElementById("dd");

var btn=document.createElement("input");

btn.Attribute("type","button");

btn.Attribute("value","元素按钮");

d.appendChild(btn);
</script>

↑添加元素

<head>

background-color=yellow;

}
</style>
</head>

<body>

</form>
</body>
</html>
<script language="javascript">

var d=document.getElementById("dd");

var btn=document.createElement("input");

btn.Attribute("type","button");

btn.Attribute("value","元素按钮");

d.appendChild(btn);

alert("OK");

d.removeChild();

</script>

或

<head>

background-color=yellow;

}
</style>
</head>

<body>

</form>
</body>
</html>
<script language="javascript">

var t=document.getElementById("tt");

var d=document.getElementById("dd");

t.removeChild(d);

</script>

↑删除元素

<head>

background-color=yellow;

}
</style>
</head>

<body>

</form>
</body>
</html>
<script language="javascript">

var t=document.getElementById("tt");

var d=document.getElementById("dd");

var s=d.cloneNode();

t.appendChild(s);

</script>

↑复制元素(表格右边新建一个单元格，与第三排对齐)

<head>

background-color=yellow;

}
</style>
</head>

<body>

</form>
</body>
</html>
<script language="javascript">

var t=document.getElementById("tt");

var d=document.getElementById("dd");

var n=document.createElement("div");

t.replaceChild(n,d);

</script>

↑替换元素

<body>

</body>

↑打开的页面中，在“点我”两个字上单击，弹出提醒对话框“葵花点穴手”

<head>

.oo

{

border:1px solid red;

background-color:#fcfcfc;

padding:5px;

}

</style>

function aaa()

{

var d=document.getElementById();

d.className="oo";

}

</script>

</head>

<body>

</body>

↑打开的页面中“点我”两个字外围加上一个红色边框，宽1像素，距离上边、左边边距5像素

<head>

.oo

{

border:1px solid red;

background-color:#fcfcfc;

padding:5px;

}

</style>

var c=new Array();

c[0]="red";

c[1]="green";

c[2]="blue";

c[3]="purple";

c[4]="yellow";

var nowcolor=0;

function aaa()

{

document.body.style.backgroundColor=c[nowcolor];

nowcolor++;

if(nowcolor>4)

{

nowcolor=0;

}

</script>

</head>

<body>

</body>

或

<head>

.oo

{

border:1px solid red;

background-color:#fcfcfc;

padding:5px;

}

</style>

var c=new Array();

c[0]="red";

c[1]="green";

c[2]="blue";

c[3]="purple";

c[4]="yellow";

var nowcolor=0;

function aaa()

{

document.getElementsByTagName("body")[0].style.backgroundColor=c[nowcolor];

nowcolor++;

if(nowcolor>4)

{

nowcolor=0;

}

</script>

</head>

<body>

</body>

↑打开的页面中有“点我”两个字，起始色为白色，每单击一次鼠标页面变一次颜色，依次为红、绿、蓝、紫、黄，且不会再返回白色

<head>

function addli(){

var u=document.getElementById("uu");//找元序列表

var v=document.getElementById("txt");//找文本框

var s="<li>"+v.value+"</li>";//把文本框的值和<li>拼成一个字符串

u.innerHTML= u.innerHTML+s;//把字符串加到ul里面去

}

</script>

</head>

<body>

</ul>

</form>

</body>

或

<head>

function addli(){

var u=document.getElementById("uu");

var v=document.getElementById("txt");

var n=document.createElement("li");

n.innerHTML=v.value;

u.appendChild(n);

}

</script>

</head>

<body>

</ul>

</form>

</body>

↑在无序列表中添加项(水果单)

2015.6.18

网页总结课+两个案例

1.QQ菜单栏回收与展开

<head>

<body>
<div style="width:200px;">
<div class="h" οnclick="showdiv('hy')">我的好友</div>
<div class="c" id="hy"></div>
<div class="h" οnclick="showdiv('hmd')">黑名单</div>
<div class="c" id="hmd"></div>
<div class="h" οnclick="showdiv('msr')">陌生人</div>
<div class="c" id="msr"></div>
</body>
</html>
若把onclick换成ondblclick，则原先单击执行展开菜单不起作用，必须双击才能执行展开菜单，若换成onmouseover，则意为鼠标移至指定位置即展开菜单

2.信息填写提交页面

<head>

2015.6.22-6.29

作业：网站网页制作(分组)

2015.6.25

PS(PhotoShop)工具栏各种工具讲解&效果展示

2015.6.29
namespace ConsoleApplication1
{
class Student
{

    private string name;
    public string Name//右键“重构→封装字段”自动生成
   {
      get{return name;}
      set{name=value;}

   }
    private int code;
    public int Code
   {
      get{return code;}
      set{code=value;}
   }
   private string banji;
   public string Banji
{
     get{return banji;}
     set{banji=value;}
}
   private double c;
   public double C
{
     get{return c;}
     set{c=value;}
}
}
   class Program
{
     static void Main(string[]args)
    {
       List<Student>li=new List<Student>();
       Student s1=new Student("张三",1,"0426",80);
       li.Add(s1);
       Student s2=new Student("李四",2,"0426",90);
       li.Add(s2);
       Student s3=new Student("王二丫",3,"0426",70);
       li.Add(s3);
       Console.WriteLine("姓名\t学号\t班级\tC#成绩");
       double sum=0;
       foreach(Student s in li)
      {
         Console.WriteLine(s.Name+"\t"+s.Code+"\t"+s.Banji+"\t"+s.C);
         sum=sum+s.C;
      }
         Console.WriteLine("总分为:"+sum);
         foreach(Student s in li)
        {
           if(s.C==80)
          {
             li.Remove(s);
          }

}
}
}
}

2015.6.22-6.30

面向对象---与类(class)结合理解---对象是一种实例化的东西

类是由众多对象抽象出来的东西，类里面包含了所有对象共同拥有的东西，对象是由类实例化出来的

面向对象的三大特征：

1.封装

【含义】

①每一个类里面的成员属于各自的类

②每一个对象里面的成员是属于该对象的

③类里面的变量要通过属性或者是方法来进行赋值取值---安全性

【访问修饰符】

①public---共有的，在类外可以访问

②protected---受保护的，只能在该类或者其子类中访问

③private---只能在该类中访问

【关键字】this关键字，is关键字，partical关键字

【例子】一包粉笔；明星组合

2.继承

【语法】public 子类名:父类名

【特点】

①单继承

②object类

③子类可继承父类的成员变量、成员方法

【base关键字】

base.成员变量(属性)

base()---调用父类构造

base.xxx()---调用父类成员方法

【继承关系实例化】

①实例化子类的流程先执行父类构造再执行子类构造

②构造函数传参

【sealed关键字】

修饰类：无法被继承

修饰方法：无法被重写

3.多态

【概念】父类引用指向不同子类实例的时候，父类引用所调用的函数都是子类的函数，由于子类对象不同，父类引用调用的成员表现出来的不同状态就是一种多态

【实现方式】多态需要通过继承来实现

【分类】

编译多态(重载overload)---也叫静态多态，通过重载实现

运行多态(重写override)---也叫动态多态，通过重写实现

【函数重载】

①实现条件

(1)子类对父类方法的重写(override)

(2)父类指向子类实例

②例子

Ren父类引用随机指向中国人美国人子类实例实现吃饭方法

【virtual关键字】是一种虚方法，允许重写

【原则】

里氏代换原则:如果某个方法接受的是父类引用，可以向里面传父类或子类的元素，子类对象可以替代父类对象---例子:怪兽吃人

抽象依赖原则:用父类的引用来指向子类的实例---例子:运行多态的例子

抽象方法

【概念】在面向对象编程语言中，抽象方法指一些只有方法声明而没有具体方法体的方法。抽象方法一般存在于抽象类或接口中。在一些父类中，某些行为不是非常明确，因此无法用代码实现，但是类还必须具备此方法，因此，把这样的方法定义为抽象方法。

【声明方法】

public abstract Eat();---方法声明只是以一个分号结束，并且在签名后没有大括号，没有函数体，具体的实现由各个子类中重写函数实现

【特点】

①抽象方法是隐式的virtual方法。

②只允许在抽象类中使用抽象方法声明。

③因为抽象方法只声明不提供实现，所以没有方法体。抽象方法只在派生类中真正实现，这表明抽象方法只存放函数原型(方法的返回类型、使用的名称及参数)，而不涉及主体代码

④加abstract关键词。

⑤抽象方法的目的在于派生类必须实现与这一方法关联的行为。

抽象类

【概念】无法被实例化的类，关键词是abstract，凡是带有abstract关键词的类都无法被new出来。抽象类是不完整的，它只能用作基类。在面向抽象方法中抽象类主要用来进行类型隐藏和充当全局变量的角色。

【声明】抽象类声明 public abstract class Ren();

【注意】

①凡是带有抽象方法的类肯定是抽象类，抽象类却不一定包含抽象方法。

②构造方法:静态成员方法不能为抽象方法。

③一个非抽象类必须实现从父类继承来的所有抽象方法，如果有一个抽象方法没有实现则此类必须要加abstract关键字；如果父类被声明为抽象类，并存在未实现的抽象方法，那么子类就必须实现父类中所有的abstract成员。

【特征】

①抽象类不能实例化。

②一个抽象类可以同时包含抽象方法和非抽象方法。

③不能用sealed修饰符修饰抽象类，因为这两个修饰符(修饰类、修饰方法)含义是相反的，采用sealed修饰符的类无法继承，而abstract修饰符要求对类进行继承。

④从抽象类派生的非抽象类必须包括继承的所有抽象方法和抽象访问器的实际实现。

【例子】抽象类Ren派生中国人美国人实现抽象方法Eat()

接口

【关键字】interface

【概念】极度抽象的类，无成员变量，无实例属性和实例方法，只有抽象方法或抽象属性。---生活中的例子:标准，规则

【写法】接口不用class，用interface，名字一般以work为首字母，不用写abstract，里面所有函数都是abstract，不用写public，因为函数必须是public

interface IUSB//接口

{

void start();

void stop();

}

【特点】

①接口中的方法都是抽象的，因此无需加abstract修饰符。

②接口中的方法都是公用的，因此无需加public修饰符。

③接口就是一个规则标准。

④接口可以继承父接口。

⑤一个类可以继承多个接口，一个类只能有一个父类，但可以实现多个接口。

【例子】USB接口，连接摄像头或者U盘启动关闭

2015.7.1

数据访问---ADO.NET

如何用c#代码来操纵数据库？

1.让程序连接到数据库上

2.打开连接

3.操作数据库

4.关闭连接

一、数据访问需要用到的两个空间

using System.Data

using System.Data.SqlClient

二、连接类---建立与数据库的连接SqlConnection

连接字符串：连哪台机器？连机器上的哪个数据库？用户名是什么？密码是什么？

string connectionString="server=.;database=mydb;uid=sa;pwd=123";

ctrl+F5---运行/启动快捷键

(一)构造

SqlConnection conn=new SqlConnection();

(二)属性

ConnectionString：string用来设置或获取连接字符串

(三)方法

Open():void 打开数据库连接

Closed():void 关闭数据库连接

(四)案例

SqlConnection conn=new SqlConnection();//实例化

conn.ConnectionString="server=.;database=mydb;uid=sa;pwd=123";//初始化

以上两步可合并为一步：Sqlconnection conn=new SqlConnection("server=.;database=mydb;uid=sa;pwd=123");

Console.WriteLine(conn.State);---关闭状态

conn.Open();

Console.WriteLine(conn.State);---打开状态

conn.Close();

Console.WriteLine(conn.State);---关闭状态

三、命令类---执行SQL语句，操作数据库SqlCommand

(一)构造

SqlCommand cmd=new SqlCommand();

SqlCommand cmd=conn.CreateCommand();

(二)属性

Connection:SqlConnection---通过哪个连接对象进入数据库

Conmand Text:string---要执行的SQL状态(SQL语句，存储过程)

(三)方法

ExecuteNonQuery():void---执行SQL文本，一般用来执行增、删、改的语句

(四)案例

其他班级作品展示：

①邮件群发器

②自动生成论文+qq登录页面、注册页面、聊天页面+邮件发送页面

③批量修改文件名

④抓取手机号---查询归属地

⑤抓取图片

2015.7.2

SqlCommand

(一)构造

SqlCommand cmd=new SqlCommand();

SqlCommand =conn.CreateCommand();

(二)属性

Connection：SqlCommand---通过哪个连接访问数据库

ConmmandText:string---要执行的SQL语句

(三)方法

ExecuteNonQuery():void---执行CommandText，一般用来执行增、删、改

ExecuteReader():SqlReader---执行CommandText，一般用来执行查询

(四)举例

SqlDataReader

(一)构造

不能new出来，它只有唯一的实例化途径:使用SqlCommand的ExecuteReader()来生成

SqlDataReader dr=cmd.ExecuteReader();

(二)属性

HasRows:bool---是否有数据可读，即是否能查询出数据

(三)方法

Read():bool---读取一条数据进SqlDataReader中 true---读取成功 false---读取失败

(四)举例

while

{

dr[列号] object

dr["列名"] object

int age=(int)dr["nianling"]

}

【课堂案例】

①

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Data;
using System.Data.SqlClient;

namespace ConsoleApplication
{
    class Program
    {
        static void Main(string[] args)
        {
            SqlConnection conn = new SqlConnection("server=.;database=mydb;uid=sa;pwd=123;");
            conn.Open();
            SqlCommand cmd = conn.CreateCommand();
            cmd.CommandText = "select * from Info";
            SqlDataReader dr = cmd.ExecuteReader();
            while (dr.Read()
            {
                Console.WriteLine(dr[0].ToString() + dr[1].ToString() + dr[2].ToString());

---从0开始，有几行数据就一直加到几dr[0].ToString+dr[1].ToString+dr[2].ToString+...+dr[n].ToString
conn.Close();

}
}
}

↑查询info表中所有数据

作业：

1.把info表所有数据查询显示出来

2.做个登录

3.car表模糊查询，显示查询结果

2015.7.4

课堂案例

①

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Data;
using System.Data.SqlClient;

namespace ConsoleApplication
{
    class Program
    {
        static void Main(string[] args)
        {
            Console.Write("用户名:");
            string uid = Console.ReadLine();
            Console.Write("密码:");
            string pwd = Console.ReadLine();
            SqlConnection conn = new SqlConnection("server=.;database=mydb;uid=sa;pwd=123");
            conn.Open();
            SqlCommand cmd = conn.CreateCommand();
            cmd CommandText="select * from login where username='"+uid+"'and password='"+pwd+"';
            SqlDataReader dr=cmd.ExecuteReader();
            if(dr.HasRows)
            {
                Console.WriteLine("OK");
            }
            else
            {
                Console.WriteLine("Error");
            }

}
}
}

↑登录界面输入用户名、密码(输入有误也能登陆成功)
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Data;
using System.Data.SqlClient;

namespace ConsoleApplication
{
    class Program
    {
        static void Main(string[] args)
        {
            Console.Write("用户名:");
            string uid = Console.ReadLine();
            Console.Write("密码:");
            string pwd = Console.ReadLine();
            uid=uid.Replace("'\","\"");
            SqlConnection conn = new SqlConnection("server=.;database=mydb;uid=sa;pwd=123");
            conn.Open();
            SqlCommand cmd = conn.CreateCommand();
            cmd CommandText="select * from login where username='"+uid+"'and password='"+pwd+"';
            SqlDataReader dr=cmd.ExecuteReader();
            if(dr.HasRows)
            {
                Console.WriteLine("OK");
            }
            else
            {
                Console.WriteLine("Error");
            }

}
}
}

或

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Data;
using System.Data.SqlClient;

            conn.Open();
            SqlCommand cmd = conn.CreateCommand();
            cmd CommandText="select * from login where username = @u and password = @p;

cmd.Parameters.Clear();

cmd.Parameters.AddWithValue(@u,uid);

            cmd.Parameters.AddWithValue(@p,pwd);
            SqlDataReader dr=cmd.ExecuteReader();
            if(dr.HasRows)
            {
                Console.WriteLine("OK");
            }
            else
            {
                Console.WriteLine("Error");
            }

}
}
}

↑登录界面输入用户名、密码(完善版，用户名、密码输入错误就不能登录)

②

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Data;
using System.Data.SqlClient;

namespace ClassLibrary
{
public class Class
{

        string code=Console.ReadLine();
        string name=Console.ReadLine();
        SqlConnection conn = new SqlConnection("server=.;database=mydb;uid=sa;pwd=123");
        conn.Open();
        SqlCommand cmd=conn.CreateCommand();
        cmd.CommandText="insert into nation values('"+code+"','"+name+"')";
        cmd.ExecuteNonQuery();
        conn.Close();

}
}

在SqlServer界面查询民族表select * from nation，单击执行后在弹出的窗体中输入新的code和name，单击回车再单击执行即添加到原民族表中

或

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Data;
using System.Data.SqlClient;

namespace ClassLibrary
{
public class Class
{

        string code=Console.ReadLine();
        string name=Console.ReadLine();
        SqlConnection conn = new SqlConnection("server=.;database=mydb;uid=sa;pwd=123");

       【可扩为 Sqlconnection conn=null; conn=new Sqlconnection("server=.;database=mydb;uid=sa;pwd=123");】
        conn.Open();
        SqlCommand cmd=conn.CreateCommand();

cmd.Parameters.AddWithValue(@c,code);

        cmd.Parameters.AddWithValue(@n,name);
        cmd.CommandText="insert into nation values(@c,@n)";
        cmd.ExecuteNonQuery();
        conn.Close();

}
}

在SqlServer界面查询民族表select * from nation，单击执行后在弹出的窗体中输入新的code和name，单击回车再单击执行即添加到原民族表中

上述操作等效于:

declare @code varchar(50)

declare @name varchar(50)

set @code =''

set @name=''

insert into Nation values(@code,@name)

select * from nation

↑在原民族表中添加新数据

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Data;
using System.Data.SqlClient;

namespace ClassLibrary
{
public class Class
{

        string code=Console.ReadLine();
        string name=Console.ReadLine();
        SqlConnection conn = new SqlConnection("server=.;database=mydb;uid=sa;pwd=123");

conn.Open();
SqlCommand cmd=conn.CreateCommand();

cmd.Parameters.AddWithValue(@c,code);

        cmd.Parameters.AddWithValue(@n,name);
        cmd.CommandText="insert into nation values(@c,@n)";
        cmd.ExecuteNonQuery();
        conn.Close();

try

{

}

catch(Exception ex)

{

}

finally

{

}

}
}

↑抓错代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Data;
using System.Data.SqlClient;

namespace ClassLibrary
{
public class Class
{

        string code=Console.ReadLine();
        string name=Console.ReadLine();
        SqlConnection conn = new SqlConnection("server=.;database=mydb;uid=sa;pwd=123");

conn.Open();

try

{
SqlCommand cmd=conn.CreateCommand();

cmd.Parameters.AddWithValue(@c,code);

        cmd.Parameters.AddWithValue(@n,name);
        cmd.CommandText="insert into nation values(@c,@n)";
        cmd.ExecuteNonQuery();

}

catch

{

Console.WriteLine("出错了");

}

finally

{
conn.Close();

}

}
}

↑等效于上述抓错系统(友好报错界面)

2015.7.18

注册表操作

(一)命名空间

using Microsoft.Win32;

(二)类

Registry,RegistryKey

RegistryKey node=Registry.CurrentUser;

(三)项的操作

1.打开：node.OpenSubKey("路径/名","true/false")---返回RegistryKey

2.新建：node.CreateSubKey("路径/名");---返回RegistryKey

3.删除：node.DeleteSubKey("路径/名");/DeleteSubKeyTree("路径/名");---返回void

4.检索：node.GetSubKeyNames();---返回数组

(四)值的操作

1.读取：node.GetValue("名");

2.设置：node.SetValue("名","值");

3.删除：node.DeleteValue("名");

4.检索：node.GetValueNames("名")---返回数组

2015.7.19

人员信息表修改操作

1.做修改界面

①做用来接收主键值的构造函数

a.定义一个成员变量_Code

b.定义构造函数

②添加民族下拉列表

a.查出民族表的数据来

b.绑定到民族下拉列表中

③加载人员的原始信息

a.根据_Code查出人员信息

b.送到界面控件中显示

④编写更新代码

a.更新到数据库

b.返回DialogResult=OK;

2.做修改按钮

①判断是否选中

②显示修改界面

a.传主键值:form Edit = new form Edit(主键值);

b.显示界面:DialogResult dr = ShowDialog();

2015.7.22

布局

一、默认布局

Location---坐标位置

Anchor---固定方位

二、边界布局

Dock---上、下、左、右、中

三、流式布局

控件:FlowLayoutPanel

属性:FlowDirection

四、网格布局

控件:TableLayoutPanel(Padding)---ColumnSpan跨行设置 RowSpan跨列设置

五、卡片布局

控件:TabControl(TabPage)

属性:TabPage[Add(),Remove(),RemoveAt(),Clear(),Count]

SelectedTab

SelectedIndex

(用代码)添加卡片、删除卡片、激活卡片

六、分隔布局

控件:SplitContainer---放在SplitContainer中的控件都要Dock成Fill

2015.7.23

文件与文件夹操作

一、文件夹操作

Directory类,DirectoryInfo类

//创建文件夹
法一：DirectoryInfo di = Directory.CreateDirectory(@"D:\HQ");

法二：DirectoryInfo di = new DirectoryInfo(@"D:\HQ");
di.Create();

//删除文件夹
法一：Directory.Delete();
法二：DirectoryInfo di = new DirectoryInfo(@"D:\HQ");
         di.Delete();
//判断文件夹是否存在
法一：bool isExists = Directory.Exists(@"D:\HQ");
法二：DirectoryInfo di = new DirectoryInfo(@"D:\HQ");
         bool isExisted=di.Exists;
//获取子文件夹
法一：string[]subDir=Directory.GetDirectories(@"D:\HQ");
         listBox1.Items.Clear();
         foreach(string name in subDir)
         {
                  listBox1.Items.Add(name);
         }
法二：DirectoryInfo di=new DirectoryInfo(@"D:\HQ");
         DirectoryInfo dirs=di.GetDirectories();
          listBox1.Items.Clear();
          foreach(DirectoryInfo dir in dirs)
          {
                  listBox1.Items.Add(dir.FullName);
          }

//获取子文件
法一：string[]files=Directory.GetFiles(@"D:\HQ");
         listBox1.Items.Clear();
         foreach(string name in files)
         {
                  listBox1.Items.Add(name);
         }
法二：DirectoryInfo di=new DirectoryInfo(@"D:\HQ");
         FileInfo files=di.GetFiles();
          listBox1.Items.Clear();
          foreach(FileInfo f in files)
          {
                  listBox1.Items.Add(f.FullName);
          }

//获取文件夹的相关属性
法一：string path = @"D:\HQ";
         DateTime createTime=Directory.GetCreationTime(path);
         DateTime accessTime=Directory.GetLastAccessTime(path);
         DateTime whitetime=Directory.GetLastWriteTime(path);
         label1.Text=CreateTime.ToString()+"\n"+LastAccessTime.ToString()+"\n"+LastWriteTime.ToString();

法二：DirectoryInfo di=new DirectoryInfo(@"D:\HQ");
label1.Text=di.CreationTime.ToString()+"\n"+di.LastAccessTime.ToString()+"\n"+di.LastWriteTime();

//修改文件夹的相关属性
法一：string path = @"D:\HQ";
         Directory.SetCreationTime(path,new DateTime);
         Directory.SetLastAccessTime(path,new DateTime);
         Directory.SetLastWriteTime(path,new DateTime);

法二：DirectoryInfo di= new DirectoryInfo(@"D:\HQ");
label1.Text = di.SetCreationTime.ToString()+"\n"+di.SetLastAccessTime.ToString()+"\n"+di.SetLastWriteTime.ToString();

//移动文件夹
法一：Directory.Move("源路径","目标路径");
法二：DirectoryInfo di=new DirectoryInfo("源路径");
di.MoveTo("目标路径");

二、文件操作

File类,FileInfo类

创建,删除,复制,移动,改名,获得扩展名,获得文件名,获得全路径,是否存在,打开,关闭,修改辅助属性,获得辅助属性

创建：file.Create();/file.CreateText();

删除：file.Delete();

复制：file.Copy();

移动：file.Move();

改名：file.MoveTo();

file.CopyTo();

获得扩展名：this.Text=file.Extension;

获得文件名：this.Text=file.Name;

获得全路径(获得文件全名)：this.Text=file.FullName;

是否存在：bool isExisted=file.Exists();

this.Text=isExisted;

打开：file.Open();---OpenOrCreate

关闭：stream.Close;

修改辅助属性：file.GetAttributes();

获得辅助属性：file.SetAttributes();

三、文件读写

FileStream类,StreamWriter类,StreamReader类

2015.7.25

Color color = Color.Red;
Pen p = new Pen(color, 5);
e.Graphics.DrawEllipse(p, 100, 100, 200, 200);//轮廓是红色的圆形
Color color = Color.FromArgb(255, 255, 0);//轮廓色变为黄色
p.Color = Color.FromArgb(255, 0, 0);
e.Graphics.DrawEllipse(p, 100, 100, 400, 200);//轮廓色是黄色的椭圆形
e.Graphics.DrawRectangle(p, 100, 100, 400, 200);//轮廓色是黄色的椭圆形外面套一层轮廓色是红色的矩形
p.Color = Color.Blue;
e.Graphics.DrawLine(p, 100, 100, 500, 300);//给上述矩形画出对角线
e.Graphics.DrawPie(p, 100, 100, 200, 200, 0, 90);//1/4圆的扇形
e.Graphics.DrawArc(p, 100, 100, 200, 200, 0, 90);//与上述扇形角度相同的弧
Point[] ps = new Point[5];
ps[0] = new System.Drawing.Point(100, 100);
ps[1] = new System.Drawing.Point(120, 120);
ps[2] = new System.Drawing.Point(140, 110);
ps[3] = new System.Drawing.Point(160, 130);
ps[4] = new System.Drawing.Point(180, 125);
e.Graphics.DrawLines(p, ps);//顺时针坐标构建折线

SolidBrush brush = new System.Drawing.SolidBrush(Color.Red);
e.Graphics.FillEllipse(brush, 100, 100, 200, 200);//红色实心圆
e.Graphics.Rectangle(brush, 100, 100, 400, 200);//红色实心矩形
e.Graphics.FillPie(brush, 100, 100, 200, 200, 0, 30);
brush.Color = Color.Orange;
e.Graphics.FillPie(brush, 100, 100, 200, 200, 30, 45);
brush.Color = Color.Blue;
e.Graphics.FillPie(brush, 100, 100, 200, 200, 75, 120);
brush.Color = Color.Green;
e.Graphics.FillPie(brush, 100, 100, 200, 200, 195, 145);
brush.Color = Color.Purple;
e.Graphics.FillPie(brush, 100, 100, 200, 200, 340, 20);//饼状图

SolidBrush brush = new System.Drawing.SolidBrush(Color.Blue);
Font font = new System.Drawing.Font("楷体", 18);
string s = "他是一个很棒的少年";
e.Graphics.DrawString(s, font, brush, 100, 100);//显示单行文本,字体为楷体,大小为18磅,颜色为蓝色
Point Start = new System.Drawing.Point(0, 0);
Point End = new System.Drawing.Point(200, 100);
LinearGradientBrush brush = new LinearGradientBrush(start, end, Color.Blue, Color.Green);
string s = "他是一个很棒的少年";
e.Graphics.DrawString(s, font, brush, 100, 100);//渐变色效果,字体为楷体,大小为18磅,颜色为蓝绿渐变

Image img = Image.FromFile("文件名");---文件名是源文件复制到另一文件夹并重命名后的文件名
e.Graphics.DrawingImage(img,100,100);//显示图片(画图)

2015.8.9-2015.8.11

【复习课】

一、新建网站

1.B/S结构

(1)浏览器

(2)Web服务器

①Web服务器软件

<1>功能：a.接收请求 b.响应请求

<2>模型：类似于饭店的服务员

②软件程序

③.NET框架

<1>功能：执行c#代码

<2>模型：类似于饭店的厨师

(3)数据库服务器

2.位置

(1)文件系统：IIS Express作为Web服务器软件

(2)HTTP系统：IIS作为Web服务器软件

二、Repeater

1.是什么---重复器，把多条数据展现出来

2.编程结构

(1)后端

①DataSource属性

②DataBind()方法

(2)前端

①结构

HeaderTemplate/FooterTemplate/ItemTemplate/AlternatingItemTemplate

②语法

<1><%# Eval("属性名") %>

<2><%# Eval("属性名","格式化字符串") %>

<3><%# 方法名() %>

③技巧

<1>后端方法的定义和调用

<2>扩展属性的定义和调用

<3>分页

★两个最重要的变量：
PageSize---每页显示的记录条数
PageNO---当前要显示第几页

★两个重要的函数：
1.获取指定页面记录的函数。
2.获取总页数的函数。

▲最核心的："上一页"和"下一页"
1.使用超链接HyperLink控制。
2.使用代码给HyperLink的NavigateURL赋值。
linkNext.NavigateUrl = "Default.aspx?pageno=" + (nowPage + 1).ToString();
linkPrev.NavigateUrl = "Default.aspx?pageno=" + (nowPage - 1).ToString();
nowPage是用Request["pageno"]获取过来的当前页号。

★完善1：控制"上一页""下一页"是否可用
1.是否是首页。nowPage==1??
2.是否是尾页。调用获取总页数的函数，看看nowPage是否与之相等

★完善2：加"首页"和"尾页"
1.首页，是超链接，总是导到第一页去。
linkFirst.NavigateUrl = "Default.aspx?pageno=1";
2.尾页，是超链接，总是导到与总页数相同的那相页号上去。
linkLast.NavigateUrl = "Default.aspx?pageno=" + pageCount;

★完善3：随机跳转
1.文本框+按钮
2.使用Response.Redirect("地址")跳转
3.判断边界。小于第一页，大于最后一页。
        int goNO = Convert.ToInt32(txtPageNo.Text);
        if (goNO < 1)
        {
            Response.Redirect("Default.aspx");
        }
        else if (goNO > GetPageCount())
        {
            Response.Redirect("Default.aspx?pageno=" + GetPageCount());
        }
        else
        {
            Response.Redirect("Default.aspx?pageno="+goNO);
        }

三、ASP.NET内置对象

1.Response

Write("内容")/Redirect("地址")/End()

2.Request

Request Form("键")/Request QueryString("键")/Request["键"]

3.Session

(1)位置：存在服务器端

(2)作用：保存状态

(3)特点：①每个会话有独立的Session②Session有自动过期时间

(4)语法：①赋值与取值---Session["键"],取值的时候一定要记得强制转换

②清空Session---a.清空单个Session键的值：Session["键"]=null;

b.清空所有Session：Session.Abandon()

(5)其他工具：Cookie,ViewState

(6)类比Cookie,Session,ViewState

Cookie---病人口头描述，医生给予诊断

Session---医生有助手帮忙记录病案

ViewState---医生亲自记录病历，病人复诊时携带病历供医生翻阅参考

4.Application

(1)位置：服务器

(2)作用：存取全局化数据

(3)特点：①所有客户端共享数据②无自动过期时间

5.Server

MapPath---路径映射,把相对路径转成绝对路径

四、基本控件(part1)---123记忆

(一)1个文本框---TextBox

1.拥有Label所有的属性

2.TextMode---SingleLine,MultiLine,Password

3.ReadOnly

4.MaxLength

(二)2个标签---Label,Literal

1.Label

①前景与背景

BackColor,ForeColor,Font(Name,Size,Bold,Italic,UnderLine)

②边框

BorderWidth,BorderColor,BorderStyle

③其它

Text,Visible,Enable,CssClass

④布局

Width,Height

2.Literal---Text,Visible

(三)3个按钮---Button,LinkButton,ImageButton

1.Button

①拥有Label所有的属性

②OnClientClick

2.LinkButton

①拥有Label所有的属性

②OnClientClick

3.ImageButton

①拥有Label所有的属性

②OnClientClick

③ImageUrl

(四)两个最重要的---超链接,图片

1.超链接HyperLink
①属性

<1>拥有Label所有的属性

<2>文字Text

<3>链接NavigateUrl

<4>目标Target

<5>图片ImageUrl

②应用

文字超链接,图片超链接

2.图片Image

①属性

<1>拥有Label所有的属性

<2>ImageUrl

②类比

ImageButton,HyperLink,Image

(五)补充

1.Label控件(类)属性
(1)布局
Width: 既可用像素，也可用百分比类型：Unit
Height:既可用像素，也可用百分比类型：Unit---Unit.Pixel(像素数) Unit.Percentage(百分比数)

(2)背景与前景
BackColor：(Color)背景色
ForeColor：(Color)文字色
Font:
Name---字体名称
Size---字体大小
Bold---粗细
Italic---倾斜
UnderLine---下划线

(3)边框
BorderColor,BorderStyle

(4)其它
Text---标签文字
Visable---是否可见
Enabled---是否可用
CssClass---样式表中的class

2.Literal标签：
Text---标签上的文字
Visible---是否可见

3.文本框TextBox
(1)拥有Label的所有属性
(2)TextMode---文本框的类型
(3)SingleLine---单行
(4)Multiline---多行
(5)Password---密码
(6)ReadOnly---是否只读
(7)MaxLength---最大输入的字符串

4.Button普通按钮
(1)拥有Label的所有属性
(2)OnClientClick---按钮点击时要执的JS脚本
5.LinkButton超链接按钮
(1)拥有Label的所有属性
(2)OnClientClick---按钮点击时要执的JS脚本
6.ImageButton图片按钮
(1)拥有Label的所有属性
(2)OnClientClick---按钮点击时要执的JS脚本
(3)ImageUrl---图片路径

五、基本控件(part2)

(一)下拉列表DropDownList

1.把内容填进去

(1)可视化---Item属性

(2)代码

①循环逐项添加

<1>查询出数据来

<2>填进下拉列表

a.循环查出来的数据

b.造ListItem对象

c.把ListItem对象加到下拉列表中---Items.Add();/Items.Insert();

②绑定

<1>查询出数据来

<2>填进下拉列表

a.设置DataSource属性

b.设置DataTextField,DataValueField属性

c.调用DataBind()方法绑定

(3)属性及方法

<1>Items---Clear(),Add(),Insert(),Remove(),RemoveAt()

<2>DataSource

<3>DataTextField

<4>DataValueField

<5>AppendDataboundItem

<6>DataBind()

2.把选中的值取出来

(1)前提:在Page_Load中，使用if(!IsPostBack){}把代码包括起来

(2)使用属性:SelectedValue,SelectedItem,SelectedIndex---适用范围:单选情况

(3)遍历查找---适用范围:多选情况
①foreach遍历DropDownList1.Items集合
②判断每一项的li.Selected==true
③把li.Text或li.Value取出来

(4)属性及方法
SelectedValue,SelectedIndex,SelectedItem,AutoPostBack

3.设定某项为选中项
(1)使用属性:SelectedValue,SelectedIndex---适用范围:单选情况
(2)遍历---适用范围:多选情况
①foreach遍历DropDownList1.Items
②判断每个li.Value==要选中值
③li.Selected=true

4.属性及方法
SelectedValue,SelectedIndex,SelectedItem,AutoPostBack

(二)列表框ListBox

1.功能与DropDownList相似
(1)把内容填进去
(2)把选中的值取出来
(3)设定某项为选中项
2.个性化属性
SelectionMode
Single---单选模式
Multiple---多选模式

(三)单选列表RadioButtonList

1.功能与DropDownList相似
(1)把内容填进去
(2)把选中的值取出来
(3)设定某项为选中项
2.个性化属性
(1)RepeatDirection---布局的方向
Vertical---竖直
Horizontal---水平
(2)RepeatLayout布局方式
Table---表格布局(tr,td)
Flow---流式布局(span)

(四)复选列表CheckBoxList

1.功能与DropDownList相似
(1)把内容填进去
(2)把选中的值取出来
(3)设定某项为选中项
2.个性化属性
(1)RepeatDirection---布局的方向
Vertical---竖直
Horizontal---水平
(2)RepeatLayout---布局方式
Table---表格布局(tr,td)
Flow---流式布局(span)

六、四个控件---DropDownList,ListBox,RadioButtonList,CheckBoxList
(一)三大功能：
1.把数据填进去
(1)可视化
(2)代码
①循环数据，逐项添加
<1>循环查出来的集合
<2>每次循环造一个ListItem对象
<3>把ListItem对象加到Items集合中去

②数据绑定
<1>把查出来的集合赋给DataSource属性
<2>设置DataTextField,DataValueField
<3>调用DataBind()

(3)属性和方法
Items
DataSource
DataTextField
DataValueField
DataBind()
AppendDataBoundItem

(4)技巧
添加“请选择”项

2.把选中的值取出来
(1)前提：在Page_Load中加上if(!IsPostBack){}
(2)使用属性取
SelectedValue,SelectedItem,SelectecIndex
(3)遍历取
①遍历列表中的每一项(Items集合)
②在循环中判断每一项的Selected属性(li.Selected==true)
③取出选中项的值(li.Value/li.Text)

(4)属性及方法
SelectedValue
SelectedItem
SelectedIndex

(5)技巧
防止每次执行都会出现：总是取出第一项，列表中的数据每次会增加

3.设定某项为选中项
(1)使用属性设置
SelectedValue,SelectedIndex
(2)遍历设置
①遍历列表中的每一项(Items集合)
②判断每一项的值是不是要设为选中的项的值(li.Value == "")
③给每一项的Selected赋值(li.Selected=true)
(二)个性化的属性：
1.ListBox
SelectionMode=Single/Multiple
2.RadioButtonList/CheckBoxList
RepeatDirection---布局方向
RepeatLayout---使用Table布局还是Flow布局
RepeatColumns---一行显示几列

(三)下拉列表联动：
1.编写三个方法，用来填充三个下拉列表
2.调用三个方法
(1)在Page_Load中调用
注意：①要加if(!IsPostBack){}②调用的先后次序
(2)在列表的事件中调用
注意：①调用哪几个方法，第一级调后两级的填充，第二级调用第三级填充
②要设置下拉列表的自动提交AutoPostBack
(四)修改界面要做三件事：
1.添加民族
2.查出这个人的信息，送到相应的控件中
3.编写更新代码，送回数据库，跳转页面

2015.8.12

服务器控件调用JS
一、两类JS的触发设计
1.提交之前的JS --- 加js的事件
↓C#处理程序
2.提交之后的JS --- 用C#代码向页面上写<script>...</script>

二、除了Button之外的其它控件如何触发JS？
1.直接在服务端控件的HTML代码中加上JS的事件---Button是个例外，它会自己把代码里OnClick转为OnClientClick实现触发
2.在C#代码界面中的PageLoad中，使用“控件名.Attributes.Add("键","值");”

※提交之前的JS：

在窗体界面拖拽进一个Button控件

aspx界面：

function test(){

alert("asdfasdf");

return false;

}

</script>

<div>

<asp:Button ID="Button1" runat="server" OnClientClick="return test()" Text="Button"/>

</div>

在窗体界面拖拽进一个Label控件

<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>

return false改为return true

aspx.cs界面：

Label1.Text=DateTime.Now;

运行起来点Button弹出对话框，点“确定”Label的位置显示当前时间

※提交之后的JS：

在上述基础上，在窗体内拖拽进一个Literal控件

<asp:Literal ID="Literal1" runat="server"></asp:Literal>

aspx.cs界面里:

Literal.Text="<scirpt language=javascript>alert('"+DateTime.Now.ToString()"+正确吗?')</script>";---c#代码先给Label赋值然后又给Literal赋值

运行起来点Button弹出对话框，点“确定”Label的位置显示当前时间并弹出另一对话框询问当前时间是否正确

※直接在服务端控件的HTML代码中加上JS事件

在窗体界面拖拽进一个TextBox控件，Text写上“必填”

aspx界面：

<asp:TextBox ID="TextBox1" οnfοcus="this.value=";" οnblur="document.getElementById('Label1').innerHTML=this.value;" runat="server">必填</asp:TextBox>---Label的内容会随着TextBox输入内容的改变而改变

可加JS属性的其他控件：

Label：<asp:Label ID="Label2" οnclick="alert('asdfasdf')" runat="server">必填</asp:Label>

RadioButton(RadioButton一次可同时添加两个，使用Input(Radio)可一次添加多个RadioButton)：

<asp:RadioButton ID="RadioButton1" οnclick="document.getElementById("Button2").removeAttribute('disabled')" runat="server" GroupName="aaa" Text="同意"/>

<asp:RadioButton ID="RadioButton2" οnclick="document.getElementById("Button2").setAttribute('disabled','disabed')" runat="server" Checked="True" GroupName="aaa" Text="不同意"/>

设置GroupName可使两个按钮互斥

<asp:Button ID="Button2" runat="server" Enabled="False" Text="下一步"/>

---点“同意”可进行下一步，点“不同意”则不能进行下一步

※在C#代码界面中的PageLoad中，使用“控件名.Attributes.Add("键","值");”

以Label为例：

aspx界面内：

<asp:Label ID="Label" runat="server" Text="Label"></asp:Label>

c# Page_Load代码界面：

Label1.Attribute.Add("onclick","alert('"+DateTime.Now.ToString()+"')");---添加事件

网页浏览状态下点Label弹出对话框显示当前时间，且刷新时同步显示当前时间

如果原语句写成Label1.Attribute.Add("onclick","show()");

那么aspx界面需在head里面写入：

function show(){

alert('asdfasdf');

}

</script>

---也可实现网页浏览状态下点击Label弹出对话框

Label1.Attribute.Add("style","background-color:red;font-size:18px;");---添加样式

网页浏览状态下Label字样被红色覆盖

2015.8.15

文件上传
控件：
FileUpload控件，包括界面、方法和属性
Button/LinkButton/ImageButton

FileUpload控件：
1.SaveAs("要上传到服务器的绝对路径") 方法：上传文件。
般需要使用Server.MapPath()进行相对路径与绝对路径之间的转换。

2.FileName属性：要上传文件的绝文件名，不带路径。

3.FileBytes属性：上传文件的内容，即二进制数据。

场景：
一、单文件上传到服务器硬盘
最简单的上传：
        string path = Server.MapPath( "uploads/aaa.txt"); //需要路径映射
        FileUpload1.SaveAs(path);
  问题：所有上传文件都叫aaa.txt，如何保持文件原有的名字？

优化一：使用FileUpload的FileName属性，获取出上传文件的客户端的名字
        string fileName = FileUpload1.FileName; //取得文件上传之间在客户端的名字
        string path = Server.MapPath("uploads/" + fileName);
        FileUpload1.SaveAs(path);
  问题：如果不同用户上传同一文件名的文件，如何避免覆盖？
优化二：不同用户在同一时间传相同的文件名。
在文件名中使用用户名加以区分：
        string fileName = DateTime.Now.ToString("yyyyMMddhhmmss") +Session["user"].ToString() + FileUpload1.FileName; //取得文件上传之间在客户端的名字
        string path = Server.MapPath("uploads/" + fileName);
        FileUpload1.SaveAs(path);
  问题：上传文件大于4M就会报错。//默认上传文件的最大大小是4096K
优化三：扩容。
在Web.Config中配置上传请求的最大长度。
    <system.web>
      <httpRuntime maxRequestLength="40960"/>   //默认是4096K
    </system.web>

作业：回去查找资源：C#如何上传大文件？

二、多文件上传到服务器硬盘
（一）简单实现：
思路：遍历页面Form中的每个控件，判断是否是FileUpload，如果是的话就把它强制转化为FileUpload类型，再按单文件上传逐个上传即可。
        int i = 1; //上传文件的流水号
        foreach (Control ctrl in this.form1.Controls)  //遍历Form中的每个控件
        {
            if (ctrl is FileUpload) //看一下ctrl 对象是不是FileUpload类型
            {
                FileUpload file = (FileUpload)ctrl;  //强制转化为FileUpload类型

    //单文件上传的代码
                string fileName = DateTime.Now.ToString("yyyyMMddhhmmssms") +i.ToString("0000") + file.FileName;
                string path = Server.MapPath("uploads/" + fileName);
                file.SaveAs(path);

                i++;
            }
        }
  问题：没有选择上传文件的也会在服务器端生成一个0k的文件。

（二）优化：把没有选择上传文件的给跳过去.
        int i = 1;
        foreach (Control ctrl in this.form1.Controls)
        {
            if (ctrl is FileUpload) //看一下ctrl 对象是不是FileUpload类型
            {
                FileUpload file = (FileUpload)ctrl;

                if (file.HasFile)  //判断每个控件中是否选择了上传的文件。
                {
                    string fileName = DateTime.Now.ToString("yyyyMMddhhmmssms") + i.ToString("0000") + file.FileName;
                    string path = Server.MapPath("uploads/" + fileName);
                    file.SaveAs(path);

                    i++;
                }
            }
        }
三、上传文件到数据库的Image字段
第一步：把文件的二进制数据取出来。FileUpload1.FileBytes (byte[])
第二步：送到数据库中去。 //ADO.NET或Linq to Sql

四、从数据库中的Image字段中取出来，显示在页面上。
1.选做一个显示图片的页面。例如：ShowPic.aspx
这个页面根据传来的主键值，查询出图片数据，并Response.OutputStream显示在界面。
    protected void Page_Load(object sender, EventArgs e)
    {
        if (Request["id"] != null)
        {
            string index = Request["id"].ToString();
            //主要做是：
            //1.读取某一条Photo表的数据记录。
            var query = _Context.Photo.Where(p => p.Ids.ToString() == index);
            Photo data = query.First();
            byte[] pic = data.Content.ToArray();
            //2.把二进制数据直接输出到界面上。
            Response.OutputStream.Write(pic, 0, pic.Length);    //向输出流里输出二进制数据
            Response.End();
        }
    }
2.在另一个界面上，放一个Image控件，让该Image控件的ImageUrl指向上面的那个页面，并传指定的值过去。
HTML代码：
        <asp:DropDownList ID="DropDownList1" runat="server">
        </asp:DropDownList>
        <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="显示" />
        <br />
        <asp:Image ID="Image1" runat="server" />
C#代码：
//“显示”按钮上的代码
    protected void Button1_Click(object sender, EventArgs e)
    {
        Image1.ImageUrl = "ShowPic.aspx?id=" + DropDownList1.SelectedValue;
    }

如何做验证码？
思路：
1.需要两个页面。一个页面是用来画验证码的；另外一个页面是用来展现文本框和验证码的。
2.使用画图技术中的知识点，画随机数图片。随机数需要事选保存在Session中，检查验证码是否正确就要使用Session中的值进行对比。
3.点击验证码刷新如何实现？
         function dochange(img) {
            var temp = Math.random(); //JS生成随机数的代码。
            img.setAttribute("src","yzm.aspx?id="+temp);
   }

作业：找C#生成验证码的代码。

2015.8.16

生成流水号：

string prefix = "p" + DateTime.Now.ToString("yyyyMMdd");//生成当天流水号前缀
//查当天最大的流水号(两种情况：1.已有流水号 2.尚无流水号)
int maxFlow = 0;
var query = _Context.Info.Where(p => p.Code.StartWith(prefix));
if (query.Count() > 0)
{
       //已有流水号---找到最大流水号
         query=query.OrderByDescending(p=>p.Code);//按流水号降序排列
         string maxCode=query.First().Code;//获取最大流水号
         maxFlow=Convert.ToInt32(maxCode.Substring(maxCode.Length-3));//截取并转换出现有最大流水号
}
else
{
       //尚无流水号
         maxFlow = 1;
}
//组合生成新的流水号
  string flowCode = prefix+(maxFlow + 1).ToString("000");
//显示在文本框中
  TextBox1.Text = flowCode;

组合查询(汽车表为例)：

private MyDBDataContext_Context=new MyDBContext;
private void FillBrand()
{
        var query=_Context.Brand;
        ddlBrand.DataSource=query;
        ddlBrand.DataTextfield="Brand_Name";
        ddlBrand.DataValuefield="Brand_Code";
        ddlBrand.DataBind();
}
protected void Page_Load(object sender, EventArgs e)
{
       if(!isPostBack)
       {
              FillBrand();
         }
}

---核心代码---
private void button1_Click(object sender, EventArgs e)
{
      var query1=_Context.Car.AsQueryable();//根据名称查---默认情况下应当是全集
      var query2=_Context.Car.AsQueryable();//根据系列查
      var query3=_Context.Car.AsQueryable();//根据油耗查
      //根据输入框的填写情况来完善上面三个查询条件
        if(txtName.Text.Trim().Length>0)
        {
              query1=query1.Where(p=>p.Name.Contains(txtName.Text));
         }
         if(ddlBrand.SelectedValue!="-1")
          {
               query2=query2.Where(p=>p.Brand==ddlBrand.SelectedValue);
           }
         if(txtOil.Text.Trim().Length>0)
          {
                query3=query3.Where(p=>p.Oil==Convert.ToDecimal(txtOil.Text));
           }
//三个查询条件是逻辑与的关系，可以使用集合操作的交集来实现
var query=query1.Intersect(query2).Intersect(query3);
//绑定显示
Repeater1.DataSource=query;
Repeater1.DataBind();
}

转载于:https://www.cnblogs.com/kxy3-1314/p/4551721.html

weixin_30493321

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网页HTML到8.20前

2015.6.4HTML：超文本标记语言 CSS：样式表 JavaScript：脚本HTML标签---成对儿出现的是双标签元素，单个儿出现的是单标签元素一、通用标签1.格式控制标签<font></font>文字color-文字颜色face-文字字体size-文字大小<b></b>加粗<i>&...
复制链接

扫一扫