Javascrip随笔1

  • isNaN:指示某个值不是数字
  • 文本字符串中使用反斜杠对代码行进行换行;
  • 在计算机程序中,经常会声明无值的变量。未使用值来声明的变量,其值实际上是 undefined。在执行过以下语句后,变量 carname 的值将是 undefined,如:var carname;
  • windows.onload() = function(){  };使得HTML加载完成后再执行函数,和JQuery的$(document).ready(function(){  });功能类似;
  • 在javascript的函数中调用arguments,得到的是传入的参数(为数组形式),arguments.length可获得其数组长度;
 1 <script>
 2 
 3 function myFunction()
 4 {
 5   x=document.getElementById("demo");  // 找到元素
 6   x.innerHTML="Hello JavaScript!";    // 改变内容
 7 }
 8 
 9 
10 function changeImage()
11 {
12   element=document.getElementById('myimage')
13   if (element.src.match("bulbon"))
14     {
15     element.src="/i/eg_bulboff.gif";
16     }
17   else
18     {
19     element.src="/i/eg_bulbon.gif";
20     }
21 }
22 </script>
23 
24 <img id="myimage" onclick="changeImage()" src="/i/eg_bulboff.gif">

 创建名为 cars 的数组

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

JavaScript 对象

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

1 var person = {firstname: "Bill", lastname: "Gates", id: 5566};
2 
3 var person = {
4     firstname : "Bill",
5     lastname  : "Gates",
6     id        :  5566
7 };

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

声明变量类型:

1 var carname=new String;
2 var x=      new Number;
3 var y=      new Boolean;
4 var cars=   new Array;
5 var person= new Object;

对象的方法:

1 var txt = "Hello";
2 
3 txt.length=5;
4 txt.indexOf();
5 txt.replace();
6 txt.search();
7 txt.toUpperCase();

改变 HTML 样式:

1 <p id="p2">Hello World!</p>
2 
3 <script>
4   document.getElementById("p2").style.color="blue";
5 </script>

鼠标事件:

  • onload:当浏览器载入时的事件
  • onclick:当某标签被点击时的事件
  • onchange:事件常结合对输入字段的验证来使用,比如输入
  • onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时,会触发 onmousedown 事件,当释放鼠标按钮时,会触发 onmouseup 事件,最后,当完成鼠标点击时,会触发 onclick 事件。
  • onfocus当输入字段获得焦点时,改变其背景色。
 1 <script>
 2 function myFunction()
 3 {
 4   var x=document.getElementById("fname");
 5   x.value=x.value.toUpperCase();
 6 }
 7 </script>
 8 
 9 请输入英文字符:<input type="text" id="fname" onchange="myFunction()">
10 <p>当您离开输入字段时,会触发将输入文本转换为大写的函数。</p>
  • onmouseoveronmouseout:当鼠标移动到HTML事件上时和出来时厂产生的事件
 1 <div onmouseover="mOver(this)" onmouseout="mOut(this)" style="120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</div>
 2 
 3 <script>
 4 function mOver(obj)
 5 {
 6     obj.innerHTML="谢谢"
 7 }
 8 
 9 function mOut(obj)
10 {
11     obj.innerHTML="把鼠标移到上面"
12 }
13 </script>

用javacrip删除和创建标签:

 1 <div id="div1">
 2 <p id="p1">这是一个段落</p>
 3 <p id="p2">这是另一个段落</p>
 4 </div>
 5 
 6 <script>
 7 //创建标签
 8 var para = document.createElement("p");
 9 var node = document.createTextNode("这是新段落。");
10 para.appendChild(node);
11 var element = document.getElementById("div1");
12 element.appendChild(para);
13 
14 //删除标签(需要找到父类标签然后再用removeChild()删去)
15 var parent = document.getElementById("div1");
16 var child = document.getElementById("p1");
17 parent.removeChild(child);
18 
19 </script>

定时器(setIntervl() 和 setTimeout()的区别):

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

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

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

无缝滚动图片的制作:

  • <ul>标签把图片(多张)注入,设置图片显示区域范围,多出部分使用overflow:hidden设置
  • offsetLeft可以获取和设置所有的关于左边距的总和
  • 使用定时器setInterval(),设置每隔时间移动的距离,clearInterval()可除去定时器
  • innertHTML可获取某标签内的内容
原文地址:https://www.cnblogs.com/zengbojia/p/7287768.html