作为一名传统C/C++码农,在互联网时代的今天,不得不学习一些web开发技术,在自学前端开发的过程中,也亲身实践了两个项目,从基础编码到学会使用框架,收获甚多。
在决定开发Yue虚拟化平台时候,自己买了几本HTML5,CSS,JavaScript相关的基础书籍,开始自学之旅,在对前端开发流程有了初步认识后,就开始研发自己的项目。在研发过程中,大量的查阅文档资料,最终历时5个月,才将项目完成。那时候,每天晚上下班到家后,自己坐在书房里就开始编码,经常熬到后半夜,却也异常的兴奋,因为从事开发多年,当家里人再问我码农是做什么的时候,终于可以拿出直观的东西了。
必定前端开发接触的少,也不是工作的主要部分,完全是因为兴趣,因此,平时开发前端机会也比较少,对于自己经常用到的模块,还是需要总结一下,下次可以直接引用。
javascript基础
数据类型转换
1.json->string
JSON.stringify(obj)
2.string->json或obj
var obj = eval("(" + jsonstr + ")”);
3.obj->str
obj.toString()
4.number->str
String(num)
5.str->number
parseInt(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.nodeValue
var 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.添加新的option
selected.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时候,会覆盖其他div
position:absolute;绝对定位,相对于浏览器窗口,已经脱离文档流。一般弹出窗口会这么用(设置了z-index属性)
层级关系(图层关系):
HTML元素显示出图层关系,使用z-index属性,值越大越在上层。
z-index值越大,越在最上层
超出边界如何处理:
如果浏览器窗口改变,overflow属性,值可以是:visable,hidden,scroll,auto,insert
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。