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、如何让页面看起来有趣?
那些小东西可以弄不同的鲜艳的突出的颜色。
而大块内容的话我们一浅做基调。