Javascript 基础知识
2014-03-04 23:20
218 查看
1.如何在一个对象上添加属性？
方法一：var b = {};
b["name"] = "test";
delete b.name 删除对象的属性
delete 运算符可以用来删除对象的属性，如歌对象包含该属性，那么该属性就会被移除。
方法二：b.name ="test";
2.如何判断一个变量是否声明？
typeof(a) =="undefined"
typeof(d) =="function" 是否为函数 也可以不用括号 typeof a 没加括号，必须要空格。
3.怎么表示为字符串? 通过双引号("")，单行号(''),反斜杠(//)
1+"1"="11"
1+'1'=11
4.Javascript 只有一个数字类型。
5.Javascript的基本数据类型？
number(数字),string（字符串）,Boolean（布尔）,undefined（未定义）,Null(空)
另外：Object（对象）
6.类和对象的区别？如何用javascript实现？
function myClass()
myClass.prototype.ID = 1;
myClass.prototype.Name = "johnson";
myClass.prototype.showMessage = function()
var obj1 = new myClass();
obj1.showMessage();
7. JavaScript 中，有多少种不同类型的循环？
两种。for 循环和 while 循环。
8.数组的类型为Object。
5.如何删除数组的成员？
var a=["12","2","3"];
delete a[0]; true 这样不对，应该a.splice(0,1); a ["2", "3"]
a [object Array][undefined, "2", "3"]
9.一个数组的的成员类型里可以有字符串，数字，方法，空。
10.NaN 数字 表示非数字，
返回True 就不是数字，可以判断一个变量是否为数字类型。 alert(typeof(a));//number
a. not a number（不是一个数字 的数字类型）
b. 程序中出现:NaN肯定进行了非法的运算操作 alert('200px'-100);
c.NaN 是false if(NaN)
d.NaN与自己都不相等 var a = Number('abc'); alert(a===a )//false;
11.parseInt() 函数可解析一个字符串，并返回一个整数。
12.Array.push(item)，push 方法把一个或多个参数item附加到一个数组的尾部。如果参数item是一个数组，它会把参数数组作为单个元素整个添加到数组中，并返回这个array的新长度值。
var new_sortArray = new Array();//实例化数组
也可以这样定义数组var new_sortArray=[];
var obj = new Object();//实例化对象
obj.id = accFind.New_sort.Id;
obj.name = accFind.New_sort.Name;
obj.typename = accFind.New_sort.LogicalName;
new_sortArray.push(obj);//将对象添加到数组中。
13. function add(){}
(1).var a = add(); 输出：undefined 未定义
(2).var a= new add(); 输出：[object] {} 对象
(3). var a = add; 输出：function add(){} 函数
14.hasOwnProperty：是用来判断一个对象是否有你给出名称的属性或对象。不过需要注意的是，此方法无法检查该对象的原型链中是否具有该属性，该属性必须是对象本身的一个成员。
16.isNaN函数 可以辨别数字和NaN
isNaN(NaN) //true
isNaN(0) //false
isNaN('abdd') //true
isNaN('0') //false
if(isNaN(str)){
alert(str + '不是数字');
}else
{
alert(str + '是数字');
//alert(isNaN('250'));//fale
因为Number(); '250'=> 250 => false
判断一个值否是可用做数字的最佳方法是使用isFinite函数，因为它会筛选掉NaN和Infinity
var isNumber = function isNumber(value)
{
reutn typeof value == 'number' && isFinite(value);
}
15.isNaN 可以辨别数字和NaN
isNaN(NaN) //true
isNaN(0) //false
isNaN('abdd') //true
isNaN('0') //false
isNaN(null); //false
isNaN(undefined); //true
isNaN(""); //false
isNaN(true) //false
isNaN(false) //false
判断一个值否是可用做数字的最佳方法是使用isFinite函数，因为它会筛选掉NaN和Infinity
var isNumber = function isNumber(value)
{
reutn typeof value == 'number' && isFinite(value);
}
if (isNaN(new_total_amount))//如果值为未定义，则置为0
{
new_total_amount = 0;
}
16.创建一个对象obj,该对象包含一个名为“name”的属性，其值为“value”,有哪些方法？
方法一：var obj = new Object(); obj["name"] = "value";
方法二：var obj = {name : "value"};
方法三: var obj = new function(){this.name="value";}
注意：var obj = new Object(); obj.prototype.name = "value";此方法不行。obj用在function上，obj不存在prototype对象
Object.prototype.name = "value";这样可以。Object是个“类”，当然可以。但ＪＳ没类这个说法。你 var obj = new Object();后的obj是个对象。function就是个“类”
17.with 语句 为一个或一组语句指定默认对象。
用法：with (<对象>) <语句>;
with 语句通常用来缩短特定情形下必须写的代码量。在下面的例子中，请注意 Math 的重复使用：
x = Math.cos(3 * Math.PI) + Math.sin(Math.LN10);
y = Math.tan(14 * Math.E);
当使用 with 语句时，代码变得更短且更易读：
with (Math) {
x = cos(3 * PI) + sin(LN10);
y = tan(14 * E);
}
18.
this 对象 返回“当前”对象。在不同的地方，this 代表不同的对象。如果在 JavaScript 的“主程序”中（不在任何 function 中，不在任何事件处理程序中）使用 this，它就代表 window 对象；如果在 with 语句块中使用 this，它就代表 with 所指定的对象；如果在事件处理程序中使用 this，它就代表发生事件的对象。
一个常用的 this 用法：
<script>
...
function check(formObj) {
...
}
...
</script>
<body ...>
...
<form ...>
...
<input type="text" ... onchange="check(this.form)">
...
</form>
...
</body>
这个用法常用于立刻检测表单输入的有效性。
19.去除列表中选择的重复值,并将多个值拼接成"1,2"这样的形式。
//定义一个对象，相当于new Object();
var orderCodeFilter = {};
for (var i = 0; i < datas.length; i++) {
var tempOrderCodeStr = datas[i].OrderCodeStr;
var key;
//找到tempOrderCodeStr最后一个字符串
var lastStr = tempOrderCodeStr.substring(tempOrderCodeStr.length - 1, tempOrderCodeStr.length);
if (lastStr == (",")) {
//去除tempOrderCodeStr最后一个字符串
key = tempOrderCodeStr.substring(0, tempOrderCodeStr.length - 1);
}else{
key = tempOrderCodeStr;
}
//判断，不存在重复的属性值
if(!orderCodeFilter[key]){
//将属性值添加到对象末尾
orderCoders.push(key);
//属性值赋给对象,
orderCodeFilter[key] = key;
}
var OrderCodeStr = orderCoders.join(",");
20. \"PayTime\":\"\\/Date(1413532617000+0800)\ 这个时间格式怎么理解？
+0800:为东八区
1413532617000：为总毫秒数
比如今天的时间为：2014/10/17 星期五
var d = new Date();
d.toDateString(); "Fri Oct 17 2014"
d.getTime();
则格式为\"PayTime\":\"\\/Date(1413535530809+0800)\
21.JS中允许“.”替换成“[]”
比如 document.getElementById("bg").style.width = '100px';
相当于document.getElementById("bg").style['width'] = '100px';
22. JS中的数据类型:数字、字符串、布尔、 函数、对象(obj（window） [](数组) {}(JSON) null(空) ) 、undefined(未定义)
23. 显示类型转换（强制类型转换）
Number();
parseInt();
parseFloat()
var num = '200.345';
if(parseInt(num) == parseFloat(num)){
alert(num +'是整数');
}else
{ alert(num +'小数');
}
24.隐式类型转换
- * / % '200' - 3 变成数字 2003
+ '200'+ 3 变成字符串 197
++ -- 变成数字
> < 数字的比较和字符串的比较
! 取反 把右边的数据类型转成布尔值
==
alert('10' > '9');//false
alert('10' > 9) true
*/
25.作用域
1） ”找一些东西“：var function 参数
a=1 所有的变量，在正式运行代码之前，都提前赋了一个值：未定义
fn1 = function fn1(){ alert(2);}
所有的函数，在正式运行代码之前，都是整个函数块。
遇到重命名的：只留一个。
变量和函数重名了，只留函数。
2）逐行解读代码
表达式：= + - * / % ++ -- ! 参数.....
表达式可以修改预解析的值.
3)题目：
alert(a);
var a = 1;
alert(a);
function a(){ alert(2);}
alert(a);
var a = 3;
alert(a);
function a() { alert(4);};
alert(a); 弹出的值为什么？
var a =1;
function fn1(){
alert(a);//undefined
var a = 2;
}
fn1();
alert(a);//1
26.
真假的问题：数据类型-数字（NaN）、字符串、布尔、函数、对象（elem、[]、{}、null）、未定义
真：非0的数字，非空字符串、true、函数，能找到的元素、[]、{}
假：0 、（'abc'-1）NaN、空字符串、false、不能找到的元素、未定义
if('')
{
alert('真');
}else
{
alert('假');
}
27.return :返回值
1)函数名+括号：fn1()==>return 后面的值；
2)所有函数默认返回值：未定义;
3)return 后面的任何代码都不执行了；
28.
//当函数的参数个数无法确定的时候：用arguments
function sum(){
var n = 0;
for(var i=0;i<arguments.length;i++){
n += arguments[i];
}
return n;
}
29.
background: url() red …… 复合样式（不要获取）
backgroundColor 单一样式（不要用来做判断）
不要有空格
不要获取未设置后的样式：不兼容
30.定时器
定时器：时间概念
var timer = setInterval(函数,毫秒); //重复执行
clearInterval(timer);//清除
var timer = setTimeout(函数，毫秒);//执行一次
31.
//x~y 之间的随机数
Math.round(Math.random()*(y-x) +x);
32.数组去重
var arr = [ 1,2,2,4,2 ];
for ( var i=0; i<arr.length; i++ ) {
for ( var j=i+1; j<arr.length; j++ ) {
if ( arr[i] == arr[j] ) {
arr.splice( j, 1 );
j--;
}
}
}
alert( arr );
33. for in (相当于C#中的foreach)
var str = '';
var num = 0;
for ( var attr in document ) {
str += num + '. ' + attr + ':' +document[attr] + '<br />';
num ++;
}
document.body.innerHTML = str;
</script>
34、 减少Dom 操作的方法
1.节点克隆 --cloneNoew。
2.访问集合 -- 尽量使用局部变量。
3.元素节点 -- 尽量用只获取元素的节点方法
4.选择器 API --利用querySelector,querySelectorAll
5. Chrome: dom方法要比innerHTML性能要好，IE浏览器
6. createDocumentFragment 的使用
7.cssText代替 oLi.style.width
35、快速排序
也可以用sort()来处理
36、函数声明与表达式
函数声明：function 函数名（）{}
函数表达式:function 函数名（可写可不写）(){} :命名函数表达式 匿名函数表达式
function aaa(){} :函数声明
var a = function aaa() {} :命名函数表达式
var a = function() {} :匿名函数表达式
{function aaa(){}}:表达式
区别：
1. 函数表达式可以直接后面加括号执行，而函数声明是不可以的。
2.函数声明可以被提前解析出来的
function aaa(){ alert(1);}();
var a = function aaa(){ alert(1)}();
~function aaa() { alert(1)}();
37、JS操作IFrame
1. contentDocument
2.contentWindow.document
3.window.parent
4.window.top
iframe 改变高度：
<input type="button" value="切换1"/>
<input type="button" value="切换2"/>
<iframe id="iframe1" src="iframe4.html" scrolling="no"></iframe>
推荐书籍 《JavaScript 语言精粹》 电子工业出版社 Douglas Crockford 著 赵泽欣 鄢学鹍译
方法一：var b = {};
b["name"] = "test";
delete b.name 删除对象的属性
delete 运算符可以用来删除对象的属性，如歌对象包含该属性，那么该属性就会被移除。
方法二：b.name ="test";
2.如何判断一个变量是否声明？
typeof(a) =="undefined"
typeof(d) =="function" 是否为函数 也可以不用括号 typeof a 没加括号，必须要空格。
3.怎么表示为字符串? 通过双引号("")，单行号(''),反斜杠(//)
1+"1"="11"
1+'1'=11
4.Javascript 只有一个数字类型。
5.Javascript的基本数据类型？
number(数字),string（字符串）,Boolean（布尔）,undefined（未定义）,Null(空)
另外：Object（对象）
6.类和对象的区别？如何用javascript实现？
function myClass()
myClass.prototype.ID = 1;
myClass.prototype.Name = "johnson";
myClass.prototype.showMessage = function()
var obj1 = new myClass();
obj1.showMessage();
7. JavaScript 中，有多少种不同类型的循环？
两种。for 循环和 while 循环。
8.数组的类型为Object。
5.如何删除数组的成员？
var a=["12","2","3"];
delete a[0]; true 这样不对，应该a.splice(0,1); a ["2", "3"]
a [object Array][undefined, "2", "3"]
9.一个数组的的成员类型里可以有字符串，数字，方法，空。
10.NaN 数字 表示非数字，
返回True 就不是数字，可以判断一个变量是否为数字类型。 alert(typeof(a));//number
a. not a number（不是一个数字 的数字类型）
b. 程序中出现:NaN肯定进行了非法的运算操作 alert('200px'-100);
c.NaN 是false if(NaN)
d.NaN与自己都不相等 var a = Number('abc'); alert(a===a )//false;
11.parseInt() 函数可解析一个字符串，并返回一个整数。
12.Array.push(item)，push 方法把一个或多个参数item附加到一个数组的尾部。如果参数item是一个数组，它会把参数数组作为单个元素整个添加到数组中，并返回这个array的新长度值。
var new_sortArray = new Array();//实例化数组
也可以这样定义数组var new_sortArray=[];
var obj = new Object();//实例化对象
obj.id = accFind.New_sort.Id;
obj.name = accFind.New_sort.Name;
obj.typename = accFind.New_sort.LogicalName;
new_sortArray.push(obj);//将对象添加到数组中。
13. function add(){}
(1).var a = add(); 输出：undefined 未定义
(2).var a= new add(); 输出：[object] {} 对象
(3). var a = add; 输出：function add(){} 函数
14.hasOwnProperty：是用来判断一个对象是否有你给出名称的属性或对象。不过需要注意的是，此方法无法检查该对象的原型链中是否具有该属性，该属性必须是对象本身的一个成员。
16.isNaN函数 可以辨别数字和NaN
isNaN(NaN) //true
isNaN(0) //false
isNaN('abdd') //true
isNaN('0') //false
if(isNaN(str)){
alert(str + '不是数字');
}else
{
alert(str + '是数字');
//alert(isNaN('250'));//fale
因为Number(); '250'=> 250 => false
判断一个值否是可用做数字的最佳方法是使用isFinite函数，因为它会筛选掉NaN和Infinity
var isNumber = function isNumber(value)
{
reutn typeof value == 'number' && isFinite(value);
}
15.isNaN 可以辨别数字和NaN
isNaN(NaN) //true
isNaN(0) //false
isNaN('abdd') //true
isNaN('0') //false
isNaN(null); //false
isNaN(undefined); //true
isNaN(""); //false
isNaN(true) //false
isNaN(false) //false
判断一个值否是可用做数字的最佳方法是使用isFinite函数，因为它会筛选掉NaN和Infinity
var isNumber = function isNumber(value)
{
reutn typeof value == 'number' && isFinite(value);
}
if (isNaN(new_total_amount))//如果值为未定义，则置为0
{
new_total_amount = 0;
}
16.创建一个对象obj,该对象包含一个名为“name”的属性，其值为“value”,有哪些方法？
方法一：var obj = new Object(); obj["name"] = "value";
方法二：var obj = {name : "value"};
方法三: var obj = new function(){this.name="value";}
注意：var obj = new Object(); obj.prototype.name = "value";此方法不行。obj用在function上，obj不存在prototype对象
Object.prototype.name = "value";这样可以。Object是个“类”，当然可以。但ＪＳ没类这个说法。你 var obj = new Object();后的obj是个对象。function就是个“类”
17.with 语句 为一个或一组语句指定默认对象。
用法：with (<对象>) <语句>;
with 语句通常用来缩短特定情形下必须写的代码量。在下面的例子中，请注意 Math 的重复使用：
x = Math.cos(3 * Math.PI) + Math.sin(Math.LN10);
y = Math.tan(14 * Math.E);
当使用 with 语句时，代码变得更短且更易读：
with (Math) {
x = cos(3 * PI) + sin(LN10);
y = tan(14 * E);
}
18.
this 对象 返回“当前”对象。在不同的地方，this 代表不同的对象。如果在 JavaScript 的“主程序”中（不在任何 function 中，不在任何事件处理程序中）使用 this，它就代表 window 对象；如果在 with 语句块中使用 this，它就代表 with 所指定的对象；如果在事件处理程序中使用 this，它就代表发生事件的对象。
一个常用的 this 用法：
<script>
...
function check(formObj) {
...
}
...
</script>
<body ...>
...
<form ...>
...
<input type="text" ... onchange="check(this.form)">
...
</form>
...
</body>
这个用法常用于立刻检测表单输入的有效性。
19.去除列表中选择的重复值,并将多个值拼接成"1,2"这样的形式。
//定义一个对象，相当于new Object();
var orderCodeFilter = {};
for (var i = 0; i < datas.length; i++) {
var tempOrderCodeStr = datas[i].OrderCodeStr;
var key;
//找到tempOrderCodeStr最后一个字符串
var lastStr = tempOrderCodeStr.substring(tempOrderCodeStr.length - 1, tempOrderCodeStr.length);
if (lastStr == (",")) {
//去除tempOrderCodeStr最后一个字符串
key = tempOrderCodeStr.substring(0, tempOrderCodeStr.length - 1);
}else{
key = tempOrderCodeStr;
}
//判断，不存在重复的属性值
if(!orderCodeFilter[key]){
//将属性值添加到对象末尾
orderCoders.push(key);
//属性值赋给对象,
orderCodeFilter[key] = key;
}
var OrderCodeStr = orderCoders.join(",");
20. \"PayTime\":\"\\/Date(1413532617000+0800)\ 这个时间格式怎么理解？
+0800:为东八区
1413532617000：为总毫秒数
比如今天的时间为：2014/10/17 星期五
var d = new Date();
d.toDateString(); "Fri Oct 17 2014"
d.getTime();
则格式为\"PayTime\":\"\\/Date(1413535530809+0800)\
21.JS中允许“.”替换成“[]”
比如 document.getElementById("bg").style.width = '100px';
相当于document.getElementById("bg").style['width'] = '100px';
22. JS中的数据类型:数字、字符串、布尔、 函数、对象(obj（window） [](数组) {}(JSON) null(空) ) 、undefined(未定义)
var a = 1;
if(){
}
typeof 判断数据类型
*/
var i = 100;
//alert(typeof i);
var s = ' miaov';
//alert(typeof s); //string
//alert(s.length);//7
//alert(s.charAt(3));'a'
var b = true;//布尔值
//alert(typeof b);//boolean
/* if(12 < 90){
}*/
//for(;false;){}
var fn = function(){ alert(1);};
//alert(fn());
//fn
function fn1(){
alert(2);
}
//alert(fn1);
//var obj = window;
//alert(typeof obj); //object 物体，东西,对象
var obj = document;
//alert(typeof obj);
obj.abc = 123;
obj.onOff = true;
//alert(document.abc);
obj.fn1 = function() { alert(1);};
//obj.fn1();
var arr = [1,2,3,4]
//alert(arr.length);
//arr[2] = 345;
//alert(arr[2]);
//arr.push(5,6,7);
//alert(arr);
//alert(typeof arr);//object
arr.abc = 999;
arr.fn1 = function() { alert(1);}
//alert(arr.abc);
//arr.fn1();
var json = { name:'maiov',age:5};
//alert(json.name + '今年'+ json.age +'岁了');
//alert(typeof json);json
var n = null;
//alert(typeof n);//object
//n.abc = 123;//不可以
//alert(n.abc);//不可以
var u;
alert(u);//typeof
//alert(typeof u);//undefined(未定义)
//表示你写的程序出问题了23. 显示类型转换（强制类型转换）
Number();
parseInt();
parseFloat()
var num = '200.345';
if(parseInt(num) == parseFloat(num)){
alert(num +'是整数');
}else
{ alert(num +'小数');
}
24.隐式类型转换
- * / % '200' - 3 变成数字 2003
+ '200'+ 3 变成字符串 197
++ -- 变成数字
> < 数字的比较和字符串的比较
! 取反 把右边的数据类型转成布尔值
==
alert('10' > '9');//false
alert('10' > 9) true
*/
25.作用域
1） ”找一些东西“：var function 参数
a=1 所有的变量，在正式运行代码之前，都提前赋了一个值：未定义
fn1 = function fn1(){ alert(2);}
所有的函数，在正式运行代码之前，都是整个函数块。
遇到重命名的：只留一个。
变量和函数重名了，只留函数。
2）逐行解读代码
表达式：= + - * / % ++ -- ! 参数.....
表达式可以修改预解析的值.
3)题目：
alert(a);
var a = 1;
alert(a);
function a(){ alert(2);}
alert(a);
var a = 3;
alert(a);
function a() { alert(4);};
alert(a); 弹出的值为什么？
1）预解析：var function 参数 ......
剔除 a= undefined
剔除 a = function a（） { alert(2);}
剔除 a = undefined
a = function a() { alert(4);}
a= 1
2) 逐行解读代码：
表达式：
alert(a); //function a() { alert(4);
var a = 1;
alert(a); //1
function a(){ alert(2);} //没改变
alert(a); // 1
var a = 3;
alert(a); //3
function a() { alert(4);};//函数声明，不能改变值。
alert(a); //3var a =1;
function fn1(){
alert(a);//undefined
var a = 2;
}
fn1();
alert(a);//1
26.
真假的问题：数据类型-数字（NaN）、字符串、布尔、函数、对象（elem、[]、{}、null）、未定义
真：非0的数字，非空字符串、true、函数，能找到的元素、[]、{}
假：0 、（'abc'-1）NaN、空字符串、false、不能找到的元素、未定义
if('')
{
alert('真');
}else
{
alert('假');
}
27.return :返回值
1)函数名+括号：fn1()==>return 后面的值；
2)所有函数默认返回值：未定义;
3)return 后面的任何代码都不执行了；
28.
//当函数的参数个数无法确定的时候：用arguments
function sum(){
var n = 0;
for(var i=0;i<arguments.length;i++){
n += arguments[i];
}
return n;
}
29.
background: url() red …… 复合样式（不要获取）
backgroundColor 单一样式（不要用来做判断）
不要有空格
不要获取未设置后的样式：不兼容
function $(v){
if(typeof v === 'function'){
window.onload = v;
}else if(typeof v === 'string')
{
return document.getElementById(v);
}
else if(typeof v === 'object')
{
return v;
}
}
getComputedStyle // IE6 7 8 不兼容(获取到的是计算机（浏览器）计算后的样式)
currentStyle //标准浏览器不兼容
function getStyle(obj,attr)
{
return obj.currentStyle ? obj.currentStyle:getComputedStyle(obj)[attr];
}30.定时器
定时器：时间概念
var timer = setInterval(函数,毫秒); //重复执行
clearInterval(timer);//清除
var timer = setTimeout(函数，毫秒);//执行一次
31.
//x~y 之间的随机数
Math.round(Math.random()*(y-x) +x);
32.数组去重
var arr = [ 1,2,2,4,2 ];
for ( var i=0; i<arr.length; i++ ) {
for ( var j=i+1; j<arr.length; j++ ) {
if ( arr[i] == arr[j] ) {
arr.splice( j, 1 );
j--;
}
}
}
alert( arr );
33. for in (相当于C#中的foreach)
var str = '';
var num = 0;
for ( var attr in document ) {
str += num + '. ' + attr + ':' +document[attr] + '<br />';
num ++;
}
document.body.innerHTML = str;
</script>
34、 减少Dom 操作的方法
1.节点克隆 --cloneNoew。
window.onload = function(){
var oUl = document.getElementById('ul1');
var str = '';
console.time('hello');
for(var i=0;i<5000;i++){
var oLi = document.createElement('li');
oLi.innerHTML = 'li';
oUl.appendChild(oLi);
}
console.timeEnd('hello');
console.time('hello');
var oLi = document.createElement('li');
oLi.innerHTML = 'li';
for(var i=0;i<5000;i++){
var newLi = oLi.cloneNode(true);
oUl.appendChild(newLi);
}
console.timeEnd('hello');
}2.访问集合 -- 尽量使用局部变量。
var doc = document; var odiv = doc.getElementById(); var oInput = doc.getElementById();
window.onload = function(){
var oDiv = document.getElementById('div1');
var L = oDiv.offsetHeight;
var T = oDiv.offsetTop;
setInterval(function(){
L ++;
T ++;
oDiv.style.left = L + 1 +'px';
oDiv.style.top = T + 1 +'px';
},30)
};3.元素节点 -- 尽量用只获取元素的节点方法
appendChild childNodes -> 元素节点,文本节点 children -> 元素节点 firstChild firstElementChild
4.选择器 API --利用querySelector,querySelectorAll
var oUl = document.getElementById('ul');
var aLi = oUl.getElementsByTagName('li');
//IE 8以下不支持
var aLi = document.querySelectorAll('#ul li');5. Chrome: dom方法要比innerHTML性能要好，IE浏览器
6. createDocumentFragment 的使用
window.onload = function(){
var oUl = document.getElementById('ul1');
var oFrag = document.createDocumentFragment();//作为缓存
console.time('hello');//Firefox测试输出的时间for(var i= 0;i<5000;i++) { var oLi = document.createElement('li'); oFrag.appendChild(oLi); } oUl.appendChild(oFrag); console.timeEnd('hello');//Firefox输出的时间 };7.cssText代替 oLi.style.width
window.onload = function(){
var oUl = document.getElementById('ul1');
console.time('hello');
for(var i =0; i < 5000;i++)
{
var oLi = document.createElement('li');
oLi.style.width = '100px';
oLi.style.height = '100px';
oLi.style.background = 'red';
//oLi.style.cssText ='width:100px;height:100px;background:red';
oUl.appendChild(oLi);
}
console.timeEnd('hello');
}35、快速排序
1.找一个基准点. 2.建立两个数组、分别存储左边和右边的数组. 3.利用递归进行下次比较.
// 快速排序
function quickSort(arr){
if(arr.length <= 1){
return arr;
}
var num = Math.floor(arr.length/2);
var numValue = arr.splice(num,1);
var left = [];
var right = [];
for(var i =0;i < arr.length;i++){
if(arr[i] < numValue){
left.push(arr[i]);
}else {
right.push(arr[i]);
}
}
return quickSort(left).concat([numValue],quickSort(right));
}
alert(quickSort([12,5,37,6,22,40]));也可以用sort()来处理
var arrWidth = ['345px','23px','10px','1000px'];
arrWidth.sort(function(a,b){
return parseInt(a) - parseInt(b);
});
//alert(arrWidth);
var arr =[1,2,3,4,5,6,7,8];
arr.sort(function(a,b){
return Math.random() - 0.5;
});
alert(arr);36、函数声明与表达式
函数声明：function 函数名（）{}
函数表达式:function 函数名（可写可不写）(){} :命名函数表达式 匿名函数表达式
function aaa(){} :函数声明
var a = function aaa() {} :命名函数表达式
var a = function() {} :匿名函数表达式
{function aaa(){}}:表达式
区别：
1. 函数表达式可以直接后面加括号执行，而函数声明是不可以的。
2.函数声明可以被提前解析出来的
function aaa(){ alert(1);}();
var a = function aaa(){ alert(1)}();
~function aaa() { alert(1)}();
37、JS操作IFrame
1. contentDocument
2.contentWindow.document
3.window.parent
4.window.top
/document 操作iframe
window.onload = function(){
var oInput = document.getElementById('input1');
var oIframe = document.getElementById('iframe1');
oInput.onclick = function(){
//oIframe.contentWindow.document.getElementById('div1').style.color = 'red'; //所有的浏览器都支持
oIframe.contentDocument.getElementById('div1').style.background = 'red'; //IE6,7不支持
};
};
var oIframe = document.createElement('iframe');
oIframe.src = 'iframe1.html';
document.body.appendChild(oIframe);
/* oIframe.onload = function()
{
alert(123);
};*/
//ie 下的iframe 的onload事件只能用绑定的形式
oIframe.attachEvent('onload',function(){
alert(123);
});iframe 改变高度：
window.onload = function(){
var aInput = document.getElementsByTagName('input');
var oIframe = document.getElementById('iframe1');
function changeHeight(){
setTimeout(function(){
oIframe.height = oIframe.contentWindow.document.body.offsetHeight;
},100);
}
changeHeight();
aInput[0].onclick = function(){
oIframe.src = 'iframe4.html';
changeHeight();
};
aInput[1].onclick = function(){
oIframe.src = 'iframe5.html';
changeHeight();
};
};<input type="button" value="切换1"/>
<input type="button" value="切换2"/>
<iframe id="iframe1" src="iframe4.html" scrolling="no"></iframe>
推荐书籍 《JavaScript 语言精粹》 电子工业出版社 Douglas Crockford 著 赵泽欣 鄢学鹍译
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JavaScript基础知识
- 【知识整理】javascript基础语法总结（9）——错误处理
- JavaScript基础知识1
- JavaScript语言基础知识11
- javascript基础知识梳理-Number与String之间的互相转换
- JavaScript基础知识点
- javascript Array对象基础知识小结
- Javascript基础知识（一）
- JavaScript基础知识之方法汇总结
- javascript基础知识大全
- JavaScript window、location对象基础知识整理
- javascript快速入门第一章基础知识(上)
- Web_JavaScript_JSON_JSON基础知识；
- Javascript & DHTML 实例编程（教程）基础知识
- Javascript基础知识题答案（前7题--符题目）
- javascript基础知识归纳
- 【javaScript】基础知识
- HTML5学习笔记 —— JavaScript基础知识
- JavaScript 基础知识
- 回顾JavaScript基础知识小结1