【JQuery】知识点总结（下）
背景：上一篇文章《【JQuery】知识点总结（上）》中具体介绍了可编辑表格和横纵向菜单，不得不说，JQuery中封装的javascript库简直太强大了，有了它和没有它的效果完全不一样，看来这部分内容还挺重要的，下面介绍的例子也很有意思哦~~~
一、标签页效果
tab.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>JQuery实例-标签页效果</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link type="text/css" rel="stylesheet" href="css/tab.css" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/tab.js"></script> </head> <body> <ul id="tabfirst"> <li class="tabin">标签1</li> <li>标签2</li> <li>标签3</li> </ul> <div class="contentin contentfirst">我是内容1</div> <div class="contentfirst">我是内容2</div> <div class="contentfirst">我是内容3</div> <br /> <br /> <br /> <ul id="tabsecond"> <li class="tabin">装入完整页面</li> <li>装入部分页面</li> <li>从远程获取数据</li> </ul> <div id="contentsecond"> <img alt="装载中" src="images/img-loading.gif" /> <div id="realcontent"></div> </div> </body> </html>
tab.js
var timoutid;
$(document).ready(function(){
//找到所有的标签
/*
$("li").mouseover(function(){
//将原来显示的内容区域进行隐藏
$("div.contentin").hide();
//当前标签所对应的内容区域显示出来
});
*/
$("#tabfirst li").each(function(index){
//每一个包装li的jquery对象都会执行function中的代码
//index是当前执行这个function代码的li对应在所有li组成的数组中的索引值
//有了index的值之后，就可以找到当前标签对应的内容区域
$(this).mouseover(function(){
var liNode = $(this);
timoutid = setTimeout(function(){
//将原来显示的内容区域进行隐藏
$("div.contentin").removeClass("contentin");
//对有tabin的class定义的li清除tabin的class
$("#tabfirst li.tabin").removeClass("tabin");
//当前标签所对应的内容区域显示出来
//$("div").eq(index).addClass("contentin");
$("div.contentfirst:eq(" + index + ")").addClass("contentin");
liNode.addClass("tabin");
},300);
}).mouseout(function(){
clearTimeout(timoutid);
});
});
//在整个页面装入完成后，标签效果2的内容区域需要装入静态的html页面内容
$("#realcontent").load("TabLoad.html");
//找到标签2效果对应的三个标签，注册鼠标点击事件
$("#tabsecond li").each(function(index){
$(this).click(function(){
$("#tabsecond li.tabin").removeClass("tabin");
$(this).addClass("tabin");
if (index == 0) {
//装入静态完成页面
$("#realcontent").load("TabLoad.html");
} else if (index == 1) {
//装入动态部分页面
$("#realcontent").load("TabLoad.jsp h2");
} else if (index == 2) {
//装入远程数据（这里也是一个动态页面输出的数据）
$("#realcontent").load("TabData.jsp")
}
});
});
//对于loading图片绑定ajax请求开始和交互结束的事件
$("#contentsecond img").bind("ajaxStart",function(){
//把div里面的内容清空
$("#realcontent").html("");
//整个页面中任意ajax交互开始前，function中的内容会被执行
$(this).show();
}).bind("ajaxStop",function(){
//整个页面中任意ajax交互结束后，function中的内容会被执行
$(this).slideUp("1000");
});
});
tab.css
ul,li {
margin: 0;
padding: 0;
list-style: none;
}
#tabfirst li {
float: left;
background-color: #868686;
color: white;
padding: 5px;
margin-right: 2px;
border: 1px solid white;
}
#tabfirst li.tabin {
background-color: #6E6E6E;
border: 1px solid #6E6E6E;
}
div.contentfirst {
clear: left;
background-color: #6E6E6E;
color: white;
width: 300px;
height: 100px;
padding: 10px;
display: none;
}
div.contentin {
display: block;
}
#tabsecond li {
float: left;
background-color: white;
color: blue;
padding: 5px;
margin-right: 2px;
cursor: pointer;
}
#tabsecond li.tabin {
background-color: #F2F6FB;
border: 1px solid black;
border-bottom: 0;
z-index: 100;
position: relative;
}
#contentsecond {
width: 500px;
height: 200px;
padding: 10px;
background-color: #F2F6FB;
clear: left;
border: 1px solid black;
position: relative;
top: -1px;
}
img {
display: none;
}
效果：
本例子中的知识点：
1、一组标签用一个ul来管理，每一个标签是ul中的li；标签下面的内容就是用div来管理的。
2、跟在浮动元素（float）之后的元素会围绕着浮动元素，如果不希望有这种围绕，可以在浮动元素之后那个元素之后的那个元素上定义clear属性，来清除这种效果。
3、实现当前标签和内容区域的融合，可以通过使用相同的背景色，外加当前标签使用同颜色的边框来实现。
4、JQuery中的mouseover，mouseout方法对应标准JavaScript的onmouseover，onmouseout事件，可以处理鼠标进入和离开的事件。
5、在一个包含了多个元素的JQuery对象上执行each方法，可以注册给each方法的每个function的内容被每一个元素执行。同时这个function还可以接收一个参数，表示这个元素的索引值。JQuery中的很多方法也用到；了each。
6、eq方法可以根据索引值只得到JQuery对象中包含的多个元素中德某一个元素，并仍然返回元素对应的新JQuery对象。
7、选择器中使用eq，例如$("div:eq(1)")。
8、addClass和removeClass方法用于添加和移除元素的class定义。
9、Javascript中的setTimeout方法可以延时执行某些代码，对应的clearTimeout可以清除设定的延时操作。
10、做一个AJAX应用的时候，可以考虑现在FireFox上调试通过，然后再到其他浏览器中进行检查，并修正可能的兼容性问题。
11、cursor属性可以控制元素上的鼠标样式，pointer的属性值表示手型样式，也就是我们常见的链接鼠标样式。
12、position属性可以控制元素定位的方式，值为relative时表示相对原来的位置进行定位。可以通过设定top,left,bottom,roght的值来控制元素相对原来的位置进行移动。
13、z-index可以控制元素在页面中的层高，值越大就会在页面的层越靠前，也就会覆盖住一些z-index值较低的元素。只有position的值为relative或absolute的元素，z-index才会生效。
14、JQuery中的load方法十分强大，可以把一个指定的静态，动态页面或服务器端程序输出的数据装入到执行load方法的JQuery对象包装着的元素中。
15、load方法还支持部分装载，在装入的页面地址后面加空格，然后使用选择器，就可以把页面中符合选择器的部分装入进来。
16、被load的页面一定要是UTF-8编码的，否则装入后中文会出现乱码。
17、bind可以用在指定的节点绑定Javascript的事件或JQuery中定义的事件。对于JQuery中没有直接提供注册方法的事件，可以用这种方式注册。方法的第二个参数可以是事件执行的方法定义。
18、AjaxStart，AjaxStop对应Ajax交互开始前和结束后的事件，给某一个节点注册了这个事件后，当前页面的Ajax交互开始前和技术后，就会执行指定的方法。
二、级联下拉框效果
chainselect.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>JQuery实例-级联下拉框效果</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link type="text/css" rel="stylesheet" href="css/chainselect.css" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/chainselect.js"></script> </head> <body> <div class="loading"> <p><img src="images/data-loading.gif" alt="数据装载中" /></p> <p>数据装载中......</p> </div> <div class="car"> <span class="carname"> 汽车厂商: <select> <option value="" selected="selected">请选择汽车厂商</option> <option value="BMW">宝马</option> <option value="Audi">奥迪</option> <option value="VW">大众</option> </select> <img src="images/pfeil.gif" alt="有数据" /> </span> <span class="cartype"> 汽车类型: <select></select> <img src="images/pfeil.gif" alt="有数据" /> </span> <span class="wheeltype"> 车轮类型： <select></select> </span> </div> <div class="carimage"> <p><img src="images/img-loading.gif" alt="图片装载中" class="carloading" /></p> <p><img src="" alt="汽车图片" class="carimg"/></p> </div> </body> </html>
$(document).ready(function(){
//找到三个下拉框
var carnameSelect = $(".carname").children("select");
var cartypeSelect = $(".cartype").children("select");
var wheeltypeSelect = $(".wheeltype").children("select");
var carimg = $(".carimg");
//给三个下拉框注册事件
carnameSelect.change(function(){
//1.需要获得当前下拉框的值
var carnameValue = $(this).val();
//1.1只要第一个下拉框内容有变化，第三个下拉框都要先隐藏起来
wheeltypeSelect.parent().hide();
//1.2将汽车图片隐藏起来
carimg.hide().attr("src","");
//2.如果值不为空，则将下拉框的值传送给服务器
if (carnameValue != "") {
if (!carnameSelect.data(carnameValue)) {
$.post("ChainSelect",{keyword: carnameValue, type: "top"},function(data){
//2.1接收服务器返回的汽车类型
if (data.length != 0) {
//2.2解析汽车类型的数据，填充到汽车类型的下拉框中
cartypeSelect.html("");
$("<option value=''>请选择汽车类型</option>").appendTo(cartypeSelect);
for (var i = 0; i < data.length; i++) {
$("<option value='" + data[i] + "'>" + data[i] + "</option>").appendTo(cartypeSelect);
}
//2.2.1汽车类型的下拉框显示出
cartypeSelect.parent().show();
//2.2.2第一个下拉框后面的指示图片显示出来
carnameSelect.next().show();
} else {
//2.3没有任何汽车类型的数据
cartypeSelect.parent().hide();
carnameSelect.next().hide();
}
carnameSelect.data(carnameValue, data);
}, "json");
} else {
var data = carnameSelect.data(carnameValue);
//2.1接收服务器返回的汽车类型
if (data.length != 0) {
//2.2解析汽车类型的数据，填充到汽车类型的下拉框中
cartypeSelect.html("");
$("<option value=''>请选择汽车类型</option>").appendTo(cartypeSelect);
for (var i = 0; i < data.length; i++) {
$("<option value='" + data[i] + "'>" + data[i] + "</option>").appendTo(cartypeSelect);
}
//2.2.1汽车类型的下拉框显示出
cartypeSelect.parent().show();
//2.2.2第一个下拉框后面的指示图片显示出来
carnameSelect.next().show();
} else {
//2.3没有任何汽车类型的数据
cartypeSelect.parent().hide();
carnameSelect.next().hide();
}
}
} else {
//3.如果值为空，那么第二个下拉框所在span要隐藏起来，第一个下拉框后面的指示图片也要隐藏
cartypeSelect.parent().hide();
carnameSelect.next().hide();
}
});
cartypeSelect.change(function(){
//1.需要获得当前下拉框的值
var cartypeValue = $(this).val();
//1.1将汽车图片隐藏起来
carimg.hide().attr("src","");
//2.如果值不为空，则将下拉框的值传送给服务器
if (cartypeValue != "") {
if (!cartypeSelect.data(cartypeValue)) {
$.post("ChainSelect",{keyword: cartypeValue, type: "sub"},function(data){
//2.1接收服务器返回的汽车类型
if (data.length != 0) {
//2.2解析汽车类型的数据，填充到车轮类型的下拉框中
wheeltypeSelect.html("");
$("<option value=''>请选择车轮类型</option>").appendTo(wheeltypeSelect);
for (var i = 0; i < data.length; i++) {
$("<option value='" + data[i] + "'>" + data[i] + "</option>").appendTo(wheeltypeSelect);
}
//2.2.1车轮类型的下拉框显示出
wheeltypeSelect.parent().show();
//2.2.2第二个下拉框后面的指示图片显示出来
cartypeSelect.next().show();
} else {
//2.3没有任何汽车类型的数据
wheeltypeSelect.parent().hide();
cartypeSelect.next().hide();
}
cartypeSelect.data(cartypeValue, data);
}, "json");
} else {
var data = cartypeSelect.data(cartypeValue);
//2.1接收服务器返回的汽车类型
if (data.length != 0) {
//2.2解析汽车类型的数据，填充到车轮类型的下拉框中
wheeltypeSelect.html("");
$("<option value=''>请选择车轮类型</option>").appendTo(wheeltypeSelect);
for (var i = 0; i < data.length; i++) {
$("<option value='" + data[i] + "'>" + data[i] + "</option>").appendTo(wheeltypeSelect);
}
//2.2.1车轮类型的下拉框显示出
wheeltypeSelect.parent().show();
//2.2.2第二个下拉框后面的指示图片显示出来
cartypeSelect.next().show();
} else {
//2.3没有任何汽车类型的数据
wheeltypeSelect.parent().hide();
cartypeSelect.next().hide();
}
}
} else {
//3.如果值为空，那么第三个下拉框所在span要隐藏起来，第二个下拉框后面的指示图片也要隐藏
wheeltypeSelect.parent().hide();
cartypeSelect.next().hide();
}
});
wheeltypeSelect.change(function(){
//1.获取车轮类型
var wheeltypeValue = $(this).val();
//2.根据汽车厂商名称，汽车型号和车轮类型得到汽车图片的文件名
var carnameValue = carnameSelect.val();
var cartypeValue = cartypeSelect.val();
var carimgname = carnameValue + "_" + cartypeValue + "_" + wheeltypeValue + ".jpg";
//3.显示出loading的图片
carimg.hide();
$(".carloading").show();
//4.通过Javascript中的Image对象预装载图片
var cacheimg = new Image();
$(cacheimg).attr("src","images/" + carimgname).load(function(){
//隐藏loading图片
$(".carloading").hide();
//显示汽车图片
carimg.attr("src","images/" + carimgname).show();
});
//3.修改汽车图片节点的src的值，让汽车图片显示出来
//carimg.attr("src","images/" + carimgname).show();
//4.使汽车图片的节点显示出来
});
//给数据装载中的节点定义ajax事件，实现动画提示效果
$(".loading").ajaxStart(function(){
$(this).css("visibility","visible");
$(this).animate({
opacity: 1
},0);
}).ajaxStop(function(){
$(this).animate({
opacity: 0
},500);
});
})
chainselect.css
.loading {
width: 400px;
/*margin-left: auto;*/
/*margin-right: auto;*/
margin: 0 auto;
visibility: hidden;
}
.loading p {
text-align: center;
}
p {
margin: 0;
}
.car {
/*width: 500px;*/
/*margin: 0 auto;*/
text-align: center;
}
.carimage {
text-align: center;
}
.cartype, .wheeltype, .carloading, .carimg, .car img {
display: none;
}
效果：
本例子中的知识点：
1、img标签的alt属性要写上，在图片尚未装载进来或图片不存在时，这个属性的文字信息就会显示出来。
2、select表示下拉框，下拉框的每一项都是一个option，option开始结尾标签中的内容会显示在页面上，value属性的值则是用于在JQuery中用val方法获取并发送给服务器的。定义了selected的属性值为selected时，表示当前option被选中。
3、div元素居中显示的方法：给div设定宽度，然后margin-left和margin-right的值为auto。简写方法是margin:()auto。
4、html的p标签表示一个段落的内容，其中的内容会独占一行或者多行，后面的内容会另起一行显示。
5、为了让p众文字和图片居中，可以使用text-aligh属性，属性值为center。p标签默认有margin-top和margin-bottom的值，需要的话可以通过css清除。
6、visiblility的属性值为hidden时，元素隐藏，但是和display为none不同的是，在页面中仍然占据一定空间，只是不显示。
7、多个选择器如果有相同的属性值，可以放在一起定义，选择器之间用逗号分割。
8、change方法对应标准Javascript中德onchange事件，可以处理下拉框内容变化的事件。
9、parent方法可以获得一个节点的父节点。
10、next方法可以获得一个节点的下一个兄弟节点，对应的previous方法可以获得一个节点的上一个兄弟节点。
11、.$.post方法可以和服务器端发起post的异步请求。第一个参数是请求的服务器端地址，第二个参数是发送给服务器端的数据，参数是javaScript的对象，采用名值对应的方式表示，第三个参数是回调方法，第四个参数指示服务器端返回的数据类型，JQuery会根据这个参数帮我们进行转换。get方法只有第二个参数不同，其他几个参数用法相同。
12、Javascript中的简单对象定义方式是{key1:value1,key2:value2}
13、JSON的数据格式其实就是Javascript中的一个对象或数据定义的文本格式内容，比如{key1:value1,key2:[1,2,3]}或{key2:value2}
14、可以直接$("<option></option>")的方法来建立下拉框中的选项，然后用appendTo这样的方法加入到下拉框中。
15、attr方法可以设置或获取某一个节点的属性值。
16、AjaxStart的每一个JQuery发出的Ajax请求开始前执行，AjaxStop在JQuery队列中所有的Ajax请求结束后执行，AjaxComplete在每一个JQuery发出的Ajax请求结束后执行。
17、fadeOut和fadeIn可以实现淡出淡入的效果，参数内容和slideUp，slideDown方法类似。
18、animate方法可以实现任意的动画效果，可以控制某个css属性在某个时间内进行变化，从而达到动画的效果。
19、opacity可以改变元素的透明度，IE中使用过滤器实现，100表示完全显示，0表示完全透明，非IE浏览器使用opacity属性，1表示完全显示，0表示透明。JQuery在animate方法中屏蔽了浏览器差异，直接使用opacity就可以达到淡入淡出的效果。
20、data方法可以用于缓存数据。缓存可以提高系统的运行效率，降低服务器端的负荷。
21、可以使用Javascript中的image对象来预装载图片，这样可以知道图片何时装载完成，以便给出一些图片装载的提示信息。
22、load方法可以对应Javascript中的onload事件，本例中用于捕捉图片加载完成的事件。
三、窗口效果
window.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>JQuery实战-窗口效果</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link type="text/css" rel="stylesheet" href="css/window.css" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/window.js"></script> </head> <body> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <input type="button" value="左下角显示窗口" id="leftpop" /> <input type="button" value="屏幕中间显示窗口" id="centerpop" /> <div class="window" id="center"> <div class="title"> <img alt="关闭" src="images/close.gif" /> 我是中间显示窗口的标题栏 </div> <div class="content"> <p>我是中间显示窗口的内容区</p> <p>我是中间显示窗口的内容区</p> <p>我是中间显示窗口的内容区</p> <p>我是中间显示窗口的内容区</p> <p>我是中间显示窗口的内容区</p> <p>我是中间显示窗口的内容区</p> <p>我是中间显示窗口的内容区</p> <p>我是中间显示窗口的内容区</p> <p>我是中间显示窗口的内容区</p> <p>我是中间显示窗口的内容区</p> <p>我是中间显示窗口的内容区</p> <p>我是中间显示窗口的内容区</p> <p>我是中间显示窗口的内容区</p> <p>我是中间显示窗口的内容区</p> <p>我是中间显示窗口的内容区</p> <p>我是中间显示窗口的内容区</p> <p>我是中间显示窗口的内容区</p> <p>我是中间显示窗口的内容区</p> <p>我是中间显示窗口的内容区</p> <p>我是中间显示窗口的内容区</p> <p>我是中间显示窗口的内容区</p> </div> </div> <div class="window" id="left"> <div class="title"> <img alt="关闭" src="images/close.gif" /> 我是左边显示窗口的标题栏 </div> <div class="content"> 我是左边显示窗口的内容区 </div> </div> <div class="window" id="right"> <div class="title"> <img alt="关闭" src="images/close.gif" /> 我是右边显示窗口的标题栏 </div> <div class="content"> 我是右边显示窗口的内容区 </div> </div> </body> </html>
window.js
$(document).ready(function(){
//1.点击按钮可以在屏幕中间显示一个窗口
//2.点击按钮2可以在屏幕的左下角显示一个窗口
//3.页面装载完成后，可以在屏幕右下角飘上一个窗口，并且窗口慢慢淡出
/*
*$(".title img").click(function(){
* //关闭按钮点击之后，关闭窗口
* $(this).parent().parent().hide("slow");
*});
*/
var centerwin = $("#center");
var leftwin = $("#left");
var rightwin = $("#right");
$("#centerpop").click(function(){
//鼠标点击按钮之后，把id为center的窗口显示在页面中间
//计算位于屏幕中间的窗口的左边界和上边界的值
//浏览器可视区域的宽和高，当前窗口的宽和高
//需要考虑到横向滚动条的当前左边界值以及纵向滚动条的当前上边界值
centerwin.show("slow");
});
$("#leftpop").click(function() {
leftwin.slideDown("slow");
});
setTimeout(function () {
centerwin.mywin({left: "center", top: "center"});
leftwin.mywin({left: "left", top: "bottom"}, function(){
leftwin.slideUp("slow");
});
var windowobj = $(window);
var cwinwidth = rightwin.outerWidth(true);
var cwinheight = rightwin.outerHeight(true);
var browserwidth = windowobj.width();
var browserheight = windowobj.height();
var scrollLeft = windowobj.scrollLeft();
var scrollTop = windowobj.scrollTop();
var rleft = scrollLeft + browserwidth - cwinwidth;
if ($.browser.safari) {
rleft = rleft - 15;
}
if ($.browser.opera) {
rleft = rleft + 15;
}
if ($.browser.msie && $.browser.version.indexOf("8") >= 0) {
rleft = rleft - 20;
}
rightwin.mywin({left: "right", top: "bottom"}, function() {
rightwin.hide();
},{left: rleft, top: scrollTop + browserheight}).fadeOut(15000).dequeue();
},500);
});
/*
*$.fn.hello = function() {
* alert("hello:" + this.val());
* return this;
*}
*/
/**
*@param position表示窗口的最终位置,包含两个属性，一个是left，一个是top
*@param hidefunc表示执行窗口隐藏的方法
*@param initPos表示窗口初始位置，包含两个属性，一个是left，一个是top
*/
$.fn.mywin = function(position, hidefunc, initPos) {
if (position && position instanceof Object) {
var positionleft = position.left;
var positiontop = position.top;
var left;
var top;
var windowobj = $(window);
var currentwin = this;
var cwinwidth;
var cwinheight;
var browserwidth;
var browserheight;
var scrollLeft;
var scrollTop;
//计算浏览器当前可视区域的宽和高，以及滚动条左边界，上边界的值
function getBrowserDim() {
browserwidth = windowobj.width();
browserheight = windowobj.height();
scrollLeft = windowobj.scrollLeft();
scrollTop = windowobj.scrollTop();
}
//计算窗口真实的左边界值
function calLeft(positionleft, scrollLeft, browserwidth, cwinwidth) {
if (positionleft && typeof positionleft == "string") {
if (positionleft == "center") {
left = scrollLeft + (browserwidth - cwinwidth) / 2;
} else if (positionleft == "left") {
left = scrollLeft;
} else if (positionleft == "right") {
left = scrollLeft + browserwidth - cwinwidth;
if ($.browser.safari) {
left = left - 15;
}
if ($.browser.opera) {
left = left + 15;
}
if ($.browser.msie && $.browser.version.indexOf("8") >= 0) {
left = left - 20;
}
} else {
left = scrollLeft + (browserwidth - cwinwidth) / 2;
}
} else if (positionleft && typeof positionleft == "number") {
left = positionleft;
} else {
left = 0;
}
}
//计算窗口真实的上边界值
function calTop(positiontop, scrollTop, browserheight, cwinheight) {
if (positiontop && typeof positiontop == "string") {
if (positiontop == "center") {
top = scrollTop + (browserheight - cwinheight) / 2;
} else if (positiontop == "top") {
top = scrollTop;
} else if (positiontop == "bottom") {
top = scrollTop + browserheight - cwinheight;
if ($.browser.opera) {
top = top - 25;
}
} else {
top = scrollTop + (browserheight - cwinheight) / 2;
}
} else if (positiontop && typeof positiontop == "number") {
top = positiontop;
} else {
top = 0;
}
}
//移动窗口的位置
function moveWin() {
calLeft(currentwin.data("positionleft"), scrollLeft, browserwidth, cwinwidth);
calTop(currentwin.data("positiontop"), scrollTop, browserheight, cwinheight);
currentwin.animate({
left: left,
top: top
},600);
}
//定义关闭按钮的动作
currentwin.children(".title").children("img").click(function() {
if (!hidefunc) {
currentwin.hide("slow") ;
} else {
hidefunc();
}
});
if (initPos && initPos instanceof Object) {
var initLeft = initPos.left;
var initTop = initPos.top;
if (initLeft && typeof initLeft == "number") {
currentwin.css("left", initLeft);
} else {
currentwin.css("left", 0);
}
if (initTop && typeof initTop == "number") {
currentwin.css("top", initTop);
} else {
currentwin.css("top", 0);
}
currentwin.show();
}
cwinwidth = currentwin.outerWidth(true);
cwinheight = currentwin.outerHeight(true);
currentwin.data("positionleft", positionleft);
currentwin.data("positiontop", positiontop);
getBrowserDim();
moveWin();
var scrollTimeout;
//浏览器滚动条滚动时，移动窗口的位置
$(window).scroll(function(){
//判断一下当前窗口是否可见
if (!currentwin.is(":visible")) {
return;
}
clearTimeout(scrollTimeout);
scrollTimeout = setTimeout(function(){
getBrowserDim();
moveWin();
},300);
});
//浏览器大小改变时，移动窗口的位置
$(window).resize(function(){
//判断一下当前窗口是否可见
if (!currentwin.is(":visible")) {
return;
}
getBrowserDim();
moveWin();
});
//返回当前对象，以便可以级联的执行其他方法
return currentwin;
}
}
window.css
.window {
background-color: #D0DEF0;
width: 250px;
/*padding: 2px;*/
margin: 5px;
/*控制窗口绝对定位*/
position: absolute;
display: none;
}
.content {
height: 150px;
background-color: white;
border: 2px solid #D0DEF0;
padding: 2px;
/*控制区域内容超过指定高度和宽度时显示滚动条*/
overflow: auto;
}
.title {
padding: 4px;
font-size: 14px;
}
.title img {
width: 14px;
height: 14px;
float: right;
cursor: pointer;
}
效果：
本例子中的知识点：
1、页面中模拟的窗口可以通过html的div标签来实现，窗口中的标题栏和内容区域可以再分别用一个div来表示。
2、让一组div看起来是窗口的样式有很多种方法，比如可以设定整个窗口使用一种背景色，然后内容区域使用另一种背景色，并且给窗口设置一定的padding值（或者是内容区域设置边框），已达到内容区域和标题栏以后窗口外边的对比，从而看起来是一个窗口效果。
3、正确理解float的效果，实际上会影响到后面的一个元素和float的元素之间的显示效果，因此这个例子中如果html代码中img位于标题栏的最后时，float:right导致图片跑到了内容区域的最右边。只有在html里面见img放到标题栏文字的前面，这个时候float:right才会使图片刚好位于标题栏的最右边。
4、overflow属性值为auto时，当内容区域很多超过了定义的高度和宽度时，就会显示滚动条。
5、position属性值absolute时，元素将在页面中绝对定位，默认情况是相对页面的左上角进行定位，默认情况是相对页面的左上角进行定位。如果祖先节点中有position:relative的定义，则相当这个祖先节点的左上角进行定位。
6、浏览器和可视区域的宽和高可以通过$(window).width()和$(window).height()的方式来获得。
7、浏览器滚动条的左边界和上边界可以通过$(window).scrollLeft()和$(window).scrollTop()来获得。
8、窗口定位到屏幕可视区域的正中间，需要用屏幕可视区域的宽减去窗口的宽，然后除以2，再加上滚动条的左边界值，才能获得窗口需要的左边界值；上边界值也是同理的方法获得。
9、插件的编写方法：$.fn.myplugin = function(){//mycode}，方法中的this表示的是执行这个方法的JQuery对象，注意方法应该在最后return this，以保证其他jquery方法可以级联操作。
10、instanceof可以用于判断一个变量是不是一个某个js类的实例，比如判断是不是一个Object，用法obj instanceof Object.
11、typeof可以用于判断一个变量的数据类型。
12、scroll可以用于注册浏览器或某一个节点的滚动条滚动所需要执行的操作。
13、resize可以用于注册浏览器大小改变时所需要执行的操作。
14、jquery提供的事件操作在注册的时候是增量的。比如说我有两段代码都是$(window).scroll(function(){}),第二段的function内容不会覆盖到第一段，而是在scroll时，两段代码都被执行。
15、animate方法可以对left,top值进行一定时间内的变化，达到动画的效果。
16、dequeue方法可以从动画队列的开头移除一个动画效果，并立即执行它。这样可以保证队列后面的动画不用等待开头的动画，也能执行。
17、is方法可以用来判断一个对象是否满足is方法参数中的jquery选择器。
18、：visible选择器可以用于获取页面中的可见元素。
19、浏览器间的差异导致在document.ready中的代码获得浏览器可视区域宽高以及滚动条left，top的值不一定都是正确的，因此我们需要保证在这个方法完成之后再来获得这些值。
20、$.browser可以用于判断浏览器的类型，判断的方法可以是$.browser.msie == true,还可以使用噢乖的值包括$.browser.opera $.browser.safari $browser.mozilla
21、$.browser.version可以判断浏览器的版本号，例如$.browser.version.indexOf("8")。
四、学习心得
1、这些都是一些比较零散的知识，整理碎乱的知识点，积累经验也是学习中的必经之路。
2、为了满足客户的需求，我们就需要多多的了解需求。