JQuery 常用的方法总结

野性酷女 2022-06-08 07:56 231阅读 0赞

1.选择器

$('#a');//根据ID获取元素
    
    $('div');//根据元素名称选择元素
    
    $('.b');//根据class选择元素
    
    $('#a p');//组合选择器，选择ID为a下的p元素
    
    $('div:first');//伪类选择器，选择第一个div

2.过滤器

HTML代码

JQuery代码

//选择所有的div，然后再选出div的所有孩子
    //方法1：
    $('div .child');
    //方法2：
    $('div').find('.child') ;
    //方法3：
    $('div').find('div .child');
    //方法4：
    $('.grandpa').find('.child');
    
    //找爸爸
    $('#child1').parent();
    
    //找爷爷 parents()所有辈分比你大的都会被选中
    $('#child1').parents('.grandpa');
    
    //利用过滤器选出not-gay(用于在结果集中过滤)
    $('.child').filter('.not-gay')

3.操作样式

//添加一条样式
    $('.a').css('color','red');
    
    //添加多条样式
    $('.a').css({
        color:'red',
        background:'black',
        backgroundColor:'black',
    });
    
    //添加一个类 black为class的名称
    $('.a').css().addClass('black');
    
    //移除class
    $('.a').css().removeClass('black');
    
    //用于检测元素是否含有某个类
    $('.a').hasClass('black');
    
    //显示、影藏元素
    $('.a').show();
    $('.a').hide();
    
    //动画隐藏 参数为时间，单位毫秒
    $('.a').fadeOut(500);
    //动画显示
    $('.a').fadeIn();
    //动画下往上收
    $('.a').slideUp() ;
    $('.a').slideDown();

4.操作DOM

//返回元素里面的所有文字
    $('#a').text();
    //设置元素里面的文字(会覆盖原来的text)
    $('#a').text('LA');
    
    //返回元素里面的所有子内容，包含标签
    $('#a').html();
    $('#a').html('LA');
    
    //元素后、前面添加元素(添加儿子)
    $('#a').append('<div>A</div>') ;
    $('#a').prepend('<div>A</div>') ;
    
    //删除ID为a的元素
    $('#a').remove();
    //删除ID为a的元素下面的p元素
    $('#a p').remove();

5.操作元素属性

//获取href属性
    $('#a').attr('href');
    //修改href属性 attr：可以操作自定义属性 prop则不可以
    $('#a').attr('href','hhtp://baidu.com');
    $('#a').prop('href','hhtp://baidu.com');
    
    //删除属性asdf(自定义属性)
    $('#a').removeAttr('asdf');