您当前的位置: 站长圈 > 网页前端

jquery的dom操作(3)

来源:站长圈|0 作者:adminzzq 点击: 0
一,样式操作:
    1,追加样式:
        $obj.addClass('classname');
         实例:
        

路航网络培训


        

优秀师资团队


         <script type="text/javascript">
                   $('h1').addClass('h');
         </script>
        
         可以看见本来页面里没有那个class,而jq动态添加了一个class,那么如果该元素本来就有一个class呢,它会覆盖还是会追加呢,来看看吧:
        

路航网络培训


优秀师资团队


<script type="text/javascript">
         $('h1').eq(0).addClass('h');
</script>

 
    2,移除样式:
        $obj.removeClass('classname');
         实例:
        

路航网络培训


优秀师资团队


<script type="text/javascript">
         $('h1').removeClass('title');
</script>

解析:找到所有$('h1'),删除类名为title的类。注意,addClass('classname')和removeClass('classname')里的类名前面不用加点,因为这两个方法指定了参数是个类。
                  
    3,切换样式:
        $obj.toggle(function(){},function(){}[,…]);用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的click 事件。
         实例:
        
        

路航网络培训


<script type="text/javascript">
$('h1').toggle(function(){
         $(this).addClass('h');
},function(){
         $(this).removeClass('h');
})
</script>
解析:这个方法的参数是N个函数,这个例子里用了两个函数做参数,第一个函数给$('h1')添加了一个颜色变红的h类,第二个函数是移除这个类,所以最后的效果是当你在h1这个对象上点击第1次就执行了第一个函数让字体变红了,点击第2次就执行第二个函数移除了类字体又变回原来的颜色了,点击第3次又回到第一个函数了…。如果有N个参数,也是以此类推循环执行。一般这个方法可以做那种收缩菜单。
 
    $obj.toggleClass('classname'); 如果存在(不存在)就删除(添加)一个类。
实例:

路航网络培训


<script type="text/javascript">
         $('h1').click(function(){
                   $(this).toggleClass('h');
         })
</script>
解析:这里我们用了一个click方法,因为toggleClass('classname')不包括click事件,页面加载就会执行,这样我们就看不出动态变化了。$(this).toggleClass('h');的参数是一个类名,当元素有这个类就删除它,如果没有指定的类就添加上这个类,有了click事件触发就和前面一个实例效果一样了。不过这个方法只能操作类。
 
 
二,遍历节点:
 
(1)       $obj.children();区配元素的子元素集合.它可以没有参数,也可以有一个参数
当没有参数时:
实例: