1）注意js 的值类型和引用类型，特别是引用类型
值类型：number，string，boolean和undefined型数据都是值类型。值类型数据占据的空间都是固定的，存储在内存栈区
引用类型：像object型数据（function，array），他们的大小不固定，被分配到堆区，堆区大小不固定，用于存储大小不固定的对象数据，在栈区存储对象在堆区的地址。
注意：如果两个变量指向同一个堆区地址，通过一个变量改变值，另一个变量也会改变
列如：
var a = [1,2,3];
b = a;
b[0] = 0;
alert(a[0]); //返回0
2）js获取DOM元素尺寸和位置 列如如图所示：鼠标放到文本域上，显示日历控件
获取文本域距离左边的宽度=（物料名称的宽度+审核状态的宽度 + 文本域节点距离父节点左边空白的宽度）
获取文本域距离顶部的高度=（自身节点距离父节点的高度 - 滚动的高度）
主要用的位置属性如下：
1.offsetWidth 和offsetHeight //返回元素实际大小
box.offsetWidth; //200
box.offsetHeight; //200
PS：返回了元素大小，默认单位是px。如果没有设置任何CSS 的宽和高度，他会得到计算后的宽度和高度。
对于元素的实际大小，offsetWidth 和offsetHeight 理解如下：
1.增加边框，最终值会等于原本大小加上边框大小；
2.增加内边距，最终值会等于原本大小加上内边距大小；
3.增加外边据，无变化；
4.增加滚动条，无变化，不会减小；
2.offsetLeft 和offsetTop //获取当前元素相对于父元素的位置。
box.offsetLeft; //50
box.offsetTop; //50
3.scrollWidth 和scrollHeight //获取滚动内容的元素大小。
box.scrollWidth; //200
box.scrollWidth; //200
PS：对于元素的实际大小，scrollWidth 和scrollHeight 理解如下:
1.增加边框，不同浏览器有不同解释：
a) Firefox 和Opera 浏览器会增加边框的大小，220 x 220
b) IE、Chrome 和Safari 浏览器会忽略边框大小，200 x 200
c) IE 浏览器只显示它本来内容的高度，200 x 18
2.增加内边距，最终值会等于原本大小加上内边距大小，220 x 220，IE 为220 x 38
3.增加滚动条，最终值会等于原本大小减去滚动条大小，184 x 184，IE 为184 x 18
4.增加外边据，无变化。
5.增加内容溢出，Firefox、Chrome 和IE 获取实际内容高度，Opera 比前三个浏览
器获取的高度偏小，Safari 比前三个浏览器获取的高度偏大。
3)jquery hover() 修复了原生js中mouseleave事件
描述： 当鼠标放到文本域上，显示日历控件；鼠标移开，隐藏日历控件
设计的是一个日历div 和多个文本域
html：
<div>
<div>这是日历div</div>
<div>
<div><input type="text" /></div>
<div><input type="text" /></div>
......
</div>
</div>
此时如果用下面这个函数会出现一个情况，鼠标移到input上能显示日历div，但如果移到日历div上，则又会隐藏，效果是希望移到日历div上也有显示。
$("input").hover(function(){
//日历显示
}，function(){
//日历隐藏
})；
jquery的hover()修复了js中的mouseleave ()函数移动到子节点时仍然执行mouseenter ，而不是mouseleave ，，
就上面例子来说，如果要实现放到日历div上也能显示日历，则要求，日历div属于当前input的子节点
则html如下：
<div>
<div id="input">
<div><input type="text" /><div>这是日历div</div></div>
<div><input type="text" /></div>
......
</div>
</div>
但日历div设计为只有一个，不可能为一个input域都对应一个日历div
于是想出了一个办法，当鼠标放到input时，动态把日历div移动到input同一节点， 鼠标移出时也移出日历div到原来节点，这样便解决了鼠标移动到日历div上时也显示div，而移出日历div和inputdiv时则隐藏
如果前端的朋友也碰到类似的问题，可以参考下
源码如下：
$(".sc_box table td[class=puin_td_name3]").undelegate("label", "hover").delegate("label","hover",function(event){
if (-1 != this.innerHTML.indexOf('class="jCalMask"'))
return false;
if (event.type == 'mouseenter')
{
var w = $(".sc_box table tr:first td:first")[0].offsetWidth;
w += $(".sc_box table tr:first td:eq(1)")[0].offsetWidth;
w += $(this)[0].offsetLeft;
$(".calendar").css("left",w+"px");
$(this).append($(".calendar"));
curClickSource = $(this).find("input");
var input = $(curClickSource).val();
var beginDate = new Date(Util.intToDate(Util.advertList["prePurDate"].iPrePurchaseBeginDate));
var endDate = new Date(Util.intToDate(Util.advertList["prePurDate"].endDate));
if (input != "")
{
input = input.split("~");
beginDate = new Date(Util.intToDate(input[0]));
endDate = new Date(Util.intToDate(input[1]));
}
var top = $(curClickSource)[0].offsetTop;
var num = $(this).parent().parent().parent().parent().parent().parent().parent().parent().index(); //获取当前所在的tr下标
var scbox_scroll = $(".sc_box")[0].scrollTop;
var pt_scroll = $(".play_time")[0].scrollTop;
top = (num * 230) + top - pt_scroll - scbox_scroll;
myjCal(beginDate, endDate, top);
}
else if (event.type == 'mouseleave')
{
$(".calendar").hide();
$(".sc_box").prepend($(".calendar"));
}
});
4）html5 获取上传文件的类型、大小以及图片的宽高 和预览图片
html:
<form id="addWuliaoForm" action="" method="post" enctype="multipart/form-data">
<input type="file" name="uploadPic" id="uploadPic" />
<b class="btn green_button green_button_wuliao">保存</b>
</form>
js:
$("#uploadPic").change(function(){
//获取文件的类型 大小和名称
var file = this.files[0];
var name = file.name;
var size = file.size;
var type = file.type;
if ((type != "image/png"))
.....
else
{
//成功后用html5预览图片
var reader = new FileReader();
reader.onload = function(e) {
//获取图片的宽和高
var img = new Image();
img.src = e.target.result;
img.width
img.height
var node = '<img src="'+ e.target.result +'" onload="Util.judgeImgSize(this, 340, 150);">';
...
$("#xin_img").html(node);
};
reader.readAsDataURL(file);
}
});
5）jquery和js 对象互换
jq对象：$("");
jq对象 转换成 js对象：$("")[0];
js对象 转 jq对象：$(js对象);
6）jquery绑定事件 注意 unbind()
纯粹的js代码：xxx.onclick = funcion() {}，这样的代码调用多次，click事件会被覆盖；
但是jquery里的$(xxx).click(function() {}); 是累加的过程，不会覆盖 存储到一个事件队列
五、为动态生成的节点添加事件方法
1）livequery插件
1. livequery(type,fn) //为所有匹配元素绑定给定类型的事件
$("p").livequery("click",function(){
alert($(this).text());
});
2. livequery(matchedFn) //为每个匹配元素触发一个函数
$("p").livequery(function(){
$(this).addClass('newClass');
});
3. livequery(matchedFn,unmatchedFn) //为每个匹配元素触发第1个函数，如果元素不在匹配，则触发第2个
$("p").livequery(function(){
$(this).addClass('newClass');
}, function(){
$(this).removeClass('newClass');
});
//终止、停止所有livequery插件和选择器的关联
4.expire()
expire(type)
2）jquery的delegate("元素", "事件", function(){})
其解除绑定事件为undelegate("元素", "事件")
列子：
$("父元素").undelegate("子元素", "事件").delegate("子元素", "事件", function(){})
