<!--1.语义化标签的作用--> <!--1.1 从开发角度考虑是提高代码的可读性可维护性--> <!--1.2 网站的发布者：seo 搜索引擎优化 --> <!--2.语义化标签的兼容问题--> <!--2.1 IE9以下不支持H5标签（大部分css3属性，一些H5的api）--> <!--2.2 IE9以下不认识，把这些标签当做行内元素去看待--> <!--2.3 语义化标签需要动态创建 document.createElement('header') 同时设置块级元素--> <!--2.4 有一款插件能帮你完成这件事件 html5shiv.js --> <!--2.5 必须引入在头部，在页面结构之前，提前解析h5标签--> <!--2.6 优化处理：支持H5标签的不需要加载，IE9以下不支持H5加载--> <!--2.7 js判断客户的浏览器版本可以做到，但是不能做到js提前加载--> <!--2.8 条件注释：网页的任何地方 根据浏览器版本去加载内容（html标签）--> <!--2.9 固定语法 lt 小于 gt 大于 lte 小于等于 gte 大于等于 -->
条件注释
<!--[if lte IE 8]>
<script src="html5shiv.min.js"></script>
<![endif]-->
H5 知识
H5 api
1. querySelector() 获取符合选择器的第一个元素
2. querySelectorAll() 获取符合选择器的所有元素
1. jquery操作类的方法：addClass() removeClass() toggleClass() hasClass() 2. h5也有类似的api 基于一个对象classList的方法 add() remove() toggle() contains() //contains判断有误类，返回布尔值 eg: <script> var dom = document.querySelector('li:nth-child(2)'); /*1.获取类*/ console.log(dom.classList); /* DOM.classList 获取的是这个DOM元素上的所有class */ /*2.操作类*/ dom.classList.add('blue'); dom.classList.remove('red'); document.querySelector('button').onclick = function () { dom.classList.toggle('toggle'); console.log(dom.classList.contains('red')); } </script>
H5自定义属性 ： date-*
H5的date-*属性： 更改的是DOM
var div= document.querySelector('div') //获取
div.dateset //获取元素的所有date 对象
div.dateset.user //获取单个
jQuery的date-*属性 ： 更改的是内存（对象存储的位置内存，并不修改DOM）
$('div').date() //获取所有date属性
$('div').date('user') // 获取单个
$('div').date('user','16') //设置属性值
<meta http-equiv="refresh" content="0; url="> 404重定向 页面定期刷新，如果加url的，则会重新定向到指定的网页，content后面跟的是时间（单位秒），把这句话加到指定网页的<head></head>里
分享到Facebook links yotube
<div class=fx><a class=fb href="javascript:window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(document.location.href)+'&t='+encodeURIComponent(document.title),'_blank','toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=600, height=450,top=100,left=350');void(0)"></a> <a class=ytb href=#></a> <a class=tw href="javascript:window.open('http://twitter.com/home?status='+encodeURIComponent(document.location.href)+' '+encodeURIComponent(document.title),'_blank','toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=600, height=450,top=100,left=350');void(0)"></a> <a class=in href="javascript:window.open('http://www.linkedin.com/shareArticle?mini=true&url='+encodeURIComponent(document.location.href)+'&title='+encodeURIComponent(document.title)+'&source='+encodeURIComponent(document.location.href),'_blank','toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=600, height=450,top=100,left=350');void(0)"></a> </div>
JsFormat：
这里下载这插件包 https://github.com/jdc0589/JsFormat ，点油下角的zip就能下载
使用方法：
1、快捷键：ctrl+alt+f
html-css-js prettify：
1、快捷键：ctrl+shift+P
3、输入html-css-js prettify，选择html-css-js prettify
电子数据相关的取证：网站被侵权等
https://chenhuichao.com/ 陈回潮的学习博客
//安装ruby 配置sass 环境
移除之前的环境，使用国内镜像
gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/
//安装完成之后，查看源
gem sources -l
//提示如下
*** CURRENT SOURCES ***
https://gems.ruby-china.com/
gem install sass
编译参数：--no-cache %FileName% %FileBaseName%.css --style compact
参考链接：https://gems.ruby-china.com/
滚动到页头 <script> $(window).scroll(function(){ $("#scrolls").click(function(){ $("html, body").animate({scrollTop:0 },300); }) }); </script>
监听span里面text 文本的变化触发事件
$("#select2-chosen-6").bind("DOMNodeInserted",function(e){
console.log($(e.target).html());
})
jquery : stickUp
#获取访问用户的IP地址 <script src="http://pv.sohu.com/cityjson?ie=utf-8"></script> document.write(returnCitySN["cip"]+','+returnCitySN["cname"])
$.ajax({ type: "POST", url: "test.json", data: {ip:'168.122.122.12'}, dataType: "json", success: function(data){ } });
请求轮询：数据实时更新——每隔xx秒需要刷新一次接口——即需要用到定时器相关原理，只使用setInterval 会造成定时器叠加，致页面卡死
window.setInterval(() => { setTimeout(fun, 0) }, 30000)
//点击遮罩层隐藏，解决方案是便是判断event target ，并且保证 这个时间不会冒泡。
$('.overlay').click(function(e){ if (e.target == e.currentTarget) closeOverlay(); });
cookie小记 //判断cookie是否存在 getCookie(name) { var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)")); if(arr != null) { this.options=JSON.parse(arr[2]) }else{ this.getScreen() } } //设置增加cookie params: exdays(定时过期)
设置定cookie 为数组内含对象时需要转换为字符串 eg: var data=[{a:1},{a:2}] JSON.stringify(data)
setCookie(c_name,exdays) { var exdate = new Date(); exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); window.document.cookie = "secondCategory" + "=" + c_name + ";path=/;expires=" + exdate.toGMTString(); }
修改滚动条样式 /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 4px; /*滚动条宽度*/ height: 10px; /*滚动条高度*/ } /*定义滚动条轨道 内阴影+圆角*/ ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; /*滚动条的背景区域的圆角*/ background-color: #eee;/*滚动条的背景颜色*/ } /*定义滑块 内阴影+圆角*/ ::-webkit-scrollbar-thumb { border-radius: 10px; /*滚动条的圆角*/ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: #999; /*滚动条的背景颜色*/ }
// 对象深度克隆方法 export function cloneObj(obj) { let str; let newobj = obj.constructor === Array ? [] : {}; if (typeof obj !== 'object') { return; } else if (window.JSON) { str = JSON.stringify(obj); // 序列化对象 newobj = JSON.parse(str); // 还原 } else { // 如果不支持以上方法 for (const i in obj) { if ({}.hasOwnProperty.call(obj, i)) { newobj[i] = typeof obj[i] === 'object' ? cloneObj(obj[i]) : obj[i]; } } } return newobj; }