2017.11.23笔记

CSS操作 
可以直接利用css()方法获取和设置元素的样式属性。


$('p').css('color');
            $('p').css('color','red');
1
2
如果值是数字，将会被自动转化为像素值。 
在css()方法中，如果属性带有‘-’符号，如font-size，如果设置这些属性的时候不带引号，那么需要使用驼峰命名法。


事件绑定 
1.bing()方法 
结构：bind(事件类型，回调函数)；


<input type="button" value="点我">


$('input[type=button]').bind('click',function(){
            lg('hello world');
        });
1
2
3
4
5
2.on()方法 
on()方法结构和使用与bind()没有任何区别。


新版本的jQuery里面都是使用on()方法，bind()方法已经不再使用了。


<input type="button" value="点我">


$('input[type=button]').bind('click',function(){
            lg('hello world');
        });
1
2
3
4
5
3.阻止冒泡 
使用事件对象 event 的方法stopPropagation();


$('input[type=button],div,body,html').on('click',function(event){
            lg('click');
            event.stopPropagation();
        });
1
2
3
4
4.绑定多个事件 
on()方法中可以使用类似JSON结构进行处理。


$('input[type=button]').on({
            hover:function(){
                $(this).css('color','red');
            },
            mouseout:function(){
                $(this).css('color','#fff');
            },
            click:function(){
                alert('aaa');
            }
        });
1
2
3
4
5
6
7
8
9
10
11
5.事件解绑 
使用unbind()方法解绑事件


    $('input[type=button]').on('click',function(){
            lg('click');
            $(this).unbind('click');
        });
1. show() 方法和 hide() 方法


调用hide()方法会将元素的display样式改为' none '。
show()方法将元素的display样式设置为先前的显示状态。
show()方法和hide()方法的参数可以指定毫秒值，缓慢的隐藏和展示。
[html] view plain copy
$('p').toggle(function(){  
    $(this).hide(2000);  
},function(){  
    $(this).show(2000);  
})   
2.fadeIn()和fadeOut()方法


fadeIn()和fadeOut()方法只改变元素的不透明度。
fadeOut()方法会在指定的一段时间内降低元素的不透明度，直到元素完全消失（display:none）。
[html] view plain copy
$('p').toggle(function(){  
    $(this).fadeOut();  
},function(){  
    $(this).fadeIn();  
})   
3.slideUp()方法和slideDown()方法


slideUp()方法和slideDown()方法只会改变元素的高度。
如果一个元素的 display 属性值为'none',调用slideDown()方法时，这个元素将由上至下延伸显示。slideUp()方法正好相反，元素将由下到上缩短隐藏。
[html] view plain copy
$('p').toggle(function(){  
    $(this).slideUp();  
},function(){  
    $(this).slideDown();  
})   
jQuery中任何动画效果，都可以指定3种速度参数。slow,normal和fast，使用时记得加上引号。
4.animate()方法


可以使用animate()方法来自定义动画。
结构：animate(params,speed,callback)
[html] view plain copy
$('#panel').click(function(){  
    lg('click');  
    $(this).animate({left:'+=500px'}, 3000);  
});         
      //多重动画  
$('#panel').click(function(){  
    lg('click');  
    $(this).animate({left:'+=500px',top:'+=500px'}, 30000);  
});