2016.07 第4周 群问题分享
时间:2022-05-04
本文章向大家介绍2016.07 第4周 群问题分享,主要内容包括CSS pixels与Device pixels有何区别?、CSS pixels、Device pixels、如何替换丢失(加载失败)的图片、unbind()、attr()、JavaScript判断是否是移动设备、JavaScript刷新页面的几种方法、页面刷新、jQuery的ready函数与JS的onload的区别、ready函数、onload、基本概念、基础应用、原理机制和需要注意的事项等,并结合实例形式分析了其使用技巧,希望通过本文能帮助到大家理解应用这部分内容。
CSS pixels与Device pixels有何区别?
2016.07.25~2016.07.29
核心概念
CSS pixels、Device pixels
问题解析
CSS pixels: 浏览器使用的抽象单位, 主要用来在网页上绘制内容
Device pixels: 显示屏幕的的最小物理单位,每个dp包含自己的颜色、亮度
等值的 CSS pixels在手机屏幕上占多大的位置,这不是固定的,这取决于很多属性。经过分析和总结,我们可以得出这么一条公式: 1 CSS pixels = (devicePixelRatio)^2 Device pixels (^2是平方的意思)
想了解更多关于“CSS pixels与Device pixels”发送“适配”到HTML5学堂公众号
JavaScript
如何替换丢失(加载失败)的图片
2016.07.25~2016.07.29
核心概念
unbind()、attr()
问题解析
//第一种方法
// 为了防止替换的图片也加载失败而导致死循环,这边给完成替换的图片移除掉error事件
$("img").error(function () {
$(this).unbind("error").attr("src", "missing_image.gif");
});
// 第二种方法
$("img").error(function () {
$(this).attr("src", "missing_image.gif");
});
JavaScript判断是否是移动设备
2016.07.25~2016.07.29
核心概念
字符串方法、用户代理
问题解析
var browser = {
versions: function () {
var u = navigator.userAgent,
app = navigator.appVersion;
return { //移动终端浏览器版本信息
trident: u.indexOf('Trident') > -1, //IE内核
presto: u.indexOf('Presto') > -1, //opera内核
webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
mobile: !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/), //是否为移动终端
ios: !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者QQHD浏览器
iPad: u.indexOf('iPad') > -1, //是否iPad
webApp: u.indexOf('Safari') == -1 //是否web应该程序,没有头部与底部
};
}(),
language: (navigator.browserLanguage || navigator.language).toLowerCase()
}
document.writeln("语言版本: " + browser.language);
document.writeln(" 是否为移动终端: " + browser.versions.mobile);
document.writeln(" ios终端: " + browser.versions.ios);
document.writeln(" android终端: " + browser.versions.android);
document.writeln(" 是否为iPhone: " + browser.versions.iPhone);
document.writeln(" 是否iPad: " + browser.versions.iPad);
document.writeln(navigator.userAgent);
if (browser.versions.android || browser.versions.iPhone || browser.versions.iPad) {
alert("是移动端");
} else {
alert("不是移动端");
}
JavaScript刷新页面的几种方法
2016.07.25~2016.07.29
核心概念
页面刷新
问题解析
history.go(0)
location.reload()
location = location
location.assign(location)
document.execCommand('Refresh')
window.navigate(location)
location.replace(location)
document.URL=location.href
window.location.reload()刷新当前页面
parent.location.reload()刷新父亲对象(用于框架)
opener.location.reload()刷新父窗口对象(用于单开窗口)
top.location.reload()刷新最顶端对象(用于多开窗口)
window.location.reload()刷新当前页面
parent.location.reload()刷新父亲对象(用于框架)
opener.location.reload()刷新父窗口对象(用于单开窗口)
top.location.reload()刷新最顶端对象(用于多开窗口)
jQuery的ready函数与JS的onload的区别
2016.07.25~2016.07.29
核心概念
ready函数、onload
问题解析
1、执行时间
window.onload必须等到网站资源加载完毕后才能执行;
$(document).ready()是DOM结构绘制完毕后就执行,不必等到资源加载完毕;
2、编写个数不同
window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个
$(document).ready()可以同时编写多个,并且都可以得到执行
3、简化写法
window.onload没有简化写法
$(document).ready(function(){})可以简写成$(function(){})
HTML5学堂小编 - 陈林耗时5h
- 如何让oracle的select强制走索引
- ActionScript3.0(AS3)中的泛型数组Vector
- 人民网评:“算法推荐”不能成为传播低俗信息的助推器
- 代码实现WordPress自动关键词keywords与描述description
- 基于Spring的简易SSO设计
- MS 的IOC容器(ObjectBuilder)?
- 自动驾驶五问
- 开放的即时通信协议Jabber
- AI技术五年内必将颠覆现有医疗领域?
- 初探ReactJS.NET 开发
- 详解使用hadoop2.6.0搭建5个节点的分布式集群(附代码)
- Net Framework 2.0 事务处理
- Mono 4.0 Mac上运行asp.net mvc 5.2.3
- 电脑、打印机不归,牵出“无人车第一案”
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- tomcat 并发优化
- Java File类基础解析 使用递归来遍历目录 2
- Java Lambda表达式
- 介绍一款 API 敏捷开发工具
- XSS(跨站脚本攻击)简单讲解
- Java中多线程的使用(超级超级详细)线程池 7
- Python 将土味情话语录设置为桌面壁纸
- Java中多线程的使用(超级超级详细)线程安全原理解析 4
- Java中多线程的使用(超级超级详细) Thead类的使用 3
- Java Properties集合基础解析
- File 类基础解析3 文件过滤器优化
- 原创 | 我在git merge的时候遇到了冲突,怎么解决?
- protobuffer的前世今生(一)——简介
- protobuffer的前世今生(二)——编码
- Java中多线程的使用(超级超级详细)+多线程的实现原理 2