javascript 项目笔记

判断判断某个变量/属性是否为undefined

 

// 方式1
typeof age === 'undefined';  //  !==
 
// 方式2
age === undefined

 区别：不确定变量age是否声明或定义时用方式1，确定的则可以用方式2，如果age未声明使用方式2会报错。

 

控制图片的大小

 

很多时候项目中的图片会过大，导致网页出现左右滚动条，可以通过控制图片的宽度大小来防止左右滚动条出现，图片的高度会自动根据图片宽度等比缩放。

 

解决方案： 如果使用相对宽度 style="width:100%;" ，会导致图片宽度小于屏幕宽度的图片被拉伸变形。

这里使用style="max-width:100%;"来解决，但是要考虑兼容性，有些浏览器不支持此属性。

关于javascript控制远程图片的大小，由于页面加载完成后，图片可能尚未下载完，在图片下载完毕之前，无法通过对象的width属性去获取图片的宽度，这里提供一套无法使用style="max-width:100%;"的浏览器的解决方案：

 

/**
 * 限制图片显示的size.
 * @param thisobj 图片组件
 * @param limitW 限制宽度大小
 * @param limitH 限制高度大小
 */
function imageResize(thisobj, limitW, limitH) {
    var newW;
    var newH;
    if (thisobj.width > limitW) {
        newW = limitW;
        newH = parseInt(thisobj.height * newW / thisobj.width);// 按宽度比例缩放
        if (newH > limitH) {
            newH = limitH;
            newW = parseInt(thisobj.width * newH / thisobj.height);
        }
        thisobj.width = newW;
        thisobj.height = newH;
    } else if (thisobj.height > limitH) {
        newH = limitH;
        newW = parseInt(thisobj.width * newH / thisobj.height);
        thisobj.width = newW;
        thisobj.height = newH;
    }
}

  该方案只能用于控制本地图片的大小。 【控制远程图片的大小】

 

使用document.getElementsByTagName 获取某类对象的数组

 

有时候html代码是从后台比如一个java对象传过来的，而且这段html代码中的标签都没有指定id，就无法通过getElementById的方法找到某个标签对应的对象，这时候getElementsByTagName 就派上用场了，使用该方法得到的是一个数组，example：

 

 

var img = document.getElementsByTagName("img");
for(var i = 0; i<img.length; i++){
	var a = img[0].width; //获取img对象的宽度
	...
}

 

Css 中 * 的意思

 

* {
	line-height: 20px;
}

 *为通配符，匹配Html中所有元素，这里为给所有元素设置行高（行间距）为20像素。

 

margin 设置外边距属性，该属性可以有 1 到 4 个值 ：

 

margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。

 

padding:10px 5px 15px 20px;

上外边距是 10px

右外边距是 5px

下外边距是 15px

左外边距是 20px

 

margin:10px 5px 15px;

上外边距是 10px

右外边距和左外边距是 5px

下外边距是 15px

 

margin:10px 5px;

上外边距和下外边距是 10px

右外边距和左外边距是 5px

 

margin:10px;

所有 4 个外边距都是 10px

 

padding 填充 ，用法同margin

 

wap网页meta的作用

 

移动设备遇到不认识的<meta>标签时会自动忽略掉

 

1.缓存控制

<meta http-equiv="Cache-Control" content="no-cache"/>

<meta http-equiv="Cache-Control" content="max-age=300"/>

 

<meta http-equiv="Cache-Control" content="max-age=0"/> 等价于

<meta http-equiv="Cache-Control" content="no-cache"/>

 

2.HTTP刷新

<meta http-equiv="Cache-Control" content="no-cache"/>

<meta http-equiv="refresh" content="15"/>

必须要第一行代码no-cache，上述代码没被包含, WAP 浏览器将仅仅显示缓存中的文档的复本, 而不需要每次刷新都连接服务器. 

 

3.定义页面尺寸

IE的使用：

<META NAME="MobileOptimized" CONTENT="240">

这些尺寸不是页面的实际大小，比如在240时，ie的实际尺寸是229px

其他浏览器使用：

<meta name="viewport" content="width=device-width; initial-scale=1.4; minimum-scale=1.0; maximum-scale=2.0" />

 

width ：viewport的宽度 

height ：viewport的高度

initial-scale :初始的缩放比例

minimum-scale :允许用户缩放到的最小比例

maximum-scale :允许用户缩放到的最大比例

user-scalable :用户是否可以手动缩放