JavaScript摘要笔记 JavaScript引入声明: JavaScript与Java的异同 常见操作 DOM节点操作 JavaScript对象 对象构造函数 常用函数

在HTML文件中书写一段js: 一般在头部或body开头引入

<script type="text/javascript"> //注意此处的javascript不是驼峰命名
……
</script>   

引入外部js:
<script type="text/javascript" src="JQuery.js" charset="gbk"></script>

 <script type="text/javascript"> //注意此处的javascript不是驼峰命名
……
 </script>     

书写应该另起一段,而不是包含在<script></script>之内。


JavaScript与Java的异同

  1. JavaScript是弱变量语言,所以没有int,String等等,只需要用var,任何类型都能够接收,包括null。
  2. 也正是因为弱变量的特性,JavaScript里的函数也就没有返回类型一说了。类比数据类型被var代替,函数的写法就是用function关键字代替数据类型以及括号内参数不带类型。例:function myMethod(parm1,parm2){

}
3. 流程控制完全一样!包括:do while,for,while,switch case等等

所以js可以看做是简化版的java语言!


常见操作

获取DOM:

  • document.getElementById() 通过id获取,唯一
  • getElementsByTagName() 通过标签名获取,可能多个
  • getElementsByClassName() 通过类名获取,可能多个

注意:getElementById("")引号内不加 # ,同理,getElementByClassName("")引号内也不加 .

弹出提示:

alert(" ") 该函数是window对象常用函数,还有其他的,写在后面。

书写页面:

document.write("<p>helloworld</p>")

document.write()一般只在页面加载完成之前使用。
当页面加载完成之后,文档流会自动关闭,就不要用document.write()了
页面加载完成之后再使用document.write()就会重新创建一个新的页面。
这个新页面的源代码就是document.write()输出的字符串。
页面加载完成之后,要对页面内容改变和增加时应该用 innerHTML 和 appendChild()


DOM节点操作

一般顺序:

  • 创建标签,
  • 填充标签内容(各种标签用法不一,所以直接看代码吧)
  • 将标签插入到合适位置
    funtion addDOM(){
    	
		//p标签
		//装配节点
    	var p=document.createElement("p");
    	var node=document.createTextNode("说点什么");
    	p.appendChild(node);

    	var parent=document.getElementById("parent");
    	var son=document.getElementById("son");

    	//在parent元素里头的son元素的前面添加p
    	parent.insertBefore(p,son)
    	//在parent元素里头的son元素后面添加p
    	parent.appendChild(p)


		//ul li标签
		var d = document.getElementById("d"); 
	    var ul = document.createElement("ul");
	    d.appendChild(ul); 
	    var li = document.createElement("li");
	    ul.appendChild(li);
	    li.innerHTML ="helloworld";
	    li.id = "abc";
	    ul.removeChild(li);  //使用removeChild()可以删除ul里面的li标签

		//input标签
		var inputElement = document.createElement('input');  
        inputElement.type = "text";  
        inputElement.name = "answer";  
    
    }

JavaScript对象

创建新对象有两种不同的方法:

  • 定义并创建对象的实例
  • 使用函数来定义对象,然后创建新的对象实例
    //创建JavaScript对象
    var p = new Object();

	//添加属性及初始化
    p.name="kaka";
    p.age=12;
    
    function myMethod(a){
    	alert(a)
    }
	//添加函数属性及初始化
    p.method=myMethod;
    p.method("a在这儿");

	//删除属性的两种方式
	delete p.name;
	p.name=undefined;

Java里面不存在函数型属性,JavaScript因为弱变量特性,故有。


对象构造函数

//添加类
function person(a,b){
	//添加属性
	this.name=a;
	this.age=b;

	function speak(say){
		alert(say);
	}
	
	//添加函数型属性
	this.func=speak;
	
}

var p=new person("kaka",12);
alert(p.name);
p.func("我是卡卡,我今年12岁了。");

常用函数

全局函数:

全局函数不属于任何一个内置对象。
JavaScript包含7个全局函数:

  1. escape( )
  2. eval( )
  3. isFinite( )
  4. isNaN( )
  5. parseFloat( )
  6. parseInt( )
  7. unescape( )
  • escape(string)
    函数可对字符串进行编码,这样就可以在所有的计算机上读取该字符串。已编码的 string 的副本。其中某些字符被替换成了十六进制的转义序列。
    该方法不会对 ASCII 字母和数字进行编码,也不会对下面这些 ASCII 标点符号进行编码: * @ - _ + . / 。其他所有的字符都会被转义序列替换。

  • ** unescape(string) **
    函数可对通过 escape() 编码的字符串进行解码。

  • eval(string)
    函数可计算某个字符串,并执行其中的的 JavaScript 代码。

  • **isNaN(x) **
    函数用于检查其参数是否是非数字值。如果 x 是特殊的非数字值 NaN(或者能被转换为这样的值),返回的值就是 true。如果 x 是其他值,则返回 false。
    如果把 NaN 与任何值(包括其自身)相比得到的结果均是 false,所以要判断某个值是否是 NaN,不能使用 == 或 === 运算符。正因为如此,isNaN() 函数是必需的。

  • isFinite(number)
    函数用于检查其参数是否是无穷大。
    如果 number 是有限数字(或可转换为有限数字),那么返回 true。否则,如果 number 是 NaN(非数字),或者是正、负无穷大的数,则返回 false。

  • parseFloat(string)
    函数可解析一个字符串,并返回一个浮点数。
    该函数指定字符串中的首个字符是否是数字。如果是,则对字符串进行解析,直到到达数字的末端为止,然后以数字返回该数字,而不是作为字符串。

  • parseInt(string, radix)
    函数可解析一个字符串,并返回一个整数。

window对象常用函数及事件:

alert();
confirm()
prompt()
setTimeOut()执行一次
setinterval()执行多次
Window.onload()发生在文档全部加载完毕时候
Window.onresize()发生在窗口大小变化时候

调用方式有两种。
方式一:直接给函数赋值

window.onreaize=function(){
	alert("尺寸已改变")	
}

方式二:在body加载时调用

 <body onresize="alert('尺寸已改变')"> 

相关参数:

Window.setTimeOut("myMethod()",5000);
Window.setinterval("myMethod()",1000);
Window.open("http://www.baidu.com");

完整文档见 http://blog.sina.com.cn/s/blog_6cc9c79b01013ddo.html