十四、cookie相关
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <script>
5
6 function setCookie(cname,cvalue,exdays)
7 {
8 var d = new Date();
9 d.setTime(d.getTime()+(exdays*24*60*60*1000));
10 var expires = "expires="+d.toGMTString();
11 document.cookie = cname+"="+cvalue+"; "+expires;
12 }
13
14 function getCookie(cname)
15 {
16 var name = cname + "=";
17 var ca = document.cookie.split(';');
18 for(var i=0; i<ca.length; i++)
19 {
20 var c = ca[i].trim();
21 if (c.indexOf(name)==0) return c.substring(name.length,c.length);
22 }
23 return "";
24 }
25
26 function checkCookie()
27 {
28 var user=getCookie("username");
29 if (user!="")
30 {
31 alert("Welcome again " + user);
32 }
33 else
34 {
35 user = prompt("Please enter your name:","");
36 if (user!="" && user!=null)
37 {
38 setCookie("username",user,30);
39 }
40 }
41 }
42
43 </script>
44 </head>
45 <body onload="checkCookie()">
46 </body>
47 </html>
一、创建新的HTML元素
1 <div id="div1">
2 <p id="p1">这是一个段落。</p>
3 <p id="p2">这是另一个段落。</p>
4 </div>
5
6 <script>
<!--创建新的<p>元素-->
7 var para=document.createElement("p");
<!--如果需要向p元素添加文本，必须先创建文本节点-->
8 var node=document.createTextNode("这是一个新段落。");
<!--向<p>元素之后追加这个文本节点-->
9 para.appendChild(node);
10 <!--查找添加这个元素的已有元素-->
11 var element=document.getElementById("div1");
<!--在已存在的元素后添加新元素-->
12 element.appendChild(para);
13 </script>
五、在字符串中查找字符串
1 <!DOCTYPE html>
2 <html>
3 <body>
4
5 <p id="p1">Click the button to locate where "locate" first occurs.</p>
6 <p id="p2">0</p>
7 <button onclick="myFunction()">Try it</button>
8
9 <script>
10 function myFunction()
11 {
12 var str=document.getElementById("p1").innerHTML;
13 var n=str.indexOf("locate");
14 document.getElementById("p2").innerHTML=n+1;
15 }
16 </script>
17
18 </body>
19 </html>
二、删除已有的HTML元素
1 <div id="div1">
2 <p id="p1">这是一个段落。</p>
3 <p id="p2">这是另一个段落。</p>
4 </div>
5 <script>
<!--查找要删除元素的父元素-->
6 var parent=document.getElementById("div1");
<!--查找要删除的元素-->
7 var child=document.getElementById("p1");
<!--调用removeChild方法移除子元素-->
8 parent.removeChild(child);
9 </script>
或者使用
var child=document.getElementById("p1");
child.parentNode.removeChild(child);
先找到要删除的元素然后调用其parentNode属性来找到父元素
三、使用对象构造器创建对象
1 <!DOCTYPE html>
2 <html>
3 <body>
4
5 <script>
6 function person(firstname,lastname,age,eyecolor)
7 {
8 this.firstname=firstname;
9 this.lastname=lastname;
10 this.age=age;
11 this.eyecolor=eyecolor;
12 }
13
14 myFather=new person("John","Doe",50,"blue");
15
16 document.write(myFather.firstname + " is " + myFather.age + " years old.");
17 </script>
18
19 </body>
20 </html>
四、JavaScript中的for...in循环
1 <!DOCTYPE html>
2 <html>
3 <body>
4 <p>点击下面的按钮，循环遍历对象 "person" 的属性。</p>
5 <button onclick="myFunction()">点击这里</button>
6 <p id="demo"></p>
7
8 <script>
9 function myFunction()
10 {
11 var x;
12 var txt="";
13 var person={fname:"Bill",lname:"Gates",age:56};
14
15 for (x in person)
16 {
17 txt=txt + person[x];
18 }
19
20 document.getElementById("demo").innerHTML=txt;
21 }
22 </script>
23 </body>
24 </html>
六、字符串匹配
1 <!DOCTYPE html>
2 <html>
3 <body>
4
5 <script>
6
7 var str="Hello world!";
8 document.write(str.match("world") + "<br>");
9 document.write(str.match("World") + "<br>");
10 document.write(str.match("world!"));
11
12 </script>
13
14 </body>
15 </html>
七、字符串替换
1 <!DOCTYPE html>
2 <html>
3 <body>
4
5 <p>替换 "Microsoft" 为 "W3cSchool" :</p>
6
7 <button onclick="myFunction()">点我</button>
8
9 <p id="demo">Please visit Microsoft!</p>
10
11 <script>
12 function myFunction() {
13 var str = document.getElementById("demo").innerHTML;
14 var txt = str.replace("Microsoft","W3cSchool");
15 document.getElementById("demo").innerHTML = txt;
16 }
17 </script>
18
19 </body>
20 </html>
八、正则表达式
1 <!DOCTYPE html>
2 <html>
3 <body>
4
5 <script>
6 var str = "Visit W3CSchool";
7 var patt1 = /w3cschool/i;
8 document.write(str.match(patt1));
9 </script>
10
11 </body>
12 </html>
九、正则表达式2
1 <!DOCTYPE html>
2 <html>
3 <body>
4
5 <script>
6 var patt1=new RegExp("e");
7
8 document.write(patt1.test("The best things in life are free"));
9 </script>
10
11 </body>
12 </html>
====》true
十、正则表达式3
1 <!DOCTYPE html>
2 <html>
3 <body>
4
5 <script>
6 var patt1=new RegExp("e");
7
8 document.write(patt1.exec("The best things in life are free"));
9 </script>
10
11 </body>
12 </html>
=====> e
十一、confirm确认框
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 </head>
6 <body>
7
8 <p>点击按钮，显示确认框。</p>
9
10 <button onclick="myFunction()">点我</button>
11
12 <p id="demo"></p>
13
14 <script>
15 function myFunction()
16 {
17 var x;
18 var r=confirm("按下按钮!");
19 if (r==true)
20 {
21 x="你按下了\"确定\"按钮!";
22 }
23 else
24 {
25 x="你按下了\"取消\"按钮!";
26 }
27 document.getElementById("demo").innerHTML=x;
28 }
29 </script>
30
31 </body>
32 </html>
十二、prompt提示框
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 </head>
6 <body>
7
8 <p>点击按钮查看输入的对话框。</p>
9
10 <button onclick="myFunction()">点我</button>
11
12 <p id="demo"></p>
13
14 <script>
15 function myFunction()
16 {
17 var x;
18
19 var person=prompt("请输入你的名字","Harry Potter");
20 if (person!=null && person!="")
21 {
22 x="你好 " + person + "! 今天感觉如何?";
23 document.getElementById("demo").innerHTML=x;
24 }
25 }
26 </script>
27
28 </body>
29 </html>
十三、计时器定时计划
1 <!DOCTYPE html>
2 <html>
3 <body>
4
5 <p>A script on this page starts this clock:</p>
6 <p id="demo"></p>
7
8 <script>
9 var myVar=setInterval(function(){myTimer()},1000);
10
11 function myTimer()
12 {
13 var d=new Date();
14 var t=d.toLocaleTimeString();
15 document.getElementById("demo").innerHTML=t;
16 }
17 </script>
18
19 </body>
20 </html>
十五、JavaScript和jQuery使用方式对比
1 <!--javascript方式-->
2 function myFunction()
3 {
4 var obj=document.getElementById("h01");
5 obj.innerHTML="Hello jQuery";
6 }
7 onload=myFunction;
8 <!--jQuery方式-->
9 function myFunction()
10 {
11 $("#h01").html("Hello jQuery");
12 }
13 $(document).ready(myFunction);
