JavaScript及jQuery学习笔记(0)
最后更新日：2014年11月17日
本章介绍了些javascript的小注意点。另外，在平时我们用的最多的就是数组和对象。
其它请参考附件
本章介绍了些javascript的小注意点。另外，在平时我们用的最多的就是数组和对象。
<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
}
-->
其它请参考附件