Javascript 使用小案例

十四、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);

Javascript 使用小案例的更多相关文章

【JavaScript定时器小案例】常见的几种定时器实现的案例
[JavaScript定时器小案例]常见的几种定时器实现的案例博客说明文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 说明在日常开发 ...
javascript综合小案例，校验用户注册信息提交
完成这个综合小案例,对于html.css.javascript的大部分内容复习快结束了. 这里做一个小案例--要实现的功能,以一张图片的形式给出: 首先,写出提交数据之后进入的页面代码: <!D ...
javascript常用小案例
常用javascript小案例样式调节 //注: 这个可以控制td中的字段成行显示 #modelInfos td,th { white-space: nowrap; } //文本输入框随着内容尺寸往 ...
JavaScript基础--小案例：在网页指定位置弹出错误信息(十二)
案例分析:点击按钮后,在网页上指定区域,提示错误信息!5秒后,错误信息提示自动消失! <script languag="javascript" type="text ...
JavaScript入门小案例
笔记: <!-- JavaScript的特点: 1.基于对象和事件驱动 JavaScript把HTML页面中的每一个元素都当做一个对象来处理,并且这些对象都具有层次关系, 像一颗倒立的树,这种关 ...
JavaScript apply函数小案例
//回调函数1 function callback(a,b,c) { alert(a+b+c); } //回调函数2 function callback2(a,b) { alert(a+b); } / ...
javascript之JSON小案例，实现添加数据与清楚数据
对json应用给出一个小案例,加深一些理解: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" & ...
JavaScript小案例-阶乘！
JavaScript小案例-阶乘! 阶乘:就是像台阶一样一阶一阶的,从高阶到低阶,依次乘下来!代码超少!容易理解! // factorial 阶乘 // 如果 function factorial(n ...
JavaScript变量提升（Hoisting）的小案例
变量提升(Hoisting)的小案例执行以下代码的结果是什么?为什么? 答案这段代码的执行结果是undefined 和 2. 这个结果的原因是,变量和函数都被提升(hoisted) 到了函数体的顶 ...

随机推荐

oradebug/strace/pstack等分析数据库性能问题系列一
对于性能问题或者一些比较奇怪妖异的问题,有很多点可以着手去分析. 准备写一个系列关于用ash/dba_hist_active_sess_history,用oradebug,用linux命令strace ...
[转]Install Windows Server 2012 in VMware Workstation
本文转自:http://kb4you.wordpress.com/2012/06/28/install-windows-server-2012-in-vmware-workstation-2/ Thi ...
安卓图片Bitmap一些旋转处理
Bitmap convert(Bitmap a, int width, int height) { int w = a.getWidth(); int h = a.getHeight(); Bitma ...
高淇java300集JAVA面向对象的进阶作业
一.选择题 1.使用权限修饰符(B)修饰的类的成员变量和成员方法,可以被当前包中所有类访问,也可以被它的子类(同一个包以及不同包中的子类)访问.(选择一项) Apublic B.protected C ...
Java函数式编程和lambda表达式
为什么要使用函数式编程函数式编程更多时候是一种编程的思维方式,是种方法论.函数式与命令式编程的区别主要在于:函数式编程是告诉代码你要做什么,而命令式编程则是告诉代码要怎么做.说白了,函数式编程是基于 ...
使用publisher模式控制频繁的UI输出，避免Winform界面假死
http://www.cnblogs.com/Charltsing/p/publisher.html 最近测试task并发任务的效率与线程池的区别,发现了另外一个问题.task建立任务的速度很快,输出 ...
C&num; 中Web&period;config文件的读取与写入
asp.net2.0新添加了对web.config直接操作的功能.开发的时候有可能用到在web.config里设置配置文件,其实是可以通过程序来设置这些配置节的. asp.net2.0需要添加引用: ...
php curl函数采集网页出现gzip压缩、编码不同导致的乱码图文解决方法
方法一: header("content-type:text/html;charset=utf-8");$url="http://115.47.116.10/rest/k ...
fw-cloud-framework项目配置、启动问题
1.config组件:其配置优先级高于每个注册到同一个中心的工程的本地配置,所以在统一以dev这个 profile启动各个项目时,去config中心中找-dev结尾的各个工程名命名的文件. confi ...
zsh&colon;no matches found 问题解决
解决方法: ~/.zshrc 文件加入: setopt no_nomatch 之后,更新配置 source ~/.zshrc