作为一名传统C/C++码农，在互联网时代的今天，不得不学习一些web开发技术，在自学前端开发的过程中，也亲身实践了两个项目，从基础编码到学会使用框架，收获甚多。
在决定开发Yue虚拟化平台时候，自己买了几本HTML5，CSS，JavaScript相关的基础书籍，开始自学之旅，在对前端开发流程有了初步认识后，就开始研发自己的项目。在研发过程中，大量的查阅文档资料，最终历时5个月，才将项目完成。那时候，每天晚上下班到家后，自己坐在书房里就开始编码，经常熬到后半夜，却也异常的兴奋，因为从事开发多年，当家里人再问我码农是做什么的时候，终于可以拿出直观的东西了。
必定前端开发接触的少，也不是工作的主要部分，完全是因为兴趣，因此，平时开发前端机会也比较少，对于自己经常用到的模块，还是需要总结一下，下次可以直接引用。
javascript基础
数据类型转换
计算
安全
数据库
网络和加速
企业服务
1.json->stringJSON.stringify(obj)2.string->json或objvar obj = eval("(" + jsonstr + ")”);3.obj->strobj.toString()4.number->strString(num)5.str->numberparseInt(str)获取对象（即：操作元素节点，nodeType值为1）
文本节点就是文本内容<h2>标题</h2 id=”abc“, name=“mn", “class”=“xyz”>，h2本身就是一个元素节点var obj = document.getElementById("obj_id”) #通过HTML元素的ID属性直接定位，返回一个具体对象var objs = document.getElementByName(“objs_name”) #通过HTML元素的name属性定位，返回一个数组var objs = document.getElementTagName(“tagname”) #通过HTML元素标签名称定位，如：tagname是label，input，div等，返回一个数其他方法IE不支持，不建议使用，如：getElementByClass操作元素的属性（即：操作属性节点，nodeType值2）
文本节点就是文本内容<h2>标题</h2 id=”abc“, name=“mn", “class”=“xyz”>，id,name,class就是属性节点1.部分属性可以通过node.id的方式访问属性节点2.通过dom方法var node = elem.getAttributeNode(“attir_name”) #获取属性节点，然后操作：node.nodeName，node.nodeValuevar node = elem.getAttribute(“attr_name”) #IE不支持，不建议使用JS操作文本（即：操作文本节点，nodeType值3）
文本节点就是文本内容<h2>标题</h2 id=”abc“, name=“mn", “class”=“xyz">，”标题”两个字就是文本节点步骤：获取元素节点—>获取元素节点的子节点方法：node.firstChild.nodeValue方式读写文本节点其实文本节点可以归类为元素节点的子节点新建一个完整的元素节点（包括属性节点和文本节点）
var newElem = document.createElement(“h2”) //创建一个h2元素节点给元素添加属性节点有2种方法：var newAttr = document.creaetAttribute(“id”) //创建id属性节点newElem.setAttributeNode(newAttr) //将属性节点附加到元素节点或newElem.setAttribute(“id”, “abc”) //直接给元素添加属性节点给元素添加文本节：newElem.createTextNode(“这是标题”)将一个元素节点添加到父节点
var newElem = document.createElement(“h2”)parentElem.appendChild(newElem)将一个元素的子节点替换
var element = element.replaceChild(newChild, oldChild)将一个元素在父节点删除
var parent = document.getElementById(“parent”)var child = document.getElementById(“child”)parent.removeChild(child)js处理按钮事件
document.getElementById(“btn”).onclick = function_name;function function_name(){ //do sth}js操作select下拉菜单
var selected = document.getElementById("select_id”)1.获取选项值var index = selected.selectedIndex;var value = selected.options[index].value;2.添加新的optionselected.add(new Option(“新选项"))js操作input文本框
var value = document.getElementsById("input_id").value;js操作单选按钮
var radioBtns = document.getElementByClass(“class_radio”)var i = 0;for( i in radioBtns){ if(radioBtns.checked){//checked是布尔值 //do sth }}js操作复选按钮
document.getElementById('identify').checked //返回值为布尔值置灰操作
document.getElementById("id").setAttribute("disabled", "disabled");js操作css样式
document.getElementById(“id”).style.color = “#FF0000”js获取URL参数(2种方法）
方法1：
function getQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); if (r != null) return unescape(r[2]); return null; }方法2：
function GetRequest() { var url = location.search; //获取url中"?"符后的字串 var theRequest = new Object(); if (url.indexOf("?") != -1) { var str = url.substr(1); strs = str.split("&"); for (var i = 0; i < strs.length; i++) { theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]); } } return theRequest; }使用方法：
var hostname = getQueryString("hostname"); alert(hostname) var port = getQueryString("port"); alert(port) var password = getQueryString("password"); alert(password) var para=GetRequest(); alert(JSON.stringify(para))js打开新的窗口
window.open(url, name, paras)函数，例如：window.open('url.html?hostname=1.1.1.1&port=1234')传统ajax与jQuery发送HTTP请求的方法
传统Ajax方式：
function ajax(url, fnSucc, fnFaild){ //1.创建对象 var oAjax = null; if(window.XMLHttpRequest){ oAjax = new XMLHttpRequest(); }else{ oAjax = new ActiveXObject("Microsoft.XMLHTTP"); } //2.连接服务器 oAjax.open('GET', url, true); //open(方法, url, 是否异步) //3.发送请求 oAjax.send(); //4.接收返回 oAjax.onreadystatechange = function(){ //OnReadyStateChange事件 if(oAjax.readyState == 4){ //4为完成 if(oAjax.status == 200){ //200为成功 fnSucc(oAjax.responseText) }else{ if(fnFaild){ fnFaild(); } } } };}jQuery方式：
$.ajax({ url: “/xxx”, //URL method: “GET/POST/PUT/DELETE”, //HTTP请求类型 async: false, //同步为false，异步为true或默认不写 data: JSON.stringify(jsondata), //POST、PUT、DELETE才有 dataType: "json”, //返回数据类型 beforeSend: function (request) { //发送前做什么处理 request.setRequestHeader('X-CSRFToken', getCookie("csrftoken")) }, success: function (result) { //返回结果处理 //alert(JSON.stringify(result)) } });$.get({ url: "static/html/checkenv.html”, //发送请求的URL地址. data: "", //(可选参数) 要发送给服务器的数据，以 Key/value 的键值对形式表示，会做为QueryString附加到请求URL中 dataType: "json”, //返回数据类型 success: function (result, textStatus, jqXHR) {//返回结果处理 document.getElementById("mainsession").innerHTML = result; } });$.post({ url: "/api/xxx”, //发送请求的URL地址. data: JSON.stringify(jsondata), //(可选参数) 要发送给服务器的数据，以 Key/value 的键值对形式表示 ddataType: "json”, //返回数据类型 success: function (result, textStatus, jqXHR) { document.getElementById("mainsession").innerHTML = result; } });区别：
1.$.ajax可以控制同步，异步请求，而$.get和$.post都是异步
2.$.ajax可以发送前做预处理，而$.get和$.post都不行
其他还有：
load( url, [data], [callback] )
getJSON(url,[data],[callback])
jquery的便利
可以通过jQuery快速实现对HTML-DOC的快速处理。
id选择器$(“#id”).click(function (){ //do sth});类选择器$(“.class”).click(function (){ //do sth});此外，有些操作js无法实现，或实现起来比较复杂，需要用到jquery，遍历json对象：$.each()方法 或 $.map()方法
CSS3与Bootstrap
传统的CSS需要自己完成大量样式的编写，而bootstrap是一个基于css编写的强大样式库，在引用的时候，只需要对HTML元素的class属性中直接引用就可以了。
基本CSS概念方法：
选择器原则：尽量使用ID选择器和class选择器
ID选择器#id{ //some style}类选择去.class{ /some style}其他情况均根据以上两类去复合
布局：
默认每个元素占用一行如果想让两个元素在同一行，使用float属性如果想清除float属性，使用clear属性尽量使用相对布局，即：子元素相对于父元素的位置，position属性设置为relative每个元素都有盒模型，设置margin、border、padding属性定位：
HTML元素的位置，position属性position:relative;相对定位，相对参照物就是他原来的位置，使用相对定位移动div时候，会覆盖其他divposition:absolute;绝对定位，相对于浏览器窗口，已经脱离文档流。一般弹出窗口会这么用（设置了z-index属性）层级关系（图层关系）：
HTML元素显示出图层关系，使用z-index属性，值越大越在上层。z-index值越大，越在最上层超出边界如何处理：
如果浏览器窗口改变，overflow属性，值可以是：visable，hidden，scroll，auto，insert亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
