javascript相关代码.docx
《javascript相关代码.docx》由会员分享,可在线阅读,更多相关《javascript相关代码.docx(19页珍藏版)》请在冰豆网上搜索。
javascript相关代码
禁止右键
document.oncontextmenu=newFunction("event.returnValue=false;");
document.onselectstart=newFunction("event.returnValue=false;");
Document的相关用法
01
document.title//设置文档标题等价于HTML的
标签02
document.bgColor//设置页面背景色
03
document.fgColor//设置前景色(文本颜色)
04
document.linkColor//未点击过的链接颜色
05
document.alinkColor//激活链接(焦点在此链接上)的颜色
06
document.vlinkColor//已点击过的链接颜色
07
document.URL//设置URL属性从而在同一窗口打开另一网页
08
document.fileCreatedDate//文件建立日期,只读属性
09
document.fileModifiedDate//文件修改日期,只读属性
10
document.fileSize//文件大小,只读属性
11
document.cookie//设置和读出cookie
12
document.charset//设置字符集简体中文:
gb2312
常用对象方法:
1
document.write()//动态向页面写入内容
2
document.createElement(Tag)//创建一个html标签对象
3
document.getElementById(ID)//获得指定ID值的对象
4
document.getElementsByName(Name)//获得指定Name值的对象
5
document.body.appendChild(oTag)
body主体子对象:
03
document.body.link//未点击过的链接颜色
04
document.body.alink//激活链接(焦点在此链接上)的颜色
05
document.body.vlink//已点击过的链接颜色
06
document.body.text//文本色
07
document.body.innerText//设置
...之间的文本
08
document.body.innerHTML//设置
...之间的HTML代码
09
document.body.topMargin//页面上边距
10
document.body.leftMargin//页面左边距
11
document.body.rightMargin//页面右边距
12
document.body.bottomMargin//页面下边距
13
document.body.background//背景图片
14
document.body.appendChild(oTag)//动态生成一个HTML对象
常用对象事件:
viewsource
print?
1
document.body.onclick="func()"//鼠标指针单击对象是触发
2
document.body.onmouseover="func()"//鼠标指针移到对象时触发
3
document.body.onmouseout="func()"//鼠标指针移出对象时触发
location位置子对象:
viewsource
print?
1
document.location.hash//#号后的部分
2
document.location.host//域名+端口号
3
document.location.hostname//域名
4
document.location.href//完整URL
5
document.location.pathname//目录部分
6
document.location.port//端口号
7
document.location.protocol//网络协议(http:
)
8
document.location.search//?
号后的部分
常用对象事件:
viewsource
print?
1
documeny.location.reload()//刷新网页
2
document.location.reload(URL)//打开新的网页
3
document.location.assign(URL)//打开新的网页
4
document.location.replace(URL)//打开新的网页
selection选区子对象:
viewsource
print?
1
document.selection
images集合(页面中的图象):
∙通过集合引用
viewsource
print?
1
document.images//对应页面上的标签
2
document.images.length//对应页面上标签的个数
3
document.images[0]//第1个标签
4
document.images[i]//第i-1个标签
∙通过nane属性直接引用
viewsource
print?
1
2
document.images.oImage//document.images.name属性
∙引用图片的src属性
viewsource
print?
1
document.images.oImage.src//document.images.name属性.src
∙创建一个图象
viewsource
print?
1
varoImage
2
oImage=newImage()
3
document.images.oImage.src="1.jpg"
同时在页面上建立一个标签与之对应就可以显示
示例代码(动态创建图象):
viewsource
print?
1
2
3
4
varoImage
5
oImage=newImage()
6
document.images.oImage.src="1.jpg"
7
8
forms集合(页面中的表单):
1.通过集合引用
viewsource
print?
1
document.forms//对应页面上的
2
document.Myform.myctrl//document.表单名.控件名
3.访问表单的属性:
viewsource
print?
1
document.forms[i].name//对应属性
2
document.forms[i].action//对应属性
3
document.forms[i].encoding//对应属性
4
document.forms[i].target//对应属性
5
document.forms[i].appendChild(oTag)//动态插入一个控件
示例代码(form):
viewsource
print?
01
02
--Text控件相关Script-->
03
07
08
functionfun()
09
{
10
//遍历checkbox控件的值并判断是否选中
11
varlength
12
length=document.forms[0].chk.length
13
for(i=0;i14
v=document.forms[0].chk[i].value
15
b=document.forms[0].chk[i].checked
16
if(b)
17
alert(v=v+"被选中")
18
else
19
alert(v=v+"未选中")
20
}
21
}
22
23
ddd
24
示例代码(Select):
viewsource
print?
01
02
--Select控件相关Script-->
03
04
05
1
06
2
07
3
08
09
10
11
//遍历select控件的option项
12
varlength
13
length=document.Myform.oSelect.length
14
for(i=0;i15
document.write(document.Myform.oSelect[i].value)
16
17
18
//遍历option项并且判断某个option是否被选中
19
for(i=0;i20
{
21
if(document.Myform.oSelect[i].selected!
=true)
22
document.write(document.Myform.oSelect[i].value)
23
else
24
document.write(""+document.Myform.oSelect[i].value+"")
25
}
26
27
28
//根据SelectedIndex打印出选中的option
29
//(0到document.Myform.oSelect.length-1)
30
i=document.Myform.oSelect.selectedIndex
31
document.write(document.Myform.oSelect[i].value)
32
33
34
//动态增加select控件的option项
35
varoOption=document.createElement("OPTION");
36
oOption.text="4";
37
oOption.value="4";
38
document.Myform.oSelect.add(oOption);
39
40
Div集合(页面中的层):
viewsource
print?
1
Text
2
document.all.oDiv//引用图层oDiv
3
document.all.oDiv.style.display=""//图层设置为可视
4
document.all.oDiv.style.display="none"//图层设置为隐藏
5
document.getElementId("oDiv")//通过getElementId引用对象
6
document.getElementId("oDiv").style=""
7
document.getElementId("oDiv").display="none"
图层对象的4个属性:
viewsource
print?
1
document.getElementById("ID").innerText//动态输出文本
2
document.getElementById("ID").innerHTML//动态输出HTML
3
document.getElementById("ID").outerText//同innerText
4
document.getElementById("ID").outerHTML//同innerHTML
示例代码:
viewsource
print?
01
02
03
functionchange()
04
{
05
document.all.oDiv.style.display="none"
06
}
07
08
Text
09
10
11
12
functionchangeText()
13
{
14
document.getElementById("oDiv").innerText="NewText"
15
}
16
17
Text
18
实现滚动
1.
5.
6.
210px; margin-top:
10px">
7.
-- 这些是字幕的内容,你可以任意定义 -->
8.
19.
20.
21.
-- 以下是javascript代码 -->
22.