前台技术学习7（2）

今天学习了jQuery中的css样式操作

这几个方法常用：

addClass()	添加样式
removeClass()	删除样式
toggleClass()	有样式则删除，没有则添加
offset()	获取和设置元素的坐标

 

 

 

 

 

jQuery动画操作，下面是几个常用方法

show()	显示动画
hide()	隐藏动画
toggle()	可见则隐藏，不可见则显示
fadeIn()	淡入（逐渐显示）
fadeTo()	在指定时间内修改透明度至指定值
fadeOut()	淡出
fadeToggle()	淡入/出，切换

              注：1、第一参数为时长，毫秒；2、第二参数为动画回调函数

 

 

 

 

 

 

 

jQuery事件操作

1、触发

　　jQuery在浏览器内核解析完之后立即执行，原生js在解析完之后，还要加载标签

2、顺序

　　jQuery会首先执行，js会在之后执行

3、执行次数

　　jQuery会按顺序执行，原生js只会执行最后一个（覆盖）。

jQuery其他事件处理，使用下面几个常用方法

mouseover()	鼠标移入
mouseout()	鼠标移出
bind()	一次性绑定多个事件
one()	与bind（）相同，但事件只响应一次
unbind()	对bind()解除绑定
live()	根据选择器绑定事件，动态创建的事件也会绑定

 

 

 

 

 

 

 

事件冒泡

　　父子元素同时监听同一事件，触发子元素时，同一事件会传到父元素

JS事件对象

　　封装有触发事件信息的js对象

获取事件对象

<script>
    //js获取事件对象
    onload = function () {
        document.getElementById("area").onclick = function (event) {
            console.log(event);
        }
    }
    //jQuery获取事件对象
    $(function () {
        // $("#show").click(function (event) {
        //     console.log(event);
        // });

        //bind对多个事件绑定同意函数，获取当前事件
        $("#area").bind("mouseover mouseout",function (event) {
            if(event.type == "mouseover"){
                console.log("你进来了");
            }else if(event.type == "mouseout"){
                console.log("你出去了");
            }
        })
    })
</script>