• jquery如何实现点击标题收缩下面的内容


    jquery如何实现点击标题收缩下面的内容

    一、总结

    一句话总结:怎么做复杂前端任务,先把样式(最简单)做出来,然后在写js。

    1、如何取jquery集合中的某个索引号的元素?

    不是get(),是eq(),get(index)取得是dom对象,eq(index)取得才是jquery对象。

    2、主体内容和侧边栏是怎么实现左右排版(侧边栏是怎么让它实现显示隐藏的)?

    用的是width而不是margin和padding

    3、js 怎么触发a标签里的href链接?

    通过window的open方法跳到链接

    document.location=href;这个才更好用

    4、如何实现高度随文档变动?

    都是window的,scrollTop+height

    二、jquery如何实现点击标题收缩下面的内容

    1、js中的正则是不加引号的,php中的是要加的

    var s_index=null;
    var s_str=this.innerHTML.trim();
    s_str=s_str.replace(/[^u4e00-u9fa5]/gi,'');
    alert(s_str);

    这样是对的,如果'/[^u4e00-u9fa5]/gi'加引号是错的

    2、如何取jquery集合中的某个索引号的元素?

    不是get(),是eq(),get(index)取得是dom对象,eq(index)取得才是jquery对象。

    3、测试的时候总结函数是在目录函数之后执行,那么放到cnblog里面的时候顺序也要是这样

     1 <!-- 一、总结折叠 -->
     2 <script type="text/javascript">
     3     $('#cnblogs_post_body h2').each(function(i){
     4         //1、获取索引号
     5         summary_index=1;
     6         var s_str=this.innerHTML.trim();
     7         s_str=s_str.replace(/[^u4e00-u9fa5]/gi,'');
     8         if(s_str=='一总结'){
     9             summary_index=i;
    10             return false;
    11         }
    12     });
    13     //2、将索引号对应的孩子全部放到一个总结div中去
    14     if(true){
    15         $('#cnblogs_post_body h2').eq(summary_index).nextUntil('h2').addClass('mulu_summary');
    16         $('#cnblogs_post_body h2').eq(summary_index).nextUntil('h2').wrapAll('<div id="mulu_summary"></div>');
    17         //4、设置这个div为隐藏
    18         $('#mulu_summary').hide();
    19         $('.mulu_summary').hide();
    20     }
    21     //3、给这个h2添加a标签,添加事件,并且修改里面的文字
    22     $('#cnblogs_post_body h2').eq(summary_index).html('一、总结(点击显示或隐藏总结内容)');
    23     $('#cnblogs_post_body h2').eq(summary_index).addClass("fry_summary");
    24     
    25     //5、写一个函数,来设置这个div为显示
    26     $('.fry_summary').click(function(){
    27         $('#mulu_summary').toggle();
    28         $('.mulu_summary').toggle();
    29     });
    30     //6、目录里面的链接都能让总结显示
    31     $("[class^='mulu']").click(function(){
    32         $('#mulu_summary').show();
    33         $('.mulu_summary').show();
    34     });
    35 
    36 </script>
    37 <!--END 一、总结折叠 -->

    4、cnblog虽然不能有alert,但是哟一百种方法可以查看执行结果

    比如把中间值addClass给某人

    5、检查错误的方法是什么?

    在页面查看源代码看某段结果时候出来,如果没出来,那问题一定出在这里

    6、主体内容和侧边栏是怎么实现左右排版(侧边栏是怎么让它实现显示隐藏的)?

    用的是width而不是margin和padding

     1 <script>
     2 $('#main').append('<div id="fry_append"><div id="fry_sidebar">侧边栏</div><hr/><div id="fry_reward">打赏</div><hr/><div id="fry_top"><a href="#_labelTop">Top</a></div></div>');
     3 $('#fry_sidebar').click(function(){
     4     if($('#sideBar').css('display')=='none'){
     5         $('#sideBar').css({'display':'block','width':'17%','margin-left':'3%'});
     6         $('#mainContent').css({'width':'80%'});
     7     }
     8     else{
     9         $('#sideBar').css({'display':'none'});
    10         $('#mainContent').css({'width':'100%'});
    11     }
    12 });
    13 $('#fry_top').click(function(){
    14     
    15 });
    16 $('#fry_reward').click(function(){
    17     $('#pay_area').toggle();
    18 });
    19 </script>

    7、js 怎么触发a标签里的href链接?

    通过window的open方法跳到链接

    js怎么触发a标签里的href链接的方法如下:

    给你的a标签取个Idjs中获取a元素对象的href连接如:var href=document.getElementById("a的Id").href;window.open(href);

    用location.href=href;效果更好

        document.location=href;这个才好用

    $('#fry_top').click(function(){
        var href=$('#fry_top a').attr('href');
        document.href=href;
    });

    8、如何实现高度随文档变动?

    都是window的

    scrollTop+height
    1 $('#fry_reward').click(function(){
    2     var distance=$(window).scrollTop();
    3         distance+=$(window).height()/2;
    4         distance-=120;
    5         
    6     $('#pay_area').css({'top':distance+'px','scrollLeft':'50%'});
    7     $('#pay_area').toggle();
    8 });

    9、如何让页面看起来有趣?

    那些小东西可以弄不同的鲜艳的突出的颜色。

    而大块内容的话我们一浅做基调。

     
  • 相关阅读:
    B. Xor of 3 题解(思维+构造)
    小 L 与 GCD 题解(数学 hard)
    F. Clear The Matrix 题解(状压dp)
    小顶堆与大顶堆的自定义cmp函数
    字符指针、字符数组
    python中创建dict对象
    中缀表达式转后缀表达式
    vue中keep-alive,include的缓存问题
    vue 冒号 :、@、# 是什么意思? v-bind v-on v-slot v-是指令
    vue 自定义指令 v-
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/9259647.html
Copyright © 2020-2023  润新知