JavaScript及jQuery学习笔记(0) -

QuarterLifeForJava

浏览: 177842 次
性别:
来自: 苏州

最近访客更多访客>>

yilingjingshui

hamlzf

痴西啊

changing_24

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

JavaScript及jQuery学习笔记(0)

博客分类：

JavaScript及jQuery学习笔记

javascript jquery html

最后更新日：2014年11月17日
本章介绍了些javascript的小注意点。另外，在平时我们用的最多的就是数组和对象。
闭包小概念

function x(){
	console.log(1);
	return x;
};
function a(){
	var y = x();
	console.log(y);
	y();
};
//执行a方法将输出两个1

<html>
<head>
<script>
function test(a){
	return a + '01';
};

function b(){
	var ret = test(0011);//八进制9
	//var ret = test('0011');//表示字符串0011
	document.getElementById("a").innerHTML=ret;
	//结果并非是0.3,其它语言也有这种情况
	console.log(0.1+0.2);//System.out.println(0.1+0.2);
	console.log(+1);
	console.log([]);//Array[]
	console.log(+[]);//0
	console.log([]+1);//1
	console.log(++[[]][0]);//1
	console.log([0]);//Array[0]
	console.log([0][0]);//0
	console.log(+[0]);//0
};
</script>
</head>
<body onload="b()">
<div id="a"></div>
<body>
</html>

<html>
<head>
<script src="test.js"></script>
</head>
<body>
</body>
</html>

//example 1
//可简单的理解为b是对function的引用,加上()即让函数执行
var 
	a,
	b = function(){
		console.log(1);
	};

b();

a = b;

console.log(a);


//example 2 
//自调用匿名函数
//funtion(){}();//错误

(function(){})();//正确

(function(){}());//正确
//注:现jQuery版本1.11.1及2.1.1使用的就是上面的方式
/**
(function( global, factory ) {}(
								typeof window !== "undefined" ? window : this, 
								function( window, noGlobal ) {}
								)
);
*/

!function(){}();//正确

//example 3 
//将自调用匿名函数添加到window对象上
(function(){
	var x=10,
		y=20,
		z;
	z = x + y;
	console.log(z);
})(window);


!function(){
	console.log(window);

	/**
	①
	undefined = "I am undefined";
	console.log(undefined);//各浏览器各版本可能显示不一样,谷歌37显示为undefined
    */

	/**
	②
	var undefined = "I am undefined";
	console.log(undefined);//I am undefined
	*/

	//当①和②同时出现时,则两个值一样(是'I am undefined')
	undefined = "I am undefined";
	console.log(undefined);

	var undefined = "I am undefined";
	console.log(undefined);

}();

<html>
<head>
<script src="test.js"></script>
</head>
<body onload="test()">
</body>
</html>

function a(){
	console.log(1);
};

//通过new创建对象
var x = new a();//调用了a方法

var y = new Object();
y.x = "2";
console.log(y.x);

var z1 = Object.create([1,2,3]);
console.log(z1);

var z2 = Object.create({key1:"value1",key2:"value2"});
console.log(z2);

//原型继承创建一个对象
var a = {x:1,y:2};

function newIt(){};
newIt.prototype = a;

var b = new newIt();

b.x = 10;
b.z = 3;
console.log(b);//Object {x: 10, y: 2, z: 3}

//JavaScript权威指南中讲到:
function inherit(a){
	if(a==null) {console.log('It is null');throw TypeError();}
	if(Object.create) {console.log('It is Object.create');return Object.create(a);}
	var checkType = typeof a;
	if(checkType!=="object"&&checkType!=="function"){console.log('type error'); throw TypeError();}
	function emptyConstruct(){};
	emptyConstruct.prototype = a;
	return new emptyConstruct();
};

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a id='a' class='a' href='1.png' title='this is a picture' onclick='test();return false;'>Test Picture</a>
<img id='x' src='blank.png' alt='hello world'/>
<div id='d'></div>
<a id='b' href='a.html' accesskey='y'>click me</a><!-- Alt+Y -->
<script>
function test(){
	//var x = document.getElementsByClassName('a');
	var x = document.getElementsByTagName('a');
	var y = x[0].getAttribute('href');
	var z = document.getElementById('x');
	//getElementById得到的是对象,不是数组,因此不是z[0]
	z.setAttribute('src',y);//z.src = y;	
};
</script>
<script>
var x = document.getElementsByTagName('body');
var y = x[0].childNodes;//显示所有子节点
y = x[0].firstChild;//显示第一个节点
y = x[0].lastChild;//显示最后一个节点
/*
var y = x[0].nodeType;
for(var i in y){
	//nodeType{1:元素节点;2:属性节点;3:文本节点}
	console.log(y[i].nodeType);
}
*/
var z = document.getElementsByTagName('a');
console.log(z[0].childNodes[0].nodeValue);//Test Picture
//window.open('test.html','hello','width=300,height=300');
</script>
<script>
document.write("<p id='p'>this is p</p>");
document.getElementById('p').innerHTML = 'this is another p';
var newP = document.createElement('p');
var newDivText = document.createTextNode('this is div');
var newDiv = document.getElementById('d');
newP.appendChild(newDivText);
newDiv.appendChild(newP);
//newElement:新元素;parentElement:父元素;targetElement:目标元素
//parentElement.insertBefore(newElement,targetElement)
</script>
<script>
function t(){
	document.getElementById('b').style.background = "#"+("00000"+((Math.random()*16777215+0.5)>>0).toString(16)).slice(-6);
};
//setTimeout("t()",1000);
setInterval("t()",1000);
</script>
</body>
</html>
<!--
<p class="a" id="b"><h1>hello</h1></p>
<p>world</p>
p.a{
   //TODO
}
#b h1{
   //TODO
}
-->

其它请参考附件