2
<
script language
=
"
javascript
"
>
3
<!--
4
function Checkform(form)5
{6
var rr
=/^
[
1
-
9
]\d
{
3
}
-
(
?
:(
?
:
0
[
1
-
9
])
|
(
?
:
1
[
0
-
2
]))
-
(
?
:(
?
:[
0
-
2
][
1
-
9
])
|
(
?
:[
1
-
3
][
0
-
1
])) (
?
:(
?
:[
0
-
2
][
0
-
3
])
|
(
?
:[
0
-
1
][
0
-
9
])):[
0
-
5
][
0
-
9
]:[
0
-
5
][
0
-
9
]$
/
7
if
(
!
rr.test(form.date.value))
{8
alert(
'
误入正的旉格式Q如Q?007-09-29 10:50:00
'
);9
form.date.focus();10
return
false
;11
}
12
alert(
'
ok!
'
);13
return
true
;14
}
15
//
-->
16
</
script
>
17
<
form name
=
"
form1
"
method
=
"
post
"
action
=
""
onSubmit
=
"
return Checkform(this);
"
>
18
<
input name
=
"
date
"
type
=
"
text
"
id
=
"
date
"
size
=
"
20
"
maxlength
=
"
19
"
>
19
<
input type
=
"
submit
"
name
=
"
Submit
"
value
=
"
提交
"
>
20
</
form
>
]]>
document 文挡对象 - JavaScript脚本语言描述
---------------------------------------------------------------------
?面上元素name属性和JavaScript引用的名U必M致包括大写
否则会提CZ一个错误信?"引用的元素ؓI或者不是对?
---------------------------------------------------------------------
对象属?br />document.title //讄文档标题{h于HTML?lt;title>标签
document.bgColor //讄面背景?br />document.fgColor //讄前景?文本颜色)
document.linkColor //未点击过的链接颜?br />document.alinkColor //Ȁz链?焦点在此链接?的颜?br />document.vlinkColor //已点击过的链接颜?br />document.URL //讄URL属性从而在同一H口打开另一|页
document.fileCreatedDate //文g建立日期Q只d?br />document.fileModifiedDate //文g修改日期Q只d?br />document.fileSize //文g大小Q只d?br />document.cookie //讄和读出cookie
document.charset //讄字符?体中?gb2312
---------------------------------------------------------------------
常用对象Ҏ
document.write() //动态向面写入内容
document.createElement(Tag) //创徏一个html标签对象
document.getElementById(ID) //获得指定ID值的对象
document.getElementsByName(Name) //获得指定Name值的对象
document.body.appendChild(oTag)
---------------------------------------------------------------------
body-M子对?br />document.body //指定文档M的开始和l束{h?lt;body></body>
document.body.bgColor //讄或获取对象后面的背景颜色
document.body.link //未点击过的链接颜?br />document.body.alink //Ȁz链?焦点在此链接?的颜?br />document.body.vlink //已点击过的链接颜?br />document.body.text //文本?br />document.body.innerText //讄<body>...</body>之间的文?br />document.body.innerHTML //讄<body>...</body>之间的HTML代码
document.body.topMargin //面上边?br />document.body.leftMargin //面左边?br />document.body.rightMargin //面双?br />document.body.bottomMargin //面下边?br />document.body.background //背景囄
document.body.appendChild(oTag) //动态生成一个HTML对象
常用对象事g
document.body.onclick="func()" //鼠标指针单击对象是触?br />document.body.onmouseover="func()" //鼠标指针Ud对象时触?br />document.body.onmouseout="func()" //鼠标指针Ud对象时触?
---------------------------------------------------------------------
location-位置子对?/p>
document.location.hash // #号后的部?br />document.location.host // 域名+端口?br />document.location.hostname // 域名
document.location.href // 完整URL
document.location.pathname // 目录部分
document.location.port // 端口?br />document.location.protocol // |络协议(http:)
document.location.search // ?号后的部?/p>
documeny.location.reload() //h|页
document.location.reload(URL) //打开新的|页
document.location.assign(URL) //打开新的|页
document.location.replace(URL) //打开新的|页
---------------------------------------------------------------------
selection-选区子对?br />document.selection
---------------------------------------------------------------------
images集合(面中的图象)
a)通过集合引用
document.images //对应面上的<img>标签
document.images.length //对应面?lt;img>标签的个?br />document.images[0] //W??lt;img>标签
document.images[i] //Wi-1?lt;img>标签
b)通过nane属性直接引?br /><img name="oImage">
document.images.oImage //document.images.name属?/p>
c)引用囄的src属?br />document.images.oImage.src //document.images.name属?src
d)创徏一个图?br />var oImage
oImage = new Image()
document.images.oImage.src="1.jpg"
同时在页面上建立一?lt;img>标签与之对应可以显C?/p>
<html>
<img name=oImage>
<script language="javascript">
var oImage
oImage = new Image()
document.images.oImage.src="1.jpg"
</script>
</html>
<html>
<script language="javascript">
oImage=document.caeateElement("IMG")
oImage.src="1.jpg"
document.body.appendChild(oImage)
</script>
</html>
----------------------------------------------------------------------
forms集合(面中的表单)
a)通过集合引用
document.forms //对应面上的<form>标签
document.forms.length //对应面?lt;form>标签的个?br />document.forms[0] //W??lt;form>标签
document.forms[i] //Wi-1?lt;form>标签
document.forms[i].length //Wi-1?lt;form>中的控g?br />document.forms[i].elements[j] //Wi-1?lt;form>中第j-1个控?/p>
b)通过标签name属性直接引?br /><form name="Myform"><input name="myctrl"></form>
document.Myform.myctrl //document.表单?控g?/p>
c)讉K表单的属?br />document.forms[i].name //对应<form name>属?br />document.forms[i].action //对应<form action>属?br />document.forms[i].encoding //对应<form enctype>属?br />document.forms[i].target //对应<form target>属?/p>
document.forms[i].appendChild(oTag) //动态插入一个控?br />-----------------------------------------------------------------------
<html>
<!--Text控g相关Script-->
<form name="Myform">
<input type="text" name="oText">
<input type="password" name="oPswd">
<form>
<script language="javascript">
//获取文本密码框的?br />document.write(document.Myform.oText.value)
document.write(document.Myform.oPswd.value)
</script>
</html>
-----------------------------------------------------------------------
<html>
<!--checkbox,radio控g相关script-->
<form name="Myform">
<input type="checkbox" name="chk" value="1">1
<input type="checkbox" name="chk" value="2">2
</form>
<script language="javascript">
function fun(){
//遍历checkbox控g的值ƈ判断是否选中
var length
length=document.forms[0].chk.length
for(i=0;i<length;i++){
v=document.forms[0].chk[i].value
b=document.forms[0].chk[i].checked
if(b)
alert(v=v+"被选中")
else
alert(v=v+"未选中")
}
}
</script>
<a href=# onclick="fun()">ddd</a>
</html>
-----------------------------------------------------------------------
<html>
<!--Select控g相关Script-->
<form name="Myform">
<select name="oSelect">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</form>
<script language="javascript">
//遍历select控g的option?br /> var length
length=document.Myform.oSelect.length
for(i=0;i<length;i++)
document.write(document.Myform.oSelect[i].value)
</script>
<script language="javascript">
//遍历optionƈ且判断某个option是否被选中
for(i=0;i<document.Myform.oSelect.length;i++){
if(document.Myform.oSelect[i].selected!=true)
document.write(document.Myform.oSelect[i].value)
else
document.write("<font color=red>"+document.Myform.oSelect[i].value+"</font>")
}
</script>
<script language="javascript">
//ҎSelectedIndex打印出选中的option
//(0到document.Myform.oSelect.length-1)
i=document.Myform.oSelect.selectedIndex
document.write(document.Myform.oSelect[i].value)
</script>
<script language="javascript">
//动态增加select控g的option?br /> var oOption = document.createElement("OPTION");
oOption.text="4";
oOption.value="4";
document.Myform.oSelect.add(oOption);
</script>
<html>
-----------------------------------------------------------------------
<Div id="oDiv">Text</Div>
document.all.oDiv //引用囑ֱoDiv
document.all.oDiv.style.display="" //囑ֱ讄为可?br />document.all.oDiv.style.display="none" //囑ֱ讄为隐?br />document.getElementId("oDiv") //通过getElementId引用对象
document.getElementId("oDiv").style=""
document.getElementId("oDiv").display="none"
/*document.all表示document中所有对象的集合
只有ie支持此属性，因此也用来判断浏览器的种c?/
囑ֱ对象?个属?br />document.getElementById("ID").innerText //动态输出文?br />document.getElementById("ID").innerHTML //动态输出HTML
document.getElementById("ID").outerText //同innerText
document.getElementById("ID").outerHTML //同innerHTML
<html>
<script language="javascript">
function change(){
document.all.oDiv.style.display="none"
}
</script>
<Div id="oDiv" onclick="change()">Text</Div>
</html>
<html>
<script language="javascript">
function changeText(){
document.getElementById("oDiv").innerText="NewText"
}
</script>
<Div id="oDiv" onmouseover="changeText()">Text</Div>
</html>
]]>
select挡住div?U解x?/div>
|
在IE?select属于windowcd控gQ它会“挡住”所有非windowcd控g 有多U种办法; 以下例子pȝ上资源整?/p> 原址Q?a >http://hi.baidu.com/suofang/blog/item/72f2f7ed23f2324e78f055c4.html W?U方法的例子Q最好的ҎQiframe来当作div的底 Div被Select挡住Q是一个比较常见的问题。 ?br /> 有的朋友通过把div的内Ҏ入iframe或object里来解决。 ?br /> 可惜q样会破坏页面的l构Q互动性不大好。 ?br />
W?U方法的例子Q最直接的方?隐藏下拉? 下面提供的是一个比较通用的一l函? test.htm ------------ <script> function cal_ShowElement(){ function cal_GetOffsetTop(src){ </script> 以上q种Ҏ,如果对于select框数目少,相对固定的话,直接用obj.style.visibility="hidden"q样q行隐藏是更直接? W?U方法：用iframe作蝲?/strong> 以下是一单的例子: ----------- <html> function show(){ W?U方法：Object对象的优先度较高,可以挡住select?/strong> <OBJECT id=aa style="display:none;z-index:1000; position:absolute; top:0; left:0; width:152; height: 200;" type="text/x-scriptlet" data="about:<body><div style='position:absolute;left:0;top:0;width:152;height:200;font:14;color:white;background:black;border:1 solid black'>test</div>"></OBJECT> q种Ҏ虽然也简?但对复杂的层是来说还不是好的解决Ҏ. |
]]>
var q_bureau_name = document.forms[0].q_bureau_name.value;
var defpars = '';
if(default_value != null){
defpars = '&default_value='+default_value;
}
var url = 'customeroperAction.do';
var pars = 'action=getbureaulist&sname=customerTel.TEL_BUREAU&q_bureau_name='+encodeURI(encodeURI(q_bureau_name))+defpars; //encodeURI 两次文本字W串~码Z个有效的l一资源标识W?(URI)?br /> var my = new Ajax.Request(url,{method: 'post',parameters: pars,onComplete: show});
}
function show(originalRequest)
{
var BUREAUSPAN = document.getElementById("BUREAUSPAN");
BUREAUSPAN.innerHTML = originalRequest.responseText;
}
java 相关代码
String q_bureau_name = Util.filter(request.getParameter("q_bureau_name"));
q_bureau_name = java.net.URLDecoder.decode(q_bureau_name, "UTF-8");
//ajax提交数据(post)的格式默认ؓutf-8,利用javascript的提供的escape()或encodeURI()Ҏ.在服务器端接收的时候要使用java.net.URLDecoder.decode(value,"UTF-8")Ҏq行解码.
js相关知识Q?br />
escape Ҏ
?String 对象~码以便它们能在所有计机上可读，
escape(charString)
必选项 charstring 参数是要~码的Q?String 对象或文字?
说明
escape Ҏq回一个包含了 charstring 内容的字W串| Unicode 格式Q。所有空根{标炏V重音符号以及其?a >?ASCII 字符都用 %xx ~码代替Q其?xx {于表示该字W的十六q制数。例如，I格q回的是 "%20" ?/p>
字符值大?255 的以 %uxxxx 格式存储?
注意 escape Ҏ不能够用来对l一资源标示?(URI) q行~码。对其编码应使用 encodeURI ?b>encodeURIComponent Ҏ?br />
encodeURI Ҏ
文本字W串~码Z个有效的l一资源标识W?(URI)?/p>
encodeURI(URIString)
必选的 URIString 参数代表一个已~码?URI?/p>
说明
encodeURI Ҏq回一个编码的 URI。如果您编码结果传递给 decodeURIQ那么将q回初始的字W串?b>encodeURI Ҏ不会对下列字W进行编码：":"?/"?;" ?"?"。请使用 encodeURIComponent Ҏ对这些字W进行编码?br />
encodeURIComponent Ҏ
文本字W串~码Z个统一资源标识W?(URI) 的一个有效组件?/p>
encodeURIComponent(encodedURIString)
必选的 encodedURIString 参数代表一个已~码?URI lg?/p>
说明
encodeURIComponent Ҏq回一个已~码?URI。如果您编码结果传递给 decodeURIComponentQ那么将q回初始的字W串。因?encodeURIComponent ҎҎ有的字符~码Q请注意Q如果该字符串代表一个\径，例如 /folder1/folder2/default.htmlQ其中的斜杠也将被编码。这样一来，当该~码l果被作求发送到 web 服务器时是无效的。如果字W串中包含不止一?URI lgQ请使用 encodeURI Ҏq行~码?br />
]]>
<!--
var test = {
aaa:{
a:function(){alert("sa");}
},
bbb:{
b:function(){test.aaa.a();}
}
}
//test.aaa.a();
//test.bbb.b();
var testa = {
test1:{
ggg:function(){alert(123);}
},
test2:{
do2:function(){testa.test1.ggg();}
}
};
//testa.test1.ggg();
//testa.test2.do2();
alert(Object);
Object.extend = function(destination, source) {
for (var property in source) {
destination[property] = source[property];
}
return destination;
}
Object.extend(Object,{
ggg:function(object){alert(123);}
,
do2:function(object){
var i=0;
for (var property in object){
alert((i++) + property);
}
object.ggg();
}
}
);
Object.do2(Object);
//alert(Object);
//-->
</script>
]]>
"<html xmlns="<head>
<title>Dynamically Editing Page Content</title>
<script type="text/javascript">
var xmlHttp;
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
function doSearch() {
createXMLHttpRequest();
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("GET", "dynamicContent.xml", true);
xmlHttp.send(null);
}
function handleStateChange() {
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
clearPreviousResults();
parseResults();
}
}
}
function clearPreviousResults() {
var header = document.getElementById("header");
if(header.hasChildNodes()) {
header.removeChild(header.childNodes[0]);
}
var tableBody = document.getElementById("resultsBody");
while(tableBody.childNodes.length > 0) {
tableBody.removeChild(tableBody.childNodes[0]);
}
}
function parseResults() {
var results = xmlHttp.responseXML;
var property = null;
var address = "";
var price = "";
var comments = "";
var properties = results.getElementsByTagName("property");
for(var i = 0; i < properties.length; i++) {
property = properties[i];
address = property.getElementsByTagName("address")[0].firstChild.nodeValue;
price = property.getElementsByTagName("price")[0].firstChild.nodeValue;
comments = property.getElementsByTagName("comments")[0].firstChild.nodeValue;
addTableRow(address, price, comments);
}
var header = document.createElement("h2");
var headerText = document.createTextNode("Results:");
header.appendChild(headerText);
document.getElementById("header").appendChild(header);
document.getElementById("resultsTable").setAttribute("border", "1");
}
function addTableRow(address, price, comments) {
var row = document.createElement("tr");
var cell = createCellWithText(address);
row.appendChild(cell);
cell = createCellWithText(price);
row.appendChild(cell);
cell = createCellWithText(comments);
row.appendChild(cell);
document.getElementById("resultsBody").appendChild(row);
}
function createCellWithText(text) {
var cell = document.createElement("td");
var textNode = document.createTextNode(text);
cell.appendChild(textNode);
return cell;
}
</script>
</head>
<body>
<h1>Search Real Estate Listings</h1>
<form action="#">
Show listings from
<select>
<option value="50000">$50,000</option>
<option value="100000">$100,000</option>
<option value="150000">$150,000</option>
</select>
to
<select>
<option value="100000">$100,000</option>
<option value="150000">$150,000</option>
<option value="200000">$200,000</option>
</select>
<input type="button" value="Search" onclick="doSearch();"/>
</form>
<span id="header">
</span>
<table id="resultsTable" width="75%" border="0">
<tbody id="resultsBody">
</tbody>
</table>
</body>
</html>
dynamicContent.xml文g
<?xml version="1.0" encoding="UTF-8"?>
<properties>
<property>
<address>812 Gwyn Ave</address>
<price>$100,000</price>
<comments>Quiet, serene neighborhood</comments>
</property>
<property>
<address>3308 James Ave S</address>
<price>$110,000</price>
<comments>Close to schools, shopping, entertainment</comments>
</property>
<property>
<address>98320 County Rd 113</address>
<price>$115,000</price>
<comments>Small acreage outside of town</comments>
</property>
</properties>
]]>
var xmlHttp;
var requestType = "";
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
function startRequest(requestedList) {
requestType = requestedList;
createXMLHttpRequest();
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("GET", "parseXML.xml", true);
xmlHttp.send(null);
}
function handleStateChange() {
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
if(requestType == "north") {
listNorthStates();
}
else if(requestType == "all") {
listAllStates();
}
}
}
}
function listNorthStates() {
var xmlDoc = xmlHttp.responseXML;
var northNode = xmlDoc.getElementsByTagName("north")[0];
var northStates = northNode.getElementsByTagName("state");
outputList("Northern States", northStates);
}
function listAllStates() {
var xmlDoc = xmlHttp.responseXML;
var allStates = xmlDoc.getElementsByTagName("state");
outputList("All States in Document", allStates);
}
function outputList(title, states) {
var out = title;
var currentState = null;
for(var i = 0; i < states.length; i++) {
currentState = states[i];
out = out + "\n- " + currentState.childNodes[0].nodeValue;
}
alert(out);
}
</script>
parseXML.xml文g
<?xml version="1.0" encoding="UTF-8"?>
<states>
<north>
<state>Minnesota</state>
<state>Iowa</state>
<state>North Dakota</state>
</north>
<south>
<state>Texas</state>
<state>Oklahoma</state>
<state>Louisiana</state>
</south>
<east>
<state>New York</state>
<state>North Carolina</state>
<state>Massachusetts</state>
</east>
<west>
<state>California</state>
<state>Oregon</state>
<state>Nevada</state>
</west>
</states>
]]>
var xmlHttp;
function createXMLHttpRequest(){
if(window.ActiveXObject){ //判断是否是IE
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
}
function startRequest(){
createXMLHttpRequest(); //得到XmlHttp对像
xmlHttp.onreadystatechange = handleStateChange; //当请求状态改变时调用
xmlHttp.open("GET","simpleResponse.xml",true); //True表请求上本质是否异步
xmlHttp.send(null); //向服务器发送请?br />}
function handleStateChange(){
if(xmlHttp.readyState == 4){ // 4、数据接收完?此时可以通过通过responseBody和responseText获取完整的回应数?br /> if(xmlHttp.status == 200){ //h成功q回
alert("The server replied with: " + xmlHttp.responseText);
}
}
}
</script>
]]>