Javascrip随笔1

• isNaN：指示某个值不是数字
• 文本字符串中使用反斜杠对代码行进行换行;
• 在计算机程序中，经常会声明无值的变量。未使用值来声明的变量，其值实际上是 undefined。在执行过以下语句后，变量 carname 的值将是 undefined，如：var carname;
• windows.onload() = function(){  };使得HTML加载完成后再执行函数，和JQuery的$(document).ready(function(){  });功能类似；
• 在javascript的函数中调用arguments，得到的是传入的参数（为数组形式），arguments.length可获得其数组长度；

 <script>

 function myFunction()
 {
 　　x=document.getElementById("demo");  // 找到元素
 　　x.innerHTML="Hello JavaScript!";    // 改变内容
 }

 function changeImage()
 {
 　　element=document.getElementById('myimage')
 　　if (element.src.match("bulbon"))
   　　{
  　　 element.src="/i/eg_bulboff.gif";
   　　}
 　　else
   　　{
   　　element.src="/i/eg_bulbon.gif";
  　　 }
 }
 </script>

 <img id="myimage" onclick="changeImage()" src="/i/eg_bulboff.gif">

创建名为 cars 的数组：

 var cars = new Array();
 cars[0] = "Audi";
 cars[1] = "BMW";
 cars[2] = "Volvo";
 或者：var cars = new Array("Audi","BMW","Volvo");

JavaScript 对象

对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：

 var person = {firstname: "Bill", lastname: "Gates", id: 5566};

 var person = {
     firstname : "Bill",
     lastname  : "Gates",
     id        :  5566
 };

访问方法：name = person.lastname; name = person["lastname"];

声明变量类型：

 var carname=new String;
 var x=      new Number;
 var y=      new Boolean;
 var cars=   new Array;
 var person= new Object;

对象的方法：

 var txt = "Hello";

 txt.length=5;
 txt.indexOf();
 txt.replace();
 txt.search();
 txt.toUpperCase();

改变 HTML 样式:

 <p id="p2">Hello World!</p>

 <script>
 　　document.getElementById("p2").style.color="blue";
 </script>

鼠标事件：

• onload：当浏览器载入时的事件
• onclick：当某标签被点击时的事件
• onchange：事件常结合对输入字段的验证来使用，比如输入
• onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。
• onfocus当输入字段获得焦点时，改变其背景色。

 <script>
 function myFunction()
 {
 　　var x=document.getElementById("fname");
 　　x.value=x.value.toUpperCase();
 }
 </script>

 请输入英文字符：<input type="text" id="fname" onchange="myFunction()">
 <p>当您离开输入字段时，会触发将输入文本转换为大写的函数。</p>

• onmouseover，onmouseout：当鼠标移动到HTML事件上时和出来时厂产生的事件

 <div onmouseover="mOver(this)" onmouseout="mOut(this)" style="width:120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</div>

 <script>
 function mOver(obj)
 {
     obj.innerHTML="谢谢"
 }

 function mOut(obj)
 {
     obj.innerHTML="把鼠标移到上面"
 }
 </script>

用javacrip删除和创建标签:

 <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);

 //删除标签（需要找到父类标签然后再用removeChild（）删去）
 var parent = document.getElementById("div1");
 var child = document.getElementById("p1");
 parent.removeChild(child);

 </script>

定时器（setIntervl() 和 setTimeout()的区别）：

setInterval（function(){...},1000）;是指每隔一秒执行一次function（即会执行多次）；

setTimeout（function(){},1000）;是指一秒后才执行function（即只执行一次）；

两者都有相对应的清除函数，分别是clearInterval()和clearTimeout()；

无缝滚动图片的制作：

• <ul>标签把图片（多张）注入，设置图片显示区域范围,多出部分使用overflow：hidden设置
• offsetLeft可以获取和设置所有的关于左边距的总和
• 使用定时器setInterval()，设置每隔时间移动的距离，clearInterval()可除去定时器
• innertHTML可获取某标签内的内容