前端開發(fā)基礎(chǔ)

    作為一名傳統(tǒng)C/C++碼農(nóng)，在互聯(lián)網(wǎng)時代的今天，不得不學(xué)習(xí)一些web開發(fā)技術(shù)，在自學(xué)前端開發(fā)的過程中，也親身實踐了兩個項目，從基礎(chǔ)編碼到學(xué)會使用框架，收獲甚多。

10年積累的成都網(wǎng)站設(shè)計、成都網(wǎng)站制作經(jīng)驗，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識你，你也不認(rèn)識我。但先建設(shè)網(wǎng)站后付款的網(wǎng)站建設(shè)流程，更有長寧免費網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

    在決定開發(fā)Yue虛擬化平臺時候，自己買了幾本HTML5，CSS，JavaScript相關(guān)的基礎(chǔ)書籍，開始自學(xué)之旅，在對前端開發(fā)流程有了初步認(rèn)識后，就開始研發(fā)自己的項目。在研發(fā)過程中，大量的查閱文檔資料，最終歷時5個月，才將項目完成。那時候，每天晚上下班到家后，自己坐在書房里就開始編碼，經(jīng)常熬到后半夜，卻也異常的興奮，因為從事開發(fā)多年，當(dāng)家里人再問我碼農(nóng)是做什么的時候，終于可以拿出直觀的東西了。

    必定前端開發(fā)接觸的少，也不是工作的主要部分，完全是因為興趣，因此，平時開發(fā)前端機會也比較少，對于自己經(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)

獲取對象（即：操作元素節(jié)點，nodeType值為1）

文本節(jié)點就是文本內(nèi)容<h2>標(biāo)題</h2 id=”abc“, name=“mn", “class”=“xyz”>，h2本身就是一個元素節(jié)點
var obj = document.getElementById("obj_id”)  #通過HTML元素的ID屬性直接定位，返回一個具體對象
var objs = document.getElementByName(“objs_name”)  #通過HTML元素的name屬性定位，返回一個數(shù)組
var objs = document.getElementTagName(“tagname”)  #通過HTML元素標(biāo)簽名稱定位，
如：tagname是label，input，div等，返回一個數(shù)
其他方法IE不支持，不建議使用，如：getElementByClass

操作元素的屬性（即：操作屬性節(jié)點，nodeType值2）

文本節(jié)點就是文本內(nèi)容<h2>標(biāo)題</h2 id=”abc“, name=“mn", “class”=“xyz”>，id,name,class就是屬性節(jié)點
1.部分屬性可以通過node.id的方式訪問屬性節(jié)點
2.通過dom方法
var node = elem.getAttributeNode(“attir_name”)  #獲取屬性節(jié)點，然后操作：node.nodeName，node.nodeValue
var node = elem.getAttribute(“attr_name”)  #IE不支持，不建議使用

JS操作文本（即：操作文本節(jié)點，nodeType值3）

文本節(jié)點就是文本內(nèi)容<h2>標(biāo)題</h2 id=”abc“, name=“mn", “class”=“xyz">，”標(biāo)題”兩個字就是文本節(jié)點
步驟：獲取元素節(jié)點—>獲取元素節(jié)點的子節(jié)點
方法：node.firstChild.nodeValue方式讀寫文本節(jié)點
其實文本節(jié)點可以歸類為元素節(jié)點的子節(jié)點

新建一個完整的元素節(jié)點（包括屬性節(jié)點和文本節(jié)點）

var newElem = document.createElement(“h2”)  //創(chuàng)建一個h2元素節(jié)點
給元素添加屬性節(jié)點有2種方法：
var newAttr = document.creaetAttribute(“id”) //創(chuàng)建id屬性節(jié)點
newElem.setAttributeNode(newAttr) //將屬性節(jié)點附加到元素節(jié)點
或
newElem.setAttribute(“id”, “abc”)  //直接給元素添加屬性節(jié)點
給元素添加文本節(jié)：
newElem.createTextNode(“這是標(biāo)題”)

將一個元素節(jié)點添加到父節(jié)點

var newElem = document.createElement(“h2”)
parentElem.appendChild(newElem)

將一個元素的子節(jié)點替換

var element = element.replaceChild(newChild, oldChild)

將一個元素在父節(jié)點刪除

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操作復(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請求的方法

傳統(tǒng)Ajax方式：

function ajax(url, fnSucc, fnFaild){
    //1.創(chuàng)建對象
    var oAjax = null;
    if(window.XMLHttpRequest){
        oAjax = new XMLHttpRequest();
    }else{
        oAjax = new ActiveXObject("Microsoft.XMLHTTP");
    }
      
    //2.連接服務(wù)器
    oAjax.open('GET', url, true); //open(方法, url, 是否異步)
      
    //3.發(fā)送請求
    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或默認(rèn)不寫
        data: JSON.stringify(jsondata),  //POST、PUT、DELETE才有
        dataType: "json”, //返回數(shù)據(jù)類型
        beforeSend: function (request) { //發(fā)送前做什么處理
            request.setRequestHeader('X-CSRFToken', getCookie("csrftoken"))
        },
        success: function (result) { //返回結(jié)果處理
            //alert(JSON.stringify(result))
        }
    });
$.get({
        url: "static/html/checkenv.html”,  //發(fā)送請求的URL地址.
        data: "", //(可選參數(shù)) 要發(fā)送給服務(wù)器的數(shù)據(jù)，以 Key/value 的鍵值對形式表示，會做為QueryString附加到請求URL中
    dataType: "json”, //返回數(shù)據(jù)類型
        success: function (result, textStatus, jqXHR) {//返回結(jié)果處理
            document.getElementById("mainsession").innerHTML = result;
        }
    });
$.post({
        url: "/api/xxx”,  //發(fā)送請求的URL地址.
        data: JSON.stringify(jsondata),  //(可選參數(shù)) 要發(fā)送給服務(wù)器的數(shù)據(jù)，以 Key/value 的鍵值對形式表示
        ddataType: "json”, //返回數(shù)據(jù)類型
        success: function (result, textStatus, jqXHR) {
            document.getElementById("mainsession").innerHTML = result;
        }
    });

區(qū)別：
1.$.ajax可以控制同步，異步請求，而$.get和$.post都是異步
2.$.ajax可以發(fā)送前做預(yù)處理，而$.get和$.post都不行
其他還有：
load( url, [data], [callback] )
getJSON(url,[data],[callback])

  • jquery的便利

可以通過jQuery快速實現(xiàn)對HTML-DOC的快速處理。

id選擇器
$(“#id”).click(function (){
  //do sth
});
類選擇器
$(“.class”).click(function (){
  //do sth
});

此外，有些操作js無法實現(xiàn)，或?qū)崿F(xiàn)起來比較復(fù)雜，需要用到j(luò)query，遍歷json對象：$.each()方法 或 $.map()方法

  • CSS3與Bootstrap

傳統(tǒng)的CSS需要自己完成大量樣式的編寫，而bootstrap是一個基于css編寫的強大樣式庫，在引用的時候，只需要對HTML元素的class屬性中直接引用就可以了。

基本CSS概念方法：

選擇器原則：盡量使用ID選擇器和class選擇器

ID選擇器
#id{
  //some style
}
類選擇去
.class{
  /some style
}

其他情況均根據(jù)以上兩類去復(fù)合

布局：

默認(rèn)每個元素占用一行
如果想讓兩個元素在同一行，使用float屬性
如果想清除float屬性，使用clear屬性
盡量使用相對布局，即：子元素相對于父元素的位置，position屬性設(shè)置為relative
每個元素都有盒模型，設(shè)置margin、border、padding屬性

定位：

HTML元素的位置，position屬性
position:relative;相對定位，相對參照物就是他原來的位置，使用相對定位移動div時候，會覆蓋其他div
position:absolute;絕對定位，相對于瀏覽器窗口，已經(jīng)脫離文檔流。一般彈出窗口會這么用（設(shè)置了z-index屬性）

層級關(guān)系（圖層關(guān)系）：

HTML元素顯示出圖層關(guān)系，使用z-index屬性，值越大越在上層。
z-index值越大，越在最上層

超出邊界如何處理：

如果瀏覽器窗口改變，overflow屬性，值可以是：visable，hidden，scroll，auto，insert

網(wǎng)站題目：前端開發(fā)基礎(chǔ)
文章地址：http://bm7419.com/article46/pcshhg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、網(wǎng)站收錄、App開發(fā)、營銷型網(wǎng)站建設(shè)、建站公司、搜索引擎優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

搜索引擎優(yōu)化