jquery学习(第三天)

作者: 全满 | 来源:发表于2018-01-25 15:40 被阅读52次

高度和宽度

$(“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

相关文章

  • jQuery基础第三天(jQuery UI)

    jQuery 第三天知识点大纲 一、复习 第一天jQuery优点jQuery入口函数jQuery 选择器 第二天j...

  • jquery学习(第三天)

    高度和宽度 $(“div”).height();$(“div”).width(); .height()方法和.cs...

  • jQuery

    jQuery学习: 最好的学习方法:查看jQuery的API jQuery下载: jQuery官网:http://...

  • 锋利的jquery学习

    锋利的jquery学习 @(Jquery) [TOC] jquery环境配置 从官网上下载jquery.js文件,...

  • Web前端JQuery入门实战案例

    前端jquery入门到实战 为什么要学习Jquery?因为生活。 案例: 使用jquery案例: jquery 快...

  • 前端基础入门五(掌握jQuery的常用api,实现动态效果)

    jQuery基本概念 学习目标:学会如何使用jQuery,掌握jQuery的常用api,能够使用jQuery实现常...

  • jQuery概述

    jQuery简介 jQuery就是一个封装了很多方法的javaScript库。我们学习jQuery,其实就是学习j...

  • JQuery简单入门

    第一章:jQuery 简介 为什么要学习jQuery? 什么是jQuery? jquery的官网:http://j...

  • 2019-01-08

    我的jQuery学习 jQuery库是一个JavaScript文件 1.在jQuery...

  • 2018-06-12

    从零玩转jQuery-初识jQuery 课前须知: 学习jQuery前必须先掌握JavaScriptjQuery虽...

网友评论

    本文标题:jquery学习(第三天)

    本文链接:https://www.haomeiwen.com/subject/srrdoxtx.html