JavaScript知识

来源:互联网 发布:mac ctrl f5 编辑:程序博客网 时间:2024/05/21 21:44

 

1.Javascript基本语法

变量的声明:

所有的variables的declaration都是用var

如: int a = 10 ;   (java的写法)

       var a = 10 ;  (javascript的写法)

   不同data type是int, String, char……所有的宣告都是用var

Object的 宣告方式

var tabObj=new dejtPageTable() ;

tabObj.method1() ;

 

2.Javascript基本语法-Array

不用宣告起始大小.会自动扩大。

写法一:

var names = new Array() ;

names[0]=张小明;

names[1]=李强;

写法二:

var names=new Array(張小明,李强) ;

写法三:

var names=[張小明,李强];

 

3.Javascript基本语法 函数声明

function

不用宣告回传值,也不用宣告输入参数的型态

Ex:function getResult(b) {

            var a=10 ;

            return a+b ;

        }

    function内只要一写return , function就立刻结束。

 

 

4.内建常用function

parseInt() 转型成int

parseFloat() 转型成float

alert() 跳出警告窗口,必须按下确定后程序才会继续运行

confirm() 跳出确认窗口,必须按下确定或取消后程序才会继续运行,按下确定回传true ,按下取消回传false

isNaN(expr) 检查expr是否不是一个数字,是数字回传false,不是数字 回传true

 

 

5.内建常用的一些object的function

window.open(url,name,features) 开启一个新的网页

document.write(content) 把内容写入网页中

是文档对象的输出函数,其功能是将括号中的字符或变量值输出到窗口.

String.substring(startIndex,endIndex)与java相同

6.外部档案

   當script的code非常多时,我们希望把同类型的code放在一个档案中,再用include的方式引用。语法如下:

<script language=Javascript src=dejtut.jss>

</script>

 

7.符号

   在JavaScript中, 是不一样的。

   onclick=showName(InfoChamp)

= onclick=showName(InfoChamp)

 

8.DOM Document Object Model

    当浏览器读入一页网页时,就会根据此网页的内容来建立相关的文件对象模型(Document Object Model,简称DOM),我们需要了解这些对象模型的性质和方法,才能产生动态的网页,充分利用DHTML(DynamicalHTML)的各种功能。

这些对象各有不同的性质(Properties)及方法(Methods),JavaScript可利用这些性质及方法来建立网页的互动性。

 

9.存取每个object的方法

要取得name=form1的form可写成

var myForm = window.document.form1 ;

回传出来是一个form的object

由于所有源头都来自于window,故window可以省略,写成var myForm = document.form1 ;

如果想继续找form1底下名字为orderNo的text field,可写成: var a = document.form1.orderNo ;

 

10.每个object取出来之后要干嘛?

可做的事就很多了,可以先参考此object有那些attribute及method可以控制。(msdn)

例如要改变一個text field的值。

document.form1.myName.value=被改变了;

 

11.取得object的方式

透过DOM的关系: form1.myName

透过内定Object的method

var obj = document.getElementsByName(myName) ;

obj :无论有几个叫做myName的element , obj永远是一个array

若要取得当中的value => obj[0]就可以了

var obj2 =document.getElementById(myId) ;

obj2 :是一个object ,如果找不到, obj2 = null

 

注: <input type=text id=myId name=myName>

 

12.下拉选单的控制

若想知道某一下拉选单的value,写成如下:

var mySelectValue=form1.select1 ;

var selectValue = mySelectValue.options[mySelectValue.selectedIndex].value

每个 下拉选单的obj都会有一个collection?options的array

 

13.主动设定下拉选单

若希望选项的value是ok要被选取,写成如下:

var mySelect=form1.select1 ;

for(var i=0;i< mySelect.options.length;i++) {

    if (mySelect.options[i].value==ok ) {

         mySelect.options[i].selected=true ;

         break ;

    }

}

 

14.取得checkbox / radio的value

因为checkbox的名字有可能会重复所以要这样处理,

希望选项的value是ok要被核取,写成如下:

var boxValue = “” ;

var myBoxs=document.getElementsByName(box1) ;

for(var i=0;i< myBoxs.length;i++) {

    if (myBoxs[i].checked==true ) {

         boxValue += myBoxs[i].value+; ;

    }

}

boxValue等于所有有选取的box的value ,以;分隔每一个的值

 

15.主动设定checkbox / radio的value

因为checkbox的名字有可能会重复所以要这样处理,

希望选项的value是ok要被核取,写成如下:

var myBoxs=document.getElementsByName(box1) ;

for(var i=0;i< myBoxs.length;i++) {

    if (mySelect[i].value==ok ) {

         mySelect [i].checked=true ;

         break ;

    }

}

 

16.DHTML Event

Event

onclick-text,checkbox :单击鼠标左键

onmouseover-img,text,div :鼠标进入卷标

onmouseout-img,text,div :鼠标离开卷标

onfocus-text :光标进入卷标

onblur-text :光标离开卷标

onchange-select :下拉选单选取不一样的选项时

 

17.透过Javascript控制CSS的属性

方法:

object+.style.+ CSS的属性=该属性的value

范例:

隐藏某一个输入字段

form1.empName.style.display=none

显示某一个输入字段

form1.empName.style.display=“”

 

18.透过Javascript控制CSS的class

方法:

object+.className = style的名称

范例:

<style type=text/css>

    .styleOne {font-size:14pt; color:red}

    .styleTwo {background:black; color:white}

</style>

<p id=myP class=styleOne>

    段落内的文字…………

</p>

19.新增一列(范例)

在多笔数据的显示上,以table为主。

在新增一笔资料时,table需要多加一列。

用法: (table为透过id抓来的物件)

新增一列: var tr=table.insertRow()

新增一栏: var td=tr.insertCell()

在新增的栏中写资料:

td.innerHTML=<input type=text …….>

抓取目前的table有几列:var rows=table.rows.length

 

 

20.1.   在<form><input type=text name=number value=abc><input type=submit value=提交 onclick=””></form>,何者按下【提交】钮后能执行数据验证方法 check(),数据验证不通过时能挡下送出动作?

a) onclick=check()

b) onchange=check()

c) onclick=return check()

d) onchange=return check()

 

答案选C

 

 

 

 

 

---------------------------------------------------------------------------------------------------------------------------

 

一:js中弹出窗口的技巧

 

 

经常上网的朋友可能会到过这样一些网站,一进入首页立刻会弹出一个窗口,或者按一个连接或按钮弹出,通常在这个窗口里会显示一些注意事项、版权信息、警告、欢迎光顾之类的话或者作者想要特别提示的信息。其实制作这样的页面效果非常的容易,只要往该页面的HTML里加入几段Java代码即可实现。下面俺就带您剖析它的奥秘。

 

javascript中弹出窗口的几种方法: 

第一种:        <script language="javascript" type="text/javascript">     window.location.href="login.aspx?backurl="+window.location.href;         </script>

第二种:        <script language="javascript"> alert("返回"); window.history.back(-1);       </script>

第三种:       <script language="javascript"> window.navigate("top.aspx");      </script>

第四种:       <script language="JavaScript">   self.location='top.aspx';       </script>

第五种:       <script language="javascript">    alert("非法访问!");   top.location='xx.aspx'  </script>

 

 

 1、最基本的弹出窗口代码

 

  其实代码非常简单:

 

  < LANGUAGE="java">

 

  < !--

 

  open ("page.html")

 

  -->

 

  < />

 

  因为这是一段Java代码,所以它们应该放在< LANGUAGE="java">之间。 < !-- 和 -->是对一些版本低的浏览器起作用,在这些老浏览器中不会将标签中的代码作为文本显示出来。要养成这个好习惯啊。

 

  open ("page.html") 用于控制弹出新的窗口page.html,如果page.html不与主窗口在同一路径下,前面应写明路径,绝对路径(http://)和相对路径(../)均可。

 

  用单引号和双引号都可以,只是不要混用。

 

  这一段代码可以加入HTML的任意位置,< head>和< /head>之间可以,< body>间< /body>也可以,越前越早执行,尤其是页面代码长,又想使页面早点弹出就尽量往前放。也可以,越前越早执行,尤其是页面代码长,又想使页面早点弹出就尽量往前放。

 

  2、经过设置后的弹出窗口

 

  下面再说一说弹出窗口的设置。只要再往上面的代码中加一点东西就可以了。我们来定制这个弹出的窗口的外观,尺寸大小,弹出的位置以适应该页面的具体情况。

 

  < LANGUAGE="java">

 

  < !--

 

  open ("page.html", "newwindow", "height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no")

 

  //写成一行

 

  -->

 

  < />

 

  参数解释:

 

  < LANGUAGE="java"> js脚本开始;

 

  open 弹出新窗口的命令;

 

  "page.html" 弹出窗口的文件名;

 

  "newwindow" 弹出窗口的名字(不是文件名),非必须,可用空"代替;

 

  height=100 窗口高度;

 

  width=400 窗口宽度;

 

  top=0 窗口距离屏幕上方的象素值;

 

  left=0 窗口距离屏幕左侧的象素值;

 

  toolbar=no 是否显示工具栏,yes为显示;

 

  menubar,scrollbars 表示菜单栏和滚动栏。

 

  resizable=no 是否允许改变窗口大小,yes为允许;

 

  location=no 是否显示地址栏,yes为允许;

 

  status=no 是否显示状态栏内的信息(通常是文件已经打开),yes为允许;

 

  < /> js脚本结束

 

  3、用函数控制弹出窗口

 

  下面是一个完整的代码:

 

  < html>

 

  < head>

 

  < LANGUAGE="Java">

 

  < !--

 

   openwin() {

 

  open ("page.html", "newwindow", "height=100, width=400, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no")

 

  //写成一行

 

  }

 

  //-->

 

  < />

 

  < /head>

 

  < body ="openwin()">

 

  ...任意的页面内容...

 

  < /body>

 

  < /html>

 

  这里定义了一个函数openwin(),函数内容就是打开一个窗口。在调用它之前没有任何用途。

 

  怎么调用呢?

 

  方法一:< body ="openwin()"> 浏览器读页面时弹出窗口;

 

  方法二:< body onunload="openwin()"> 浏览器离开页面时弹出窗口;

 

  方法三:用一个连接调用:< a href="#" ="openwin()">打开一个窗口< /a>

 

  注意:使用的"#"是虚连接。

 

  方法四:用一个按钮调用:< input type="button" ="openwin()" ="打开窗口">

 

  4、同时弹出2个窗口

 

  对源代码稍微改动一下:

 

  < LANGUAGE="Java">

 

  < !--

 

   openwin() {

 

  open ("page.html", "newwindow", "height=100, width=100, top=0, left=0,toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no")

 

  //写成一行

 

  open ("page2.html", "newwindow2", "height=100, width=100, top=100, left=100,toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no")

 

  //写成一行

 

  }

 

  //-->

 

  < />

 

  为避免弹出的2个窗口覆盖,用top和left控制一下弹出的位置不要相互覆盖即可。最后用上面说过的四种方法调用即可。

 

  注意:2个窗口的name(newwindows和newwindow2)不要相同,或者干脆全部为空。OK?

 

  5、主窗口打开文件1.htm,同时弹出小窗口page.html

 

  如下代码加入主窗口< head>区:

 

  < language="java">

 

  < !--

 

   openwin() {

 

  open("page.html","","width=200,height=200")

 

  }

 

  //-->

 

  < />

 

  加入< body>区:

 

  < a href="/1.htm" ="openwin()">open< /a>即可

 

  6、弹出的窗口之定时关闭控制

 

  下面我们再对弹出的窗口进行一些控制,效果就更好了。如果我们再将一小段代码加入弹出的页面(注意是加入到page.html的HTML中,可不是主页面中,否则...),让它10秒后自动关闭是不是更酷了?

 

  首先,将如下代码加入page.html文件的< head>区:

 

  < language="Java">

 

   closeit() {

 

  setTimeout("self.close()",10000) //毫秒

 

  }

 

  < />

 

  然后,再用< body ="closeit()"> 这一句话代替page.html中原有的< BODY>这一句就可以了。(这一句话千万不要忘记写啊!这一句的作用是调用关闭窗口的代码,10秒钟后就自行关闭该窗口。)

 

  7、在弹出窗口中加上一个关闭按钮

 

  < FORM>

 

  < INPUT TYPE="BUTTON" ="关闭" ="close()">

 

  < /FORM>

 

  呵呵,现在更加完美了!

 

  8、内包含的弹出窗口---一个页面两个窗口

 

  上面的例子都包含两个窗口,一个是主窗口,另一个是弹出的小窗口。通过下面的例子,你可以在一个页面内完成上面的效果。

 

  < html>

 

  < head>

 

  < LANGUAGE="Java">

 

   openwin()

 

  {

 

  OpenWindow=open("", "newwin", "height=250, width=250,toolbar=no,scrollbars="+scroll+",menubar=no");

 

  //写成一行

 

  Openwrite("< TITLE>例子< /TITLE>")

 

  Openwrite("< BODY BGCOLOR=#ffffff>")

 

  Openwrite("< h1>Hello!< /h1>")

 

  Openwrite("New window opened!")

 

  Openwrite("< /BODY>")

 

  Openwrite("< /HTML>")

 

  Openclose()

 

  }

 

  < />

 

  < /head>

 

  < body>

 

  < a href="#" ="openwin()">打开一个窗口< /a>

 

  < input type="button" ="openwin()" ="打开窗口">

 

  < /body>

 

  < /html>

 

  看看Openwrite()里面的代码不就是标准的HTML吗?只要按照格式写更多的行即可。千万注意多一个标签或少一个标签就会出现错误。记得用Openclose()结束啊。

 

  9、终极应用--弹出的窗口之控制

 

  回想一下,上面的弹出窗口虽然酷,但是有一点小毛病(沉浸在喜悦之中,一定没有发现吧?)比如你将上面的脚本放在一个需要频繁经过的页面里(例如首页),那么每次刷新这个页面,窗口都会弹出一次,是不是非常烦人?:-(

 

  有解决的办法吗?当然有!我们使用来控制一下就可以了。首先,将如下代码加入主页面HTML的< HEAD>区:

 

  < >

 

   openwin(){

 

  open("page.html","","width=200,height=200")

 

  }

 

   get_(Name) {

 

  var search = Name + "=" var return = "";

 

  if (.length > 0) {

 

  offset = .indexOf(search)

 

  if (offset != -1) {

 

  offset += search.length

 

  end = .indexOf(";", offset);

 

  if (end == -1)

 

  end = .length;

 

  return=unescape(.substring(offset, end))

 

  }

 

  }

 

  return return;

 

  }

 

   loadpopup(){

 

  if (get_("popped")=="){

 

  openwin()

 

  ="popped=yes"

 

  }

 

  }

 

  < />

 

  然后,用< body ="loadpopup()">(注意不是openwin而是loadpop啊!)替换主页面中原有的< BODY>这一句即可。你可以试着刷新一下这个页面或重新进入该页面,窗口再也不会弹出了。真正的Pop-Only-Once!

 

  写到这里弹出窗口的制作和应用技巧基本上算是完成了,俺也累坏了,一口气说了这么多,希望对正在制作网页的朋友有所帮助俺就非常欣慰了。

 

  需要注意的是,JS脚本中的的大小写最好前后保持一致。

--------------------------------------------------------------------------------------------------

 

 

 

 

 

 

 

二:js中的检查

 

http://www.ijavascript.cn/yanzheng/index-page2.html

 

JavaScript表单验证年龄

JavaScript表单验证年龄,判断一个输入量是否符合年龄,通过正则表达式实现。

 

//检查年龄

 

function isAge(str){

 

var mydate=new Date;

 

var now=mydate.getFullYear();

 

if (str < now-60 || str > now-18){

 

return false;

 

}

 

return true;

 

}

 

关于时间日期的函数,可以参考下《JavaScript中getDate日期函数》这篇文章

 

 

--------------------------------------------------------------------------------

JavaScript表单验证电话号码

JavaScript表单验证电话号码,判断一个输入量是否为电话号码,通过正则表达式实现。

 

//检查电话号码

 

function isTel(str){

 

var reg=/^([0-9]|[/-])+$/g ;

 

if(str.length18){

 

return false;

 

}

 

else{

 

return reg.exec(str);

 

}

 

}

 

 

--------------------------------------------------------------------------------

 

正则表达式验证邮箱

JavaScript表单验证email,判断一个输入量是否为邮箱email,通过正则表达式实现。

 

//检查email邮箱

 

function isEmail(str){

 

var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((/.[a-zA-Z0-9_-]{2,3}){1,2})$/;

 

return reg.test(str);

 

}

 

JavaScript表单验证中文大写字母

JavaScript表单验证中文大写字母,判断一个输入量是否为中文或大写的英文字母,通过正则表达式实现。

 

// 检查是否为有效的真实姓名,只能含有中文或大写的英文字母

 

function isValidTrueName(strName){

 

var str = Trim(strName);

 

//判断是否为全英文大写或全中文,可以包含空格

 

var reg = /^[A-Z u4E00-u9FA5]+$/;

 

if(reg.test(str)){

 

return false;

 

}

 

return true;

 

}

 

Trim函数是可以参考《javascript的trim()函数的实现》这篇文章。

 

 

--------------------------------------------------------------------------------

 

JavaScript表单验证是否为中文

 

JavaScript表单验证是否为中文,判断一个输入量是否为中文,通过正则表达式实现。

 

// 检查是否为中文

 

function isChn(str){

 

var reg = /^+$/;

 

if(!reg.test(str)){

 

return false;

 

}

 

return true;

 

}

 

 

--------------------------------------------------------------------------------

JavaScript正则比较两个字符串

JavaScript正则比较两个字符串,

 

就是利用正则表达式快速比较两个字符串的不同字符。

 

var str1 = "求一个比较字符串处理功能";

 

var str2 = "求两或三个比较字符串处理";

 

var re = new RegExp("(?=.*?)[^" + str1 +"](?=.*?)|(?=.*?)[^" + str2 + "](?=.*?)", "g");

 

var arr;

 

while ((arr = re.exec(str1 + str2)) != null)

 

{

 

document.write(arr);

 

}

 

--------------------------------------------------------------------------------------------------------

 

 

三:js中事件列表解说

 

javascript事件列表解说

事件 浏览器支持 解说

一般事件 onclick IE3、N2  鼠标点击时触发此事件

ondblclick IE4、N4  鼠标双击时触发此事件

onmousedown IE4、N4  按下鼠标时触发此事件

onmouseup IE4、N4  鼠标按下后松开鼠标时触发此事件

onmouseover IE3、N2  当鼠标移动到某对象范围的上方时触发此事件

onmousemove IE4、N4  鼠标移动时触发此事件

onmouseout IE4、N3 当鼠标离开某对象范围时触发此事件

onkeypress IE4、N4  当键盘上的某个键被按下并且释放时触发此事件.

onkeydown IE4、N4  当键盘上某个按键被按下时触发此事件

onkeyup IE4、N4  当键盘上某个按键被按放开时触发此事件

页面相关事件 onabort IE4、N3  图片在下载时被用户中断

onbeforeunload IE4、N  当前页面的内容将要被改变时触发此事件

onerror IE4、N3  出现错误时触发此事件

onload IE3、N2  页面内容完成时触发此事件

onmove IE、N4  浏览器的窗口被移动时触发此事件

onresize IE4、N4  当浏览器的窗口大小被改变时触发此事件

onscroll IE4、N  浏览器的滚动条位置发生变化时触发此事件

onstop IE5、N  浏览器的停止按钮被按下时触发此事件或者正在下载的文件被中断

onunload IE3、N2  当前页面将被改变时触发此事件

表单相关事件 onblur IE3、N2  当前元素失去焦点时触发此事件

onchange IE3、N2  当前元素失去焦点并且元素的内容发生改变而触发此事件

onfocus IE3 、N2 当某个元素获得焦点时触发此事件

onreset IE4 、N3  当表单中RESET的属性被激发时触发此事件

onsubmit IE3 、N2  一个表单被递交时触发此事件

滚动字幕事件 onbounce IE4、N 在Marquee内的内容移动至Marquee显示范围之外时触发此事件

onfinish IE4、N 当Marquee元素完成需要显示的内容后触发此事件

onstart IE4、 N 当Marquee元素开始显示内容时触发此事件

编辑事件 onbeforecopy IE5、N 当页面当前的被选择内容将要复制到浏览者系统的剪贴板前触发此事件

onbeforecut IE5、 N 当页面中的一部分或者全部的内容将被移离当前页面[剪贴]并移动到浏览者的系统剪贴板时触发此事件

onbeforeeditfocus IE5、N 当前元素将要进入编辑状态

onbeforepaste IE5、 N 内容将要从浏览者的系统剪贴板传送[粘贴]到页面中时触发此事件

onbeforeupdate IE5、 N 当浏览者粘贴系统剪贴板中的内容时通知目标对象

oncontextmenu IE5、N 当浏览者按下鼠标右键出现菜单时或者通过键盘的按键触发页面菜单时触发的事件

oncopy IE5、N 当页面当前的被选择内容被复制后触发此事件

oncut IE5、N  当页面当前的被选择内容被剪切时触发此事件

ondrag IE5、N  当某个对象被拖动时触发此事件 [活动事件]

ondragdrop IE、N4 一个外部对象被鼠标拖进当前窗口或者帧

ondragend IE5、N 当鼠标拖动结束时触发此事件,即鼠标的按钮被释放了

ondragenter IE5、N 当对象被鼠标拖动的对象进入其容器范围内时触发此事件

ondragleave IE5、N  当对象被鼠标拖动的对象离开其容器范围内时触发此事件

ondragover IE5、N 当某被拖动的对象在另一对象容器范围内拖动时触发此事件

ondragstart IE4、N 当某对象将被拖动时触发此事件

ondrop IE5、N 在一个拖动过程中,释放鼠标键时触发此事件

onlosecapture IE5、N 当元素失去鼠标移动所形成的选择焦点时触发此事件

onpaste IE5、N 当内容被粘贴时触发此事件

onselect  IE4、N 当文本内容被选择时的事件

onselectstart IE4、N 当文本内容选择将开始发生时触发的事件

数据绑定 onafterupdate IE4、N 当数据完成由数据源到对象的传送时触发此事件

oncellchange IE5、N 当数据来源发生变化时

ondataavailable IE4、N 当数据接收完成时触发事件

ondatasetchanged IE4、N 数据在数据源发生变化时触发的事件

ondatasetcomplete IE4、N 当来子数据源的全部有效数据读取完毕时触发此事件

onerrorupdate IE4、N 当使用onBeforeUpdate事件触发取消了数据传送时,代替onAfterUpdate事件

onrowenter IE5、N 当前数据源的数据发生变化并且有新的有效数据时触发的事件

onrowexit IE5、N 当前数据源的数据将要发生变化时触发的事件

onrowsdelete IE5、N 当前数据记录将被删除时触发此事件

onrowsinserted IE5、N 当前数据源将要插入新数据记录时触发此事件

外部事件 onafterprint IE5、N 当文档被打印后触发此事件

onbeforeprint IE5、N 当文档即将打印时触发此事件

onfilterchange IE4、N 当某个对象的滤镜效果发生变化时触发的事件

onhelp IE4、N 当浏览者按下F1或者浏览器的帮助选择时触发此事件

onpropertychange IE5、N 当对象的属性之一发生变化时触发此事件

onreadystatechange IE4、N 当对象的初始化属性值发生变化时触发此事件

 

--------------------------------------------------------------------------------------------------------------------

 

 

 

四:js中常用方法

 

 

数组的属性:length

arr.length返回数组arr的长度,常见于循环中对数组的遍历,比如:

for(var i=0;i<arr.length;i++){

执行部分

}

 

数组元素的访问: arr[index],其中index表示索引即数组基数,从0开始,共有arr.length个元素.比如: arr[0]访问第一个数组元素,arr[1]访问第二个数组元素....依次类推 数组的操作方法:先概览下下面的这些操作数组常用的方法(13个)

 

toString(),valueOf(),toLocalString(),join(),split(),slice(),concat(),

pop(),push(),shift(),unshift(),sort(),splice()

 

 

下面逐一分析这些方法的功能和用法.

 

toString(),valueOf(),toLocalString():

功能:返回数组的全部元素

注:数组名也可以返回整个数组

 

代码:

 

var m=["am","bm","cm"];//用括号声明一个数组对象

 alert(m.toString());//toString()返回数组对象的所有内容,用逗号分割,即am,bm,cm

 alert(m.valueOf());//valueOf()也返回数组对象的所有内容

 alert(m.toLocaleString());//toLocaleString()也返回数组对象的所有内容,但有地区语言区别,暂不研究

 alert(m);//数组名也返回数组对象的所有内容

join():功能:把数组各个项用某个字符(串)连接起来,但并不修改原来的数组代码: var m=["am","bm","cm"];//用括号声明一个数组对象

 var n=m.join("---");//用---连接am,bm,cm.

 alert(m.toString());//m并没有被修改,返回am,bm,cm

 alert(n);//n是一个字符串,为am---bm---cm

split():功能:把一个字符串按某个字符(串)分割成一个数组,但不修改原字符串

代码: var str="I love maomao,I am caolvchong";

 var arr=str.split("o");//按字符o把str字符串分割成一个数组

 alert(arr);//输出整个数组

 

slice():返回某个位置开始(到某个位置结束)的数组部分,不修改原数组

 

代码:

 

var m=["am","bm","cm","dm","em","fm"];   

var n=m.slice(2);//返回第二个元素bm后面的元素,即cm,dm,em,fm   

var q=m.slice(2,5);//返回第二个元素后到第五个元素,即cm,dm,em   

alert(n);   

alert(q);  

数组对象的栈操作:

push():数组末尾添加一个项

pop():删除数组最后一个项

 

代码:

 

var m=["am","bm","cm","dm","em","fm"];  

m.push("gm");//在数组末尾添加元素gm  

alert(m);   

m.pop();//删除数组最后一个元素gm   

alert(m);  

数组对象的队列操作:

unshift():数组头添加一个项

shift():删除数组第一个项

 

代码:

 

var m=["am","bm","cm","dm","em","fm"];   

m.unshift("gm");//在数组第一个元素位置添加元素gm   

alert(m);   

m.shift();//删除数组第一个元素gm   

alert(m);  

sort():数组按字符的ASCII码进行排序,修改数组对象

注:即便是数字数组,也将转化为字符串来进行比较排序

 

代码:

 

var m=["am","fm","gm","bm","em","dm"];   

m.sort();//按字母序排序   

alert(m);  

 

concat():在数组尾添加元素,但不修 改数组对象

 

代码:

 

var m=["am","bm"]   

var n=m.concat("cm");//添加一项cm,并且赋予新数组对象   

alert(m);//原数组没有被修改   

alert(n);//输出新数组对象

splice():在数组的任意位置进行添加,删除或者替换元素,直接修改数组对象

细节:

splice()有三个参数或三个以上参数,前两个是必须的,后面参数是可选的

进行添加:splice(起始项,0,添加项)

进行删除:splice(起始项,要删除的项个数)

进行替换:splice(起始项,替换个数,替换项) 这个其实是添加删除的共同结果

 

代码:

 

 

var m=["am","bm"]   

m.splice(1,0,"fm","sm");//在第一项后面添加fm和sm,返回am,fm,sm,bm   

alert(m);   

m.splice(2,1);//删除第二项后面一项(即第三项sm,返回am,fm,bm)   

alert(m);   

m.splice(2,1,"mm");//替换第二项后面一项(即第三项,返回am,fm,mm)   

alert(m);  

从一个数组中移除一个或多个元素,如果必要,在所移除元素的位置上插入新元素,返回所移除的元素。

 

arrayObj.splice(start, deleteCount, [item1[, item2[, . . . [,itemN]]]])

 

参数

arrayObj

 

必选项。一个 Array 对象。

 

start

 

必选项。指定从数组中移除元素的开始位置,这个位置是从 0 开始计算的。

 

deleteCount

 

必选项。要移除的元素的个数。

 

item1, item2,. . .,itemN

 

必选项。要在所移除元素的位置上插入的新元素。

 

说明

splice 方法可以移除从 start 位置开始的指定个数的元素并插入新元素,从而修改 arrayObj。返回值是一个由所移除的元素组成的新 Array 对象。

 

示例:

 

script language="javascript">

function test()

{

    //var a=[1,2,3];

    //alert(a);

    var a=[1,2,3];

    a.splice(1,1,4,6,7,8) //移除第二个,然后在第一个后插入4,6,7,8,返回:1,4,6,7,8,3

    alert(a);

    a.splice(0,1,3) //移除第一个,然后在第一个前插入3,返回:3,4,6,7,8,3

    alert(a);

 

    a.splice(2,0,5) //在第三个元素插入一个5,返回:3,4,5,6,7,8

    alert(a);

 

    a.splice(-1,1) //移动最后一位,类似shift方法,返回:3,4,5,6,7,8

    alert(a);

 

 

}

</script>

 

 

-------------------------------------------------------------------------------------------------------------------------------------------

 

 

五:js中常用技巧

 

 

1.document.write(""); 输出语句

 

 

2.JS中的注释为//

 

 

3.传统的HTML文档顺序是:document->html->(head,body)

 

 

4.一个浏览器窗口中的DOM顺序是:window->

 

(navigator,screen,history,location,document)

 

 

5.得到表单中元素的名称和值:document.getElementById("表单中元素的ID号").name(或value)

 

 

6.一个小写转大写的JS: document.getElementById("output").value = document.getElementById("input").value.toUpperCase();

 

 

7.JS中的值类型:String,Number,Boolean,Null,Object,Function

 

 

8.JS中的字符型转换成数值型:parseInt(),parseFloat()

 

 

9.JS中的数字转换成字符型:(""+变量)

 

 

10.JS中的取字符串长度是:(length)

 

 

11.JS中的字符与字符相连接使用+号.

 

 

12.JS中的比较操作符有:==等于,!=不等于,>,>=,<.<=

 

 

13.JS中声明变量使用:var来进行声明

 

 

14.JS中的判断语句结构:if(condition){}else{}

 

 

15.JS中的循环结构:for([initial expression];[condition];[upadte expression]) {inside loop}

 

 

16.循环中止的命令是:break

 

 

17.JS中的函数定义:function functionName([parameter],...){statement[s]}

 

 

18.当文件中出现多个form表单时.可以用document.forms[0],document.forms[1]来代替.

 

 

19.窗口:打开窗口window.open(), 关闭一个窗口:window.close(), 窗口本身:self

 

 

20.状态栏的设置:window.status="字符";

 

 

21.弹出提示信息:window.alert("字符");

 

 

22.弹出确认框:window.confirm();

 

 

23.弹出输入提示框:window.prompt();

 

 

24.指定当前显示链接的位置:window.location.href="URL"

 

 

25.取出窗体中的所有表单的数量:document.forms.length

 

 

26.关闭文档的输出流:document.close();

 

 

27.字符串追加连接符:+=

 

 

28.创建一个文档元素:document.createElement(),document.createTextNode()

 

 

29.得到元素的方法:document.getElementById()

 

 

30.设置表单中所有文本型的成员的值为空:

 

var form = window.document.forms[0]

 

for (var i = 0; i<form.elements.length;i++){

 

     if (form.elements.type == "text"){

 

         form.elements.value = "";

 

     }

 

}

 

 

31.复选按钮在JS中判断是否选中:document.forms[0].checkThis.checked (checked属性代表为是否选中返回TRUE或FALSE)

 

 

32.单选按钮组(单选按钮的名称必须相同):取单选按钮组的长度document.forms[0].groupName.length

 

 

33.单选按钮组判断是否被选中也是用checked.

 

 

34.下拉列表框的值:document.forms[0].selectName.options[n].value (n有时用下拉列表框名称加上.selectedIndex来确定被选中的值)

 

 

35.字符串的定义:var myString = new String("This is lightsword");

 

 

36.字符串转成大写:string.toUpperCase(); 字符串转成小

 

写:string.toLowerCase();

 

 

37.返回字符串2在字符串1中出现的位置:String1.indexOf("String2")!=-1则说明没找到.

 

 

38.取字符串中指定位置的一个字符:StringA.charAt(9);

 

 

39.取出字符串中指定起点和终点的子字符串:stringA.substring(2,6);

 

40.数学函数:Math.PI(返回圆周率),Math.SQRT2(返回开方),Math.max(value1,value2)返回两个数中的最在值,Math.pow(value1,10)返回value1的十次方,Math.round(value1)四舍五入函数,Math.floor(Math.random()*(n+1))返回随机数

 

 

41.定义日期型变量:var today = new Date();

 

 

42.日期函数列表:dateObj.getTime()得到时间,dateObj.getYear()得到年份,dateObj.getFullYear()得到四位的年份,dateObj.getMonth()得到月份,dateObj.getDate()得到日,dateObj.getDay()得到日期几,dateObj.getHours()得到小时,dateObj.getMinutes()得到分,dateObj.getSeconds()得到秒,dateObj.setTime(value)设置时间,dateObj.setYear(val)设置年,dateObj.setMonth(val)设置月,dateObj.setDate(val)设置日,dateObj.setDay(val)设置星期几,dateObj.setHours设置小时,dateObj.setMinutes(val)设置分,dateObj.setSeconds(val)设置秒   [注意:此日期时间从0开始计]

 

 

43.FRAME的表示方式: [window.]frames[n].ObjFuncVarName,frames["frameName"].ObjFuncVarName,frameName.ObjFuncVarName

 

 

44.parent代表父亲对象,top代表最顶端对象

 

 

45.打开子窗口的父窗口为:opener

 

 

46.表示当前所属的位置:this

 

 

47.当在超链接中调用JS函数时用:(javascript :)来开头后面加函数名

 

 

48.在老的浏览器中不执行此JS:<!--       //-->

 

 

49.引用一个文件式的JS:<script type="text/javascript" src="aaa.js"></script>

 

 

50.指定在不支持脚本的浏览器显示的HTML:<noscript></noscript>

 

 

51.当超链和onCLICK事件都有时,则老版本的浏览器转向a.html,否则转向b.html.例:<a href="a.html" onclick="location.href='b.html';return

 

false">dfsadf</a>

 

 

52.JS的内建对象有:Array,Boolean,Date,Error,EvalError,Function,Math,Number,Object,RangeError,ReferenceError,RegExp,String,SyntaxError,TypeError,URIError

 

 

53.JS中的换行:/n

 

 

54.窗口全屏大小:<script>function fullScreen(){ this.moveTo(0,0);this.outerWidth=screen.availWidth;this.outerHeight=screen.availHeight;}window.maximize=fullScreen;</script>

 

 

55.JS中的all代表其下层的全部元素

 

 

56.JS中的焦点顺序:document.getElementByid("表单元素").tabIndex = 1

 

 

57.innerHTML的值是表单元素的值:如<p id="para">"how are <em>you</em>"</p>,则innerHTML的值就是:how are <em>you</em>

 

 

58.innerTEXT的值和上面的一样,只不过不会把<em>这种标记显示出来.

 

 

59.contentEditable可设置元素是否可被修改,isContentEditable返回是否可修改的状态.

 

 

60.isDisabled判断是否为禁止状态.disabled设置禁止状态

 

 

61.length取得长度,返回整型数值

 

 

62.addBehavior()是一种JS调用的外部函数文件其扩展名为.htc

 

 

63.window.focus()使当前的窗口在所有窗口之前.

 

 

64.blur()指失去焦点.与FOCUS()相反.

 

 

65.select()指元素为选中状态.

 

 

66.防止用户对文本框中输入文本:onfocus="this.blur()"

 

 

67.取出该元素在页面中出现的数量:document.all.tags("div(或其它HTML标记符)").length

 

 

68.JS中分为两种窗体输出:模态和非模态.window.showModaldialog(),window.showModeless()

 

 

69.状态栏文字的设置:window.status='文字',默认的状态栏文字设置:window.defaultStatus = '文字.';

 

 

70.添加到收藏夹:external.AddFavorite("http://www.dannyg.com";,"jaskdlf");

 

 

71.JS中遇到脚本错误时不做任何操作:window.onerror = doNothing; 指定错误句柄的语法为:window.onerror = handleError;

 

 

72.JS中指定当前打开窗口的父窗口:window.opener,支持opener.opener...的多重继续.

 

 

73.JS中的self指的是当前的窗口

 

 

74.JS中状态栏显示内容:window.status="内容"

 

 

75.JS中的top指的是框架集中最顶层的框架

 

 

76.JS中关闭当前的窗口:window.close();

 

 

77.JS中提出是否确认的框:if(confirm("Are you sure?")){alert("ok");}else{alert("Not Ok");}

 

 

78.JS中的窗口重定向:window.navigate(http://www.sina.com.cn;);

 

 

79.JS中的打印:window.print()

 

 

80.JS中的提示输入框:window.prompt("message","defaultReply");

 

 

81.JS中的窗口滚动条:window.scroll(x,y)

 

 

82.JS中的窗口滚动到位置:window.scrollby

 

 

83.JS中设置时间间隔:setInterval("expr",msecDelay)或setInterval

 

(funcRef,msecDelay)或setTimeout

 

 

84.JS中的模态显示在IE4+行,在NN中不行:showModalDialog("URL"[,arguments][,features]);

 

 

85.JS中的退出之前使用的句柄:function verifyClose(){event.returnValue="we really like you and hope you will stay longer.";}}   window.onbeforeunload=verifyClose;

 

 

86.当窗体第一次调用时使用的文件句柄:onload()

 

 

87.当窗体关闭时调用的文件句柄:onunload()

 

 

88.window.location的属性: protocol(http:),hostname(www.example.com),port(80),host(www.example.com:80),pathname("/a/a.html"),hash("#giantGizmo",指跳转到相应的锚记),href(全部的信息)

 

 

89.window.location.reload()刷新当前页面.

 

 

90.window.history.back()返回上一页,window.history.forward()返回下一页,window.history.go(返回第几页,也可以使用访问过的URL)

 

 

91.document.write()不换行的输出,document.writeln()换行输出

 

 

92.document.body.noWrap=true;防止链接文字折行.

 

 

93.变量名.charAt(第几位),取该变量的第几位的字符.

 

 

94."abc".charCodeAt(第几个),返回第几个字符的ASCii码值.

 

 

95.字符串连接:string.concat(string2),或用+=进行连接

 

 

96.变量.indexOf("字符",起始位置),返回第一个出现的位置(从0开始计算)

 

 

97.string.lastIndexOf(searchString[,startIndex])最后一次出现的位置.

 

 

98.string.match(regExpression),判断字符是否匹配.

 

 

99.string.replace(regExpression,replaceString)替换现有字符串.

 

 

100.string.split(分隔符)返回一个数组存储值.

 

 

101.string.substr(start[,length])取从第几位到指定长度的字符串.

 

 

102.string.toLowerCase()使字符串全部变为小写.

 

 

103.string.toUpperCase()使全部字符变为大写.

 

 

104.parseInt(string[,radix(代表进制)])强制转换成整型.

 

 

105.parseFloat(string[,radix])强制转换成浮点型.

 

 

106.isNaN(变量):测试是否为数值型.

 

 

107.定义常量的关键字:const,定义变量的关键字:var

 

 

 

 

 

1. oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键

<table oncontextmenu=return(false)></table> 可用于Table

 

2. <body onselectstart="return false"> 取消选取、防止复制

 

3. onpaste="return false" 不准粘贴

 

4. oncopy="return false;" oncut="return false;" 防止复制

 

5. <link rel="Shortcut Icon" href="favicon.ico"> IE地址栏前换成自己的图标

 

6. <link rel="Bookmark" href="favicon.ico"> 可以在收藏夹中显示出你的图标

 

7. <input style="ime-mode:disabled"> 关闭输入法

 

8. 永远都会带着框架

<script language="JavaScript"><!--

if (window == top)top.location.href = "frames.htm"; //frames.htm为框架网页

// --></script>

 

9. 防止被人frame

<SCRIPT LANGUAGE=JAVASCRIPT><!--

if (top.location != self.location)top.location=self.location;

// --></SCRIPT>

 

10. 网页将不能被另存为

<noscript><iframe src="/blog/*.html>";</iframe></noscript>

 

11. <input type=button value=查看网页源代码

onclick="window.location = "view-source:"+ "http://www.williamlong.info"">

 

12.删除时确认

<a href="javascript:if(confirm("确实要删除吗?"))location="boos.asp?&areyou=删除&page=1"">删除</a>

 

13. 取得控件的绝对位置

//Javascript

<script language="Javascript">

function getIE(e){

var t=e.offsetTop;

var l=e.offsetLeft;

while(e=e.offsetParent)

alert("top="+t+"/nleft="+l);

}

</script>

 

//VBScript

<script language="VBScript"><!--

function getIE()

dim t,l,a,b

set a=document.all.img1

t=document.all.img1.offsetTop

l=document.all.img1.offsetLeft

while a.tagName<>"BODY"

set a = a.offsetParent

t=t+a.offsetTop

l=l+a.offsetLeft

wend

msgbox "top="&t&chr(13)&"left="&l,64,"得到控件的位置"

end function

--></script>

 

14. 光标是停在文本框文字的最后

<script language="javascript">

function cc()

{

var e = event.srcElement;

var r =e.createTextRange();

r.moveStart("character",e.value.length);

r.collapse(true);

r.select();

}

</script>

<input type=text name=text1 value="123" onfocus="cc()">

 

15. 判断上一页的来源

javascript:

document.referrer

 

 

16. 最小化、最大化、关闭窗口

<object id=hh1 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11">

<param name="Command" value="Minimize"></object>

<object id=hh2 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11">

<param name="Command" value="Maximize"></object>

<OBJECT id=hh3 classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">

<PARAM NAME="Command" VALUE="Close"></OBJECT>

<input type=button value=最小化 onclick=hh1.Click()>

<input type=button value=最大化 onclick=hh2.Click()>

<input type=button value=关闭 onclick=hh3.Click()>

本例适用于IE

 

17.屏蔽功能键Shift,Alt,Ctrl

<script>

function look(){

if(event.shiftKey)

alert("禁止按Shift键!"); //可以换成ALT CTRL

}

document.onkeydown=look;

</script>

 

18. 网页不会被缓存

<META HTTP-EQUIV="pragma" CONTENT="no-cache">

<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">

<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">

或者<META HTTP-EQUIV="expires" CONTENT="0">

 

19.怎样让表单没有凹凸感?

<input type=text style="border:1 solid #000000">

<input type=text style="border-left:none; border-right:none; border-top:none; border-bottom:

 

1 solid #000000"></textarea>

 

20.<div><span>&<layer>的区别?

<div>(division)用来定义大段的页面元素,会产生转行

<span>用来定义同一行内的元素,跟<div>的唯一区别是不产生转行

<layer>是ns的标记,ie不支持,相当于<div>

 

21.让弹出窗口总是在最上面:

<body onblur="this.focus();">

 

22.不要滚动条?

让竖条没有:

<body style="overflow:scroll;overflow-y:hidden">

</body>

让横条没有:

<body style="overflow:scroll;overflow-x:hidden">

</body>

两个都去掉?更简单了

<body scroll="no">

</body>

 

23.怎样去掉图片链接点击后,图片周围的虚线?

<a href="#" onFocus="this.blur()"><img src="/blog/logo.jpg" border=0></a>

 

24.电子邮件处理提交表单

<form name="form1" method="post" action="mailto:****@***.com" enctype="text/plain">

<input type=submit>

</form>

 

25.在打开的子窗口刷新父窗口的代码里如何写?

window.opener.location.reload()

 

26.如何设定打开页面的大小

<body onload="top.resizeTo(300,200);">

打开页面的位置<body onload="top.moveBy(300,200);">

 

27.在页面中如何加入不是满铺的背景图片,拉动页面时背景图不动

<STYLE>

body

{background-image:url(/blog/logo.gif); background-repeat:no-repeat;

background-position:center;background-attachment: fixed}

</STYLE>

 

28. 检查一段字符串是否全由数字组成

<script language="Javascript"><!--

function checkNum(str){return str.match(//D/)==null}

alert(checkNum("1232142141"))

alert(checkNum("123214214a1"))

// --></script>

 

29. 获得一个窗口的大小

document.body.clientWidth; document.body.clientHeight

 

30. 怎么判断是否是字符

if (/[^/x00-/xff]/g.test(s)) alert("含有汉字");

else alert("全是字符");

 

31.TEXTAREA自适应文字行数的多少

<textarea rows=1 name=s1 cols=27 onpropertychange="this.style.posHeight=this.scrollHeight">

</textarea>

 

32. 日期减去天数等于第二个日期

<script language=Javascript>

function cc(dd,dadd)

{

//可以加上错误处理

var a = new Date(dd)

a = a.valueOf()

a = a - dadd * 24 * 60 * 60 * 1000

a = new Date(a)

alert(a.getFullYear() + "年" + (a.getMonth() + 1) + "月" + a.getDate() + "日")

}

cc("12/23/2002",2)

</script>

 

33. 选择了哪一个Radio

<HTML><script language="vbscript">

function checkme()

for each ob in radio1

if ob.checked then window.alert ob.value

next

end function

</script><BODY>

<INPUT name="radio1" type="radio" value="style" checked>Style

<INPUT name="radio1" type="radio" value="barcode">Barcode

<INPUT type="button" value="check" onclick="checkme()">

</BODY></HTML>

 

34.脚本永不出错

<SCRIPT LANGUAGE="JavaScript">

<!-- Hide

function killErrors() {

return true;

}

window.onerror = killErrors;

// -->

</SCRIPT>

 

35.ENTER键可以让光标移到下一个输入框

<input onkeydown="if(event.keyCode==13)event.keyCode=9">

 

 

36. 检测某个网站的链接速度:

把如下代码加入<body>区域中:

<script language=Javascript>

tim=1

setInterval("tim++",100)

b=1

var autourl=new Array()

autourl[1]="www.njcatv.net"

autourl[2]="javacool.3322.net"

autourl[3]="www.sina.com.cn"

autourl[4]="www.nuaa.edu.cn"

autourl[5]="www.cctv.com"

function butt(){

document.write("<form name=autof>")

for(var i=1;i<autourl.length;i++)

document.write("<input type=text name=txt"+i+" size=10 value="/blog/测试中......>" =》<input type=text

name=url"+i+" size=40> =》<input type=button value=GO

 

onclick=window.open(this.form.url"+i+".value)><br/>")

document.write("<input type=submit value=刷新></form>")

}

butt()

function auto(url)

else

 

b++

}

function run(){for(var i=1;i<autourl.length;i++)document.write("<img src=http://"+autourl+"/"+Math.random()+" width=1 height=1

 

onerror=auto("http://"+autourl+"")>")}

run()</script>

 

37. 各种样式的光标

auto :标准光标

default :标准箭头

hand :手形光标

wait :等待光标

text :I形光标

vertical-text :水平I形光标

no-drop :不可拖动光标

not-allowed :无效光标

help :?帮助光标

all-scroll :三角方向标

move :移动标

crosshair :十字标

e-resize

n-resize

nw-resize

w-resize

s-resize

se-resize

sw-resize

 

38.页面进入和退出的特效

进入页面<meta http-equiv="Page-Enter" content="revealTrans(duration=x, transition=y)">

推出页面<meta http-equiv="Page-Exit" content="revealTrans(duration=x, transition=y)">

这个是页面被载入和调出时的一些特效。duration表示特效的持续时间,以秒为单位。transition表示使用哪种特效,取值为1-23:

  0 矩形缩小

  1 矩形扩大

  2 圆形缩小

  3 圆形扩大

  4 下到上刷新

  5 上到下刷新

  6 左到右刷新

  7 右到左刷新

  8 竖百叶窗

  9 横百叶窗

  10 错位横百叶窗

  11 错位竖百叶窗

  12 点扩散

  13 左右到中间刷新

  14 中间到左右刷新

  15 中间到上下

  16 上下到中间

  17 右下到左上

  18 右上到左下

  19 左上到右下

  20 左下到右上

  21 横条

  22 竖条

  23 以上22种随机选择一种

 

39.在规定时间内跳转

<META http-equiv=V="REFRESH" content="5;URL=http://www.williamlong.info">

 

40.网页是否被检索

<meta name="ROBOTS" content="属性值">

  其中属性值有以下一些:

  属性值为"all": 文件将被检索,且页上链接可被查询;

  属性值为"none": 文件不被检索,而且不查询页上的链接;

  属性值为"index": 文件将被检索;

  属性值为"follow": 查询页上的链接;

  属性值为"noindex": 文件不检索,但可被查询链接;

  属性值为"nofollow": 文件不被检索,但可查询页上的链接。

 

最大化窗口?

<script language="JavaScript">

<!--

self.moveTo(0,0)

self.resizeTo(screen.availWidth,screen.availHeight)

//-->

</script>

 

 

 

 

解 决问题:由于层与下拉框之间的优先级是:下拉框 > 层,因此在显示的时候,会因为优先级的次序而会出现如上问题。(如果几个元素都是层的话,我们可以通过层的 z-index 属性来设置)解决办法就是:给层中放一个优先级比下拉框更高的元素(iframe),从而解决此问题!具体解决代码如下:

 

<div id="menu" style="position:absolute; visibility:hidden; top:20px; left:20px; width:100px; height:200px; background-color:#6699cc;">

<table>

<tr><td>item 1</td></tr>

<tr><td>item 2</td></tr>

<tr><td>item 3</td></tr>

<tr><td>item 4</td></tr>

<tr><td>item 5</td></tr>

</table>

<iframe src="/blog/javascript:false" style="position:absolute; visibility:inherit; top:0px; left:0px; width:100px; height:200px; z-index:-1; filter='progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)';"></iframe>

</div>

 

<a href="#" onclick="document.getElementById('menu').style.visibility='visible'">menu</a>

 

<form>

<select><option>A form selection list</option></select>

</form>

 

输入框也可以做的很漂亮了

<div align="center"><input type="hidden" name="hao" value="yes">

外向数:<input

name=answer

style="color: #ff0000; border-left: medium none; border-right: medium none; border-top: medium none; border-bottom: 1px solid #c0c0c0">

 没回答的题数:<input

name=unanswer id="unanswer"

style="color: #ff0000; border-left: medium none; border-right: medium none; border-top: medium none; border-bottom: 1px solid #c0c0c0">

<br/>

总得分:

<input

name=score id="score"

style="color: #ff0000; border-left: medium none; border-right: medium none; border-top: medium none; border-bottom: 1px solid #c0c0c0">

 结    论:

<input

name=xgjg id="xgjg"

style="color: #ff0000; border-left: medium none; border-right: medium none; border-top: medium none; border-bottom: 1px solid #c0c0c0">

<br/>

<br/>

 

<input onClick=processForm(this.form) style="FONT-FAMILY: 宋体; FONT-SIZE: 9pt" type=button value=查看结果 name="button">

<input type="reset" name="Submit" value="重做">

</div>

注意:修改<body>为<body onload="max.Click()">即为打开最大

 

化窗口,而如果改为<body onload="min.Click()">就变为窗口一打开就最小化

 

<object id="min" type="application/x-oleobject" classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">

<param name="Command" value="Minimize">

</object> <object id="max" type="application/x-oleobject" classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">

<param name="Command" value="Maximize">

</object>

</body>

 

页面自动刷新(说明)

 

当你做网页时,是不是有的时候想让你的网页自动不停刷新,或者过一段时间自动跳转到另外一个你自己设定的页面?其实实现这个效果非常地简单,而且这个效果甚至不能称之为特效。你只要把如下代码加入你的网页中就可以了。

 

1,页面自动刷新:把如下代码加入<head>区域中<meta http-equiv="refresh" content="20">,其中20指每隔20秒刷新一次页面.

 

2, 页面自动跳转:把如下代码加入<head>区域中<meta http-equiv="refresh" content="20;url=http://www.williamlong.info">,其中20指隔20秒后跳转到http: //www.williamlong.info页面。

 

页面自动关闭

 

5000是指时间<body onLoad="setTimeout(window.close, 5000)">

 

弹出窗口自动关闭

 

10秒后弹出窗口自动关闭

 

注意:在新的tan.htm的body中要加 <onLoad="closeit()">

head

 

<script language="JavaScript">

 

<!--

 

var gt = unescape('%3e');

 

var popup = null;

 

var over = "Launch Pop-up Navigator";

 

popup = window.open('', 'popupnav', 'width=225,height=235,resizable=1,scrollbars=auto');

 

if (popup != null) {

 

if (popup.opener == null) {

 

popup.opener = self;

 

}

 

popup.location.href = 'tan.htm';

 

}

 

// -->

 

</script>

<body>注意:这段代码是在新建文件中的

<script language="JavaScript">

 

function closeit()

 

</script>

 

这个可不是<iframe>(引用)呀。是直接调用的。以下代码加入<body>区域

 

<object type="text/x-scriptlet" width="800" height="1000" data="../index.htm">

</object>

 

 

 

 

 

 

 

 

 

 

 

 

网页常用小技巧(转帖)

 

1. oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键

<table border oncontextmenu=return(false)><td>no</table> 可用于Table

 

2. <body onselectstart="return false"> 取消选取、防止复制

 

3. onpaste="return false" 不准粘贴

 

4. oncopy="return false;" oncut="return false;" 防止复制

 

5. <link rel="Shortcut Icon" href="favicon.ico"> IE地址栏前换成自己的图标

 

6. <link rel="Bookmark" href="favicon.ico"> 可以在收藏夹中显示出你的图标

 

7. <input style="ime-mode:disabled"> 关闭输入法

 

8. 永远都会带着框架

<script language="JavaScript"><!--

if (window == top)top.location.href = "frames.htm"; //frames.htm为框架网页

// --></script>

 

9. 防止被人frame

<SCRIPT LANGUAGE=JAVASCRIPT><!--

if (top.location != self.location)top.location=self.location;

// --></SCRIPT>

 

10. 网页将不能被另存为

<noscript><iframe src=*.html></iframe></noscript>

 

11. <input type=button value=查看网页源代码

onclick="window.location = 'view-source:'+ 'http://www.51js.com/'">

 

12.删除时确认

<a href='javascript:if(confirm("确实要删除吗?"))location="boos.asp?&areyou=删除&page=1"'>删

 

除</a>

 

13. 取得控件的绝对位置

//Javascript

<script language="Javascript">

function getIE(e){

var t=e.offsetTop;

var l=e.offsetLeft;

while(e=e.offsetParent){

t+=e.offsetTop;

l+=e.offsetLeft;

}

alert("top="+t+"/nleft="+l);

}

</script>

 

//VBScript

<script language="VBScript"><!--

function getIE()

dim t,l,a,b

set a=document.all.img1

t=document.all.img1.offsetTop

l=document.all.img1.offsetLeft

while a.tagName<>"BODY"

set a = a.offsetParent

t=t+a.offsetTop

l=l+a.offsetLeft

wend

msgbox "top="&t&chr(13)&"left="&l,64,"得到控件的位置"

end function

--></script>

 

14. 光标是停在文本框文字的最后

<script language="javascript">

function cc()

{

var e = event.srcElement;

var r =e.createTextRange();

r.moveStart('character',e.value.length);

r.collapse(true);

r.select();

}

</script>

<input type=text name=text1 value="123" onfocus="cc()">

 

15. 判断上一页的来源

javascript:

document.referrer

 

16. 最小化、最大化、关闭窗口

<object id=hh1 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11">

<param name="Command" value="Minimize"></object>

<object id=hh2 classid="clsid:ADB880A6-D8FF-11CF-9377-00AA003B7A11">

<param name="Command" value="Maximize"></object>

<OBJECT id=hh3 classid="clsid:adb880a6-d8ff-11cf-9377-00aa003b7a11">

<PARAM NAME="Command" VALUE="Close"></OBJECT>

 

<input type=button value=最小化 onclick=hh1.Click()>

<input type=button value=最大化 onclick=hh2.Click()>

<input type=button value=关闭 onclick=hh3.Click()>

本例适用于IE

 

17.屏蔽功能键Shift,Alt,Ctrl

<script>

function look(){

if(event.shiftKey)

alert("禁止按Shift键!"); //可以换成ALT CTRL

}

document.onkeydown=look;

</script>

 

18. 网页不会被缓存

<META HTTP-EQUIV="pragma" CONTENT="no-cache">

<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">

<META HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">

或者<META HTTP-EQUIV="expires" CONTENT="0">

 

19.怎样让表单没有凹凸感?

<input type=text style="border:1 solid #000000">

<input type=text style="border-left:none; border-right:none; border-top:none; border-bottom:

 

1 solid #000000"></textarea>

 

20.<div><span>&<layer>的区别?

<div>(division)用来定义大段的页面元素,会产生转行

<span>用来定义同一行内的元素,跟<div>的唯一区别是不产生转行

<layer>是ns的标记,ie不支持,相当于<div>

 

还有东西,一贴太长了,我另外开帖子~~

对不起,我说出了,我没必要另外开帖子~~

我回贴里面增加就可以了

 

21.让弹出窗口总是在最上面:

<body onblur="this.focus();">

 

22.不要滚动条?

让竖条没有:

<body style='overflow:scroll;overflow-y:hidden'>

</body>

让横条没有:

<body style='overflow:scroll;overflow-x:hidden'>

</body>

两个都去掉?更简单了

<body scroll="no">

</body>

 

23.怎样去掉图片链接点击后,图片周围的虚线?

<a href="#" onFocus="this.blur()"><img src="logo.jpg" border=0></a>

 

24.电子邮件处理提交表单

<form name="form1" method="post" action="mailto:****@***.com" enctype="text/plain">

<input type=submit>

</form>

 

25.在打开的子窗口刷新父窗口的代码里如何写?

window.opener.location.reload()

widdow.opener.location.reload();

window.opener.location.reload();

window.opener.location.reload();

window.opener.location.reload();

window.opener.location.reload();

window.opener.location.reload();

 

 

26.如何设定打开页面的大小

<body onload="top.resizeTo(300,200);">

打开页面的位置<body onload="top.moveBy(300,200);">

 

27.在页面中如何加入不是满铺的背景图片,拉动页面时背景图不动

<STYLE>

body

{background-image:url(logo.gif); background-repeat:no-repeat;

 

background-position:center;background-attachment: fixed}

</STYLE>

 

28. 检查一段字符串是否全由数字组成

<script language="Javascript"><!--

function checkNum(str){return str.match(//D/)==null}

alert(checkNum("1232142141"))

alert(checkNum("123214214a1"))

// --></script>

 

29. 获得一个窗口的大小

document.body.clientWidth; document.body.clientHeight

 

30. 怎么判断是否是字符

if (/[^/x00-/xff]/g.test(s)) alert("含有汉字");

else alert("全是字符");

 

31.TEXTAREA自适应文字行数的多少

<textarea rows=1 name=s1 cols=27 onpropertychange="this.style.posHeight=this.scrollHeight">

</textarea>

 

32. 日期减去天数等于第二个日期

<script language=Javascript>

function cc(dd,dadd)

{

//可以加上错误处理

var a = new Date(dd)

a = a.valueOf()

a = a - dadd * 24 * 60 * 60 * 1000

a = new Date(a)

alert(a.getFullYear() + "年" + (a.getMonth() + 1) + "月" + a.getDate() + "日")

}

function cc(date dd)

{

  var a=new Date(date);

a=a.valueOf();

a=a-dd*24*60*60*1000;

a=new Date(a);

alert(a.getFullYear()+a.getMonth()+1+a.getDate

 

}

cc("12/23/2002",2)

</script>

 

33. 选择了哪一个Radio

<HTML><script language="vbscript">

function checkme()

for each ob in radio1

if ob.checked then window.alert ob.value

next

end function

</script><BODY>

<INPUT name="radio1" type="radio" value="style" checked>Style

<INPUT name="radio1" type="radio" value="barcode">Barcode

<INPUT type="button" value="check" onclick="checkme()">

</BODY></HTML>

 

34.脚本永不出错

<SCRIPT LANGUAGE="JavaScript">

<!-- Hide

function killErrors() {

return true;

}

window.onerror = killErrors;

// -->

</SCRIPT>

 

35.ENTER键可以让光标移到下一个输入框

<input onkeydown="if(event.keyCode==13)event.keyCode=9">

<input onkeydown="if(event.keyCode==13)event.keyCode=9">

<input onkeydown="if(event.keyCode==13)event.keyCode=9">

 

36. 检测某个网站的链接速度:

把如下代码加入<body>区域中:

<script language=Javascript>

tim=1

setInterval("tim++",100)

b=1

 

var autourl=new Array()

autourl[1]="www.njcatv.net"

autourl[2]="javacool.3322.net"

autourl[3]="www.sina.com.cn"

autourl[4]="www.nuaa.edu.cn"

autourl[5]="www.cctv.com"

 

function butt(){

document.write("<form name=autof>")

for(var i=1;i<autourl.length;i++)

document.write("<input type=text name=txt"+i+" size=10 value=测试中……> =》<input type=text

 

name=url"+i+" size=40> =》<input type=button value=GO

 

onclick=window.open(this.form.url"+i+".value)><br>")

document.write("<input type=submit value=刷新></form>")

}

butt()

function auto(url){

document.forms[0]["url"+b].value=url

if(tim>200)

{document.forms[0]["txt"+b].value="链接超时"}

else

{document.forms[0]["txt"+b].value="时间"+tim/10+"秒"}

b++

}

function run(){for(var i=1;i<autourl.length;i++)document.write("<img

 

src=http://"+autourl+"/"+Math.random()+" width=1 height=1

 

onerror=auto('http://"+autourl+"')>")}

run()</script>

 

37. 各种样式的光标

auto :标准光标

default :标准箭头

hand :手形光标

wait :等待光标

text :I形光标

vertical-text :水平I形光标

no-drop :不可拖动光标

not-allowed :无效光标

help :?帮助光标

all-scroll :三角方向标

move :移动标

crosshair :十字标

e-resize

n-resize

nw-resize

w-resize

s-resize

se-resize

sw-resize

 

38.页面进入和退出的特效

进入页面<meta http-equiv="Page-Enter" content="revealTrans(duration=x, transition=y)">

推出页面<meta http-equiv="Page-Exit" content="revealTrans(duration=x, transition=y)"> 

这个是页面被载入和调出时的一些特效。duration表示特效的持续时间,以秒为单位。transition表示使

 

用哪种特效,取值为1-23:

  0 矩形缩小

  1 矩形扩大

  2 圆形缩小

  3 圆形扩大

  4 下到上刷新

  5 上到下刷新

  6 左到右刷新

  7 右到左刷新

  8 竖百叶窗

  9 横百叶窗

  10 错位横百叶窗

  11 错位竖百叶窗

  12 点扩散

  13 左右到中间刷新

  14 中间到左右刷新

  15 中间到上下

  16 上下到中间

  17 右下到左上

  18 右上到左下

  19 左上到右下

  20 左下到右上

  21 横条

  22 竖条

  23 以上22种随机选择一种

 

39.在规定时间内跳转

<META http-equiv=V="REFRESH" content="5;URL=http://www.51js.com">

 

40.网页是否被检索

<meta name="ROBOTS" content="属性值">

  其中属性值有以下一些:

  属性值为"all": 文件将被检索,且页上链接可被查询;

  属性值为"none": 文件不被检索,而且不查询页上的链接;

  属性值为"index": 文件将被检索;

  属性值为"follow": 查询页上的链接;

  属性值为"noindex": 文件不检索,但可被查询链接;

  属性值为"nofollow": 文件不被检索,但可查询页上的链接。

 

41. jsp: 解决rs.getString()取值写入HTML不换行问题

 

最后的解决方案:

<%

out.println("<TD>简介: <p><p><p>");

 

out.println("<table width='99%' style='TABLE-LAYOUT: fixed'>");

 

out.println("<tr><td style='LEFT: 0px; WIDTH: 100%; WORD-WRAP: break-word'>");

 

out.println("<pre> "+ rs.getString(3) +" </pre>");

 

out.println("</td></tr></table></TD> ");

 

%>

42.显示年月日,并且选中当前的日期的javascript脚本

脚本说明:

把如下代码加入<body>区域中

<script language="javascript">

function nowtime()

{

 var da,ny,nm,nd;

 da = new Date();

 ny = da.getYear();

 nm = da.getMonth();

 nd = da.getDate();

 document.form1.year2.value = ny;

 document.form1.month2.value = nm+1;

 document.form1.day2.value = nd;

}

</script>

    <form name="form1" method="post" action="#">

      <table width="100%" border="0" cellspacing="0" cellpadding="0">

      

        <tr>

          <td height="30">

            <select name="year2" >

              <option value="2002">2002</option>

              <option value="2003">2003</option>

              <option value="2004">2004</option>

            </select>

           

            <select name="month2">

              <option value="1">1</option>

              <option value="2">2</option>

              <option value="3">3</option>

              <option value="4">4</option>

              <option value="5">5</option>

              <option value="6">6</option>

              <option value="7">7</option>

              <option value="8">8</option>

              <option value="9">9</option>

              <option value="10">10</option>

              <option value="11">11</option>

              <option value="12">12</option>

            </select>

           

            <select name="day2">

              <option value="1">1</option>

              <option value="2" >2</option>

              <option value="3" >3</option>

              <option value="4" >4</option>

              <option value="5" >5</option>

              <option value="6" >6</option>

              <option value="7" >7</option>

              <option value="8" >8</option>

              <option value="9" >9</option>

              <option value="10" >10</option>

              <option value="11" >11</option>

              <option value="12" >12</option>

              <option value="13" >13</option>

              <option value="14" >14</option>

              <option value="15" >15</option>

              <option value="16" >16</option>

              <option value="17" >17</option>

              <option value="18" >18</option>

              <option value="19" >19</option>

              <option value="20" >20</option>

              <option value="21" >21</option>

              <option value="22" >22</option>

              <option value="23" >23</option>

              <option value="24" >24</option>

              <option value="25" >25</option>

              <option value="26" >26</option>

              <option value="27" >27</option>

              <option value="28" >28</option>

              <option value="29" >29</option>

              <option value="30" >30</option>

              <option value="31" >31</option>

            </select>

           

            <script language="Javascript">

      if (this.form1.month2!="")

    {nowtime()}

     </script>

                     </td>

        </tr>

      

      </table>

   </form>

 

45.java中jsp中获得相对路径:

<%=getServletContext().getRealPath("/")%><br>

<%=request.getRequestURI()%><br>

<%=request.getContextPath()%><br>

46.页面上对复选框添一个全选按钮。

<input type="button" name="allcho" value="全 选" onclick="selectall()"><br><br><br>

<script language=javascript>

  <!--

  <!-- 全选 -->

    function selectall(){

      var f = document.forms[0];

      for (i=0;i<f.elements.length-2;i++)

        if (f.elements[i].name.indexOf("user_id")!=-1)

          f.elements[i].checked = true;

}

//-->

</script>

原创粉丝点击