jQuery常用的DOM操作

添加类和删除类

addClass
removeClass
 $(this).addClass('on')
  $(this).siblings().removeClass('on')

判断有没有类

hasClass
   if( $('div').hasClass('on') ){
                    $('div').removeClass()
                }else{
                    $('div').addClass('on')
                }

切换类

作用：为指定元素切换类 className，该元素有类则移除，没有指定类则添加。

$(selector).toggleClass("liItem");

注意点
操作类样式的时候，所有的类名 都不带点（.）

---

jquery中的动画
隐藏和显示
显示方法 show()

// 用法一：
// 参数为数值类型，表示：执行动画时长
/* 单位为：毫秒（ms），参数2000表示动画执行时长为2000毫秒，即2秒钟 */
$(selector).show(2000);

用法2

$(selector).show(2000, function() {});

隐藏方法 hide()

$(selector).hide(1000); 
$(selector).hide("slow");
$(selector).hide(1000, function(){});
$(selector).hide();

  $('#btnHideDiv').click(function () {
                //  变化的属性有  宽，高，透明度三个属性，最终结果是 display: none 隐藏
                $('div').hide(2000,function () {
                    // alert('我藏好了，你来找我啊')
                    $('div').show(2000,function () {
                        $('div').hide(2000,function () {
                            $('div').show(2000)
                        })
                    })
                })
            })

滑入滑出动画

 //   .slideUp()         隐藏
            //   .slideDown()       显示
            //   .slideToggle()     切换
            //   以上三个滑动动画有默认动画效果，主要是高度属性的变化
            $('#btnHideDiv').click(function () {
                $('div').slideUp(4000)
            });
            $('#btnShowDiv').click(function () {
                $('div').slideDown(1000)
            });
            $('#btnToggleDiv').click(function () {
                $('div').slideToggle(1000)
            });

淡入淡出动画

1 淡入动画效果//
$(selector).fadeIn()
2 淡出动画效果//
$(selector).fadeOut(1000);
3 淡入淡出切换动画效果//
$(selector).fadeToggle('fast', callback);

  $('#btnHideDiv').click(function () {
                $('div').fadeOut()
            });
            $('#btnShowDiv').click(function () {
                $('div').fadeIn()
            });
            $('#btnToggleDiv').click(function () {
                $('div').fadeToggle(4000,function () {
                    alert('动画播放完毕后执行')
                })
            });

停止动画 stop()

 // 1.0.1  当前高亮
            $(this).stop().fadeTo(200,1)
            // 1.0.2  当前兄弟变暗
            $(this).siblings().stop().fadeTo(200,0.3)