461day（offset方法，position方法，注册简单事件，bind方法）

最新推荐文章于 2024-08-14 10:15:16 发布

原创最新推荐文章于 2024-08-14 10:15:16 发布 · 231 阅读

0 ·

CC 4.0 BY-SA版权

本文深入讲解了jQuery中的offset方法和position方法，用于获取元素的定位信息，以及通过bind方法和delegate方法注册事件，包括对动态创建元素的事件绑定技巧。

《2019年1月7日》【连续461天】

标题：offset方法，position方法，注册简单事件，bind方法；
内容：

//获取元素的相对于document的位置
    console.log($(".son").offset());
    
    //获取元素相对于有定位的父元素的位置
    console.log($(".son").position());


<body>
<!--点击按钮，在div里面创建一个新的p元素-->
<input type="button" value="按钮" id="btn">
<div id="box">
  <div>
    <span>呵呵</span>
    <p>11111</p>
    <p>22222</p>
    <p>33333</p>
    <p>44444</p>
  </div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
  //$("div").children("p").click(function(){})
  
  $(function () {
   
//
    //bind方式
//    $("p").bind({
//      click:function () {
//        alert("呵呵")
//      },
//      mouseenter:function () {
//        alert("哈哈")
//      }
//    });
    
    
    $("#btn").click(function () {
      $("<p>我是新增加的p元素</p>").appendTo("div");
    });
  
    
    //简单事件，给自己注册的事件
//    $("div").click(function () {
//      alert("哈哈");
//    });
    
    //delegate:代理，委托
    //1. 给父元素注册委托事件，最终还是有子元素来执行。
    
    
    //要给div注册一个委托事件,但是最终不是由执行，而是有p执行
    //第一个参数：selector:事件最终由谁来执行。
    //第二个参数：事件的类型
    //第三个参数：函数，要做什么
    
    //1. 动态创建的也能有事件 :缺点：只能注册委托事件
    $("#box").delegate("p", "click", function () {
      //alert("呵呵");
      console.log(this);
    });
    //注册简单事件，缺点：一次只能注册一个事件
//    $("p").click(function () {
//      alert("呵呵");
//    });
  });
</script>

</body>