Web前端基础

现在的位置: 首页 > 综合 > 正文

RSS

2018年03月22日 ⁄ 综合 ⁄ 共 28201字 ⁄ 字号小中大 ⁄ 评论关闭

第一讲 HTML

1、HTML（超文本标记语言）

Html语言中是由标签组成的

Html中的数据都会封装到标签中，因为可以通过标签中的属性值的改变对封装内数据进行操作

确定HTML代码范围：<html></html>

在该范围中可以定义两部分内容：一部分是头，一部分是体

<html>

</html>

Head：网页的一些属性信息，比如，标题

Body：网页显示的数据

标签特点：

对于数据进行封装，那么就有开始标签和结束标签

但是也有一些标签只体现单一功能，所以不需要结束标签，规范中要求标签必须要结束，所以这样的标签在内部结束

如：<br/> 换行<hr/> 水平线<img/> 图像 <input/>

标签格式：

<标签名属性名=“属性值”> 数据</标签名>

<标签名属性名=“属性值”/>

创建标签：

字体<font>

特殊部分：如果在页面显示一些特殊符号，都要进行转义。

<：<

>:>

&:&

空格：

标题：<h1><h2><h3>.......<h6>

2、列表标签<dl>

dt——上层项目

dd——下层项目

<body>

<dl>

</body>

效果：

列表中项目符号对应的标签

<ol>——数字标签

<ul>——符号标签

<li>——具体项目内容标签，此标签只在<ol><ul>中有效

通过type属性更改项目符号，如果想做出效果更好的列表，如黑色圈点图片表示，就要用到CSS

例：<ol type="i">

</ol>

</ul>

截图：

3、图像

图像标签<img>

例：<img src="add.png" alt="图片说明文字"/ >

截图：

4、表格

表格标签<table>

组成：标题标签：<caption>，给表格提供标题

表头标签：<th>,一般表示对表格第一行或者第一列进行初始化，就是粗体使用，并不常用

行标签：<tr>

单元格标签<td>加载到行标签的里面，可以简单理解为，先有行，在行中在加入单元格

表格中默认都有一个tbody标签

例：

<tr>

</tr>

</tr>

</table>

每个表格可以有一个表头，一个表尾或多个表体（即正文），分别以THEAD、TFOOT和TBODY元素表示

TBODY的作用是：可以控制表格分行下载，从而提高下载速度。（网页的打开是先表格的内容全部et=下载完毕后，才显示出来，分行下载可以先显示部分内容，这样会减少用户等待时间）使用TBODY的目的是可以使得这些包含在内的代码不用在整个表格解析后一起显示，就是说如果多个行，那么如果得到一个TBODY行，就可以显示一行

5、超链接

超链接标签

两种用法：

（1）超链接<a herf=””>

例子：<a herf=”http://www.sina.com.cn” targrt=_blank”> 新浪</a>

Herf属性值可以是url，也可以是本地文件，target属性是指定在哪个窗口或者帧中打开，

当被点击后，会启动引擎对应解析程序，去查找指定主机的hosts文件，如果没有找到该主机对应的ip地址，去公网的DNS服务器找对应的IP地址

例：<a href =”mailto:abc@sohu.com?subject=haha”>联系我们</a>

当点击超链接时，就会出现邮件相关联的解析程序，如outlook

（2）定位标记<a name=” ”>

一般是在本页面中使用，当网页内容过长，定位标记会比拖动滚动条方便快捷

注：定位标记要和超链接结合使用才有效

例子：<a name=”标记”> 标记位置</a>

<p>很多空行制造网页过长的效果</p>

<a href=”#标记”>返回标记位置</a>

注：使用定位标记时一定在href值的开始加入#标记

6、表单

表单标签

表单标签是最常用的标签，用于与服务器端的交互

<input>输入标签接受用户输入信息

其中的type属性指定输入标签的类型

（1）文本框 text：输入的文本框信息直接显示在框中

（2）单选框radio：如：性别选择

注意：要被选中，必须给单选框定义一个属性name，当有多个单选框时，只能有一个被选中，那么这些单选框的name值必须相同

（3）复选框checkbox：如：兴趣选择

（4）隐藏字段hidden：在页面上不显示，但在提交的时候随其他内容一起提交

（5）提交按钮sumbit：用于提交表单中的内容

（6）重置按钮reset：将表单中的内容设置为初始值

（7）按钮button：可以为其自定义事件

（8）文件上传file：后期扩展内容，会自动生成一个文本框，和一个浏览按钮，用于附件生成

（9）图像 image 为了避免提交按钮难看，它可以代替sumbit按钮，可以通过image的src属性连接一个好看的按钮图片完成提交效果

（10）选择标签<select>提供用户选择内容，如：用户所在的省市，size属性是为显示项目个数

（11）密码框password:输入的文本不可见

子项标签<option>属性 selected没有属性值，加在子项上，其中一个子项上子项

（12）文本区域<textarea>

注：

表单组件通常都需要定义name和value属性，因为要将数据发送给服务端，服务端只有知道了该name的值才可以对提交的数据进行分别获取

Form标签中的常见属性

Action:指定数据提交的目的地，method提交方式，两种常用值get和post，get为默认

Get和post的区别

Get：会将提交的数据显示在地址栏上，并且提交的数据的体积受地址栏的限制，对于敏感信息不安全，会将提交信息封装在请求行，也就是http消息头之前

Post：不会将数据显示在地址栏上，可以提交大体积数据，对应敏感信息安全，会将提交信息封装在数据体中，也就是http消息头之后的空行后

对于服务器而言，

表单提交尽量用post，因为涉及到编码问题，因为tomcat服务端默认的解码是ISO8859-1

对于post提交的中文在服务端可以直接使用setCharacterEncoding(“gbk”)就可以解决

对于get提交的中文，在服务端只能通过ISO8859-1将数值编码一次，在通过特定的码表如GBK解码

使用表单组件不一定要定义<form>标签，只有需要将数据进行服务端的提交的时候才会用到form标签

例子：

<form>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

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

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

</td>

</tr>

<tr>

<td><input type="checkbox" name="hob" value="java"/>java

<input type="checkbox" name="hob" value="jsp"/>jsp

<input type="checkbox" name="hob" value="html">html

</td>

</tr>

<tr>

</select>

</td>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</form>

</fieldset>

截图：

7、正则表达式

是一种专门用于操作字符串的规则，通过一些符号来表示，简化对字符串的复杂操作

弊端：阅读性较差

常见的操作

（1）匹配： String matches(regex)

（2）获取（查找）：Pattern，Matcher

Pattern p=Pattern.compile(regex);

Matcher m=p.matcher(String);

While(m.find())

{

System.out.println(m.group());

}

（3）切割：String split(regex);

（4）替换：String replaceAll(regex,str);

网页爬虫：

通过网络以及IO方式读取网络的源文件，并通过规则获取网页中符合规矩的数据

比如：mail爬虫、

正则表达式组的含义，将部分进行封装以便重用。\\num 反向引用指定组

示例：IP地址排序

第二讲CSS

1、CSS层叠样式表

将网页中的样式分离出来，完全由CSS控制

增强样式的复用性以及可扩展性

格式：选择器：{属性名：属性值属性名：属性值.......}

CSS和html代码结合的四种方式

（1）每一个html标签都有一个style属性

（2）当页面有多个标签有相同样式的时候，可以进行复用

<style>

CSS代码

</style>

3、当多个页面中的标签样式相同时，还可以将样式单独封装成一个CSS文件

通过在每个页面中定义

<style>

@import url(“1.css”);

</style>

4、通过html中head标签的link标签连接一个css文件

技巧：为了提高相同样式的复用性以及扩展性，可以将多个标签样式进行单独定义，并封装成CSS文件

P.css div.css.......

在一个CSS文件中使用CSS的import将多个标签样式导入，然后在html页面上，使用line标签导入总的css文件即可

例如：

1.Css

@import url（“p.css”）；

@import url（“div.css”）;

选择器：其实就是样式要作用的标签容器，当样式分离后，html作用在于用标签封装数据，后将css加载到指定标签上

选择器的基本分类：

1、标签选择器：其实就是html中的每一个标签名

2、类选择器：其实就是每一个标签中的class属性，用.表示

只用来给CSS所使用，可以对不同标签进行相同样式设定

3、ID选择器：其实就是每一个标签中的ID属性，但是要保证ID的唯一性

ID不仅可以被CSS所使用，还可以被javascript所使用

选择器优先级

ID>class>标签

扩展选择器：

1、关联选择器：其实就是对标签中的标签进行样式定义。选择器选择器

2、组合选择器：对多个选择器进行相同样式定义，将多个选择器通过，隔开形式

3、伪元素选择器：其实就是元素的一种状态。

a:link:超链接被点前的状态

A:visited：超链接点击后的状态

A:hover：悬停在超链接上

A:active：点击超链接时

在定义这些状态时有一个顺序： LVHA

CSS滤镜：其实通过一些代码完成丰富了一些样式

当使用到CSS更多属性的时候还需要查阅 CSS API

网页设计的时候：div+css

Div：行级区域

Span：块级区域

P:行级区域，有空行

第三讲DOM编程

DOM：document object model 文档对象模型

其实就是将一些标记型的文档以及文档中的内容当成对象。

为什么要将这些文档以及其中的标签封装成对象呢？

因为可以在对象中定义其属性和行为，可以方便操作这些对象

Dom三层模型：

Dom1：将html文档封装成对象

Dom2：将xml文档封装成对象

Dom3：将xml文档封装成对象

Html

{--Head

{--title

{--base

{--mata

{--link

{--style

{--body

{--table

{--tbody

{--tr

{--td

{--th

{--div

{--form

{--a

DOM树节点

DHTML：动态html，是多个技术的综合体。

（Html CSS Dom Javascript）

Html：将数据进行封装

Dom：将标签封装成对象

CSS：负责标签中数据的样式

JavaScript：将三者进行融合，通过程序设计的方式来完成动态效果的操作

xmlHttpRequest -->Ajax

Html、xhtml、xml这些都是标记型文档

通过标签层次，可以形象的看做是一个树形结构，那么我们也称标记型文档加载进内存的是一棵DOM树

这些标签以及标签的数据都是这棵树上的节点。

当标记型文档加载进内存，那么内存就有了一个相应的DOM树

DOM对于标记性文档解析有一个弊端就是文档过大，相对消耗资源。

对于大型文档可以使用SAX这种方式进行解析

节点类型：

标签型节点：类型1

属性节点：类型2

文本型节点：类型3

注释型节点：类型8

Document：类型9

注意：标签之间存在空行时，会出现一个空白的文本节点，在获取节点时一定要注意

节点的关系：

父节点

子节点：childNotes直接子节点，返回的是一个节点对象数组

兄弟节点：上一个兄弟节点（previousSibling）、下一个兄弟节点（nextSibling）

获取节点可以通过节点的层次关系完成，也可以通过document对象完成

getElementById:通过id属性值获取对应的节点对象，如果有多个id值相同，获取到的是第一个id所属对象，所以尽量保证id唯一性,返回的是一个对象。

getElementsByName:通过标签的name属性值获取对象，返回一堆对象，其实就是一个对象数组

getElementsByTagName：既没有id也没有name时，可以通过标签名来获取对象，返回的是一个对象，其实是一个数组，大多容器型标签都具备这个方法

例1：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

function show()

{

var obj=document.getElementById("divid");

obj.style.backgroundColor="red";

var name=obj.nodeName;

var type=obj.nodeType;

var value=obj.nodeValue;

alert(name+"-"+type+"-"+value);

}

function show2()

{

var obj=document.getElementById("divid");

var parent=obj.parentNode;//获取父节点

//getNode(parent);

var children=obj.childNodes;//获取子节点

//getNode(children[0]);

//获取兄弟节点

//1、获取上一个兄弟节点

var prenode=obj.previousSibling.previousSibling;

//getNode(prenode);

//2\获取下一个兄弟节点

var nextnode=obj.nextSibling.nextSibling;

getNode(nextnode);

var tds=obj.nextSibling.nextSibling.getElementsByTagName("td");

getNode(tds[0].childNodes[0]);

}

function getNode(node)

{

alert(node.nodeName+"..."+node.nodeType+"..."+node.nodeValue);

}

</script>

</head>

<body>

大家好！！

</div>

<table>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

例2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

function windows()

{

var url=window.location.href;

window.confirm("这是什么啊?");

var name=window.navigator.appVersion;

alert(url+"-"+name);

window.prompt("我是对话框","haha");

window.setTimeout("alert('hahaha')",3000);

}

function ad()

{

window.open("http://www.baidu.com","_blank","resizable=yes,toolbar=yes");

}

function move()

{

window.moveTo(200,300);

}

window.onload=function()

{

alert("onload!");

}

window.onunload=function()

{

alert("onunload!");

}

window.onbeforeonload=function()

{

alert("onbeforeunload ");

}

function key()

{

if(!(window.event.keyCode>=48&&window.event.keyCode<=57))

{

alert("不允许输入非数字！");

window.event.returnValue=false;

}

var node=event.srcElement;

alert(node.type);

}

</script>

</head>

<body>

</body>

</html>

例3：

1、定义数据封装的标签，定义界面

2、确定事件源

3、注册事件

4、事件处理

需求：页面中有一个新闻区域，通过超链接大、中、小，可以让用户改变区域中的字体大小

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

function changeSize(value)

{

var div=document.getElementById("newsid");

//div.style.fontSize=value;

div.className=value;

}

</script>

.max

{ color:#00F;

font-size:24px;

}

.min

{ color:#F0F;

font-size:10px;

}

</style>

</head>

<body>

力量印记现在只在魔古山宝库掉落，智慧印记现在只在恐惧之心，<br />

永春台以及非常小的几率在随机魔古山宝库掉落这个改动应该可以<br />

确保已经能够进入魔古山宝库很长时间的玩家现在会看到更多的智<br />

慧印记。

</div>

<br/>

</body>

</html>

例4：

需求：通过点击实现一个展开闭合效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

//var b=true;

function change()

{

var name=document.getElementsByTagName("div")[0];

/* if(b)

{

name.style.height="8px";

name.style.overflow="hidden";

b=false;

}

else

{

name.style.height="8px";

name.style.overflow="visible";

b=true;

}

// alert(name.nodeName);

if(name.className=="close")

{

name.className="open";

}

else

{

name.className="close";

}

function list()

{

var dt=event.srcElement;

var dl=dt.parentNode;

if(dl.className=="open")

{

dl.className="close";

}

else

{

dl.className="open";

}

</script>

.open

{ overflow:visible;

height:8px;

}

.close

{ overflow:hidden;

height:8px;

}

.dl

{ overflow:hidden;

height:16px;

}

</style>

</head>

<body>

三季稻<br />

　　你有见过一位游戏玩家，因为杀小号而拥有大批粉丝吗？你拥有自己的官方网站，自己的游戏ID命名的歌曲，甚至在淘宝<br />

有出售的T恤吗？没错，他就是三季稻，莫愁前路无知己，天下谁人不识君君。常年游走于暮色森林和荆棘谷的UD法师，联盟<br />

小号的收割者，为阵营平衡做出重大贡献的人。由于他孜孜不倦的努力和名人效应，他把艾萨拉服务器从联盟优势服杀成了<br />

部落优势服。三季稻服务器的联盟曾笑称的对话：“你什么时候开始玩的？”“我是三哥那批的” 据说三季稻服务器的玩家说<br />

三季稻的账号已经出售了，而三哥本人的身份一直是个谜，或许正像网上的留言那样：“不要迷恋哥，哥只是个传说。”<br />

　　遗憾指数：9.5 ★★★★★★★★★☆

</div>

<br />

<dl>

</dl>

</body>

</html>

例5：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

table

{

border:#00F 1px solid;

}

table td

{

border:#003 1px solid;

background-color:#999;

}

table td div

{ background-color:#CCC;

display:none;

}

table td a:link,table td a:visited

{

text-decoration:none;

color:#00C;

}

.open

{

display:block;

}

.close

{

display:none

}

</style>

function list()

{

var a=event.srcElement;

var td=a.parentNode;

var div=td.getElementsByTagName("div")[0];

if(div.className=="open")

{

div.className="close";

}

else

{

div.className="open";

}

</script>

</head>

<body>

<table>

<tr>

<td>

<a href="javascript:void(0)" onclick="list()"> 好友菜单列表</a>

<div>

天空<br />

大地<br />

海洋<br />

虫鱼<br />

鸟兽<br />

</div>

</td>

</tr>

</table>

</body>

</html>

例6：通过页面的按钮可以动态的创建一个表格

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

function createTable()

{

var table=document.createElement("table");

var tbody=document.createElement("tbody");

var tr=document.createElement("tr");

var td=document.createElement("td");

var text=document.createTextNode("单元格一");

td.appendChild(text);

tr.appendChild(td);

tbody.appendChild(tr);

table.appendChild(tbody);

document.getElementsByTagName("div")[0].appendChild(table);

}

function createTab()

{

var table=document.createElement("table");

table.setAttribute("id","tabid");

var row=document.getElementsByName("row")[0].value;

var col=document.getElementsByName("col")[0].value;

for(var i=0;i<row;i++)

{

var tr=table.insertRow();

for(var j=0;j<col;j++)

{

var td=tr.insertCell();

var text=document.createTextNode(i+"-"+j);

td.appendChild(text);

}

document.getElementsByTagName("div")[0].appendChild(table);

event.srcElement.disabled="true";

}

function delrow()

{

var tab=document.getElementById("tabid");

if(tab==null)

{

alert("别框我，表格不存在！！！");

return;

}

var rownum=document.getElementsByName("delrow")[0].value;

if(rownum>0&&rownum<=tab.rows.length)

tab.deleteRow(rownum-1);

else

{

alert("该行不存在,学会数数很重要~");

}

function delcol()

{

var tab=document.getElementById("tabid");

if(tab==null)

{

alert("别框我，表格不存在！！！");

return;

}

var colnum=document.getElementsByName("delcol")[0].value;

if(colnum>0&&colnum<=tab.rows[0].cells.length)

{

for(var x=0;x<tab.rows.length;x++)

{

tab.rows[x].deleteCell(colnum-1);

}

else

{

alert("别框我，表格不存在！！！");

return;

}

</script>

table

{ border:#00F 1px solid;

width:60%;

}

table tr

{ border:#903 1px solid;

background-color:#999;

}

table td

{

border:#0C9; 1px solid;

}

</style>

</head>

<body>

行：<input type="text" name="row" /><br />

列：<input type="text" name="col" /><br />

<br />

<br />

<div>

</div>

</body>

</html>

例7：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

table

{ border:#00C 1px solid;

color:#09F;

width:60%;

}

table th

{ border: #F00 1px solid;

color:#F0C;

font:bold;

}

table td

{

border:#309 1px solid;

color: #000;

}

</style>

表格中按照年龄的顺序进行排序。

思路：

1、每一个人的信息是一行。那么先将行都取出。

2、并对数组中行对象的其中一个单元格进行排序。

3、将排序后的行对象重新添加表格对象中

var b=true;

function sort()

{

//1\获取表格中所有的对象

var table=document.getElementsByTagName("table")[0];

var trs=table.rows;

//2、定义临时容器，将表格中需要参与排序的行对象临时存储

var arr=new Array();//临时容器存储的都是表格行对象的引用

for(var x=1;x<trs.length;x++)

{

arr[x-1]=trs[x];

}

sortt(arr);

var tbody=table.childNodes[1];

if(b)

{

for(var x=0; x<arr.length;x++)

{

tbody.appendChild(arr[x]);

}

b=false;

}

else

{

for(var x=arr.length-1; x>=0;x--)

{

tbody.appendChild(arr[x]);

}

b=true;

}

function sortt(arr)

{

for(var x=0;x<arr.length;x++)

{

for(var y=x+1;y<arr.length;y++)

{

if(parseInt(arr[x].cells[1].innerText)>parseInt(arr[y].cells[1].innerText))

{

var temp=arr[x];

arr[x]=arr[y];

arr[y]=temp;

}

</script>

</head>

<body>

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

例8：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

table

{ border:#00C 1px solid;

color:#09F;

width:60%;

}

table th

{ border: #F00 1px solid;

color:#F0C;

font:bold;

}

table td

{

border:#309 1px solid;

color: #000;

}

.one

{ background-color:#60C;

}

.two

{ background-color:#F93;

}

.over

{ background-color:#00F;

}

</style>

//行颜色间隔显示

function trcolor()

{

var table=document.getElementsByTagName("table")[0];

var trs=table.rows;

for(var x=1;x<trs.length;x++)

{

if(x%2==1)

{

trs[x].className="one";

}

else

{

trs[x].className="two";

}

var name;

function over(mouse)

{

name=mouse.className;

mouse.className="over";

}

function out(out)

{

out.className=name;

}

window.onload=trcolor;

</script>

</head>

<body>

<table>

</tr>

</tr>

</tr>

</tr>

</tr>

</table>

</body>

</html>

例9：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

//1、获取被选中的checkbox，通过checked属性来完成

//2、获取被选择checkbox的value的金额

//3、求和

//4、定义span区域，存储总金额

function getSum()

{

var item=document.getElementsByName("item");

var sum=0;

for(var x=0;x<item.length;x++)

{

if(item[x].checked)

{

sum=sum+parseInt(item[x].value);

}

var span=document.getElementById("sum");

var str=sum+"元";

span.innerHTML=str;

}

function selectall()

{

var allnode=document.getElementsByName("all")[0];

var items=document.getElementsByName("item");

if(allnode.checked)

{

for(var x=0;x<items.length;x++)

{

items[x].checked=true;

}

else

{

for(var x=0;x<items.length;x++)

{

items[x].checked=false;

}

</script>

</head>

<body>

<input type="checkbox" name="item" value="4999"/>笔记本电脑 4999元<br />

</body>

</html>

例10：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

#cssid

{ height:80px;

width:260px;

background-color:#F90;

}

#text

{ background-color:#999;

width:300px;

}

</style>

function change()

{

var select=document.getElementById("selid");

var value=select.options[select.selectedIndex].value;

var div1=document.getElementById("cssid");

var div2=document.getElementById("text");

div1.style.textTransform=value;

div2.innerText=value;

}

</script>

</head>

<body>

good good study,day day up

</div>

<option value="capitalize">首字母大写</option>

<option value="uppercase">所有字母大写</option>

<option value="lowercase">所有字母小写</option>

</select>

啦啦啦啦啦啦啦啦啦！

</div>

</body>

</html>

DOM示例总结

1、table标签的示例

（1）在页面上通过按钮创建一个表格

思路：

1、创建一个table节点，document.creatElement（“table”）;

2、通过table节点的insertRow（）方法创建行对象添加到rows集合中

3、通过行对象的insertCell（）为方法创建单元格对象，并添加到Cells集合中

4、给单元格中添加数据

（1）创建一个节点加文本节点，document.creatTextNode(“文本内容”),通过单元格对象appendchild方法将文本节点添加到单元格的尾部

（2）可以通过单元格的innerHTML添加单元格中的元素：tdNode.innerHTML=”<img src =”1.jpg”>”;

5、建立好表格节点，添加到DOM树中，也就是在页面的指定位置上

2、如何删除表格中的行和列

思路：

1、删除行：获取表格对象，通过表格对象中的deleteRow方法，将指定的行索引传入deleteRow方法中

2、删除列：表格没有直接删除列的方法，要通过删除每一行中指定的单元格来完成删除列的动作，获取所有的行对象，并进行遍历，通过行对象的deleteCell方法将指定单元格删除

3、对表格中的数据进行排序

思路：

1、获取表格中的所有行对象

2、定义临时存储，将需要进行排序的行对象存入到数组中

3、对数组进行排序，通过比较每一个行对象中指定单元格中的数据，如果不是整数需要通过parseInt进行转换

4、将排序后的数组进行遍历，将每一个行对象重新添加回表格，通过tbody节点的appendchild方法

5、其实排序就是每一个行对象的引用取出

4、表格的行颜色间隔显示，并在鼠标指定的行上高亮显示

思路：

1、获取所有行对象，将需要间隔颜色的行对象进行动态的className属性的指定，那么前提是，先定义好类选择器。

2、为了完成高亮，需要用到两个事件：onmouseover（鼠标进入事件）、onmouseout（鼠标移出事件）

3、为了方便可以在遍历行对象时，将每一个行对象都进行两个事件属性的绑定，并通过匿名函数完成该事件的处理

4、高亮的原理就是将鼠标进入时的指定颜色改变，改变前先记录原行对象的样式，这样鼠标离开时，可以将该样式还原

5、该样式需要在页面加载完后直接显示，所以使用的是windows.onload事件完成

5、完成一个与css手册中一样的示例，通过下拉菜单中的选择显示指定样式属性的使用效果

6、表单中的组件

单选框、复选框

这两个组件都有一个属性来表示其选中与否的状态，checked

完成一个对多个复选框进行全选的操作

思路：将全选那个复选框的checked状态付给所有其他的checkbox即可

7、获取鼠标的坐标，让指定区域随着鼠标移动

获取鼠标坐标：event.x event.y

指定区域随鼠标移动其实就是改变了指定区域的left、top属性的值

这里需要用到的事件，body对象的onmousemove事件、还需要用到一个css样式。叫做直接定义页面，所以区域都在同一层次上。为了对某一区域进行定位，可以将区域分离到另一个层次上，用到css的position属性

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

window.onload=function()

{

document.body.onmousemove=function()

{

var ad=document.getElementById("ad");

ad.style.left=event.x-10;

ad.style.right=event.y-10;

}

</script>

#bodyid{ border:#000 1px solid;

height:600px;

width:800px;

}

</style>

</head>

<body>

</div>

dbody区域

</div>

</body>

</html>

DOM编程：

1、定义界面，通过html标签将数据进行封装

2、定义一些静态的样式，通过css

3、需要动态的完成的和用户的交互

（1）先明确事件源

（2）明确事件将事件注册到事件源上

（3）通过javascript函数对象事件进行处理

（4）在处理过程中需要明确被处理的区域

例11：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

function selCity()

{

var arr=[['--选择城市--'],["海淀区","朝阳区","东城区","西城区"]

,["沈阳","大连","鞍山","抚顺"],

["济南","青岛","烟台","威海"],

["洛阳","郑州","开封","南阳"]];

var index=document.getElementById("selid").selectedIndex;

var citys=arr[index];

var zinode=document.getElementById("subselid");

for(var x=0;x<zinode.options.length;)

{

zinode.removeChild(zinode.options[x]);

}

for(var x=0;x<citys.length;x++)

{

var opt=document.createElement("option");

opt.innerText=citys[x];

zinode.appendChild(opt);

}

</script>

</head>

<body>

</select>

</select>

</body>

</html>

第四讲JavaScript

JavaScript概述

JavaScript是基于对象和事件的语言

特点：

1、安全性（不允许直接访问本地磁盘），它可以做的就是信息的动态交互

2、跨平台性（只要可以解释JS的浏览器都可以执行，和平台无关）

JavaScript与Java不同

1、JS是Netscape公司的产品。Java是Sun公司的产品

2、JS是基于对象，Java是面向对象

3、JS只需解释就可以执行，Java是先编译成字节码文件，再执行

4、JS是弱类型，Java是强类型

JavaScript与Html的结合方式

想要将其他代码融入到Html中，都是以标签的形式

1、JS代码存放标签<Script></Script>

2、使用script标签的src属性引入一个js文件（方便后期维护、扩展）

例如：<script src=“text.js” type=”javascript”></script>

注：规范中script标签中必须加入type属性

JavaScript语法

每一种语言都有自己的语法规则，JS语言和Java很像，所以学习起来也很容易。JS中也有变量、语句、函数、数组等常见语言组成元素

1、变量

通过关键字var来定义，弱类型即使不用指定具体的数据类型

该变量可以赋予不同类型的常量

例： var x=3；x=“hello”；

注：JS中特殊的常量值；undefined，当变量没有初始化就被使用，该变量的值就是undefined（未定义）

2、语句（与Java语句格式相同）

（1）判断类型（if语句）

注：var x=3；

If(x==4)//可以进行比较运算

If（x=4）//可以进行赋值运算，而且可以同时进行判断，不报错

因为在JS中0就是fasle，非0就是true（通常用1表示）

所以if（x=4）

结果就是true

（2）选择结构（switch语句）

（3）循环结构（while语句、do...while语句、for语句）

注：不同的是，没有了具体的数据类型的限制，使用时要注意

使用逻辑运算符进行布尔表达式连接的时候，需要是短路与或者短路或

&&、||

因为在js中，非0即为true，0为false 非null为true，null为fasle

3、函数

（1）一般函数

格式：

Function 函数名（形式参数。。。）

{

执行语句；

Return 返回值；

}

函数是多条执行语句的封装体，只有被调用才能运行。

注意：调用有参数的函数，但没有给其传值，函数一般可以运行，或者调用没有参数的函数，给其传值，该函数也一样运行。说的简单点，只要写了函数名后面跟了一对小括号，该函数就会运行，那么传递的参数呢？

其实，在函数中有一个参数数组对象，该对象将传递的参数都封装在一个数组中。

两个明确：

1、明确该功能实现后的结果

2、该功能在实现过程中是否有未知内容参与运算

例如：

Function demo（）

{

Alert（arguments.length）

}

Demo(“hello”);

那么弹出的对话框结果是3，如果想得到所有的参数的值，可以通过for循环遍历该数组

For（var x=0；x<arguments;x++）

{

Alert(arguments[x]);

}

为了增强阅读性，最好按照规范给定义好形式的参数传递实际参数

函数在调用时的其他方法

Var show=demo（）；//show变量接收demo函数的返回值

Var show=demo；//这种写法也是可以的，意为show和demo代表同一个函数，那么该函数也可以通过show（）的方式运行

（2）动态函数

通过JS的内置对象Function来实现

例如：var demo=new Function(“x,y”;”alert(x+y);”);

Demo(4,6);

等同于

Function demo（x，y）

{

Alert（x+y）；

}

Demo（4,6）；

不同的是，动态函数，参数以及函数体都可以通过参数进行传递，可以动态指定

（3）匿名函数

格式：function（）{。。。。。}

例如：var demo=function（）{。。。。。}

通常在定义事件属性的行为时较为常用

例如：function test（）

{

Alert（“load ok！”）；

}

Window.onload=test;

可以写成匿名函数的形式

Window.onload=function()

{

Alert(“load ok!”)；

}

匿名函数就是一种简写形式

4、对象

JS除了已经提供的内置对象外，也可以自定义对象

JS可以通过对象形式将数据进行封装

首先对对象进行描述，通过函数来完成

例如：function Person（）

{

}

Var p=new Person();

P.name=”zhangshan”;

P.age=20;

//定义成员函数

P.run=function()

{

Alert(“run”);

}

或者

Function Persion（name,age）

{

This.name=name;

This.age=age;

}

Var p=new Person(“zhangsan”,20);

JS用于操作对象的语句

（1）with语句

格式：with（对象）

{

}

应用：当调用一个对象中多个成员时，为了简化使用，避免“对象.”这种格式重复书写。

Var p=new Person(“zhangsan”,20);

Alert(p.name+”,”p.age);

可以写成

With（p）

{

Alert（name+”...”+age）；

}

可以确定对象所使用的范围，在范围内，可以直接使用指定对象的属性和行为，而不用，对象的形式调用，简化了对象的操作

（2）for（变量 in 对象）

可以对对象的属性和行为进行遍历

（3）JavaScript中已定义好的一些对象

1、String、Math、Date、Array、Function

这些对象都有一个属性叫做prototype原型，prototype可以获取指定的对象引用，可以通过该引用给已有的对象赋予一些新的功能

那么在使用该对象时，可以直接调用定义好的新功能

Var arr=[3,4,16,7];

Arr.sort();//直接调用Array对象的sort方法对数组进行排序

那么可不可以用像调用sort方法一样调用getMax方法呢？

Array.prototype.getMax=getMax;

Var x=arr.getMax();

Alert(“max=”+max);

5、数组

对于js的数组特点在于：该数组的长度是可变的，相当于java中的集合，该数组可以存放的元素类型可以是不同的

定义格式：

Var arr={3，true，“abc”}；

Var arr=new Array();

Var arr={[3,1,9],[3,4]}；

操作形式和java一样，可以通过for进行遍历，同时也使用了指针的思想，

6、常见的全局方法

paerseInt（number，[radix]）；

将数字格式的字符串转成整数，如果指定了基数，那么就会按照执行基数进行转换

Var num=parseInt（“110”，2）//表示110这个字符串会按照二进制进行转换

Num=6；

Var x=6；

x.toString（2）//获取6对应的二进制表现形式

X=110；

7、注意事项

Javascript需要被浏览器解释执行，就必须要把代码和html结合，结合方式是什么样呢？

1、通过<script>标签将js代码存入其中，并指定一个type属性，方便浏览器启动指定的解析引擎

2、也可以通过<script>标签，使用src属性链接一个指定的js文件进来

【上篇】Java基础入门
【下篇】简单JDBC框架——DBUtils

作者: tenacious

该日志由 tenacious 于6年前发表在综合分类下，最后更新于 2018年03月22日.
转载请注明: Web前端基础 | 学步园 +复制链接

抱歉!评论已关闭.

学步园

Web前端基础

作者: tenacious

书签

最新文章New

本站推荐

返回首页