JavaScript使用笔记

• 一份文档就是一棵节点树。
• 节点分为不同的类型：元素节点、属性节点和文本节点等。
• getElementById()方法将返回一个对象，该对象对应着文档里的一个特定的元素节点。
• getElementsByTagName()方法将返回一个对象数组，它们分别对应着文档里的一个特定的元素节点。
• 这些节点中的每个都是一个对象。

getAttribute()方法&SetAttribute()方法 

getAttribute()方法

JS中有两种常用的检索特定元素节点的办法：一种是使用getElementById()方法，另一种是使用getElementsByTagName()方法。

在找到目标元素后，我们就可以利用getAttribute()方法把它的各种属性的值查询出来。

getAttribute()方法是一个函数。它只有一个参数——你打算查询的属性的名字：

object.getAttribute(attributenNme)；

不过，getAttribute()方法不能通过document对象调用，它只能通过一个元素节点对象调用它。

例如，把它与getElementsByTagName()方法结合起来，去查询每个<p>元素的title属性，如下所示：

        var text = document.getElementsByTagName("p")
        for (var i = 0; i < text.length; i++) {
            alert(text[i].getAttribute("title"));

        }

若对应的的<p>元素含有title属性，则相应的getAttribute("title")调用将返回对应属性值，若对应的的<p>元素不带title属性，则相应的getAttribute("title")调用将返回null。

null是JavaScript语言中的空值，其含义是“你说的这个东西不存在”。

 JavaScript中检查某项数据是否是null值时，其实是在检查它是否存在。这种检查可以简化为直接把被检查的数据用做if语句的条件，即if (val1)与if (val1!= null)完全等价。此时，如果 val1 存在，则if语句的条件将为真；如果 val1 不存在，则if语句的条件将为假。如：

        var val1 = null;
        if (val1) {
            alert("val1不为null");
        }
        else {
            alert("val1为null");
        }

setAttribute()方法 

setAttribute()方法允许我们对属性节点的值做出修改。类似于getAttribute()方法，setAttribute()方法也是一个只能通过元素节点对象调用的函数，但setAttribute()方法需要我们向它传递两个参数：

obiect.setAttribute(attribute,value)；

 在下面的例子里，第一条语句将把id属性值是purchase的元素检索出来，第二条语句将把这个元素的title属性值设置为a list of goods：

var shopping=document.getElementByIdx_x("purchases")
shopping.setAttribute("title","a list of goods")

我们可以利用getAttribute()方法来证明这个元素的title属性值确实发生了变化：

var shopping=document.getElementByIdx_x("purchases");
alert(shopping.getAttribute("title"));
shopping.setAttribute("title","a list of goods");
alert(shopping.getAttribute("title"));

上面这些语句将在屏幕上弹出两个alert对话框：第一个alter对话框出现在setAttribute()方法被调用之前，它将是一片空白或显示着单词“null”；第二个出现在title属性值被设置之后，它将显示着“a list of goods”消息。 

在上例中，我们设置了一个现有节点的title属性，但这个属性原先并不存在。这意味着我们发出的setAttribute()调用实际完成了两项操作：先把这个属性创建出来，然后再对其值进行设置。如果我们把setAttribute()方法用在元素节点的某个现有属性上，这个属性的当前值将被覆盖。

这里有一个非常值得关注的细节：通过setAttribute()方法对文档做出的修改，将使得文档在浏览器窗口里的显示效果和/或行为动作发生相应的变化，但我们在通过浏览器的view source（查看源代码）选项去查看文档的源代码时看到的仍将是原来的属性值——也就是说，setAttribute()方法做出的修改不会反映在文档本身的源代码里。这种“表里不一”的现象源自DOM的工作模式：先加载文档的静态内容、再以动态方式对它们进行刷新，动态刷新不影响文档的静态内容。这正是DOM的真正威力和诱人之处：对页面内容的刷新不需要最终用户在他们的浏览器里执行页面刷新操作就可以实现。

---

 

JS验证邮箱地址

JS代码：

<script. type="text/javascript">
      function checkemail()
    {
        var temp = document.getElementByIdx_x_x("email");
        var myreg =/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
        if(temp.value!="")
        {
            if(!myreg.test(temp.value))
            {
                document.getElementByIdx_x_x("mail").innerHTML="请输入有效的email!";
                document.getElementByIdx_x_x("mail").style.color="red";
                temp.value="";
                temp.focus();
                return false;
            }
            else{
                document.getElementByIdx_x_x("mail").innerHTML="email可以使用";
                document.getElementByIdx_x_x("mail").style.color="green";
            }
        }
    }
 </script>

html如下：
这里我只写在body里面的代码：

邮箱地址：<input id="email" name="email" nBlur="checkemail()" type="text" /><span id="mail"></span>&nbsp;<br> 

分析：
   用过JS的人应该知道onBlur函数的作用吧，但是，我还是要说一下。意思是，只要用户的，鼠标焦点在文本框中移出时触发的一个事件。注意：这里重点在移出两个字的身上。

  document.getElementById("email");意思是：通过document对象去拿到id为email的对象，注意：id="email"其中，email在整个页面是唯一的。

   var myreg =/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/ 是正值表达式。

  if(){}这种语句，我就不需要在这里解释了，如果学过一点编程的人应该知道，if语句意思是：当满足if里面的表达式时，就执行括号里面的代码。如果，还不明白if的用法，还是请你多看看JAVA基础吧，那里面一定会讲到if的用法。

  document.getElementById("mail").innerHTML="请输入有效的email!";意思是：在id="mail"上添加，请输入有效的email!。在这里就是在<span id="mail"></span>这个标签中添加文本信息。添加后这个标签应该是：
<span id="mail">请输入有效的email!</span>

    document.getElementById("mail").style.color="red";意思是：把之前添加的文本信息（请输入有效的email!）设置字体的颜色为红色。

  temp.value="";意思是把邮箱地址上的值给清空。
  temp.focus();意思是邮箱地址重新获得焦点。

     1.  /^$/ 这个是个通用的格式。

         ^ 匹配输入字符串的开始位置；$匹配输入字符串的结束位置

     2. 里面输入需要实现的功能。

        * 匹配前面的子表达式零次或多次；

       + 匹配前面的子表达式一次或多次；

       ？匹配前面的子表达式零次或一次；

       \d  匹配一个数字字符，等价于[0-9]

---

js在不兼容的浏览器里隐藏

很多旧的浏览器里没有内置javascript解释器，因此并不能识别Script标志，而将它们显示为字符串。

对于这种情况，可以用HTML的说明标志括起javascript语句。

如：<!--  javascript语句 -->

说明标志是不支持javascript的浏览器吧javascript语句看成说明语句，而支持javascript的浏览器则知道要忽略该说明标志，并处理其中的javascript语句。

---

for…in语句和with语句

1.for…in语句

JavaScript中还有一个特殊的for语句，就是for…in语句。它是专门用来处理有关数组和对象的循环的，例如列出对象的所有属性，操作数组的所有元素等。这个语句在C、C++中没有。
for…in语句的语法格式为：
 for (变量 in 数组或对象)
 {
    语句组；
 }
例：

<HTML>
 <HEAD>
   <TITLE>用for...in语句输出数组中的值</TITLE>
    <SCRIPT Language="JavaScript">
     var myarray=new Array();                        //用于存放求阶乘的结果
     for (var i=0;i<10;i++)                              //循环开始位置
     {           
          myarray[i]=i*10;                              //给数组元素赋值
     }
     for (i in myarray)    
     {
          document.write("数组中第",i,"个元素是：");      //输出数组元素位置
          document.write(myarray[i]+"<br>");             //输出数组中第i个元素的值
     }
     </SCRIPT>
  </HEAD>
 <BODY>
 </BODY>
</HTML>

2.with语句

通过with表达式可以使用对象的属性和方法，而不需要每一次都输入对象的名称。with表达式的语法结构如下：
 with (对象名)
 {
 语句组；
  }
例：

<HTML>
 <HEAD>
   <TITLE>用with语句操作对象属性</TITLE>
    <SCRIPT Language="JavaScript">
      with(document)
      {
          bgColor="yellow";              //改变document对象的bgColor属性
          fgColor="green"               //改变document对象的fgColor属性
          write("背景是黄色的，文字是绿色的");   
      }
    </SCRIPT>
 </HEAD>
 <BODY>
 </BODY>
</HTML>

 

---