jQuery 尺寸、位置操作

 

            // 1. width() / height() 获取设置元素 width和height大小

            console.log($("div").width());

            // $("div").width(300);

            // 2. innerWidth() / innerHeight()  获取设置元素 width和height + padding 大小

            console.log($("div").innerWidth());

            // 3. outerWidth()  / outerHeight()  获取设置元素 width和height + padding + border大小

            console.log($("div").outerWidth());

            // 4. outerWidth(true) / outerHeight(true) 获取设置 width和height + padding +border+ margin

            console.log($("div").outerWidth(true));

 模拟返回页面头部和卷动页面当盒子的头部接触到视口的顶部时文字淡出fadein和fadeout属性，当盒子离开视口顶部时就自动隐藏的一种效果，然后当我们点击按钮时就会触发一个动画让我们的页面会到文档的top值为0的地方

搭建主页静态模块HTML+css页面，实现点击右侧导航实现页面跳转功能后续案例将在明天做

利用上面的当页面卷动到底部以后几个导航模块和盒子出现供用户去实现页面的跳转

jQuery事件注册
语法：element.事件(function(){})

$("div").click(function(){ 事件处理程序 })

jQuery事件处理
事件处理on()绑定事件
on()方法在匹配元素上绑定一个或多个事件的事件处理函数
语法：element.on(event,[selector],fn)

1.events:一个或多个用空格分隔的事件类型，如"click"或"keydown"
2.selector:元素的子元素选择器
3.fn回调函数即绑定在元素身上的侦听函数

$("div").on({
                mouseenter: function() {
                    $(this).css("background", "skyblue");
                },
                click: function() {
                    $(this).css("background", "purple");
                },
                mouseleave: function() {
                    $(this).css("background", "blue");
                }
            });

on()方法优势1
可以绑定多个事件，多个处理事件处理程序

如果处理事件相同

            $("div").on("mouseenter mouseleave", function() {
                $(this).toggleClass("current");
            });

on()优势2
可以事件委派操作。事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素。

            $("ul").on("click", "li", function() {
                alert(11);
            });
            // click 是绑定在ul 身上的，但是 触发的对象是 ul 里面的小li

在此之前有bind()，live()，delegate()等方法来处理事件绑定或者事件委派，最新版本的请用on代替他们。

on()优势3
动态创建的元素，click()没有办法绑定事件，on()可以给动态生成的元素绑定事件。

            $("ol").on("click", "li", function() {
                alert(11);
            })
            var li = $("<li>我是后来创建的</li>");
            $("ol").append(li);