日期:2014-05-16  浏览次数:20423 次

js工作一些总结

?

?

1.多行替换

?

s = s.replace(/\\s/gm,"");

?

2. js中数学函数

?

var d = Math.round(x / 20); // 四舍五入取整数

?

2.ajax取得返回结果,回调函数中的参数就是返回结果

?

$.ajax({
type: "POST",
url: url,
data: data,
dataType: "xml",
success: function(xml ){ show(xml) }
});

?

3.数组的创建

?

var ? myArray ? = ? new ? Array(1,2,3,4,) ? //普通方式
var ? myArray ? = ? new ? Array(20) ? //20个元素
var ? myArray ? = ? [1,2,3,4,5,6] ? //数组直接量

?

在JS中是不能一次把所有的元素初始化为0的,是undefined

?

4.和位置有关的操作

?

A. 对事件的响应

?

要响应:

// 窗口大小的变化,如,最大化

$(window).resize( function() { /** do somethins**/})

// 页面上下的移动

$(window).scroll( function() {

???? var bodyTop = 0;?
??? ? if (typeof window.pageYOffset != 'undefined') {?
??? ????? bodyTop = window.pageYOffset;?
??? ? } else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {?
??? ????? bodyTop = document.documentElement.scrollTop;?
??? ? }?
??? ? else if (typeof document.body != 'undefined') {?
??? ????? bodyTop = document.body.scrollTop;?
??? ? }

/** do somethins**/})

// 鼠标在组件上的移动事件

$(window).mousemove( function(mouse) {? var x = mouse.clientX; /** do somethins**/})

?

B. 对要定位的<div>要加的属性

?

$("div").css("position","absolute");? // 定位方式

$("div").css("top","20px");? // 定位到哪里

$("div").css("z-index","2000"); // 在页面的上面

?

C. 查找list中当前元素的索引位置

?

var i = rankObjs.index(this);

?

?

D. 一些效果(遮罩效果)

?

遮罩效果原理:

?

? a. 创建一个<div>,大小是整个document大小

? b. z-index属性变大(超过页面)

? c. <div>背影是gray,并<div>有半透明效果

?

代码如下:

?

// shade class
function ShadeObject(){
	//
}
// shade property
ShadeObject.container = "#discuss";
ShadeObject.shadeHtml = '<div id="shade" style="padding:0px;position:absolute;background-color:gray;margin:0px;"></div>';
ShadeObject.initFlag = false;
ShadeObject.shade = null;

ShadeObject.prototype.setContainer = function(container){
	ShadeObject.container = container;
}

ShadeObject.init = function(container){
	$(document).ready(function () {
		$(ShadeObject.container).after(ShadeObject.shadeHtml);
		var shade = $("#shade");
		var windy = $(window).width();
		var windx = $(document).height();
		ShadeObject.shade = shade;
		shade.css("filter","alpha(opacity=50)");
		shade.css("-moz-opacity","0.5");
		shade.css("opacity","0.5");
		// size
		shade.css("top","0px");
		shade.css("left","0px");
		shade.css("height",windx + "px");
		shade.css("width",windy + "px");
	});
}

ShadeObject.prototype.show = function(){
	if(ShadeObject.initFlag == false){
		ShadeObject.init();
		ShadeObject.initFlag = true;
	}
	ShadeObject.shade.fadeIn("normal");
}

ShadeObject.prototype.hide = function(){
	if(ShadeObject.initFlag == false){
		ShadeObject.init();
		ShadeObject.initFlag = true;
	}
	ShadeObject.shade.fadeOut("normal");
}
?

?

E.? 对于对象,使用C++中的方法,最好有一个init()和destory()方法

?