1,用$(this).addClass("selected").siblings().removeClass("selected");
siblings() 获得匹配集合中每个元素的同级元素,通过选择器进行筛选是可选的。
上面的代码可以实现选中该元素后,其他同级元素可以去掉样式或类。
2,在总的CSS样式文件夹里面最好标记出哪些样式属于哪个页面,这样子比较有组织。
3,js和jquery都是放在页面的下面。
4,把图片放在json里面。
5,把元素固定在左边可以用position:fixed;。
6,用$(this).index()可以记录下this的序号。
eg:tabCon.eq($(this).index()).show().siblings(".text").hide();
7,each() 方法规定为每个匹配元素规定运行的函数。
$("button").click(function(){
$("li").each(function(){
alert($(this).text())
});
});
8,document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
当页面上有DOCTYPE的时候,值为
document.body.clientHeight = 54px
document.documentElement.clientHeight = 729px
当没有DOCTYPE时
document.body.clientHeight = 729px
document.documentElement.clientHeight = 0px
可以看出,document.body.clientHeight 和 document.documentElement.clientHeight 的区别。
9,判断是否内核,以便确定在左边的边框。
if($.browser.safari)
$('body').animate({scrollTop:a.offset().top},300);
else
$('html').animate({scrollTop:a.offset().top},300);
10,主要是记录下左边固定的边框的设置。
要先在css上设定position:fixed;
<div class="introduceBar">
<a href="#qaulity" forName="qaulity" class="leve1">我们的资质 </a>
<a href="#succCase" forName="succCase" class="leve2">成功的案例</a>
<a href="#ourView" forName="ourView" class="leve3">我们的愿景</a>
</div>
然后在script里面设置js
var bar=$(".introduceBar");
var h=document.documentElement.clientHeight||$("body").get(0).clientHeight;//获取可见区域的高度
bar.css({"top":(h-bar.height())/2+'px'});//减去自身高度,处于可见域的中间。
bar.mousedown(function(e){//点击事件
var obj=e.target;
if(obj.tagName.toLowerCase() == "a"){
var a=$('a[name="'+obj.getAttribute("forName")+'"]');
if($.browser.safari)
$('body').animate({scrollTop:a.offset().top},300);
else
$('html').animate({scrollTop:a.offset().top},300);
}else{
if(!bar.get(0).style.right || bar.get(0).style.right != "-100px"){
bar.animate({right:-100},200);
}else{
bar.animate({right:0},200);
}
}
});
});
11,在背景图中可以把需要用到的图标都放一起,在调整时只需要用background-position:来调整。
12,做门户网站时,可以不用数据库,直接把图片放在json里面就可以了,既可以修改又能增加。
13,分页:
(1),把数据导进来,然后确定数据总数和每页数量;
this.setPageInfo=function(){
var p=this.param;
var pt=p.type[p.currentType];
var d=p.type[p.currentType].data;
var pageObj=pt.pageObj;
pt.total=d.total;//数据总数
pt.pages=Math.ceil(d.total/pt.pageSize);//页数
console.info("pt.total="+pt.total+" : pt.pages="+pt.pages);
p=pt=d=pageObj=null;
};
(2),在所需要的位置增加页码的显示。
this.buildPageHtml=function(){
var p=this.param;
var pt=p.type[p.currentType];
var d=p.type[p.currentType].data;
var pageObj=pt.pageObj;
var pageStr=[];
if(pt.pages ==1 || pt.pages == 0){
pageStr.push('<span class="first">首页</span><span>|</span>');
pageStr.push('<span class="prev">上一页</span><span>|</span>');
pageStr.push('<span class="next">下一页</span><span>|</span>');
pageStr.push('<span class="last">末页</span>');
if(pt.pages ==1){
pageStr.push('<i class="pageText">'+pt.pageNo+'/'+pt.pages+'</i>');
}else{
pageStr.push('<i class="pageText">'+0+'/'+0+'</i>');
}
}else{
if(pt.pageNo == 1){
pageStr.push('<span class="first">首页</span><span>|</span>');
pageStr.push('<span class="prev">上一页</span><span>|</span>');
pageStr.push('<a class="next">下一页</a><span>|</span>');
pageStr.push('<a class="last">末页</a>');
}else if(pt.pageNo == pt.pages){
pageStr.push('<a class="first">首页</a><span>|</span>');
pageStr.push('<a class="prev">上一页</a><span>|</span>');
pageStr.push('<span class="next">下一页</span><span>|</span>');
pageStr.push('<span class="last">末页</span>');
}else{
pageStr.push('<a class="first">首页</a><span>|</span>');
pageStr.push('<a class="prev">上一页</a><span>|</span>');
pageStr.push('<a class="next">下一页</a><span>|</span>');
pageStr.push('<a class="last">末页</a>');
}
pageStr.push('<i class="pageText">'+pt.pageNo+'/'+pt.pages+'</i>');
}
pageObj.html(pageStr.join(""));
p=pt=d=pageObj=pageStr=null;
};
(3),点击事件。点击上一页,下一页,第一页,最后一页的事件
this.pageEvent=function(){
var p=this.param;
var pt=p.type[p.currentType];
var self=this;
$(".pageInfo").live("mousedown",function(e){
var target=e.target;
if(target.tagName.toLowerCase() == "a"){
//console.info($(target));
if($(target).attr("class") == "first"){
pt.pageNo=1;
}else if($(target).attr("class") == "prev"){
pt.pageNo--;
if(pt.pageNo<=0){
pt.pageNo=1
return false;
}
}else if($(target).attr("class") == "next"){
pt.pageNo++;
if(pt.pageNo>pt.pages){
pt.pageNo=pt.pages;
return false;
}
}
else if($(target).attr("class") == "last"){
pt.pageNo=pt.pages;
}
pt.bind.html('<img class="loading" src="style/img/loading_11.gif" />');
self.getData();
}
});
};
14,word-break:break-word;设置div里面的p标签自动换行