javascript的常用方法 -

longflang

浏览: 65702 次
性别:
来自: 广州

最近访客更多访客>>

cccoooccooco

lixiaotian2008

guanshubang

难念的经

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

javascript的常用方法

博客分类：

javascript

JavaScript 正则表达式浏览器嵌入式 HTML

今天在网上看到一个还算不错的js常用方法总结，转过来，哈哈

2009-07-01 21:34:18 来自: 洋渔

新一篇: js 常用方法大全
//------Html与JavaScript 理论

<html></html>//html文档的标记
<head></head>//头标记
<title></title>//标题标记只能放在head标记中
<script></script>//script标记
<body></body>html文档的主体部分
body标签有以下一些属性:
text : 整个网页中的文字颜色
link : 设定一般超链接文本的显示颜色
alink:按下鼠标是的超链接的显示颜色
vlink:访问过的超链接的颜色
background:网页背景图片
bgcolor:背景颜色
leftmargin:网页与浏览器窗口左边沿的间隙,单位为象素
topmargin:网页与浏览器窗口上边沿的间隙,单位为象素

html中注释


html编码与显示处理结果
< <
> >
& &
" "

格式标签

<br>
<nobr>
<blockquote></blockquote>//显示文字的缩进效果
<center></center>//嵌套的图形或文本元素在页面的水平方向居中显示
<marquee></marquee>//移动显示嵌套在其中的图形或文本元素
主要属性: direction 移动方向设置值:left right down up
behavior 行为设置值:scroll alternate slide
不同列表的显示
<dl></dl><dt></dt><dd></dd>
dl: definition list 定义列表
dt: definition term 定义术语
dd: definition definition定义对属于的解释定义部分

<dl>
<dt>中国城市</dt>
<dd>北京</dd>
<dd>上海</dd>
<dd>南京</dd>
</dl>
数字列表
<ol>
<li>一</li>
<li>二</li>
</ol>
点列表
<ul>
<li>一</li>
<li>二</li>
</ul>
<pre></pre>//显示嵌套在其中的所有空格和空行,但在其中不能插入图片,activeX或java小程序

文本标签
<h1></h1>..<h6></h6> //h6最小
<b></b>//字体加粗
<i></i>//斜体形式显示
<u></u>//下划线形式
<sub></sub>//下标
<sup></sup>//上标

<a name="标记一" >第一部分
<a href="#标记一">跳转到第一部分</a>
_blank 新窗口
_self 链接的原窗口打开目标网页
_parent 当前帧的父窗口显示目标网页
_top 在最顶层显示目标网页

图象标签
<img>属性 : alt 鼠标移动到图象上显示的提示文本.
align 图象与它周围的文本的对齐方式,设置值为:top bottom left right 等
border 图象的边框
height 图象高度
width 图象的宽度
<hr>水平线属性 : size 粗细
color 颜色
width 宽度
noshade 无影印

HTML高级部分
表格标签<table></table>
属性: bgcolor设置表格的背景色
border 设置边框的宽度默认值为0
bordercolor 边框的颜色
bordercolorlight 边框的明亮部分的颜色 ,但当border的值>=1
bordercolordark 边框的昏暗部分的颜色 ,但当border>=1
cellspacing 单元格之间的间隔大小
cellpadding 单元格边框与其内部内容之间的间隔大小
width 表格宽度
hright 表格高度

<tr></tr>行标签格
属性 : align 设置单元格内容的水平对齐值:left center right
valigh 设置单元格内容的垂直对齐方式值:top middle bottom
bgcolor 设置行的背景颜色

<td></td>单元格标签
属性: width 单元格宽度
height 单元格高度
align 单元格内容的水平对齐
valign 单元格内容的垂直对齐
colspan 设置一个单元格跨占的列数默认值1
rowspan 设置一个单元格跨占的行数默认值1
nowarp 禁止单元格自动换行显示 nowarp="nowarp"

<th></th>用法和<td></td>一样,通常显示效果为黑体居中文字
<caption></caption>指定表格的标题或题目

帧标签
<frameset></frameset> 嵌套在<html></html>中或其他<frameset></frameset>中
属性: 取值可以是多格百分数,绝对像素或星号(*)
rows "30,*" 第一行 30像素剩下的为第二行
cols "30%,20,*" 第一列30% 第二例20像素剩下的为第三例
<frame>
属性 src 帧窗口初始化时装载的网页文件的url地址
name 帧窗口的名字
scorlling 显示滚动条 yes(显示) no(不显示) auto自动
nosize 禁止用户改变帧的大小
<noframes> 此标签也放在<frameset>标签中,作用:用来在那些不支持帧的浏览器中显示文本或图像信息
注:<noframes>中必须嵌入<body>标签
<iframe></iframe>标签不需要放在<frameset>中

表单标签
<form>
属性 : action 设置接受和处理浏览器递交的表单内容的服务器程序的url
action属性的值设为使用mailto协议的url地址,将表单结果作为电子邮件内容发送出去
method 表单提交方式 get post
target 返回结果显示的目标窗口或目标帧
title 鼠标在表单上任一位置停留时,浏览器用黄色小浮标显示的文本
enctype 表单提交数据的编码方式

<input type="submit"> 提交按钮必须放在<form>中文字为value
<input type="reset">重置按钮显示文字为value
<input type="text">文本输入区域
属性 : size 输入区域的宽度以字符个数为度量单位
value 显示在输入区域中的文本内容
maxlength 指定能输入的最大字符串长度
readonly 只读状态
disabled 不显示
name 作为一个参数名传递给服务器
<input type="checkbox">
属性: checked是否北选中
value 某个复选框被选中时元素说代表的结果值,未被选中,则不会传递任何值或复选框名称到服务器
name 复选框名称
<input type="radio">
属性: name 单选按钮名称
value 属性值
<input type="hidden">
<input type="image">//创建一个图象元素,当用户点击submit后

css
几种设置方式
内联样式表 inline Styele sheets
嵌入样式表 embedded style sheets
外部样式表 linked style sheets
输入样式表 imported style sheets

1 inline
2 embedded 在head中嵌入style标签

JavaScript
简介 : 原名LiveScript 是Netscape引进Sun的java概念开发,是一种给予对象Object和时间驱动Event Driven
,并具有安全性的脚本语言.
JavaScript Netsacape公司
JScript Microsoft公司
ECMAScript 标准化JavaScript 是(ECMA: European Computer Manufacturers Association)欧洲计算机制造商协会
联合Microsoft 、Netscape指定的

脚本代码位置
1, <script></script>标签对中
2, 单独的文件中
3, 某个元素的事件属性或超链接的href属性值

javaScript严格区分大小写
javaScript中的注释
//和/**/

创建动态函数
<script>
var square = new Function("x","y","var sum; sum=x*x+y*y;return sum;")//其中xy为参数,后面为函数体
alert(square(3,2));
</script>
javascript系统函数
encodeURI 编码uri或url
<script>
var strEU = encodeURI("http://www.12.com?name=许方亮&sex=male")
</script>
decodeURI 编码uri或url
<script>
var strEU = decodeURI("http://www.12.com?name=%23&sex=male")
</script>
parseInt 字符串转换成一个整数 parseInt(numString, [radix])
<script>
parseInt("32",10);//将字符串32转换成对应的十进制整数
parseInt("32",16);//将字符串32转换成对应的十六进制整数
</script>
parseFloat 字符串转换成一个整数 parseFloat(numString, [radix])
isNaN 用于监测parseInt和parseFloat方法的返回值是否为NaN ,true或false
escape 对一个字符串进行编码后的结果,但对URI要使用encodeURI
unescape 是escape的逆过程
eval 将某个参数字符串作为一个javascript中表达式执行.
for(var i=0;i<n;i++)
{
eval("var a" + i +"=" + i);
....
}//执行结果
var a0="0";
var a1="1";
...
JavaScript中对象
定义构造函数Person()
实例化对象var person1 = new Person()
添加属性
person1.name或person1["name"]
<script language="javascript">
function Person()
{
}
var person1 = new Person();
person1.age = 18;
person1.name="张三";
//alert(person1.name +"'s age : " + person1.age);
function sayFunc()
{
alert(person1.name +"'s age : " + person1.age);
}
person1.say = sayFunc;
person1.say();
</script>

JavaScript中内置Object
1, String对象
var strInstance = new String("Hello World!");
var length = strInstance.length;
或者
var strInstance = "Hello World!";
var length = strInstance.length;
或者
var length = "Hello World!".length;
2, Math对象
3, Date对象
专门用于对象的语句

with(对象名称)// 在自行语句中需要使用对象的属性方法时无需加上实例名称和.,而直接使用
{
执行语句块
}
for(变量 in 对象)
{
执行语句
}

DOM编程
Document Object Model 文档对象模型
DOM对象模型中的各个对象间的层次关系:
window
location
frames
history
navigator
event
screen
document
links
anchors
images
filters
forms
applets
embeds
plugIns
frames
scripts
all
selection
styleSheets
body
如何编写事件处理程序,三种方式:
1, 再事件源对象所对应的html标签上增加一个要处理的时间属性
<script language="javascript">

</script>
<body oncontextmenu="return hideContextmenu()"/>;
2, 直接设置对象的时间属性
<script language="javascript">

<script>
3, 使用<script>标签的for属性指定事件源和用event属性指定事件名
<script language="javascript" for="document" event="onconextmenu" >
window.event.returnValue = false;
</script>

window对象
说明:此对象代表浏览器的整个窗口
对象的方法:
alert :提示对话框.
confirm :显示ok和cancel按钮的对话框,根据选择返回true或false.
prompt: 显示一个用户可以输入信息的对话框
close: 关闭当前浏览器窗口.
navigate : 导航到指定的url资源.
setInterval : 设置浏览器每隔多长时间定期调用指定的程序代码
如:setInterval("func()",500),每隔5秒种调用一次func()函数.
clearTimeout 取消clearInterval方法的设置.
setTimeout: 设置浏览器过多长时间以后执行指定的程序代码
moveTo: 将浏览器地动到屏幕上的某个位置.
resizeTo: 改变浏览器窗口的大小.
open: 打开一个行窗口
showModalDialog : 产生一个模态对话框窗口
showModelessDialog: 产生一个非模态对话框窗口

对象的属性:
closed 返回true或false 标识window对象对应的窗口是否关闭
opener 返回打开当前窗口的那个window对象
defaultstatus 设置或返回窗口状态栏种默认显示的文本内容
status 设置和返回窗口状态栏种当前正显示的文本内容
screenTop 返回窗口左上角定点再屏幕上的垂直位置
screenLeft 返回窗口左上角定点再屏幕上的水平位置

对象事件:
onload 对应浏览器窗口装载完网页文档时的事件,需要再网页文档下载完毕时执行的程序代码应该放在onload事件处理程序种.
onunload 对应浏览器窗口卸载网页文档之后的事件,需要在网页关闭之后执行的程序代码在此事件处理程序中.
onbeforeunload 浏览器准备写在网页之前的事件

通用事件:
onclick 单击(button checkbox radio reset submit link)
onmousemove 在某个html元素上移动时产生的事件
onmouseover 鼠标从外面移进一个html元素的边界时产生的事件
onnouseout 移出一个html元素边界时产生的事件
onmousedown 鼠标任意键按下时产生的事件
onmouseup 鼠标上任意按键弹起时产生的事件
onkeyup 当键盘按钮弹起时产生的事件
onkeypress 当用户按了一个数字或字母键时产生的事件

doucument对象
方法:
write 用于向html文档中动态写入内容
writeln 写入内容的某位加上换行符
open 打开新的文档 ,建议使用window.open方法来打开新的文档
close 当向新打开的文档对象中写完所有内容后,一定要调用该方法关闭文档流
clear 清除文档中的所有内容,该方法目前没有得到完全支持
getElementById html元素指定的id属性
getElementByName html元素指定的name属性,如果有多个html元素用一个name,则返回的时数组
getElementsByTagName 返回标签名等于指定参数的所有html元素对应的对象数组
createElement 产生一个代表某个html元素的对象,可以使用其他一些方法将这个对象所标识的html元素插入到html文档中
createStyleSheet 为当前html文档产生一个样式表或增加一条样式规则

属性:
与<body>标签相关的属性
alinkColor 超链接被选中时显示的颜色
linkColor 超链接的正常状态的颜色
vlinkColor 访问过的超链接的显示颜色
bgColor 整格文档背景的颜色
fgColor 指定文档中文本的默认前景颜色

描述网页文档自身信息的属性
charset 编码字符集
defaultCharset 默认编码字符集
cookie
fileCreatedDate 网页文档的创建的字符串格式
fileModifiedDate 网页文档的修改时间的字符串格式
fileSize 当前网页文档的大小
lastModified
url 设置或返回浏览器访问当前网页时说采用的url地址
URLUnencoded 访问当前网页时说采用的URL地址的url解码后的字符串
referrer 返回导航到当前网页的超链接源的URL地址

document对象的对象属性
forms数组代表html文档中的所有<form>标签的集合
anchors数组代表html文档中所有指定了name属性或id属性的<a>标签对的集合
links数组代表html文档中所有指定了href属性的 <a>标签对集合
images数组代表html文档中所有<img>标签的集合
scripts数组代表html文档中所有<script>标签对的集合
applets数组代表html文档中所有<applet>标签对的集合
all数组代表html文档中所有的标签对象的集合
styleSheets数组代表html文档中所有使用<style>,<link>或者@import语句定义或引入的样式表的集合
body
title

body对象的方法
appendChild 添加子元素
<script language="javascript" >
function createA()
{
var oa = document.createElement("A");
oa.href ="http://www.126.com";
oa.innerText ="126网络";
document.body.appendChild(oa);
}
</script>
<body onload="createA()">
下面的超链接是动态产生的<br>
</body>

body对象的属性
background属性设置网页背景图片的url
bgProperties 设置背景图片是否能随网页文档滚动
text属性设置和返回文本的显示颜色
topMargin
bottomMargin
leftmargin
rightmargin

body对象与其他html元素说通用的属性
id 用于给html元素指定一个唯一标识名
name
classname 设置或返回html元素的class属性
innerText 包含html代码的转化为普通文本显示
innerHtml

body 常用事件
onselectstart 阻止用户复制网页内容
onscroll 定制相对静止区域

form对象
方法:
submit
item

form表单字段元素对象
方法:
blur 让表单字段设置焦点
focus 让表单字段元素获得焦点
click 模仿用户鼠标单击该元素的过程
setCapture 在某个表单字段元素对象上捕获当前网页文档上的鼠标事件
releaseCapture
add 为列表框(select)增加一个选择项(option)

form表单字段元素对象的属性
defaultValue 返回表单字段元素的默认值,也就是表单字段元素的初始值和当用户使用reset按钮恢复表单后的值
disabled 设置或返回表单字段元素的disabled状态
form 返回表单元素所属于的form表单对象
readOnly 设置或返回文本输入框的readonly状态
title 设置或返回表单字段元素的title属性
value 设置或返回表单字段元素的当前取值
checked 设置或返回表单单选按钮,复选按钮的选中状态
multiple
selectedIndex 设置或返回列表框中被选中的选择项的索引号
options 数组属性,包含列表框中的所有选择项对象的数组
text 设置或返回该选择项显示的文本
value 设置或返回该选择项对应的取值
selected 设置或返回该选择项是否被选中
index 设置或返回该选择项在所有选择项中的顺序索引位置

form表单字段元素对象的事件
onChange 当焦点离开文本输入框且文本输入框中的值改变时,或者改变列表框的选择结果后,产生该事件
onSelect 当单行或多行输入框中的文字被选择加亮后,产生该事件
onFocus 当表单字段元素获得焦点时,产生该事件
onBlur 失去焦点时,产生该事件

Js 中正则表达式的应用(regular expression)
RegExp对象的创建:
一: var reg = new RegExp("pattern"[,"flags"})
二: var reg = /pattern/[flags]
注:pattern为正则表达式,如:\d \w等
flags:设置正则表达式模式的标志信息,可无.设置值如下:
"g":全局标志,作用:设置后搜索和替换操作时,将文本中所有匹配的部分起作用,反之仅搜索和替换文本中最早匹配的部分;
"i":忽略大小写标志;作用:设置后进行匹配将忽略大小写;
"m":多行标志,作用:设置后将忽略\n\r的换行.
RegExp对象的属性:
1.静态属性:
1)index:只读,是当前正在使用的正则表达式模式在被搜索字符串中的第一次匹配的文本内容的开始位置,位置从0开始计数.
初始值为-1,在每次有成功匹配发生时,index属性值都会随之更改.
2)input:只读,返回当前正在操作的正则表达式模式所作用的字符串,可以简写为$_,初始值为空字符串"".
3)lastIndex:只读,是当前正在使用的正则表达式模式在被搜索字符串中第一次匹配的文本内容的最后一个字符的下一个位置,位置从0开始计数,
该位置通常被作为使用当前正则表达式模式继续在被搜索字符串中执行下一次搜索时的其实位置,初始值-1.
4)....
2.对象实例属性
1)global 只读,RegExp设置了g标志则返回true否则返回false;
2)igonoreCase 只读,RegExp设置了i标志则返回true否则返回false;
3)multiple只读,RegExp设置了m标志则返回true否则返回false;
4)source只读,创建RegExp对象实例时指定的正则表达式模式文本字符串.
RegExp对象的方法:
1.test() 语法:test(str)作用:检查一个字符串中是否存在创建RegExp对象实例时所指定的正则表达式模式,存在返回true并且更新上述RegExp的相关静态属性,否则返回false
2.exec() 语法:exec(str)作用:在指定的str字符串中进行搜索匹配,并匹配成功则返回一个包含搜索结果的数组,否则返回null.
注:exec()方法与全局标志(g)有关系,设置了global属性则搜索每次工RegExp对象的lastIndex属性值指定的位置开始,否则始终从字符串的起始位置开始搜索.
3.compile() 语法:compile("pattern"[,"flags"])作用:更换RegExp对象实例所使用的正则表达式模式,并将新的正则表达式模式编译为内部格式,使以后的匹配过程执行得更快.

String对象中与正则表达式有关的方法
1.match(rgExp)类似与exec方法,同:返回一个包含搜索结果的数组;不同:有无全局标志(g)返回结果都一致.
2.search(rgExp)作用:搜索时返回第一个匹配的字符串自阿整个搜索的字符串中的位置.
3.replace(rgExp,replaceText)

正则表达式的语法
限定符:
1){n}连续n次,n为非负整数;
2){n,}至少出现n次,n为非负整数;
3){n,m}出现次数n到m之间,m/n为非负整数;
4)+ 一次或多次
5)* 零次或多次
6)? 零次或一次
选择匹配符:
1) |
分组组合和反向引用符:
1)()
2)\num
.
.

字符匹配符
1)[...]匹配字符集中的任意一个字符
2)[^..]匹配字符集除外的任意字符
3)[a-z]匹配指定范围类的任意字符
4)[^a-z]匹配指定范围外的任意字符
5)\d匹配任意一个数字字符,等效于[0-9]
6)\D匹配任意一个非数字字符,等效于[^0-9]
7)\s匹配任何空白字符,包括空格、制表符、换页符等，等效于[\f\n\r\t\v]
8)\S匹配任何非空白字符,包括空格、制表符、换页符等，等效于[^\f\n\r\t\v]
9)\w匹配任何英文字母和数字类字符及下划线等效于[A-Za-z0-9_]
10)\W等效于[^A-Za-z0-9_]
11). 匹配除\n之外的任何单个字符
定位符
1)^匹配目标字符串的开始位置,即从字符串开头处匹配.用法:^o 以o开头
2)$匹配目标字符串的结尾位置用法n$ 以n结尾
3)\b 匹配一个字边界,匹配一个空格或空
4)\B匹配一个字符

2009-07-02 16:35:48 洋渔

1．初级改善
为页面添加正确的DOCTYPE
很多设计师和开发者都不知道什么是DOCTYPE，DOCTYPE有什么用。DOCTYPE是document type的简写。主要用来说明你用的XHTML或者HTML是什么版本。浏览器根据你DOCTYPE定义的DTD(文档类型定义)来解释页面代码。所以，如果你不注意设置了错误的DOCTYPE，结果会让你大吃一惊。XHTML1.0提供了三种DOCTYPE可选择：

(1)过渡型（Transitional ）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
(2)严格型（Strict ）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
(3)框架型（Frameset ）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
对于我们初级改善来说，只要选用过渡型的声明就可以了。它依然可以兼容你的表格布局、表现标识等，不至于让你觉得变化太大，难以掌握。

> 删除
2009-07-08 17:22:03 洋渔

原因很简单：解决任何问题的选择越多，找到问题的最佳解决方案的可能性就越大，这比只能使用一个解决方案要好得多。
ajax数据格式：
--名称/值（通过 GET 请求发送的信息）
--XML
--JSON（JavaScript Object Notation）

http://www.ibm.com/developerworks/cn/web/wa-ajaxintro/

转自：http://www.douban.com/group/topic/7153715/

分享到：

一个不错的JS时是控件WdatePicker | 引用利用JFreeChart生成多轴图表

2011-03-01 10:22
浏览 1059
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

javascript的常用方法

2009-07-01 21:34:18 来自: 洋渔

2009-07-02 16:35:48 洋渔

2009-07-08 17:22:03 洋渔

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

javascript的常用方法

2009-07-01 21:34:18 来自: 洋渔

2009-07-02 16:35:48 洋渔

2009-07-08 17:22:03 洋渔

评论

发表评论

相关推荐

jquery Flexgrid 取记录的方式

FlexGrid动态传参的做法

jquery filexgrid动态列

一个JQuery不错的下拉多选控件

一个不错的JS时是控件WdatePicker

top,self,parent,open,href,location 弹出窗口关系

多个按钮，提交Action

最近访客更多访客>>