关闭

web基础概况

122人阅读 评论(0) 收藏 举报
分类:

后端:

前端:

理解web工作原理

主机(服务器)-----------------------客户端  终端输入输出,显示,起先:

缺点:1.单一。2.难于维护。3.专一特性难于集成

优点:保密性好

CS----------------------------------BS客户端—服务器模式,有了图形化界面交互。

传统:运算,显示使用,。第二代,强大运算能力。

CS:开发信息共享性好,传输量小。缺点,不已维护,操作界面风格不一致,数据类型不易扩展。等

BS:Browser/Server:浏览器服务器模式,扩大地扩大了企业级应用系统功能覆盖的范围

优化。

Browser================web applicationserver===================database server

 

 

Web工作原理:浏览器------http协议------web服务器

组成部分1:网页:网页结构HTML语言,XML使用一种格式对HTML加了一些扩展性的东西。

标记

头部标题 等等

书写文档表现形式的语言是CSS,字体大小,字体颜色,版面布局,背景

网页的行为:JS 使用网页行为语言。

 

展示网页:

<html>

    标题   

<!--头部-->

<head>

   </head>

<!--身体-->

<body> 

   </body>

</html>

Gb2312中文字符集 utf-8

理解XHTML语法基础与标记

</p>一个段落利用

<image src = “hello.gif”/>设置属性的话,只需在设定内容最后加一个/。Html htm,如head,body都是一个元素。大部分都不是使用的空标记。

元素:开始标记<p>   </p>,有开始就有结束。

元素内容,

空标记<img src=”hello.gif” />空标签,没有中间html内容,即为一个空标记,一般后面要跟一个属性

元素和属性名字必须小写。属性均定义在标签内部

注释<!--  -->

不会出现在浏览器中,注释内容中间不能出现--

文档正文标题

六个级别的正文标题,标题重要性随标签的数字递减

标题以较大粗体显示

 

段落

 

引用文本:自己放在中间,左右都有一个空白区域

 

列表

ul 无序列表<li>

ol 有序列表<li>

dl 自定义列表<dt><dd>可以不写标题

 

设置样式

 

预编排文本

<pre>

</pre>

 

加入图片,绝对路径,相对路径

 

超链接:跳转<a href="http://www.baidu.com">百度</a>也可以写相对路径

 

跨字符元素span  <p>666<spanstyle="color:red;font-weight:bold">8888</span></p>

 

锚点:书签

<p id="bigtitle" style="font-weight:bold;font-size:300%">无序列表示例</p>

<a href="#bigtitle">书签</a>

<a herf=”http://www.sample.com/book.XHTML#chapter01>转到第一章</a>

 

创建文字<label>

判断空标记判断是否自动写出

内嵌样式表<style type=”text/css”>设置所有的样式

P{

Color:blue;//把所有段落变成蓝色

}

如果后面又自己设计样式就会覆盖

创建样式:

Style

内嵌

外联:创建css层叠样式表,不直观

margin-top与上面的间距

 

表格与表单

表格,定义表格的行和列,先去确定行,再去确定列

用于布局

<table border="1">

       <tr>

           <td>张小花 </td>

           <td>唱歌跳舞</td>

 

B标签

<Th>标题</th>    <th>另一标题</th>

空白单元格:不写

合并单元格:2个属性:colspan和rowspan

 

表单:在网页上提供一个用户图形界面,以采集和提交用户输入的数据到服务器。

分为2种类型:整体结构,创建输入控件的元素

基本表单结构:使用form标记创建表单

Form标记对内包括表单元素和其他XHMLS的元素

表单格式:

<form action=”表单处理程序的URL”method=”get|post”控件数据如何提交,即采用什么协议传输>

Get将数据与实际的的URL文本附加在一起

Post采用了加密,较为安全

<form action="#"method="get">

           <p><input name="radioSex" type="radio"/>男</p>

           <p><input name="radioSex" type="radio"/>女</p>

           

</form>

http://www.example.com/forums.cgi?id=1234&data=guest这种get出的数据一般都是不安全的

 

accept-charset服务器采用哪种字符集处理表单(utf-8-unicode 字符编码   ISO-8859-1拉丁字母表字符编码gb2312 简体中文)

 

name和id

 

fieldset表单内元素分组,排版

lengend元素自定义标题

创建下拉列表 select option

多行输入文本框:textarea,单独定义出来

文本框size:文本长度 maxlength:指输入内容的长度 value:表示文本框的值

密码框

单选按钮:name是否一组 checked选中使用js也可以对其进行判断选中。Value是提交表单的当前按钮提交的标记

复选框:如果放在了lable中,点字即可选中,以上均要设置value

隐藏字段 name checked:是否选中 value

 

多选下拉列表multiple="multiple" size显示多少行

Option特征属性:selected = “selected”默认选中

 

Textarea: cols和rows行和列

 

提交和重置按钮:

Type=”submit”和reset属性为value,提交至action的表单,恢复默认值为reset,全部还原为初始默认值

提交图片”img”,文件:file

设置name和id使用表单提交

A跳其他用锚点name

Label for属性联系

 

&nbsp空格

&reg 注册符号R

&lt 左尖括号

&

Label不会换行

 

视频,flash使用object标记

<objecttype="application/x-shockwave-flash"data="image\1470324850506.gif" width="550"height="50"></object>

<object type=""data="" width="" height="">

       <param name="movie" value="flash文件路径">//参数

                   <paramname=”autostart” value=”true”/>

       </object>

想要获取什么信息找到其对应的参数

内嵌网页:用iframe实现框架结构<iframe src="newHtml.html" width="400"height="300" scrolling="no" //是否可以滚动   frameborder="1"//边框></iframe>

Div域布局使用

块级元素(换行),内嵌元素(不换行)

 

第四章:css基础

层叠样式表:优点,语法,盒模型  Cascading Style Sheets 改变背景自设,排版。使用CSS优点:1.提高网页浏览速度,2.缩短时间,降低维护费用,3.强大的字体控制和排版能力,4.易编写,5.更好控制页面布局,6.实现表现,结构,内容相分离。7.更方便搜索引擎的搜索

使用方法:

1.      外部样式表:不需要style标签<link rel=”stylesheet”样式表  href=””链接/>

样式可以进行叠加可以多次调用

2.      嵌入式样式表:<style type=”text/css”>可以写在body里面,但是格式上来说不能写进去

P{

}

</style>自能自己使用

3.内联样式表仅限于自己使用

一般外联样式表用的最多

 

样式规则:

P,label(选择器){

Font-weight:bold;属性:值

}

如果属性值中包含了空格,需要使用双引号引起来

选择器范围非常广,可以是id,name,类型等

 

理解样式表的层叠:多个层次可以影响多个文章,优先级:由小到大

用户浏览器的设置

外部样式表

嵌入式样式表

内联样式表

创建样式规则

选择器

元素选择器:可以选择元素

元素{属性:值;}

类选择器:每个元素都可以有一个class属性

.类名{属性:值}  可以元素.类名{属性:值}

ID选择器:

#id名{属性:值;} 只能选择一个东西,只能选择一次

包含选择器(后代选择器)如textarea不能再嵌其他组件

h1 a{color:blue;}

通配选择器

所有的*{color:red}优先级最小

伪类选择器

伪类和伪元素是特殊的类和元素,能自动的被支持css浏览器所识别。

伪类区别开不同种类的元素。例如,visited links和active links描述了2个锚点的类型

伪元素指元素的一部分,例如段落的第一个字母 textarea采用伪元素

A:link{color:yellow text-decoration:none} 未访问的链接

A:visited 已访问的链接

A:hover 鼠标覆盖之后的颜色

A:active 激活链接

因为这些均不是a的属性,所以叫伪连接

选择器可以组合起来使用。

另外:a.red:link,对不同的超链接的class设置属性

第一个字变大p:first-letter{font-size:%200;}

程序顺序执行时不考虑优先级

div:域,块级元素,根据放进的东西进行拉伸

 

熟悉css的属性,理解网页布局

CSS属性单位   

1.      长度单位

绝对长度:cm,mm,in英寸,pt点1/72英寸,pc 12点

相对长度:px,em 当前字体中M字母的宽度,ex 当前字体中x字母的高度,指元素尺寸相对于浏览器的系统默认值来相应缩放

常用px和pt

2.颜色单位

使用百分比值来表示,如color:rgb(%50,0,%50)

也可以使用0-255之间的数来表示

可以使用十六进制数组定义颜色如:#ff6600,#ffffff,#000000

简化的十六进制定义颜色#080

直接使用名字

3.URL地址p{background-image:url(“”或单引号)}

4.字体属性:

Font  一次性设置字体多个属性,一个是没有效果的,具体可以设置规定文本的字体、字体尺寸、字体颜色

Font-style 文本是斜体还是正常的一个样式 斜体。。。

Font-variant 规定字体异体 比如英文设置成大写small-caps

Font-weight 字体加粗inherit

Font-size 设置字体的尺寸

Line-height 行高,每行有多高,letter-spacing字间距

Font-family 字体类型

常用

5.文本属性

Line-height行高

Letter-spacing字间距

Text-aligin:位置

Text-decoration:下划线

text-transform: uppercase;控制元素的字母

vertical-align: sub;设置元素的垂直对齐方式,按列对齐的方式即

6.颜色与背景属性:

Color

Background-color

Background-image

Background-repeat如何铺排,设置重复repeat-x横向复制

Background-attachment:scroll/fix随对象内容滚动还是固定

Background-position:设置图片的位置

Background:设置以上属性

 

Css盒模型

盒模型是将所有元素放在一个正方形或者矩形的盒子中,这个盒子可以用多个可设置的属性来分层

 

 

可控制三个不同的分层属性

Margin:设置四个外边距,不常用,设置顺序上,右,下,左

Padding:元素与元素之间的属性

Border:边线

 

Margin:margin-bottom下

Padding:

border

border-color: transparent;边框透明

border-style:

double, dashed , dotted ,hidden, inherit,solid继承

 

position,top,bottom,left,right,z-index

position:static按规则正常定位。Relative定在前一个的原始位置的尾端位置,absolute定位在框架的左上角位置,默认static

CSS定位属性,使用width和height控制宽高,clip和

Top和left表示与父的或是相对位置调整元素与其之间的位置,一般加上relative

z-index几个元素可能会重叠在一起,值越大表示放到越前面。

 

宽度和裁剪:clip overflow指定时必须为absolute

Clip:rect(10px,80px,0px,10px),一般用于裁剪图片  overflow:如果超出了这个范围怎么办

 

用的比较少

显示属性:display 元素会移除去  visibility,也有一个hidden,元素还在原来的地方

 

 

列表属性:list-style,list-style-image,list-style-position,list-style-type

 

鼠标属性:cursor

span.crosshair {cursor:crosshair;}
span.help {cursor:help;}
span.wait {cursor:wait;}

表格布局   框架布局   CSS布局

 

Float:left float:right;

首先要确定大的

 

JavaScript核心基础语法

概念和作用

如何使用

体系架构

变量         整数和小数都是number

数据类型

函数

什么是

一种嵌入在网页的程序段,解释型语言,只能在浏览器中解释运行,Netscape发明,ECMA将其标准化,与java无关,出于安全考虑,有一些限制,增强客户端的交互能力。

 

组成:

EcmaScript规范 bom dom

ECMAScript核心:基础语言

DOM(文档对象模型):规定了访问HTML和XML的接口

BOM(浏览器对象模型):提供了独立于内容而在浏览器窗口之间进行交互的对象和方法

JS与Java的区别:

JS只在浏览器上执行,java可在各种平台上执行

JS也有变量,常量,运算符,关键字,数据类型,语句等

借用Java的语法,运算符和表达式与Java相似。

作用:

增,删,改网页上的属性和元素

在HTML网页中动态写入文本

响应网页中的事件,并作出相应的处理

检验客户端提交的数据

检测浏览器类型和版本

处理Cookie:用户信息

 

技术体系:

核心语言的定义ECMA

原生对象和内置对象:有JS语言原生对象,还有自带的,等等

BOM浏览器对象模型

DOM文档对象模型

事件处理模型

 

如何使用:

1.      在Html中直接嵌入JavaScript脚本

2.      在Html中外联一个文件

3.      直接编写在事件中

内嵌式:<script type=”text/javascript”>

</script>

alert("66666666");输出

 

外联<script type=”text/javascript” src=”.js”></script>

优点,结构表现分离,缺点,不支持动态

 

事件处理程序和伪装

  <input type="button" value="测试"onclick="alert('测试')" />

伪url   :<ahref="javascript:alert('测试');">超链接</a>

 

弱类型语言,不一定要初始化

定义使用var来定义,如:

Var

Var title=”hello”,cost=10000,

不一定初始化

保留关键字:

Break,for,double,import,public,else,new,try,if,in,while,typeof,void,var

数据类型:原始类型和引用类型

Undefined未初始化或无返回结果最后结果

Null:null派生出来,表示不存在对象

Boolean

Number:即可表示32位整数,又可以表示64位浮点数

Number.MAX定义上下限

Number可以看是否为无穷或者,isNA

String判断类型,String内部为单引号,都可声明

 

 

Typeof运算符

对变量使用得到他的返回类型null为object

示例:

Alert(typeof x),未声明的为undefind

 

 

数据类型转换

parseInt转换

不能转换返回NaN

强制类型转换:

Boolean(value) Number(value) String(value)

 

引用数据类型:原生对象JS提供,独立于浏览器对象Object,Array,String,Date,RegExp

内置对象:一种原生对象:Glabal全部,有各式各样的方法,math

宿主对象:与浏览器有关的对象。BOM,DOM

自定义对象:

 

原生对象:Object所有类的父类

Var x = new Object()

属性:constructor:指向创建函数的引用

Prototype:对该对象的对象的引用,返回Object类的一个实例

方法:

hasOwnproperty(“”)判断对象是否有指定属性

isprototypeof(object):判断对象是否为另一个对象的原型

var re = new Object()

Object.prototype.isPrototypeOf(re)

propertyIsenumerable(“property”)判断指定属性是否可以用for….in语句枚举

toString 返回对象原始字符串

valueOf:返回最适合该对象的原始值

 

 

 

 

 

包装器类

Boolean String Number

 

数组:var a = new Array();定义一个数组,长度不固定,开始为0

Push();定义后push    join(“d”)在每个元素后加入d(最后一个除外)

原生对象– Date

//创建日期对象,保存当前时间。

var d = new Date(); 

//参数为1970/1/1到今的毫秒数。

var e = new Date(10);

//转换为1970/1/1至今的毫秒数

Date.parse("May 25, 2004“);

//转换为1970/1/1至今的毫秒数

Var x = new Date(Date.UTC(2003, 12,10));

//获得日期的年、月、日

alert(date.getYear()+"   "+date.getMonth()+"  "+date.getDate());

内置对象– Global

isNaN()是不是数字

isFinite()是不是无穷大

parseInt()

parseFloat()

//将URL中允许的字符编码,解码,如空格,汉字

encodeURI(),decodeURI()

//将特殊字符进行编码解码:如斜杠,问号等。

encodeURIComponent(),decodeURIComponent()

//解释执行一段字符串

eval(); eval(“alert(‘abc’)”); == alert(‘abc’);

Var x=eval(“2+3”)      x=5

instanceof运算符

用于对象类型的比较

var s = new String("helloworld");

var b = s instanceof String;

alert(b); //输出true

function 函数名(参数1,参数2,……){

         函数体

}

函数的返回值不需要声明

函数用return进行返回

如果函数没有明确的返回值,则返回值为undefined

document.write输出

 

浏览器对象模型BOM:

u  BOM介绍

BOM是浏览器对象模型。

仅是 JavaScript实现的一部份,没有相关标准。

//BOM 能做什么?

操作浏览器窗口

提供导航对象

提供定位对象

提供跟屏幕相关对象

提供对cookie的支持

Window窗口:

打开浏览器后马上创建window对象,代表整个窗口。

window对象的作用:

操作窗口

导航和打开新窗口

系统对话框

状态栏

时间间隔和暂停

历史

1.      操作窗口

moveBy(dx,dy) : 移动指定的距离

moveTo(x,y) : 移动到指定位置

resizeBy(dx,dy) : 修改窗口的高宽

resizeTo(x,y) : 修改高宽为指定值

[IE]screenLeft,screenTop : 取得窗口距屏幕位置

[IE]document.body.offsetWidth/Height : 客户区高宽

[Mozila]screenX/screenY : 窗口位置

[Mozila]innerWidth/innerHeight : 客户区高宽

[Mozila]outerWidth/outerHeight : 窗口高宽

2.在新窗口打开链接

//parm1:要打开的url

//parm2: 子窗口名字

//parm3:left,top,width,height,toolbar,resizeable,status,location...见p64

//返回新窗口的window对象

window.open("url","新窗口名字","新窗口特性");

//关闭窗口,如果是主窗口会有提示

window.close();

//子窗口中可以取得父窗口对象,利用这个对象,可进行父子窗口传值。

top.opener

提示:新窗口可能被栏截

 

3.系统对话框

window.alert("字符串");

window.confirm("选择是或否");

是返回true

否返回false

window.prompt("提示信息","默认值");

OK返回输入的字符串

取消返回null

对话框的样式不可更改

对话框是模式窗口

 

4.      状态栏

window.defaultStatus = "默认在状态栏显示内容"

window.status = "状态栏内容";

注意:不要过度使用状态栏。

 

5.      时间间隔和暂停

var id=window.setTimeout("执行代码",毫秒数);

window.clearTimeout(id)

var id=window.setInterval("执行代码",毫秒数);

window.clearInterval(id);

 

6.      访问历史页面

window.history.go(-1);

参数是返回的页面数,正数为前进

window.history.back();

后退

window.history.forward();

前进

window.history.length;

返回历史页面的个数

 

7.document对象

document代表窗口的空白区域。

document是window的属性

DOM和BOM均定义了doucment。

属性

lastModify : 页面的最后修改日期

referrer : 浏览历史中的前一个URL

title : 标题栏

URL : 当前页面的URL。

集合属性

anchors : 页面中所有锚点的集合

applets : 页面中所有applet的集合

embeds : 页面中所有嵌入式对象集合(<embed/>)

forms : 表单集合

images : 图片集合。

document.images[0]

document.images["imageName"]

links : 超链接集合

方法:

write("")

writeln("");

var inputText =document.getElementById(“myPwd”)

在使用这两个方法时,要注意整个页面的元素会重新设置,所以不要轻易使用

 

8.location对象

location表示载入窗口的URL

解析URL

Host: URL中的主机名称

pathname : URL中主机名后的部份

prot : 端口

protocol : 协议

search : URL中问号后面的部份

跳转到新页面

location.href = "a.html"

location.assign("a.html");

location.replace(“a.html”);//替换没有历史信息

刷新页面location.reload(boolean);

true : 从服务器刷新

false : 本地刷新

 

9. navigator对象

保存跟浏览器相关信息

language

userAgent

onLine

各个浏览器实现不一致,见P74

 

10. screen对象

跟屏幕相关属性

availHeight : 窗口可以使用的高度

availWidth :  窗口可以使用的宽度

colorDepth : 颜色位数

height : 屏幕高度

width : 屏幕宽度

//全屏

window.moveTo(0,0);

window.resizeTo(screen.availWidth,screen.availHeight);

 

文档对象模型:DOM操纵样式表

1.      DOM简介

文档对象模型

2.      DOM原理是将XML/XHTML文档装入内容,并以节点的形式解析为一颗节点数。

3.      DOM提供相应的API,可以对节点树进行增删改查。

4.      利用DOM可让JavaScript对网页中的元素进行控制,实现动态网页的功能

 

对DOM的兼容情况:标记就是DOM,文档

节点树例子:<input…..     <label……

 

节点类型:document节点,代表整个文章

DocType节点:DTD样式

DocumentFragment:片段节点

Element:元素节点

Text文本节点

Attr:属性节点

CDataSection:CData类型的文本节点

Comment:注释节点

 

节点属性:

nodeName节点

value:按钮中属性

nodeValue:节点值

nodeValue 属性规定节点的值。

元素节点的 nodeValue 是 undefined

文本节点的 nodeValue 是文本自身

属性节点的 nodeValue 是属性的值

 

nodeType节点类型,返回1表示元素,2表示文本

nodeType 属性

nodeType 属性规定节点的类型。

nodeType 是只读的。

最重要的节点类型是:

元素类型

节点类型

元素

1

属性

2

文本

3

注释

8

文档

9

 

document.documentElement:返回节点

owerd节点所属的文档

firstChild,lastChild

NodeList:节点集合

childNodes.item().nodeName//item()通过下标取到任意键

myBody.attributes[0]以键值对的形式存起来所有属性length 还可以removeNameItem(“”)根据名字删除属性。

访问元素节点:

获取元素属性的3种方法

getElementById("myId");获得节点

getElementByTagName(name)返回指定元素的称的元素节点集合,可以使用*所有,但IE不支持

getElementByName(name)按name属性值获取元素节点集合

innerHTML,innerText可使用获取内容,前者只是完全按字符串来获取内容,后者会去掉,一般使用HTML,可以直接让它等于一个值,一般用中间值接住,再使用+替换掉

也可以加标签

 

如何获取表单的值

文本框

Value

单选按钮

通过byName得到单选框

再循环如果checked,就接

复选框

 

下拉框

通过selected=true设为选中

 

Visibility hidden visible

 

 

Display:隐藏,以块级元素显示,默认非块级

Display不会保留显示block noneinline

 

 

回顾:innerHTML

访问元素节点

Dom

DOM节点树

 

操作页面元素,增删替换克隆

设置元素属性

操作元素节点

操作元素style样式表。

常见事件

Click

Dbclick

Mousedown

Mouseout

Mouseup

Mousemove 移动一次触发一次

页面上所有元素均支持鼠标事件

发生顺序

单击:Mousedown  Mouseup  Click

双击:Mousedown  Mouseup  Click  Mousedown  Mouseup Click  Doubleclick

 

获取元素属性

GetAttribute(attName)获取属性

setAttribute(attName,value)设置属性

没有就是空,返回style只会找内联

 

节点的增删替换

createElement(元素标签):创建一个新的元素

createTextNode(text):创建一个文本节点

appendChild(node):添加元素节点到子节点中

removechild(node):从childNode中删除节点

replaceChild(newnode,oldnode):替换节点

clonenode(node)克隆节点,包括属性,最好将id也克隆下来里面有一个布尔值,如果为true,则子节点椰壳龙;

 

操作元素style属性

每个css样式,style对象都包含了一个名称类似的属性。

一个单词的样式通常名称相同

两个单词的样式通常改为驼峰命名法。

只需要对style的相应属性赋值,就可以操纵其样式。

div1.style.border = "1px solidblack "

Style对象提供cssText描述样式表属性

 

操作外部样式表中的样式

style对象无法得到外部样式表的样式。

document.styleSheets得到所有样式表的集合。

DOM为样式表指定了一个称为cssRules的集合。

IE有一个名称为rules的集合。

//获取并操作外部样式表

var cssRules =

document.styleSheets[0].cssRules || document.styleSheets[0].rules;

alert(cssRules[0].style.color);

//修改外部样式表

cssRules[1].style.backgroundColor ="red";

 

js操作table样式表

rows:表格所有<tr>节点集合

deleteRows(pos)删除指定位置的<tr>节点

inserRow(pos):插入

cells:tr节点中所有<td>集合

deleteCell(pos):删除指定位置上的td节点

insertCell(pos)指定位置插入一个td节点

class属性例外,它为关键字,应换成className

navigator.appName:浏览器名字

 navigator.appVersion版本号

 

对form元素进行脚本编写

对文本框进行脚本编写

对列表框和组合框进行脚本编写

对复选框和单选框进行脚本编写

对表单进行验证

 

表单编程:

Settimeout指定时间,调用代码,执行一次

setInterval周期性调用代码,直到窗口被关闭或调用clearInterval

 

对form元素进行脚本编写

获取表单元素

var frm =document.getElementById("form1");//dom

var frm = document.forms[0]; //bom

var frm = document.forms[“form1”];//对IE是通过name值获得,对firefox是通过ID获得

var frm=document.表单名

提交submit

访问表单域(字段)

—var frm = document.getElementById("form1");//dom

var field1 = frm.elements[0]; //第一个表单域,可用于遍历表单域

var field1 =frm.elements["name"];//得到名为name的表单域

var field1 = frm.name;//直接用名称得到表单域,要把id和name都加上去

var field1 = frm[“my name”];//得到name值有空格的表单域

var field1 = frm[0];//得到第几个表单元素

 

表单提交

<input type="submit" value="submit">//提交按钮

<input type="image"src="submit.gif">//提交图片

doucment.forms["form1"].submit();//使用js提交

提交表单时,会触发表单的submit事件,在onsubmit中返回false可以阻止表单提交。

使用submit()方法提交表单,不会触发submit事件。

 

这里在注册时填不对时不会提交

表单重置

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

表单重置时,会触发表单的reset事件,在onreset中返回false可以阻止表单重置。

使用reset()方法提交表单,但仍会触发reset事件。

非隐藏表单字段的共有属性和方法

disabled:是否可用,当设置为不可用时,表单的值不会随表单提交

readOnly:只读。当设置之后,表单的内容不可改变,表单的值会随表单提交。只能用于文本框

form:得到表单

blur():使表单域失去焦点。

focus():使表单得到焦点。

blur事件:失去焦点时触发,并调用onblur()函数。

focus事件:得到焦点时触发,并调用onfocus()函数。

 

 

对文本框进行脚本编写

单行文本框text和多行文本框textarea

value属性得到或设置文本内容。

value.length可以得到文本长度。

选择文本框

select():选择文本内容。

文本框事件

blur,focus事件

change事件:用户改变文本框的值,并失去焦点后触发。注意和blur事件的区别

select事件:文本被选中,或select()被调用时触发。

实现自动选择文本

onfocus = "this.select();"

 

 

 

对列表框和组合框进行脚本编写

 

访问选项

listbox.options[0].firstChild.nodeValue;//取得选项文本

listbox.options[0].getAttribute("value");//取得选项值,设置的value值

listbox.options[0].text;//获得文本

listbox.options[0].value;//获得值

listbox.options.length;//获取选项数量

listbox.selected; //选项是否被选中

listbox. selectedIndex;

获得选择的序号,未选返回-1

multiple=multiple设为多选时,获得第1个。

 

对复选框和单选框进行脚本编写

checked属性:是否被选中

defaultChecked属性:默认是否被选中

click():模仿点击,会触发click事件,改变选择状态。

对于复选框,可以进行进行遍历操作。

 

表单验证

一个常用的功能,能有效降低服务器负担。

捕获错误的时机

错误发生前

keyPress事件

错误发生时

change事件

错误发生后

submit事件

表单验证最佳实践

提示应对用户有帮助

不要使用alert()

长度验证用maxLength比用js验证更好

一次显示所有错误

早点捕获错误

拿不准校验规则,不需太严格

 

正则表达式:

New regexp(表达式)

 

Var reg=/\d/;

\w任何单字字符,等价于a-zA-Z0-9

\W任何非单字字符

\s任何空白\t\n\r\f\v

\S任何非空白符

\d任何数字[0-9]

\D除数字外任何字符

/[a-z]/

 

 

 

 

JQuery

jQuery 是一个 JavaScript 库(兼容多浏览器)

jQuery 极大地简化了 JavaScript 编程。

   write less,do more

jQuery 很容易学习。

辅助JavaScript开发的库

 

JQuery和DOM对象的区别

DOM:使用传统方法

JQuery:使用类库选择器获取对象

JQuery包装DOM产生JQuery对象

JQuery不能使用DOM的方法。

 

$( “#div” ).attr(“name”);=document.getelementbyid(“div”).getAttribute(“Name”);

转化:var divjobj=$(divjobj)

转DOM:1.var v=v[0];

2.      var v=v.get(0);

 

选择器:id选择器:$(“#myP”).hide();

元素选择器:$(“label”).hide();

类选择器:$(“.hideelement”).hide();

通配选择器:$(“*”);

组合选择器:$(“myP,.hideelement”);

包含选择器:$(“p span”);

子元素选择器$(“dl>dt”);只能筛选前面节点的子节点,不能再选出下面节点

 

$(document).ready(init());

$(document).ready(fuction());

操作属性:.attr

.removeAttr(“name”)

.css();

addClass(“class”)

.removeclass(“class”)

.html();

.text();

.val();获取当前的value值

 

Show

Hide

Fadein

Fadeout

 

JQ动态绑定事件

Click();

Dblclick()

Mousedown()

Mouseenter()

Mousemove()

Mouseout()

 

Jq轻量级框架

Html各类标签

 


 

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:2052次
    • 积分:238
    • 等级:
    • 排名:千里之外
    • 原创:23篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章分类