2018年前端年末小结

前言：2018年即将接近尾声，现对前端基础做一个小结与巩固。

【一、HTML+CSS】：

<!DOCTYPE html>

<html>
<head>

<meta charset="utf-8">
<title>网页标题</title>

<style type="text/css">
#div1, #div2{
width:150px; height:50px; margin:10px 0;padding:10px;border:1px solid #aaaaaa;
}
p:first-child{
background:yellow;
}
a:hover{
/* text-decoration:none; */
border: 1px solid;
padding: 5px;
border-radius: 50%;
}
</style>

<link rel="stylesheet" type="text/css" href="#"/>

</head>
<body>

<h1 id="abc">我的第一个标题</h1>
<p class="className" style="-moz-animation: .25s, 100ms;" title="我的第一个段落">
翻译: <q>My first paragraph.</q><br/>
<b>粗体文本</b><br/>
<code>计算机代码</code><br/>
<em>强调文本</em><br<br/>/>
<i>斜体文本</i><br/>
<kbd>键盘输入</kbd> <br/>
<pre>预格式化文本</pre><br/>
<small>更小的文本</small><br/>
<strong>重要的文本</strong><br/>
<abbr> （缩写）</abbr><br/>
<address> （联系信息）</address><br/>

<p><bdo dir="rtl">该段落文字从右到左显示。</bdo></p>
<blockquote> （从另一个源引用的部分）</blockquote><br/>
<cite> （工作的名称）</cite><br/>
<del> （删除的文本）</del><br/>
<ins> （插入的文本）</ins><br/>
<sub> （下标文本）</sub><br/>
<sup> （上标文本）</sup><br/>
</p>


<br/>
<span>块标签</span>
<br/>

<a href="#abc" target="_blank" style="text-decoration:none;">回到顶栏并跳转新页面</a>
<br/>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="#" alt="可拖拽的图片" width="120" height="30" draggable="true" ondragstart="drag(event)"/>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<hr/>
<h6>最小的标题：<del>javascript</b></h6>

<textarea rows="10" cols="30" id="demo">我是一个文本框</textarea>
<br/>

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
<button type="button" onclick="myFunction()" style="color: red;">点击按钮</button>

<script type="text/javascript">
//img:drag阻止默认事件+draggable允许拖拽
function drag(ev){
ev.dataTransfer.setData("Text",ev.target.id);
}
//***********************************************
//div
function drop(ev){
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
function allowDrop(ev){
ev.preventDefault();
}
//点击
function myFunction(){
document.getElementById("demo").style.color="greenyellow";
alert("点击改变demo样式")
}
</script>

<ul style="list-style-type:none">
<li>1.项目</li>
<li>2.项目</li>
</ul>

<table border="1" style="tr:nth-child(2n){background:orange;}">
<tr>
<th>表格标题</th>
<th>表格标题</th>
</tr>
<tr>
<td>表格数据</td>
<td>表格数据</td>
</tr>
</table>

<iframe src="demo_iframe.htm" frameborder="0" name="iframe_a"></iframe><br/>
<a href="#" target="iframe_a">点击切换框架内容</a>

<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
版权 © xxx.com
</div>
</body>
</html>

【2.JavaScript】：

1.HTML5新特性：web存储

保存数据：localStorage.setItem(key,value);
读取数据：localStorage.getItem(key);
删除单个数据：localStorage.removeItem(key);
删除所有数据：localStorage.clear();
得到某个索引的key：localStorage.key(index);

//保存数据  
function save(){  
    var site = new Object;
    site.keyname = document.getElementById("keyname").value;//获取表单输入的keyname或userName
    site.sitename = document.getElementById("sitename").value;  
    site.siteurl = document.getElementById("siteurl").value;
    var str = JSON.stringify(site); // 将对象转换为字符串,即{xxx}=>‘{xxx}’
    localStorage.setItem(site.keyname,str);  //【长期保存本地数据到浏览器】
    alert("保存成功");
}  
//查找数据  
function find(){  
    var search_site = document.getElementById("search_site").value;  
    var str = localStorage.getItem(search_site);  //获【取本地数据，免登陆】
    var find_result = document.getElementById("find_result");
    var site = JSON.parse(str);  
    find_result.innerHTML = search_site + "的网站名是：" + site.sitename + "，网址是：" + site.siteurl;  
}
//删除数据   
function del(name) {
  localStorage.removeItem(name);//【注销登陆】
  alert("删除成功!");
  loadAll();
}

2.JavaScript：cookie存储

设置（创建/覆盖）cookie 值的函数，如：document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";//key:value+过期时间+cookie路径（当前url）
获取 cookie 值的函数，如：var x = document.cookie;//返回所有
删除 cookie 值的函数，如：document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";//value设为空

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<head>
<script>
function setCookie(cname,cvalue,exdays){
    var d = new Date();
    d.setTime(d.getTime()+(exdays*24*60*60*1000));
    var expires = "expires="+d.toGMTString();
    document.cookie = cname+"="+cvalue+"; "+expires;
}
function getCookie(cname){
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++) {
        var c = ca[i].trim();
        if (c.indexOf(name)==0) { return c.substring(name.length,c.length); }
    }
    return "";
}
function checkCookie(){
    var user=getCookie("username");
    if (user!=""){
        alert("欢迎 " + user + " 再次访问");
    }
    else {
        user = prompt("请输入你的名字:","");
          if (user!="" && user!=null){
            setCookie("username",user,30);
        }
    }
}
</script>
</head>
    
<body onload="checkCookie()"></body>
    
</html>

3.事件：常用的6个dom事件

事件	描述
onchange	HTML 元素改变
onclick	用户点击 HTML 元素
onmouseover	用户在一个HTML元素上移动鼠标
onmouseout	用户从一个HTML元素上移开鼠标
onkeydown	用户按下键盘按键
onload	浏览器已完成页面的加载

【补充】：

（1-UI（用户界面事件）：当用户与页面的上的元素交互时发生，但不一定与用户操作有关的事件。

load事件：当页面加载完毕时在qindow上触发，当图像加载完毕时在ing元素上触发，等等，页面完全加载完毕（包括所有图像，js文件，css等外部文件资源）时触发，img只要设置了src就会下载；

unload事件：当页面完全卸载时在window上触发，当一个页面切换到另一个页面时就会触发，经常利用这个事件来清除引用，减少内存的泄露

error：当发生js错误时在window上触发，当图像无法加载时在img上触发
abort事件：当用户停止下载过程时，如果嵌入的内容没有加载完成，则在object元素上触发
select：当用户选择文本框（input或textarea）中的一或多个字符时触发
resize：当窗口或框架的大小发生改变时在window上触发
scroll：当用户滚动带滚动条的元素中的内容时，在该元素上触发

（2-焦点事件：当元素获得焦点或失去焦点时触发
blur：失去焦点时触发，这个事件不会冒泡
focus：获得焦点时触发，不冒泡
focusin：在获得焦点时触发，冒泡，DOM3新增
focusout：在失去焦点时触发，冒泡
（3-鼠标事件：当用户通过鼠标在页面上执行操作时触发
click：单击事件，用户单机鼠标按钮（一般是左键）或按下回车键时触发
dbclick：双击事件，当双击鼠标时触发（一般是左键）
mousedown：当用户在按下任意鼠标按钮时触发
mouseup：当用户释放鼠标按钮时触发
mouseenter：在鼠标光标从外部首次（是指每次进入元素，并不是只执行一次）时触发，而且这个事件不冒泡，而且在光标移到到后代元素上不会触发（从父区域进入子区域，再从子区域进入父区域是不会触发的，因为他认为子区域也是他的一部分），DOM3定义的
mouseleave：和mouseenter是一对，刚好相反
mousemove：当鼠标指针在元素内部移时重复的触发
mouseout：当鼠标指针位于一个元素上方，然后移到到另一个元素上方时触发，另一个元素可能是外部元素也可能是他的后代元素，因为他不认为后代元素所在的区域是他的一部分
mouseover：和mouseout是一对，恰好相反

除了mouseleave和mouseenter之外都会冒泡
click事件只有触发了mousedown和mouseup之后才会触发，代表click只有触发两次clic才会触发，如果取消了之前的事件将会不触发
鼠标事件都是在浏览器视口中的特定位置发生的，可以通过事件的属性获取到。
视口区（客户区）坐标位置：clientX和clientY可以获取到位置信息。所有浏览器都支持这两个属性，是相对于浏览器的视口而不是页面而言的，不包括地址栏等
页面坐标位置：pageX和pageY，相对于页面而言，ie8及更早版本不支持这两个属性，不过我们可以计算出来
event.clientX + （document.body.scrollLeft + document.documentElement.scrollLeft）
event.clientY + （document.body.scrollTop + document.documentElement.scrollTop）
屏幕坐标位置：相对于整个电脑屏幕，screenX和screenY

（4-滚轮事件：当使用鼠标滚轮（或类似事件）时触发
mousewheel：跟踪鼠标滚轮或笔记本触摸板
（5-文本事件：当在文档中输入时触发
textinput：在文本显示给用户之前更容易拦截文本，是对keypress的补充
可编辑区输入字符键才可以出发
ie9才支持，firefox不支持
（6-键盘事件：当用户通过键盘在页面上执行操作时触发
keydown：用户按下键盘上的任意键时触发，而且按住不放的话，会重复触发此事件
keypress：用户按下键盘上的字符键时触发，而且按住不放的话，会重复触发此事件，按下esc也会触发
keyup：用户释放键盘上的键时触发
所有元素都支持这三个事件

keydown-》keypress-》textinput-》keyup
keyup和keydown的event有个keycoe属性，代表键盘码，与ASCII相对应
（7-合成事件：当为IME（input method editor，输入法编辑器）输入字符触发
同时按下几个键才能输入一个字符
（8-变动事件：当底层DOM结构发生变化时触发
DOM结构发生变化时触发

（9.事件委托：本来该自己做的事情，委托给别人做。
利用的是事件冒泡原理，使用event.target获取触发事件的目标元素。
优点：
1- 提高性能，只需要注册一次事件，也方便移除事件。解决事件处理程序过多的问题，在DOM树中尽量最高的层次上添加一个事件处理程序，只指定一个事件处理程序，就可以管理某一类型的所有事件。
2- 给动态生成的元素添加事件。可以解决动态生成的子元素绑定不上事件的问题。
<button id="test">点我呀</button>
<div id="f" class="f"></div>

var test =document.getElementById('test');
var f =document.getElementById('f');
var i =0;

test.onclick=function() {
varp =document.createElement('p');
p.innerHTML= i++;
f.appendChild(p);
}

f.onclick=function(e) {
console.log(e.target.innerHTML);
}

（10.模拟事件
var e = document.createEvent（自定义事件名称）
node.dispatchEvent(e);

new CustomEvent(事件名，数据)：兼容性不好

（11.其他：

form有submit事件，表单的提交最好使用submit事件，不使用onclick事件，因为不同的浏览器之间可能存在不同的时差，submit事件和click之间的顺序不同的浏览器之间是不同的表单还有focus事件，blur事件，change事件select的change事件是只有改变了选择项就会发生，而其他表单是在值被修改且失去焦点的时候才会发生：

序列化表单：formData

var data = new formData();
data.append(名，值)

3.Windows方法：

window.open() - 打开新窗口
window.document.getElementById("header");//document 也是 window 对象的属性之一：
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸
window.innerHeight - 浏览器窗口的内部高度(包括滚动条)
window.innerWidth - 浏览器窗口的内部宽度(包括滚动条)
location.hostname 返回 web 主机的域名(如：kp);//可不使用 window 这个前缀
location.pathname 返回当前页面的路径和文件名(home/path);
location.port 返回 web 主机的端口（80 或 443）;
location.protocol 返回所使用的 web 协议（http:// 或 https://）;
location.href 属性返回当前页面的 URL。
location.assign(url) 方法加载新的文档//替换当前原有页面
history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击向前按钮相同
alert("sometext");//提示
confirm(true);//确认
prompt("sometext","defaultvalue");//输入确认
setInterval("javascript function",milliseconds);//循环
clearInterval(intervalVariable)
setTimeout("javascript function", milliseconds);
clearTimeout(timeoutVariable)
navigator//浏览器信息可被浏览器使用者更改

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
    
<div id="example"></div>
<script>
txt = "<p>浏览器代号: " + navigator.appCodeName + "</p>";
txt+= "<p>浏览器名称: " + navigator.appName + "</p>";
txt+= "<p>浏览器版本: " + navigator.appVersion + "</p>";
txt+= "<p>启用Cookies: " + navigator.cookieEnabled + "</p>";
txt+= "<p>硬件平台: " + navigator.platform + "</p>";
txt+= "<p>用户代理: " + navigator.userAgent + "</p>";
txt+= "<p>用户代理语言: " + navigator.systemLanguage + "</p>";
document.getElementById("example").innerHTML=txt;
</script>

</body>
</html>

来源：oschina

链接：https://my.oschina.net/u/4303806/blog/3700013

标签

html5

javascript