• 总结


    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标签自动换行

  • 相关阅读:
    输入输出、基本运算符、流程控制
    Node学习6-fs模块
    Node学习5-events模块
    Node学习4-Buffer模块
    Node学习3-Path模块
    Node学习2-基础知识/HelloWorld/模块调用/global/process
    Node学习1-基本概念
    gulp/bower/less知识
    AngularJS学习1-基础知识
    JavaScript学习-类/原型链/class
  • 原文地址:https://www.cnblogs.com/wxw1314/p/5199836.html
Copyright © 2020-2023  润新知