浅谈$(document)和$(window)的区别

简介

在使用jQuery时，我们常常使用一些全局对象来操作网页元素，其中 $(document) 和 $(window) 是两个非常常用且容易混淆的对象，在此，我来详细讲解它们之间的区别。

$(document)

在jQuery中，$(document) 相当于网页中整体的文档，即 <html> 元素下的所有元素。可以通过 $(document).ready() 来检测网页是否加载完成。另外，$(document) 在处理网页上的元素时，对于动态添加的元素也能生效。

示例1：点击页面上任何一个元素，弹出其标签名称

$(document).on('click', function(event) {
  alert($(event.target).prop('tagName'));
});

示例2：在页面中添加一个<p>元素并设置其点击事件

<body>
  <button id="add">Add paragraph</button>
  <script>
    $('#add').on('click', function() {
      $('<p>Added paragraph</p>').appendTo(document.body)
        .on('click', function(event) {
        alert($(event.target).prop('tagName'));
      });
    });
  </script>
</body>

在这个示例中，我们通过 $(document).ready() 在页面加载完成后给按钮绑定点击事件，点击后添加一个<p>元素。注意到，该元素是动态添加的，但它依然能被捕捉并触发点击事件。

$(window)

与 $(document) 不同，$(window) 表示整个浏览器的窗口对象，即浏览器窗口内的所有元素。它主要用于检测浏览器事件，例如：滚动条滑动、窗口大小改变等等。

示例1：在窗口滚动时，改变顶部导航栏的样式

$(window).on('scroll', function() {
  if ($(window).scrollTop() > 100) {
    $('.navbar').addClass('sticky');
  } else {
    $('.navbar').removeClass('sticky');
  }
});

该示例中，当页面滚动距离超过100像素时，将添加一个 sticky 类到页面顶部的导航栏上。

示例2：在窗口大小改变时，改变网页字体大小

$(window).resize(function() {
  let width = $(window).width();
  if (width > 768) {
    $('body').css('font-size', '16px');
  } else {
    $('body').css('font-size', '14px');
  }
});

在该示例中，当窗口宽度超过768像素时，将网页字体大小设为16像素，否则设为14像素。

总结

总的来说，虽然 $(document) 和 $(window) 看起来比较相似，但它们的应用场景和功能迥然不同，需要根据具体的需求选择合适的对象进行操作。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：浅谈$(document)和$(window)的区别 - Python技术站

浅谈$(document)和$(window)的区别

浅谈$(document)和$(window)的区别

简介

$(document)

$(window)

总结

相关文章