一、几个关键点

1：当文档大小改变时可以通过哪个事件来触发？

resize([Data], fn) 可传入data供函数fn处理。

示例：

$(window).resize(function(){

    alert("Stop it!");

});

     2：怎样获得浏览器窗口的宽度高度？

获取当前浏览器窗口的宽度

$(window).width();

　　　　获取第一段的宽

$("p").width()

　　　获取当前HTML文档宽度

$(document).width();

3：怎样赋值？

方法很多，可以通过css（...）、width(...)等

二、举个例子

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>jquery自适应demo</title>

</head>

<script type="text/javascript" src="jquery-1.7.1.min.js"></script>

<script>

$(document).ready(function(){

    //初始化宽度、高度

    $("#div1").width($(window).width());

    $("#div1").height($(window).height());

    //当文档窗口发生改变时 触发

    $(window).resize(function(){

        $("#div1").width($(window).width());

        $("#div1").height($(window).height());

    })

    })

</script>

<body style="margin:0;">

    <div id="div1" style="background:#09F">

        这是一个可以自适应窗口的DIV

    </div>

</body>

</html>

Jquery使容器自适应浏览器窗口的更多相关文章

  1. jquery和js检测浏览器窗口尺寸和分辨率

    jquery和js检测浏览器窗口尺寸和分辨率,转载自网络,记录备忘 <script type="text/javascript">$(document).ready(f ...

  2. 让div自适应浏览器窗口居中显示

    今天做 banner 时发现一个问题,就是浏览器窗口水平拉伸时 banner 图未能居中,所以网上找了些资料,自己写了个小 demo html代码: <div class="div1& ...

  3. echarts图表自适应浏览器窗口的大小

    echarts问题描述 当浏览器窗口发生变化时,echarts图表未能自适应浏览器的变化,产生如下的效果 解决方案 在$(function(){}中添加 window.onresize = funct ...

  4. jQuery easyui layout布局自适应浏览器大小(转)

    首先解释一下标题的含义,当我们用jQuery easyui layout 进行布局的时候,可能会遇到这样一个问题,那就是当手工调整浏览器大小,或者最大化.还原窗口的时候,layout的某个区域不能填充 ...

  5. JQuery iframe宽高度自适应浏览器窗口大小的解决方法

    iframe宽高度自适应浏览器窗口大小的解决方法   by:授客 QQ:1033553122 1.   测试环境 JQuery-3.2.1.min.js 下载地址: https://gitee.com ...

  6. js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码

    获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下.IE中,浏览器显示窗口大小只能以下获取: 代码如下复制代码 代码如下: document.body.offsetWidth doc ...

  7. JQuery 获取元素到浏览器可视窗口边缘的距离

    获取元素到浏览器可视窗口边缘的距离 by:授客 QQ:1033553122 1.   测试环境 JQuery-3.2.1.min.js 下载地址: https://gitee.com/ishouke/ ...

  8. 使用jQuery和Bootstrap实现多层、自适应模态窗口

    本篇实践一个多层模态窗口,而且是自适应的. 点击页面上的一个按钮,弹出第一层自适应模态窗口. 在第一层模态窗口内包含一个按钮,点击该按钮弹出第二层模态窗口,弹出的第二层模态窗口会挡住第一层模态窗口,即 ...

  9. js使浏览器窗口最大化（适用于IE的方法）

    这里使用的方法是IE的私有特性,只能在IE中有效.主要是window.moveTo和 window.resizeTo方法.       效果和点击最大化按钮差不多,有一点区别.点击最大化按钮后,浏览器 ...

随机推荐

  1. SQL Server需要监控哪些计数器 ---指尖流淌

    http://www.cnblogs.com/zhijianliutang/p/4174697.html

  2. SqlServer收缩数据库语句

    ALTER DATABASE [Spacebuilder] SET RECOVERY SIMPLEDBCC SHRINKDATABASE([Spacebuilder], 0)ALTER DATABAS ...

  3. 关于新一代Android的一切Android L (2014-07-04)

    谷歌在今年的I/O大会上一改曾经的传统,由发布新版Android改为发布Android L的开发者预览版本,而其正式版本将会在今年秋天面世,这种方式将会方便开发者在正式版发布之前尽早对自己应用进行优化 ...

  4. slf4j log4j logback log4j2关系详解和相关用法

    来源:slf4j log4j logback关系详解和相关用法https://www.cnblogs.com/Sinte-Beuve/p/5758971.html The Simple Logging ...

  5. linux、mac的bash和zsh如何切换

    1.hostname 192-23-2-2 修改主机名字 2.chsh -s /bin/bash和chsh -s /bin/zsh可以永久切换,也就是一登录进来的就是相应的界面 bash/zsh命令是 ...

  6. 【采集层】Kafka 与 Flume 如何选择（转）

    原文链接:[采集层]Kafka 与 Flume 如何选择 采集层 主要可以使用Flume, Kafka两种技术. Flume:Flume 是管道流方式,提供了很多的默认实现,让用户通过参数部署,及扩展 ...

  7. iOS:CoreData数据库的使用一(创建单个数据库表)

    CoreData数据库框架:mac系统自带的数据库,它是苹果公司对sqlite进行封装而来的,既提供了对数据库的主要操作,也提供了具体的视图关系模型. 需要用到三个对象: 1•Managed Obje ...

  8. PowerDesigner教程系列（三）概念数据模型

    目标: 本文主要介绍属性的标准检查约束.如何定义属性的附加检查. 一.定义属性的标准检查约束 标准检查约束是一组确保属性有效的表达式.在实体属性的特性窗口,打开如图所示的检查选项卡. 在这个选项卡可以 ...

  9. 免费的多数据库管理工具sqldbx个人版本

    SqlDbx是一个先进的Sql编辑器和数据库对象资源管理器SqlDbx仅一个可执行的文件不需要安装 SqlDbx与SSMS对象内存占差的不是一点点,但功能与SSMS相当 优点:支持多数据库,占用内存小 ...

  10. 使用Jmeter对应用程序进行测试

    JMeter是Apache组织的开放源代码项目,它是功能和性能测试的工具,100%的用java实现,最新的版本是1.9.1,大家可以到 http://jakarta.apache.org/jmeter ...