2018-03-25 jquery回顾

$('#id div');
    $('#id>div');
    $('prev + next');    // 匹配紧接在 prev 元素后的 next 元素
    $('prev ~ sibling');  //找到prev之后的同级的 sibling 元素


    $('li:first');  //匹配获取的第一个元素
    $('li:not(.class)');  //去除所有与给定选择器匹配的元素
    $('li:even');  //匹配所有索引值为偶数的元素，从 0 开始计数
    $('li:odd');   //匹配所有索引值为奇数的元素，从 0 开始计数
    $('li:eq(1)');  //匹配一个给定索引值的元素  从 0 开始计数
    $('li:last');   //匹配获取的最后一个元素

    $('li:empty');  //匹配所有不包含子元素或者文本的空元素
    $('li:has(p)');  //匹配含有p元素标签的li元素
    $('li:parent');  //匹配含有子元素或者文本的元素
    $('li:hidden');  //匹配所有不可见元素，或者type为hidden的元素
    $('li:visible');  //匹配所有可见元素


    $('input[type]');
    $('input[type="text"]');
    $('input[type!="text"]');
    $('input[type^="text"]');
    $('input[type$="text"]');
    $('input[type*="text"]');

    $('li:first-child'); //可以有多个
    $('li:last-child');
    $('li:nth-child');
    $('li:nth-last-child');
    $('li:first-of-type');  //只能有一个
    $('li:last-of-type');
    $('li:nth-of-type');
    $('li:nth-last-of-type');


    $(':input');  //匹配所有 input, textarea, select 和 button 元素
    $(':text');   //
    $(':password');
    $(':radio');
    $(':checkbox');
    $(':submit');
    $(':reset');
    $(':hidden');

    //表单对象属性
    $('input:enabled');
    $('input:disabled');
    $('input:checked');
    $('input:selected');



    $('div').append($('#id'));   //向指定每个匹配的元素div内部最后追加内容#id。
    $('#id').appendTo($('div'));
    $('div').prepend($('#id'));  //向指定每个匹配的元素div内部最前面追加内容#id。
    $('#id').prependTo($('div'));


    $('div').after($('#id'));   //在每个匹配的元素之后插入内容。
    $('div').before($('#id'));  //在每个匹配的元素之前插入内容。
    $('div').insertAfter('#id');  //把所有匹配的元素插入到另一个、指定的元素元素集合的后面
    $('div').insertBefore('#id');  //把所有匹配的元素插入到另一个、指定的元素元素集合的前面


    $('div').empty();  //删除匹配的元素集合中所有的子节点。



    $('div').eq(0);  // 匹配相应索引值的dom元素
    $('div').eq(-2);  // 倒数第几个  从1开始
    $('div').first();  //获取第一个元素
    $('div').last();   //获取最后一个元素
    $('div').find('span');  //从div标签中查找span
    $('div').parent('.one');  //查找父元素
    $('div').parent('.one');  //查找满足条件父级元素
    $('div').children('.one'); // 查找满足条件子元素
    $('div').next('.one');  //一个  同级
    $('div').nextAll('.one');  //所有  同级
    $('div').prev('.one');  //一个  同级
    $('div').prevAll('.one');  //所有  同级
    $("p").find("span").end();  //返回上一级状态
    $('div').siblings('.one');  //获取div元素的类名为one的兄弟元素


    //class类名操作：
    $('div').addClass('cls');
    $('div').removeClass('cls');
    $('div').toggleClass('cls');
    $('div').hasClass('cls');

    //效果：
    $('div').show();
    $('div').hide();
    $('div').fadeIn();
    $('div').fadeOut();
    $('div').fadeTo('speed','opacity','easing',fn);
    $('div').fadeToggle();

    $('div').slideDown();
    $('div').slideUp();
    $('div').slideToggle();

    $('div').animate(
            {
                'height':'300px',
                'width':'300px',
                'opacity':'0.2'
            },
            'slow','linear',function(){
                console.log('finished');
            }
    )

    //属性设置
    $('img').attr('title');
    $('img').attr('title','girl');
    $('img').attr({'title':'girl','alt':'beautiful'});
    $('img').removeAttr('title');
    $('input[type = "checkbox"]').prop('checked','true');

    $('div').html();
    $('div').html('
hello
');

    $('input').val();
    $('input').val('hello');