文档章节

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

笨小熊
 笨小熊
发布于 2014/08/25 23:46
字数 1023
阅读 179
收藏 9
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="{dede:field name='typeurl'/}" >{dede:field name='typename'/}</a><!---->
          <ul class="xiala_menu" >
          {dede:channel type='son' noself='yes'  }
                <li><a href='[field:typelink/]'>[field:typename/]</a></li> <!---->
          {/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=$(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="1.html" />
      b.圆形:必须使用三个数字,前两个为圆心坐标,后一个味半径长度:
        <area shape="circle" coords="10,30,,15" href="2.html" />
      c.任意多边形:将图形每一次转折点坐标依次输入:
        <area shape="ploy" coords="232,70,285,70,300,90,250,90,200,78" href="3.html" />
   
   (3).事件和属性:
      a.标准属性
        id, class, title, style, dir, lang, xml:lang, tabindex, accesskey
      b.事件属性
        onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup, onfocus, onblur 


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


© 著作权归作者所有

笨小熊
粉丝 13
博文 152
码字总数 68269
作品 0
深圳
高级程序员
私信 提问
利用 gulp 解决 rollup 中 typescript 与 babel 冲突

最近在用 lerna 重构一个项目,其中一个 package 是使用 rollup 作为脚手架的,需要使用 ts 对其进行重写,但是发现在使用 rollup 时,ts 只能被编译为 js,而之后却不能用 babel 编译为 es...

Yzz
09/14
0
0
Beaglebone Black教程项目1闪烁板载LED

Beaglebone Black教程项目1闪烁板载LED 项目1闪烁板载LED 当设置完你的Beaglebone Black的时候,可能早就非常期待你的第一个项目了。下面就来满足大家的愿望,当然,这个项目可不是惊天动地的...

大学霸
2016/03/30
280
0
5月工作小结 - 开发注意事项

工作这东西,还得经常回顾。理理自己做对的事、做错的事,保持大脑清洁。 软件开发过程中,从需求到实现到维护,应该表现出来的素质: 1. 充分理解业务需求 我们不仅仅是实施者,也是设计者。...

阿历Ali
2018/06/02
0
0
工作小结

1.顶板离层仪的PCB板已送去加工,元器件清点好交给了刘总管准备购买。 2.顶板离层仪程序初步方案: (1)标定:将电位器拧至0标低点,将电位器拧至10K标高点,然后电压值对应到电位器旋转弧度...

feifei1029
2015/06/27
0
0
Android技能树 — Rxjava取消订阅小结(1):自带方式

前言: Android技能树系列: Android基础知识 Android技能树 — 动画小结 Android技能树 — View小结 Android技能树 — Activity小结 Android技能树 — View事件体系小结 Android技能树 — ...

青蛙要fly
2018/05/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Rabbit MQ 延迟消息发送

为什么使用延迟消息? 不同于同步消息,有些业务场景下希望可以实现延迟一定时间再消费消息。 典型的场景有微信、支付宝等第三方支付回调接口,会在用户支付后3秒、5秒、30秒等等时间后向应用...

兜兜毛毛
7分钟前
2
0
【0918】正则介绍_grep

【0918】正则介绍_grep 9.1 正则介绍_grep上 9.2 grep中 9.3 grep下 一、正则介绍 正则是一串有规律的字符串,它使用单个字符串来描述或匹配一系列符合某个语法规则的字符串。 二、grep工具 ...

飞翔的竹蜻蜓
37分钟前
4
0
为什么要在网站中应用CDN加速?

1. 网页加载速度更快 在网站中使用CDN技术最直接的一个好处就是它可以加快网页的加载速度。首先,CDN加速的内容分发是基于服务器缓存的,由于CDN中缓存了不少数据,它能够给用户提供更快的页...

云漫网络Ruan
今天
8
0
亚玛芬体育(Amer Sports)和信必优正式启动合作开发Movesense创新

亚玛芬体育和信必优正式启动合作开发Movesense创新,作为亚玛芬体育的完美技术搭档,信必优利用Movesense传感器技术为第三方开发移动应用和服务。 Movesense基于传感器技术和开放的API,测量...

symbiochina88
今天
4
0
创龙TI AM437x ARM Cortex-A9 + Xilinx Spartan-6 FPGA核心板规格书

SOM-TL437xF是一款广州创龙基于TI AM437x ARM Cortex-A9 + Xilinx Spartan-6 FPGA芯片设计的核心板,采用沉金无铅工艺的10层板设计,适用于高速数据采集和处理系统、汽车导航、工业自动化等领...

Tronlong创龙
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部