2017_7_12 JSP 续

来源：互联网发布：星际边界mac 编辑：程序博客网时间：2024/06/07 09:38

不同类型的循环：

for - 循环代码块一定的次数for/in - 循环遍历对象的属性while - 当指定的条件为 true 时循环指定的代码块do/while - 同样当指定的条件为 true 时循环指定的代码块；

for循环实例：

for (var i=0; i<5; i++)  {  x=x + "The number is " + i + "<br>";  }<!DOCTYPE html><html><body><p>点击下面的按钮，将代码块循环五次：</p><button onclick="myFunction()">点击这里</button><p id="demo"></p><script>function myFunction(){var x="";for (var i=0;i<5;i++)  {  x=x + "The number is " + i + "<br>";  }document.getElementById("demo").innerHTML=x;}</script></body></html>

这里写图片描述

For/In 循环：

for/in 语句循环遍历对象的属性：实例：

<!DOCTYPE html><html><body><p>点击下面的按钮，循环遍历对象 "person" 的属性。</p><button onclick="myFunction()">点击这里</button><p id="demo"></p><script>function myFunction(){var x;var txt="";var person={fname:"Bill",lname:"Gates",age:56}; for (x in person){txt=txt + person[x];}document.getElementById("demo").innerHTML=txt;}</script></body></html>

效果图：
这里写图片描述

while 循环：

实例：

<html><body><p>点击下面的按钮，只要 i 小于 5 就一直循环代码块。</p><button onclick="myFunction()">点击这里</button><p id="demo"></p><script>function myFunction(){var x="",i=0;while (i<5)  {  x=x + "The number is " + i + "<br>";  i++;  }document.getElementById("demo").innerHTML=x;}</script></body></html>

效果图：
这里写图片描述

do/while 循环：

do/while 循环是 while 循环的变体。该循环会执行一次代码块，在检查条件是否为真之前，然后如果条件为真的话，就会重复这个循环。实例：

<html><body><p>点击下面的按钮，只要 i 小于 5 就一直循环代码块。</p><button onclick="myFunction()">点击这里</button><p id="demo"></p><script>function myFunction(){var x="",i=0;do  {  x=x + "The number is " + i + "<br>";  i++;  }while (i<5)  document.getElementById("demo").innerHTML=x;}</script></body></html>

效果图：
这里写图片描述

break跳出循环：

break 语句跳出循环后，会继续执行该循环之后的代码

continue 用于跳过循环中的一个迭代：

<html><body><p>点击下面的按钮来执行循环，该循环会跳过 i=3 的步进。</p><button onclick="myFunction()">点击这里</button><p id="demo"></p><script>function myFunction(){var x="",i=0;for (i=0;i<10;i++)  {  if (i==3)    {    continue;    }  x=x + "The number is " + i + "<br>";  }document.getElementById("demo").innerHTML=x;}</script></body></html>

效果图：
这里写图片描述

注：continue 语句（带有或不带标签引用）只能用在循环中。
break 语句（不带标签引用），只能用在循环或 switch 中。
通过标签引用，break 语句可用于跳出任何 JavaScript 代码块；

try 语句测试代码块的错误。

try 语句允许我们定义在执行时进行错误测试的代码块。

catch 语句处理错误。

catch 语句允许我们定义当 try 代码块发生错误时，所执行的代码块
JavaScript 语句 try 和 catch 是成对出现的。
实例：

<html><head><script>var txt="";function message(){try  {  adddlert("Welcome guest!");  }catch(err)  {  txt="本页有一个错误。\n\n";  txt+="错误描述：" + err.message + "\n\n";  txt+="点击确定继续。\n\n";  alert(txt);  }}</script></head><body><input type="button" value="查看消息" onclick="message()" /></body></html>

效果图：
这里写图片描述

throw 语句创建自定义错误

throw 语句允许我们创建自定义错误。
如果把 throw 与 try 和 catch 一起使用，那么您能够控制程序流，并生成自定义的错误消息。
实例：

<html><body><script>function myFunction(){try{ var x=document.getElementById("demo").value;if(x=="")    throw "值为空";if(isNaN(x)) throw "不是数字";if(x>10)     throw "太大";if(x<5)      throw "太小";}catch(err){var y=document.getElementById("mess");y.innerHTML="错误：" + err + "。";}}</script><h1>我的第一个 JavaScript 程序</h1><p>请输入 5 到 10 之间的数字：</p><input id="demo" type="text"><button type="button" onclick="myFunction()">测试输入值</button><p id="mess"></p></body></html>

效果图：
这里写图片描述

查找 HTML 元素：

通常，通过 JavaScript，您需要操作 HTML 元素。

为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：

通过 id 找到 HTML 元素

<html><body><p id="intro">你好？</p><p>本例演示 <b>getElementById</b> 方法！</p><script>x=document.getElementById("intro");document.write('<p>id="intro" 的段落中的文本是：' + x.innerHTML + '</p>');</script></body></html>

效果图：
这里写图片描述

通过标签名找到 HTML 元素

<html><body><p>Hello World!</p><div id="main"><p>The DOM is very useful.</p><p>本例演示 <b>getElementsByTagName</b> 方法。</p></div><script>var x=document.getElementById("main");var y=x.getElementsByTagName("p");document.write('id 为 "main" 的 div 中的第一段文本是：' + y[0].innerHTML);</script></body></html>

效果图：
这里写图片描述

通过类名找到 HTML 元素
提示：通过类名查找 HTML 元素在 IE 5,6,7,8 中无效。

HTML DOM 允许 JavaScript 改变 HTML 元素的内容。

在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。
注：绝不要使用在文档加载之后使用 document.write()。这会覆盖该文档

<html><body><script>document.write(Date());</script></body></html>

效果图：
这里写图片描述

改变 HTML 内容

修改 HTML 内容的最简单的方法时使用 innerHTML 属性。
实例：

<html><body><p id="p1">Hello World!</p><script>alert(ert);document.getElementById("p1").innerHTML="New text!";</script><p>上面的段落被一条 JavaScript 脚本修改了。</p></body></html>

效果：
这里写图片描述

如需改变 HTML 元素的内容，请使用这个语法：

document.getElementById(id).innerHTML=new HTML

上面的 HTML 文档含有 id=”header” 的 h1 元素我们使用 HTML DOM 来获得 id=”header” 的元素JavaScript 更改此元素的内容 (innerHTML)

改变 HTML 属性:

如需改变 HTML 元素的属性，请使用这个语法：

document.getElementById(id).attribute=new value

实例：

<html><body><img id="image" src="/i/eg_tulip.jpg" /><script>document.getElementById("image").src="/i/shanghai_lupu_bridge.jpg";</script><p>原始图片是郁金香（eg_tulip.jpg），但是已被修改为卢浦大桥（shanghai_lupu_bridge.jpg）。</p></body></html>

效果图：
这里写图片描述

HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。

我们可以在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时。如需在用户点击某个元素时执行代码，请向一个 HTML 事件属性添加 JavaScript 代码：实例：

function test(){            if(navigator.cookieEnabled==true){                alert("已启用");                document.write("欢迎来到**网页");            }else{                alert("未启用");            }        }        function testOnlaod(){            alert("来到**页面");        }        function testUnOnlaod(){            alert("来过了!");        }        function testB(){            var test = document.getElementById("test");            test.value = test.value.toUpperCase();        }        function mOver(obj){            obj.style.backgroundColor="blue";            obj.innerHTML="欢迎光临"        }        function mOut(obj){            obj.innerHTML="来，看看！"            obj.style.backgroundColor="yellow";        }        function Ouse(onc){            onc.style.backgroundColor="yellow";            onc.innerHTML="放你妈的屁"        }        function Ousp(onc){            onc.style.backgroundColor="red";            onc.innerHTML="彷徨"        }

效果图：未点击前
未点击前的图片
点击后的状态：

添加和删除节点（HTML 元素）。

创建新的 HTML 元素:

实例：

<html><body><div id="div1"><p id="p1">这是一个段落。</p><p id="p2">这是另一个段落。</p></div><script>var para=document.createElement("p");var node=document.createTextNode("这是新段落。");para.appendChild(node);var element=document.getElementById("div1");element.appendChild(para);</script></body></html>

效果图：
这里写图片描述

这段代码创建新的 p 元素：

var para=document.createElement("p");

如需向 p 元素添加文本，您必须首先创建文本节点。这段代码创建了一个文本节点：
var node=document.createTextNode("这是新段落。");

然后您必须向 p 元素追加这个文本节点：
para.appendChild(node);
最后您必须向一个已有的元素追加这个新元素。
这段代码找到一个已有的元素：
var element=document.getElementById("div1");

这段代码向这个已有的元素追加新元素：
element.appendChild(para);

删除已有的 HTML 元素

如需删除 HTML 元素，您必须首先获得该元素的父元素：
实例：

<html><body><div id="div1"><p id="p1">这是一个段落。</p><p id="p2">这是另一个段落。</p></div><script>var parent=document.getElementById("div1");var child=document.getElementById("p1");parent.removeChild(child);</script></body></html>

效果图：
这里写图片描述
这个 HTML 文档含有拥有两个子节点（两个 p 元素）的 div 元素：

<div id="div1"><p id="p1">这是一个段落。</p><p id="p2">这是另一个段落。</p></div>

找到 id=”div1” 的元素：
var parent=document.getElementById("div1");
找到 id=”p1” 的

元素：
var child=document.getElementById("p1");
从父元素中删除子元素：
parent.removeChild(child);
提示：如果能够在不引用父元素的情况下删除某个元素，就太好了。
不过很遗憾。DOM 需要清楚您需要删除的元素，以及它的父元素。
这是常用的解决方案：找到您希望删除的子元素，然后使用其 parentNode 属性来找到父元素：

var child=document.getElementById("p1");child.parentNode.removeChild(child);

evaal();

eval()函数是把里面的参数转化成代码；

实例：

function testB(){            var test = "var a='注意单引号';";            //eval()函数是把里面的参数转化成代码；            eval(test);            alert("s");            alert(a);            test="alert('指定时间触发');";            eval(test);         }

escape();

escape()函数把参数进行转码；
unescape():把转码的参数转会成字符！

function testC(){            var a="美女";            alert(a);            //escape()函数把参数进行转码；            alert(escape(a));            alert(unescape(a));        }

这里写图片描述

submit

function testE(){            var flag = true;            var test = document.getElementById("test");            var name = document.getElementById("name").value;            var pwd = document.getElementById("pwd").value;            if(name == ""){                alert("昵称不能为空");                flag = false;               }if(pwd == ""){                alert("密码不能为空");                flag = false;            }            if(flag == true){                alert("ss");                test.submit();            }        }

通过submit把当前页面的登陆提交到百度网页！

<form action="http://www.baidu.com" method="get" id="test" >        用户：        <input  type="text" id="name" />        <br/>        密码：<input type="text" id="pwd" />        <br>        <input type="button" value="ssss" onclick="testE()" />   </form>

<style>        div>p{            background-color: red;        }    </style>    <script src="jQuery/jquery-1.7.1.min.js"></script>    <script type="text/javascript">    function test(){        $.post("p").hide();                }    function testA(){        $(".p2").hide();               }    function testB(){        $("#uo").hide();               }    function testC(){        $("div p").css("background-color","blue");    }    $(document).ready(function(){        $("#button1").click(function(){            $("li").each(function(){                alert($(this).text())            });        });    });    $(document).ready(function(){        $("#bu").click(function(){            $("p").css("background-color","yellow");        });     });    function testD(){        var div = $("div");        $.each(div,function(i,div){            alert("第"+i+"个:"+$(div).text());           });    }    function testE(){        $("div,span,p.name").css("background-color","pink");    }    $(document).ready(function(){        $(".button2");    });    function testF(){        $("form~span").css("color","red");    }    $(document).ready(function(){        $("#jd").click(function(){            $("div").animate({left:'250px'});        });    });    $(document).ready(function(){        alert("确认删除？");        $("#jd p").remove();    });    </script>  </head>  <body>  <button></button>  <hr>        <div style="border:1px solid red;width:300px;height: 230px;">            <h1>今天的学习基本很有用！</h1>            <p>你好啊？</p>            <p>你好啊？</p>            <p>你好啊？</p>        </div>    <p class="p2">第一个</p>    <p class="p2">第二个</p>    <p id="uo">第三个</p>            <input type="button" value="ss" onclick="test()" />            <input type="button" value="aa" onclick="testA()" />            <input type="button" value="bb" onclick="testB()" />            <input type="button" value="cc" onclick="testC()" />            <input type="button" value="dd" onclick="testD()" />            <button id="bu">点击换掉所有p标签的背景颜色</button>            <button class="button2">动画效果</button>            <hr>            <button id="button1">遍历li标签里面的值并用警告框输出来</button>        <ul>            <li>第一名</li>            <li>第二名</li>            <li>第三名</li>        </ul>        <hr>        <div id="div1">            <h1>你是谁？</h1>            <span>我是你爹！</span>            <p class="name">我不信</p>            <p id="name">你右腹下面有两朵云形状的胎记！</p>        </div>        <input type="button" value="点击查找div里面的标签并改变其背景颜色" onclick="testE()" />        <hr/>        <form action="">            <span>我是爸爸</span>            <p>我也是爸爸</p>            <h1>我还是爸爸</h1>            <span>                <span>你是儿子</span>                <p>你也是儿子</p>            </span>            <b>我是爸爸</b>        </form>        <span>我是你兄弟</span>        <span>我是哥哥</span>        <p>我是？</p>        <input type="button" value="点我辨别"  onclick="testF()" />        <hr>        <div id="jd">            <button>简单点</button>            删除成功            <p>删除？</p>        </div>  </body>

这里写图片描述

阅读全文

0 0