前端開發(fā)基礎(chǔ)
作為一名傳統(tǒng)C/C++碼農(nóng)，在互聯(lián)網(wǎng)時(shí)代的今天，不得不學(xué)習(xí)一些web開發(fā)技術(shù)，在自學(xué)前端開發(fā)的過程中，也親身實(shí)踐了兩個(gè)項(xiàng)目，從基礎(chǔ)編碼到學(xué)會(huì)使用框架，收獲甚多。
10年積累的成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先建設(shè)網(wǎng)站后付款的網(wǎng)站建設(shè)流程，更有長(zhǎng)寧免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。
在決定開發(fā)Yue虛擬化平臺(tái)時(shí)候，自己買了幾本HTML5，CSS，JavaScript相關(guān)的基礎(chǔ)書籍，開始自學(xué)之旅，在對(duì)前端開發(fā)流程有了初步認(rèn)識(shí)后，就開始研發(fā)自己的項(xiàng)目。在研發(fā)過程中，大量的查閱文檔資料，最終歷時(shí)5個(gè)月，才將項(xiàng)目完成。那時(shí)候，每天晚上下班到家后，自己坐在書房里就開始編碼，經(jīng)常熬到后半夜，卻也異常的興奮，因?yàn)閺氖麻_發(fā)多年，當(dāng)家里人再問我碼農(nóng)是做什么的時(shí)候，終于可以拿出直觀的東西了。
必定前端開發(fā)接觸的少，也不是工作的主要部分，完全是因?yàn)榕d趣，因此，平時(shí)開發(fā)前端機(jī)會(huì)也比較少，對(duì)于自己經(jīng)常用到的模塊，還是需要總結(jié)一下，下次可以直接引用。
javascript基礎(chǔ)
數(shù)據(jù)類型轉(zhuǎn)換
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)
獲取對(duì)象（即：操作元素節(jié)點(diǎn)，nodeType值為1）
文本節(jié)點(diǎn)就是文本內(nèi)容標(biāo)題，h2本身就是一個(gè)元素節(jié)點(diǎn)
var obj = document.getElementById("obj_id”) #通過HTML元素的ID屬性直接定位，返回一個(gè)具體對(duì)象
var objs = document.getElementByName(“objs_name”) #通過HTML元素的name屬性定位，返回一個(gè)數(shù)組
var objs = document.getElementTagName(“tagname”) #通過HTML元素標(biāo)簽名稱定位，
如：tagname是label，input，div等，返回一個(gè)數(shù)
其他方法IE不支持，不建議使用，如：getElementByClass
操作元素的屬性（即：操作屬性節(jié)點(diǎn)，nodeType值2）
文本節(jié)點(diǎn)就是文本內(nèi)容標(biāo)題，id,name,class就是屬性節(jié)點(diǎn)
1.部分屬性可以通過node.id的方式訪問屬性節(jié)點(diǎn)
2.通過dom方法
var node = elem.getAttributeNode(“attir_name”) #獲取屬性節(jié)點(diǎn)，然后操作：node.nodeName，node.nodeValue
var node = elem.getAttribute(“attr_name”) #IE不支持，不建議使用
JS操作文本（即：操作文本節(jié)點(diǎn)，nodeType值3）
文本節(jié)點(diǎn)就是文本內(nèi)容標(biāo)題，”標(biāo)題”兩個(gè)字就是文本節(jié)點(diǎn)
步驟：獲取元素節(jié)點(diǎn)—>獲取元素節(jié)點(diǎn)的子節(jié)點(diǎn)
方法：node.firstChild.nodeValue方式讀寫文本節(jié)點(diǎn)
其實(shí)文本節(jié)點(diǎn)可以歸類為元素節(jié)點(diǎn)的子節(jié)點(diǎn)
新建一個(gè)完整的元素節(jié)點(diǎn)（包括屬性節(jié)點(diǎn)和文本節(jié)點(diǎn)）
var newElem = document.createElement(“h2”) //創(chuàng)建一個(gè)h2元素節(jié)點(diǎn)
給元素添加屬性節(jié)點(diǎn)有2種方法：
var newAttr = document.creaetAttribute(“id”) //創(chuàng)建id屬性節(jié)點(diǎn)
newElem.setAttributeNode(newAttr) //將屬性節(jié)點(diǎn)附加到元素節(jié)點(diǎn)
或
newElem.setAttribute(“id”, “abc”) //直接給元素添加屬性節(jié)點(diǎn)
給元素添加文本節(jié)：
newElem.createTextNode(“這是標(biāo)題”)
將一個(gè)元素節(jié)點(diǎn)添加到父節(jié)點(diǎn)
var newElem = document.createElement(“h2”)
parentElem.appendChild(newElem)
將一個(gè)元素的子節(jié)點(diǎn)替換
var element = element.replaceChild(newChild, oldChild)
將一個(gè)元素在父節(jié)點(diǎn)刪除
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.獲取選項(xiàng)值
var index = selected.selectedIndex;
var value = selected.options[index].value;
2.添加新的option
selected.add(new Option(“新選項(xiàng)"))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操作復(fù)選按鈕
document.getElementById('identify').checked //返回值為布爾值
置灰操作
document.getElementById("id").setAttribute("disabled", "disabled");
js操作css樣式
document.getElementById(“id”).style.color = “#FF0000”
js獲取URL參數(shù)(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)函數(shù)，例如：window.open('url.html?hostname=1.1.1.1&port=1234')
傳統(tǒng)ajax與jQuery發(fā)送HTTP請(qǐng)求的方法
傳統(tǒng)Ajax方式：
function ajax(url, fnSucc, fnFaild){
//1.創(chuàng)建對(duì)象
var oAjax = null;
if(window.XMLHttpRequest){
oAjax = new XMLHttpRequest();
}else{
oAjax = new ActiveXObject("Microsoft.XMLHTTP");
}
//2.連接 }
});
區(qū)別：
1.$.ajax可以控制同步，異步請(qǐng)求，而$.get和$.post都是異步
2.$.ajax可以發(fā)送前做預(yù)處理，而$.get和$.post都不行
其他還有：
load( url, [data], [callback] )
getJSON(url,[data],[callback])
jquery的便利
可以通過jQuery快速實(shí)現(xiàn)對(duì)HTML-DOC的快速處理。
id選擇器
$(“#id”).click(function (){
//do sth
});
類選擇器
$(“.class”).click(function (){
//do sth
});
此外，有些操作js無法實(shí)現(xiàn)，或?qū)崿F(xiàn)起來比較復(fù)雜，需要用到j(luò)query，遍歷json對(duì)象：$.each()方法 或 $.map()方法
CSS3與Bootstrap
傳統(tǒng)的CSS需要自己完成大量樣式的編寫，而bootstrap是一個(gè)基于css編寫的強(qiáng)大樣式庫，在引用的時(shí)候，只需要對(duì)HTML元素的class屬性中直接引用就可以了。
基本CSS概念方法：
選擇器原則：盡量使用ID選擇器和class選擇器
ID選擇器
#id{
//some style
}
類選擇去
.class{
/some style
}
其他情況均根據(jù)以上兩類去復(fù)合
布局：
默認(rèn)每個(gè)元素占用一行
如果想讓兩個(gè)元素在同一行，使用float屬性
如果想清除float屬性，使用clear屬性
盡量使用相對(duì)布局，即：子元素相對(duì)于父元素的位置，position屬性設(shè)置為relative
每個(gè)元素都有盒模型，設(shè)置margin、border、padding屬性
定位：
HTML元素的位置，position屬性
position:relative;相對(duì)定位，相對(duì)參照物就是他原來的位置，使用相對(duì)定位移動(dòng)div時(shí)候，會(huì)覆蓋其他div
position:absolute;絕對(duì)定位，相對(duì)于瀏覽器窗口，已經(jīng)脫離文檔流。一般彈出窗口會(huì)這么用（設(shè)置了z-index屬性）
層級(jí)關(guān)系（圖層關(guān)系）：
HTML元素顯示出圖層關(guān)系，使用z-index屬性，值越大越在上層。
z-index值越大，越在最上層
超出邊界如何處理：
如果瀏覽器窗口改變，overflow屬性，值可以是：visable，hidden，scroll，auto，insert
網(wǎng)頁題目：前端開發(fā)基礎(chǔ)
當(dāng)前路徑：http://m.jiaotiyi.com/article/pcshhg.html