jquery - 1

1.选择器：

$('p');$('.class');$('#id');$('*');$(this);//基本选择器
$('p:first')//选取第一个p元素
$('a[target='_blank']')//选取所有target属性值等于_blank的a元素
$(':button')//选取input的type为button或者button元素
$('tr:odd')//选取偶数位置的tr元素
$('tr:even')//选取奇数位置的tr元素

2.事件

$('p').click(function){
    console.log('this is p!')；
}//元素点击事件，其中dbclick、mouseenter、mousedown、mouseleave、mouseup等事件的调用方法相同。

$('p').hover(function(){
    console.log('mouseenter!')
},function(){
   　　console.log('mouseleave!') ;
})//元素的hover接受两个参数，一个是鼠标进入的事件。一个是鼠标移除的事件

$('input').focus(function(){
     $(this).css('background','#fff');
})//当输入框为焦点状态的时候触发，blur是失去焦点的时候触发，方法一样。

3.显示隐藏渐变效果

//(1)show&hide&toggle（通过控制display的值）
$('p').hide()//隐藏
$('p').show()//显示
$('p').toggle()//切换显示和隐藏

//（2）fadeIn&fadeOUt&fadeToggle&fadeTo
$(selector).fadeIn(speed,callback);
$('button').click(function(){
     $('p').fadeIn();
     $('p').fadeIn('slow')
     $('p').fadeIn(3000);
})//其中speed可以写slow、fast、时间，callback则是fade结束之后的回调函数。fadeOut和fadeToggle用法相同
$(selector).fadeTo(speed,opacity,callback)
$('button').click(function(){
     $('p').fadeTo('slow',0.5);
})//fadeTo第二个参数是渐变到的透明度。

4.滑动、动画、停止动画

//slideDown&slideUp&slideToggle

$(selector).slideDown(speed,callback);

$('button').click(function(){
    $('p').slideDown();
})//控制display属性

//animate
$(selector).animate({params},speed,callback);
$('button').click(function(){
     $('div').animate({height:'200px',opcity:0.5})
})
//如果操作margin-left等属性，需要写成marginLeft驼峰命名法。当然也可以使用相对值如：height：‘+=150px’;
$('button').click(function(){
       var div = $('div');
       div.animate({height:'100px',opacity:0.5'},'slow')
       div.animate({width：'100px',opacity:'0.9'},'slow')
})//animate可以使用队列功能，一个动画接着一个动画。

//停止动画
$(selector).stop(stopAll,goToEnd);//stopAll默认是false,意思是动画队列可以继续，只是停止当前动画，goToEnd，默认为false,意思是是否将动画立即完成。