html问题记录

最新推荐文章于 2024-08-14 10:15:39 发布

qq_33638017

最新推荐文章于 2024-08-14 10:15:39 发布

阅读量224

点赞数

分类专栏：网页文章标签： html

网页专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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