一、几个关键点

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. Android中MVC模型（复合模式）

    mvc是model,view,controller的缩写,mvc包括三个部分: 1.模型(model)对象:是应用程序的主体部分,全部的业务逻辑都应该写在该层. 2.视图(view)对象:是应用程序中 ...

  2. linux 环境下git 命令小结

    转载自:http://blog.chinaunix.net/uid-28241959-id-3880025.html 本地建立仓库 先创建个文件夹,仓库的地点: mkdir cangkumkdir C ...

  3. iOS Sqlite加密(FMDB/SQLCipher)

    /** * 对数据库加密 * * @param path path description * * @return return value description */ + (BOOL)encryp ...

  4. django.db.utils.OperationalError: (1071, 'Specified key was too long; max key length is 767 bytes')；

    在使用utf8mb4字符集的情况下,如果列存在索引,那么varchar的最大长度是191 数据库版本: 在使用utf8字符集的情况下,如果列存在索引,那么varchar的最大长度是255. 在大字段上 ...

  5. split-array-largest-sum（参考了discuss）

    注意,第一种用法,涉及到一些Java的知识.就是采用Object作为HashMap的key的时候,需要重载这个Class的 equals 和 hashCode 这两个方法.其中equals需要判断一下 ...

  6. STM32+IAP方案 实现网络升级应用固件

    关注了这个概念有些日子了,这段时间总算有机会实战==网络升级应用固件,这里记录下遇到的问题,及解决方案. 原理与网上流传的串口作为传输手段 一致:不同之处,无非我这里使用了网络设备传输.==(lwip ...

  7. Python 谷歌翻译

    #coding=utf-8 import re import urllib import urllib2 url_google = 'http://translate.google.cn' reg_t ...

  8. 已知m和n是两个整数，并且m^2+mn+n^2能被9整除，试证m,n都能被3整除。

    引证:m,n都是整数,m2=3n,求证m是3的倍数. 引证证明:(反证法)假设m并非3的倍数,那么m2则不含因数3,则m2≠3n,这与已知条件相反. 所以,当m2=3n时,m必是3的倍数. 有了引证, ...

  9. 机器学习学习笔记之一：K最近邻算法（KNN）

    算法 假定数据有M个特征,则这些数据相当于在M维空间内的点 \[X = \begin{pmatrix} x_{11} & x_{12} & ... & x_{1M} \\ x_ ...

  10. 基于Struts2、Spring、Hibernate实现的包括多条件查询分页的基础Dao层帮助jar包实现

    操作数据库经常使用操作就是增删查改.每做一次就写一次这些操作太麻烦,也不是必需,特别是写多条件查询并分页时.太痛苦了,所以抽出时间写了个dao帮助jar.导入即搞定!妈妈再有不用操心我的项目了! 转载 ...