2016.07 第4周 群问题分享

HTML+CSS

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

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2016-07-31

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏零基础使用Django2.0.1打造在线教育网站

零基础使用Django2.0.1打造在线教育网站(七):数据库字段的定义(上)

努力与运动兼备~有任何问题可以加我好友或者关注微信公众号,欢迎交流,我们一起进步!

1376
来自专栏专注于主流技术和业务

使用Swagger2Markup实现导出API文档

在学会了如何使用Swagger之后,我们已经能够轻松地为Spring MVC或SpringBoot的Web项目自动构建出API文档了。但是,构建的文档必须通过在...

1996
来自专栏落影的专栏

为何百兆静态库能打进数兆的可执行文件?

前言 第三方库是工程开发必不可少的部分,而第三方库可以是.a和.framework的静态库,也可以是.framework的动态库,其中静态库是最常用的方式。 ...

4528
来自专栏xingoo, 一个梦想做发明家的程序员

Java程序员的日常 —— 响应式导航Demo

这两天想要做响应式的页面,于是本着重复造轮子的想法,模仿Bootstrap官网,精简了一个响应式导航的Demo。 效果 ? ? ? 代码 <!DOCTYP...

1868
来自专栏零基础使用Django2.0.1打造在线教育网站

在线网站搭建(七):数据库字段的定义(上)

努力与运动兼备~~~有任何问题可以加我好友或者关注微信公众号,欢迎交流,我们一起进步!

1022
来自专栏技术之路

将某个Qt4项目升级到Qt5遇到的问题[转]

该Qt4项目以前是使用Qt4.7.4 MSVC2008开发的,因为使用到了OWC10(Office Web Components),使用MSVC编译器的话无法正...

1739
来自专栏数据小魔方

动态图表系列1|数据有效性(index+match函数)

今天开始跟大家分享动态图表的技巧1——数据有效性(index+match函数)! 动态图表之——数据有效性(index+match) 首先利用数据验证制作下拉菜...

3627
来自专栏深度学习计算机视觉

java RMI学习笔记RMI(Remote Method)Java RMI 威力强大Java远程消息交换协议JRMP使用RMI优点RMI网络模型网络模型RMI的工作原理RMI远程调用步骤:编码实现j

RMI(Remote Method) Invocation):远程方法调用,即在RPC的基础上有向前迈进了一步,提供分布式对象间的通讯。允许运行在一个java虚...

2705
来自专栏积累沉淀

干货--Redis 30分钟快速入门

一、 redis环境搭建 1.简介        redis是一个开源的key-value数据库。它又经常被认为是一个数据结构服务器。因为它的value不仅...

25110
来自专栏刘望舒

设计模式(十五)状态模式

前言 建议在阅读本文前先阅读设计模式(十一)策略模式这篇文章,虽说状态模式和策略模式的结构几乎是相同的,但是它们所解决的问题是不同的,读完这两篇文章你就会有了答...

1836

扫码关注云+社区