jquery学习(第三天)

高度和宽度

$(“div”).height();
$(“div”).width();

.height()方法和.css(“height”)的区别：
返回值不同，
.height()方法返回的是 数字类型(20)，
.css(“height”)返回的是字符串类型(20px)，
因此.height()方法常用在参与数学计算的时候

坐标值

$(“div”).offset(); // 获取或设置坐标值 **设置值后变成相对定位**
$(“div”).position(); // 获取坐标值 子绝父相 **只能读取不能设置**

固定导航栏(监听scroll)

<script type="text/javascript">
        $(function () {
            // 获取顶部 top 的高度值
            var topHeight = $(".top").height();
            // 监听浏览器的滚动事件
            $(window).scroll(function () {
                var docScrollTop = $(document).scrollTop();
                //console.log(docScrollTop);
                // 判断一下 docScrollTOp 和 topHeight两个大小
                // 文档被卷去的高度 大于或等于 top高度的时候
                // 让导航栏变成固定定位
                if(docScrollTop >= topHeight) {
                    $(".nav").css({
                        "position": "fixed",
                        "top": 0
                    });
                    $(".main").css("margin-top" ,$(".nav").height());
                } else {
                    // 让固定导航栏变为默认状态 position: static
                    $(".nav").css({
                        "position": "static"
                    });
                    $(".main").css("margin-top" ,0);
                }
            });
        });
    </script>

两侧跟随广告

   <script type="text/javascript">
        $(function () {
            $(window).scroll(function () {
                var docScrollTop = $(document).scrollTop();

                //$(".main").css("top", docScrollTop + 80);
                $(".main").animate({"top" : docScrollTop + 80},30);
            });
        });
    </script>

绑定事件

• bind 可以绑定一个及以上 中间用空格隔开

  • 可以传两个参数也可以传三个参数 三个参数时中间的值就是函数获取的值
    $("button").bind("click mouserenter",function(){ alert(111); });

• one 单次绑定事件

• delegate（委托）绑定方式，可以提高性能

• on 事件（就使用它）

$("div").on("click","p",function(){
     alert(111);
});

第一个参数：触发什么事件
第二个参数：为哪个元素触发事件
第三个参数：处理函数

事件解绑（一一对应）

• unbind
• undelegate
• off

触发事件（提交时校验信息合法性）

image.png

<script>
    $(function () {
        $("form").on("click","#btnSub",function () {
            var textVal = $("#txtName").val();
            if (textVal === "1") {
                alert("登录成功");
            }else {
                //重新获取焦点
                $("#txtName").val("").trigger("focus");
            }
        });
    });
</script>

• click : $(“div”).click();
• trigger：触发事件，并且触发浏览器默认行为
• triggerHandler：不触发浏览器默认行为

jquery事件对象（重点event=e）

• event.stopPropagation() //阻止事件冒泡
• event.preventDefault(); //阻止默认行为

会做jQuery插件

• 全局jQuery函数扩展方法

 $.log = function() {
        
     }

     //$("li")
 

• jQuery扩展方法

 $.fn.log = function() {
        
    }
 

引入第三方插件

• 背景色插件方法
• lazyload 插件
• jQuery UI 插件

用法很简单：
第一步：引入必要的包
第二步： 实现

安装包管理工具

bower install jquery.lazyload
nmp install jquery-lazyload注意使用nmp的时候需要安装nodejs在pc上

sublime 装插件

• sublime 3
• 第一步： 装上sublime的包管理器package control
• ctrl+ ~
• 上网把 按照package control的那段代码，粘贴一下，然后回车。
• 第二步：使用Ctrl + shift + p