首页 > 代码库 > 第一个项目初步完成之后的小结

第一个项目初步完成之后的小结

2024-07-19 11:49:52   215人阅读

1.设置一个div的高度用的是$("#id").css("height","200"),而不是$("#id").attr("height","200");


2.dedeCMS中分页的页面的默认样式在/templets/default/style/page.css文件的第77行到112行（从.dede_pages开始到.dede_pages .pageinfo strong结束）;


3.关于使用dedeCMS建站时导航功能的实现（以及和二级导航栏目）：
  {dede:channelartlist typeid=‘1,3,9,14,15,16,20‘ }
     <li  class=‘liUnclick‘>
       <a href=http://www.mamicode.com/"{dede:field name=‘typeurl‘/}" >{dede:field name=‘typename‘/} >           <ul class="xiala_menu" >
          {dede:channel type=‘son‘ noself=‘yes‘  }
                <li><a href=http://www.mamicode.com/‘[field:typelink/]‘>[field:typename/] >           {/dede:channel}
         </ul> 
    </li> 
{/dede:channelartlist}


4.关于给被点击的导航栏目添加样式（“首页”栏目的样式不一样，其它栏目的都一样）
  旧思路：每点击一个导航区域，就给这个点击的区域添加上被点击的样式，其它的同级就去掉这个样式，代码：
<script type="text/javascript">
$(function(){
 
        //点击之后之后添加新的样式，同级去掉点击后添加的样式
        $("#nav>li").click(function(e){
          //e.preventDefault();
          var index=$("#nav>li").index($(this));
           if(index==0){
               $(this).addClass("menu_home2");
               $("#nav>li:eq(0)").removeClass("liClicked");
           }else{
              $(this).addClass("liClicked").siblings("li").removeClass("liClicked");
              $("#nav>li:eq(0)").removeClass("menu_home2");
          }
        });
       
})
</script>
结果：如果点击的超练级跳转了，那么被点击添加的演示就添加无效，因为超链接跳转了；如果阻止超链接的跳转（添加：e.preventDefault()），那么样式可以实现，但是超链接将不能跳转，导致不能读取相应页面的数据；——最终结果:失败；


 新思路：将当前地址栏中的地址和超链接中的地址进行对比，如果匹配，就加上被点击的样式，代码：
<script type="text/javascript">
$(function(){
 
        //点击之后之后添加新的样式，同级去掉点击后添加的样式
var locationStr=window.location.href.substring(22);
$("#nav>li:gt(0)").each(function(){
  var href=http://www.mamicode.com/$(this).children("a").attr("href"); >   if(locationStr==href){
     $(this).addClass("liClicked");
     $("#nav>li:eq(0)").removeClass("menu_home2");
  }
});


})
</script>
  结果：代码量大大减少，成功实现效果。


4.关于jQuery没有执行的原因：
  a.没有引入jQuery库文件；
  b.jQuery写的有错误；
  c.元素尚未加载完全——解决方案（$(document).ready()事件）：将jQuery代码写在以下代码中：
    $(document).ready(function(){ //该函数内的所有代码都将在DOM加载完成后，页面全部内容（图片等）加载完前执行；可以多次调用；也可以将多段独立代码合并到一个中。
         //脚本
    });
    以上代码的简写形式：
    $(function(){
        //脚本    
    })；
   相关知识点：window.onload事件
   window.onload()=function(){ //必须等到页面所有的（全部的）元素都加载完成以后才会执行，不能多次调用，后面的会覆盖前面的。
       //脚本
   };
   
   
5.网页加载很忙慢的原因：Google的统计代码加载很慢，经常在浏览器状态栏里看到Google的统计代码链接在运行，而就在这个过程，导致网页被卡住了。


6.html图片热点map标签的使用：
   (1).用法：<map><area /></map>
       a.<area/>用来定义图像映射区域（映射区域：指带有超链接或者是相关事件的区域）；
       b.<area/>总是在<map></map>中间；       


  （2).定义区域点的坐标：
      a.矩形：必须使用四个数字，前两个位左上角坐标，后两个位右下角坐标：
        <area shape="rect" coords="0,0,70,20" href=http://www.mamicode.com/"1.html" /> >       b.圆形：必须使用三个数字，前两个为圆心坐标，后一个味半径长度：
        <area shape="circle" coords="10,30,,15" href=http://www.mamicode.com/"2.html" /> >       c.任意多边形：将图形每一次转折点坐标依次输入：
        <area shape="ploy" coords="232,70,285,70,300,90,250,90,200,78" href=http://www.mamicode.com/"3.html" /> >    
   (3).事件和属性：
      a.标准属性
        id, class, title, style, dir, lang, xml:lang, tabindex, accesskey
      b.事件属性
        onclick, ondblclick, onm ousedown, onm ouseup, onm ouseover, onm ousemove, onm ouseout, onkeypress, onkeydown, onkeyup, onfocus, onblur 


   (4).注意：
      a.HTML和XHTML中的差异：
        在HTML中，<area>没有结束标签；
        在XHTML中，<area>必须正确关闭；
      b.<img>中的usemap属性可引用<map>中的id或者name属性（由浏览器决定），所以我们需要同时向<map>添加id和name属性，并且两者属性值相同；
、

第一个项目初步完成之后的小结


联系
我们