jquery02-效果动画

一,增加,接触绑定事件
(1) 、addClass()
向被选元素添加一个或多个类
$("h1,p").addClass("blue");
$("div").addClass("important");

(2) 、removeClass()
从被选元素删除一个或多个类
 $("h1,h2,p").removeClass("blue");

(3) 、toggleClass()
对被选元素进行添加/删除类的切换操作
$("button").click(function(){ $("h1,h2,p").toggleClass("blue"); });

二,常用方法
not()
(1)、not() 方法返回指定元素之外的元素。
$('li').not($('li').eq(1)).addClass('index');

(2)、返回 CSS 属性
如需返回指定的 CSS 属性的值，请使用如下语法：
$("p").css("background-color");

(3) 、回调函数
在当前动画 100% 完成之后执行。
$("button").click(function(){ 
$("p").hide("slow",function(){ 
alert("段落现在被隐藏了");
}); });

(4)绑定
同一个元素绑定多个事件 用on，bind实现
    $('li').on({
        click:function(){
            console.log('aaa')
        },
        mouseover:function(){
            console.log('bbb')
        }
    })

    $('li').bind({
        click:function(){
            console.log('aaa')
        },
        mouseover:function(){
            console.log('bbb')
        }
    })

(5)事件委托
 $('ul').delegate('li','click',function () { 
     console.log(this)       
     $('li').css('color','red');
     })
 建议是用on的方式。
$('ul').on('click','li',function () {           
$('li').css('color','red');
 })


(6) 、each()方法
each() 方法为每个匹配元素规定要运行的函数。
$("button").click(function(){ 
$("li").each(function(){ 
alert($(this).text()) 
});  
});

(7)、jquery写入内容
$('div').html('<span>我是span1</span>')
$('div').text('<span>我是span2</span>')

(8)、jQuery隐藏显示
可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素。
$("#hide").click(function(){ 
$("p").hide();
});
$("#show").click(function(){ 
$("p").show();
});
可以使用 toggle() 方法来切换 hide() 和 show() 方法。
$("button").click(function(){ $("p").toggle(); });

三,jQuery 事件
(1) 、事件对象event
event对象有以下属性
type：事件类型，比如click。
which：触发该事件的鼠标按钮或键盘的键。
target：事件发生的初始对象。
data：传入事件对象的数据。
pageX：事件发生时，鼠标位置的水平坐标（相对于页面左上角）。
pageY：事件发生时，鼠标位置的垂直坐标（相对于页面左上角
$("button").click(function(event){ 
          console.log(event);
  });