ArthurXF从业10年的CTO,受上海非凡学院邀请,进行PHP,CSS,FREEBSD等网络技能授课培训,有意向参加的,请联系.
<SCRIPT LANGUAGE="JavaScript">
var s = "网页可见区域宽 :"+ document.body.clientWidth;
s += "\r\n网页可见区域高:"+ document.body.clientHeight;
s += "\r\n网页可见区域高:"+ document.body.offsetHeight +" (包括边线的宽)";
s += "\r\n网页正文全文宽:"+ document.body.scrollWidth;
s += "\r\n网页正文全文高:"+ document.body.scrollHeight;
s += "\r\n网页被卷去的高:"+ document.body.scrollTop;
s += "\r\n网页被卷去的左:"+ document.body.scrollLeft;
s += "\r\n网页正文部分上:"+ window.screenTop;
s += "\r\n网页正文部分左:"+ window.screenLeft;
s += "\r\n屏幕分辨率的高:"+ window.screen.height;
s += "\r\n屏幕分辨率的宽:"+ window.screen.width;
s += "\r\n屏幕可用工作区高度:"+ window.screen.availHeight;
s += "\r\n屏幕可用工作区宽度:"+ window.screen.availWidth;
alert(s);
</SCRIPT>
var s = "网页可见区域宽 :"+ document.body.clientWidth;
s += "\r\n网页可见区域高:"+ document.body.clientHeight;
s += "\r\n网页可见区域高:"+ document.body.offsetHeight +" (包括边线的宽)";
s += "\r\n网页正文全文宽:"+ document.body.scrollWidth;
s += "\r\n网页正文全文高:"+ document.body.scrollHeight;
s += "\r\n网页被卷去的高:"+ document.body.scrollTop;
s += "\r\n网页被卷去的左:"+ document.body.scrollLeft;
s += "\r\n网页正文部分上:"+ window.screenTop;
s += "\r\n网页正文部分左:"+ window.screenLeft;
s += "\r\n屏幕分辨率的高:"+ window.screen.height;
s += "\r\n屏幕分辨率的宽:"+ window.screen.width;
s += "\r\n屏幕可用工作区高度:"+ window.screen.availHeight;
s += "\r\n屏幕可用工作区宽度:"+ window.screen.availWidth;
alert(s);
</SCRIPT>
JavaScript的数组排序函数 sort方法,默认是按照ASCII 字符顺序进行升序排列。
arrayobj.sort(sortfunction);
参数:sortFunction
可选项。是用来确定元素顺序的函数的名称。如果这个参数被省略,那么元素将按照 ASCII 字符顺序进行升序排列。
sort 方法将 Array 对象进行适当的排序;在执行过程中并不会创建新的 Array 对象。
如果为 sortfunction 参数提供了一个函数,那么该函数必须返回下列值之一:
- 负值,如果所传递的第一个参数比第二个参数小。
- 零,如果两个参数相等。
- 正值,如果第一个参数比第二个参数大。
以上的方法在一维的排序还是很方便的,但像SQL语句中的ORDER BY 一样的多键值排序由怎么做呢?
多维数组的多键值排序,则需要复杂一些,但不需要用循环解决。实际解决的道理是一样的 。
数字:
以下的例子是将数字的多维数组按照第5列,第9列,第3列的顺序排序,像SQL语句中的ORDER BY col5,col9,col7。数字的时候可以直接两个项目相减,以结果作为返回值即可。
<script language=javascript>
var myArray = new Array();
for(var i=0;i<10;i++ ){
myArray[i]=new Array();
myArray[i][0]=Math.floor(Math.random()*10);

myArray[i][1]=Math.floor(Math.random()*10);
myArray[i][2]=Math.floor(Math.random()*10);
myArray[i][3]=Math.floor(Math.random()*10);
myArray[i][4]=Math.floor(Math.random()*10);
myArray[i][5]=Math.floor(Math.random()*10);
myArray[i][6]=Math.floor(Math.random()*10);
myArray[i][7]=Math.floor(Math.random()*10);
myArray[i][8]=Math.floor(Math.random()*10);
}
myArray.sort( function(x, y) {
return (x[0]==y[0])?((x[4]==y[4])?(x[8]-y[8]):(x[4]-y[4])):(x[2]-y[2])
});
for(var i=0;i<myArray.length;i++ ){
document.write(myArray[i].join(",") + "<br/>");
}
</script>
字符:
字符的时候sortFunction中的项目不能像数字一样直接相减,需要调用str1.localeCompare( str2 )方法来作比较,从而满足返回值。以下是多维数组的第1,2列作排序的情况。
function sortFunction(array) {
return array.sort( function(x, y) {return (x[0]==y[0])?(x[1].localeCompare(y[1])):(x[0].localeCompare(y[0]))});
}因此arrayObject.sort( sortFunction )的排序功能还是很强大的,终于能够实现了SQL语句中的ORDER BY 一样的功能。
非IE
var e=document.getElementById( "e ")
e.setAttribute( "onclick ", "dosomething(); ")
IE
var e=document.getElementById( "e ")
e.onclick=function() {dosomething();};
var e=document.getElementById( "e ")
e.setAttribute( "onclick ", "dosomething(); ")
IE
var e=document.getElementById( "e ")
e.onclick=function() {dosomething();};
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量
以上主要指IE之中,FireFox差异如下:
IE6.0、FF1.06+:
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5:
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height
(需要提一下:CSS中的margin属性,与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量
以上主要指IE之中,FireFox差异如下:
IE6.0、FF1.06+:
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5:
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height
(需要提一下:CSS中的margin属性,与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)
数组直接量
--------------------------------------------------------------------------------
var arr;
arr = ['AA', 'BB', 'CC'];
alert(arr.toLocaleString()); //AA, BB, CC
arr = [11, 22, 33];
alert(arr.toLocaleString()); //11.00, 22.00, 33.00
/* 数组元素可以是任意类型, 包括数组本身 */
arr = ['AA', 'BB', 123];
alert(arr.toLocaleString()); //AA, BB, 123.00
alert(arr[0]); //AA
alert(arr[1]); //BB
alert(arr[2]); //123
/* 可先站定维数, 以后赋值 */
arr = [ , , ];
arr[0] = 11;
arr[1] = 22;
arr[2] = 33;
alert(arr.toLocaleString()); //11.00, 22.00, 33.00
/* 先给个空数组, 再指定维数 */
arr = [];
alert(arr.length); //0
arr.length = 3;
arr[0] = 11;
arr[1] = 22;
arr[2] = 33;
alert(arr.toLocaleString()); //11.00, 22.00, 33.00
/* 可用 length 属性改变数组的大小 */
arr = [1,2,3,4,5,6];
arr.length = 2;
alert(arr.toLocaleString()); //1.00, 2.00
--------------------------------------------------------------------------------
数组对象的三种建立方法
--------------------------------------------------------------------------------
var arr;
arr = new Array(11, '22', true);
alert(arr.toLocaleString()); //11.00, 22, true
arr = new Array(3);
arr[0] = 11;
arr[1] = '22';
arr[2] = true;
alert(arr.toLocaleString()); //11.00, 22, true
arr = new Array();
arr.length = 3;
arr[0] = 11;
arr[1] = '22';
arr[2] = true;
alert(arr.toLocaleString()); //11.00, 22, true
--------------------------------------------------------------------------------
join : 数组到字符串
--------------------------------------------------------------------------------
var arr, str;
arr = new Array('a', 'b', 1, 2, 3);
str = arr.join();
alert(str); //a,b,1,2,3
/* 可指定分隔符 */
str = arr.join(' * ');
alert(str); //a * b * 1 * 2 * 3
--------------------------------------------------------------------------------
reverse、sort : 倒置与排序
--------------------------------------------------------------------------------
var arr;
arr = new Array('c', 'd', 'e', 'a', 'b');
arr.reverse();
alert(arr.toLocaleString()); //b, a, e, d, c
arr.sort();
alert(arr.toLocaleString()); //a, b, c, d, e
--------------------------------------------------------------------------------
concat : 添加返回新数组
--------------------------------------------------------------------------------
var arr;
arr = [1, 2, 3]
arr = arr.concat(4, 5);
alert(arr.join()); //1, 2, 3, 4, 5
--------------------------------------------------------------------------------
push、pop : 从尾部添加与删除; push 返回新长度, pop 返回被删除的元素
--------------------------------------------------------------------------------
var arr;
arr = [1, 2, 3, 4, 5]
arr.pop();
alert(arr.join()); //1,2,3,4
arr.push(7, 8, 9);
alert(arr.join()); //1,2,3,4,7,8,9
arr.push(0, ['A', 'B']);
alert(arr.join()); //1,2,3,4,7,8,9,0,A,B
arr.pop();
alert(arr.join()); //1,2,3,4,7,8,9,0
arr.pop();
alert(arr.join()); //1,2,3,4,7,8,9
--------------------------------------------------------------------------------
unshift、shift : 从开始插入与删除; unshift 返回新长度, shift 返回被删除的元素
--------------------------------------------------------------------------------
var arr;
arr = [1, 2, 3]
arr.unshift(5, 6);
alert(arr.join()); //5,6,1,2,3
arr.shift();
arr.shift();
alert(arr.join()); //1,2,3
arr.unshift([5,6,7,8]);
alert(arr.join()); //5,6,7,8,1,2,3
arr.shift();
alert(arr.join()); //1,2,3
--------------------------------------------------------------------------------
splice : 删除、替换、插入; 如果有删除则返回被删除元素的数组
--------------------------------------------------------------------------------
var arr;
arr = [1, 2, 3, 4, 5, 6, 7, 8]
arr.splice(4, 3); //从第 4 个(0起)开始删除 3 个
alert(arr.join()); //1, 2, 3, 4, 8
arr.splice(3, 3, 'A', 'B', 'C'); //从第 3 个(0起)开始替换 3 个
alert(arr.join()); //1, 2, 3, A, B, C
arr.splice(3, 0, 7, 8, 9); //从第 3 个(0起)开始插入 3 个; 插入时第二个参数给 0
alert(arr.join()); //1, 2, 3, 7, 8, 9, A, B, C
--------------------------------------------------------------------------------
slice : 提取子数组; 返回新数组
--------------------------------------------------------------------------------
var arr;
arr = [1, 2, 3, 4, 5, 6, 7, 8]
arr = arr.slice(2, 5);
alert(arr.join()); //3,4,5
/* 参数为负表示从后面数 */
arr = [1, 2, 3, 4, 5, 6, 7, 8]
arr = arr.slice(2, -2);
alert(arr.join()); //3,4,5,6
arr = [1, 2, 3, 4, 5, 6, 7, 8]
arr = arr.slice(-3, -1);
alert(arr.join()); //6,7
--------------------------------------------------------------------------------
toString、valueOf
--------------------------------------------------------------------------------
var arr;
arr = [1, 2, 3, 'A', 'B', 'C']
alert(arr); //1,2,3,A,B,C
alert(arr.toString()); //1,2,3,A,B,C
alert(arr.valueOf()); //1,2,3,A,B,C
alert(arr.toLocaleString()); //1.00, 2.00, 3.00, A, B, C
--------------------------------------------------------------------------------
遍历与模拟的多维数组
--------------------------------------------------------------------------------
var arr;
arr = [[1,2,3], [4,5,6], [7,8,9]];
alert(arr[1][1]); //5
arr = new Array(new Array(1,2,3), new Array(4,5,6), new Array(7,8,9));
alert(arr[1][1]); //5
alert(arr) //1,2,3,4,5,6,7,8,9
for (i=0; i document.write(arr[i] + ''); //1,2,3 / 4,5,6 / 7,8,9
}
arr = [1,2,3,4,5,6,7,8,9];
for (i in arr) {
document.write(arr[i] + '
'); //1 / 2 / 3 / 4 / 5 / 6 / 7 / 8 / 9
}
arr = new Array([1,2,3], [4,5,6], [7,8,9]);
for (i in arr) {
document.write(arr[i] + '
'); //1,2,3 / 4,5,6 / 7,8,9
}
for (i in arr) for (j in arr[i])
document.write(arr[i][j] + '
'); //1 / 2 / 3 / 4 / 5 / 6 / 7 / 8 / 9
--------------------------------------------------------------------------------
var arr;
arr = ['AA', 'BB', 'CC'];
alert(arr.toLocaleString()); //AA, BB, CC
arr = [11, 22, 33];
alert(arr.toLocaleString()); //11.00, 22.00, 33.00
/* 数组元素可以是任意类型, 包括数组本身 */
arr = ['AA', 'BB', 123];
alert(arr.toLocaleString()); //AA, BB, 123.00
alert(arr[0]); //AA
alert(arr[1]); //BB
alert(arr[2]); //123
/* 可先站定维数, 以后赋值 */
arr = [ , , ];
arr[0] = 11;
arr[1] = 22;
arr[2] = 33;
alert(arr.toLocaleString()); //11.00, 22.00, 33.00
/* 先给个空数组, 再指定维数 */
arr = [];
alert(arr.length); //0
arr.length = 3;
arr[0] = 11;
arr[1] = 22;
arr[2] = 33;
alert(arr.toLocaleString()); //11.00, 22.00, 33.00
/* 可用 length 属性改变数组的大小 */
arr = [1,2,3,4,5,6];
arr.length = 2;
alert(arr.toLocaleString()); //1.00, 2.00
--------------------------------------------------------------------------------
数组对象的三种建立方法
--------------------------------------------------------------------------------
var arr;
arr = new Array(11, '22', true);
alert(arr.toLocaleString()); //11.00, 22, true
arr = new Array(3);
arr[0] = 11;
arr[1] = '22';
arr[2] = true;
alert(arr.toLocaleString()); //11.00, 22, true
arr = new Array();
arr.length = 3;
arr[0] = 11;
arr[1] = '22';
arr[2] = true;
alert(arr.toLocaleString()); //11.00, 22, true
--------------------------------------------------------------------------------
join : 数组到字符串
--------------------------------------------------------------------------------
var arr, str;
arr = new Array('a', 'b', 1, 2, 3);
str = arr.join();
alert(str); //a,b,1,2,3
/* 可指定分隔符 */
str = arr.join(' * ');
alert(str); //a * b * 1 * 2 * 3
--------------------------------------------------------------------------------
reverse、sort : 倒置与排序
--------------------------------------------------------------------------------
var arr;
arr = new Array('c', 'd', 'e', 'a', 'b');
arr.reverse();
alert(arr.toLocaleString()); //b, a, e, d, c
arr.sort();
alert(arr.toLocaleString()); //a, b, c, d, e
--------------------------------------------------------------------------------
concat : 添加返回新数组
--------------------------------------------------------------------------------
var arr;
arr = [1, 2, 3]
arr = arr.concat(4, 5);
alert(arr.join()); //1, 2, 3, 4, 5
--------------------------------------------------------------------------------
push、pop : 从尾部添加与删除; push 返回新长度, pop 返回被删除的元素
--------------------------------------------------------------------------------
var arr;
arr = [1, 2, 3, 4, 5]
arr.pop();
alert(arr.join()); //1,2,3,4
arr.push(7, 8, 9);
alert(arr.join()); //1,2,3,4,7,8,9
arr.push(0, ['A', 'B']);
alert(arr.join()); //1,2,3,4,7,8,9,0,A,B
arr.pop();
alert(arr.join()); //1,2,3,4,7,8,9,0
arr.pop();
alert(arr.join()); //1,2,3,4,7,8,9
--------------------------------------------------------------------------------
unshift、shift : 从开始插入与删除; unshift 返回新长度, shift 返回被删除的元素
--------------------------------------------------------------------------------
var arr;
arr = [1, 2, 3]
arr.unshift(5, 6);
alert(arr.join()); //5,6,1,2,3
arr.shift();
arr.shift();
alert(arr.join()); //1,2,3
arr.unshift([5,6,7,8]);
alert(arr.join()); //5,6,7,8,1,2,3
arr.shift();
alert(arr.join()); //1,2,3
--------------------------------------------------------------------------------
splice : 删除、替换、插入; 如果有删除则返回被删除元素的数组
--------------------------------------------------------------------------------
var arr;
arr = [1, 2, 3, 4, 5, 6, 7, 8]
arr.splice(4, 3); //从第 4 个(0起)开始删除 3 个
alert(arr.join()); //1, 2, 3, 4, 8
arr.splice(3, 3, 'A', 'B', 'C'); //从第 3 个(0起)开始替换 3 个
alert(arr.join()); //1, 2, 3, A, B, C
arr.splice(3, 0, 7, 8, 9); //从第 3 个(0起)开始插入 3 个; 插入时第二个参数给 0
alert(arr.join()); //1, 2, 3, 7, 8, 9, A, B, C
--------------------------------------------------------------------------------
slice : 提取子数组; 返回新数组
--------------------------------------------------------------------------------
var arr;
arr = [1, 2, 3, 4, 5, 6, 7, 8]
arr = arr.slice(2, 5);
alert(arr.join()); //3,4,5
/* 参数为负表示从后面数 */
arr = [1, 2, 3, 4, 5, 6, 7, 8]
arr = arr.slice(2, -2);
alert(arr.join()); //3,4,5,6
arr = [1, 2, 3, 4, 5, 6, 7, 8]
arr = arr.slice(-3, -1);
alert(arr.join()); //6,7
--------------------------------------------------------------------------------
toString、valueOf
--------------------------------------------------------------------------------
var arr;
arr = [1, 2, 3, 'A', 'B', 'C']
alert(arr); //1,2,3,A,B,C
alert(arr.toString()); //1,2,3,A,B,C
alert(arr.valueOf()); //1,2,3,A,B,C
alert(arr.toLocaleString()); //1.00, 2.00, 3.00, A, B, C
--------------------------------------------------------------------------------
遍历与模拟的多维数组
--------------------------------------------------------------------------------
var arr;
arr = [[1,2,3], [4,5,6], [7,8,9]];
alert(arr[1][1]); //5
arr = new Array(new Array(1,2,3), new Array(4,5,6), new Array(7,8,9));
alert(arr[1][1]); //5
alert(arr) //1,2,3,4,5,6,7,8,9
for (i=0; i
}
arr = [1,2,3,4,5,6,7,8,9];
for (i in arr) {
document.write(arr[i] + '
'); //1 / 2 / 3 / 4 / 5 / 6 / 7 / 8 / 9
}
arr = new Array([1,2,3], [4,5,6], [7,8,9]);
for (i in arr) {
document.write(arr[i] + '
'); //1,2,3 / 4,5,6 / 7,8,9
}
for (i in arr) for (j in arr[i])
document.write(arr[i][j] + '
'); //1 / 2 / 3 / 4 / 5 / 6 / 7 / 8 / 9




2014/01/14 13:40

