您的位置：首页 > Web前端 > JavaScript

Javascript 使用小案例

2016-07-19 11:22 591 查看 


十四、cookie相关

1 <!DOCTYPE html>
<html>
<head>
<script>

function setCookie(cname,cvalue,exdays)
{
var d = new Date();
d.setTime(d.getTime()+(exdays*24*60*60*1000));
var expires = "expires="+d.toGMTString();
document.cookie = cname+"="+cvalue+"; "+expires;
}

function getCookie(cname)
{
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++)
{
var c = ca[i].trim();
if (c.indexOf(name)==0) return c.substring(name.length,c.length);
}
return "";
}

function checkCookie()
{
var user=getCookie("username");
if (user!="")
{
alert("Welcome again " + user);
}
else
{
user = prompt("Please enter your name:","");
if (user!="" && user!=null)
{
setCookie("username",user,30);
}
}
}

</script>
</head>
<body onload="checkCookie()">
</body>
</html>




一、创建新的HTML元素

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

<script>
<!--创建新的<p>元素-->
var para=document.createElement("p");
<!--如果需要向p元素添加文本，必须先创建文本节点-->
var node=document.createTextNode("这是一个新段落。");
<!--向<p>元素之后追加这个文本节点-->
para.appendChild(node);
<!--查找添加这个元素的已有元素-->
var element=document.getElementById("div1");
<!--在已存在的元素后添加新元素-->
element.appendChild(para);
</script>


五、在字符串中查找字符串

1 <!DOCTYPE html>
<html>
<body>

<p id="p1">Click the button to locate where "locate" first occurs.</p>
<p id="p2">0</p>
<button onclick="myFunction()">Try it</button>

<script>
function myFunction()
{
var str=document.getElementById("p1").innerHTML;
var n=str.indexOf("locate");
document.getElementById("p2").innerHTML=n+1;
}
</script>

</body>
</html>



二、删除已有的HTML元素

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
<script>
<!--查找要删除元素的父元素-->
var parent=document.getElementById("div1");
<!--查找要删除的元素-->
var child=document.getElementById("p1");
<!--调用removeChild方法移除子元素-->
parent.removeChild(child);
</script>

或者使用
var child=document.getElementById("p1");
child.parentNode.removeChild(child);
先找到要删除的元素然后调用其parentNode属性来找到父元素


三、使用对象构造器创建对象

1 <!DOCTYPE html>
<html>
<body>

<script>
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}

myFather=new person("John","Doe",50,"blue");

document.write(myFather.firstname + " is " + myFather.age + " years old.");
</script>

</body>
</html>


四、JavaScript中的for...in循环

1 <!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>


六、字符串匹配

1 <!DOCTYPE html>
<html>
<body>

<script>

var str="Hello world!";
document.write(str.match("world") + "<br>");
document.write(str.match("World") + "<br>");
document.write(str.match("world!"));

</script>

</body>
</html>


七、字符串替换

1 <!DOCTYPE html>
<html>
<body>

<p>替换 "Microsoft" 为 "W3cSchool" :</p>

<button onclick="myFunction()">点我</button>

<p id="demo">Please visit Microsoft!</p>

<script>
function myFunction() {
var str = document.getElementById("demo").innerHTML;
var txt = str.replace("Microsoft","W3cSchool");
document.getElementById("demo").innerHTML = txt;
}
</script>

</body>
</html>


八、正则表达式

1 <!DOCTYPE html>
<html>
<body>

<script>
var str = "Visit W3CSchool";
var patt1 = /w3cschool/i;
document.write(str.match(patt1));
</script>

</body>
</html>


九、正则表达式2

1 <!DOCTYPE html>
<html>
<body>

<script>
var patt1=new RegExp("e");

document.write(patt1.test("The best things in life are free"));
</script>

</body>
</html>

====》true


十、正则表达式3

1 <!DOCTYPE html>
<html>
<body>

<script>
var patt1=new RegExp("e");

document.write(patt1.exec("The best things in life are free"));
</script>

</body>
</html>

=====>  e


十一、confirm确认框

1 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<p>点击按钮，显示确认框。</p>

<button onclick="myFunction()">点我</button>

<p id="demo"></p>

<script>
function myFunction()
{
var x;
var r=confirm("按下按钮!");
if (r==true)
{
x="你按下了\"确定\"按钮!";
}
else
{
x="你按下了\"取消\"按钮!";
}
document.getElementById("demo").innerHTML=x;
}
</script>

</body>
</html>


十二、prompt提示框

1 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>

<p>点击按钮查看输入的对话框。</p>

<button onclick="myFunction()">点我</button>

<p id="demo"></p>

<script>
function myFunction()
{
var x;

var person=prompt("请输入你的名字","Harry Potter");
if (person!=null && person!="")
{
x="你好 " + person + "! 今天感觉如何?";
document.getElementById("demo").innerHTML=x;
}
}
</script>

</body>
</html>


十三、计时器定时计划

1 <!DOCTYPE html>
<html>
<body>

<p>A script on this page starts this clock:</p>
<p id="demo"></p>

<script>
var myVar=setInterval(function(){myTimer()},1000);

function myTimer()
{
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
}
</script>

</body>
</html>


十五、JavaScript和jQuery使用方式对比

1 <!--javascript方式-->
function myFunction()
{
var obj=document.getElementById("h01");
obj.innerHTML="Hello jQuery";
}
onload=myFunction;
<!--jQuery方式-->
function myFunction()
{
$("#h01").html("Hello jQuery");
}
$(document).ready(myFunction);

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航