Web技术-1 Web前端总结

Web开发的学习是建立在掌握了Java基础上的,通过学习Web前端、jQuery+AJAX 、MySql数据库、Oracle数据库、Java Web技术,实现网页的制作和功能的开发。本部分总结的是Web前端的知识,主要包括HTML制作网页、CSS设计样式、JavaScript添加网页动态特效、表单验证等。

                                                                 HTML制作网页
一、HTML(超文本标记语言)

W3C标准(World Wide Web Consortium)

结构化标准语言(XHTML/XML)

表现标准语言(CSS)

行为标准(DOM、ECMAScript)

基本结构:

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

<html xmlns="http://www.w3.org/1999/xhtml">

<html>

<head><title>标题</title></head>

<body>主体内容</body>

        </html>
二、HTML标签

1、标签规范(XHTML标签规范):

  • 签名应小写
  • HTML标签应闭合
  • 标签应正确嵌套
  • 应添加文档类型声明<!DOCTYPE>

1、定义标签meta(用于定义文件信息)可设置字符编码格式,关键字,跳转网页 (看demo-1)

2、标题标签<h1>至<h6>

3、字体样式标签:<em> 斜体标签,<strong> 粗体标签

4、水平线标签<hr/> 换行标签<br/>(自闭合,没有结束标签)

5、段落标签<p> </p>

6、图像标签<img>   超链接标签<a>

7、其他:&nbsp;(空格标签)  &copy;(版权符号@)

8、注释:<!--HTML注释-->

2、图像标签

<img  src=  alt= title=  width=  height= />

3、超链接标签

1、<a href=“url” target=“目标窗口位置”>链接文本图片</a>

href:表示链接路径

target:链接在哪个窗口打开,_self(当前页面打开)、_blank(新页面打开)

2、锚链接

从A页面的甲位置跳转到本页中的乙位置(同一页面)

从A页面的甲位置跳转到B页中的乙位置(两个页面)

创建步骤:

  • 建跳转标记<a name=“marker”>乙位置</a>
  • 创建跳转链接<a href=“#marker”>甲位置</a>
  • 跳转到另一个页面在的#前面加上要跳转的页面路径

4、HTML列表

  • 无序列表<ul>,用于导航、侧边栏新闻列表等

<ul>

<li>列表项内容1</li>

<li>列表项内容2</li>

<li>列表项内容3</li>

</ul>

注:默认<li>标签项前有实心小圆点,可更换为(type=“小方块,小圆圈”)

  • 有序列表<ol>

<ol>

<li>列表项内容1</li>

<li>列表项内容2</li>

<li>列表项内容3</li>

</ol>

注:注:默认<li>标签项前有123,可更换为(type=“a,A,I”)

  • 定义列表<dl> 无序,没有标记

<dl>

<dt>标题</dt>

<dd>描述</dd>

</dl>

注:没有顺序,没有默认标记

5、表单标签

1、<form>标签—表单提交

<form action=“表单提交地址” method=“提交方法”>

   …适合文本框、按钮等表单元素…

</form>

注:

action属性:处理表单数据的目标地址

method属性:规定提交方式  可选值post/get

get方法提交参数在地址栏可见

post方法提交参数在地址栏不可见(密码)

 2、<input>标签—文本框,按钮等。。

适用的表单元素有:文本框、复选框、文件选择框、按钮等

name属性:表单元素名称

type属性:类型、域

value属性:值

size属性:文本框显示宽度

maxlength属性:内容最大长度

checked属性:是否选中,仅与checkbox 和radio配合使用,选中为checked

3、下拉列表框 通过<select>  <option>标签实现

4、多行文本框 通过<textare cols="20" rows="5">标签实现

5、表单结构标签:<fieldset> 结构标题标签:<legend>

6、<label>标签 实现关联表单元素

<label for = “1”>名字:</label>

<input name ="name" id= "1"  size= "20" >

或者<label>名字: <input name ="name" size= "20" ></label>

无需id关联

点击label标签 如:名字,鼠标聚焦文本框中

6、表格标签

1、表格基本语法:

<tr>表示   行         <td>表示  单元格

border 表示边框

bgcolor表示背景色    width 表示表格的框

cellpadding表示单元格中的内容和边框的距离

cellspacing表示单元格之间的距离

align表示水平对齐方式   valign 表示垂直对齐方式

  • 表格高级标签

<caption> 标题

<thead> 页眉

表头标签<th>表示和<td>功能一样,以标题形式显示

<tbody>数据主体

<tfoot>页脚

3、表格的跨行与跨列

跨行<tr>标签的rowspan属性,值为数字,代表合并几行

跨列<td>标签的colspan属性,值为数字,代表合并几列

7、HTML框架结构(<iframe>标签)

1、作用:创建文档的内联框架,将独立页面放在框架中

2、属性:

src=(需引入的文档路径)

width/height(设定框架的宽与高)

scrolling(是否显示滚动条,auto|yes|no)

  frameborder(是否要边框,1显示,0不显示)

   name(内联框架的名称)

<iframe src="" height="" width=""frameborder=""name="" scrolling/>

3、<div>标签和<span>标签

   没有任何的默认样式渲染;相当于一个干净的容器

   结构化HTML元素;DIV+CSS网页布局;提高网页加载速度

4、块标签和内联标签

 块标签(常用):

   独占一行;可以定义宽度和高度

   常用块标签:<div>、<p>、<ul>、<li>

内联标签:

  一行排列显示;不能定义宽度和高度

  常用内联标签:<span>、<a>、<label>、<img>

注:块元素和内联元素是可以转换的(在CSS里修改)

内联元素—>块元素display:block

块元素-->内联元素display:inline

                                                                      CSS设计样式
一、CSS简介

   Cascading style Sheet 级联样式表,表现HTML或XHTML文件样式的计算机语言(对字体、颜色、边距、高度、宽度、背景图片、网页定位等设定)

作用:能控制页面的样式和布局;网页文件和样式文件相分离,提高开发效率
二、CSS语法

1、<style>标签

写在<head>标签之后,加上type=“text/css”属性

2、样式选择器

例如:    h1{

Color:red;

font-size:12px;

3、常用选择器

(1)标签选择器:

把HTML标签作为标签选择器的名称;如<p>

(2)类选择器:<标签名  class=“类名称”>标签内容</标签名>

.类名称{//可以单独设置一些文字的样式

属性:值;

(3)ID选择器:<标签名 id=“ID名”>标签内容</标签名>

#ID名{//ID名是唯一的,其他和类选择器一样

属性:值;

4、复合选择器

(1)并集选择器(用 , 隔开)

多个选择器之间可以是多个不同或相同类型;

多个选择器之间必须用英文半角输入法逗号“,”隔开;

*{  属性:值;

}  或者

p,#id,.class{  属性:值;

}

(2)交集选择器(无空格逗号)—不常用

格式为:标签+类选择器  或  标签+ID选择器

选择器之间不能有空格;第一项必须是标签

h3.second{//满足h3标签和second类标签才应用

属性:值;

}

(3)后代选择器(用空格隔开)

选择器之间可以是多个不同或相同类型并有层级关系的

p a{//满足p和a标签,只是a标签中的元素进行改变

属性:值;


三、CSS的使用

(1)行内样式表:直接在HTML标签设置的样式

使用style属性引入CSS样式

<h1 style="color:red;">style属性的应用</h1>

<p style="属性名:属性值;">在p标签内应用</p>

(2)内部样式表(写在单独网页内)

<style  type=“text/css”>

选择器{

属性名:属性值:

</style>

(3) 外部样式表(引用外部CSS样式文件)

CSS代码保存在扩展名为.css的样式表中

HTML文件引用扩展名为.css的样式表,有链接式和导入式

语法:

链接式:常用(属于XHTML,优先加载CSS文件到页面)

<link type=“text/css” rel=“styleSheet”href=“css文件路径”/>

导入式:(属于css2.1,先加载HTML结构再加载CSS文件)

<style type=“text/css”>

@import url(“css文件路径”)

<style/>

 

样式优先级:

选择器:ID选择器>类选择器>标签选择器

样式表之间:行内式>内嵌式>外部式
四、CSS属性

1、文本与字体属性

例如:字体是 italic斜体 bold粗体 16PX像素的楷体

注:当line-height 和 height 的值一样时,文本垂直居中。

text-align:center;指文本水平居中。

容器居中方法:margin:0px auto;

文本首行缩进:text-indent:2em;

2、背景属性

background-color、background-image、background-position、background-repeat

3、列表属性

常用:list-style:none;

4、超链接伪类(先love后hate记忆)

a:link{color:red}  /* 未访问的链接*/

a:visited{color:blue}  /* 访问过后的链接*/

a:hover{color:green}  /* 当鼠标悬停在链接上*/

a:active{color:yellow}  /* 当鼠标按下链接后*/

注: a:hover必须被置于a:link 和a:visited之后

a:active 必须被置于a:hover之后

5、鼠标形状控制

cursor:move;  cursor:pointer;

6、盒子模型(上右下左顺时针方向)

(1)边框border  (top/right/bottom/left/ Opx是全清除)

(2)内边距padding(top/right/bottom/left/ Opx auto)

(3)外边距margin (top/right/bottom/left/ Opx  auto)

margin:1px 2px 3px 4px

border:1px solid red (修饰属性width、style、color )

border-width:1px 2px 3px 4px

padding:5px 10px 15px 20px

7、浮动属性(float:值 )

(1)取值:left左浮动;right右浮动;none 不浮动

(2)作用:

块元素同行排列显示,一般用于排版、分栏显示

都设置浮动属性后会脱离文档流:向指定的左或右边对齐

(3)注意:使用浮动后要及时清除,以免影响其后的网页元素

8、清除浮动(clear属性和overflow属性)

(1)clear属性取值:left;right;none;both

Overflow:定义了溢出元素内容区的元素的处理方式

属性取值:visible(默认);auto;hidden;scroll(滚动条显示)

(2)必要性:

浮动后,脱离了文档流布占网页空间

浮动后的网页元素会影响同级元素

(3)表明容器框的哪边不挨着浮动框

清浮动:

产生条件:父元素未设置浮动,子元素设置浮动

显示效果:父元素高度得不到扩展,缩成一条,子元素从内容溢出

clear:both;(加一个空的<div>,clear:both)

overflow:hidden;(为父元素设置width,overflow:hidden;)

9、定位(position属性)

(1)relative(相对定位)

相对它原来的位置,通过指定偏移,到达新的位置

仍在标准流中,它对父级盒子和相邻的盒子都没有任何影响

(2)absolute(绝对定位)

相对已设定的非static定位属性的父元素算偏移量。

设置绝对定位的元素与文档无关,会覆盖页面其他元素。

如果对象的父级没有设置定位属性,absolute元素将以body坐标偏移。

(3)fixed(相对浏览器固定定位)

(4)static(默认)

偏移量设置:

X轴(left、right属性)与Y轴(top、bottom属性)

可取值:像素或者百分比

<div style="width:100px;height:100px;background:#F00;

position:relative"><span="width:50px;height:50px;left:0px;bottom:opx;b

ackground:#0F0;position:absolute"></span></div>

子元素absolute    父元素一般relative
五、使用DIV+CSS布局页面

1、表格布局

优点:简单易懂、位置很规矩;

缺点:加载速度慢,结构固定不灵活,不利于维护和SEO

2、框架布局

在同一页面进行多页面加载,如<iframe>标签

3、DIV+CSS方式布局

HTML结构:<div>标签

CSS样式:float浮动和盒子模型

优点:1、<div>标签“干净”,网页更小,打开更快

2、结构清晰,便于维护,利于SEO

3、<div>标签更灵活,更好控制页面元素

4、样式与结构相分离 ,更好的结构重组

5、表现与内容相分离,利于分工协作

基本流程:总体把握→分块实现→完善细节→性能优化

                                                        JavaScript基础
一、JavaScript简介

1、JavaScript是一种描述语言,基于对象和事件驱动的脚本语言

特点:

脚本语言(一种轻量级的编程语言)

一种解释性语言(无需预编译)

被设计为向HTML页面添加交互行为

运行于客户端

ECMAScript是JavaScript的标准和基础,JavaScript和JAVA无任何关系!

2、JavaScript是由ECMAScript(标准、核心)、DOM(文档对象模型)、BOM(浏览器对象模型) 三部分组成

(1)ECMAScript

ECMAScript标准定义了脚本语言的属性、方法和对象。包括语法、类型、关键字、保留字、运算符、对象等

除了JavaScript外,同时也是Nombas的ScriptEase和Flash脚本ActionScript的基础

(2)DOM(文档对象模型)

HTML和XML的应用程序接口(API)

把整个页面规划为层级式的节点结构

(3)BOM(浏览器对象模型)

可对浏览器窗口进行访问和操作

3、JavaScript基本结构

<script type = “text/javascript”>

<!--

//JavaScript代码

//-->

</script>

(1)<!--  -->部分是非必须的,为了规避老版本浏览器不能识别

(2)//是JavaScript的注释符号(/* */也是注释符号)

(3)type属性不推荐写成language=“javascript”

4、引用JavaScript三种方式

⑴直接在HTML标签中<body onload="alert('你好');">

⑵使用<script>标签

⑶通过src属性引入外部JS文件

示例:alert弹出框的三种方式

<script type="text/javascript" src="路径"></script>
二、常用的输入/输出/确认

alert() //弹出只有一个确认按钮的提示框

例:alert(“提示信息”);

prompt()//弹出一个可以输入的提示框,有确认和取消按钮

例:prompt(“提示信息”,“输入框的默认信息”);

confirm(“确认信息?”);

//确定则返回true,取消则返回false
三、JavaScript的基础语法

1、JS的注释方法与 Java 一致(单行、多行和文档注释)

2、JavaScript变量(与java不一样)

(1)变量名对大小写敏感(Y和y是两个不同的变量)

(2)变量必须以字母或下划线或美元符$开始,不能使用关键字作为变量名

(3)通过var语句来声明,无需指定数据类型(多个变量用逗号隔开)

(4)先定义后使用,一般"+"运算符用于把文本值或字符串变量连接起来,如果两个是数字则为数学运算加号。"="可以给相同变量重复赋值,可以赋不同类型的值

3、JS的数据类型

Undefined:只有一个值undefined,未定义或定义未赋值

var v=undefined; typeof var1(未定义)  var v;

Null:尚未存在的对象,与undefined值相等

Number: var num=23;//整数   var num =23.0; // 浮点数

Boolean: true 和flase

String:一组被引导的文本(单引号或双引号括起来)

4、typeof运算符   var1=2; alert(typeof var1);

typeof检测变量的返回值。

如果为字符串类型,返回值如下;

undefined;string;boolean;number;

object(对象或数组或Null类型) function(函数方法)

5、数据类型转换

(1)转换方法

parseInt():字符串转换为整数

parseFloat():字符串转换为浮点数

toString():返回字符串

(2)强制类型转换

Boolean():转换为逻辑值

结果为false的情况有:"";0;undefined;null;NaN;false

Number():对象转换为数字

String():对象转换为字符串

注:在转换函数时,parseInt或parseFloat如果是由字符串转换为数值类型,字符串从前往后,第一位是数字,只转有数字的部分,返回值为对应的数值类型。若数字不是第一位,返回值为NaN(not a number)。而Number()无论数字在前在后,都返回NaN

6、运算符(和java基本一样)

7、流程控制(和java语法一样)

if条件语句;条件运算符;switch多分分支语句;循环控制语句(循环中断break\continue\return)

注:for in 循环语句(类似于增强型for)

for(变量a  in  对象obj){ //获得obj[a]; }
四、JavaScript函数和事件

1、定义:

一组可以随时随地运行的语句。有系统函数和自定义函数

(1)常用系统函数举例(相当于java中的方法)

parseInt() 解析一个字符串并返回一个整数

parseFloat()  解析一个字符串并返回一个浮点数

isNaN() 检查某个值是否是数字,返回true|false

eval()    计算JavaScript字符串,并把它作为脚本代码来执行

(2)自定义函数

function  函数名(参数列表){//函数代码块}

var 函数名 = function(参数列表){//函数代码块}

传入的参数是可选的,多个参数用 , 隔开,也可以无参

调用: 函数名(参数);  在定义的函数后面调用

(3)匿名函数

(function(){//用函数体( )替换fn ;

alert(12345);})();

等同于

var fn=function(){alert(12345);}

fn( );

把fn用函数体代替掉,直接运行,我们称之为匿名函数。一般用于框架的封装

2、变量的作用域

(1)全局变量:任何地方都可以被调用,公共的(public)

(2)局部变量:只能在函数内部调用,私有的(private)

应尽量避免使用全局变量,以免团队开发变量冲突

3、函数的返回值

通过return关键字返回函数的值

4、事件:JavaScript侦测到的行为

事件通常与函数配合使用,当事件发生时去调用函数

鼠标事件、键盘事件、焦点事件、其他常用事件

鼠        标       事        件

onclick 单击鼠标左键元素触发

ondblclick 双击鼠标左键击元素触发

onmousedown 按鼠标按钮触发

onmouseup 释放鼠标按钮触发

onmousemove 鼠标指针在对象上移动触发

onmouseover 鼠标指针移动到对象上触发

onmouseout 鼠标指针移出对象触发

焦        点        事        件

onfocus 获得焦点触发

onblur 失去焦点触发

onchange 值改变且失去焦点触发

其      他      常     用     事     件

onload 某个页面或图像被完成加载时触发

onunload 用户退出页面时触发

onabort 图像加载被中断时触发

onerror 当加载文档或图像时发生某个错误时触发

onreset 重置按钮被点击时触发,事件写在form表单上

onresize 窗口或框架被调整尺寸时触发

onselect 文本被选定时触发

onsubmit  提交按钮被点击时触发,事件写在form表单上

键       盘      事      件

onkeydown 按下键盘触发

onkeypress 按压键盘触发

onkeyup 松开键盘触发

5、程序调试

语法错误和逻辑错误

解决办法:

①try…catch 语句

try{

//在此运行代码

}catch(err){

//在此处理错误

//err.message    message包含错误信息

②注释调试法

③输出调试法④

alert()调试法

document.write()调试法

console对象调试法(IE不支持)    console.log()

④调试工具: Firebug、浏览器自带开发窗口
五、BOM对象操作对象窗体

BOM(浏览器对象模型)使得JavaScript能与浏览器进行“对话”。

主要有Window对象、History对象;Location对象;Document对象

  • Window对象常用属性

Window对象:表示浏览器中打开的窗口.Window对象是全局对象,可直接调用其方法和属性;Window对象的一些方法和属性可省略不写

window.document等同于 document

window.alert()等同于 alert()

属性有:

location 用于窗口或框架的 Location 对象

history 用户在浏览器窗口中访问过的 URL

screen 对 Screen 对象的只读引用

status 设置窗口状态栏的文本

document 对 Document 对象的只读引用

  • history属性就是History对象的引用

方法:

back():加载上一个浏览的文档

forward():加载下一个浏览的文档

go(n):n为整数。跳转第n个浏览过的文档

n==0则刷新当前页面

n>0则向前跳转到第n个文档

n<0则向后跳转到第n个文档

  • location属性就是Location对象的引用

属性:

host  设置或返回主机名和当前URL的端口号

hostname   设置或返回当前URL的主机名

href      设置或返回完整的url,可用于设置跳转

hash      设置或返回从井号#开始的URL(锚)

search 设置或返回从问号?开始的URL(查询部分)

方法:

reload()    重新加载当前的文档,刷新页面

replace()   新的文档替换当前文档

assign()     加载新的文档,可以返回

  • document属性

每个载入浏览器的HTML文档都会成为Document对象。利用它可对HTML页面中的所有元素进行访问

常用属性:title  返回或设置当前文档的标题

常用方法:

write()  向文档写HTML表达式或JavaScript代码

getElementById()返回对拥有指定id的第一个对象的引用

getElementsByTagName()返回带有指定标签名称的对象集合

getElementsByName()返回带有指定名称的对象集合

  • Window对象方法

1、常用方法

prompt()显示可提示用户输入的对话框

alert() 显示带有一个提示信息和一个确定按钮的警示框

confirm()显示一个带有提示信息、确定和取消按钮的对话框

open()  打开一个新的浏览器窗口,加载给定的网页

close() 关闭浏览器窗口

setTimeout()在指定的ms数后来调用函数或计算表达式。循环执行多次

setInterval()按照指定的周期(ms计)来调用函数或表达式。只执行一次

clearInterval( timer ) 方法可取消由 setInterval() 设置的 timeout

clearTimeout( timer ) 方法 可取消由 setTimeout() 方法设置的 timeout

2、具体介绍:

open()方法:window.open("url", "窗口名称", "窗口属性")

窗口属性:
六、DOM(文档对象模型)

1、DOM简介:

提供了添加、移动、改变或移除结构文档的方法和属性

2、分类:

Core DOM 一套标准的针对任何结构化文档的对象

XML DOM 一套标准的针对XML文档的对象

HTML DOM 一套标准的针对HTML文档的对象

  • Core DOM的节点

HTML文档中的每一个成分都是一个节点(Node)

(1)规定:

整个文档是一个文档节点;

每个HTML标签是一个元素节点;

包含在HTML元素中的文本是文本节点;

每一个HTML属性是一个属性节点;

注释属于注释节点;

(2)节点间的关系

节点彼此都有等级关系(父节点、子节点、兄弟节点(同级节点))

(3)使用getElement方法访问指定节点

getElementById()返回对拥有指定id的第一个对象的引用

getElementsByTagName()返回指定标签的对象的集合

getElementsByName()返回带有指定名称的对象的集合

注:不是所有标签都有name属性

innerHTML 属性设置或返回节点的开始和结束标签之间的 HTML。

(4)使用Node接口定义的方法访问节点

注:低版本IE下会忽略节点之间生成的空白文本节点(比如换行字符),而谷歌和火狐不会忽略,因此需要兼容方式来获取

  • 访问节点兼容处理

兼容写法  firefox||IE

获取第一个节点

oFirst=oParent.firstElementChild  ||oParent.firstChild

IE浏览器会忽略节点之间生成的空白文本节点。所以不需要中间加Element

  • 节点信息

每个节点都拥有包含节点某些信息的属性

nodeName(节点名称)

元素节点的nodeName是标签名称

属性节点的nodeName是属性名称

文本节点的nodeName永远是#text

文档节点的nodeName永远是#document

nodeValue(节点值)

对于文本节点,nodeValue属性包含文本

对于属性节点,nodeValue属性包含属性值

nodeType(节点类型)

元素1,属性2,文本3,注释8,文档9

  • 创建和新增节点

createDocumentFragment()//创建文档碎片节点

createElement(tagname)//创建标签名tagname的元素

createTextNode(text)//创建包含文本text的文本节点

appendChild()//添加子元素

(7)删除和替换节点

RemoveChild(node)

replaceChild(newDode,oldNode)

4、HTML DOM :

专门针对HTML文档的。HTML文档中的每个节点都是一个对象

HTML DOM包括:

Table 对象 Document 对象 Form 对象Image 对象

1、Table(TableRow TableCell)对象属性

属性 rows[] 获得所有行

通过cells[]得到所有的单元格

方法:insertRow()插入新行 deleteRow()删除一行

2、Style(currentStyle)对象position属性:

top\left\right\bottom\zIndex
七、网页特效--内置对象

1、内置对象

String用于在单独的变量名中存储一系列的值

Date用于操作日期和时间

Math用于执行常用的数学任务

Array用于支持对字符串的处理

2、String对象方法

3、Date对象

var myDate=new Date();

//获得小时、分钟、秒数

var today = new Date(); //获得当前时间

var hh = today.getHours();

var mm = today.getMinutes();

var ss = today.getSeconds();

4、Math对象

var pi_value=Math.PI;

方法:

Math.ceil( Math.random()*100 ) ;返回的正数范围1-100

5、Array对象

①JavaScript 中的所有事物都是对象:数字、字符串、布尔、数组、日期,等等。

数组对象的作用是:使用单独的变量名来存储一系列的值。

②Array 对象用于在单个的变量中存储多个值

创建 Array对象的语法

var mycars=new Array();  // 创建空数组对象

var mycars=new Array("Saab","Volvo","BMW");

var mycars=["Saab","Volvo","BMW"];

③属性和方法:

属性:length  设置或返回数组中元素的数目

concat() 连接两个或更多的数组,并返回结果。

toString() 把数组转换为字符串,并返回结果。

join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。

slice() 从某个已有的数组返回选定的元素

sort() 对数组的元素进行排序

reverse() 颠倒数组中元素的顺序。

unshift() 向数组的开头添加一个或更多元素,并返回新的长度。

shift() 删除并返回数组的第一个元素

push() 向数组的末尾添加一个或更多元素,并返回新的长度。

pop() 删除并返回数组的最后一个元素

splice() 删除元素,并向数组添加新元素。

//冒泡排序 js写法

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

for(var j=i+1;j<arr.length;j++){

if(arr[i]<arr[j]) {

//大于是升序;小于是降序;进入判断进行一次顺序调换

var tem=arr[i];//保存起来

arr[i]=arr[j];

arr[j]=tem;

}

}

}
八、网页特效--JS访问样式

步骤1:使用getElement系列方法获取元素

步骤2:通过style、className属性改变样式

1、DOM元素.style.样式属性= "值";

2、DOM元素.style.display= " none "不可见 | " block "可见;

$("#id")[0].style.display = 'none'; 相当于$("#id").css('display','none');

3、DOM元素.className = "类名称";

注意区别:例如:背景色

CSS:background-color:red;

JS:DOM.style.backgroundColor = " red ";
九、表单验证

1、表单验证

在数据被送往服务器前 对HTML表单中的这些输入数据进行验证

作用:减轻服务器的压力

保证数据的可行性和安全性

2、基本步骤

1、提交触发表单的onsubmit事件

2、在onsubmit事件中进行验证 checkInput (js代码)

利用DOM方法获取需验证的表单元素的value值

根据String对象的方法验证简单的数据

利用正则表达式方法验证复杂的数据

3、表单元素通过验证后,才能提交表单。否则重复验证

3、表单验证JS代码基本结构

4、String对象属性和方法

5、文本框对象

6、正则表达式

一个描述字符模式的对象,由一些特殊的符号组成,其组成的字符模式用来匹配各种表达式

RegExp对象(regular expression)表示正则表达式,它是对字符串执行模式匹配的强大工具

如在字符串中对"is" 进行全局搜索:

var str="Is this all there is?";

var patt1=/is/g;或者var patt1= new RegExp("is","g")

var reg=/表达式/附加参数

i执行对大小写不敏感的匹配 m多行匹配 g全局匹配

7、RegExp对象

方括号

常用符号

重复字符串

匹配邮箱的表达式:/^ $/

\w+ @ \w+\.\w+            123@irunker.com

\w+ @ \w+(\.\w+) {1,2}    123@sina.com.cn

7、String对象与正则表达式

search(reg) 检索与正则表达式相匹配的值,返回查找位置的索引,否则返回-1

match(reg) 查找到一个或多个正则表达式的匹配,返回数组或null

replace(reg,str) 替换与正则表达式匹配的子串

split(reg) 把字符串分割为字符串数组

Visant

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: