黑马程序员--JavaScript自学总结

-------------------------------------------- ASP.Net+Android+IO开发、.Net培训、期待与您交流！ -----------------------------------

                                                                                                                 （一）表单及表单元素

1:怎么判断以及汉字的长度：

varstr = "1我q";

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

if (str.charCodeAt(i) <= 256) {

                alert('非汉字');

            }

else {

                alert('汉字');

            }

        }

2：选中文本框中的文本，

function all() {

var temp = document.getElementById("inp");

temp.select();

        }

3：得到键盘的按键

function enter(str) {

if (event.keyCode == 13) {

var s = document.getElementById(str);

s.focus();

            }

        }

4：关于下拉列表

<selectid="sel"name="sel"size="2"onfocusout="getstr()"multiple=multiple>

<optionvalue="第一个">第一个</option>

<optionvalue="第二个">第二个</option>

<optionvalue="第三个">第三个</option>

<optionvalue="第四个">第四个</option>

<optionvalue="第五个">第五个</option>

</select>

其中的multiple表示是否可以多选。Size表示一次可以显示几条数据。

varsele = document.getElementById("sel");

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

if (sele.options[i].selected) {

str += sele.options[i].value;

                }

            }

     5：为下拉列表项添加数据

functioninsertdata() {

vararr=new Array("第一dss","第二sdfsd","第三","第四","第五","第六");

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

varselec = document.getElementById("sel");

selec.options[i] = newOption(arr[i], i);

        }

        }

6：打开网页的另外写法

var abs = window.open("");

abs.location = "newhtm.aspx";

7: 分级下拉列表

<selectid="sel"name="sel">

<optgrouplabel="前两个">

<optionvalue="第一个">第一个</option>

<optionvalue="第二个">第二个</option>

</optgroup>

<optgrouplabel="后三个">

<optionvalue="第三个">第三个</option>

<optionvalue="第四个">第四个</option>

<optionvalue="第五个">第五个</option>

</optgroup>

</select>

8：密码域（禁止复制，剪切，粘贴）

<inputtype="password"oncopy="return false;"onpaste="return false;"oncut="return false;"/>

9：不提交表单自动检测密码域是否相同

<inputid="pw1"type="password""/>

<inputid="pw2"type="password"onblur="if(this.value!=this.form.pw1.value) alert('密码不一致！'); this.value=''; this.focus();"/>

10：带记忆功能的表单（我也不是特别的明白）

技术要点：

设置<meta>元信息标记中的Name属性和content属性来实现保留历史信息的功能。

11：防止重复提交

<inputtype="submit"value="提交"class="saveHistory"onclick="this.disabled=true;this.form.submit();"/>

12：可以提交到不同处理页的表单。

function g() {

var f = document.getElementById("form1");

f.action = "newhtm.aspx";

f.submit();

        }

                                                                                                      （二）实用JS函数

1:通过正则表达式验证日期

书写格式：

function CheckData(str) {

var Expression = 11; //在JS中正则表达式只能使用"/"开关和结尾，不能使用双引号。

var objExp = new RegExp(Expression);

if (objExp.test(str) == true) {

returntrue;

            }

else {

returnfalse;

            }

        }

2：验证字符串是否以指定字符开头。

技术要点：验证书写的格式有点区别：

function checkOccur(startStr, inStr) {

var Expression = eval("/^" + startStr +"/");

var objExp = new RegExp(Expression);

return objExp.test(inStr);

        }

3:实现字符串中的替换功能

String.replace(regExp,string);

String对象的replace()方法用于执行检索与替换操作，

regExp:是一个正则表达式，如果正则表达式中设置了标志g,那么该方法将用替换字符串替换检索到的所有与模式匹配的子串，否则只替换所检索到的第一个与模式匹配的子串。

4：关于parseInt与Number的知识

//默认模式

        parseInt("8007wgh"); //返回值为8007

        parseInt("8007wgh200");//返回值为8007

        parseInt("wgh8007"); //返回值为NaN

        parseInt("0xE"); //返回值为14

        parseInt("3.14"); //返回值为3

//基模式

        parseInt("11", 2); //返回值为3

        parseInt("11", 8); //返回值为9

        parseInt("11", 10); //返回值为11

        parseInt("11", 16); //返回值为17

 

 

//关于Number(可以用于将RGB转换为十六进制形式)

var myNum = 11;

        myNum.toString(2); //返回结果为1011

        myNum.toString(8); //返回结果为13

        myNum.toString(10); //返回结果为11

        myNum.toString(16); //返回结果为b

5：关于时间，日期。

var now = new Date();

        alert(now.getDate());

        alert(now.getYear());

        alert(now.getMonth());

        alert(now.getDay());

        alert(now.getHours());

另外的定义日期的形式：

Var  begin=new  Date(begindate);

                                                                                        （三）窗口框架与导航条

1:弹出窗口控制

（1）：打开新窗口。

window.open("newhtm.aspx","newhtmtitle","toolbar,menubar,scrollbars,resizable,status,directories,copyhistory,top=200,left=200,height=200,width=200");

status：显示状态栏

（2）：关闭子窗口后，刷新主窗口，父窗口。

function myc() {

            window.opener.location.reload();

            window.close();

        }

（3）：弹出模式对话框：

var width = screen.width;

var height = screen.height;

var somevalue = window.showModalDialog("newhtm.aspx","newhtmtitle", "dialogWidth="+width+";dilogHeight="+height+"px;");

其中somevalue如果需要用到，则在模式对话框中另上一个返回值，

Parent.window.returnValue=””;

2:窗口的动画效果

（1）：页面的自动滚动：（滚动条向下向上，或是向左向右）

               scroll(0, position);

（2）:使某个网页始终在最上面。

function show(name) {

try {

            name.document.focus();//其实就是使这个负面始终得到焦点。

            setTimeout("show(win2)", 1);

            } catch (e) {

            }

        }

（3）：频道方式窗口

    win2 = window.open("newhtm.aspx","newhtmtitle", "channelmode,scrollbars");

（4）：全屏显示：

win2 = window.open("newhtm.aspx","newhtmtitle", "fullscreen=yes");

注意：只是在效区的全屏显示！！！！！！！！

（5）：关于前进，后退，刷新。

<inputtype="button"name="btn"value="前进"onclick="if(window.forward) window.forward();"/>

<inputtype="button"name="btn"value="后退"onclick="if(window.history.length) window.history.go(window.history.length-1);"/>

<inputtype="button"name="btn"value="刷新"onclick="if(window.location.reload) window.location.reload();"/>

（6）：弹出确认对话框;

if (confirm('欢迎进入') ==false) {

            window.close();

        }

(7):立体窗口：

function bbb() {

            document.body.style.borderWidth = "5px";

            document.body.style.borderColor = "#ccc";

            document.body.style.borderStyle = "groove";

        }

（8）：动态的标题：

var n = 0;

function title() {

            n++;

if (n == 3) { n = 1; }

if (n == 1) { document.title ="我是1时的标题"; }

if (n == 2) { document.title ="我是2时的标题"; }

            setTimeout("title()", 350);

        }

        title();

（9）：固定大小的窗口

function fastness() {

            window.resizeTo(600, 440);

        }

        document.body.onresize = fastness;

        document.body.onload = fastness;

（10）：图片热区

<imgsrc="3.jpg"width="200"height="80"border="0"usemap="#map"/>

<mapname="map">

<areashape="rect"coords="73,13,135,43"href="#"onclick="manage()"/>

</map>

（11）：修改图片的SRC；

Document.Img.src=”menu.gif”;

-------待续。。。。。。。

-------------------------------------------- ASP.Net+Android+IO开发、.Net培训、期待与您交流！ -----------------------------------