一、几个关键点

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. JAVA-数据类型、变量、常量

    http://blog.csdn.net/yuhailong626/article/details/7245571 http://www.cnblogs.com/JackieADBM/p/534222 ...

  2. 图解linux内核编译框架

    内核是如何编译成的 -知其然而不知其所以然 (第一篇) 转载:http://blog.chinaunix.net/uid-28236237-id-3840137.html Linux内核有分门别类的目 ...

  3. webBrowser捕获Alert内容(C#)

    1.引用using mshtml;  //Microsoft HTML Object Library2.[ComVisible(true)] //放到类的上边 public partial class ...

  4. spring mvc 基于注解 配置默认 handlermapping

    spring mvc 是类似于 Struts 的框架.他们都有一个最主要的功能就是URL路由.URL路由能将请求与响应请求处理逻辑的类(在Struts中即是action,在spring mvc 中即是 ...

  5. Unity3d笔试题大全

    1.       [C#语言基础]请简述拆箱和装箱. 答: 装箱操作: 值类型隐式转换为object类型或由此值类型实现的任何接口类型的过程. 1.在堆中开辟内存空间. 2.将值类型的数据复制到堆中. ...

  6. Spring定时器XML配置

    spring-task.xml <?xml version="1.0" encoding="UTF-8"?> <beans xmlns=&qu ...

  7. crm2013安装和部署语言包

    步骤 1:安装语言包 假设具有执行 Microsoft Dynamics CRM for Microsoft Office Outlook 的用户,除了在执行 Microsoft Dynamics C ...

  8. 开发自己的One Page Scroll插件(二)

    开发自己的One Page Scroll插件(一) 5. 在其他浏览器中的特性 我经常会不停地发布当前的版本,从而可以在GitHub上得到不断的反馈.我的开发模式是不断的迭代.在开始的时候,我不会太关 ...

  9. ShareSDK for Android 2.3.10已经公布

    ShareSDK for Android 2.3.10已经公布,本次更新内容包含: 1.加入自己定义分享标签功能 新版本号SDK下载页面地址: http://share.sharesdk.cn/Dow ...

  10. Hadoop-2.2.0中文文档—— 从Hadoop 1.x 迁移至 Hadoop 2.x

    简单介绍 本文档对从 Apache Hadoop 1.x 迁移他们的Apache Hadoop MapReduce 应用到 Apache Hadoop 2.x 的用户提供了一些信息. 在 Apache ...