html问题记录
1)Chrome无法打开文件的错误 [Not allowed to load local resource: file://XXXX]
将文件拷贝到相对路径/images下
或者安装插件
2)jquery选择器
参见https://www.cnblogs.com/onlys/articles/jQuery.html
$("#myELement") 选择id值等于myElement的元素
$("div") 选择所有的div标签元素,返回div元素数组
$(".myClass") 选择使用myClass类的所有元素
$("*") 选择文档中的所有的元素
层叠选择器:
$("form input") 选择所有的form元素中的input元素
$("#main > *") 选择id值为main的所有的子元素
$("label + input") label后面直接跟一个input标签的input
$("#prev ~ div") 同胞选择器
基本过滤选择器:
$("tr:first") 选择所有tr元素的第一个
$("tr:last") 选择所有tr元素的最后一个
$("tr:even") 选择所有的tr元素的偶序号
$("tr:odd") 选择所有的tr元素的第1,3,5... .
$("td:eq(2)") 选择所有的td元素中序号为2的那个td
$("td:gt(4)") 选择td元素中序号大于4的所有td元素
$("td:ll(4)") 选择td元素中序号小于4的所有的td
$("div:contains('John')") 选择所有div中含有John文本的元素
$("td:empty") 选择所有的为空(也不包括文本节点)的
$("div:has(p)") 选择所有含有p标签的div元素
$("td:parent") 选择所有的以td为父节点的元素数组
可视化过滤选择器:
$("div:hidden") 选择所有的被hidden的div元素
$("div:visible") 选择所有的可视化的div元素
属性过滤选择器:
$("div[id]") 选择所有含有id属性的div元素
$("input[name='newsletter']") 选择所有的name属性等于
$("input[name!='newsletter']") 选择所有的name属性不等于
$("input[name^='news']") 以'news'开头的input元素
$("input[name$='news']") 以'news'结尾的input元素
$("input[name*='man']") 含'news'的input元素
子元素过滤选择器:
$("div span:first-child") div元素的第一个子节点的数组
$("div span:last-child") div元素的最后一个节点的数组
$("div button:only-child") 只有唯一一个子节点的div
表单元素选择器:
$(":input") 表单包括input, textarea, select 和 button
$(":text") 选择所有的text input元素
$(":password") 选择所有的password input元素
$(":radio") 选择所有的radio input元素
$(":checkbox") 选择所有的checkbox input元素
$(":submit") 选择所有的submit input元素
$(":image") 选择所有的image input元素
$(":reset") 选择所有的reset input元素
$(":button") 选择所有的button input元素
$(":file") 选择所有的file input元素
$(":hidden") 选择所有类型为hidden的input元素或表单的隐藏域
表单元素过滤选择器:
$(":enabled") 选择所有的可操作的表单元素
$(":disabled") 选择所有的不可操作的表单元素
$(":checked") 选择所有的被checked的表单元素
$("select option:selected") 选择所有的select 的子元素中被selected的元素
$("A B") 查找A元素下面的所有子节点,包括非直接子节点
$("A>B") 查找A元素下面的直接子节点
$("A+B") 查找A元素后面的兄弟节点,包括非直接子节点
$("A~B") 查找A元素后面的兄弟节点,不包括非直接子节点
3)js控制台输出
参见http://blog.csdn.net/wl110231/article/details/7594909
console.log()
%s 字符串
%d, %i 整型(暂不支持数字型)
%f 浮点型 (暂不支持数字型)
%o 链接对象
console.debug()输出一条消息,包含一个指向代码调用位置的超链接。
console.info()输出一条带有“信息”图标的消息和一个指向代码超链接
console.warn()输出一条带有“警告”图标的消息和一个指向代码超链接
console.error()输出一条带有“错误”图标的消息和位置的超链接。
console.assert()测试表达式expression是否为真。
console.dir(object)以列表形式输出一个对象的所有属性
console.dirxml(node)输出一个HTML或者XML元素的XML源代码
console.trace()
console.time(name)创建一个名字为name的计时器
console.timeEnd(name)停止计时器并输出所耗时间(毫秒)。
4)uri.js使用(URI.js is a javascript library for working with URLs.)
https://medialize.github.io/URI.js/
- web worker使用
参见http://www.cnblogs.com/feng_013/archive/2011/09/20/2175007.html
Web Worker的基本原理就是在当前javascript的主线程中,使用Worker类加载一个javascript文件来开辟一个新的线程,起到互不阻塞执行的效果,并且提供主线程和新线程之间数据交换的接口:postMessage,onmessage。
/worker.js
onmessage =function (evt){
var d = evt.data;//通过evt.data获得发送来的数据
postMessage( d );//将获取到的数据发送会主线程
}
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript">
//WEB页主线程
var worker =new Worker("worker.js"); //创建一个Worker对象并向它传递将在新线程中执行的脚本的URL
worker.postMessage("hello world"); //向worker发送数据
worker.onmessage =function(evt){ //接收worker传过来的数据函数
console.log(evt.data); //输出worker发送来的数据
}
</script>
</head>
<body></body>
</html>
6)本地存储
参见http://blog.csdn.net/hbcui1984/article/details/8466743
Web Storage是HTML5引入的一个非常重要的功能,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多,cookie大小被限制在4KB,Web Storage官方建议为每个网站5MB。
Web Storage又分为两种:
sessionStorage
localStorage
从字面意思就可以很清楚的看出来,sessionStorage将数据保存在session中,浏览器关闭也就没了;而localStorage则一直将数据保存在客户端本地;
不管是sessionStorage,还是localStorage,可使用的API都相同,常用的有如下几个(以localStorage为例):
保存数据:localStorage.setItem(key,value);
读取数据:localStorage.getItem(key);
删除单个数据:localStorage.removeItem(key);
删除所有数据:localStorage.clear();
得到某个索引的key:localStorage.key(index);
7)fieldset
组合表单中的相关元素