作爲一名傳統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)
文本節點就是文本內容<h1>標題</h1 id=”abc“, name=“mn", “class”=“xyz”>,h1本身就是一個元素節點
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)
文本節點就是文本內容<h1>標題</h1 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)
文本節點就是文本內容<h1>標題</h1 id=”abc“, name=“mn", “class”=“xyz">,”標題”兩個字就是文本節點
步驟:獲取元素節點—>獲取元素節點的子節點
方法:node.firstChild.nodeValue方式讀寫文本節點
其實文本節點可以歸類爲元素節點的子節點
新建一個完整的元素節點(包括屬性節點和文本節點)
var newElem = document.createElement(“h1”) //創建一個h1元素節點
給元素添加屬性節點有2種方法:
var newAttr = document.creaetAttribute(“id”) //創建id屬性節點
newElem.setAttributeNode(newAttr) //將屬性節點附加到元素節點
或
newElem.setAttribute(“id”, “abc”) //直接給元素添加屬性節點
給元素添加文本節:
newElem.createTextNode(“這是標題”)
將一個元素節點添加到父節點
var newElem = document.createElement(“h1”)
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