zoukankan      html  css  js  c++  java
  • JQuery的方便之处——宽高设置、坐标值和滚动条+事件绑定机制

    1、元素的宽高

      可以通过css来进行设置,例如:$("元素").css({"宽度":"值","高度":"值"});

      也可以通过JQuery中的函数直接进行设置,比如$("元素").width(数字或字符串);$("元素").height(数字或字符串);不给值的话就相当于获取宽高

      两种方法获取宽高的区别,css获取宽高返回值是带单位px的,而JQuery的函数获取宽高是不带单位的。如果用于数学计算还是选择JQuery好一点。

    2、坐标值

      有两个函数:offset()和position()。offset()能设置位置,position()不能设置坐标值。

      offset()函数:获取坐标值:相对浏览器页面的便移。返回的是一个对象Object{top:值,left:值}

              设置坐标值:传递参数对象{top:值,left:值},设置之后元素自动变为相对定位

      position()函数:获取在坐标值:相对最近的定位的父元素的便移

              设置坐标值:无法设置

    4、滚动条(滚动显示,原理就是儿子元素的宽高超出了父元素的宽高,所以我们要滚动显示,所以要给父元素加一个overflow:scroll;就会出现一个滚动条)

      水平滚动条和垂直滚动条

      获取滚动条位置:$("父元素").scrollTop();

              $("父元素").scrollLeft();

      设置滚动条位置:$("父元素").scrollTop(数字或字符串);

              $("父元素").scrollLeft(数字或字符串);

      浏览器滚动事件:$(window).scroll(function(){    });

    5、JQuery的事件介绍

    6、JQuery的事件绑定机制bind

      以前如果给一个元素绑定两个或多个事件的时候,是在这个元素对象之后一直.函数就好了。例如要给一个按钮绑定两个事件:

    $("button").click(function(){   })

          .mouseenter(function(){     });

      JQuery很强大,给我们提供了一种事件绑定机制:bind

    $("button").bind({

      "click":function(){

      },

      "mouseenter":function(){

      }

    });

      绑定事件之后动态添加元素将不会绑定事件。

    7、JQuery事件委托机制delegate(这个也是一种绑定,主要是性能优化)

      例如:你有100个li标签,需要给所有的li都绑定一个点击事件,传统的方法:$("li").click(function(){     });这样的话太浪费时间了。所以我们委托给父元素,这样能节省时间。例如:100个li标签的父元素是ul,$("ul").delegate("li","click",function(){

                         //参数含义  哪些子元素    事件    事件处理程序

                       });

      绑定事件之后动态添加的元素也会绑定事件

     8、on绑定事件 (强烈推荐使用,但是版本1.7以上)

      这是绑定的根源,其余所有的绑定事件都是通过on来实现的。提供了一种统一的绑定事件的方法。保留了delegate的优点。

      $("父元素").on("事件","子元素",function(){   });

    9、off事件的解绑

      这个和on对应,$("父元素").off("事件");

    10、JQuery提供了一种事件触发机制,用一个事件去触发另一个事件

    11、事件对象

      阻止事件冒泡:e.stopPropagation();

      阻止默认行为:例如 :一个超链接的点击默认行为是跳转  $("a").click(function(e){  e.preventDefault();    });这样在点击的时候就可以阻止默认行为。

      获取事件类型:e.type

      鼠标的按键类型:左键1  中键2   右键 3    

      获取按键字母:e.keyCode

      获取事件来源:e.target==this  说明是从自己来的,并不是事件冒泡触发的事件。  

  • 相关阅读:
    ansible 使用密码登录
    shell脚本报错:-bash: xxx: /bin/bash^M: bad interpreter: No such file or directory
    配置永久生效(登陆shell和非登陆shell)、I/O重定向、Here Docunmet 此处文档、管道、tee
    Navicat for PostgreSQL 序列详解
    flask第十五篇——Response
    Centos防火墙及SELINUX关闭
    linux查看网卡信息的几种方法(命令)
    Python之在函数中调用import语句
    python基础_格式化输出(%用法和format用法)
    Python中怎样简单地用一行写if-then语句?
  • 原文地址:https://www.cnblogs.com/sylz/p/5775069.html
Copyright © 2011-2022 走看看