代码:
style="width: 18px; border: 0px solid red;">
<select name="r00" style="margin-left: -101px; width: 118px; background-color: #FFEEEE;"
onchange="document.all.re_name.value=this.value;">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</span>
说明:
该代码兼容性非常差,在XHTML文档中或在非IE浏览下浏览均不能达到预期效果,原因可能是它们的 select 元素的 z-index 太高,并且 css 定位方式不同,部署于应用还需改进代码。
方法:
write,向HTML动态写入内容
writeln,多加一个换行
open,与window.open类似,不建议用
close,当向新打开的文档对象中写完所有的内容后,一定要调用该方法关闭文档流
clear,用于清除文档中的所有内容,建议用document.write("");document.close();这两条语句来实现同样的功能。
getElementById,返回id的对象
getElementByName,返回name的对象组(注意是数组)
getElementByTagName,返回标签名的对象组
createElement,产生一个代表某个HTML元素的对象,随后再其它方法将这个对象插入到文档中。
createStyleSheet,为当前HTML产生一个样式表或增加一条样式规则。
属性:
document.cookie
方法:
alert,对话框,OK按钮
confirm,对话框,OK和Cancel按钮
prompt,对话框,可输入
close,关闭当前浏览器窗口
navigate,在当前窗口中导航到指定的URL资源
setInterval,设置每隔一定时间调用指定程序代码,毫秒,setInterval("Func()",5000)
setTimeout,设置经过一定时间后执行一次指定程序代码,毫秒,setTimeout("Func()",5000)
clearInterval,
clearTimeout,
moveTo,将浏览器窗口移动到屏幕上的某个位置
resizeTo,改变浏览器窗口的大小
open,打开一个新窗口 window.open("abc.html","_blank","top=0,left=0,width=100,height=200,toolbar=no");
showModalDialog产生一个模态对话框
showModelessDialog产生一个非模态对话框窗口
属性:
closed
opener
defaultstatus
status
screenTop
screenLeft
事件:
onload,onunload,onmouseover,...
对象属性:
location对象:设置和返回当前网页的URL信息。
载入一个新的网页:window.location.href="http://g.cn";
刷新当前页:window.location.reload();
event对象:获取和设置当前事件的有关信息。
altKey属性,用于检测事件发生时Alt键是否被按下
ctrlKey。。。
shiftKey...
screenX,screenY设置和返回鼠标相对屏幕顶点的x,y坐标
offsetX,offsetY设置和返回鼠标相对事件源顶点的x,y坐标
x,y 设置和返回鼠标相对事件源的父元素顶点x,y坐标
returnValue设置和返回事件的返回值,一般情况下设置为false
cancelBubble设置和返回当前事件是否继续向下传递
srcElement设置和返回事件源对象
keyCode设置和返回键盘按下或弹起时的键的unicode码
button检索鼠标动作使用的是哪个按键,1左鍵,2右键,3左右同时
function window_onkeypress()
{
// alert(window.event.keyCode);
if(window.event.keyCode==27)
{
window.close();
}
}
--------------------
常量:
整型,实型,布尔值,字符串型,null,undefined
变量:var
--------------------
除法运算:9/4 = 2.25 (而不是2)
--------------------
系统函数:
1,encodeURI URL编码
var urlStr=encodeURI("http://www.abc.com/?country=吴&name=z x");
结果:http://www.abc.com/?country=%E5%90%B4&name=z%20x
2,decodeURI URL解码
3,parseInt 将字符串按指定进制转换成一个整数,参数二表示进制
parseInt("32",10) 结果:32
parseInt("3c2",10) 结果:3
parseInt("c32",10) 结果:NaN
parseInt("0x18",10) 结果:0
parseInt("12",16) 结果18
4,parseFloat 将字符串转成小数
parseFloat("2.5") 结果:2.5
parseFloat("2.c5") 结果:2
parseFloat("c2.5") 结果:NaN
5,isNaN 用于检测parseInt和parseFloat返回是否为NaN
返回true/false
6,escape 编码
非ASCII替换为%xx
7,unescape 解码
8,eval 将字符串作为JS表达式执行,例
for(var i=0;i<3;i++) eval("var a"+i+"="+i);
相当于:
var a0=0; var a1=1; var a2=2;
--------------------
对象
1,Object
2,String
方法:
indexOf,
lastIndexOf,
match,使用正则表达式模式对字符串执行搜索,返回包含该搜索结果的数组
replace,
search,使用正则表达式搜索,第一个匹配的字符的位置
slice,截字符串:参数一,开始位置,参数二,结束位置(不指定或为-1时表示末位置)
split,返回一个字符串按照某种分隔标志符拆分为若干子字符串时所产生的字符串数组,分隔符可以是多个字符或一个正则表达式,它不作为任何数组元素的一部分返回。
substr,截字符串:参数一,开始位置,参数二,长度
toLowerCase,
toUpperCase,
3,Math(不能用new创建)
方法:
abs,绝对值
sin,cos,正余弦
asin,acos,反正余弦
random,返回介于0~1之间的伪随机数
例:var num = Math.randow();
4,Date
var currentTime=new Date();
//var currentTime=new Date(2002,3,4);
var strDate=currentTime.getYear()+"年";
strDate+=currentTime.getMonth()+"月";
strDate+=currentTime.getDate()+"日";
strDate+=currentTime.getHours()+":";
strDate+=currentTime.getMinutes()+":";
strDate+=currentTime.getSeconds()+" ";
strDate+=currentTime.getMilliseconds();
alert(strDate);
结果:2008年1月19日15:27:10 518
----------------------
数组
1,
var arr=["abc",123,'abc',,3.4];
for(var i=0;i<arr.length;i++)
{
alert(arr[i]);
}
2,用对象的方式实现数组
function MyArray(){this.length=arguments.length;for(var i=0;....
3,Array对象
var arr=new Array(2.4,"abc",2);
arr.sort(); //排序
alert的结果为 2 2,4 abc
-----------------------
<div style="width: 120px; height: 50px; border: 1px solid blue; text-overflow: ellipsis; overflow: hidden;"> <nobr>就是比如有一行文字,很长,表格内一行显示不下.</nobr> </div>
p:first-line 段落中的第一行文本
p:first-lette 段落中的第一个字母
p.view{color:green; font-size:12px}
p.view:first-line{color:yellow; font-size:12px}
p.view:first-letter{color:red; font-size:24px}
</STYLE>
<P class=view>中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国</P>
<P class=view>abcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefg</P>
效果:
中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国
abcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefgabcdefg
滤镜效果 |
功能描述 |
Alpha | 设置不同的透明度变化效果 |
Blur | 建立模糊效果 |
DropShadow | 建立一种偏移的影象轮廓,即投射阴影 |
FlipH | 水平翻转 |
FlipV | 垂直翻转 |
Glow | 为对象的边界增加色彩光效 |
Gray | 将图片以灰度形式显示 |
Invert | 将色彩、饱和度以及亮度值完全反转,类似底片效果 |
Light | 在一个对象上进行灯光投影 |
Mask | 为一个对象建立彩色透明遮罩 |
Shadow | 为对象建立轮廓的影效果 |
Wave | 在X轴和Y轴方向利用正弦波打乱图片 |
Xray | 只显示对象的轮廓 |
具体的应用有两种方法:
1、 先定义好CSS ,再在页面中需要的对象上使用预先定义好的CSS,实际上CSS的设置对话框里已经预先将这些滤镜的语法设置好了,我们只需填上适合的具体参数即可:
2、直接在支持CSS滤镜效果的HTML控件元素上编写CSS filter代码。
a.Alpha 滤镜
"Alpha"属性是把一个目标元素与背景混合。设计者可以指定数值来控制混合的程度。这种“与背景混合”通俗地说就是一个元素的透明度。通过指定坐标,可以指定各种不同范围的透明度。
Alpha 滤镜语法 |
{FILTER:ALPHA(opacity=opacity,finishopacity=finishopacity, style=style,startx=startx, starty=starty,finishx=finishx,finishy=finishy)} |
参数含义分别如下:
参数 |
说明 |
opacity | 透明度。默认的范围是从0 到 100,他们其实是百分比的形式。也就是说,0代表完全透明,100代表完全不透明。 |
finishopacity | 是一个可选参数,如果想要设置渐变的透明效果,就可以使用他们来指定结束时的透明度。范围也是0 到 100。 |
style | 指定透明区域的形状特征: 0 代表统一形状 1 代表线形 2 代表放射状 3 代表矩形 |
startx | 渐变透明效果开始处的 X坐标。 |
starty | 渐变透明效果开始处的 Y坐标。 |
finishx | 渐变透明效果结束处的 X坐标。 |
finishy | 渐变透明效果结束处的 Y坐标。 |
Blur滤镜语法 |
HTML:{filter:blur(add=add,direction=direction, strength=strength)} Script语言: [oblurfilter=] object.filters.blur |
参数含义分别如下:
参数 |
说明 |
add | 它指定图片是否被改变成印象派的模糊效果。模糊效果是按顺时针的方向进行的, 这是一个布尔值:ture (默认)或false |
direction | 该参数用来设置模糊的方向。 0度代表垂直向上,每45度为一个单位,默认值是向左的270度 |
strength | 只能使用整数来指定,代表有多少像素的宽度将受到模糊影响,默认是5个像素。 |
c.DropShadow 滤镜
“DropShaow",顾名思义就是添加对象的阴影效果。其工作原理是建立一个偏移量,加上色彩。
DropShadow 滤镜语法 |
{filter:dropshadow (color=color,offx=ofx,offy=offy,positive=positive)} |
参数含义如下:
参数 |
说明 |
Color | 代表投射阴影的颜色 |
offx | X方向阴影的偏移量 |
offy | Y方向阴影的偏移量 |
Positive | 布尔值 如果为TRUE(非0),就为任何的非透明像素建立可见的投影 如果为FASLE(0),就为透明的像素部分建立透明效果 |
d.FlipH, FlipV 滤镜
FlipH 滤镜实现水平反转
FlipH 滤镜语法 |
{filter:filph} |
FlipV 滤镜实现垂直反转
FlipV 滤镜语法 |
{filter:filpv} |
FlipH 滤镜实现水平反转
FlipH 滤镜语法 |
{filter:filph} |
FlipV 滤镜实现垂直反转
FlipV 滤镜语法 |
{filter:filpv} |
对一个对象使用"glow"属性后,这个对象的边缘就会产生类似发光的效果。
Glow 滤镜语法 |
{filter:glow(color=color,strength)} |
参数含义如下:
参数 |
说明 |
Color | 指定发光的颜色 |
STRENGTH | 强度,值为1到255之间的任何整数,指定发光色力度和范围。 |
使用Gray滤镜可以把一张图片变成灰度图,语法很简单:
Gray 滤镜语法 |
{filter:gray} |
使用Gray滤镜可以把一张图片变成灰度图,语法很简单:
Gray 滤镜语法 |
{filter:gray} |
Mask 滤镜语法 |
{filter:mask(color=color)} |
使用"MASK"属性可以为对象建立一个覆盖于表面的膜,其效果就象戴着有色眼镜看物体一样 。
j.
Light 滤镜
Light 滤镜语法 |
{filter:light} |
这个属性模拟光源的投射效果。一旦为对象定义了“LIGHT"滤镜属性,那么就可以调用它的“方法(Method)"来设置或者改变属性。“LIGHT"可用的方法有:
参数 |
说明 |
AddAmbient | 加入包围的光源 |
AddCone | 加入锥形光源 |
AddPoint | 加入点光源 |
Changcolor | 改变光的颜色 |
Changstrength | 改变光源的强度 |
Clear | 清除所有的光源 |
MoveLight | 移动光源 |
Shadow 滤镜 语法 |
{filter:shadow(color=color,direction=direction)} |
利用“Shadow”属性可以在指定的方向建立物体的投影,COLor是投影色,DIRECTION是设置投影的方向。其中0度代表垂直向上,然后每45度为一个单位。它的默认值是向左的270度。
l.
Wave 滤镜
Wave 滤镜 语法 |
{filter:wave(add=add,freq=freq, lightstrength=strength, phase=phase,strength=strength)} |
参数 |
说明 |
wave | 把对象按垂直的波形样式打乱。 默认是 TRUE(非0) |
ADD | 是否要把对象按照波形样式打乱 |
FREQ | 波纹的频率,也就是指定在对象上一共需要产生多少个完整的波纹 |
LIGHTSTRENGTH | 可以对于波纹增强光影的效果,范围0----100 |
PHASE | 设置正弦波的偏移量 |
STRENGTH | 振幅大小 |
使用Gray滤镜可以把一张图片变成灰度图,语法很简单:
Gray 滤镜语法 |
{filter:gray} |
如何避免别人把你的网页放在框架中 <script>
<!--
if (top.location != self.location) {top.location=self.location;}
//-->
</script>
针对上述屏蔽,有以下解决方法:
<script>
<!--
var location="";
//-->
</script>
连续的英文或者一堆感叹号!!!不会自动换行的问题
只要在CSS中定义了如下句子,可保网页不会再被撑开了
table{table-layout: fixed;}
td{word-break: break-all; word-wrap:break-word;}
注释一下:
1.第一条table{table-layout: fixed;},此样式可以让表格中有!!!(感叹号)之类的字符时自动换行。
2.td{word-break: break-all},一般用这句这OK了,但在有些特殊情况下还是会撑开,因此需要再加上后面一句{word-wrap:break-word;}就可以解决。此样式可以让表格中的一些连续的英文单词自动换行。
类型选择器:
例:
p {color: black;}
后代选择器:
例:
hi a {text=decoration: none;}
ID选择器:
例:
#intro {font-weight: blod;}
<p id="intro">Some Text</p>
类选择器:
例:
.datePosted {color: green;}
<p class="datePosted">26/4/2007</p>
组合选择器:
例:
#mainContent h1{font-size: 1.8em;}
<div id="mainContent"><h1>title...</h1>...<div>
例:
form {width: 30em;}
form#search {width: 40em;}
伪类选择器:
例:
a:link {color: blue;} /*设置所有未访问的超级链接颜色*/
例:
tr:hover {background-color: red;} /*改变鼠标掠过时的表格行背景色*/
通用选择器:
例:
* {
padding: 0;
margin: 0;
}
高级选择器:
略。
另:同时设置几个属性中间用","
body,tr {...}