jQuery 基本操作

一、jQuery选择器

//jquery-1.12.4.min.js  这是jQuery


    
 我是div

//选择器色规则与css相同

二、选择集转移

• pre()是同级的上一个元素 preAll()是同级的上面所有元素
• next（）是同级的下一个人元素 nextAll（）是统计下面的所有元素

    $('#div1').next().css.({
        color:'red',
    })
    $('#div2').nextAll('p').css({
        color:'bule'
    })

• parent() 选择上一级的父元素
• paren().parent() 获取祖级的元素 （不建议）
• closest() 获取离自己最近的元素
• children() 获取元素下的所有元素可以通过end()回调父元素
• eq(2)获取索引为2的元素
• siblings() 其他兄弟元素
• find() 选择属性为xx的元素

三、样式操作

写入样式

$('#div1').css({background:'gold'});

增加样式

.big{
    background:red;
}//css里边的样式

$('#div1').addClass('big')

减少样式

$('$iv1').removeClass('big')

四、点击事件

$(function(){
    $('#bnt').click(function(){
        $('.box').toggleClass('big')
    })
})

五、索引值

.index() 方法

六、作为选项卡

利用选择集转移增加样式或者删除样式 改变

$('#btns input').click(function(){
    $(this).addClass('cur').siblings().removeClass('cur');
})

七、属性操作

• html() 可以读取和写入内容
• prop() 可以读写布尔值

  alert($('#check').prop('checked'));//选中为true，非选中为false    $('#check').prop({checked:true});//设置默认勾选
  

• attr() 可以读写非布尔值

  $('.box').attr({title:'这是一个div!'});//写入title属性，并赋值    alert($('.box').attr('class'));//读属性class的值，弹出box 
  

八、特殊效果

• fadeOut()淡出
• fadeInt()淡入
• fadeToggle()切换淡出淡入
• hide() 隐藏元素
• show（） 显示元素
• toggle() 切换隐藏显示
• slideDown 向上卷起
• slideUp 向下卷起
• slideToggle 切换展开或者卷起元素

九、动画

参数：

1.什么属性做动画，设置属性
2.动画执行时间 单位 毫秒
3.动画曲线
    1.swing（默认值）开始和结束慢 中间块
    2.linear 匀速
4.回调函数 动画做完之后做的事 可无限嵌套

$('#div').animate({
    width:111,
    height:111},
    100,
    function(){
        $(this).anmate(
            {marginLeft:333;}   
        });
    };
});

十、循环

each()函数

//一起设置
$('.list li').css({background:red;})

//循环设置
$('.list li').each(function(indexx){
    $('this').html(index);
})