如何用jquery实现实时监控浏览器宽度

Posted 2023-05-03

$(window).width();
这代码只能获取浏览器刷新时的那一刻的宽度，如何才能达到实时获取浏览器宽度呢？
求教！谢谢啦！
补充一下：
比如我想达到这个效果，
当浏览器宽度大雨一定数值时，执行一段代码：
$(function()
if( $(window).width() > 600 )
/* 这里是要执行的代码 */


)
现在的问题是，这只在刷新页面那一刻有效，当变化浏览器宽度时就没用了。
一楼兄台的答案，小弟实在是菜鸟，不会用。

你可以尝试以下代码：

window.onresize=resizeBannerImage;//当窗口改变宽度时执行此函数
function resizeBannerImage()
  
   var winW = $(window).width();
   va if( $(window).width() > 600 ) 
       /* 这里是要执行的代码 */

   
  

知识延展：

几个简单的jQuery使用方法

1.响应事件。在javascript中，经常会用到 onclick=“javascript函数”，但是这个方法将页面的设计与逻辑过于紧密的耦合在一起，并不漂亮，可以用jQuery，如下：

$("#check_un").click(function(event)
    alert("hello");
    event.preventDefault();
);1234

2.将id为title处的内容显示出来

var title = $("#title").html();
alert(title);12

3.得到与类关联的图像的src值

var title = $("#title").html();
alert(title);12

4.统计项目符号的个数

var count = $("li").size();
alert(count);12

5.循环处理符号项

   $('li').each(function()
        alert($(this).html());
    );123

6.修改页面元素用html()方法

 $("#title").html("the awesomest book title ever");

参考技术A window.onresize=resizeBannerImage;//当窗口改变宽度时执行此函数
function resizeBannerImage()

var winW = $(window).width();
va if( $(window).width() > 600 )
/* 这里是要执行的代码 */


参考技术B $(window).resize(function()
if( $(window).width() > 600 )
/* 这里是要执行的代码 */


); 参考技术C //改下结构，像下面这样就好了：(每秒检查一次）

$(function()setTimeout(onWidthChange,1000););

function onWidthChange()

    if( $(window).width() > 600 ) 
        /* 这里是要执行的代码 */

    
    setTimeout(onWidthChange,1000);

本回答被提问者采纳 参考技术D window.onresize=resizeBannerImage;//窗口改变宽度时执行
function resizeBannerImage()

var winW = $(window).width();
va if( $(window).width() > 600 )
/* 运行的语句代码 */

如何用jquery实现页面滚动到指定位置后触发事件的效果？

比如一个页面应该会有30条数据，页面首次加载10条，然后用户向下滚动页面到底端部分时，触发一个事件来读取其他数据。
求这个“触发”的方法。

我了解了一下，大部分的方法都是监控滚动条的移动，当到达底端部分时触发。用jquery有没有方法实现呢？

方法：

$(function()
$(".div_md a").click(function()
$("html, body").animate(
scrollTop: $($(this).attr("href")).offset().top - 100 + "px"
, 1500);
return false;
);
//滚动条滚动到指定位置触发下面事件
var getDiv_md = $(".div_md");
var offSet = getDiv_md.offset().top;
$(window).scroll(function()
if ($(window).scrollTop() > offSet)
$(".div_md").css("position":"fixed","left":"10px","top":"10px","z-index":"2");
else
$(".div_md").css("position":"","left":"0px","top":"","z-index":"");

)
);

1、jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

2、编程工具

Notepad++：一套有特色的自由软件的纯文字编辑器，有完整的中文化接口及支持多国语言编写的功能。它的功能比Windows中的 Notepad（记事本）强大，除了可以用来制作一般的纯文字说明文件，也十分适合当作编写电脑程序的编辑器。Notepad++ 不仅有语法高亮度显示，也有语法折叠功能，并且支持宏以及扩充基本功能的外挂模组。

Brackets：一个免费、开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 （IDE工具）。该项目由 Adobe 创建和维护，根据MIT许可证发布，支持Windows、Linux平台。Brackets的特点是简约、优雅、快捷，它的核心目标是减少在开发过程中那些效率低下的重复性工作，例如浏览器刷新，修改元素的样式，搜索功能等等。

JS Nice：一款让经过混淆处理的JavaScript代码可读更好的工具。它使用一种用于JavaScript代码美化的去混淆和去压缩引擎。JSNice采用先进的机器学习和程序分析技术，从可用的开源项目学习命名和类型规律。

参考技术A scrollBottomTest =function() $("#contain").scroll(function() var $this =$(this), viewH =$(this).height(),//可见高度 contentH =$(this).get(0).scrollHeight,//内容高度 scrollTop =$(this).scrollTop();//滚动高度 //if(contentH - viewH - scrollTop <= 100) //到达底部100px时,加载新内容 if(scrollTop/(contentH -viewH)>=0.95) //到达底部100px时,加载新内容 // 这里加载数据.. ); 参考技术B $(window).scroll(function ()
if ($(window).scrollTop() == $(document).height() - $(window).height())
alert('bottom!!');


);