JQuery 常用的方法总结

1.选择器

$('#a');//根据ID获取元素

$('div');//根据元素名称选择元素

$('.b');//根据class选择元素

$('#a p');//组合选择器，选择ID为a下的p元素

$('div:first');//伪类选择器，选择第一个div

2.过滤器

HTML代码

<div class="grandpa">
    <div class="pa">
        <div id="child1" class="child not-gay"></div>
        <div id="child2" class="child"></div>
        <div id="child3" class="child"></div>
    </div>
</div>

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');