jQuery选择器、动画

一、jQuery动画

// 隐藏盒子 hide()
    $('#hide').click(function () {
        $('#box').hide()
    })
    // 显示盒子 show()
    $('#show').click(function () {
        $('#box').show()
    })
    // toggle()切换 hide()和show()
    $('#toggle').mouseenter(function () {
        $('#box').toggle()
    })
    // 淡入显示已隐藏的元素 fadeIn()
    $('#fadeIn').mouseover(function () {
        $('#box').fadeIn(1000)
    })
    // 淡入隐藏已显示的元素 fadeOut()
    $('#fadeOut').mouseleave(function () {
        $('#box').fadeOut()
    })
    // fadeToggle()切换 fadeIn()和fadeOut()
    $('#fadeToggle').click(function () {
        $('#box').fadeToggle(2000)
    })
    // 向下滑动元素 slideDown()
    $('#slideDown').click(function () {
        $('#box').slideDown(2000)
    })
    // 向上滑动元素 slideUp()
    $('#slideUp').click(function () {
        $('#box').slideUp(1000,function () {
            $('#box').slideDown(2000)
        })
    })
    // slideTogle()切换 slideUp()和slideDown()
    $('#slideToggle').click(function () {
        $('#box').slideToggle()
    })
    // animate 用于创建自定义动画，不可以改变颜色 （需要插件）
    $('#animate').click(function () {
        $('#move').animate({
            left: '200px',
            width: '500px',
            'font-size': '40px',
        }, 3000, function () {
            console.log(11111);
        }) // 持续时间
    })
    // stop() 用于停止动画
    $('#stop').click(function () {
        $('#move').stop()
    })
    // 回调函数 在当前动画 100% 完成之后执行。

二、jQuery选择器

 	/*
      基本选择器  层级选择器  过滤选择器  筛选选择器（方法）
    */
    // 一、基本选择器
    // 1、ID选择器
    console.log($('#box'));
    // 2、类选择器
    console.log($('.box'));
    $('.box').css('color', 'red')
    // 3、标签选择器
    console.log($('div'));
    // 4、并集选择器
    console.log($('.box,p'));
    // 5、交集选择器
    console.log($('div.box_1'));
    // 二、层级选择器
    // 1、子代选择器
    console.log($('#list>li'));
    // 2、后代选择器
    console.log($('#list li'));
    // 三、过滤选择器
    // 1、 :eq（index） 索引从0开始
    console.log($('li:eq(3)').css('color', 'green'));
    // 2、:odd  选择索引为奇数的
    console.log($('li:odd').css('font-size', '30px'));
    // 3、:even  选择索引为偶数的
    console.log($('li:even').css('background-color', 'grey'));
    // 四、筛选选择器、
    // 1、children(selector) 没有参数获取所有的子代 
    console.log($('#list').children());
    console.log($('#list').children('li'));
    console.log($('#list').children('p'));
    // 2、find(selector) find 必须加参数
    console.log($('#list').find('li'));
    // 3、siblings(selector) 查找兄弟节点，不包括自己本身。
    console.log($('#list_3').siblings());
    console.log($('#list_3').siblings('li'));
    console.log($('#list_3').siblings('ol'));
    // 4、parent() 查找父亲
    console.log($('#list_3').parent());
    // 查找祖先
    console.log($('#list_3').parents());
    // 5、eq(index) 相当于$(“li:eq(2)”), index从0开始
    console.log($('li').eq(4));
    // 6、next() 找下一个兄弟
    console.log($('#list_3').next());
    // 找下边所有兄弟
    console.log($('#list_3').nextAll());
    // 7、prev()  找上一个兄弟
    console.log($('#list_3').prev());
    console.log($('#list_3').prevAll());
    // 8、Index() 获取当前的位置（索引）
    console.log($('#list_3').index());

    console.log($('li').eq($('#list_3').index()));
    // 9、not() 返回不带有类名 "intro" 的所有 <p> 元素
    console.log($('#list_3').siblings().not('li'));