jquery自定义方法
说起来自己听惭愧的,学了这么久,才写出一个方法。。。真是老脸都丢光了。以后就多用这种方法,养成好习惯吧。
需求:在两个同样的div模板上实现切换效果;
问题:因为是div都是使用了通过的类,所以以前直接使用类选择的方法已经行不通,因为点击一个tab的时候,两个模板的都会懂;
另外,我特别傻x,弄了一下午,alert()测试tab的数量总是为0,最后下班了才想到自己在使用方法是没把“#”放进去。真是。。。;
总结:如果要使用封装出自己的方法,就要尽量的时候,html标签名来查找元素,而能使用html标签名来查找元素的方法,一般都是children(),siblings(),next(),find(),prev(),parent(),closet()等方法,另外要使用这些方法一定要确定这是jquery对象,还有hasClass()返回的是布尔值(我真傻x);
还有些小问题,我自己现在才弄懂的,谷歌开发者工具,提示的unexpect token .(unexpect token ,unexpect token })重点是后面的点号".",问题出现在这里,我四级也太水了。
还有测试对象的方法可以用
for( var pro in obj ){ document.write(pro+':'+obj[pro]+'<br>') } //obj 为对象,pro为该对象的方法属性
<div class="module-title" id="tab1"> <div class="module-title-text" style="color:#197faf">公告通知 </div> <div class="module-title-text">行业资讯</div> <span class="line"></span> </div> <div> <div class="module-content" style="display:block;"> <ul> <li> <a href="">1我是标题我是标题我是标题我是标题我是标题我是标题</a> </li> <li> <a href="">我是标题我是标题我是标题</a> </li> <li> <a href="">我是标题我是标题我是标题</a> </li> <li> <a href="">我是标题我是标题我是标题</a> </li> <li> <a href="">我是标题我是标题我是标题我是标题我是标题我是标题</a> </li> <li> <a href="">我是标题我是标题我是标题</a> </li> <li> <a href="">我是标题我是标题我是标题</a> </li> <li> <a href="">我是标题我是标题我是标题</a> </li> </ul> </div> <div class="module-content" > <ul> <li> <a href="">2我是标题我是标题我是标题我是标题我是标题我是标题</a> </li> <li> <a href="">我是标题我是标题我是标题</a> </li> <li> <a href="">我是标题我是标题我是标题</a> </li> <li> <a href="">我是标题我是标题我是标题</a> </li> <li> <a href="">我是标题我是标题我是标题我是标题我是标题我是标题</a> </li> <li> <a href="">我是标题我是标题我是标题</a> </li> <li> <a href="">我是标题我是标题我是标题</a> </li> <li> <a href="">我是标题我是标题我是标题</a> </li> </ul> </div> </div>
jquery
<script type="text/javascript"> function _tab(id){ var $id = $(id); var $tab =$(id).children('div'); var $nextdiv = $(id).next('div').find('div'); var $line = $(id).children('span'); $tab.click(function(){ var _index = $(this).index(); $(this).css('color','#197faf').siblings().css('color','#555'); $nextdiv.eq(_index).show().siblings().hide().css('color','#555'); if(_index == 0){ $line.animate({'left':'0'},300); }else{ $line.animate({'left':'50%'},300); } }) } _tab('#tab1');//睁大狗眼看清楚有个井号 _tab('#tab2'); </script>