Dom的学习随笔五

一、正则表达式：

ASCII码说明：8：退格键；46：delete；37-40：方向键；48-57：小键盘区的数字；96-105：主键盘区的数字；110：小键盘区的小数点；190：主键盘区的小数点；189：小键盘区的负号；109：主键盘区的负号；13：回车；9：Tab作用是那个把焦点移到下一个文本框案例一：回车实现Tab跳转。响应文本框的onKeyDown事件，window.event.keyCode获得用户点击的keyCode。但keyCode和ASCII不是完全一致，主键盘的1和小键盘的1的ASCII一样，但是keyCode不一样。详见备注。回车的keyCode为13，Tab的keyCode为9.<body onkeydown="if(window.event.keyCode==13{window.event.keyCode=9;})">只有少数键才能被替换，大部分是不行的，有权限问题。这里有一些有代表性的、比较简单的例子。（网上查询的资料）

vi 命令	作用
:%s/ */ /g	把一个或者多个空格替换为一个空格
:%s/ *$//	去掉行尾的所有空格
:%s/^/ /	在每一行头上加入一个空格
:%s/^[0-9][0-9]* //	去掉行首的所有数字字符
:%s/b[aeio]g/bug/g	将所有的bag、beg、big和bog改为bug。
:%s/t$[aou]$g/h\1t/g	将所有tag、tog和tug分别改为hat、hot和hut（注意用group的用法和使用\1引用前面被匹配的字符）

　要想真正的用好正则表达式，正确的理解元字符是最重要的事情。下表列出了所有的元字符和对它们的一个简短的描述。（网上查询的资料）

元字符	描述
.点	匹配任何单个字符。例如正则表达式r.t匹配这些字符串：rat、rut、r t，但是不匹配root。
$	匹配行结束符。例如正则表达式weasel$ 能够匹配字符串"He's a weasel"的末尾但是不能匹配字符串"They are a bunch of weasels."
^	匹配一行的开始。例如正则表达式^When in能够匹配字符串"When in the course of human events"的开始，但是不能匹配"What and When in the"
*	匹配0或多个正好在它之前的那个字符。例如正则表达式 .* 意味着能够匹配任意数量的任何字符。比如<T>.*</T> 可以匹配<T>不管是什么</T>
\	这是引用符，用来将这里列出的这些元字符当作普通的字符来进行匹配。例如正则表达式\$被用来匹配美元符号，而不是行尾，类似的，正则表达式\.用来匹配点字符，而不是任何字符的通配符。
[ ] [c1-c2] [^c1-c2]	匹配括号中的任何一个字符。例如正则表达式r[aou]t匹配rat、rot和rut，但是不匹配ret。可以在括号中使用连字符-来指定字符的区间，例如正则表达式[0-9]可以匹配任何数字字符；还可以制定多个区间，例如正则表达式[A-Za-z]可以匹配任何大小写字母。另一个重要的用法是“排除”，要想匹配除了指定区间之外的字符——也就是所谓的补集——在左边的括号和第一个字符之间使用^字符，例如正则表达式[^269A-Z] 将匹配除了2、6、9和所有大写字母之外的任何字符。
\< \>	匹配词（word）的开始（\<）和结束（\>）。例如正则表达式\<the\>能够匹配字符串"for the wise"中的"the"，但是不能匹配字符串"otherwise"中的"the"。注意：这个元字符不是所有的软件都支持的。
	将 $ 和 $ 之间的表达式定义为“组”（group），并且将匹配这个表达式的字符保存到一个临时区域（一个正则表达式中最多可以保存9个），它们可以用 \1 到\9 的符号来引用。
\|	将两个匹配条件进行逻辑“或”（Or）运算。例如正则表达式(him\|her) 匹配"it belongs to him"和"it belongs to her"，但是不能匹配"it belongs to them."。注意：这个元字符不是所有的软件都支持的。
+	匹配1或多个正好在它之前的那个字符。例如正则表达式9+匹配9、99、999等。注意：这个元字符不是所有的软件都支持的。
?	匹配0或1个正好在它之前的那个字符。注意：这个元字符不是所有的软件都支持的。
{i} {i,j}	匹配指定数目的字符，这些字符是在它之前的表达式定义的。例如正则表达式A[0-9]{3} 能够匹配字符"A"后面跟着正好3个数字字符的串，例如A123、A348等，但是不匹配A1234。而正则表达式[0-9]{4,6} 匹配连续的任意4个、5个或者6个数字字符。注意：这个元字符不是所有的软件都支持的。

View Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>正则表达式</title>
    <script type="text/javascript">
        var s = "123@qq.com";
        var regex = /(.+)@(.+)/;
        s.match(regex);
        alert(RegExp.$1); //取得第一组即@前面的部分
        alert(RegExp.$2);//取得@后面的部分
</script>
</head>
<body>
</body>
</html>

二、回车代替Tab键的用法：

View Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>回车代替Tab</title>
    <script type="text/javascript">
        function numonKeyDown() { 
        var k=window.event.keyCode:if((k==9)||(k==13)||(k==46)||(k==8)||(k==189)||(k==109)||(k==190)||(k==110)
||(k>=48&&k<=57)||(k>=96&&k<=105)||(k>=37&&k<=40))
         { }
         else{
             return false;
          }
        }//区分：onkeydown="return numonKeyDown()和onkeydown="numonKeyDown()。要区分事件响应函数与事件响应函数调用的函数。
</script> 
</head>
<body onkeydown="if(window.event.keyCode==13){window.event.keyCode=9;}">
<input type="text" style="text-align:right" onkeydown="var k=window.event.keyCode:if((k==9)||(k==13)||(k==46)||(k==8)||(k==189)||(k==109)||(k==190)||(k==110)
||(k>=48&&k<=57)||(k>=96&&k<=105)||(k>=37&&k<=40)){}else{return false;}"/><br />
<input type="text" style="text-align:right;ime-mode:disabled" onkeydown="return numonKeyDown()"/><input type="text" style="text-align:right"/><br />
<input type="text" style="text-align:right"/><input type="text" style="text-align:right"/><input type="text" style="text-align:right"/>
</body>
</html>

三、球队选择简单效果：（见代码注释）

View Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>被选择球队的效果</title>
    <script type="text/javascript">
        function initEvent() {
            var football = document.getElementById("football");
            var lis = football.getElementsByTagName("li");
            for (var i = 0; i < lis.length; i++) {
                var li = lis[i];
                li.onmouseover = function () {
                    var football = document.getElementById("football");
                    var lis = football.getElementsByTagName("li");
                    for (var i = 0; i < lis.length; i++) {
                        var li = lis[i];
                        if (li == this) {
                            li.style.background = "red";//鼠标放上去的列表其背景为红色
                        }
                        else {
                            li.style.background = "white";//鼠标离开列表其背景变为白色
                        }
                    }
                };
                li.onclick = function () {
                    this.style.fontSize = "30";//被点击的球队其字体变大显示
                }
                li.onmouseout = function () {
                    this.style.fontSize = "12";//离开后字体缩小
                }
            }
        }
    </script>
</head>
<body onload="initEvent()">
<ul id="football">
<li>曼联队</li>
<li>巴西队</li>
<li>意大利队</li>
<li>日本队</li>
<li>朝鲜队</li>
</ul>
</body>
</html>

四、模仿歌曲选择效果：
歌曲列表（CheckBox+Label）全选、全不选、反选对应的函数分别为：selectAll()、allNotSelected()和InverseSel()。只针对一个层中，div.getElementByTagName("input")，再判断type='checkbox'的项，checked="checked".

View Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        function selectAll() {
            var playlist = document.getElementById("playlist");
            var inputs = playlist.getElementsByTagName("input");
            for (var i = 0; i < inputs.length; i++) {
                var input = inputs[i];
                if (input.type == "checkbox") {
                    input.checked = "checked";
                }
            }
        }
        function allNotSelected() {
            var playlist = document.getElementById("playlist");
            var inputs = playlist.getElementsByTagName("input");
            for (var i = 0; i < inputs.length; i++) {
                var input = inputs[i];
                if (input.type == "checkbox") {
                    input.checked = "";
                }
            }
        }
        function InverseSel() {
            var playlist = document.getElementById("playlist");
            var inputs = playlist.getElementsByTagName("input");
            for (var i = 0; i < inputs.length; i++) {
                var input = inputs[i];     
                if (input.type == "checkbox") {
                    if (input.checked == true) {
                    //if (input.checked == "checked") {//期望的如果被选中就是checked,但调试后发现结果不是这样
//input.checked = "";
                        input.checked=false;
                    }
                    //  if (input.checked =="") {
//  input.checked = "checked";
//  }
else {
                        //input.checked = "checked";
                        input.checked=true;
                    }
                }
            }
        }
    </script>
</head>
<body>
<div id="playlist">
<input type="checkbox" id="p1" /><label for="p1">改变自己--王力宏</label>
<input type="checkbox" id="p2" /><label for="p2">龙的传人--王力宏</label>
<input type="checkbox" id="p3" /><label for="p3">唯一--王力宏</label>
<input type="checkbox" id="p4" /><label for="p4">爱情转移--陈奕迅</label>
<input type="checkbox" id="p5" /><label for="p5">十年--陈奕迅</label>
<p><input type="button" onclick="selectAll()" value="全选" />
<input type="button" onclick="allNotSelected()" value="全不选" />
<input type="button" onclick="InverseSel()" value="反选" />
</p>
</div>
</body>
</html>

笔记整理中，待续……

posted on 2012-01-21 17:05 Gelivable【IT随笔】阅读(274) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

Dom的学习随笔五

导航

公告