不同类型的循环：
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>
904
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
