jquery使用问题汇总

标签： 无 分类： 未分类 创建时间：2019-03-12 08:58:55 更新时间：2025-01-20 09:45:24

我是用的是jquery 3.3.1版本

1.$(windows).scroll无效

不知道为什么，就是这么奇怪，只能使用$(body).scroll,暂时没想到为什么，应该和css设置有关。

更新
同样的代码，修改了css的样式之后，$(windows).scroll便可以起作用了。我自己的想法是，如上图所示，虽然右侧有滚动条，但是这个滚动条说来自于body，还是window,影响着是$(window).scroll还是$(body).scroll起作用。window对象表示浏览器中打开的窗口，即是一个浏览器窗口只有一个window对象。document对象是载入浏览器的html文档，即是window载入document。body对象代表html文档的主体（html body）。

2.获取文档的宽和高

理论上是这样的,$(选择器)然后执行以下方法，可以获取不同的宽度和高度。

1
2
3
4
5
6
7
8
9
10
11
$("").width() - 返回元素的宽度。
$("").height() - 返回元素的高度。
$("").innerWidth() 方法返回元素的宽度（包括内边距）。                    
$("").innerHeight() 方法返回元素的高度（包括内边距）。                    
$("").outerWidth() 方法返回元素的宽度（包括内边距和边框）。             
$("").outerHeight() 方法返回元素的高度（包括内边距和边框）。        
$("").outerWidth(true) 方法返回元素的宽度（包括内边距、边框和外边距）
$("").outerHeight(true) 方法返回元素的高度（包括内边距、边框和外边距）。  

$(document).height()返回文档（HTML 文档）的高度
$(window).height()返回窗口（浏览器视口）的高度

但是我实际上通过height()、innerHeight()、outerHeight()、outerHeight(true)获取的高度都是一样的，并不包含内边距边框和外边距。

3.判断元素是否在窗口中可见

1
2
3
4
5
6
7
var top=$('元素').offset().top - $(window).scrollTop();
var wH=$(window).height();
if(top<=wH){
  //可见
}else{
  //不可见
}

4.侧边栏元素随滚动条滚动，到达底部后不再滚动

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.parent{
    position: relative;
    overflow:auto;
}
.side-tool{
    position: fixed;
    right: 60px;
    bottom: 30px;
}

.side-tool.static:{
    position: absolute;
    right: -150px;
}
1
2
3
4
5
6
7
<div class="parent">
  <div class="other"></div>
  <div class="side-tool"></div>
</div>
<footer class="footer">
</footer>

原理即，进入页面时，首先设置侧边栏fixed布局，然后鼠标滚动时侧边栏会跟着鼠标移动，当底部菜单出现时，将fixed定位去掉，加入absolute定位（side-tool父元素应该具有position:relative,这样absolute定位即为相对于父元素定位）

1
2
3
4
5
6
7
8
9
10
11
var $footer=$(".footer");
  var windowH=$(window).height();
  var $sideTool=$post_wrap.find(".side-tool");
  $("body").on("scroll",function(){
    var distanceTop=$footer.offset().top - $(window).scrollTop();
    if(distanceTop<=windowH){
      $sideTool.addClass("static");
    }else{
      $sideTool.removeClass("static");
    }
  });
参考文章：
1.jQuery div滚动到顶部停止
2.jQuery判断div随滚动条滚动到一定位置后停止
**本文已结束，感谢您的观看**
鼓励一下

往期推荐

文章目录
  1. 1. 1.$(windows).scroll无效
  2. 2. 2.获取文档的宽和高
  3. 3. 3.判断元素是否在窗口中可见
  4. 4. 4.侧边栏元素随滚动条滚动，到达底部后不再滚动
小额赞助
本人提供免费与付费咨询服务，感谢您的支持！赞助请发邮件通知，方便公布您的善意！
**光 3.01 元
Sun 3.00 元
bibichuan 3.00 元
捐赠者名单 合计：9.01 元
微信公众号
广告位
诚心邀请广大金主爸爸洽谈合作
每日一省
isNaN 和 Number.isNaN 函数的区别？

1.函数 isNaN 接收参数后，会尝试将这个参数转换为数值，任何不能被转换为数值的的值都会返回 true，因此非数字值传入也会返回 true ，会影响 NaN 的判断。

2.函数 Number.isNaN 会首先判断传入参数是否为数字，如果是数字再继续判断是否为 NaN ，不会进行数据类型的转换，这种方法对于 NaN 的判断更为准确。

2021-04-07 链接地址
每日二省
为什么0.1+0.2 ! == 0.3，如何让其相等?

一个直接的解决方法就是设置一个误差范围，通常称为“机器精度”。对JavaScript来说，这个值通常为2-52，在ES6中，提供了Number.EPSILON属性，而它的值就是2-52，只要判断0.1+0.2-0.3是否小于Number.EPSILON，如果小于，就可以判断为0.1+0.2 ===0.3。

2021-04-07 链接地址
每日三省
== 操作符的强制类型转换规则？

1.首先会判断两者类型是否**相同，**相同的话就比较两者的大小。

2.类型不相同的话，就会进行类型转换。

3.会先判断是否在对比 null 和 undefined，是的话就会返回 true。

4.判断两者类型是否为 string 和 number，是的话就会将字符串转换为 number。

5.判断其中一方是否为 boolean，是的话就会把 boolean 转为 number 再进行判断。

6.判断其中一方是否为 object 且另一方为 string、number 或者 symbol，是的话就会把 object 转为原始类型再进行判断。

2021-04-07 链接地址
每日英语
Happiness is time precipitation, smile is the lonely sad.
幸福是年华的沉淀，微笑是寂寞的悲伤。
2016 ——— 美文